/* =================================================================
   FloW Software — Landing Page Styles
   Struktur:
     1. Design Tokens
     2. Base / Reset
     3. Typografie
     4. Layout-Hilfsklassen
     5. Buttons + UI-Komponenten
     6. Header / Navigation
     7. Hero + DokuHilfe Mock
     8. Trust Strip
     9. Flagship Section (DokuHilfe)
    10. Other Products Grid
    11. Wie es funktioniert
    12. Prinzipien (Warum FloW)
    13. Preise
    14. FAQ
    15. About Florian
    16. CTA
    17. Footer
    18. Responsive
   ================================================================= */


/* ---------- 1. Design Tokens ---------- */
:root {
  /* Brand-Farben */
  --ink:        #0B2438;
  --ink-soft:   #2C4456;
  --ink-mute:   #5A7187;

  --blue:       #1E7FD6;
  --blue-deep:  #0F5BA8;
  --green:      #4FAE3A;
  --green-deep: #2F8A22;
  --ochre:      #C68A3B;

  /* Neutrale — kühler/cleaner Grundton (Redesign C) */
  --paper:      #F5F7FA;   /* heller, leicht kühler Hintergrund */
  --paper-deep: #EBEFF4;
  --surface:    #FFFFFF;
  --mist:       #EEF2F7;
  --line:       #DEE4EC;
  --line-soft:  #EAEEF3;

  /* Akzent + Gradient (ein Fokus-Akzent statt drei) */
  --accent:     #1E7FD6;
  --accent-2:   #6D5EF0;
  --grad:       linear-gradient(135deg, #1E7FD6 0%, #6D5EF0 100%);

  /* Dunkle „Tech"-Sektionen (Hybrid C) */
  --dark:       #0B1A2B;
  --dark-2:     #0E2336;
  --dark-grad:  radial-gradient(1200px 600px at 80% -10%, rgba(109,94,240,.22), transparent 60%), linear-gradient(180deg, #0B1A2B 0%, #0E2336 100%);

  /* Radien */
  --radius-sm:  10px;
  --radius:     16px;
  --radius-lg:  22px;

  /* Schatten — weicher, größer, kühl getönt */
  --shadow-sm:  0 1px 2px rgba(15,40,70,.05), 0 4px 14px rgba(15,40,70,.06);
  --shadow-md:  0 8px 24px rgba(15,40,70,.08), 0 24px 60px rgba(15,40,70,.08);
  --shadow-glow: 0 10px 30px rgba(30,127,214,.28);

  /* Layout */
  --container:  1180px;
  --gutter:     40px;

  /* Logo-Skalierung beim Scrollen (continuous, kein Toggle) */
  --logo-h-max: 180px;   /* Höhe ganz oben */
  --logo-h-min: 56px;    /* Höhe nach Scroll */
  --logo-w-max: 520px;   /* max-width ganz oben */
  --logo-w-min: 220px;   /* max-width nach Scroll */
  --scroll-t:   0;       /* 0 = oben, 1 = gescrollt — wird vom JS gesetzt */
}

/* ---------- 2. Base / Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; display: block; }
button { font: inherit; cursor: pointer; }
a { color: inherit; }

html {
  scroll-behavior: smooth;
  /* Verhindert, dass die sticky Top-Leiste den Anker-Sprung verdeckt */
  scroll-padding-top: 140px;
}
/* Spezieller Versatz fürs Zurück-Scrollen zum Seitenanfang —
   muss die VOLLE Header-Höhe abdecken (Logo im Max-Zustand 180px + Padding) */
main#top {
  scroll-margin-top: 230px;
}

body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ---------- 3. Typografie ---------- */
h1, h2, h3, h4, h5 {
  font-family: "Bricolage Grotesque", "IBM Plex Sans", sans-serif;
  font-weight: 600;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
p { margin: 0; text-wrap: pretty; }

.mono     { font-family: "IBM Plex Mono", ui-monospace, monospace; }
.eyebrow  {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

/* ---------- 4. Layout-Hilfsklassen ---------- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 116px 0; }
.section-tight { padding: 72px 0; }
.section-divider { border-top: 1px solid var(--line); }

/* Zentrierter Block (margin:auto), Text bleibt linksbündig darin */
.section-head { margin-bottom: 64px; max-width: 600px; margin-left: auto; margin-right: auto; }
.section-head h2 {
  font-size: 46px;
  line-height: 1.04;
  margin-top: 12px;
}
.section-head p {
  font-size: 17px;
  color: var(--ink-mute);
  margin-top: 14px;
  max-width: 60ch;
}

/* ---------- 5. Buttons + UI ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  font-weight: 500;
  text-decoration: none;
  font-size: 15px;
  border: 1px solid transparent;
  transition: transform .15s, background .15s, border-color .15s;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--grad);
  color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 14px 38px rgba(30,127,214,.34); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-secondary:hover { background: var(--surface); }
.btn-large { padding: 16px 26px; font-size: 15.5px; }

/* Innerhalb der sticky Top-Bar Hover-Transform deaktivieren —
   verhinderte sonst Mini-Repaints des Header-Layers bei Mouse-Over */
.site-header .btn:hover { transform: none; }

.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink);
  color: var(--paper);
  padding: 5px 10px;
  border-radius: 6px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ---------- 6. Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 247, 250, 0.72);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s;
  /* Isoliert Repaints — Hover-Effekte in der Bar lösen keinen Reflow außerhalb aus */
  contain: layout style;
}
.site-header.scrolled { border-bottom-color: var(--line); }
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 5px;
  padding-bottom: 5px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--ink);
}
.brand img {
  height: calc(var(--logo-h-min) + (var(--logo-h-max) - var(--logo-h-min)) * (1 - var(--scroll-t, 0)));
  width: auto;
  max-width: calc(var(--logo-w-min) + (var(--logo-w-max) - var(--logo-w-min)) * (1 - var(--scroll-t, 0)));
  object-fit: contain;
}
.brand .wordmark {
  /* Wordmark ist bereits im Logo-Bild (Kreis B Lockup) — Textversion ausgeblendet.
     Wenn du auf ein Icon-only-Logo (z.B. Kreis A) wechselst, .wordmark wieder einblenden. */
  display: none;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 28px;
  align-items: center;
  font-size: 14.5px;
}
.nav-links a {
  text-decoration: none;
  color: var(--ink-soft);
  transition: color .15s;
}
.nav-links a:hover { color: var(--ink); }
.nav-links .btn { padding: 10px 18px; font-size: 14px; }
/* Spezifit\u00e4t-Override: die Nav-Link-Regel oben f\u00e4rbte den CTA-Button-Text dunkel \u2014
   hier explizit zur\u00fcck auf hell, damit der Mail-Button lesbar bleibt */
.nav-links a.btn-primary,
.nav-links a.btn-primary:hover { color: var(--paper); }

/* ---------- 7. Hero ---------- */
.hero {
  padding: 72px 0 84px;
  position: relative;
  background:
    radial-gradient(900px 460px at 88% -8%, rgba(109,94,240,.12), transparent 62%),
    radial-gradient(720px 420px at 4% 8%, rgba(30,127,214,.10), transparent 60%);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: stretch;
}
.hero h1 {
  font-size: 66px;
  font-weight: 700;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin-bottom: 20px;
}
.hero h1 .accent {
  position: relative;
  white-space: nowrap;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero-lede {
  font-size: 19px;
  color: var(--ink-soft);
  max-width: 48ch;
  margin-bottom: 28px;
}
.hero-ctas { display: flex; gap: 12px; margin-bottom: 28px; flex-wrap: wrap; }
.hero-meta {
  display: flex;
  gap: 22px;
  align-items: center;
  font-size: 13px;
  color: var(--ink-mute);
  flex-wrap: wrap;
}
.hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.hero-meta .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
}

/* DokuHilfe Product Mockup */
.doku-mock {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.doku-tab {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: linear-gradient(180deg, #FDFCF9 0%, #FFFFFF 100%);
  font-size: 13px;
}
.doku-tab .left { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); }
.doku-tab .pill {
  background: var(--blue);
  color: white;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 5px;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.doku-tab .right {
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink-mute);
  font-size: 11px;
}
.doku-row {
  padding: 16px 18px;
  border-bottom: 1px solid var(--line-soft);
}
.doku-row .label {
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  font-family: "IBM Plex Mono", monospace;
}
.doku-row .resident {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 500;
}
.doku-row .avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #D7E6F4, #B6D2EB);
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--blue-deep);
}
.doku-row .room {
  margin-left: auto;
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-mute);
}

.doku-gen {
  padding: 18px;
  background: #FBFCFE;
  border-bottom: 1px solid var(--line-soft);
}
.doku-gen .gen-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: var(--green-deep);
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
  background: rgba(79, 174, 58, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}
.doku-gen .gen-label::before {
  content: "";
  width: 6px; height: 6px;
  background: var(--green);
  border-radius: 50%;
  box-shadow: 0 0 0 3px rgba(79, 174, 58, 0.2);
}
.doku-gen p {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-bottom: 8px;
}
.doku-gen p:last-of-type { margin-bottom: 0; }
.doku-gen .hl {
  background: rgba(198, 138, 59, 0.18);
  padding: 1px 3px;
  border-radius: 2px;
}

.doku-actions {
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  background: #FFFFFF;
}
.doku-actions .timer {
  font-family: "IBM Plex Mono", monospace;
  color: var(--ink-mute);
  font-size: 12px;
}
.doku-actions .timer b {
  color: var(--green-deep);
  font-weight: 600;
}
.doku-actions .sign {
  background: var(--ink);
  color: var(--paper);
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 500;
  border: 0;
}

/* ---------- 8. Trust Strip ---------- */
.trust {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--paper-deep);
  padding: 22px 0;
}
.trust .container {
  display: flex;
  gap: 48px;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ink-soft);
}
.trust .item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.trust .ic {
  width: 22px; height: 22px;
  flex: 0 0 22px;
  color: var(--blue-deep);
}
.trust b {
  font-weight: 600;
  color: var(--ink);
}

/* ---------- 9. Flagship (DokuHilfe Deep Dive) ---------- */
.flagship { padding: 96px 0 96px; }
.flagship-head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  margin-bottom: 40px;
  gap: 32px;
}
.flagship-head .eyebrow-block {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.flagship-head h2 {
  font-size: 44px;
  line-height: 1.05;
  max-width: 16ch;
}
.flagship-head .meta {
  color: var(--ink-mute);
  font-size: 14.5px;
  text-align: right;
}
.flagship-head .meta b { color: var(--ink); }

.flagship-grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 48px;
}
.flagship-body p {
  font-size: 17px;
  color: var(--ink-soft);
  margin-bottom: 18px;
  max-width: 50ch;
}
.flagship-body p:first-of-type {
  font-size: 19px;
  color: var(--ink);
}

.flagship-numbers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 28px;
  background: var(--surface);
  border-radius: 12px;
  border: 1px solid var(--line);
  overflow: hidden;
}
.flagship-numbers .n {
  padding: 22px 20px;
  border-right: 1px solid var(--line-soft);
}
.flagship-numbers .n:last-child { border-right: 0; }
.flagship-numbers .big {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1;
  color: var(--blue-deep);
  margin-bottom: 8px;
  letter-spacing: -0.02em;
}
.flagship-numbers .lbl {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.35;
}

.flagship-visual {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-md);
  overflow: hidden;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}
.flag-vis-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper-deep);
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
}
.flag-vis-body { padding: 24px; flex: 1; }
.flag-line {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--line-soft);
}
.flag-line:last-child { border-bottom: 0; }
.flag-line .left { display: flex; align-items: center; gap: 12px; }
.flag-line .check {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 600;
  flex: 0 0 22px;
}
.flag-line .check.idle {
  background: var(--mist);
  color: var(--ink-mute);
  border: 1.5px solid var(--line);
}
.flag-line .ttl {
  font-size: 14.5px;
  font-weight: 500;
}
.flag-line .ttl .sub {
  font-size: 12.5px;
  color: var(--ink-mute);
  font-weight: 400;
  display: block;
}
.flag-line .when {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-mute);
}

/* ---------- 9b. Try-it / Live-Demo (interaktiv) ---------- */
.try {
  padding: 96px 0;
  background: var(--paper-deep);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.try-head { margin-bottom: 40px; max-width: 760px; }
.try-head h2 {
  font-size: 40px;
  line-height: 1.05;
  margin-top: 12px;
  max-width: 18ch;
}
.try-head p {
  font-size: 17px;
  color: var(--ink-mute);
  margin-top: 14px;
  max-width: 60ch;
}

.try-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: stretch;
}

/* Domain-Switcher (Eingliederungshilfe / Pflege / Werkstatt) */
.try-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  width: fit-content;
  max-width: 100%;
}
.try-tab {
  background: transparent;
  border: 0;
  padding: 10px 16px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink-soft);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
  font-weight: 500;
}
.try-tab:hover { color: var(--ink); background: var(--paper); }
.try-tab.active {
  background: var(--ink);
  color: var(--paper);
}
.try-tab .beta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(198, 138, 59, 0.18);
  color: var(--ochre);
  text-transform: uppercase;
}
.try-tab.active .beta {
  background: rgba(198, 138, 59, 0.35);
  color: #fff;
}

.try-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.try-card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line-soft);
  background: var(--paper);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.try-card-head .label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.try-card-head .badge {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  color: var(--ink-mute);
  display: inline-flex; align-items: center; gap: 6px;
}
.try-card-head .badge::before {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.try-card-head .badge.ready { color: var(--green-deep); }
.try-card-head .badge.busy  { color: var(--blue-deep); }
.try-card-head .badge.error { color: #B23B30; }

.try-input-body { padding: 20px; flex: 1; display: flex; flex-direction: column; }
.try-textarea {
  width: 100%;
  min-height: 130px;
  resize: vertical;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #FDFCF9;
  color: var(--ink);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.try-textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(30, 127, 214, 0.12);
}
.try-textarea::placeholder { color: var(--ink-mute); }

.try-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 14px;
}
.try-chip {
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 7px 12px;
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
  font-family: inherit;
}
.try-chip:hover {
  border-color: var(--blue);
  color: var(--blue-deep);
  background: var(--surface);
}
.try-demo-photo {
  margin: 0 0 14px;
}
.try-demo-photo .try-photo-main {
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}
.try-demo-photo figcaption {
  margin-top: 6px;
  font-size: 12px;
  color: var(--ink-mute);
  font-family: "IBM Plex Mono", monospace;
}
.try-demo-photo figcaption b { color: var(--ink-soft); }
/* Auswahl zwischen mehreren Beispiel-Fotos */
.try-photo-pick { display: flex; gap: 8px; margin-top: 10px; }
.try-photo-thumb {
  flex: 1;
  display: flex; align-items: center; gap: 8px;
  padding: 6px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--surface); cursor: pointer; text-align: left;
  font-size: 12px; color: var(--ink-soft); transition: border-color .15s, background .15s;
}
.try-photo-thumb img { width: 34px; height: 34px; object-fit: cover; border-radius: 6px; flex: none; }
.try-photo-thumb:hover { border-color: var(--accent-2); }
.try-photo-thumb.active { border-color: var(--accent-2); background: var(--paper-deep); color: var(--ink); font-weight: 600; }
.try-chips-label {
  display: block;
  font-size: 12px;
  color: var(--ink-mute);
  margin-top: 18px;
  margin-bottom: 8px;
  font-family: "IBM Plex Mono", monospace;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.try-controls {
  margin-top: auto;
  padding-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.try-hint {
  font-size: 12px;
  color: var(--ink-mute);
  font-family: "IBM Plex Mono", monospace;
}
/* Hinweis unter der Demo: weitere Bedarfsermittlungs-Verfahren der Länder */
.try-verfahren-note {
  margin: 18px 0 0;
  padding: 14px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent-2);
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-soft);
}
.try-verfahren-note b { color: var(--ink); }
.try-btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 13px 22px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  border: 0;
  font-weight: 500;
  font-size: 15px;
  cursor: pointer;
  transition: background .15s, transform .15s;
}
.try-btn:hover:not(:disabled) { background: #051a2c; transform: translateY(-1px); }
.try-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.try-output-body {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 320px;
}
.try-output-empty {
  flex: 1;
  display: grid;
  place-items: center;
  text-align: center;
  color: var(--ink-mute);
  font-size: 14px;
  padding: 30px 20px;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  background: #FDFCF9;
}
.try-output-empty .arrow {
  display: block;
  font-family: "IBM Plex Mono", monospace;
  font-size: 32px;
  color: var(--line);
  margin-bottom: 14px;
}

.try-output-loading {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--ink-soft);
  font-size: 14.5px;
  padding: 30px 20px;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  background: #FDFCF9;
}
.try-dots { display: inline-flex; gap: 4px; }
.try-dots .dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--blue);
  animation: try-pulse 1.2s infinite ease-in-out;
}
.try-dots .dot:nth-child(2) { animation-delay: 0.15s; }
.try-dots .dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes try-pulse {
  0%, 70%, 100% { opacity: 0.3; transform: scale(0.85); }
  35% { opacity: 1; transform: scale(1.1); }
}

.try-doku {
  background: #FBFCFE;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 18px 20px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  flex: 1;
  animation: try-fade-in .35s ease-out;
}
.try-doku p { margin: 0 0 10px; }
.try-doku p:last-child { margin-bottom: 0; }
.try-doku .meta-bar {
  display: flex;
  gap: 14px;
  padding-bottom: 12px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line-soft);
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-mute);
}
.try-doku .meta-bar .draft {
  margin-left: auto;
  color: var(--ochre);
}
.try-doku-footer {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12.5px;
  color: var(--ink-mute);
}
.try-doku-footer .signbtn {
  background: var(--ink);
  color: var(--paper);
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 500;
  border: 0;
  cursor: not-allowed;
  opacity: 0.7;
}

.try-error {
  background: rgba(178, 59, 48, .07);
  border: 1px solid rgba(178, 59, 48, .25);
  border-radius: 10px;
  padding: 16px 18px;
  font-size: 14px;
  color: #B23B30;
  flex: 1;
}
.try-error b { display: block; margin-bottom: 6px; font-size: 14.5px; }
.try-error a { color: #B23B30; text-decoration: underline; }

@keyframes try-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---------- 10. Other Products Grid ---------- */
.others { padding: 24px 0 96px; }
.others-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
}
.other-card {
  flex: 0 1 calc(33.333% - 10px);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  transition: border-color .15s, transform .15s;
}
.other-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
}
.other-card .branche {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-deep);
}
.other-card h4 {
  font-size: 19px;
  margin: 2px 0 4px;
}
.other-card p {
  font-size: 14px;
  color: var(--ink-soft);
}
.other-card .more {
  margin-top: auto;
  padding-top: 14px;
  font-size: 13px;
  color: var(--ink-mute);
  font-family: "IBM Plex Mono", monospace;
}
.other-card .more::after { content: " →"; }

/* ---------- 10b. Co-Development / Ansatz ---------- */
.co-dev { padding: 96px 0; }
/* Kopf zentriert wie die Nachbar-Sektionen */
.co-dev-head { margin-bottom: 40px; text-align: center; }
.co-dev-head h2 {
  font-size: 40px;
  line-height: 1.05;
  margin-top: 12px;
}

/* Einheitliche Lesebreite + Typo für ALLE Prosa-Blöcke der Sektion (Intro, Philosophie, Netzwerk) */
.co-dev-head > p,
.co-dev-text p,
.co-dev-network {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
  text-align: justify;
  hyphens: auto;
  max-width: 62ch;
  margin-left: auto;
  margin-right: auto;
}
.co-dev-head > p { margin-top: 18px; }

.co-dev-body { display: block; margin-bottom: 40px; }

/* Philosophie-Absätze: zentrierte Lesespalte, erster Satz als dunklerer Lead */
.co-dev-text { margin: 0 auto 44px; }
.co-dev-text p { margin-bottom: 16px; }
.co-dev-text p:first-child { color: var(--ink); }

/* Netzwerk-Notiz: gleiche Spalte, dezent abgesetzt */
.co-dev-network {
  margin-top: 44px;
  margin-bottom: 56px;
  padding-top: 28px;
  border-top: 1px solid var(--line);
}
.co-dev-network b { color: var(--ink); }

/* 3 Schritt-Karten als volle Reihe (analog zum „Wie es funktioniert"-Grid darunter) */
.co-dev-loop {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.co-dev-step {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 22px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.co-dev-step .circle {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--paper);
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 15px;
}
.co-dev-step h4 {
  font-size: 17px;
  line-height: 1.2;
  margin: 4px 0 2px;
}
.co-dev-step p {
  font-size: 14px;
  color: var(--ink-soft);
  line-height: 1.5;
}
.co-dev-arrow {
  display: grid;
  place-items: center;
  color: var(--ink-mute);
  font-family: "IBM Plex Mono", monospace;
  font-size: 18px;
  padding: 0 8px;
}

.co-dev-banner {
  background: var(--paper-deep);
  border: 1px solid var(--line);
  border-left: 4px solid var(--ochre);
  border-radius: 12px;
  padding: 24px 28px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}
.co-dev-banner b {
  display: block;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 19px;
  font-weight: 600;
  margin-bottom: 4px;
}
.co-dev-banner p {
  color: var(--ink-soft);
  font-size: 15px;
  max-width: 60ch;
}

/* ---------- 11. Wie es funktioniert ---------- */
.how { padding: 96px 0; background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.how-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  counter-reset: step;
}
.how-step {
  counter-increment: step;
  padding-top: 20px;
  border-top: 2px solid var(--ink);
}
.how-step .num {
  font-family: "IBM Plex Mono", monospace;
  font-size: 12px;
  color: var(--ink-mute);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.how-step .num::before { content: "Schritt 0" counter(step) " · "; }
.how-step h4 {
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 10px;
}
.how-step p {
  font-size: 15px;
  color: var(--ink-soft);
}

/* ---------- 12. Prinzipien (Warum FloW) ---------- */
.principles { padding: 96px 0; }
.princ-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 48px;
  align-items: start;
}
.princ-grid h2 { font-size: 36px; line-height: 1.1; }
.princ-grid h2 + p {
  color: var(--ink-mute);
  margin-top: 14px;
  font-size: 16px;
}
.princ-list { display: grid; gap: 4px; }
.princ-item {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 22px;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.princ-item:last-child { border-bottom: 1px solid var(--line); }
.princ-num {
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 22px;
  color: var(--ink-mute);
  font-weight: 500;
}
.princ-item h4 { font-size: 19px; margin-bottom: 6px; }
.princ-item p {
  font-size: 15px;
  color: var(--ink-soft);
  max-width: 56ch;
}

/* ---------- 13. Preise ---------- */
.pricing { padding: 96px 0; background: var(--paper-deep); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pricing-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 40px 44px;
  max-width: 760px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.pricing-card h3 {
  font-size: 24px;
  margin-bottom: 12px;
}
.pricing-card p { color: var(--ink-soft); font-size: 16px; margin-bottom: 12px; }
.pricing-list {
  margin-top: 18px;
  border-top: 1px solid var(--line);
  padding-top: 18px;
  display: grid;
  gap: 12px;
}
.pricing-list .row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--line);
}
.pricing-list .row:last-child { border-bottom: 0; padding-bottom: 0; }
.pricing-list .row b {
  font-weight: 600;
  font-size: 15px;
  display: block;
}
.pricing-list .row .note {
  display: block;
  font-size: 13px;
  color: var(--ink-mute);
  margin-top: 3px;
}
.pricing-list .row .price {
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 18px;
  color: var(--ink);
  white-space: nowrap;
}

/* ---------- 14. FAQ ---------- */
.faq { padding: 96px 0; }
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 48px;
  align-items: start;
}
.faq-grid h2 { font-size: 36px; line-height: 1.1; }
.faq-grid > div:first-child p {
  color: var(--ink-mute);
  margin-top: 14px;
  font-size: 16px;
}
.faq-list { display: grid; gap: 0; }
.faq-item {
  border-top: 1px solid var(--line);
  padding: 22px 0;
}
.faq-list .faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item summary {
  font-size: 17px;
  font-weight: 500;
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  color: var(--ink);
  font-family: "Bricolage Grotesque", sans-serif;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: "+";
  font-family: "IBM Plex Mono", monospace;
  font-size: 20px;
  color: var(--ink-mute);
  transition: transform .2s;
}
.faq-item[open] summary::after { content: "−"; }
.faq-item p {
  margin-top: 12px;
  color: var(--ink-soft);
  font-size: 15.5px;
  max-width: 60ch;
}

/* ---------- 15. About ---------- */
.about { padding: 0 0 96px; }
.about-card {
  background: var(--ink);
  color: var(--paper);
  border-radius: var(--radius-lg);
  padding: 56px 64px;
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 36px;
  align-items: start;
}
.about-avatar {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--blue), var(--green));
  display: grid; place-items: center;
  font-family: "Bricolage Grotesque", sans-serif;
  font-weight: 600;
  font-size: 36px;
  color: white;
}
.about-card h3 {
  color: var(--paper);
  font-size: 26px;
  margin-bottom: 14px;
}
.about-card p {
  color: rgba(247, 243, 236, 0.78);
  font-size: 16.5px;
  margin-bottom: 14px;
  max-width: 60ch;
}
.about-card .sig {
  margin-top: 18px;
  font-family: "Bricolage Grotesque", sans-serif;
  font-size: 18px;
  color: var(--paper);
}
.about-card .sig .sub {
  display: block;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 13px;
  color: rgba(247, 243, 236, 0.55);
  margin-top: 2px;
}

/* ---------- 16. CTA ---------- */
.cta-section { padding: 0 0 88px; }
.cta-inner {
  text-align: center;
  padding: 64px 24px;
}
.cta-inner h2 {
  font-size: 44px;
  line-height: 1.05;
  margin-bottom: 14px;
  letter-spacing: -0.025em;
}
.cta-inner p {
  color: var(--ink-mute);
  font-size: 17px;
  margin-bottom: 28px;
  max-width: 52ch;
  margin-left: auto;
  margin-right: auto;
}

/* ---------- 17. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 36px 0 32px;
  background: var(--paper);
}
.site-footer .container {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  gap: 32px;
}
.site-footer h5 {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin: 0 0 14px;
  font-weight: 500;
}
.site-footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
  font-size: 14px;
}
.site-footer a {
  color: var(--ink-soft);
  text-decoration: none;
}
.site-footer a:hover { color: var(--ink); }
.brand-blurb {
  font-size: 13.5px;
  color: var(--ink-mute);
  max-width: 32ch;
  margin-top: 14px;
}
.legalrow {
  grid-column: 1 / -1;
  border-top: 1px solid var(--line);
  margin-top: 16px;
  padding-top: 20px;
  font-size: 12.5px;
  color: var(--ink-mute);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.site-footer .brand img { height: 54px; width: auto; max-width: 240px; }

/* ---------- 18. Responsive ---------- */
@media (max-width: 980px) {
  :root { --gutter: 24px; }

  .nav-links { display: none; }
  .nav-links.mobile-cta { display: flex; }
  .nav-links.mobile-cta a:not(.btn) { display: none; }

  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero h1 { font-size: 40px; }
  .hero-lede { font-size: 17px; }

  .flagship-grid { grid-template-columns: 1fr; gap: 32px; }
  .flagship-head { grid-template-columns: 1fr; }
  .flagship-head .meta { text-align: left; }
  .flagship-head h2 { font-size: 32px; }

  .other-card { flex-basis: calc(50% - 7px); }
  .how-grid { grid-template-columns: 1fr; gap: 28px; }

  .co-dev-body { grid-template-columns: 1fr; gap: 32px; }
  .co-dev-loop {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .co-dev-arrow { transform: rotate(90deg); padding: 4px 0; }
  .co-dev-head h2 { font-size: 30px; }

  .try-grid { grid-template-columns: 1fr; gap: 20px; }
  .try-head h2 { font-size: 30px; }
  .try-output-body { min-height: 240px; }

  .princ-grid { grid-template-columns: 1fr; gap: 24px; }
  .faq-grid { grid-template-columns: 1fr; gap: 24px; }

  .about-card { grid-template-columns: 1fr; padding: 32px; gap: 20px; }
  .pricing-card { padding: 32px 28px; }

  .site-footer .container { grid-template-columns: 1fr 1fr; }

  .section, .flagship, .how, .principles, .pricing, .faq, .others { padding-top: 64px; padding-bottom: 64px; }
  .section-head h2 { font-size: 32px; }
  .cta-inner h2 { font-size: 32px; }
}

@media (max-width: 640px) {
  .hero { padding: 32px 0 48px; }
  .hero h1 { font-size: 34px; }
  .other-card { flex-basis: 100%; }
  .flagship-numbers { grid-template-columns: 1fr; }
  .flagship-numbers .n {
    border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .flagship-numbers .n:last-child { border-bottom: 0; }
  .site-footer .container { grid-template-columns: 1fr; }
  .trust .container { gap: 16px; }
  .pricing-list .row { grid-template-columns: 1fr; }
  .pricing-list .row .price { margin-top: 4px; }
}

/* ============ Redesign C: Tech-Sektionen + Scroll-Reveal ============ */
.section-dark {
  background: var(--dark-grad);
  color: #DCE6F2;
  border: none;
}
.section-dark h2 { color: #fff; }
.section-dark .section-head p,
.section-dark p { color: #A9BBD0; }
.section-dark .card,
.section-dark .panel {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
}
.section-dark .accent-grad {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* Sanftes Einblenden beim Scrollen */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ============ Echte Fälle — Full-Width-Fallkarten ============ */
.cases-list { display: flex; flex-direction: column; gap: 36px; }
.case-card {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.case-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.case-card--reverse .case-visual { order: 2; }

/* Stilisiertes Mockup-Panel (kein echter Screenshot) */
.case-visual {
  border-radius: var(--radius);
  padding: 26px;
  min-height: 230px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  justify-content: center;
  color: #Eaf1fb;
  background: var(--dark-grad);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.case-visual--inbox {
  background:
    radial-gradient(900px 500px at 85% -20%, rgba(79,174,58,.22), transparent 60%),
    linear-gradient(180deg, #0B1A2B 0%, #0E2336 100%);
}
.cv-chip {
  align-self: flex-start;
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: #cdd9ec;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  padding: 5px 10px; border-radius: 999px;
}
.cv-line {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 15px; line-height: 1.4;
  display: flex; align-items: flex-start; gap: 9px;
}
.cv-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); margin-top: 6px; flex: none; box-shadow: 0 0 10px rgba(109,94,240,.8); }
.case-visual--inbox .cv-dot { background: var(--green); box-shadow: 0 0 10px rgba(79,174,58,.8); }
.cv-step { font-size: 13.5px; color: #aebbd0; font-family: "IBM Plex Mono", monospace; }
.cv-step strong { color: #fff; font-weight: 600; }

.case-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.case-tags span {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px; letter-spacing: .06em;
  color: var(--blue-deep);
  background: rgba(30,127,214,.08);
  border: 1px solid rgba(30,127,214,.18);
  padding: 4px 10px; border-radius: 999px;
}
.case-body h3 { font-size: 30px; line-height: 1.05; margin-bottom: 10px; }
.case-tagline { font-size: 18px; font-weight: 600; color: var(--ink); margin-bottom: 12px; }
.case-body > p:last-child { color: var(--ink-soft); font-size: 16px; }

@media (max-width: 820px) {
  .case-card { grid-template-columns: 1fr; gap: 22px; padding: 22px; }
  .case-card--reverse .case-visual { order: 0; }
}

/* ============ Moderner Hero-Demonstrator ============ */
.hero { overflow: hidden; }
.hero-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero .container { position: relative; z-index: 1; }
.blob {
  position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  will-change: transform;
}
.blob-1 { width: 520px; height: 520px; top: -140px; right: -80px;
  background: radial-gradient(circle at 30% 30%, rgba(109,94,240,.55), transparent 70%);
  animation: drift1 18s ease-in-out infinite; }
.blob-2 { width: 460px; height: 460px; top: 40px; left: -120px;
  background: radial-gradient(circle at 30% 30%, rgba(30,127,214,.45), transparent 70%);
  animation: drift2 22s ease-in-out infinite; }
.blob-3 { width: 360px; height: 360px; bottom: -120px; left: 38%;
  background: radial-gradient(circle at 30% 30%, rgba(79,174,58,.30), transparent 70%);
  animation: drift3 26s ease-in-out infinite; }
@keyframes drift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-40px,40px)} }
@keyframes drift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,-30px)} }
@keyframes drift3 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-30px,-40px) scale(1.08)} }
.hero-grain {
  position: absolute; inset: 0; opacity: .04; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) { .blob { animation: none; } }

/* Riesen-Typo */
.hero-title {
  font-size: clamp(44px, 7.2vw, 92px);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-bottom: 12px;
}
/* Wort-Masken-Reveal */
.hw { display: inline-block; overflow: hidden; vertical-align: top; }
.hw > span { display: inline-block; will-change: transform; }
.pre-anim .h-rise { opacity: 0; transform: translateY(20px); }

/* Magnetischer Button */
.btn.magnetic { will-change: transform; }

/* Animierte Link-Unterstreichung (Sekundär-CTA) */
.btn-secondary.link-underline { position: relative; }
.btn-secondary.link-underline::after {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: 10px; height: 1.5px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
.btn-secondary.link-underline:hover::after { transform: scaleX(1); }

/* Hero Eyebrow + Sub (vorher inline) */
.hero-eyebrow {
  text-transform: uppercase; letter-spacing: .08em; font-size: 13px;
  color: var(--ink-mute); margin: 0 0 8px;
  font-family: "IBM Plex Mono", monospace;
}
.hero-sub { font-size: 1.15rem; font-weight: 600; color: var(--ink); margin: 0 0 12px; }

/* ============ Animierte Fall-Mockups (Telefon + Listen-Fenster) ============ */
.cv-phone, .cv-desk { display: flex; align-items: center; justify-content: center; }

/* Telefon */
.phone {
  width: 210px; background: #0c1525; border: 1px solid rgba(255,255,255,.12);
  border-radius: 30px; padding: 16px 14px 20px; box-shadow: 0 22px 55px rgba(0,0,0,.45);
}
.phone-notch { display:block; width:48px; height:5px; border-radius:3px; background:rgba(255,255,255,.18); margin:0 auto 14px; }
.phone-screen { text-align:center; color:#dce6f5; }
.call-rings { position:relative; width:70px; height:70px; margin:4px auto 0; }
.call-rings span { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(109,94,240,.55); animation: ring 2.1s ease-out infinite; }
.call-rings span:nth-child(2){ animation-delay:1.05s; }
@keyframes ring { 0%{transform:scale(.55);opacity:.9} 100%{transform:scale(1.5);opacity:0} }
.call-icon { width:50px; height:50px; line-height:50px; border-radius:50%; background:var(--grad); color:#fff; font-size:22px; margin:-60px auto 10px; position:relative; z-index:1; }
.call-status { font-size:14px; font-weight:600; }
.call-num { font-size:11.5px; color:#9fb0c8; margin:2px 0 12px; font-family:"IBM Plex Mono",monospace; }
.call-flow { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; text-align:left; }
.cf { font-size:12px; color:#cdd9ec; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.09);
  border-radius:9px; padding:7px 9px; display:flex; gap:7px; align-items:flex-start; }
.cf-ic { color:var(--accent-2); font-weight:700; }
.cf b { color:#fff; }

/* Listen-Fenster */
.window { width:100%; max-width:350px; background:#0c1525; border:1px solid rgba(255,255,255,.12);
  border-radius:14px; overflow:hidden; box-shadow:0 22px 55px rgba(0,0,0,.45); }
.win-bar { display:flex; align-items:center; gap:10px; padding:9px 12px; background:rgba(255,255,255,.04); border-bottom:1px solid rgba(255,255,255,.08); }
.win-dots i { display:inline-block; width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.22); margin-right:5px; }
.win-title { font-size:12px; color:#9fb0c8; font-family:"IBM Plex Mono",monospace; }
.win-body { padding:14px; display:flex; flex-direction:column; gap:10px; }
.kard { background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:10px 12px; color:#dce6f5; }
.kard-head { font-size:12px; color:#cdd9ec; display:flex; align-items:center; gap:7px; margin-bottom:5px; }
.kard-dot { width:8px; height:8px; border-radius:50%; background:var(--green); box-shadow:0 0 8px rgba(79,174,58,.85); flex:none; }
.kard-msg { font-size:13px; }
.kard-label { font-size:11px; color:#9fb0c8; font-family:"IBM Plex Mono",monospace; margin-bottom:4px; }
.kard-typing { font-size:12.5px; color:#dce6f5; line-height:1.4; }
.caret { display:inline-block; width:7px; height:13px; background:var(--accent-2); margin-left:2px; vertical-align:-2px; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50%{opacity:0} }
.kard-slot { background:rgba(79,174,58,.12); border-color:rgba(79,174,58,.30); font-size:12.5px; }
.kard-slot b { color:#fff; }

/* Animierte Startzustände — nur wenn JS/GSAP aktiv (.mock-anim). Sonst alles sichtbar. */
.mock-anim .cf,
.mock-anim .kard-new, .mock-anim .kard-draft, .mock-anim .kard-slot { opacity:0; transform:translateY(10px); }
@media (prefers-reduced-motion: reduce) { .call-rings span { animation:none; } .caret { animation:none; } }

/* ============ Ursprung-Sektion (DokuHilfe) + Aufklapp-Bereich ============ */
.origin-expand {
  margin-top: 28px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--shadow-sm); overflow: hidden;
}
.origin-expand > summary {
  cursor: pointer; list-style: none; padding: 18px 24px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 600; font-size: 17px;
  transition: background .15s;
}
.origin-expand > summary::-webkit-details-marker { display: none; }
.origin-expand > summary:hover { background: var(--mist); }
.origin-caret { color: var(--accent); transition: transform .3s ease; flex: none; }
.origin-expand[open] .origin-caret { transform: rotate(180deg); }
.origin-expand-body { padding: 8px 24px 28px; border-top: 1px solid var(--line-soft); }
.origin-roadmap { margin: 20px 0 28px; }
.origin-demo-title { font-size: 22px; margin: 6px 0 6px; }
.origin-demo-sub { color: var(--ink-mute); font-size: 15px; margin-bottom: 18px; }

/* ============ Hero-Visual-Varianten (A/B/C Vergleich) ============ */
/* A — „Dein Problem → Deine Lösung"-Karte */
.solcard { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); padding: 28px; min-height: 360px; display: flex; align-items: center; }
.solcard-inner { position: relative; width: 100%; min-height: 250px; }
.sol-item { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 12px; justify-content: center; opacity: 0; }
.sol-eyebrow { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-mute); }
.sol-eyebrow.good { color: var(--green-deep); }
.sol-prob, .sol-sol { padding: 15px 18px; border-radius: 14px; border: 1px solid var(--line); }
.sol-prob { background: var(--mist); }
.sol-sol { background: linear-gradient(135deg, rgba(30,127,214,.10), rgba(109,94,240,.10)); border-color: rgba(30,127,214,.25); }
.sol-prob p, .sol-sol p { font-size: 17px; font-weight: 600; margin-top: 5px; line-height: 1.3; }
.sol-arrow { text-align: center; color: var(--accent); font-size: 20px; }
.solcard .sol-item:first-child { opacity: 1; }            /* Fallback ohne JS */
.js-sol .solcard .sol-item { opacity: 0; }

/* B — schwebende Mini-Mockups (nutzt .phone/.window verkleinert) */
.float-mocks { position: relative; min-height: 400px; }
.fm-a { position: absolute; left: 0; top: 10px; transform: scale(.82); transform-origin: top left; animation: floatA 6s ease-in-out infinite; }
.fm-b { position: absolute; right: 0; top: 150px; transform: scale(.86); transform-origin: top right; animation: floatB 7.5s ease-in-out infinite; }
@keyframes floatA { 0%,100%{transform:scale(.82) translateY(0)} 50%{transform:scale(.82) translateY(-16px)} }
@keyframes floatB { 0%,100%{transform:scale(.86) translateY(0)} 50%{transform:scale(.86) translateY(14px)} }
@media (prefers-reduced-motion: reduce){ .fm-a,.fm-b{animation:none} }

/* C — Solo-Hero (keine Karte, volle Breite, größere Typo) */
.hero--solo .hero-grid { grid-template-columns: 1fr; }
.hero--solo .hero-grid > div { max-width: 940px; }
.hero--solo .hero-title { font-size: clamp(48px, 9vw, 110px); }

/* ============ Hero-E: Glasscheibe mit durchlaufenden Gedanken ============ */
.glass-pane {
  position: relative; overflow: hidden;
  min-height: 380px;
  background: linear-gradient(135deg, rgba(255,255,255,.55), rgba(255,255,255,.18));
  -webkit-backdrop-filter: blur(24px) saturate(165%);
  backdrop-filter: blur(24px) saturate(165%);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 50px rgba(15,40,70,.18),
              inset 0 1px 0 rgba(255,255,255,.9),
              inset 0 -1px 0 rgba(120,140,170,.20);
}
/* Glanz-Streifen / Reflexion — lässt es nach echtem Glas aussehen */
.glass-pane::before {
  content: ""; position: absolute; top: -60%; left: -25%; width: 60%; height: 200%; z-index: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.55) 50%, transparent 75%);
  transform: rotate(9deg); pointer-events: none;
}
/* Förderband füllt das ganze Glas; Text entsteht VERBORGEN hinter den Bändern */
.thoughts-vp {
  position: absolute; inset: 0; z-index: 1; overflow: hidden; padding: 0 28px;
  /* Fade NUR oben (Austritt hinterm Kopf-Band); unten solide -> Text läuft vom unteren Rand rein */
  -webkit-mask-image: linear-gradient(transparent 0%, #000 22%, #000 100%);
  mask-image: linear-gradient(transparent 0%, #000 22%, #000 100%);
}
.thoughts-track { display: flex; flex-direction: column; will-change: transform; }
.thought { font-size: 15.5px; line-height: 1.4; color: var(--ink-soft); font-style: italic; margin: 0 0 40px; }
/* Kopf-Band oben — verdeckt den oberen Bandrand (Text verschwindet dahinter) */
.glass-head {
  position: absolute; top: 0; left: 0; right: 0; z-index: 3;
  padding: 18px 28px 26px;
  background: linear-gradient(to bottom, rgba(247,249,252,.94) 45%, rgba(247,249,252,0));
  font-family: "IBM Plex Mono", monospace; font-size: 12px; letter-spacing: .04em;
  color: var(--ink-mute); display: flex; align-items: center; gap: 8px;
}
.glass-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 10px rgba(109,94,240,.8); animation: glassPulse 2.4s ease-in-out infinite; }
@keyframes glassPulse { 0%,100%{opacity:.5} 50%{opacity:1} }
/* Fuß-Band unten — verdeckt den unteren Bandrand (= verborgene Entstehung, dein roter Pfeil) */
.glass-foot {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 46px 28px 18px;
  /* deckend im unteren Bereich -> Gedanken sind dahinter verborgen, erscheinen erst DARÜBER */
  background: linear-gradient(to top, rgba(247,249,252,.98) 52%, rgba(247,249,252,0));
}
.glass-foot .gf-text {
  font-family: "Bricolage Grotesque", sans-serif; font-weight: 700; font-size: 18px;
  background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: reduce){ .thoughts-track{animation:none} .glass-dot{animation:none} }

/* Leere Lücke zwischen den Gedanken-Durchläufen */
.thought-gap { height: 22px; flex: none; }

/* Preis-Sektion: Kopf zentriert (passend zur zentrierten Karte) */
.pricing .section-head { margin-left: auto; margin-right: auto; }