/* ==========================================================================
   Calenduo Landing

   Gestaltungsidee: In Calenduo hat jedes Familienmitglied eine eigene Farbe.
   Das ist das einzige wirklich eigene Zeichen des Produkts -- deshalb traegt
   es hier die Seite: als Chips im Hero, als Stimmen in den Zitaten, als
   Teilnehmer auf der Terminkarte. Farbe bedeutet immer "ein Mensch".
   Icons und Zahlen bekommen sie bewusst nicht.

   Struktur statt Verlauf: Die alte Fassung lag als ein einziger Farbverlauf
   ueber 9700px -- ohne Abschnitte, ohne Rhythmus. Jetzt hat jede Sektion
   einen eigenen Grund (Papier / Blush / Tinte), und das dunkle Showcase-Band
   bildet das Rueckgrat der Seite.
   ========================================================================== */

/* Roboto -- dieselbe Schrift wie in der App. Die Landing soll aussehen wie
   das Produkt, das sie zeigt; eine eigene Schrift hier haette die Seite von
   der Anwendung abgekoppelt. Variabler Schnitt, damit fuer Ueberschriften
   auch 800/900 zur Verfuegung steht und die Hierarchie trotzdem sitzt.
   Selbst gehostet, weil die CSP der Landing kein externes font-src erlaubt. */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Roboto-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/Roboto-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Grundfarben: warmes Pflaumen-Schwarz statt getoentem Neutralgrau, warmes
     Papier statt Weiss. Das haelt die Seite freundlich, ohne rosa zu ertrinken. */
  --ink: #26141f;
  --ink-raised: #34202c;
  --body: #5b4351;
  --body-on-ink: #d8c6ce;
  --paper: #fdf9f6;
  --blush: #fbeef3;
  --line: #ecdce3;
  --line-on-ink: #4a3441;

  /* Handlungsfarbe. Bleibt das Magenta der App (Icon, theme-color, UI) --
     nur liegt es jetzt auf ruhigem Grund und kann endlich wirken. */
  --brand: #d81b60;
  --brand-deep: #ad1457;
  --brand-wash: #fce4ec;

  /* Mitgliederfarben. Exakt die Werte aus der App, damit Seite und
     Screenshots dieselbe Sprache sprechen. */
  --m-green: #34a853;
  --m-blue: #1a8fe3;
  --m-orange: #f29900;
  --m-purple: #9334e6;

  /* Identisch zum Stack der App (src/styles.scss). */
  --font-display: 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  /* Typoskala, modular ~1.25 -- mit echten Spruengen, damit Hierarchie
     sichtbar wird. Vorher war alles zwischen 15px und 28px eingeebnet. */
  --t-xs: 0.875rem;
  --t-sm: 0.9375rem;
  --t-base: 1.0625rem;
  --t-lg: 1.1875rem;
  --t-h3: 1.375rem;
  --t-h2: clamp(1.75rem, 1.2rem + 2.4vw, 2.375rem);
  --t-h1: clamp(2.375rem, 1.4rem + 4.6vw, 4.125rem);

  --radius-s: 10px;
  --radius-m: 18px;
  --radius-l: 28px;

  --shell: 1140px;
  --reading: 64ch;

  /* Ein Wert fuer alle Sektionen, statt sieben leicht verschiedener. Vorher
     ergaben sich Abstaende von 164/176/180/200px -- der Unterschied ist zu
     klein, um als Absicht zu lesen, und zu gross, um sauber zu wirken. Den
     Rhythmus geben ohnehin die Farbbaender, nicht wechselnde Polster. */
  --section-y: clamp(56px, 7vw, 88px);
  --head-gap: clamp(28px, 4vw, 42px);

  /* Hoehe der klebenden Kopfzeile -- fuer Anker-Spruenge gebraucht. */
  --header-h: 62px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; }
/* Ohne das landet ein Anker-Sprung aus der Navigation unter der klebenden
   Kopfzeile und die Ueberschrift des Ziels ist verdeckt. */
section[id] { scroll-margin-top: calc(var(--header-h) + 12px); }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
body {
  font-family: var(--font-sans);
  font-size: var(--t-base);
  line-height: 1.6;
  color: var(--body);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }

/* Roboto ist eine ruhige Schrift -- die Hierarchie muss deshalb ueber Gewicht
   und Laufweite kommen, nicht ueber die Form der Buchstaben. Grosse Grade
   laufen enger, kleine bleiben normal. */
h1, h2, h3 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
}

:focus-visible {
  outline: 2.5px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

/* padding-inline statt der Kurzschreibweise: `padding: 0 20px` setzt auch
   oben und unten auf 0 und hat so das Polster der Kopfzeile ausgehebelt --
   die Leiste war dadurch 37px statt 60px hoch. */
.container {
  width: 100%;
  max-width: var(--shell);
  margin: 0 auto;
  padding-inline: 20px;
}

/* Sprachumschaltung: unveraendertes Prinzip, die Seite traegt beide Sprachen
   im Markup und blendet die nicht aktive aus. */
[data-lang] { display: none; }
html[data-site-lang="de"] [data-lang="de"] { display: block; }
html[data-site-lang="en"] [data-lang="en"] { display: block; }
html[data-site-lang="de"] [data-lang="de"].inline { display: inline; }
html[data-site-lang="en"] [data-lang="en"].inline { display: inline; }

/* Ausnahme fuer die Kopfzeile: dort liegen beide Sprachfassungen
   uebereinander in derselben Rasterzelle, die inaktive nur unsichtbar statt
   ausgeblendet. Damit richtet sich die Breite nach der laengeren Fassung und
   beim Sprachwechsel bleibt alles an seinem Platz. Vorher wurde die
   Navigation in Englisch 32px breiter, alle Eintraege sind gewandert -- und
   der Umschalter rutschte unter dem Mauszeiger weg, mit dem man ihn gerade
   geklickt hatte. */
.site-nav a,
.header-actions .btn {
  display: inline-grid;
  align-items: center;
  justify-items: center;
}
.site-nav a > [data-lang],
.header-actions .btn > [data-lang] {
  grid-area: 1 / 1;
  display: block;
  visibility: hidden;
}
html[data-site-lang="de"] .site-nav a > [data-lang="de"],
html[data-site-lang="de"] .header-actions .btn > [data-lang="de"],
html[data-site-lang="en"] .site-nav a > [data-lang="en"],
html[data-site-lang="en"] .header-actions .btn > [data-lang="en"] {
  visibility: visible;
}

/* ===== Buttons ========================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: var(--t-sm);
  line-height: 1.2;
  white-space: nowrap;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}
.btn-primary { background: var(--brand); color: #fff; }
.btn-primary:hover { background: var(--brand-deep); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: var(--ink); }
.btn-sm { padding: 8px 14px; font-size: var(--t-xs); }
.btn-lg { padding: 16px 30px; font-size: var(--t-base); }

/* ===== Kopfzeile ======================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(253, 249, 246, 0.88);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
/* Drei Spalten, nicht space-between: Logo und Buttons sind unterschiedlich
   breit, dadurch saesse eine mittig gemeinte Navigation sichtbar schief.
   Gleiche Flex-Basis links und rechts zentriert sie wirklich. */
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.logo img { width: 26px; height: 26px; border-radius: 7px; }

/* Ankernavigation. Auf einer knapp 10.000px langen Seite braucht es eine
   Moeglichkeit zu springen -- unter 900px weicht sie dem CTA. */
.site-nav {
  display: none;
  flex: 0 0 auto;
  gap: 28px;
  font-size: var(--t-sm);
  font-weight: 500;
}
.site-nav a {
  position: relative;
  color: var(--body);
  padding: 6px 0;
  transition: color 0.18s ease;
}
/* Unterstrich waechst aus der Mitte, statt hart zu erscheinen. */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 50%;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--brand);
  transition: left 0.22s ease, right 0.22s ease;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a:hover::after { left: 0; right: 0; }
/* Der Abschnitt, in dem man gerade steht, bleibt markiert. */
.site-nav a.is-current { color: var(--ink); font-weight: 700; }
.site-nav a.is-current::after { left: 0; right: 0; opacity: 0.45; }

.header-actions { display: flex; align-items: center; justify-content: flex-end; flex: 0 0 auto; gap: 8px; }
/* Anmelden tritt auf schmalen Screens zurueck -- sonst passen Logo,
   Sprachumschalter und zwei Buttons nicht in eine Zeile. */
.header-actions .btn-ghost { display: none; }
.lang-toggle {
  display: flex;
  flex-shrink: 0;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
}
.lang-toggle button {
  border: none;
  background: transparent;
  padding: 5px 9px;
  font-family: var(--font-sans);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--body);
  cursor: pointer;
  transition: background-color 0.18s ease, color 0.18s ease;
}
.lang-toggle button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* ===== Sektionsgrund und Rhythmus ======================================= */
/* Abstaende sind bewusst ungleich: enger, wo Inhalte zusammengehoeren,
   weiter beim Themenwechsel. Gleichmaessige 96px ueberall lassen eine Seite
   gestreckt wirken. */
.problem, .features { background: var(--blush); }
.showcase { background: var(--ink); color: var(--body-on-ink); }
.showcase h2, .showcase h3 { color: var(--paper); }

.section-head { max-width: var(--reading); }
.section-head h2 { font-size: var(--t-h2); }
.section-head p {
  margin-top: 14px;
  font-size: var(--t-lg);
  color: var(--body);
}
.showcase .section-head p { color: var(--body-on-ink); }

/* ===== Hero ============================================================= */
.hero { padding: clamp(28px, 4vw, 48px) 0 var(--section-y); }
.hero-inner { display: flex; flex-direction: column; gap: 40px; }
.hero-text { max-width: 620px; }
.hero-text h1 {
  font-size: var(--t-h1);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.04;
}
.hero-sub {
  margin-top: 20px;
  font-size: var(--t-lg);
  max-width: 48ch;
}

/* Die Mitglieder-Chips. Sie stehen bewusst nur dort, wo die Farbe etwas
   bedeutet -- auf der Terminkarte als die vier Menschen, die dabei sind. */
.chips-row { display: flex; }
.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 700;
  border: 2.5px solid var(--paper);
}
.chips-row .chip + .chip { margin-left: -10px; }
.chip-green { background: var(--m-green); }
.chip-blue { background: var(--m-blue); }
.chip-orange { background: var(--m-orange); }
.chip-purple { background: var(--m-purple); }

.hero-cta { margin-top: 30px; }
.hero-cta-note {
  margin-top: 12px;
  font-size: var(--t-sm);
  color: var(--body);
  max-width: 44ch;
}
/* Abstand haelt sich an die Markenrichtlinien von Apple und Google: Freiraum
   rundum mindestens ein Viertel der Badge-Hoehe (bei 40px Hoehe also 10px). */
.store-badges { margin-top: 20px; display: flex; flex-wrap: wrap; align-items: center; gap: 18px; }
.store-badges img { display: block; width: auto; }
.store-badges .badge-apple { height: 52px; }
/* Das offizielle Google-Badge hat je Sprache unterschiedlich viel fest
   eingebautes Padding im Bild selbst (DE: nur oben/unten, EN: zusaetzlich
   links/rechts -- vermessen per Pixel-Bounding-Box beider PNGs). Bei
   gleicher Bildhoehe wirkt der Schriftzug dadurch in einer Sprache kleiner.
   .badge-crop blendet das ueberstehende Padding aus (overflow: hidden),
   waehrend das Bild selbst unverzerrt bleibt -- Position und Groesse pro
   Sprache kommen aus den data-w-, data-h-, data-top-, data-left- und
   data-cw-Attributen in index.html, angewendet von applyImages() in
   script.js. So bleibt in
   beiden Sprachen exakt derselbe sichtbare Inhalt (~52px), auf gleicher
   Hoehe wie das Apple-Badge, mit vollem eigenem Clear-Space aussenherum. */
.badge-crop { display: block; overflow: hidden; height: 52px; position: relative; }
.badge-crop img.badge-google { position: absolute; display: block; }

/* --- Der KI-Moment ------------------------------------------------------
   Das eigentlich Eigene an Calenduo ist nicht das Monatsraster, das jeder
   Kalender hat, sondern: hingeschriebener Satz rein, fertiger Termin raus.
   Deshalb steht dieser Moment als echtes Seitenelement im Hero -- lesbar in
   jeder Groesse, ohne Screenshot-Lupe. Er ist die eine laute Stelle der
   Seite; alles andere drumherum bleibt still. */
.ai-demo {
  margin-top: 36px;
  max-width: 460px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Das Eingabefeld. Es traegt keine Beschriftung -- der Cursor und die Form
   sagen bereits, dass hier jemand tippt. */
.ai-line {
  border: 1.5px solid var(--line);
  border-radius: var(--radius-m);
  background: #fff;
  padding: 15px 17px;
  font-size: var(--t-base);
  color: var(--ink);
  line-height: 1.45;
}
.ai-caret {
  display: inline-block;
  width: 2px;
  height: 1.05em;
  vertical-align: -0.16em;
  margin-left: 2px;
  background: var(--brand);
}
.ai-arrow {
  align-self: center;
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: var(--t-xs);
  color: var(--body);
}
.ai-arrow svg { width: 16px; height: 16px; color: var(--brand); }
.ai-card {
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-m);
  background: #fff;
  padding: 16px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
  box-shadow: 6px 6px 0 var(--brand-wash);
}
.ai-card-emoji { font-size: 1.75rem; line-height: 1; }
.ai-card-title {
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
}
.ai-card-meta { margin-top: 3px; font-size: var(--t-sm); color: var(--body); }
/* Auf der Karte stehen die vier nebeneinander statt gestapelt: hier zaehlt,
   wer dabei ist, also muss jeder Name lesbar bleiben. */
.ai-card .chips-row { margin-top: 11px; gap: 5px; }
.ai-card .chip { width: 30px; height: 30px; font-size: 0.75rem; border: none; }
.ai-card .chips-row .chip + .chip { margin-left: 0; }

.phone-mockup {
  position: relative;
  width: min(280px, 78vw);
  aspect-ratio: 1284 / 2778;
  border-radius: 38px;
  background: var(--ink);
  padding: 9px;
  box-shadow: 0 26px 50px -18px rgba(38, 20, 31, 0.45);
  flex-shrink: 0;
}
.phone-mockup img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
}
.hero-figure { display: flex; justify-content: center; }

/* ===== Problem ========================================================== */
.problem { padding: var(--section-y) 0; }
.problem h2 { font-size: var(--t-h2); max-width: 20ch; }
/* Drei Saetze, drei Stimmen -- deshalb drei Mitgliederfarben und leicht
   versetzte Sprechblasen statt drei gleicher Textzeilen. */
.problem-quotes {
  margin-top: var(--head-gap);
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.quote {
  position: relative;
  align-self: flex-start;
  max-width: 30ch;
  background: #fff;
  border-radius: 20px 20px 20px 5px;
  padding: 15px 19px;
  font-size: var(--t-lg);
  color: var(--ink);
  border-left: 4px solid var(--quote-color, var(--m-blue));
  box-shadow: 0 3px 14px rgba(38, 20, 31, 0.06);
}
.quote:nth-child(1) { --quote-color: var(--m-green); }
.quote:nth-child(2) { --quote-color: var(--m-orange); align-self: flex-end; border-radius: 20px 20px 5px 20px; border-left: none; border-right: 4px solid var(--quote-color); }
.quote:nth-child(3) { --quote-color: var(--m-purple); }
.problem-answer {
  margin-top: var(--head-gap);
  max-width: var(--reading);
  font-size: var(--t-lg);
  color: var(--ink);
}

/* ===== Drei Schritte ==================================================== */
.steps { padding: var(--section-y) 0; }
.steps h2 { font-size: var(--t-h2); }
.step-list {
  margin-top: var(--head-gap);
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
/* Nummern sind hier berechtigt: ohne Kalender keine Mitglieder, ohne
   Mitglieder kein geteilter Termin. Es ist wirklich eine Reihenfolge. */
.step { display: flex; gap: 16px; align-items: flex-start; }
.step-num {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid var(--ink);
  font-family: var(--font-display);
  font-size: var(--t-lg);
  font-weight: 600;
  color: var(--ink);
}
.step h3 { font-size: var(--t-h3); }
.step p { margin-top: 6px; font-size: var(--t-sm); }

/* ===== Funktionen ======================================================= */
/* Bewusst keine sechs identischen weissen Karten mit Schatten -- das ist das
   Baukastenmuster, an dem man Vorlagen erkennt. Stattdessen ein ruhiges
   Raster mit Haarlinien: die Funktionen lesen sich als Liste von Faehigkeiten,
   nicht als sechs Werbekacheln. */
.features { padding: var(--section-y) 0; }
.features h2 { font-size: var(--t-h2); }
.feature-grid {
  margin-top: var(--head-gap);
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.feature-card { padding: 26px 0; border-top: 1px solid var(--line); }
.feature-card:last-child { border-bottom: 1px solid var(--line); }
.feature-icon { color: var(--brand); margin-bottom: 12px; }
.feature-icon svg { width: 26px; height: 26px; }
.feature-card h3 { font-size: var(--t-h3); }
.feature-card p { margin-top: 7px; font-size: var(--t-sm); max-width: 40ch; }

/* ===== Showcase: das dunkle Band ======================================== */
/* Das Rueckgrat der Seite. Hier sind die Screenshots gross genug, um das
   Produkt wirklich zu sehen -- vorher waren sie auf Desktop zu klein zum Lesen. */
.showcase { padding: var(--section-y) 0; }
.showcase h2 { font-size: var(--t-h2); }
.tour { margin-top: var(--head-gap); display: flex; flex-direction: column; gap: clamp(56px, 7vw, 80px); }
.tour-item { display: flex; flex-direction: column; gap: 30px; align-items: flex-start; }
.tour-item .phone-mockup {
  width: min(272px, 74vw);
  align-self: center;
  background: var(--ink-raised);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.65);
}
.tour-text { max-width: 44ch; }
.tour-text h3 { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem); }
.tour-text > p { margin-top: 12px; font-size: var(--t-base); color: var(--body-on-ink); }
.tour-points { margin-top: 18px; display: flex; flex-direction: column; gap: 9px; }
.tour-points li {
  position: relative;
  padding-left: 26px;
  font-size: var(--t-sm);
  color: var(--body-on-ink);
}
.tour-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}

/* ===== Beta-Hinweis ===================================================== */
/* Frueher eine einsame Preiskarte mit "0 EUR" -- das ist kein Preismodell,
   sondern ein Stand der Dinge. Jetzt steht es als klare Aussage da. */
.pricing { padding: var(--section-y) 0; }
.price-card {
  max-width: 760px;
  border: 1.5px solid var(--ink);
  border-radius: var(--radius-l);
  background: #fff;
  padding: clamp(26px, 4vw, 40px);
  box-shadow: 8px 8px 0 var(--brand-wash);
}
.price-card h2 { font-size: var(--t-h2); }
.price-lede { margin-top: 14px; font-size: var(--t-lg); color: var(--ink); max-width: 52ch; }
.price-card ul {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}
.price-card li { position: relative; padding-left: 26px; font-size: var(--t-sm); }
.price-card li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--brand);
}
.price-cta { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.price-note { font-size: var(--t-xs); color: var(--body); max-width: 38ch; }

/* ===== Fragen =========================================================== */
/* Flache Liste mit Haarlinien statt Karten: die FAQ soll sich vom
   Funktionsraster unterscheiden, nicht dasselbe Muster wiederholen. */
.faq { padding: var(--section-y) 0; }
.faq h2 { font-size: var(--t-h2); }
.faq-list { margin-top: var(--head-gap); max-width: 780px; }
.faq-list details { border-top: 1px solid var(--line); }
.faq-list details:last-of-type { border-bottom: 1px solid var(--line); }
.faq-list summary {
  list-style: none;
  cursor: pointer;
  padding: 20px 40px 20px 0;
  position: relative;
  font-family: var(--font-display);
  font-size: var(--t-h3);
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px;
  height: 11px;
  margin-top: -7px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(-135deg); margin-top: -3px; }
.faq-list p { padding: 0 0 22px; font-size: var(--t-sm); max-width: var(--reading); }
.faq-list a { color: var(--brand); text-decoration: underline; text-underline-offset: 2px; }

/* ===== Fusszeile ======================================================== */
.site-footer { background: var(--ink); color: var(--body-on-ink); padding: 44px 0 36px; }
.footer-inner { display: flex; flex-direction: column; gap: 22px; font-size: var(--t-sm); }
.footer-brand { display: flex; align-items: center; gap: 9px; color: var(--paper); font-family: var(--font-display); font-weight: 600; }
.footer-brand img { width: 24px; height: 24px; border-radius: 7px; }
.footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.footer-links a { border-bottom: 1px solid transparent; padding-bottom: 2px; }
.footer-links a:hover { color: var(--paper); border-bottom-color: var(--brand); }
.footer-legal { font-size: var(--t-xs); color: var(--body-on-ink); opacity: 0.75; }

/* ==========================================================================
   Breakpoints
   ========================================================================== */
@media (min-width: 600px) {
  .container { padding-inline: 28px; }
  .problem-quotes { gap: 18px; }
  .price-card ul { grid-template-columns: 1fr 1fr; gap: 12px 26px; }
}

@media (min-width: 768px) {
  .header-actions { gap: 12px; }
  /* inline-grid, nicht inline-flex: der Wert muss zum Sprach-Stapel weiter
     oben passen. Mit inline-flex laegen die beiden Sprachfassungen wieder
     nebeneinander statt uebereinander und der sichtbare Text saesse
     ausserhalb der Mitte. */
  .header-actions .btn-ghost { display: inline-grid; }
  .lang-toggle button { padding: 6px 11px; }
  .logo { font-size: 1.25rem; }
  .logo img { width: 30px; height: 30px; }

  .hero { padding: clamp(40px, 5vw, 64px) 0 var(--section-y); }
  .hero-inner { flex-direction: row; align-items: center; justify-content: space-between; gap: 48px; }
  .hero-text { flex: 1 1 auto; }
  .hero-figure { flex: 0 0 auto; }

  .step-list { grid-template-columns: repeat(3, 1fr); gap: 32px; }
  .step { flex-direction: column; gap: 14px; }

  .feature-grid { grid-template-columns: 1fr 1fr; column-gap: 44px; }

  .tour-item { flex-direction: row; align-items: center; gap: 52px; }
  .tour-item:nth-child(even) { flex-direction: row-reverse; }
  .tour-item .phone-mockup { width: 300px; align-self: auto; }
  .tour-text { flex: 1 1 auto; }

  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
}

@media (min-width: 900px) {
  /* Erst hier, wo die Navigation tatsaechlich erscheint, bekommen die
     Aussenspalten gleiche Basis -- so sitzt die Nav wirklich mittig. Weiter
     unten wuerde dieselbe Regel die Buttons einquetschen und ihre
     Beschriftung umbrechen lassen. */
  .site-nav { display: flex; }
  .logo { flex: 1 1 0; }
  .header-actions { flex: 1 1 0; }
}

@media (min-width: 1024px) {
  .feature-grid { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
  .phone-mockup { width: 320px; }
  .tour-item .phone-mockup { width: 340px; }
  .tour-item { gap: 72px; }
}

/* ==========================================================================
   Bewegung

   WICHTIG: Der unsichtbare Startzustand haengt an der Klasse .js, die das
   Skript selbst auf <html> setzt. Laeuft kein JavaScript, wird nie etwas auf
   opacity: 0 gesetzt und die Seite ist vollstaendig lesbar. Die alte Fassung
   hatte opacity: 0 fest im CSS und war ohne Skript zur Haelfte unsichtbar.
   Alles hier ist zusaetzlich unter prefers-reduced-motion abgeschaltet.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  /* Der Hero baut sich beim Laden auf: Zeile fuer Zeile, dann der Satz und
     der Termin, der daraus wird. Reine CSS-Animationen -- sie laufen auch,
     wenn das Skript nicht kommt. */
  .hero-text h1, .hero-sub, .hero-figure, .hero-cta {
    opacity: 0;
    animation: heroIn 0.6s cubic-bezier(0.22, 0.8, 0.3, 1) both;
  }
  .hero-text h1 { animation-delay: 0.05s; }
  .hero-sub { animation-delay: 0.14s; }
  .hero-figure { animation-delay: 0.22s; }
  .hero-cta { animation-delay: 1.15s; }

  /* Der inszenierte Moment im Hero: Satz, dann der fertige Termin. */
  .ai-line, .ai-arrow, .ai-card { opacity: 0; animation: demoIn 0.45s ease both; }
  .ai-line { animation-delay: 0.35s; }
  .ai-arrow { animation-delay: 0.78s; }
  .ai-card { animation-delay: 0.98s; }
  .ai-caret { animation: caretBlink 1s steps(2, start) 5; }

  /* Buttons heben beim Zeigen leicht ab und geben beim Klick nach. */
  .btn { transition: background-color 0.18s ease, border-color 0.18s ease,
                     color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease; }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -6px rgba(216, 27, 96, 0.5); }
  .btn-ghost:hover { transform: translateY(-2px); }
  .btn:active { transform: translateY(0) scale(0.97); box-shadow: none; }

  /* Die Funktionszeile ruckt beim Zeigen leicht ein, das Symbol geht mit. */
  .feature-card { transition: background-color 0.25s ease, border-color 0.25s ease,
                              padding-left 0.25s ease; }
  .feature-card:hover { padding-left: 12px; }
  .feature-card:hover .feature-icon { transform: translateX(2px) scale(1.08); }

  /* Die Antwort faltet sich beim Oeffnen auf, statt zu erscheinen. */
  .faq-list details[open] p { animation: answerIn 0.32s ease both; }
  .faq-list summary:hover::after { transform: rotate(45deg) translate(2px, 2px); }
  .faq-list details[open] summary:hover::after { transform: rotate(-135deg) translate(2px, 2px); }

  /* Sektionen blenden beim Hereinscrollen auf. Die Klasse .js setzt das
     Skript im Head, also vor dem ersten Bild -- so flackert nichts. */
  /* Die Sektion blendet nur auf, sie verschiebt sich NICHT. Ein transform auf
     dem Sprungziel verschiebt auch dessen gemessene Position: der Browser
     scrollt zur Stelle, an der die Sektion gerade verschoben steht, danach
     rutscht sie um denselben Betrag weg und die Ueberschrift landet hinter
     der Kopfzeile. Die Bewegung machen deshalb die Kinder. */
  .js .problem, .js .steps, .js .features,
  .js .tour-item, .js .pricing, .js .faq {
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  .js .problem.is-visible, .js .steps.is-visible, .js .features.is-visible,
  .js .tour-item.is-visible, .js .pricing.is-visible, .js .faq.is-visible {
    opacity: 1;
  }
  /* Ueberschrift und Beta-Karte tragen die Bewegung ihrer Sektion. */
  .js .section-head, .js .problem h2, .js .problem-answer, .js .price-card {
    transform: translateY(18px);
    transition: transform 0.55s ease;
  }
  .js .is-visible .section-head, .js .is-visible h2, .js .is-visible .problem-answer,
  .js .is-visible .price-card {
    transform: translateY(0);
  }

  /* Die Elemente innerhalb einer Sektion kommen versetzt nach, damit sich der
     Abschnitt aufbaut statt als Block zu erscheinen. Sie brauchen keinen
     eigenen Beobachter -- sie haengen an der Sichtbarkeit ihrer Sektion. */
  .js .quote,
  .js .step,
  .js .feature-card,
  .js .faq-list details {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.5s ease, transform 0.5s ease;
  }
  .js .is-visible .quote,
  .js .is-visible .step,
  .js .is-visible .feature-card,
  .js .is-visible .faq-list details {
    opacity: 1;
    transform: translateY(0);
  }
  .js .is-visible .quote:nth-child(1) { transition-delay: 0.08s; }
  .js .is-visible .quote:nth-child(2) { transition-delay: 0.18s; }
  .js .is-visible .quote:nth-child(3) { transition-delay: 0.28s; }
  .js .is-visible .step:nth-child(1) { transition-delay: 0.08s; }
  .js .is-visible .step:nth-child(2) { transition-delay: 0.18s; }
  .js .is-visible .step:nth-child(3) { transition-delay: 0.28s; }
  .js .is-visible .feature-card:nth-child(1) { transition-delay: 0.06s; }
  .js .is-visible .feature-card:nth-child(2) { transition-delay: 0.12s; }
  .js .is-visible .feature-card:nth-child(3) { transition-delay: 0.18s; }
  .js .is-visible .feature-card:nth-child(4) { transition-delay: 0.24s; }
  .js .is-visible .feature-card:nth-child(5) { transition-delay: 0.30s; }
  .js .is-visible .feature-card:nth-child(6) { transition-delay: 0.36s; }
  .js .is-visible .faq-list details:nth-child(1) { transition-delay: 0.06s; }
  .js .is-visible .faq-list details:nth-child(2) { transition-delay: 0.13s; }
  .js .is-visible .faq-list details:nth-child(3) { transition-delay: 0.20s; }
  .js .is-visible .faq-list details:nth-child(4) { transition-delay: 0.27s; }
  .js .is-visible .faq-list details:nth-child(5) { transition-delay: 0.34s; }

  /* Im Showcase kommen Bild und Text der jeweiligen Station nacheinander. */
  .js .tour-item .phone-mockup,
  .js .tour-item .tour-text {
    opacity: 0;
    transition: opacity 0.55s ease, transform 0.55s ease;
  }
  /* Kein transform auf dem Mockup: floatY animiert dieselbe Eigenschaft und
     wuerde jeden Startwert sofort ueberschreiben. Also nur einblenden. */
  .js .tour-item .tour-text { transform: translateY(18px); }
  .js .tour-item.is-visible .phone-mockup { opacity: 1; }
  .js .tour-item.is-visible .tour-text { opacity: 1; transform: translateY(0); transition-delay: 0.12s; }

  /* Die Mockups schweben leicht -- versetzt, damit sie nicht im Gleichschritt
     laufen. Erst nach dem Einblenden, sonst kaempfen die Transforms. */
  .phone-mockup { animation: floatY 6s ease-in-out infinite; }
  .tour-item:nth-child(2) .phone-mockup { animation-delay: 0.5s; }
  .tour-item:nth-child(3) .phone-mockup { animation-delay: 1s; }
  .tour-item:nth-child(4) .phone-mockup { animation-delay: 1.5s; }
  .js .tour-item .phone-mockup { animation-play-state: paused; }
  .js .tour-item.is-visible .phone-mockup { animation-play-state: running; }

  /* Die Funktionszeilen heben sich nicht -- sie ruecken ein (weiter unten).
     Beides zusammen waere zu viel fuer eine Zeile in einer Liste. */
  .step, .price-card { transition: transform 0.25s ease, box-shadow 0.25s ease; }
  .step:hover { transform: translateY(-3px); }
  .price-card:hover { transform: translateY(-4px); box-shadow: 12px 12px 0 var(--brand-wash); }
  .quote { transition: transform 0.25s ease; }
  .quote:hover { transform: translateY(-3px) rotate(-0.6deg); }
  .tour-item .phone-mockup { transition: box-shadow 0.3s ease; }
  .tour-item .phone-mockup:hover { box-shadow: 0 36px 70px -18px rgba(0, 0, 0, 0.8); }
}

/* ===== Feinheiten beim Zeigen und Klicken ===============================
   Farbwechsel stehen bewusst ausserhalb der Bewegungs-Abfrage: sie sind
   keine Bewegung und duerfen auch bei reduzierter Animation stattfinden. */
.logo img, .footer-brand img { transition: transform 0.25s ease; }
.logo:hover img { transform: rotate(-6deg) scale(1.06); }
.lang-toggle button { transition: background-color 0.18s ease, color 0.18s ease; }
.lang-toggle button:hover[aria-pressed="false"] { background: var(--brand-wash); color: var(--ink); }

.feature-card { transition: background-color 0.25s ease, border-color 0.25s ease; }
.feature-card:hover { border-top-color: var(--brand); }
.feature-card h3, .feature-icon { transition: color 0.2s ease, transform 0.25s ease; }
.feature-card:hover h3 { color: var(--brand); }

.step-num { transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease; }
.step:hover .step-num { background: var(--brand); border-color: var(--brand); color: #fff; }

.faq-list summary { transition: color 0.2s ease; }
.faq-list summary:hover { color: var(--brand); }
.faq-list summary::after { transition: transform 0.25s ease, border-color 0.2s ease; }

.tour-points li::before, .price-card li::before { transition: transform 0.25s ease; }
.tour-item:hover .tour-points li::before,
.price-card:hover li::before { transform: scale(1.5); }

.footer-links a { transition: color 0.2s ease, border-color 0.2s ease; }
.footer-brand:hover img { transform: rotate(-6deg) scale(1.06); }

.ai-card, .ai-line { transition: border-color 0.25s ease, box-shadow 0.25s ease; }
.ai-demo:hover .ai-card { box-shadow: 9px 9px 0 var(--brand-wash); }
.chip { transition: transform 0.2s ease; }
.ai-card:hover .chip { transform: translateY(-3px); }
.ai-card:hover .chip:nth-child(2) { transition-delay: 0.04s; }
.ai-card:hover .chip:nth-child(3) { transition-delay: 0.08s; }
.ai-card:hover .chip:nth-child(4) { transition-delay: 0.12s; }

@keyframes demoIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes answerIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes caretBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media print {
  .site-header, .ai-demo { display: none; }
  body { background: #fff; }
}