/* Teaser in Gestaltung F (Entwurf 06.10.2026, fliessend seit 13.10.2026). Laedt nach site.css, refinement.css, e.css und
   f.css und nutzt deren Werte (Farben, Rundung, Schatten, Abstaende). Eigene Teile: Kopf-Satz, Reiter "Am Computer",
   Countdown, Demo, Einblicke-Videos, Fahrplan, Stand, Newsletter im Schluss. Die Abschnitte sind keine Karten, sondern
   wechseln zwischen Seitengrund (weiss) und Salbei-Baendern: Am Computer, Newsletter vorn (Band), Demo, Handy und iPad
   (Band), Einblicke, Fahrplan (Band), Stand, Ueber mich (Band), Newsletter als weisse Karte auf der Schluss-Bahn;
   Pfirsich nur beim Umfrage-Hinweis. Kopf: f-kopf--v2 aus f.css (Text mittig, Bild darunter), ohne Bahn und Streifen. */

/* Kopf-Satz (User 13.10.2026: in drei Zeilen, "in unserem Stil", aber nicht zu viel): etwas groesser als der
   normale Claim, nur die mittlere Zeile kursiv in der Akzentfarbe wie die Wortmarke. */
.f-teaser .f-kopf--v2 .f-claim--teaser{max-width:none;font-size:clamp(1.2rem,1.9vw,1.4rem);line-height:1.5}
.f-teaser .f-claim--teaser em{font-style:italic;color:var(--accent)}

/* "Fiktive Beispieldaten" steht seit 13.10.2026 in den Bilddateien selbst (auch beim Oeffnen oder Weitergeben
   sichtbar); die Handy-Bilder dafuer als Kopien *-fiktiv-*.webp. Kein aufgesetztes Abzeichen mehr. */

/* Newsletter-Knopf im Kopf einladender (User 13.10.2026): groesser, mit Glocke und leichtem Schatten, darunter ein
   Satz, was man bekommt (Wortlaut aus dem Newsletter-Abschnitt). */
.f-teaser .f-nl-knopf{gap:10px;min-height:56px;padding:15px 30px;font-size:1rem;font-weight:600;
  box-shadow:0 10px 24px color-mix(in srgb,var(--accent) 28%,transparent);transition:transform .2s,box-shadow .2s}
.f-teaser .f-nl-knopf:hover{transform:translateY(-2px);box-shadow:0 14px 30px color-mix(in srgb,var(--accent) 34%,transparent)}
.f-teaser .f-nl-knopf svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-teaser .f-kopf--v2 .f-kopf-notiz{max-width:440px;margin-inline:auto;line-height:1.5}

/* Ueber mich: Verweis auf die Seite ueber-mich.html (im Teaser-Modus erreichbar, SEITE_IMMER). */
.f-teaser .f-ich-link{margin-top:14px}
.f-teaser .f-ich-link .text-link{margin-top:0}

/* ---------- Countdown: eingebaut, standardmaessig aus (hidden). Terminal F setzt data-ziel und entfernt hidden. ---------- */
.f-countdown{margin-top:24px;max-width:420px}
.f-countdown[hidden]{display:none}
.f-countdown-titel{font:600 .72rem/1.4 'Outfit',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin:0 0 8px}
.f-countdown-felder{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0;padding:0;list-style:none}
.f-countdown-felder li{background:var(--surface);border:1px solid var(--line);border-radius:var(--f-radius-klein);padding:10px 4px 8px;text-align:center;
  box-shadow:var(--f-schatten)}
.f-countdown-felder b{display:block;font:600 clamp(1.3rem,3vw,1.7rem)/1.1 'Fraunces',Georgia,serif;color:var(--accent);font-variant-numeric:tabular-nums}
.f-countdown-felder span{display:block;font-size:.74rem;color:var(--muted);margin-top:4px}

/* ---------- Gemeinsame Kopfzeile der Abschnitte ---------- */
.f-teaser .f-block h2{margin-bottom:16px}
.f-teaser .f-block p+p{margin-top:12px}

/* ---------- Fliessend statt Kacheln (User 13.10.2026: "kommt nicht dynamisch daher"). Nur im Teaser: die Abschnitte
   sind keine Karten mehr, sondern laufen ueber die volle Breite; Salbei-Abschnitte werden zu Baendern, weisse stehen
   auf dem Seitengrund. Engere Abstaende. Die Kernpunkt-Leiste bleibt als einzige Karte. ---------- */
.f-teaser{--f-abschnitt:52px}
.f-teaser .f-block{background:none;border:0;border-radius:0;box-shadow:none;padding:0}
.f-teaser main>section.f-abstand:has(.f-block--soft){background:var(--soft)}

/* ---------- Abschnittskoepfe mittig (User 13.10.2026, wie die helle Fassung): Oberzeile, Ueberschrift und die kurzen
   Saetze darunter stehen mittig mit schmaler Textbreite. Zweispaltige Abschnitte (Demo, Ueber mich), Bildunterschriften,
   Fahrplan-Schritte, Videotexte und das Newsletter-Formular bleiben linksbuendig. ---------- */
.f-teaser .f-programm-text{max-width:900px;margin-inline:auto;text-align:center}
.f-teaser .f-programm-text>p{max-width:640px;margin-inline:auto}
.f-teaser .f-block:not(.f-zweispaltig):not(.f-ich){text-align:center}
.f-teaser .f-block:not(.f-zweispaltig):not(.f-ich)>p{max-width:640px;margin-inline:auto}
.f-teaser .f-block:not(.f-zweispaltig):not(.f-ich) .actions{justify-content:center}
.f-teaser .f-schritte,.f-teaser .f-video figcaption{text-align:left}
.f-teaser .f-fakten{justify-content:center}

/* ---------- Am Computer: Text mittig, darunter die Reiter wie auf der Startseite F (e-tabs in e.css und f.css, Logik
   e.js; ohne Script stehen alle Bereiche untereinander). ---------- */
.f-programm-text h2{margin-bottom:16px}
.f-programm-text p+p{margin-top:12px}
.f-ansichten{margin-top:30px;text-align:left}
/* Nach den Reitern: die laengere Erklaerung (User 13.10.: erst kurz, dann durchblaettern, dann mehr). */
.f-teaser .f-programm-mehr{margin-top:30px}
/* Funktionen mit passenden Symbolen, gruen hinterlegt = drin (User 13.10.2026); ab der siebten hinter "Alle Funktionen
   zeigen" (teaser.js setzt f-zu; ohne Script alle sichtbar). Darunter immer sichtbar, was nicht mehr noetig ist. */
.f-funktionen{list-style:none;margin:20px auto 0;padding:0;max-width:960px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 12px}
.f-funktionen li{display:inline-flex;align-items:center;gap:9px;padding:9px 16px;border:1px solid color-mix(in srgb,var(--accent) 28%,transparent);
  border-radius:50px;background:color-mix(in srgb,var(--accent) 9%,var(--surface));color:var(--ink);font-weight:600;font-size:.95rem}
.f-funktionen svg{width:19px;height:19px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-funktionen.f-zu .f-extra{display:none}
.f-alle-zeile{margin:14px 0 0;text-align:center}
.f-alle{padding:0;border:0;background:none;color:var(--accent);font:600 .95rem/1.4 'Outfit',sans-serif;cursor:pointer;
  text-decoration:underline;text-underline-offset:3px}
.f-statt{margin:26px auto 0;max-width:960px;text-align:center}
.f-statt-titel{margin:0 0 10px;font:600 .78rem/1.4 'Outfit',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.f-nicht{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 18px}
.f-nicht li{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-weight:600;font-size:.93rem}
.f-nicht svg{width:17px;height:17px;flex-shrink:0;fill:none;stroke:var(--terra);stroke-width:2.4;stroke-linecap:round}
/* In Arbeit: gestrichelt und ruhig, damit es nicht wie eine fertige Funktion wirkt. */
.f-bald{margin:22px auto 0;max-width:960px;text-align:center}
.f-bald-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px 10px}
.f-bald-liste li{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border:1px dashed var(--line);border-radius:50px;
  color:var(--muted);font-weight:600;font-size:.9rem}
.f-bald-liste svg{width:16px;height:16px;flex-shrink:0;fill:none;stroke:var(--muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.f-tab-kurz,.f-mehr{display:none}
/* ---------- Dezente Bewegung beim Scrollen: teaser.js setzt f-bewegt nur ohne prefers-reduced-motion und
   prueft die Lage beim Scrollen; ohne Script oder mit reduzierter Bewegung steht alles sofort da. ---------- */
.f-bewegt .f-auf{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease}
.f-bewegt .f-auf.f-da{opacity:1;transform:none}

/* ---------- Demo-Karte ---------- */
.f-demo-bild{margin:0}
.f-demo-bild a{position:relative;display:block;border:1px solid var(--line);border-radius:var(--f-radius-klein);overflow:hidden;cursor:zoom-in}
.f-demo-bild img{display:block;width:100%;height:auto}
.f-teaser .e-demo-cta{margin-top:24px}
.f-demo-notiz{font-size:.78rem;color:var(--muted);margin-top:14px}
.f-teaser .e-demo-cta .text-link{margin-top:0}
/* Die Demo laeuft erst ueber 1000 px (wie B); darunter Hinweis statt Knopf und Tab-Link.
   Das Kalenderbild steht dort schon im Kopf; in der Demo-Karte entfaellt es, damit es nicht zweimal hintereinander kommt. */
@media (max-width:1000px){#demo-oeffnen,.f-demo-tab,#demo-dialog,.f-demo-bild{display:none!important}}

/* ---------- Handy und iPad: Aufnahmen der Begleit-App (Terminal M, mobile-2.3.12), iPad gross, zwei Handys daneben.
   Spalten 3:1:1, damit iPad (4:3) und Handys (etwa 1:2,17) ungefaehr gleich hoch stehen. ---------- */
.f-geraete{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,1fr) minmax(0,1fr);gap:20px;align-items:start;margin-top:28px}
.f-geraet{margin:0}
.f-geraet img{display:block;width:100%;height:auto;background:var(--surface);border:1px solid var(--line);box-shadow:var(--f-schatten)}
.f-geraet--tablet img{border-radius:var(--f-radius-klein)}
.f-geraet--handy img{border-radius:18px}
.f-geraet figcaption{margin-top:10px;font-size:.85rem;line-height:1.45;color:var(--muted)}

/* ---------- Einblicke: zwei Videos (Karte weiss, Video-Kaesten in Salbei) ---------- */
.f-videos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:28px}
.f-video{margin:0;background:var(--soft);border-radius:var(--f-radius);padding:12px 12px 18px}
.f-video video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:var(--ink);border-radius:var(--f-radius-klein)}
.f-video figcaption{padding:14px 8px 0;color:var(--muted);font-size:.95rem;line-height:1.55}
.f-video figcaption strong{display:block;color:var(--ink);font-weight:600;margin-bottom:4px}

/* ---------- Fahrplan: fuenf Schritte (seit 13.10.2026 ohne Versionsnummern, mit Stores und Paket Voll) ---------- */
.f-schritte{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.f-schritte li{border:1px solid var(--line);border-radius:var(--f-radius-klein);padding:18px 20px}
.f-schritte li.f-jetzt{border-color:var(--accent)}
.f-schritte .f-wann{font:600 .72rem/1.4 'Outfit',sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--terra);margin:0 0 6px}
.f-schritte .f-was{margin:0;line-height:1.5}
.f-schritte a{color:inherit}

/* ---------- Stand: drei Tatsachen ---------- */
.f-fakten{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px 28px}
.f-fakten li{display:flex;gap:10px;align-items:center;font-weight:600;font-size:.95rem}
.f-fakten svg{width:22px;height:22px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}

/* ---------- Newsletter auf der Schluss-Bahn (Karte selbst: newsletter-karte.css) ---------- */
.f-teaser .f-schluss{text-align:left}

/* ---------- Fuss: nur Impressum, Datenschutz, Kontakt ---------- */
.f-teaser-fuss{padding:36px 0 44px;border-top:1px solid var(--line)}
.f-teaser-fuss .wrap{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:space-between}
.f-teaser-fuss nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.f-teaser-fuss a{color:var(--muted)}
.f-teaser-fuss a:hover{color:var(--accent)}
.f-teaser-fuss span{font-size:.88rem;color:var(--muted)}

@media (max-width:980px){
  .f-videos{grid-template-columns:1fr}
  .f-schritte{grid-template-columns:1fr}
}
@media (max-width:700px){
  .f-countdown{max-width:none}
  .f-countdown-felder{gap:6px}
  .f-countdown-felder span{font-size:.7rem}
  .f-video{padding:8px 8px 14px}
  /* Handy: iPad ueber die volle Breite, die zwei Handys darunter nebeneinander */
  .f-geraete{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 14px}
  .f-geraet--tablet{grid-column:1/-1}
  .f-teaser{--f-abschnitt:36px}
  /* Am Computer am Handy (User 13.10.2026): alle Reiter sichtbar (kurze Namen, Umbruch statt Wischen), das Bild
     zuerst (die ganze Ansicht wie am Desktop, kein Ausschnitt), darunter Titel und Satz, die Liste hinter "Mehr dazu" (teaser.js). */
  .f-ansichten .e-tablist{flex-wrap:wrap;justify-content:center;gap:6px;padding:12px;overflow:visible}
  .f-ansichten .e-tab{flex:0 0 auto;min-width:0;padding:7px 13px;border:1px solid var(--line);border-radius:50px;
    background:var(--surface);font-size:.86rem}
  .f-ansichten .e-tab[aria-selected="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-text)}
  .f-tab-lang{display:none}
  .f-tab-kurz{display:inline}
  .f-ansichten .e-panel{display:flex;flex-direction:column;gap:18px;padding:14px 14px 20px}
  .f-ansichten .e-panel[data-e-hidden]{display:none}
  .f-ansichten .e-panel-bild{order:-1}
  .f-ansichten .e-panel-text h3{font-size:1.25rem}
  .f-ansichten .e-panel-text p{margin-bottom:10px}
  .f-mehr{display:inline-flex;align-items:center;gap:6px;padding:0;border:0;background:none;color:var(--accent);
    font:600 .92rem/1.4 'Outfit',sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  .f-mehr[aria-expanded="true"]{margin-bottom:10px}
  .f-ansichten .check-list.f-zu{display:none}
}
/* Teaser: Kopf ohne Kupferstreifen (User 12.10.2026, wie Startseite F v2); im Schluss bleibt er. */
.f-teaser .f-kopf::after{display:none}
/* Teaser: Kopf auch ohne gruene Bahn (User 13.10.2026). */
.f-teaser .f-kopf::before{display:none}