/*
 * kooby.at, Einseiter. Schriften wie in der kooby-Verwaltung: Clash Display
 * Semibold fuer Ueberschriften (lizenzierte Schrift, liegt nur lokal,
 * s. DESIGN.md des Produkts), Figtree fuer alles andere.
 *
 * Seite und Kopfzeile sind weiss; die grossen blauen Flaechen (Buehne,
 * Video, Schluss) stehen als gerundete Tafeln mit Abstand zum Rand im
 * Inhaltshof — Anmutung wie die world4you-Produktseiten.
 *
 * Ein Knopf je Bildschirm, ohne Schatten. Tuerkis bleibt die Demo-Farbe.
 * Schriften liegen lokal (schriften/), keine Anfrage verlaesst die Seite.
 */

@font-face {
  font-family: 'Clash Display';
  src: url('schriften/ClashDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: 'Figtree';
  src: url('schriften/figtree.woff2') format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

:root {
  --accent: #2563eb;
  /* Tafel-Verlauf: Werte aus dem kooby-Logoscreen (kooby-promo/
     kooby-logoscreen.pdf) — oben kraeftig, unten dunkel. */
  --tafel-hell: #3660df;
  --tafel-dunkel: #28469d;
  --accent-dark: #1d4ed8;
  --accent-deep: #16307a;
  --header: #1c3f8f;
  --highlight: #00ffe1;
  --highlight-text: #0a0a0a;
  --bg-soft: #f4f4f4;
  --surface: #ffffff;
  --line: #e3e3e3;
  --text: #1a1a1a;
  --text-dim: #6e6e6e;
  --on-dark-dim: rgba(255, 255, 255, .72);
  --ok: #15803d;
  --radius-card: 14px;
  --radius-tafel: 26px;
  /* Luft ueber dem Logo — und darunter bis zur Buehne genauso viel.
     Knapp bemessen, damit der Startschirm auch unter einer dicken
     Browserleiste (Lesezeichen etc.) vollstaendig ins Bild passt. */
  --kopf-luft: 22px;
  --logo-hoehe: 26px;
  /* Hoehe der Kopfzeilen-Reihe = ihr hoechstes Element. Das ist das
     Mail-Icon, nicht das Logo — die Startschirm-Rechnung braucht den
     echten Wert, sonst fehlen genau diese Pixel unten. */
  --kopf-zeile: 38px;
  /* Seitliches Innenpolster der Buehne (nur der Wert, nicht die 30px
     Kartenabstand zum Fensterrand) — dieselbe Zahl bekommt die Kopfzeile,
     damit Logo/Icon buendig mit dem Buehnentext stehen. */
  --buehne-polster: clamp(1.75rem, 5vw, 5rem);
  /* Abstand der Buehnen-Tafel zum Fensterrand — eigene Variable, damit die
     Kopfzeile auf demselben Wert mitgeht (auch wenn er mobil kleiner wird). */
  --rahmen-rand: 30px;
  /* Obergrenze fuer den ersten Schirm (Buehne + die vier Punkte). Der Wert
     entspricht der Hoehe, die ein 1440x900-Laptop ohnehin ergibt — dort
     aendert der Deckel also nichts, er greift erst auf hoeheren Monitoren.
     s. .startschirm in der 901px-Abfrage. */
  --startschirm-hoch: 840px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* overflow-x auf html UND body: Safari/iPadOS scrollen ueber das
   html-Element, nur body reicht dort nicht. */
html { scroll-behavior: smooth; overflow-x: hidden; }

body {
  overflow-x: hidden;
  font-family: 'Figtree', system-ui, sans-serif;
  font-weight: 500;
  color: var(--text);
  background: var(--surface);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Clash Display', 'Figtree', system-ui, sans-serif;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.1;
  color: var(--accent-deep);
}

/* height:auto als Grundsatz: img-Tags mit width/height-HTML-Attributen
   (Breite/Hoehe fuers Layout-Verhalten vor dem Laden) wuerden sonst bei
   einer reinen CSS-width-Vorgabe die literale Attribut-Hoehe behalten,
   statt proportional zu schrumpfen. Einzelne Regeln (z. B. Video-Tafel)
   ueberschreiben das gezielt und stehen ohnehin spezifischer. */
img, svg, video { max-width: 100%; height: auto; display: block; }

.hof { width: min(1160px, 100% - 3rem); margin-inline: auto; }

/* ── Kopfzeile: weiss, nur die Wortmarke ─────────────────────────────── */

.kopf {
  background: var(--surface);
  position: sticky; top: 0; z-index: 20;
}
/* Kein Abstand nach unten: Den setzt die Buehne mit derselben Luft, damit
   das Logo oben und unten gleich viel Raum hat. */
.kopf-innen {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--kopf-luft) calc(var(--rahmen-rand) + var(--buehne-polster)) 0;
}
.kopf-logo img { height: var(--logo-hoehe); width: auto; }
/* Dezenter Kontaktpunkt oben rechts — kein zweiter Knopf (Regel: einer je
   Bildschirm bleibt bei "Demo auf Anfrage"), nur ein ruhiges Icon, das die
   Ecke nicht mehr leer laesst. */
.kopf-mail {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  color: var(--accent); background: var(--bg-soft);
  transition: background .18s var(--ease), color .18s var(--ease);
}
.kopf-mail svg { width: 17px; height: 17px; }
.kopf-mail:hover { background: var(--accent); color: #fff; }

/* ── Knoepfe: flach, ohne Schatten ───────────────────────────────────── */

.knopf {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: 'Figtree', sans-serif; font-weight: 700; font-size: 16px;
  padding: .9rem 1.8rem; border-radius: 999px; text-decoration: none;
  transition: background .18s var(--ease);
}
.knopf svg { width: 17px; height: 17px; flex-shrink: 0; }
.knopf-demo { background: var(--highlight); color: var(--highlight-text); }
.knopf-demo:hover { background: #00e0c9; }

/* Slot-Rollover, derselbe Effekt wie im Buchungssystem (partials/
   public-footer.php + public-head.php dort): Beim Ueberfahren rollt die
   Beschriftung nach oben aus dem Knopf, ein Klon rollt von unten nach.
   Das Polster wandert dafuer vom Knopf in den Span — nur dann entspricht
   translateY(100%) exakt einer Knopfhoehe. */
.knopf.btn-slot { padding: 0; position: relative; overflow: hidden; }
.knopf.btn-slot .btn-text {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: .9rem 1.8rem;
  transition: transform .24s var(--ease);
}
.knopf.btn-slot .btn-text--clone { position: absolute; inset: 0; transform: translateY(100%); }
.knopf.btn-slot:hover .btn-text { transform: translateY(-100%); }
.knopf.btn-slot:hover .btn-text--clone { transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .knopf.btn-slot .btn-text, .knopf.btn-slot .btn-text--clone { transition: none; }
}

/* ── Buehne: volle Breite, 30px Luft zum Fensterrand ─────────────────── */

/* Kompakt genug, dass am Laptop (ca. 800px Hoehe) auch der Streifen unter
   der Tafel noch ohne Scrollen im Bild ist — er ist Teil des ersten
   Eindrucks, nicht der zweite Gedanke. */
.buehne-rahmen { padding: var(--kopf-luft) var(--rahmen-rand) 0; }

/* Erster Bildschirm = Buehne plus die vier Punkte, gemeinsam bildschirmhoch.
   svh statt vh: Am Handy zaehlt vh die eingefahrene Browserleiste mit und
   schoebe die Punkte aus dem Bild. min-height, nicht height — auf sehr
   flachen Fenstern waechst der Block, statt den Inhalt zu quetschen.
   Nur ab Laptop-Breite: Am Handy ist die Buehne von Natur aus hoeher als
   ein Bildschirm, Strecken braeuchte dort niemand. */
@media (min-width: 901px) {
  .startschirm {
    /* Gedeckelt, nicht einfach bildschirmhoch. Auf einem Laptop (1440x900)
       ergibt die Rechnung 840px, und dort passt es: Buehne und die vier Punkte
       fuellen den Schirm, darunter beginnt der naechste Abschnitt.
       Auf einem grossen Monitor waechst dieselbe Rechnung auf 1020px (1920er)
       oder rund 1380px (1440er Hoehe) — und der Zuwachs ist reiner Leerraum
       IN der Buehne, gemessen 337px bei 1920x1080. Der Besucher sieht dann
       eine halbleere Tafel und nichts von dem, was folgt.
       min() nimmt den kleineren der beiden Werte: Bis 900px Fensterhoehe
       aendert sich nichts, darueber steht der Deckel. */
    min-height: min(
      calc(100svh - var(--kopf-luft) - var(--kopf-zeile)),
      var(--startschirm-hoch)
    );
    display: flex; flex-direction: column;
  }
  .startschirm .buehne-rahmen { flex: 1; display: flex; }
  .startschirm .buehne { flex: 1; display: flex; align-items: center; }
  .startschirm .buehne-innen { width: 100%; }
}
.buehne {
  background: linear-gradient(200deg, var(--tafel-hell) 0%, var(--tafel-dunkel) 100%);
  color: #fff; border-radius: var(--radius-tafel);
  padding: clamp(2rem, 3.5vw, 3rem) var(--buehne-polster);
}
/* Kein eigener Zentrier-Anschlag mehr: Die Buehne ist bereits durch
   30px (Rahmen) + --buehne-polster eingerueckt, exakt wie die Kopfzeile.
   Ein zusaetzlicher 1160px-Anschlag mit eigener Zentrierung wuerde bei
   breiten Fenstern einen ZWEITEN, groesseren Einzug erzeugen und den
   Gleichlauf mit dem Logo wieder aufheben. Grosszuegige Obergrenze nur
   als Notbremse gegen sehr breite Monitore. */
.buehne-innen { max-width: 1600px; margin-inline: auto; }

/* Zwei Spalten ab Laptop: Text links, Kalender rechts. Das Bild ragt
   bewusst ueber die rechte Kante der Tafel hinaus — es soll aus der
   Flaeche herauskommen, nicht brav darin sitzen. Was ueber den
   Fensterrand hinausgeht, schneidet das overflow-x der Seite ab. */
@media (min-width: 901px) {
  .buehne-innen {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .95fr);
    align-items: center; gap: 2rem;
  }
  .buehne-bild {
    position: relative; margin-top: 0;
    /* Eine Spur ueber das Innenpolster der Tafel hinaus, aber zurueckhaltend:
       zu viel Ueberstand liess dem Bild kaum noch Luft zum Fensterrand. */
    margin-right: clamp(-3.5rem, -2.5vw, -1.5rem);
  }
  .buehne-bild img {
    width: 94%; max-width: none; height: auto;
    filter: drop-shadow(0 30px 60px rgba(8, 22, 60, .42));
    /* --parallax setzt includes.js beim Scrollen — laesst das Mockup
       gegenueber der Tafel leicht schweben. */
    transform: translateY(var(--parallax, 0px));
    will-change: transform;
  }
}
/* Schmalere Fenster: Bild unter den Text, ohne Ueberstand. */
.buehne-bild { margin-top: 2.5rem; }
.buehne-bild img { width: 100%; height: auto; filter: drop-shadow(0 18px 36px rgba(8, 22, 60, .3)); }
/* Bemessen fuer EINE Zeile in der linken Spalte — zweizeilig braeuchte der
   Startschirm mehr Hoehe, als er hat. */
.buehne h1 { font-size: clamp(2.3rem, 3.4vw, 3.3rem); color: #fff; }
.buehne h1 .zeile-hell { color: var(--highlight); }
.buehne-satz {
  margin-top: 1.3rem; max-width: 56ch;
  font-size: clamp(1.1rem, 1.7vw, 1.28rem); font-weight: 500;
  color: var(--on-dark-dim); line-height: 1.65;
}
.buehne-satz strong { color: #fff; font-weight: 600; }

.haken-liste {
  list-style: none;
  margin: 1.6rem 0 1.9rem; display: grid; gap: .7rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 720px;
}
.haken-liste li {
  display: flex; align-items: center; gap: .7rem;
  font-size: 16.5px; font-weight: 600;
}
.haken-liste svg { width: 22px; height: 22px; flex-shrink: 0; color: var(--highlight); }

/* ── Leistungsstreifen ───────────────────────────────────────────────── */

.streifen-innen {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.2rem; padding: 1.35rem 0 .25rem;
}
.streifen-punkt {
  display: flex; align-items: center; justify-content: center; gap: .7rem;
  font-size: 17.5px; font-weight: 700; color: var(--text);
  text-align: center;
}
.streifen-punkt svg { width: 26px; height: 26px; flex-shrink: 0; color: var(--accent); }

/* ── Abschnitte ──────────────────────────────────────────────────────── */

.abschnitt { padding: clamp(3.5rem, 7vw, 6rem) 0; }
.abschnitt-kopf { max-width: 680px; margin: 0 auto 3rem; text-align: center; }
.abschnitt-kopf h2 { font-size: clamp(1.9rem, 3.6vw, 2.8rem); }
/* Pille statt schlichtem grauem Untertitel. Voll Tuerkis statt Outline: Blau
   plus tuerkise Outline tragen schon die drei Leistungskarten, hier soll es
   ein eigener Akzent bleiben statt derselben Kombination ein drittes Mal. */
.abschnitt-kopf p {
  display: inline-block; margin-top: 1.1rem;
  padding: .5rem 1.3rem; border-radius: 999px;
  background: var(--highlight); color: var(--highlight-text);
  font-weight: 600; font-size: .98rem;
}

/* ── Video-Tafel ─────────────────────────────────────────────────────── */

.video-rahmen {
  position: relative; aspect-ratio: 16 / 9;
  background: linear-gradient(200deg, var(--tafel-hell) 0%, var(--tafel-dunkel) 100%);
  border-radius: var(--radius-tafel);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1.8rem;
}
.video-rahmen video { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: var(--radius-tafel); object-fit: cover; }

/* ── Karten: flach, ohne Rand, ohne Rollover-Effekt ──────────────────── */

.karten {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.4rem;
}
.karte {
  background: var(--surface); border-radius: var(--radius-card);
  padding: 2.4rem 2.2rem 2.6rem;
  border: 5px solid var(--highlight);
}
.karte-zeichen { color: var(--accent); margin-bottom: 1.5rem; }
.karte-zeichen svg { width: 54px; height: 54px; }
/* Im Markenblau statt im dunklen Blau der uebrigen Ueberschriften — dieselbe
   Entscheidung wie bei .aussage-klein. Die drei Kartentitel sind keine
   Abschnittsueberschriften, sondern die Namen der drei Dinge, die kooby
   erledigt; das Markenblau setzt sie vom fast schwarzen Fliesstext ab und
   nimmt die Farbe der Pfeile in den Karten auf. */
.karte h3 { font-size: 1.42rem; margin-bottom: .7rem; color: var(--accent); }
.karte p { color: var(--text-dim); font-size: 15.5px; }
.karte p strong { color: var(--text); font-weight: 600; }

/* Häkchenliste in den Karten. Eigene Regeln statt .haken-liste aus dem Hero:
   Dort stehen die Häkchen türkis auf dunklem Blau, hier stünden sie auf Weiß
   und wären kaum zu sehen. Deshalb im Akzentblau — und einspaltig, weil eine
   Karte nur ein Drittel der Breite hat. */
.karte-haken {
  list-style: none; margin: 1.1rem 0 0; padding: 0;
  display: grid; gap: .55rem;
}
.karte-haken li {
  display: flex; align-items: flex-start; gap: .6rem;
  font-size: 15.5px; font-weight: 600; color: var(--text);
  line-height: 1.4;
}
/* Blauer Pfeil in einer tuerkisen Scheibe. (Die Klasse heisst noch
   .karte-haken — der Name stammt aus der Zeit, als dort ein Haken sass. Ein
   Umbenennen quer durch Markup und Stylesheet waere mehr Bewegung als Nutzen.)

   Dieselbe Farbverteilung wie beim Demo-Knopf auf der Buehne: Tuerkis traegt
   die Flaeche, das Dunklere schreibt darauf. Umgekehrt wirkte die Marke
   schwerer, weil die dunkle Flaeche mehr Gewicht hat als der duenne Strich
   darin.

   Der Pfeil ist breiter als hoch, anders als der Haken vorher — deshalb
   seitlich weniger Polster, sonst stiesse er innen an.
   box-sizing: border-box gilt global (s. ganz oben), das Polster liegt also
   INNEN und die Scheibe bleibt bei ihren 22px. */
.karte-haken svg {
  width: 22px; height: 22px; flex-shrink: 0;
  background: var(--highlight); color: var(--accent);
  border-radius: 50%; padding: 4px 3.5px;
  margin-top: 1px;
}

/* Häkchen aller drei Karten auf gleicher Höhe — unabhängig von der Breite.
   Die Texte sind zwar gleich lang gehalten, das allein genügt aber nicht:
   Wo eine Zeile umbricht, entscheidet die Kartenbreite, und die Reihenfolge
   dreht sich. Gemessen war bei 910px die dritte Karte eine Zeile höher, bei
   1150px die erste — mit exakt denselben Texten.

   subgrid löst das an der Wurzel: Die Karte übernimmt die Zeilen des
   Elternrasters, statt eigene aufzumachen. Damit teilen sich Symbol,
   Überschrift, Absatz und Liste je eine gemeinsame Zeile über alle drei
   Karten hinweg, und die höchste bestimmt die Höhe.

   Nur ab 901px: Darunter steht ohnehin eine Karte je Zeile (s. Media-Query
   weiter unten), dort gibt es nichts auszurichten. Und nur mit @supports,
   damit ältere Browser bei der bisherigen Darstellung bleiben statt in einem
   halb angewandten Raster zu landen. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 901px) {
    .karten { grid-template-rows: repeat(4, auto); }
    .karte {
      display: grid; grid-row: span 4; grid-template-rows: subgrid;
      row-gap: 0;
    }
  }
}

/* ── Aussage ─────────────────────────────────────────────────────────── */

/* Vollflaechig Tuerkis — die Markenfarbe einmal gross.
   Schrift dunkel, nie weiss auf Tuerkis (s. theme.ts des Videos).
   Drei Stufen statt einer Groesse: der Vorsatz klein und in Figtree, die
   Aussage gross in Clash Display, die Pointe in Blau darunter. */
.aussage { position: relative; background: var(--highlight); margin-block: clamp(2.5rem, 5vw, 4rem); overflow: hidden; }
.aussage-innen { position: relative; padding: clamp(3.5rem, 6vw, 5rem) 0; text-align: center; }

.aussage p { color: var(--highlight-text); }
/* text-wrap: balance verteilt den Text gleichmaessig auf die Zeilen, statt
   die letzte mit einem Rest zu fuellen. Ohne das blieb hier je nach Breite
   ein einzelnes Wort allein stehen — bei „…im Jahr, und“ war es das „und“,
   und ein Bindewort allein in einer Zeile liest sich wie ein Fehler.
   Browser ohne Unterstuetzung ignorieren die Zeile und brechen wie bisher. */
.aussage-klein { display: block; max-width: 30ch; margin: 0 auto .6rem; text-wrap: balance; }
.aussage-gross { display: block; max-width: 20ch; margin-inline: auto; text-wrap: balance; }
/* Erste Zeile in Clash Display statt als kleine graue Eyebrow-Zeile — sie
   traegt die Aussage mit, seit die Pointe darunter ("Jede weitere gehoert
   dir.") weg ist.

   Im Markenblau statt im dunklen Blau: Sie hebt sich damit staerker vom
   fast schwarzen Satz darunter ab, und die Farbe ist auf dem Tuerkis der
   einzige Markenbezug, seit die grosse Ziffer entfallen ist. Lesbar bleibt
   sie: 4,03 zu 1 gegen das Band, und bei 21 bis 30px in Halbfett gilt die
   Schwelle fuer grosse Schrift (3 zu 1), nicht die fuer Fliesstext. */
.aussage-klein {
  font-family: 'Clash Display', 'Figtree', sans-serif;
  font-weight: 600; letter-spacing: -0.01em; line-height: 1.15;
  color: var(--accent);
  font-size: clamp(1.3rem, 2.6vw, 1.9rem);
}
.aussage-gross {
  font-family: 'Clash Display', 'Figtree', sans-serif;
  font-weight: 600; letter-spacing: -0.015em; line-height: 1.1;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
}

/* ── Fragen: einzelne Karten statt Linienliste ───────────────────────── */

/* Volle Inhaltsbreite wie Karten und Video — keine Sonderbreite. */
.fragen { display: grid; gap: .85rem; }
.frage {
  background: var(--surface); border: 5px solid var(--highlight);
  border-radius: 16px;
  transition: background .25s var(--ease);
}
/* Ohne Sprung, dafuer vollflaechig Tuerkis: Die Karte fuellt sich beim
   Ueberfahren komplett, statt sich nur leicht anzuheben. */
.frage:not(.is-offen):hover { background: var(--highlight); }
.frage:not(.is-offen):hover .frage-kopf { color: var(--highlight-text); }
.frage:not(.is-offen):hover .frage-zeichen { background: var(--accent-deep); color: #fff; }
/* Offen: kraeftig blau, damit klar ist, welche Antwort gerade dasteht. Die
   tuerkise Outline bleibt auch dann sichtbar, statt zu verschwinden. */
.frage.is-offen { background: var(--accent-deep); }

/* Echte <button>-Ausloeser: reagieren am iPhone auf den ersten Tipp,
   anders als klickbare <div>s (s. markus-website-struktur). */
.frage-kopf {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  gap: 1.2rem; padding: 1.5rem 1.6rem;
  background: none; border: none; cursor: pointer; text-align: left;
  font-family: 'Clash Display', 'Figtree', sans-serif;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.25;
  color: var(--accent-deep);
  transition: color .25s var(--ease);
}
.frage.is-offen .frage-kopf { color: #fff; }

/* Pfeil in eigenem Kreis; beim Oeffnen dreht er sich in die Senkrechte und
   springt auf Tuerkis. */
.frage-zeichen {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--accent);
  transition: background .25s var(--ease), color .25s var(--ease), transform .35s var(--ease);
}
.frage-zeichen svg { width: 20px; height: 20px; }
.frage.is-offen .frage-zeichen {
  background: var(--highlight); color: var(--highlight-text);
  transform: rotate(135deg);
}

/* Aufklappen ueber 0fr/1fr statt max-height: laeuft auf die tatsaechliche
   Inhaltshoehe, damit lange Antworten nicht an einem festen Deckel abreissen. */
.frage-inhalt {
  display: grid; grid-template-rows: 0fr; overflow: hidden; opacity: 0;
  transition: grid-template-rows .42s cubic-bezier(.32, .72, 0, 1), opacity .3s ease;
}
.frage-inhalt > * { min-height: 0; }
.frage.is-offen .frage-inhalt { grid-template-rows: 1fr; opacity: 1; }
.frage-inhalt p {
  padding: 0 1.6rem; max-width: 74ch;
  color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.7;
}
/* Das untere Padding stauchen 0fr-Zeilen nicht mit: es bliebe als Sockel
   unter jeder geschlossenen Karte stehen und schoebe den Titel aus der Mitte.
   Darum erst im offenen Zustand setzen. */
.frage.is-offen .frage-inhalt p { padding-bottom: 1.6rem; }
.frage-inhalt strong { color: #fff; font-weight: 600; }

/* ── Schluss: offen, wie eine grosse Fusszeilen-Einheit ───────────────── */

/* Keine Tafel mehr: Logo links, Text und Knopf rechts daneben — dieselbe
   Anmutung wie ein grosszuegiger Fusszeilen-Block, der direkt in die echte
   Fusszeile darunter uebergeht. */
/* Oben knapper: Der Fragen-Abschnitt bringt schon sein eigenes Polster mit,
   zusammen klaffte dazwischen eine zu grosse Luecke. */
.abschluss { padding: clamp(1rem, 2vw, 1.75rem) 0 clamp(2.5rem, 5vw, 4.5rem); }
/* Als kompakte Reihe in der Mitte, nicht ausgestreckt ueber die volle
   Breite: Logo und Text bilden zusammen einen Block, horizontal UND
   vertikal zentriert zueinander. */
.abschluss-innen {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(1.75rem, 4vw, 3rem);
}
/* Deutlich kleiner als vorher — das Logo soll die Reihe begleiten, nicht
   sie anfuehren. */
/* height:auto ist Pflicht: Das img traegt width/height=600/210 als HTML-
   Attribute, und ohne eigene CSS-Hoehe gewinnt dieser literale Wert (210px)
   gegen die width-Vorgabe hier — das Logo stand unsichtbar riesig da und
   nur zentriert, was wie zu viel Weissraum ober-/unterhalb aussah. */
.abschluss-logo { width: clamp(150px, 12vw, 190px); height: auto; flex-shrink: 0; }
.abschluss-text { flex: 0 1 480px; }
.abschluss-text p {
  max-width: 48ch; margin-bottom: 1.6rem;
  color: var(--text-dim); font-size: 1.1rem;
}
.abschluss-text p strong { color: var(--text); font-weight: 600; }
@media (max-width: 700px) {
  .abschluss-innen { flex-direction: column; text-align: center; }
  /* flex-basis zuruecksetzen: Die 480px aus der Desktop-Regel sind eine
     BREITEN-Basis — gestapelt wuerde daraus eine Hoehen-Vorgabe, und der
     Block reservierte 480px Leere fuer fuenf Zeilen Text. */
  .abschluss-text { flex-basis: auto; }
  .abschluss-text p { margin-inline: auto; }
}

/* ── Fusszeile ───────────────────────────────────────────────────────── */

.fuss { color: var(--text-dim); font-size: 14px; }
.fuss-innen {
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  padding: 1.6rem 0; flex-wrap: wrap;
  /* Die Linie sitzt hier, nicht auf .fuss: Sonst zieht sie bis an den
     Fensterrand statt an der Inhaltsbreite (.hof) Halt zu machen. */
  border-top: 1px solid var(--line);
}
.fuss a { color: var(--text); text-decoration: none; font-weight: 600; }
.fuss a:hover { color: var(--accent-dark); }
.fuss-links { display: flex; gap: 1.5rem; }

/* ── Unterseiten (Impressum, Datenschutz) ────────────────────────────── */

.blatt { max-width: 760px; margin-inline: auto; padding: clamp(3rem, 6vw, 5rem) 1.5rem 5rem; }
.blatt h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: 2.2rem; }
.blatt h2 { font-size: 1.3rem; margin: 2.2rem 0 .6rem; }
.blatt p, .blatt li { color: var(--text); font-size: 16px; }
.blatt ul { padding-left: 1.3rem; }
.blatt a { color: var(--accent-dark); }
.blatt .dim { color: var(--text-dim); font-size: 14px; }

/* ── Scroll-Reveal (Klassen setzt includes.js per IntersectionObserver) ── */

.reveal, .reveal-stagger > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
}
.reveal.visible, .reveal-stagger.visible > * { opacity: 1; transform: none; }
.reveal-stagger.visible > *:nth-child(2) { transition-delay: .12s; }
.reveal-stagger.visible > *:nth-child(3) { transition-delay: .24s; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-stagger > * { opacity: 1; transform: none; transition: none; }
  .frage-inhalt { transition: none; }
}

/* ── Schmale Bildschirme ─────────────────────────────────────────────── */

@media (max-width: 900px) {
  .karten { grid-template-columns: 1fr; }
  .streifen-innen { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem; }
  .streifen-punkt { justify-content: flex-start; text-align: left; }
}
@media (max-width: 560px) {
  .haken-liste { grid-template-columns: 1fr; }
  :root { --rahmen-rand: 14px; }
  .buehne-rahmen { padding: var(--kopf-luft) var(--rahmen-rand) 0; }
  .buehne, .schluss, .video-rahmen { border-radius: 18px; }
  .fuss-innen { justify-content: center; text-align: center; }

  /* Die vier Punkte einspaltig: Zweispaltig brachen die laengeren
     Beschriftungen mitten im Wort um.
     Einspaltig gestapelt wirkten sie wie eine blosse Aufzaehlung — eine duenne
     tuerkise Linie dazwischen gibt der Gruppe Rhythmus. Nur ZWISCHEN den
     Punkten, nicht ueber dem ersten und unter dem letzten: sonst waere es ein
     Kasten statt einer Gliederung.
     Nicht das Markentuerkis #00ffe1: Der Streifen steht auf Weiss, dort kaeme
     es auf 1.28 Kontrast — genau so schwach wie die normale Trennlinie und
     damit kein erkennbares Tuerkis. Abgedunkelt sind es 1.8: sichtbar als
     farbige Linie, ohne schwer zu werden. Im Hero war die helle Fassung
     richtig, weil sie dort auf dunklem Blau liegt. */
  .streifen-innen { grid-template-columns: 1fr; gap: 0; }
  .streifen-punkt + .streifen-punkt {
    border-top: 1px solid #00d9c0;
    margin-top: .9rem; padding-top: .9rem;
  }

  /* Untertitel ohne Pillen-Flaeche: Zweizeilig sah die Pille unfoermig
     aus. Am Handy wird sie wieder eine ruhige Textzeile. */
  .abschnitt-kopf p {
    background: transparent; padding: 0;
    color: var(--text-dim); font-weight: 500;
  }

  /* Abschluss kompakt: Gestapelt sammelte sich zu viel Weissraum zwischen
     Logo, Text und Knopf. */
  .abschluss { padding: .5rem 0 2rem; }
  .abschluss-innen { gap: 1.25rem; }
  .abschluss-logo { width: 132px; }
  .abschluss-text p { margin-bottom: 1.25rem; }
}