/* WXK — Wart & Klomfas GbR
   Helles Stylesheet, abgeleitet aus dem Hero-Bild: weisser Beton, warmes
   Tageslicht, Glas, feine Lichtlinien. Anthrazit traegt die Schrift,
   Orange bleibt reiner Akzent. Montserrat als einzige Schrift.

   Bewusst hell: der Hero gibt den Ton vor, eine dunkle Seite darunter
   wuerde den Bruch sichtbar machen. */

@font-face {
  font-family: 'Montserrat';
  src: url('assets/fonts/Montserrat-var.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --tinte: #1F1F1F;        /* Schrift, Marke */
  --tinte-weich: #4A4A4A;  /* Fliesstext */
  --grau: #6E6E6E;         /* Beiwerk */
  --papier: #FFFFFF;       /* Grundflaeche */
  --papier-warm: #F7F5F2;  /* abgesetzte Baender, Betonton */
  --papier-kalt: #F1F2F4;  /* Karten */
  --linie: #E2E0DD;
  --orange: #FF6A00;
  --orange-tief: #E05E00;  /* Text auf Weiss: kontrastsicher */
  --radius: 4px;
  --max: 1280px;
  --kopf: 84px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 12px); }

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font: 400 17px/1.65 Montserrat, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button, a { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
a { color: inherit; text-underline-offset: 5px; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.022em;
  text-wrap: balance;
}
h1 { font-size: clamp(38px, 4.6vw, 66px); }
h2 { font-size: clamp(28px, 3.2vw, 44px); }
h3 { font-size: 21px; font-weight: 650; letter-spacing: -0.01em; }
p { color: var(--tinte-weich); max-width: 66ch; }

.wrap { width: min(var(--max), calc(100% - 88px)); margin-inline: auto; }
.section { padding-block: 96px; }
.section.warm { background: var(--papier-warm); }

/* ---------- Bausteine ---------- */

.kicker {
  display: block;
  margin-bottom: 14px;
  font-size: 12.5px;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--orange-tief);
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 26px;
  border: 1px solid var(--tinte);
  border-radius: var(--radius);
  background: var(--tinte);
  color: #fff;
  font-size: 15.5px;
  font-weight: 600;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.button:hover { background: var(--orange); border-color: var(--orange); }

.button.secondary {
  background: transparent;
  color: var(--tinte);
  border-color: var(--linie);
}
.button.secondary:hover { border-color: var(--tinte); background: transparent; color: var(--tinte); }

.actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; }

/* ---------- Kopf ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: rgba(255,255,255,.88);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--linie);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  min-height: var(--kopf);
}
.brand img { width: 132px; height: auto; }

.main-nav { display: flex; gap: 28px; }
.main-nav a {
  font-size: 15px;
  font-weight: 550;
  text-decoration: none;
  color: var(--tinte-weich);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
}
.main-nav a:hover { color: var(--tinte); }
.main-nav a[aria-current="page"] { color: var(--tinte); border-bottom-color: var(--orange); }

.menu-toggle {
  display: none;
  border: 1px solid var(--linie);
  background: transparent;
  color: var(--tinte);
  border-radius: var(--radius);
  padding: 9px 15px;
  font-size: 14.5px;
  font-weight: 600;
}
.mobile-menu { display: none; }

.skip {
  position: absolute; left: -9999px;
  background: var(--tinte); color: #fff; padding: 12px 18px; z-index: 60;
}
.skip:focus { left: 16px; top: 12px; }

:where(a, button, input, textarea):focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Hero ---------- */

.hero { position: relative; background: var(--papier-warm); }
.hero-bild {
  width: 100%;
  height: clamp(420px, 62vh, 660px);
  object-fit: cover;
  object-position: center;
}
.hero-inhalt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero-inhalt > * { max-width: 40ch; }
.hero-marke {
  font-size: 12.5px; font-weight: 650; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--tinte-weich); margin-bottom: 16px;
}
.hero h1 .akzent { display: block; color: var(--orange-tief); }
.hero-text { margin-top: 20px; font-size: 18.5px; color: var(--tinte-weich); }

/* Das Hero-Bild ist links hell und ruhig — dort steht die Schrift.
   Der weiche Verlauf sichert die Lesbarkeit auch bei anderen Motiven. */
.hero-schleier {
  position: absolute; inset: 0;
  background: linear-gradient(100deg,
    rgba(255,255,255,.94) 0%,
    rgba(255,255,255,.86) 34%,
    rgba(255,255,255,.34) 58%,
    rgba(255,255,255,0) 78%);
  pointer-events: none;
}

/* ---------- Abteilungen ---------- */

.felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 26px;
}

.feld {
  display: flex;
  flex-direction: column;
  background: var(--papier);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.feld:hover {
  border-color: #CFCCC8;
  transform: translateY(-3px);
  box-shadow: 0 14px 40px rgba(31,31,31,.09);
}

.feld-bild { aspect-ratio: 16/9; width: 100%; object-fit: cover; }
.feld-kopf { padding: 30px 30px 34px; display: flex; flex-direction: column; flex: 1; }

.feld-name {
  font-size: 19px; font-weight: 750; letter-spacing: -0.01em; margin-bottom: 12px;
}
.feld-name span { color: var(--orange); }
.feld h3 { margin-bottom: 10px; }
.zielgruppe {
  font-size: 13px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--grau); margin-bottom: 14px;
}
.beschreibung { font-size: 16px; margin-bottom: 22px; }
.feld .button { align-self: flex-start; margin-top: auto; }

/* ---------- Inhaltsblöcke ---------- */

.blatt {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 60px;
  align-items: center;
}
.blatt.gedreht > :first-child { order: 2; }
.blatt img { border-radius: var(--radius); border: 1px solid var(--linie); }

.liste { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 15px; }
.liste li {
  position: relative; padding-left: 30px;
  color: var(--tinte-weich); font-size: 16.5px;
}
.liste li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 13px; height: 2px; background: var(--orange);
}

.karten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 44px;
}
.karte {
  background: var(--papier-kalt);
  border: 1px solid var(--linie);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.karte .nummer {
  display: block; font-size: 13px; font-weight: 700;
  letter-spacing: .1em; color: var(--orange-tief); margin-bottom: 12px;
}
.karte h3 { margin-bottom: 9px; }
.karte p { font-size: 15.5px; }

/* ---------- Team ---------- */

.koepfe { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 30px; margin-top: 44px; }
.kopf img { border-radius: var(--radius); aspect-ratio: 3/2; object-fit: cover; border: 1px solid var(--linie); }
.kopf h3 { margin-top: 18px; }
.kopf .rolle { font-size: 14px; font-weight: 600; color: var(--orange-tief); margin-top: 4px; letter-spacing: .03em; }
.kopf p { font-size: 15.5px; margin-top: 10px; }

/* ---------- Abschluss ---------- */

.schluss {
  background: var(--tinte);
  color: #fff;
  border-radius: var(--radius);
  padding: 64px 56px;
  text-align: center;
}
.schluss h2 { color: #fff; }
.schluss p { color: #C9C7C4; margin-inline: auto; margin-top: 16px; }
.schluss .actions { justify-content: center; }
.schluss .button { background: var(--orange); border-color: var(--orange); }
.schluss .button:hover { background: #fff; border-color: #fff; color: var(--tinte); }
.schluss .button.secondary { background: transparent; border-color: #5A5A5A; color: #fff; }
.schluss .button.secondary:hover { border-color: #fff; color: #fff; }

/* ---------- Fuss ---------- */

.site-footer {
  border-top: 1px solid var(--linie);
  background: var(--papier-warm);
  padding-block: 44px;
  margin-top: 96px;
}
.footer-inner { display: flex; flex-wrap: wrap; gap: 26px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--tinte-weich); font-size: 14.5px; text-decoration: none; }
.site-footer a:hover { color: var(--tinte); text-decoration: underline; }
.footer-links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer-firma { font-size: 14.5px; color: var(--grau); }

/* ---------- Schmal ---------- */

@media (max-width: 900px) {
  .blatt { grid-template-columns: 1fr; gap: 34px; }
  .blatt.gedreht > :first-child { order: 0; }
}

@media (max-width: 767px) {
  .wrap { width: calc(100% - 40px); }
  .section { padding-block: 64px; }
  .main-nav { display: none; }
  .menu-toggle { display: inline-flex; }
  .mobile-menu {
    display: none; flex-direction: column; gap: 4px;
    padding: 12px 20px 22px; border-top: 1px solid var(--linie);
    background: var(--papier);
  }
  .mobile-menu:not([hidden]) { display: flex; }
  .mobile-menu a { padding: 12px 0; text-decoration: none; font-weight: 550; border-bottom: 1px solid var(--linie); }
  .hero-bild { height: clamp(460px, 76vh, 620px); }
  .hero-inhalt > * { max-width: 100%; }
  .hero-schleier {
    background: linear-gradient(180deg,
      rgba(255,255,255,.93) 0%,
      rgba(255,255,255,.88) 52%,
      rgba(255,255,255,.55) 100%);
  }
  .schluss { padding: 46px 26px; }
}

/* ---------- Stationen-Fahrt (Startseite) ----------
   Mechanik aus der bestehenden KIBAU-Startseite (stationen.css/js) uebernommen:
   die Sektion ist hoch, die Szene klebt darin bei top 0, der Scroll-Fortschritt
   blendet die Stationen nacheinander ein. Neu ist nur die Farbwelt: Das
   WXK-Hero ist hell, deshalb traegt hier ein WEISSER Schleier die Lesbarkeit
   statt des frueheren schwarzen Verlaufs, und die Schrift ist Anthrazit. */

.wt { position: relative; height: 240dvh; }
.wt-szene {
  position: sticky; top: 0; height: 100dvh; min-height: 560px;
  overflow: hidden; background: var(--papier-warm); isolation: isolate;
}
.wt-folge { position: absolute; inset: 0; will-change: transform; transform-origin: center; }
.wt-bild {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Die Szene muss den ersten Sichtbereich vollständig tragen. `contain` erzeugte
     besonders mobil fast einen halben Bildschirm Leerfläche und ließ den
     Scroll-Effekt verspätet wirken. Der Bildfokus hält die WXK-Wandmarke im Bild. */
  object-fit: cover; object-position: center; display: block;
}
.wt-szene::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  opacity: var(--scrim, 1); transition: opacity .3s ease;
  background:
    linear-gradient(100deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.9) 30%,
                    rgba(255,255,255,.45) 56%, rgba(255,255,255,0) 76%),
    linear-gradient(0deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,0) 30%);
}
.wt-stationen { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.wt-station {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  justify-content: center; padding-inline: clamp(20px, 6vw, 90px);
  max-width: min(640px, 50%);
  opacity: 0; transform: translateY(14px);
  transition: opacity .28s ease, transform .28s ease; pointer-events: none;
}
.wt-station--aktiv { opacity: 1; transform: none; pointer-events: auto; }
.wt-zeichen {
  display: block; margin-bottom: 14px; font-weight: 700; font-size: 12.5px;
  letter-spacing: .16em; color: var(--orange-tief); text-transform: uppercase;
}
.wt-titel {
  font-size: clamp(1.9rem, 3.6vw, 3.2rem); line-height: 1.05;
  max-width: 15ch; margin: 0; color: var(--tinte); font-weight: 700;
  letter-spacing: -0.022em;
}
.wt-station--start .wt-titel .akzent { color: var(--orange-tief); display: block; }
.wt-text {
  margin-top: 18px; font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.6; color: var(--tinte-weich); max-width: 42ch;
}
.wt-station .actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }
.wt-schiene {
  position: absolute; left: clamp(20px, 6vw, 90px); right: clamp(20px, 6vw, 90px);
  bottom: 30px; z-index: 5; height: 2px; background: rgba(31,31,31,.14);
}
.wt-schiene-fuellung { display: block; height: 100%; width: 0; background: var(--orange); }

@media (max-width: 1000px) {
  .wt { height: 220dvh; }
  .wt-bild { object-fit: cover; object-position: 69% center; }
  .wt-szene::before {
    background: linear-gradient(180deg, rgba(255,255,255,.55) 0%,
                rgba(255,255,255,.72) 34%, rgba(255,255,255,.95) 66%,
                rgba(255,255,255,.98) 100%);
  }
  .wt-station {
    max-width: none; inset: 0; justify-content: flex-end;
    padding-top: 108px; padding-bottom: 96px;
  }
  .wt-titel { max-width: 18ch; font-size: clamp(1.85rem, 8.2vw, 2.45rem); }
  .wt-text { max-width: 34ch; font-size: 1.02rem; }
}

/* Ohne Bewegung: Stationen als normale Abschnitte unter einem ruhigen Bild.
   Kein Scroll-Entfuehren, nichts unsichtbar. */
@media (prefers-reduced-motion: reduce) {
  .wt { height: auto; }
  .wt-szene { position: static; height: auto; }
  .wt-folge { position: relative; height: 52vh; }
  .wt-schiene { display: none; }
  .wt-stationen { position: static; display: grid; }
  .wt-station {
    position: static; opacity: 1; transform: none; pointer-events: auto;
    max-width: none; padding-block: 44px;
  }
  .wt-szene::before { display: none; }
}

/* Der Kopf steht ueber der Szene, nicht davor. */
.site-header.ueber-szene { background: transparent; border-bottom-color: transparent; }
.site-header.ueber-szene.gerollt {
  background: rgba(255,255,255,.93);
  backdrop-filter: saturate(150%) blur(14px);
  border-bottom-color: var(--linie);
}

/* ---------- Schmerz und Lösung ---------- */

.paare { display: grid; gap: 22px; margin-top: 44px; }
.paar {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden;
}
.paar > div { padding: 30px 32px; }
.paar .schmerz { background: var(--papier-kalt); }
.paar .loesung { background: var(--papier); border-left: 1px solid var(--linie); }
.paar .marke {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; margin-bottom: 10px;
}
.paar .schmerz .marke { color: var(--grau); }
.paar .loesung .marke { color: var(--orange-tief); }
.paar h3 { margin-bottom: 8px; }
.paar p { font-size: 16px; margin: 0; }

@media (max-width: 767px) {
  .paar { grid-template-columns: 1fr; }
  .paar .loesung { border-left: 0; border-top: 1px solid var(--linie); }
  .paar > div { padding: 24px 22px; }
}

/* ---------- Abteilungsliste mit echten Produktansichten ---------- */

.abteilungen { display: grid; gap: 22px; margin-top: 44px; }
.abteilung-zeile {
  display: grid; grid-template-columns: minmax(360px, 44%) 1fr auto; gap: 34px;
  align-items: center; min-height: 300px; padding: 24px 28px 24px 24px;
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier); text-decoration: none; color: inherit;
  overflow: hidden;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.abteilung-zeile:hover {
  border-color: #CFCCC8; transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(31,31,31,.08);
}

.produktbild {
  position: relative; min-width: 0; height: 252px; overflow: hidden;
  border: 1px solid var(--linie); border-radius: 3px; background: #ECEAE6;
}
.produktbild > img { width: 100%; height: 100%; object-fit: cover; }
.abteilung-zeile .abteilung-inhalt { min-width: 0; }
.abteilung-zeile .name {
  font-size: 19px; font-weight: 750; letter-spacing: -0.01em; margin-bottom: 8px;
}
.abteilung-zeile .name span { color: var(--orange); }
.abteilung-zeile h3 { margin-bottom: 8px; }
.abteilung-zeile p { font-size: 16px; margin: 0; }
.abteilung-zeile .ab-preis {
  display: block; margin-top: 12px; font-size: 14.5px;
  font-weight: 650; color: var(--tinte);
}
.abteilung-zeile .ab-preis em { font-style: normal; color: var(--grau); font-weight: 500; }
.pfeil {
  font-size: 15px; font-weight: 650; white-space: nowrap;
  color: var(--tinte); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 12px 20px;
}
.abteilung-zeile:hover .pfeil { border-color: var(--tinte); }

/* Visibility: echte Suchinformation vor einer lokalen Kartenansicht. */
.produktbild--visibility > img { object-position: center 54%; filter: saturate(.7) contrast(.92); }
.produktbild--visibility::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(247,245,242,.96) 0 48%, rgba(247,245,242,.18) 78%);
}
.lokalsuche {
  position: absolute; z-index: 2; inset: 20px auto 20px 20px; width: min(66%, 300px);
  display: grid; grid-template-rows: auto auto 1fr; background: #fff;
  border: 1px solid #D7D4D0; box-shadow: 0 14px 30px rgba(31,31,31,.14);
}
.suchfeld { padding: 11px 13px; border-bottom: 1px solid var(--linie); font-size: 11px; color: var(--grau); }
.suchfeld::before { content: "⌕"; margin-right: 8px; color: var(--orange-tief); font-size: 15px; }
.suchtreffer { display: grid; gap: 8px; padding: 12px 13px; }
.suchtreffer strong, .suchtreffer span { display: block; }
.suchtreffer strong { font-size: 13px; line-height: 1.2; }
.suchtreffer div span, .bewertung small { font-size: 9px; color: var(--grau); margin-top: 3px; }
.bewertung { font-size: 10px; color: var(--orange-tief); letter-spacing: .02em; }
.bewertung b { display: inline; color: var(--tinte); font-size: 11px; }
.minikarte { position: relative; overflow: hidden; min-height: 78px; background: #ECEBE7; border-top: 1px solid var(--linie); }
.minikarte::before, .minikarte::after { content: ""; position: absolute; background: #fff; transform: rotate(-9deg); }
.minikarte::before { width: 120%; height: 10px; left: -10%; top: 35px; }
.minikarte::after { width: 8px; height: 150%; left: 40%; top: -20%; transform: rotate(28deg); }
.kartenlinie { position: absolute; z-index: 1; height: 2px; background: #D2D0CB; transform-origin: left; }
.kartenlinie--eins { width: 58px; left: 8px; top: 20px; transform: rotate(18deg); }
.kartenlinie--zwei { width: 70px; right: 5px; bottom: 16px; transform: rotate(-14deg); }
.kartenpin { position: absolute; z-index: 2; left: 61%; top: 19px; width: 15px; height: 15px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--orange); box-shadow: 0 2px 5px rgba(31,31,31,.2); }
.minikarte b { position: absolute; z-index: 2; right: 7px; top: 7px; padding: 4px 7px; background: var(--tinte); color: #fff; font-size: 8px; font-weight: 650; }

/* Build: die vorhandene echte Desktop/Mobil-Darstellung bleibt der Star. */
.produktbild--build { height: 270px; margin-block: -9px; background: #E8E2D9; }
.produktbild--build > img { object-position: center; }
.geraet-label, .content-status {
  position: absolute; padding: 5px 8px; background: rgba(255,255,255,.94);
  border: 1px solid rgba(31,31,31,.14); color: var(--tinte); font-size: 9px; font-weight: 700;
  box-shadow: 0 4px 12px rgba(31,31,31,.08);
}
.geraet-label--desktop { left: 46%; top: 28%; }
.geraet-label--mobil { right: 9%; top: 48%; }
.content-status { left: 14px; bottom: 14px; color: var(--grau); }
.content-status b { color: var(--orange-tief); }

/* Loyalty: Punkte und konkrete Prämie ergänzen das echte Handy-Motiv. */
.produktbild--loyalty { height: 286px; margin-block: -17px; }
.produktbild--loyalty > img { object-position: 58% center; }
.produktbild--loyalty::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 35%, rgba(31,31,31,.1)); pointer-events: none; }
.punktekarte {
  position: absolute; z-index: 2; right: 16px; bottom: 16px; width: 194px;
  padding: 15px; background: rgba(31,31,31,.94); color: #fff;
  box-shadow: 0 14px 26px rgba(31,31,31,.22);
}
.punktekarte > span { display: block; font-size: 9px; letter-spacing: .08em; text-transform: uppercase; color: #C9C7C4; }
.punktekarte > strong { display: block; margin-top: 3px; font-size: 17px; }
.punktekarte > b { display: block; margin-top: 10px; color: #fff; font-size: 9px; font-weight: 600; }
.punktreihe { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin-top: 10px; }
.punktreihe i { aspect-ratio: 1; border-radius: 50%; background: var(--orange); }
.punktreihe i.offen { background: transparent; border: 1px solid #777; }

/* Tax: das Motiv wird zur klaren Übergabekette bis in die Kanzlei. */
.produktbild--tax { height: 250px; }
.produktbild--tax > img { object-position: center 55%; }
.belegfluss {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  display: grid; grid-template-columns: 1fr 22px 1fr 22px 1fr; align-items: stretch;
  background: rgba(255,255,255,.96); border: 1px solid #D7D4D0;
  box-shadow: 0 10px 24px rgba(31,31,31,.13);
}
.belegfluss span { display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 10px 8px; font-size: 8.5px; line-height: 1.25; color: var(--tinte); }
.belegfluss span b { color: var(--orange-tief); font-size: 9px; margin-bottom: 3px; }
.belegfluss i { position: relative; background: var(--papier-warm); }
.belegfluss i::before { content: ""; position: absolute; left: 6px; top: 50%; width: 9px; height: 1px; background: var(--orange); }
.belegfluss i::after { content: ""; position: absolute; right: 5px; top: calc(50% - 2px); width: 4px; height: 4px; border-top: 1px solid var(--orange); border-right: 1px solid var(--orange); transform: rotate(45deg); }

.bald {
  display: inline-block; margin-left: 10px; padding: 3px 10px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--papier-kalt); border: 1px solid var(--linie);
  border-radius: 999px; color: var(--grau); vertical-align: middle;
}

@media (max-width: 1060px) {
  .abteilung-zeile { grid-template-columns: minmax(330px, 44%) 1fr; }
  .abteilung-zeile .pfeil { grid-column: 2; justify-self: start; }
}

@media (max-width: 760px) {
  .abteilung-zeile { grid-template-columns: 1fr; min-height: 0; gap: 20px; padding: 18px; }
  .abteilung-zeile .pfeil { grid-column: 1; justify-self: start; }
  .produktbild, .produktbild--build, .produktbild--loyalty, .produktbild--tax { width: 100%; height: clamp(224px, 68vw, 286px); margin-block: 0; }
}

@media (max-width: 389px) {
  .abteilung-zeile { padding: 14px; }
  .produktbild, .produktbild--build, .produktbild--loyalty, .produktbild--tax { height: 222px; }
  .lokalsuche { inset: 12px auto 12px 12px; width: calc(100% - 56px); }
  .punktekarte { right: 10px; bottom: 10px; width: 176px; padding: 12px; }
  .belegfluss { left: 7px; right: 7px; bottom: 7px; grid-template-columns: 1fr 16px 1fr 16px 1fr; }
  .belegfluss span { padding: 8px 5px; font-size: 7.5px; overflow-wrap: anywhere; }
  .belegfluss i::before { left: 3px; width: 8px; }
  .belegfluss i::after { right: 3px; }
  .geraet-label--desktop { left: 42%; }
  .content-status { left: 8px; bottom: 8px; max-width: calc(100% - 16px); }
}

/* ---------- Kundenfall mit Video ---------- */

.fall { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.fall-zahlen { display: flex; gap: 40px; margin: 28px 0 8px; flex-wrap: wrap; }
.fall-zahlen div { display: flex; flex-direction: column; }
.fall-zahlen strong { font-size: 34px; font-weight: 750; letter-spacing: -0.02em; line-height: 1; }
.fall-zahlen span { font-size: 14.5px; color: var(--grau); margin-top: 6px; }
.fall-fuss { font-size: 13.5px; color: var(--grau); margin-top: 22px; }
.fall figure { margin: 0; }
.fall video {
  width: 100%; border-radius: var(--radius); display: block;
  border: 1px solid var(--linie); background: #000;
}
.fall figcaption { font-size: 13.5px; color: var(--grau); margin-top: 10px; }

@media (max-width: 900px) { .fall { grid-template-columns: 1fr; gap: 30px; } }

/* ---------- Preise ---------- */

.preis-karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 22px; margin-top: 44px; align-items: start;
}
.preis-karte {
  border: 1px solid var(--linie); border-radius: var(--radius);
  background: var(--papier); padding: 32px 28px 30px;
  display: flex; flex-direction: column; height: 100%;
}
.preis-karte.hervor { border-color: var(--orange); box-shadow: 0 10px 34px rgba(255,106,0,.1); }
.preis-karte .empfehlung {
  display: inline-block; align-self: flex-start; margin-bottom: 14px;
  padding: 4px 11px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
  background: var(--orange); color: #fff; border-radius: 999px;
}
.preis-karte .name { font-size: 18px; font-weight: 750; margin-bottom: 4px; }
.preis-karte .name span { color: var(--orange); }
.preis-karte .fuer { font-size: 14px; color: var(--grau); margin-bottom: 20px; }
.preis-zahl { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.preis-zahl .ab { font-size: 15px; color: var(--grau); font-weight: 600; }
.preis-zahl .betrag { font-size: 42px; font-weight: 750; letter-spacing: -0.03em; line-height: 1; }
.preis-zahl .takt { font-size: 16px; color: var(--grau); font-weight: 600; }
.preis-karte .hinweis { font-size: 13.5px; color: var(--grau); margin-bottom: 22px; }
.preis-karte ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 11px; }
.preis-karte li {
  position: relative; padding-left: 26px; font-size: 15.5px; color: var(--tinte-weich);
}
.preis-karte li::before {
  content: ""; position: absolute; left: 0; top: .6em;
  width: 11px; height: 2px; background: var(--orange);
}
.preis-karte .button { margin-top: auto; align-self: stretch; justify-content: center; }
.preis-karte.bald-karte { background: var(--papier-warm); }
.preis-karte.bald-karte .preis-zahl .betrag { color: var(--grau); font-size: 30px; }

.preis-fuss {
  margin-top: 34px; font-size: 14.5px; color: var(--grau);
  border-top: 1px solid var(--linie); padding-top: 22px;
}

/* ---------- Abteilungs-Hero ----------
   Die Abteilungsbilder tragen den Namen bereits als Schrift an der Wand.
   Ein Textblock darueber wuerde genau dort liegen und beides unlesbar machen
   (im Test auf tax.html sichtbar geworden). Deshalb steht das Bild hier fuer
   sich, und die Botschaft folgt darunter auf ruhigem Grund. */

.hero.abteilung .hero-bild { height: clamp(360px, 54vh, 560px); }
.hero.abteilung .hero-schleier { display: none; }

.nur-vorleser {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

.hero-band { background: var(--papier); border-bottom: 1px solid var(--linie); }
.hero-band-inner { padding-block: 52px 56px; }
.hero-band .hero-marke { margin-bottom: 14px; }
.hero-band .leitsatz {
  font-size: clamp(27px, 3.1vw, 40px);
  font-weight: 700; line-height: 1.12; letter-spacing: -0.02em;
  color: var(--tinte); max-width: 22ch;
}
.hero-band .leitsatz .akzent { color: var(--orange-tief); }
.hero-band .hero-text { margin-top: 18px; font-size: 18px; }
.hero-band .hero-preis {
  margin-top: 16px; font-size: 16px; font-weight: 650; color: var(--tinte);
  border-left: 3px solid var(--orange); padding-left: 14px;
}

@media (max-width: 767px) {
  .hero.abteilung .hero-bild { height: clamp(260px, 38vh, 340px); }
  .hero-band-inner { padding-block: 36px 40px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}