/* =========================================================================
   Startseite closinghub.de, heller Neubau (02.10.2026)
   Richtung: Clay (Buehnen, Seitenraster, schwebende Navigation, Riesen-
   Headline), dazu Linear und Attio (Ruhe, Weiss, Anthrazit). Violett nur
   als Akzent, Produkt-UI als Hauptdarsteller, keine Illustrationen.
   Diese Datei traegt die ganze Startseite; die aelteren Schichten
   (site.css, refinement.css, ...) laden hier nicht.
   Gliederung:
     1. Tokens              6. Hero                 11. Preise
     2. Grundlagen          7. Chip-Reihen          12. Schluss
     3. Bausteine           8. Feature-Buehnen      13. Fusszeile
     4. Seitenraster        9. Workflow             14. Handy
     5. Kopf und Navigation 10. Integrationen       15. Reduzierte Bewegung
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */
:root {
  color-scheme: light;

  --accent:        #6C2BF2;
  --accent-hover:  #5A20D8;
  --accent-soft:   #C0A5FB;
  --tint:          #F1EBFE;
  --tint-weak:     #F7F3FE;

  --ink:           #17102B;
  --ink-2:         #4B4459;
  --ink-3:         #6B6379;
  --ink-4:         #767083;

  --paper:         #FFFFFF;
  --paper-2:       #FAFAFA;
  --warm:          #F6F4F1;   /* grosse Off-White-Buehnen, warm wie bei Clay */
  --nebel:         #F5F3F8;
  --line:          #EDE7F9;
  --line-soft:     #F0EAFB;
  --field-line:    #E7E1F2;
  --line-mid:      #D9CDE6;
  --line-stark:    #BBA1D4;
  --rahmen:        #E6E2EF;   /* Browser-Rahmen und ruhige Karten */
  --raster:        #EBE8F2;   /* Seitenlinien */

  --r-buehne:  40px;
  --r-medien:  24px;
  --r-karte:   20px;
  --r-nav:     14px;
  --r-fenster: 14px;
  --r-knopf:   10px;
  --r-pille:   8px;

  --maxw:    1200px;
  --buehne:  1280px;          /* Buehnen ragen 40px ueber die Seitenlinien */
  --gutter:  clamp(16px, 4vw, 40px);
  --sektion: 120px;

  --shadow-card:    0 1px 2px rgba(23, 16, 43, .05), 0 12px 28px -22px rgba(23, 16, 43, .40);
  --shadow-nav:     0 1px 2px rgba(23, 16, 43, .05), 0 10px 30px -18px rgba(23, 16, 43, .30);
  --shadow-fenster: 0 1px 2px rgba(23, 16, 43, .06), 0 40px 80px -36px rgba(23, 16, 43, .30);

  --ease: cubic-bezier(.16, 1, .3, 1);
  --t-1: 160ms;
  --t-2: 250ms;
  --t-3: 350ms;
  --t-4: 500ms;
  --t-5: 800ms;

  /* Bereichsfarben der Website (aus kopf.css), hier kopiert, weil kopf.css
     auf der Startseite nicht laedt. flaechen.css greift darauf zu. */
  --f-dialer: #6C2BF2;      --f-dialer-bg: #F0E9FE;
  --f-telefonie: #15803D;   --f-telefonie-bg: #E6F4EC;
  --f-leads: #2563EB;       --f-leads-bg: #E8EFFD;
  --f-deal: #C2410C;        --f-deal-bg: #FDEEE3;
  --f-objekte: #0F766E;     --f-objekte-bg: #E1F3F1;
  --f-unterlagen: #B45309;  --f-unterlagen-bg: #FBF1DF;
  --f-kalender: #BE185D;    --f-kalender-bg: #FCE8F1;
  --f-auswertung: #0369A1;  --f-auswertung-bg: #E3F1F9;
}

/* ---------- 2. Grundlagen ------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  position: relative;
  margin: 0;
  font-family: Manrope, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
h1, h2, h3, h4 {
  margin: 0;
  font-family: Outfit, sans-serif;
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.06;
  color: var(--ink);
  text-wrap: balance;
}
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { display: block; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }

.wrap { width: min(var(--maxw), 100% - 2 * var(--gutter)); margin-inline: auto; }
/* Buehne: 1280 breit, ragt 40px ueber die Seitenlinien hinaus. */
.buehne { position: relative; width: min(var(--buehne), 100% - 2 * var(--gutter) + 80px); max-width: calc(100% - 24px); margin-inline: auto; border-radius: var(--r-buehne); }
/* Weisse Ebene hinter jeder Buehne: deckt die Seitenlinien in den Ecken und
   in den Luecken zwischen gestapelten Buehnen ab, damit keine Kerbe entsteht. */
.buehnen-wrap { position: relative; width: min(var(--buehne), 100% - 2 * var(--gutter) + 80px); max-width: calc(100% - 24px); margin-inline: auto; background: var(--paper); }
.buehnen-wrap .buehne { width: 100%; max-width: none; }
/* Halber Abstand oben und unten: zwei Sektionen ergeben zusammen 120px. */
.sektion { position: relative; padding-block: calc(var(--sektion) / 2); border-top: 1px solid var(--raster); scroll-margin-top: 120px; }
.sektion-ohne-linie { border-top: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Sektionskopf der ruhigen Sektionen: zentriert, sehr gross, kurz. */
.kopfzeile { max-width: 820px; margin: 0 auto clamp(40px, 5vw, 60px); text-align: center; }
.kopfzeile .titel { font-size: clamp(38px, 4.6vw, 64px); letter-spacing: -.035em; }
.kopfzeile .lead { max-width: 620px; margin: 20px auto 0; }
.lead { font-size: 18px; line-height: 1.6; color: var(--ink-3); }

/* Einblendung beim Scrollen: nur opacity und transform. */
.ein { opacity: 0; transform: translateY(18px); transition: opacity var(--t-5) var(--ease), transform var(--t-5) var(--ease); }
.ein.ist-da { opacity: 1; transform: none; }
.ein[data-verzug="1"] { transition-delay: 90ms; }
.ein[data-verzug="2"] { transition-delay: 180ms; }
.ein[data-verzug="3"] { transition-delay: 270ms; }

/* ---------- 3. Bausteine ------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: var(--r-knopf);
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  white-space: nowrap;
  transition: background-color var(--t-1) var(--ease), border-color var(--t-1) var(--ease), color var(--t-1) var(--ease);
}
.btn svg { width: 16px; height: 16px; flex: none; transition: transform var(--t-2) var(--ease); }
.btn:hover svg { transform: translateX(3px); }
.btn-primaer { background: var(--knopf, var(--accent)); color: #fff; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 1px 2px rgba(23, 16, 43, .16); }
.btn-primaer:hover { background: var(--knopf-hover, var(--accent-hover)); color: #fff; }
.btn-leise { background: var(--paper); color: var(--ink); border-color: #DCD6EA; }
.btn-leise:hover { background: var(--paper); border-color: #BBA1D4; }
.btn-nav { height: 40px; padding: 0 16px; font-size: 15px; }
.btn-breit { width: 100%; }

/* Textlink mit Pfeil: der Pfeil rueckt 3px, sonst bewegt sich nichts. */
.pfeil-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; font-size: 15.5px; color: var(--accent); }
.pfeil-link svg { width: 16px; height: 16px; transition: transform var(--t-2) var(--ease); }
.pfeil-link:hover svg { transform: translateX(3px); }

/* Pille, 8px Radius, nie voll rund. */
.pille {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  border-radius: var(--r-pille);
  background: var(--tint);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}
.pille-leise { background: var(--nebel); color: var(--ink-3); }
.pille-bald { background: var(--paper); color: var(--ink-3); border: 1px dashed var(--line-stark); }
/* Eyebrow in der tiefen Flaechenfarbe, weisse Versalien 12px. */
.pille-tief { background: var(--farbe-tief, var(--accent)); color: #fff; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; height: 28px; padding: 0 12px; }

/* App-Store-Badge. Nur Apples offizielle Grafik, unveraendert, 40px hoch
   (Apples Mindesthoehe am Bildschirm), rundum mindestens 10px Luft.
   Die Datei ist Apples offizielles deutsches Badge (07.10.2026). */
.app-badge { display: inline-flex; flex: none; height: 40px; border-radius: 8px; }
.app-badge img { display: block; width: auto; height: 40px; }
.hero-app { display: flex; margin-top: 14px; padding-block: 2px; }
.app-laden { display: flex; margin-top: 28px; }
.fuss-app { display: flex; margin-top: 18px; }

/* Browser-Rahmen fuer jedes Produktbild. */
.fenster { border-radius: 16px;
  position: relative;
  border: 1px solid var(--rahmen);
  border-radius: var(--r-fenster);
  background: var(--paper);
  box-shadow: var(--shadow-fenster);
  overflow: hidden;
}
.fenster-leiste {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  border-bottom: 1px solid #EEEAF4;
  background: var(--paper-2);
}
.fenster-leiste i { display: block; width: 10px; height: 10px; border-radius: 50%; background: #E3DEEA; }
.fenster img { display: block; width: 100%; height: auto; }

/* Logo wie im alten Kopf: zwei Kreise plus Wortmarke in Outfit. */
.logo { display: inline-flex; align-items: center; gap: 10px; flex: none; color: var(--ink); }
.logo-mark { display: flex; align-items: center; flex: none; }
.logo-mark i { display: block; width: 24px; height: 24px; border-radius: 999px; background: var(--accent); }
.logo-mark i + i { background: var(--accent-soft); margin-left: -9px; }
.logo-type { font-family: Outfit, sans-serif; font-weight: 600; font-size: 20px; letter-spacing: -.035em; }
.logo-type b { font-weight: 600; color: var(--accent); }


/* Karo-Raster aus der App: 32px-Linien, leicht lila auf dem warmen Grund,
   mit radialer Maske zu einer Ecke hin auslaufend. Eine Handschrift fuer
   Fusszeile, Hero-Buehne und Workflow-Buehne. */
.karo { position: relative; isolation: isolate; overflow: hidden; }
.karo::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--karo-linie, color-mix(in srgb, #6C2BF2 9%, #F6F4F1)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--karo-linie, color-mix(in srgb, #6C2BF2 9%, #F6F4F1)) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
  -webkit-mask-image: var(--karo-maske, radial-gradient(ellipse 70% 80% at 100% 0%, #000 0, rgba(0, 0, 0, .5) 45%, transparent 80%));
  mask-image: var(--karo-maske, radial-gradient(ellipse 70% 80% at 100% 0%, #000 0, rgba(0, 0, 0, .5) 45%, transparent 80%));
}
.hero-buehne.karo { --karo-maske: radial-gradient(ellipse 70% 80% at 0% 0%, #000 0, rgba(0, 0, 0, .5) 45%, transparent 80%); }
.workflow-buehne.karo { --karo-maske: radial-gradient(ellipse 70% 80% at 0% 0%, #000 0, rgba(0, 0, 0, .5) 45%, transparent 80%); }
.fuss.karo { overflow: hidden; }
.fuss.karo > * { position: relative; z-index: 1; }


/* Breite Clips werden nie unter Faktor 0,75 verkleinert: die Karte hat eine
   feste Breite, das Bild liegt 1:1 (halbe Dateibreite) darin, links buendig,
   rechts (und bei hohen Clips unten) weich maskiert. */

/* ---------- 4. Seitenraster ---------------------------------------------- */
/* Zwei duenne senkrechte Linien an den Containerkanten, ueber die ganze
   Seite. Liegt hinter allem; Buehnen decken sie mit ihrer Flaeche ab. */
.raster {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  z-index: 0;
  width: min(var(--maxw), 100% - 2 * var(--gutter));
  transform: translateX(-50%);
  border-left: 1px solid var(--raster);
  border-right: 1px solid var(--raster);
  pointer-events: none;
}
main, .fuss { position: relative; z-index: 1; }

/* ---------- 5. Kopf und Navigation -------------------------------------- */
/* Schwebende Karte. Beim Oeffnen waechst dieselbe Karte nach unten zu einer
   weissen Flaeche mit dem Mega-Menue, kein separates Dropdown. */
.kopf {
  position: sticky;
  top: 0;
  z-index: 60;
  width: min(1360px, 100% - 24px);
  margin: 0 auto;
  border-radius: 0 0 var(--r-nav) var(--r-nav);
  box-shadow: var(--shadow-nav);
}
/* Ankuendigungs-Band: 48px, buendig am oberen Rand wie bei Clay, sitzt direkt auf der Karte. */
.band { height: 48px; border-radius: 0; background: linear-gradient(90deg, #2E1065, #4B18B8); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); color: #fff; }
.band-innen { display: flex; align-items: center; gap: 12px; height: 48px; padding: 0 20px; font-size: 14px; font-weight: 500; }
.band-pille { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 6px; background: rgba(255, 255, 255, .12); color: #C0A5FB; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.band-text { color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.band-kurz { display: none; }
.band-link { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #C0A5FB; white-space: nowrap; }
.band-link svg { width: 14px; height: 14px; transition: transform var(--t-2) var(--ease); }
.band-link:hover svg { transform: translateX(3px); }
/* Die weisse Karte haengt direkt unter dem Band, nur unten gerundet. */
/* Glas (03.10.2026): oben fast deckend, beim Scrollen leicht glaesern.
   Der Weichzeichner sitzt auf ::before statt auf der Karte selbst, sonst
   waere die Karte Backdrop-Root und das Mega-Menue koennte die Seite
   darunter nicht weichzeichnen. */
.kopf-karte {
  position: relative;
  isolation: isolate;
  border: 1px solid var(--rahmen);
  border-top: 0;
  border-radius: 0 0 var(--r-nav) var(--r-nav);
  transition: border-color var(--t-2) var(--ease);
}
.kopf-karte::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(255, 255, 255, .92);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  backdrop-filter: blur(14px) saturate(1.4);
  transition: background var(--t-2) var(--ease);
}
.kopf.ist-fest .kopf-karte { border-color: rgba(230, 226, 239, .7); }
.kopf.ist-fest .kopf-karte::before {
  background: rgba(255, 255, 255, .64);
  -webkit-backdrop-filter: blur(22px) saturate(1.8);
  backdrop-filter: blur(22px) saturate(1.8);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .6);
}
.kopf.ist-offen .kopf-karte { border-radius: 0; border-bottom-color: transparent; }
.kopf.ist-offen .kopf-karte::before { background: rgba(255, 255, 255, .78); }
.kopf-zeile { display: flex; align-items: center; height: 64px; gap: 24px; padding: 0 12px 0 20px; }

.nav { display: flex; align-items: center; gap: 2px; }
.nav-link,
.nav-auf {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 40px;
  padding: 0 12px;
  border-radius: var(--r-pille);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: color var(--t-1) var(--ease), background-color var(--t-1) var(--ease);
}
.nav-link:hover, .nav-auf:hover { background: var(--nebel); }
.nav-auf svg { width: 14px; height: 14px; transition: transform var(--t-2) var(--ease); }
/* Offen: nur der aktive Punkt wird grau, alle anderen bleiben dunkel. */
.nav-auf.ist-aktiv { color: #8A8398; background: transparent; }
.nav-auf.ist-aktiv svg { transform: rotate(180deg); }

/* Das Panel: Hoehe animiert auf den neuen Inhalt, Inhalte kreuzblenden. */
/* Das Panel legt sich ueber den Inhalt: absolut unter der Nav-Zeile, kein Layout-Shift. */
.mega { position: absolute; left: -1px; right: -1px; top: 100%; z-index: 5; height: 0; overflow: hidden; border: 1px solid var(--rahmen); border-top: 0; border-radius: 0 0 24px 24px; background: rgba(255, 255, 255, .78); -webkit-backdrop-filter: blur(28px) saturate(1.8); backdrop-filter: blur(28px) saturate(1.8); box-shadow: var(--shadow-nav); transition: height 220ms var(--ease); }
/* Glas-Overlay: die Seite hinter dem offenen Menue tritt leicht zurueck. */
.kopf::after { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: rgba(23, 16, 43, .10); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity 220ms var(--ease); }
.kopf.ist-offen::after { opacity: 1; }
.kopf:not(.ist-offen) .mega { border: 0; box-shadow: none; }
.mega-panel { position: absolute; left: 0; right: 0; top: 0; display: flex; gap: 40px; align-items: stretch; padding: 32px 28px 28px; opacity: 0; visibility: hidden; transition: opacity 160ms var(--ease), visibility 0s linear 160ms; }
.mega-panel.ist-an { opacity: 1; visibility: visible; transition-delay: 0s; }
.mega-spalten { display: flex; gap: 48px; flex: 1; min-width: 0; }
.mega-spalte { min-width: 170px; }
.mega-label { margin: 0 0 16px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #8A8398; }
.mega-spalte > a { display: flex; align-items: center; gap: 12px; height: 44px; font-size: 16px; font-weight: 500; color: var(--ink); transition: color var(--t-1) var(--ease); }
.mega-spalte > a:hover { color: var(--accent); }
.mega-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 24px; height: 24px; border-radius: 7px; background: var(--f-bg, var(--tint)); color: var(--f, var(--accent)); }
.mega-icon svg { width: 14px; height: 14px; }
.mega-karte { flex: none; width: 420px; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px; background: var(--ink); color: #fff; }
.mega-karte img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: left top; }
.mega-karte-text { display: block; padding: 18px 22px 20px; }
.mega-karte-text small { display: block; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--accent-soft); margin-bottom: 6px; }
.mega-karte-text span { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; }

.kopf-aktion { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.anmelden { display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: var(--r-pille); font-size: 15px; font-weight: 500; color: var(--ink-2); }
.anmelden:hover { color: var(--ink); background: var(--nebel); }

.menue-knopf { display: none; position: relative; width: 40px; height: 40px; border-radius: var(--r-pille); margin-left: auto; }
.menue-knopf i { position: absolute; left: 50%; top: 50%; display: block; width: 20px; height: 1.5px; margin: -1px 0 0 -10px; background: var(--ink); border-radius: 2px; transition: transform var(--t-2) var(--ease), width var(--t-2) var(--ease); }
.menue-knopf i:first-child { transform: translateY(-4px); }
.menue-knopf i + i { width: 14px; transform: translateY(4px); }
.menue-knopf[aria-expanded="true"] i:first-child { transform: rotate(45deg); }
.menue-knopf[aria-expanded="true"] i + i { width: 20px; transform: rotate(-45deg); }

/* Handy-Menue: Vollbild-Liste, die Panels als aufklappbare Gruppen. */
.menue { position: fixed; inset: 124px 0 0; z-index: 55; overflow-y: auto; padding: 4px var(--gutter) 40px; background: var(--paper); display: none; }
.menue.ist-offen { display: block; }
.menue-gruppe { border-bottom: 1px solid var(--line); }
.menue-gruppe summary { display: flex; align-items: center; justify-content: space-between; height: 52px; font-size: 17px; font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; }
.menue-gruppe summary::-webkit-details-marker { display: none; }
.menue-gruppe summary svg { width: 16px; height: 16px; color: var(--ink-4); transition: transform var(--t-2) var(--ease); }
.menue-gruppe[open] summary svg { transform: rotate(180deg); }
.menue-liste { padding: 0 0 10px; }
.menue-liste a { display: flex; align-items: center; gap: 12px; height: 44px; font-size: 16px; font-weight: 500; color: var(--ink); }
.menue-link { display: flex; align-items: center; height: 52px; border-bottom: 1px solid var(--line); font-size: 17px; font-weight: 600; color: var(--ink); }
.menue-aktion { display: grid; gap: 10px; padding-top: 20px; }

/* ---------- 6. Hero ------------------------------------------------------ */
.hero { position: relative; padding: clamp(56px, 7vw, 104px) 0 0; }
/* Geldscheine als leise Ebene hinter Headline und Spalte: Multiply nimmt
   den weissen Grund weg, die Maske haelt die Mitte hinter der Schrift frei,
   der Drift laeuft ueber --scheine-y aus dem Scroll-Anteil. */
.hero-scheine {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("/assets/img/scheine-frei.webp?v=2") center / cover no-repeat;
  opacity: .11;
  filter: blur(1px);
  -webkit-mask-image: radial-gradient(ellipse 55% 60% at 42% 50%, transparent 0, #000 70%);
  mask-image: radial-gradient(ellipse 55% 60% at 42% 50%, transparent 0, #000 70%);
  transform: translateY(var(--scheine-y, 0));
  pointer-events: none;
}
.hero-oben, .hero .buehnen-wrap { position: relative; z-index: 1; }
.hero-oben { display: grid; grid-template-columns: minmax(0, 680px) 420px; column-gap: 96px; justify-content: space-between; align-items: end; }
.hero h1 { font-size: clamp(48px, 5vw, 72px); line-height: 1.05; letter-spacing: -.03em; text-wrap: balance; }
.hero h1 span { display: block; white-space: nowrap; }
.hero-seite { align-self: stretch; display: flex; flex-direction: column; justify-content: space-between; padding-top: 12px; }
.hero-seite .lead { font-size: 20px; line-height: 1.4; color: var(--ink-2); }
.hero-knoepfe { display: flex; flex-wrap: nowrap; gap: 12px; margin-top: auto; }
.hero-zeile { display: flex; flex-wrap: wrap; gap: 6px 10px; margin-top: auto; font-size: 14.5px; line-height: 1.2; color: var(--ink-3); }
.hero-zeile span + span::before { content: "·"; margin-right: 10px; color: var(--line-stark); }

/* Grosse warme Buehne, Produktfenster oben 48px, unten angeschnitten. */
.hero-buehne { margin-top: clamp(40px, 5vw, 64px); padding: 48px 48px 0; background: var(--warm); overflow: hidden; }
.hero-schnitt { position: relative; max-height: clamp(360px, 44vw, 620px); overflow: hidden; }
.hero-schnitt .fenster { border-bottom-left-radius: 0; border-bottom-right-radius: 0; border-bottom: 0; }
.hero .fenster img, .schluss-buehne .fenster img { border-radius: 16px 16px 0 0; }
.hero .fenster img { aspect-ratio: 2880 / 1800; object-fit: cover; object-position: top; }

/* ---------- 7. Chip-Reihen ---------------------------------------------- */
.lauf-sektion { padding-block: 48px 60px; }
.lauf-kopf { text-align: center; font-size: 15px; font-weight: 600; color: var(--ink-3); margin-bottom: 20px; }
.lauf { overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.lauf + .lauf { margin-top: 10px; }
.lauf-spur { display: flex; width: max-content; animation: lauf 48s linear infinite; }
.lauf-rueck .lauf-spur { animation-direction: reverse; }
.lauf:hover .lauf-spur { animation-play-state: paused; }
@keyframes lauf { to { transform: translateX(-50%); } }
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  margin-right: 10px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-pille);
  background: var(--paper);
  font-size: 14.5px;
  font-weight: 500;
  color: var(--ink-2);
  white-space: nowrap;
}
.chip svg { width: 16px; height: 16px; color: var(--f, var(--ink-4)); flex: none; }

/* ---------- 8. Feature-Buehnen ------------------------------------------ */
.buehnen { display: grid; gap: 16px; }
.feature {
  --farbe: var(--flaeche-violett, #7c3aed);
  --farbe-tief: var(--flaeche-violett-tief, #6c2bf2);
  --anteil: 8%;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
  padding: 56px;
  background: color-mix(in srgb, var(--farbe) var(--anteil), var(--paper));
}
.feature-gelb    { --farbe: var(--flaeche-gelb, #f59e0b);  --farbe-tief: var(--flaeche-gelb-tief, #d97706); --anteil: 10%; }
.feature-violett { --farbe: var(--flaeche-violett, #7c3aed); --farbe-tief: var(--flaeche-violett-tief, #6c2bf2); }
.feature-blau    { --farbe: var(--flaeche-blau, #38bdf8);  --farbe-tief: var(--flaeche-blau-tief, #0284c7); }
.feature-rosa    { --farbe: var(--flaeche-rosa, #ec4899);  --farbe-tief: var(--flaeche-rosa-tief, #be185d); }
.feature-text { display: flex; flex-direction: column; align-items: flex-start; padding-block: 8px; }
.feature-text h2 { margin-top: 22px; font-size: clamp(32px, 3.4vw, 46px); }
.feature-text h2 em { font-style: normal; color: var(--farbe-tief); }
.feature-text .lead { margin-top: 18px; max-width: 480px; color: var(--ink-2); }
.punkte { display: grid; gap: 10px; margin-top: 24px; }
.punkte li { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; color: var(--ink-2); }
.punkte svg { width: 18px; height: 18px; flex: none; margin-top: 3px; color: var(--farbe-tief); }
.feature-mehr { margin-top: auto; padding-top: 36px; }
.feature-mehr .pfeil-link { font-size: 16px; color: var(--farbe-tief); }

/* Medienflaeche rechts: reicht bis an den Buehnenrand, das Fenster liegt
   mit 130 % Breite darin und laeuft rechts und unten ueber die Buehne hinaus.
   Darueber drei bis vier schwebende Ebenen, gestaffelt eingeblendet. */
.feature { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); padding-right: 0; }
.feature-medien {
  position: relative;
  min-height: 760px;
  border-radius: var(--r-medien) 0 0 var(--r-medien);
  background: color-mix(in srgb, var(--farbe) 18%, var(--paper));
}
.medien-schnitt { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; }
/* Das Fenster reicht immer unter den Medienrand, damit unten weder Rand
   noch Schatten sichtbar werden. */
.feature-medien .ebene-fenster { position: absolute; top: 56px; bottom: 0; left: 56px; width: 130%; display: block; border: 0; border-radius: 16px 0 0 0; box-shadow: none; background: transparent; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 95%); mask-image: linear-gradient(to bottom, #000 55%, transparent 95%); }
.feature-medien .ebene-fenster .fenster-leiste { display: none; }
.feature-medien .ebene-fenster img { width: 100%; height: 100%; object-fit: cover; object-position: top left; border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; }
.feature .ebene { border-color: color-mix(in srgb, var(--farbe) 25%, transparent); }
.ebene {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  border: 6px solid var(--paper);
  border-radius: 16px;
  background: var(--paper);
  box-shadow: 0 1px 2px rgba(23, 16, 43, .06), 0 30px 60px -28px rgba(23, 16, 43, .45);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease);
  transition-delay: calc(var(--n, 0) * 80ms + 120ms);
}
.feature.ist-da .ebene { opacity: 1; transform: none; }
.ebene img { display: block; border-radius: 10px; }
/* Genau zwei Karten je Buehne: Karte 1 unten links ueber die Fensterkante,
   Karte 2 oben rechts ueber die Buehnenkante. Immer in voller Breite, nie
   beschnitten, nie uebereinander. */
.ebene img { width: 100%; height: auto; }
.eb-eins { left: -48px; bottom: 32px; }
.eb-zwei { right: -40px; top: 80px; }
.eb-b620 { width: 560px; }
.eb-b520h { width: 520px; height: 260px; }
.eb-b661 { width: 661px; height: 260px; }
.eb-b618h { width: 618px; height: 250px; }
.eb-b360h { width: 360px; height: 200px; top: 60px; }
.eb-b460 { width: 460px; }
.eb-b420 { width: 420px; }
.eb-b400 { width: 400px; }
.eb-b340 { width: 340px; }
.eb-b288 { width: 288px; }
.eb-html { width: 270px; padding: 12px; }
.mini-knoepfe .mini-knopf { flex: 1; }
/* HTML-Karten im Stil der App */
.mini-anruf, .mini-vorlage { display: grid; gap: 10px; }
.mini-knoepfe { display: flex; gap: 6px; }
.mini-knopf-leise { background: var(--nebel); color: var(--ink-2); }
.mini-knopf-rot { background: #E11D48; }
.mini-feld { padding: 8px 10px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--field-line); font-size: 12.5px; color: var(--ink); }
.mini-feld small { display: block; font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.mini-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mini-kachel { padding: 10px; border-radius: 12px; border: 1px solid var(--line-mid); background: color-mix(in srgb, var(--farbe) 8%, var(--paper)); }
.mini-kachel small { display: block; margin-top: 8px; font-size: 11px; font-weight: 600; color: var(--ink); }
.mini-kachel b { display: block; font-family: Outfit, sans-serif; font-size: 24px; font-weight: 500; line-height: 1.1; color: var(--ink); }
.mini-kachel em { display: block; font-style: normal; font-size: 10.5px; color: var(--farbe-tief); }

/* ---------- 8a. Ein System (Aufbau nach Clays Rotations-Modul) ------------ */
.system .kopfzeile { margin-bottom: 36px; }
.flow-text { display: grid; justify-items: center; margin-top: 20px; }
.flow-satz { grid-area: 1 / 1; max-width: 34rem; margin: 0 auto; font-size: 18px; line-height: 1.6; color: var(--ink-3); text-align: center; }
.flow-satz[hidden] { display: block; opacity: 0; visibility: hidden; }

/* Chip-Streifen: die Liste wird geklont, der aktive Chip steht mittig. */
.flow-reiter-wrap { position: relative; width: min(1280px, 100% - 2 * var(--gutter)); margin: 0 auto 60px; overflow: hidden; user-select: none; }
.flow-reiter-spur { display: flex; flex-wrap: nowrap; will-change: transform; }
.flow-reiter { display: flex; flex: none; gap: 8px; padding-right: 8px; }
.flow-chip {
  --farbe: var(--accent); --buehne: var(--accent-soft);
  flex: none;
  height: 42px;
  padding: 0 18px;
  border-radius: 12px;
  background: #F3F1F7;
  color: var(--ink);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
}
.flow-chip:hover { background: #ECE9F1; }
.flow-chip.ist-an { background: color-mix(in srgb, var(--buehne) 25%, #fff); color: var(--farbe); }
.flow-schatten { position: absolute; top: 0; bottom: 0; width: 25%; pointer-events: none; }
.flow-schatten-links { left: 0; background: linear-gradient(to right, var(--paper), transparent); }
.flow-schatten-rechts { right: 0; background: linear-gradient(to left, var(--paper), transparent); }

/* Farben: Flaechenfarbe voll fuer die Buehne, tiefe Bereichsfarbe fuer Text. */
[data-bereich="leads"]       { --farbe: var(--f-leads);      --buehne: #38bdf8; }
[data-bereich="aufgaben"]    { --farbe: var(--f-dialer);     --buehne: #a78bfa; }
[data-bereich="dialer"]      { --farbe: var(--f-dialer);     --buehne: #a78bfa; }
[data-bereich="deal"]        { --farbe: var(--f-deal);       --buehne: #fb923c; }
[data-bereich="objekte"]     { --farbe: var(--f-objekte);    --buehne: #14b8a6; }
[data-bereich="unterlagen"]  { --farbe: var(--f-unterlagen); --buehne: #f59e0b; }
[data-bereich="posteingang"] { --farbe: var(--f-telefonie);  --buehne: #22c55e; }
[data-bereich="kalender"]    { --farbe: var(--f-kalender);   --buehne: #ec4899; }
[data-bereich="auswertung"]  { --farbe: var(--f-auswertung); --buehne: #7dd3fc; }

/* Basis: alle Karten uebereinander, die Buehne ist nur der untere Teil.
   Das Fenster ragt 65px ueber die Buehne, Karten haengen 56px darunter. */
.flow-basis { background: transparent; }
.flow-karten { display: grid; }
.flow-karte { position: relative; grid-area: 1 / 1; padding: 65px 0 56px; }
.flow-karte[hidden] { display: block; opacity: 0; visibility: hidden; }
.flow-spacer { padding-top: 48%; }
.flow-buehne {
  position: absolute;
  left: 0; right: 0; top: 65px; bottom: 56px;
  border-radius: 32px;
  background: var(--buehne);
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 32px 32px;
  background-position: -1px -1px;
}
.flow-ebenen { position: absolute; left: 0; right: 0; top: 65px; bottom: 56px; }
.flow-ui-bkg { will-change: transform, opacity; }
.flow-fenster { position: absolute; left: 70px; right: 70px; top: -65px; bottom: 0; overflow: hidden; border-radius: 16px; -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent 95%); mask-image: linear-gradient(to bottom, #000 55%, transparent 95%); }
.flow-fenster img { display: block; width: 100%; height: auto; border: 1px solid rgba(255, 255, 255, .7); border-radius: 16px; }
.flow-fade { position: absolute; left: 0; right: 0; bottom: 0; height: 30%; pointer-events: none; }
.flow-fade i { position: absolute; inset: 0; display: block; }
.flow-fade-farbe { background: linear-gradient(to bottom, transparent, var(--buehne)); }
.flow-fade-weiss { display: none; }
/* UI-Panels: 1px Rand, 16px, Schatten; keine dicken Weissraender. */
.flow-ui { position: absolute; z-index: 3; overflow: hidden; border: 1px solid var(--rahmen); border-radius: 16px; background: var(--paper); box-shadow: 0 24px 48px -24px rgba(23, 16, 43, .35); }
.flow-ui img { display: block; width: 100%; height: auto; }
.flow-ui-a { left: -36px; bottom: -56px; }
.flow-ui-b { right: -36px; top: 24px; }
/* Dialer-Kopf: der Knopf sitzt rechts, deshalb setzt die Maske erst bei 88 % an. */
/* Zeiger: gefuellte Hand in Buehnenfarbe mit weissem Rand, Spitze auf dem Element. */
.zeiger { position: absolute; left: calc(var(--zx, 50%) - 17px); top: calc(var(--zy, 50%) - 3px); z-index: 4; width: 48px; height: 48px; color: var(--buehne); filter: drop-shadow(0 6px 10px rgba(23, 16, 43, .3)); transform: translate(140px, 140px); transition: transform 600ms cubic-bezier(.16, 1, .3, 1); transition-delay: 400ms; }
.flow-karte.ist-an .zeiger { transform: translate(0, 0); }
.zeiger.drueckt { transform: translate(0, 0) scale(.92); transition-duration: 120ms; transition-delay: 0s; }
.system-mehr { display: flex; justify-content: center; margin-top: 28px; }
.system-mehr .pfeil-link { font-size: 14.5px; color: var(--farbe, var(--accent)); }

/* Panels aus der App: eigener Rand im Bild, deshalb nur Schatten und 16px;
   Breite = halbe Dateibreite (1:1), breitere Panels links buendig beschnitten,
   hoehere Panels unten weich maskiert. */
.panel { width: var(--kw); border: 1px solid color-mix(in srgb, var(--buehne, var(--farbe, var(--accent))) 25%, transparent); }
.panel img { width: 100%; height: auto; }
/* HTML-Karte in der Reiter-Sektion */
.flow-ui.mini-karte { width: 280px; padding: 12px; }
.mini-haken.ist-an { border-color: #16A34A; color: #16A34A; }
.mini-haken svg { width: 10px; height: 10px; }
.schritt .mini.mini-panel img, .schritt .mini.mini-panel img[src*="deal-karte"] { width: var(--clip); max-width: none; height: auto; margin: 0; -webkit-mask-image: linear-gradient(to right, #000 60%, transparent), linear-gradient(to bottom, #000 70%, transparent); mask-image: linear-gradient(to right, #000 60%, transparent), linear-gradient(to bottom, #000 70%, transparent); -webkit-mask-composite: source-in; mask-composite: intersect; }


/* UI-Karten im App-Stil (wie die Anruf-laeuft-Karte): weiss, 20px, deckend,
   Avatar in Flaechenfarbe, Name in Outfit, volle violette Knoepfe. */
.uk { --farbe: var(--flaeche-violett); --farbe-tief: var(--flaeche-violett-tief); display: flex; flex-direction: column; gap: 12px; padding: 18px 20px 20px; border-radius: 20px; font-size: 13px; line-height: 1.35; color: var(--ink); }
.uk-a { width: 480px; } .uk-b { width: 360px; }
.flow-ui.uk, .ebene.uk { border: 1px solid var(--rahmen); }
.uk-kopf { display: flex; align-items: center; gap: 12px; min-width: 0; }
.uk-avatar { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--farbe) 14%, var(--paper)); color: var(--farbe-tief); font-family: Outfit, sans-serif; font-size: 14px; font-weight: 600; }
.uk-name { min-width: 0; flex: 1; }
.uk-name strong { display: block; font-family: Outfit, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.01em; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-name small { display: block; font-size: 13px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-feld { padding: 8px 12px; border-radius: 10px; background: var(--paper-2); border: 1px solid var(--field-line); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-feld small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-4); margin-bottom: 2px; }
.uk-knoepfe { display: flex; gap: 10px; }
.uk-knopf { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 14px; border-radius: 10px; background: var(--accent); color: #fff; font-size: 14px; font-weight: 600; white-space: nowrap; }
.uk-knopf.uk-klein { flex: none; height: 32px; font-size: 13px; padding: 0 12px; }
.uk-knopf svg { width: 14px; height: 14px; }
.uk-segment { display: flex; padding: 3px; border-radius: 10px; background: var(--nebel); border: 1px solid var(--line-mid); }
.uk-segment span { flex: 1; text-align: center; height: 28px; line-height: 28px; border-radius: 7px; font-size: 13px; font-weight: 500; color: var(--ink-3); }
.uk-segment .ist-an { background: var(--paper); color: var(--accent); box-shadow: 0 1px 2px rgba(23, 16, 43, .1); }
.uk-chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.uk-chip { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line-mid); border-radius: 8px; background: var(--paper); font-size: 13px; font-weight: 500; }
.uk-chip svg { width: 13px; height: 13px; color: var(--ink-3); }
.uk-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.uk-rechts { justify-content: flex-end; }
.uk .fl-pille { height: 26px; font-size: 12px; }
.uk-flamme { display: inline-flex; width: 18px; height: 18px; color: #F97316; margin-right: auto; }
.uk-flamme svg { width: 18px; height: 18px; fill: currentColor; }
.uk-haken { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border: 1.5px solid var(--line-stark); border-radius: 5px; color: #fff; }
.uk-haken.ist-an { background: #16A34A; border-color: #16A34A; }
.uk-haken svg { width: 11px; height: 11px; }
.uk-liste { display: flex; flex-direction: column; gap: 8px; }
.uk-liste .uk-kopf .uk-avatar { width: 32px; height: 32px; font-size: 12px; }
.uk-liste .uk-kopf strong { font-size: 15px; }
.uk-ergebnis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.uk-ergebnis span { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; border: 1px solid var(--line-mid); border-radius: 10px; font-size: 12.5px; font-weight: 500; position: relative; }
.uk-ergebnis svg { width: 15px; height: 15px; color: var(--accent); }
.uk-ergebnis b { position: absolute; right: 8px; top: 8px; font-size: 11px; color: var(--ink-4); font-weight: 600; }
.uk-foto { height: 110px; margin: -18px -20px 0; border-radius: 20px 20px 0 0; display: grid; place-items: center; background: color-mix(in srgb, var(--farbe) 18%, var(--paper)); color: var(--farbe-tief); }
.uk-foto svg { width: 32px; height: 32px; }
.uk-preis { margin-right: auto; font-family: Outfit, sans-serif; font-size: 18px; font-weight: 600; }
.uk-balken-dunn { height: 8px; border-radius: 4px; background: var(--nebel); overflow: hidden; }
.uk-balken-dunn i { display: block; height: 100%; width: var(--p); background: var(--farbe-tief); border-radius: 4px; }
.uk-balken { display: flex; align-items: flex-end; gap: 8px; height: 64px; }
.uk-balken i { flex: 1; height: var(--p); border-radius: 6px 6px 0 0; background: color-mix(in srgb, var(--f-auswertung) 70%, var(--paper)); }
.uk-balken i:nth-child(4) { background: var(--f-auswertung); }
.uk-kacheln { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uk-kachel { padding: 14px; border-radius: 14px; border: 1px solid var(--line-mid); background: color-mix(in srgb, var(--farbe) 8%, var(--paper)); }
.uk-kachel small { display: block; margin-top: 10px; font-size: 12px; font-weight: 600; }
.uk-kachel b { display: block; font-family: Outfit, sans-serif; font-size: 30px; font-weight: 500; line-height: 1.1; }
.uk-kachel em { display: block; font-style: normal; font-size: 11.5px; color: var(--farbe-tief); }
.uk-blase { display: flex; flex-direction: column; gap: 8px; }
.uk-meta { flex-wrap: wrap; font-size: 12px; }
.uk-meta strong { font-weight: 600; }
.uk-meta small { color: var(--ink-3); margin-left: auto; }
.uk-blase p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.fl-leise { --farbe: #8a8296; --farbe-tief: #6B6379; }

/* ---------- 9. Workflow -------------------------------------------------- */
.workflow-buehne { padding: clamp(40px, 5vw, 64px) 56px 56px; background: var(--warm); }
.workflow-buehne .kopfzeile { margin-bottom: 40px; }
.workflow-buehne .kopfzeile .titel { font-size: clamp(34px, 4vw, 52px); }
.kette { position: relative; padding-top: 44px; }
.kette-bahn { position: absolute; top: 14px; left: 8%; right: 8%; height: 2px; background: var(--line-mid); border-radius: 2px; overflow: hidden; }
.kette-bahn i { display: block; width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left center; transition: transform 1.2s var(--ease); }
.kette.ist-da .kette-bahn i { transform: scaleX(var(--anteil, 1)); }
.schritte { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 14px; }
.schritt { position: relative; min-width: 0; opacity: 0; transform: translateY(14px); transition: opacity var(--t-4) var(--ease), transform var(--t-4) var(--ease); transition-delay: calc(var(--i) * 140ms); }
.kette.ist-da .schritt { opacity: 1; transform: none; }
.schritt-nr {
  position: absolute;
  top: -44px;
  left: 50%;
  transform: translateX(-50%);
  width: 26px;
  height: 26px;
  display: grid;
  place-items: center;
  border: 2px solid var(--line-mid);
  border-radius: 50%;
  background: var(--paper);
  font-family: Outfit, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-3);
  transition: border-color var(--t-2) var(--ease), color var(--t-2) var(--ease);
  transition-delay: calc(var(--i) * 140ms);
}
.kette.ist-da .schritt-nr { border-color: var(--accent); color: var(--accent); }
.schritt h3 { font-family: Manrope, sans-serif; font-size: 14.5px; font-weight: 600; letter-spacing: 0; line-height: 1.35; margin: 14px 2px 0; }
.schritt p { font-size: 13.5px; line-height: 1.5; color: var(--ink-3); margin: 4px 2px 0; }

/* Mini-UI im Stil der App: weisse Karte, Avatar, Name, Pille, Flamme. */
.mini {
  border: 1px solid var(--rahmen);
  border-radius: 14px;
  background: var(--paper);
  box-shadow: var(--shadow-card);
  padding: 12px;
  min-height: 118px;
  display: grid;
  align-content: start;
  gap: 8px;
}
.mini-zeile { display: flex; align-items: center; gap: 8px; min-width: 0; }
.mini-avatar {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--farbe, #7c3aed) 14%, var(--paper));
  color: var(--farbe-tief, #6c2bf2);
  font-family: Outfit, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
}
.mini-name { min-width: 0; }
.mini-name strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-name small { display: block; font-size: 11px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .fl-pille { height: 24px; padding: 0 8px; font-size: 11px; }
.mini .fl-pille svg { width: 12px; height: 12px; }
.mini-flammen { display: inline-flex; gap: 1px; color: #F97316; }
.mini-flammen svg { width: 13px; height: 13px; fill: currentColor; }
.mini-flammen .aus { color: #E3DEEA; }
.mini-knopf { display: inline-flex; align-items: center; justify-content: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 11.5px; font-weight: 600; }
.mini-knopf svg { width: 12px; height: 12px; }
.mini-haken { display: inline-grid; place-items: center; flex: none; width: 16px; height: 16px; border: 1.5px solid var(--line-stark); border-radius: 4px; }
.mini-text { font-size: 12px; color: var(--ink-2); line-height: 1.35; }
.mini-text b { font-weight: 600; color: var(--ink); }
.mini-phasen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.mini-phasen svg { width: 12px; height: 12px; color: var(--ink-4); flex: none; }
.mini-nebenzeile { font-size: 11px; color: var(--ink-3); }

/* ---------- 10. Integrationen ------------------------------------------- */
.anb-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.anb-karte { border: 1px solid var(--line-mid); border-radius: var(--r-karte); background: var(--paper); box-shadow: var(--shadow-card); padding: 24px 24px 22px; }
.anb-breit { grid-column: span 2; }
.anb-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.anb-kopf h3 { font-family: Manrope, sans-serif; font-size: 16.5px; font-weight: 600; letter-spacing: 0; flex: 1; min-width: 0; }
.anb-karte p { font-size: 14.5px; color: var(--ink-3); }
.anb-marken { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.anb-marken li {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 12px 0 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-pille);
  background: var(--paper-2);
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
}
.anb-marken svg { width: 18px; height: 18px; flex: none; }
.anb-marken .strich svg { stroke: var(--ink-3); width: 17px; height: 17px; }
.anb-mehr { display: flex; justify-content: center; margin-top: 32px; }

/* ---------- 11. Preise --------------------------------------------------- */
/* Stufe-A-Preise in der Clay-Ordnung: linksbuendiger Kopf, Segmentleiste
   mit Handschrift-Notiz, drei Karten mit getoenter Kopfflaeche. */
.pr-kopfzeile { max-width: 720px; margin-bottom: 28px; }
.pr-kopfzeile .titel { font-size: clamp(38px, 4.4vw, 56px); letter-spacing: -.035em; }
.pr-kopfzeile .lead { margin-top: 16px; }
.pr-schalter { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 32px; }
.pr-notiz { display: inline-flex; align-items: center; gap: 4px; margin-left: -2px; }
.pr-notiz svg { flex: none; }
.pr-notiz > span:not(.pr-emoji) {
  display: block;
  font-family: Outfit, sans-serif;
  font-size: 19px;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -.02em;
  transform: rotate(-6deg);
  padding: 3px 3px 7px;
  background: linear-gradient(105deg, #4B18B8, var(--accent) 55%, #9B6BFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.pr-notiz b { display: block; font-weight: 600; padding-left: 16px; }
.pr-emoji { display: inline-block; align-self: center; font-size: 34px; line-height: 1; transform: rotate(-5deg) translateY(-9px); }

.pr-pakete { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.pr-blau      { --p-grund: #EEF4FF; --p-a: #3B82F6; --p-b: #BAE6FD; --p-ton: var(--f-leads); }
.pr-violett   { --p-grund: #F4EEFF; --p-a: #7C3AED; --p-b: #F5D0FE; --p-ton: var(--accent); }
.pr-bernstein { --p-grund: #FFF7E6; --p-a: #F59E0B; --p-b: #FDE68A; --p-ton: #B45309; }
.pr-karte {
  display: flex;
  flex-direction: column;
  padding: 5px;
  border: 1px solid var(--line-mid);
  border-radius: var(--r-karte);
  background: var(--paper);
  box-shadow: inset 0 0 0 5px var(--paper), 0 1px 2px rgba(23, 16, 43, .04);
}
.pr-karte.ist-regel { border: 2px solid var(--accent); padding: 4px; box-shadow: inset 0 0 0 5px var(--paper), 0 24px 50px -36px rgba(108, 43, 242, .55); }
.pr-oben {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 24px 24px;
  border-radius: 15px;
  box-shadow: inset 0 0 0 1px rgba(23, 16, 43, .06);
  background:
    radial-gradient(circle at 105% -10%, color-mix(in srgb, var(--p-a) 55%, transparent) 0, transparent 46%),
    radial-gradient(circle at -10% 55%, color-mix(in srgb, var(--p-b) 70%, transparent) 0, transparent 52%),
    var(--p-grund);
}
.pr-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; }
.pr-symbol { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 11px; background: var(--p-ton); color: #fff; box-shadow: 0 6px 14px -8px var(--p-ton); }
.pr-symbol svg { width: 18px; height: 18px; }
.pr-marke { background: rgba(23, 16, 43, .08); color: var(--ink-2); }
.pr-karte h3 { font-size: 24px; }
.pr-fuer { margin-top: 4px; font-size: 14.5px; color: color-mix(in srgb, var(--ink) 62%, transparent); }
.pr-preis { display: flex; align-items: baseline; gap: 8px; margin-top: 20px; }
.pr-preis b { font-family: Outfit, sans-serif; font-size: 56px; font-weight: 500; letter-spacing: -.035em; line-height: 1; font-variant-numeric: tabular-nums; color: var(--ink); }
.pr-preis span { font-size: 14.5px; color: color-mix(in srgb, var(--ink) 55%, transparent); }
.pr-plaetze { margin-top: 6px; font-size: 13.5px; font-weight: 600; color: var(--p-ton); }
.pr-oben .btn { margin-top: 20px; width: 100%; }
.pr-oben .btn-leise { background: rgba(255, 255, 255, .78); border-color: rgba(23, 16, 43, .1); }
.pr-oben .btn-leise:hover { background: #fff; }
.pr-liste { display: grid; gap: 10px; padding: 22px 20px 0; }
.pr-liste li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; color: var(--ink-2); }
.pr-haken { display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 2px; border-radius: 6px; background: color-mix(in srgb, var(--p-ton) 14%, #fff); color: var(--p-ton); }
.pr-haken svg { width: 12px; height: 12px; }
.pr-fuss { margin-top: auto; padding: 20px 20px 16px; font-size: 13px; color: var(--ink-3); }
.pr-fuss strong { display: block; font-weight: 600; color: var(--ink-2); }

.pr-titel { margin: 40px 0 14px; font-size: 22px; letter-spacing: -.02em; }
.pr-zusaetze { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pr-zusatz { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 20px 22px; border: 1px solid var(--line-mid); border-radius: var(--r-karte); background: var(--paper); box-shadow: var(--shadow-card); }
.pr-zusatz h4 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-family: Manrope, sans-serif; font-size: 15.5px; font-weight: 600; letter-spacing: 0; }
.pr-zusatz p { font-size: 13.5px; color: var(--ink-3); margin-top: 2px; }
.pr-zusatz-preis { text-align: right; white-space: nowrap; }
.pr-zusatz-preis b { display: block; font-family: Outfit, sans-serif; font-size: 28px; font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--ink); }
.pr-zusatz-preis span { font-size: 12.5px; color: var(--ink-3); }

.pr-minuten { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 32px; align-items: center; padding: clamp(24px, 3vw, 34px); border-radius: var(--r-karte); background: var(--tint); }
.pr-minuten h3 { font-size: 22px; letter-spacing: -.02em; }
.pr-minuten p { margin-top: 8px; font-size: 15px; line-height: 1.55; color: var(--ink-2); max-width: 44em; }
.pr-tarife { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.pr-tarife div { padding: 16px 14px; border-radius: 14px; background: var(--paper); text-align: center; }
.pr-tarife dt { font-size: 13px; font-weight: 600; color: var(--ink-3); }
.pr-tarife dd { margin: 4px 0 0; font-family: Outfit, sans-serif; font-size: clamp(26px, 2.6vw, 34px); font-weight: 600; letter-spacing: -.03em; color: var(--accent); }
.pr-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-top: 24px; }

/* ---------- 12. Schluss -------------------------------------------------- */
.schluss { position: relative; padding-top: calc(var(--sektion) / 2); border-top: 1px solid var(--raster); overflow: hidden; }
.schluss .kopfzeile { margin-bottom: clamp(40px, 5vw, 56px); }
.schluss-buehne { position: relative; max-width: 1000px; margin: 0 auto; max-height: clamp(200px, 26vw, 340px); overflow: hidden; }
.schluss-buehne .fenster { border-bottom: 0; border-bottom-left-radius: 0; border-bottom-right-radius: 0; box-shadow: none; }
.schluss-buehne::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--paper)); pointer-events: none; }
.schluss-glow { position: absolute; inset: 0 -8% auto; height: 100%; pointer-events: none; background: radial-gradient(55% 55% at 50% 35%, rgba(108, 43, 242, .12), rgba(108, 43, 242, 0) 70%); }

/* ---------- 13. Fusszeile ------------------------------------------------ */
.fuss { width: min(1360px, 100% - 24px); margin: 0 auto; padding: 64px clamp(24px, 4vw, 64px) 36px; border-radius: var(--r-buehne) var(--r-buehne) 0 0; background: var(--warm); font-size: 14.5px; color: var(--ink-2); }
.fuss-oben { display: grid; grid-template-columns: 1.3fr repeat(5, minmax(0, 1fr)); gap: 32px 24px; }
.fuss-marke p { margin-top: 14px; max-width: 240px; font-size: 14px; color: var(--ink-3); }
.fuss-made { margin-top: 22px; }
.fuss-made-kachel { display: inline-flex; flex-direction: column; gap: 2px; padding: 14px 18px; border-radius: 12px; background: #EDEAE5; color: var(--ink); }
.fuss-made-zeile { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; color: var(--ink-2); }
.fuss-flagge { width: 28px; height: 18px; flex: none; border-radius: 3px; filter: drop-shadow(0 1px 1.5px rgba(20, 16, 40, .22)); }
.fuss-made-kachel strong { font-family: Outfit, sans-serif; font-size: 17px; font-weight: 600; letter-spacing: -.01em; color: var(--ink); }
.fuss-made-text { margin-top: 10px; font-size: 13px; color: var(--ink-3); }
.fuss-spalte h2 { font-family: Manrope, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 12px; }
.fuss-spalte a { display: flex; align-items: center; gap: 8px; padding: 5px 0; color: var(--ink-2); transition: color var(--t-1) var(--ease); }
.fuss-spalte a:hover { color: var(--accent); }
.fuss-spalte a svg { width: 15px; height: 15px; color: var(--f, var(--ink-4)); }
.fuss-unten { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rahmen); font-size: 13.5px; }
.fuss-recht { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.fuss-recht a:hover { color: var(--accent); }
.fuss-rechts { display: flex; align-items: center; gap: 10px; }
.fuss-sozial { display: inline-grid; place-items: center; width: 36px; height: 36px; border: 1px solid var(--line-mid); border-radius: var(--r-knopf); color: var(--ink-2); background: var(--paper); transition: color var(--t-1) var(--ease), border-color var(--t-1) var(--ease); }
.fuss-sozial:hover { color: var(--accent); border-color: var(--line-stark); }
.fuss-sozial svg { width: 16px; height: 16px; }
.fuss-mail { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border: 1px solid var(--line-mid); border-radius: var(--r-knopf); background: var(--paper); font-weight: 500; color: var(--ink); }
.fuss-mail:hover { color: var(--accent); }
.fuss-mail svg { width: 15px; height: 15px; color: var(--ink-3); }
.fuss-copy { width: 100%; color: var(--ink-4); }


/* Workflow-Karten: gebaute Mini-UI im Stil der App, alle 181x200. */
.wf-karte { --farbe: var(--flaeche-violett); --farbe-tief: var(--flaeche-violett-tief); position: relative; width: 181px; height: 200px; padding: 12px; margin: 0 auto; border: 1px solid var(--rahmen); border-radius: 16px; background: var(--paper); box-shadow: var(--shadow-card); display: flex; flex-direction: column; align-items: flex-start; gap: 8px; overflow: hidden; font-size: 13px; line-height: 1.3; color: var(--ink); }
.wf-kopf { display: flex; align-items: center; gap: 8px; width: 100%; margin-bottom: 2px; }
.wf-kopf small { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fl-icon-24 { width: 24px; height: 24px; border-radius: 7px; }
.fl-icon-24 svg { width: 13px; height: 13px; }
.wf-zeile { display: flex; align-items: center; gap: 8px; width: 100%; min-width: 0; }
.wf-avatar { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in srgb, var(--farbe) 14%, var(--paper)); color: var(--farbe-tief); font-family: Outfit, sans-serif; font-size: 10.5px; font-weight: 600; }
.wf-name { min-width: 0; flex: 1; }
.wf-name strong { display: block; font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-name small { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wf-pille { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 8px; border-radius: 6px; background: color-mix(in srgb, var(--farbe) 13%, var(--paper)); color: var(--farbe-tief); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.wf-pille svg { width: 11px; height: 11px; }
.wf-pille-grau { background: var(--nebel); color: var(--ink-2); }
.wf-wann { margin-left: auto; font-size: 12px; color: var(--ink-3); }
.wf-flamme { flex: none; width: 16px; height: 16px; color: #F97316; }
.wf-flamme svg { width: 16px; height: 16px; fill: currentColor; }
.wf-flamme-warm { color: #FBBF24; }
.wf-flamme-kuehl { color: #CBD5E1; }
.wf-punkt { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #22C55E; }
.wf-knoepfe { display: flex; gap: 6px; width: 100%; margin-top: auto; }
.wf-knopf { flex: 1; display: inline-flex; align-items: center; justify-content: center; height: 26px; border-radius: 7px; font-size: 11.5px; font-weight: 600; color: #fff; background: var(--accent); }
.wf-knopf-leise { background: var(--nebel); color: var(--ink-2); }
.wf-knopf-rot { background: #E11D48; }
.wf-haken { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--line-stark); border-radius: 50%; color: #16A34A; }
.wf-haken svg { width: 13px; height: 13px; }
.wf-haken path { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 500ms var(--ease) 200ms; }
.wf-hinweis { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--ink-3); }
.wf-hinweis svg { width: 12px; height: 12px; }
.wf-phasen { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.wf-phasen > svg { width: 12px; height: 12px; color: var(--ink-4); flex: none; }
/* Details, wenn die Linie die Karte erreicht. */
.wf-bestaetigt, .wf-phase-neu { transition: opacity 400ms var(--ease), background-color 400ms var(--ease), color 400ms var(--ease); }
.schritt:not(.ist-dran) .wf-bestaetigt { opacity: 0; }
.schritt:not(.ist-dran) .wf-phase-neu { background: var(--nebel); color: var(--ink-2); }
.schritt:not(.ist-dran) .wf-phase-alt { background: color-mix(in srgb, var(--farbe) 13%, var(--paper)); color: var(--farbe-tief); }
.schritt.ist-dran .wf-haken path { stroke-dashoffset: 0; }
.schritt.ist-dran .wf-haken { border-color: #16A34A; }
.schritt.ist-dran .wf-flamme-heiss { animation: wf-puls 700ms var(--ease) 1; }
.schritt.ist-dran .wf-punkt { animation: wf-blink 1s steps(1) 3; }
@keyframes wf-puls { 0% { transform: scale(1); } 40% { transform: scale(1.35); } 100% { transform: scale(1); } }
@keyframes wf-blink { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }

/* ---------- 14. Handy und schmale Fenster ------------------------------ */
@media (max-width: 1100px) {
  .auf-produkt { width: 540px; }
  .hero-oben { grid-template-columns: minmax(0, 1fr) 360px; column-gap: 48px; }
  .feature { grid-template-columns: 1fr; padding: 40px 40px 0; }
  .feature-medien { min-height: 480px; border-radius: var(--r-medien) var(--r-medien) 0 0; }
  .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 44px 14px; }
  .kette-bahn { display: none; }
  .fuss-oben { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .fuss-marke { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .raster { display: none; }
  .mega { display: none; }
  .nav, .kopf-aktion { display: none; }
  .menue-knopf { display: flex; }
  .hero-oben { grid-template-columns: 1fr; gap: 24px; }
  .anb-raster { grid-template-columns: 1fr 1fr; }
  .anb-breit { grid-column: 1 / -1; }
  .pr-pakete { grid-template-columns: 1fr; }
  .pr-zusaetze { grid-template-columns: 1fr; }
  .pr-minuten { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  :root { --sektion: 80px; --r-buehne: 24px; --r-medien: 18px; }
  .buehne, .buehnen-wrap { width: calc(100% - 24px); }
  .kopf { width: calc(100% - 16px); margin-top: 0; top: 0; }
  .band, .band-innen { height: 40px; }
  .band-innen { padding: 0 14px; gap: 8px; font-size: 13px; }
  .band-lang { display: none; }
  .band-kurz { display: block; }
  .kopf-zeile { padding: 0 8px 0 14px; }
  .mega { display: none; }
  .kopf-zeile { height: 56px; }
  .menue { inset: 104px 0 0; }
  .hero { padding-top: 36px; }
  .hero-scheine { opacity: .08; -webkit-mask-image: none; mask-image: none; }
  .hero h1 { font-size: clamp(38px, 10.6vw, 44px); }
  .hero-seite { display: block; padding-top: 0; }
  .hero-knoepfe { margin-top: 24px; }
  .hero-zeile { margin-top: 16px; }
  .hero h1 span { white-space: normal; }
  .hero-seite .lead { font-size: 19px; }
  .hero-knoepfe { flex-direction: column; }
  .hero-knoepfe .btn { width: 100%; }
  .hero-buehne { padding: 20px 16px 0; margin-top: 32px; }
  .hero-schnitt { max-height: 420px; }
  .hero .fenster img { aspect-ratio: auto; object-fit: unset; }
  .kopfzeile { text-align: left; margin-bottom: 32px; }
  .kopfzeile .titel { font-size: clamp(32px, 9.2vw, 40px); }
  .kopfzeile .lead { margin-inline: 0; }
  .chip { height: 36px; font-size: 13.5px; }
  .feature { padding: 24px 20px 20px; gap: 24px; }
  .feature-text h2 { font-size: clamp(28px, 8vw, 34px); }
  .feature-mehr { padding-top: 20px; }
  .feature { padding-right: 20px; }
  .feature-medien { min-height: 0; height: 320px; border-radius: var(--r-medien); }
  .feature-medien .ebene-fenster { top: 20px; bottom: 0; left: 20px; width: 140%; }
  .ebene { display: none; }
  .ebene.eb-eins { display: block; left: 12px; bottom: 16px; width: 82%; height: auto; max-height: 200px; border-width: 0; border-radius: 12px; }
  .ebene.eb-eins.uk { width: min(480px, 90%); }
  .ebene.eb-eins img { border-radius: 8px; }
  .feature-medien .fenster { top: 20px; left: 20px; width: 130%; }
  .feature-medien .fenster img { aspect-ratio: auto; object-fit: unset; }
  .workflow-buehne { padding: 28px 20px 24px; }
  .system .kopfzeile .titel br { display: none; }
  .system { overflow-x: clip; }
  .flow-reiter-wrap { width: 100%; margin-bottom: 36px; }
  .flow-schatten { width: 15%; }
  .flow-karte { padding: 40px 0 36px; }
  .flow-buehne, .flow-ebenen { top: 40px; bottom: 36px; border-radius: 24px; }
  .flow-spacer { padding-top: 70%; }
  .flow-fenster { left: 5%; right: -12%; top: -40px; bottom: 16px; }
  .flow-ui-b, .zeiger { display: none; }
  .flow-ui-a { left: 8px; bottom: -36px; max-width: 80%; }
  .flow-ui-a.uk { width: min(480px, 88%); }
  .karte-blatt.flow-ui-a, .karte-mail.flow-ui-a, .karte-breit.flow-ui-a { max-height: 150px; }
  .schritte { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 38px; }
  .kette { padding-top: 0; }
  .kette-bahn { display: block; top: 12px; bottom: 12px; left: 12px; right: auto; width: 2px; height: auto; }
  .kette-bahn i { transform: scaleY(0); transform-origin: center top; }
  .kette.ist-da .kette-bahn i { transform: scaleY(var(--anteil, 1)); }
  .schritt { padding-bottom: 14px; }
  .schritt-nr { top: 0; left: -38px; transform: none; }
  .anb-raster { grid-template-columns: 1fr; }
  .pr-kopfzeile .titel { font-size: clamp(30px, 8.6vw, 36px); }
  .pr-notiz svg { transform: rotate(62deg); width: 46px; height: 34px; }
  .pr-notiz > span:not(.pr-emoji) { font-size: 16px; }
  .pr-emoji { display: none; }
  .pr-zusatz { grid-template-columns: 34px minmax(0, 1fr); }
  .pr-zusatz-preis { grid-column: 2; text-align: left; }
  .pr-minuten { padding: 22px 18px; gap: 18px; }
  .pr-tarife div { padding: 12px 6px; }
  .schluss-buehne { max-height: 220px; }
  .schluss .btn { width: 100%; }
  .fuss { width: calc(100% - 16px); padding: 40px 20px 28px; }
  .fuss-oben { grid-template-columns: 1fr 1fr; gap: 28px 16px; }
  .fuss-unten { flex-direction: column; align-items: flex-start; }
}

/* ---------- 15. Reduzierte Bewegung ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .wf-haken path { stroke-dashoffset: 0 !important; transition: none; }
  .wf-bestaetigt, .wf-phase-neu, .wf-phase-alt { transition: none; }
  .wf-flamme-heiss, .wf-punkt { animation: none !important; }
  .hero-scheine { transform: none !important; }
  .ein, .schritt, .ebene, .kette-bahn i, .schritt-nr, .mega-panel, .mega, .pfeil-link svg, .btn svg, .flow-ui, .flow-fenster, .zeiger { transition: none !important; }
  .ein, .schritt, .ebene { opacity: 1 !important; transform: none !important; }
  .zeiger { transform: none !important; }
  .kette-bahn i { transform: none !important; }
  .lauf-spur { animation: none; width: auto; flex-wrap: wrap; row-gap: 10px; }
  .lauf { -webkit-mask-image: none; mask-image: none; }
  .lauf-spur .chip:nth-child(n+9) { display: none; }
}

/* Glas-Rueckfall: ohne Weichzeichner oder bei reduzierter Transparenz deckend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .kopf-karte::before, .kopf.ist-fest .kopf-karte::before, .kopf.ist-offen .kopf-karte::before, .mega { background: var(--paper); }
}
@media (prefers-reduced-transparency: reduce) {
  .kopf-karte::before, .kopf.ist-fest .kopf-karte::before, .kopf.ist-offen .kopf-karte::before, .mega { background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kopf::after { -webkit-backdrop-filter: none; backdrop-filter: none; }
}