/* Fassung F (Entwurf 05.10.2026): baut auf B (site.css, refinement.css) und E (e.css) auf.
   Grundlage: docs/kommunikation/webseite-sichtung/gestaltungs-wuensche-user-2026-10-02-v2.md.
   Farben: Variante 5 der Farbstudie (docs/kommunikation/webseite-farbstudie-2026-10-02-v1/ und -v2/):
   Werte von Variante 1 nur im hellen Modus, dazu Bahn und Kupferstreifen. Dunkel bleibt B.

   Gestaltungsregeln (User 05.10.: "konsistent und stimmig"):
   1. Schraege Bahn mit Kupferstreifen nur am Anfang (Kopf) und am Ende (Schluss), gleich gebaut.
   2. Dazwischen ist alles Karte mit EINEM Satz Werte: Rundung --f-radius, Bilder in Karten --f-radius-klein.
      Weisse Karten: feine Linie und --f-schatten. Farbige Karten: ohne Linie, ohne Schatten.
   3. Farben im Wechsel: Reiter weiss, Handy Salbei, Daten weiss, Ueber mich Salbei, Zusammenfassung mit der
      Pfirsichflaeche (einziger Pfirsich-Akzent), Pakete weiss. Gleicher Abstand zwischen allen Abschnitten. */

/* Variante 1 (hell). Gleiche Spezifitaet wie :root in site.css und spaeter geladen; der dunkle Block von B
   (:root[data-theme=dark]) ist spezifischer und bleibt damit unberuehrt. */
:root{--paper:#fbf9f2;--surface:#ffffff;--ink:#1f3b30;--muted:#566a5d;--line:#dfe6d6;--soft:#e9f0e1;--accent:#2b6b5a;
  --accent-text:#ffffff;--peach:#f6e9dc;--peach-ink:#764626;--terra:#8a4220;--deep:#d3e3cf;--deep-text:#1f3b30;
  --f-bahn:#e6f0ed;--f-streifen:#c8764b;
  --f-radius:20px;--f-radius-klein:12px;--f-schatten:0 10px 30px color-mix(in srgb,var(--ink) 7%,transparent);--f-abschnitt:64px}
:root[data-theme=dark]{--f-bahn:#16241d}

/* ---------- Abstaende: gleicher Rhythmus fuer alle Abschnitte zwischen Kopf und Schluss ---------- */
.f-home main>section:not(.f-kopf):not(.f-schluss){padding-block:var(--f-abschnitt)}
.f-home main>section.faq-section:not(.f-kopf):not(.f-schluss){padding-top:0}

/* ---------- Regel 1: Bahn und Kupferstreifen (Kopf und Schluss) ---------- */
.f-kopf,.f-schluss{position:relative;overflow:hidden;isolation:isolate}
.f-kopf::before,.f-schluss::before{content:'';position:absolute;left:-12%;width:124%;transform:rotate(-12deg);background:var(--f-bahn);z-index:-2}
.f-kopf::after,.f-schluss::after{content:'';position:absolute;left:-12%;width:124%;height:clamp(4px,.7vw,8px);transform:rotate(-12deg);background:var(--f-streifen);opacity:.7;z-index:-1}
/* Bahn und Streifen laufen ganz von der linken zur rechten Fensterkante durch und werden nie von der Unterkante des
   Abschnitts abgeschnitten (User 05.10.). Bei -12 Grad liegt ihr tiefster Punkt am linken Rand, um tan(12 Grad) * halbe
   Breite = 10.63vw tiefer als in der Mitte. Darum ist die Lage von unten gerechnet: Streifen am linken Rand
   44 px (Kopf; ueber der Kernpunkt-Leiste, die 36 px hineinragt) bzw. 20 px (Schluss) ueber dem Abschnittsende,
   die Bahn 22 px darueber. */
.f-kopf{padding:56px 0 72px}
.f-kopf::before{height:clamp(100px,15vw,210px);top:calc(100% - 44px - 10.63vw - 22px - clamp(100px,15vw,210px))}
.f-kopf::after{top:calc(100% - 44px - 10.63vw)}
/* Im Schluss liegen Bahn und Streifen unter den Knoepfen: der Streifen steigt nach rechts an und laeuft sonst durch
   den Text. Der Abstand unten waechst darum mit der Fensterbreite. */
.f-schluss{padding:88px 0 calc(110px + 10.63vw);text-align:center}
.f-schluss::before{height:clamp(90px,12vw,170px);top:calc(100% - 20px - 10.63vw - 22px - clamp(90px,12vw,170px))}
.f-schluss::after{top:calc(100% - 20px - 10.63vw)}

/* ---------- Kopf: linksbuendig, Bild daneben ---------- */
.f-kopf-raster{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.f-kopf h1{font-size:clamp(2.3rem,4.2vw,3.6rem);margin:0}
.f-kopf .e-wortmarke{font-size:clamp(2.6rem,5vw,4.4rem);margin-top:4px}
.f-kopf .f-claim{margin-top:18px;font-size:1.12rem;color:var(--ink);max-width:34ch}
.f-kopf .actions,.f-schluss .actions{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:center;margin-top:28px}
.f-schluss .actions{justify-content:center}
.f-schluss-inhalt{max-width:640px}
.f-schluss h2{margin:10px 0 14px}

/* ---------- Regel 2: Karten ---------- */
.f-kopf-bild,.f-kernpunkte,.f-home .e-tabs,.f-home .e-tabelle,.f-block--weiss{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--f-radius);box-shadow:var(--f-schatten)}
.f-block--soft,.f-flaeche{border:0;border-radius:var(--f-radius);box-shadow:none}
.f-block--soft{background:var(--soft)}
.f-flaeche{background:var(--peach);color:var(--peach-ink)}
.f-home .e-panel-bild,.f-handy-bild img{border:1px solid var(--line);border-radius:var(--f-radius-klein);box-shadow:none}
.f-kopf-bild{margin:0;overflow:hidden}
.f-kopf-bild img{display:block;width:100%;height:auto}
.f-block{padding:44px 48px}

/* ---------- Kernpunkt-Leiste (wie Fassung D) ---------- */
.f-kernpunkte{list-style:none;margin:-36px 0 0;padding:18px 24px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 24px;position:relative}
.f-kernpunkte li{display:flex;gap:12px;align-items:center;font-weight:600;font-size:.95rem;line-height:1.35}
.f-kernpunkte svg{width:24px;height:24px;flex-shrink:0;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-kernpunkte a{color:inherit;text-decoration:none}
.f-kernpunkte a:hover{color:var(--accent)}

/* ---------- Funktionen im Detail: Reiter aus E, Bild rechts und gross, Klick vergroessert ---------- */
.f-home .e-panel{grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr)}
.f-home .e-panel-bild{order:0;position:relative}
.f-zoom{display:block;cursor:zoom-in}
.f-zoom img{display:block;width:100%;height:auto}
.f-zoom:focus-visible{outline:3px solid var(--terra);outline-offset:-3px}
.f-live{position:absolute;right:12px;bottom:12px;padding:7px 14px;border-radius:999px;background:var(--accent);color:var(--accent-text);
  font:600 .85rem/1.2 'Outfit',sans-serif;text-decoration:none;box-shadow:0 6px 18px color-mix(in srgb,var(--ink) 20%,transparent)}
.f-live:hover{color:var(--accent-text);filter:brightness(1.08)}
/* Die Demo laeuft erst ueber 1000 px (landing.js von B); darunter kein Schild, das ins Leere fuehrt. */
@media (max-width:1000px){.f-live{display:none}}
.f-bildnotiz{font-size:.78rem;color:var(--muted);margin:14px 0 0}

/* ---------- Handy und Daten (zweispaltige Karten) ---------- */
.f-zweispaltig{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.f-zweispaltig h2{margin-bottom:16px}
.f-handy-bild{margin:0;display:flex;justify-content:center}
.f-handy-bild img{width:auto;height:340px;max-width:100%;object-fit:contain}
.f-handy-stufen{font-size:.95rem;margin-top:16px}
.f-punkte{margin:0}
.f-punkte>div{padding:18px 0;border-bottom:1px solid var(--line)}
.f-punkte>div:last-child{border-bottom:0}
.f-punkte dt{font-weight:600}
.f-punkte dd{margin:4px 0 0;color:var(--muted)}

/* ---------- Ueber mich: kurz wie Fassung A (Foto, zwei Saetze, Knopf), Zitat als normaler Absatz ---------- */
.f-ich{display:grid;grid-template-columns:150px minmax(0,1fr);gap:32px;align-items:center}
.f-ich img{width:150px;height:150px;border-radius:50%;object-fit:cover}
.f-ich h2{font-size:clamp(1.6rem,2.6vw,2.2rem);margin-bottom:12px}
.f-ich .f-zitat{color:var(--muted);margin-top:14px;font-style:italic}
.f-ich .f-name{display:block;margin-top:8px;font-size:.9rem;color:var(--muted)}

/* ---------- Zusammengefasst: Was Praxido kann (Variante 3 aus webseite/vergleich-funktionen-v1/) ---------- */
.f-kann-spalten{display:grid;grid-template-columns:1.35fr 1fr;gap:40px 64px;margin-top:8px}
.f-kann-spalte h3,.f-flaeche h3{font:600 1.05rem/1.3 'Outfit',sans-serif;letter-spacing:0;padding-bottom:10px;border-bottom:2px solid currentColor;margin:0}
.f-liste{list-style:none;margin:0;padding:0}
.f-liste li{display:grid;grid-template-columns:minmax(140px,12rem) 1fr;gap:4px 20px;padding:12px 0;border-bottom:1px solid var(--line);line-height:1.5}
.f-liste b{font-weight:600}
.f-liste span{color:var(--muted)}
.f-flaeche{padding:24px 28px 14px;align-self:start}
.f-flaeche .f-liste li{grid-template-columns:1fr;border-bottom-color:color-mix(in srgb,var(--peach-ink) 22%,transparent)}
.f-flaeche .f-liste li:last-child{border-bottom:0}
.f-flaeche .f-liste b{font-weight:500}

@media (max-width:980px){
  .f-kopf-raster{grid-template-columns:1fr;gap:34px}
  .f-kernpunkte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-home .e-panel{grid-template-columns:1fr}
  .f-kann-spalten,.f-zweispaltig{grid-template-columns:1fr}
}
/* e.css baut die Paket-Tabelle unter 761 px in einzelne Karten um; dort keine Aussenkarte um alles */
@media (max-width:760px){.f-home .e-tabelle{border:0;background:transparent;box-shadow:none}}
@media (max-width:700px){
  :root{--f-abschnitt:40px}
  /* Kopf am Handy: die Kernpunkt-Leiste ragt 60 px hinein, der Streifen bleibt am linken Rand 84 px ueber der Kante */
  .f-kopf{padding:30px 0 140px}
  .f-kopf::before{height:80px;top:calc(100% - 84px - 10.63vw - 18px - 80px)}
  .f-kopf::after{top:calc(100% - 84px - 10.63vw)}
  .f-schluss{padding-top:56px}
  .f-kernpunkte{grid-template-columns:1fr;margin-top:-60px;padding:16px 18px}
  .f-liste li{grid-template-columns:1fr}
  .f-block{padding:28px 22px}
  .f-ich{grid-template-columns:1fr;text-align:left}
  .f-ich img{width:110px;height:110px}
  .f-handy-bild img{height:260px}
}

/* ---------- Kopf v2 (User 08./09.10.2026) ----------
   Der Kupferstreifen lief im Kopf schraeg zwischen Ueberschrift, Knoepfen und Bild durch und wirkte wie
   durchgestrichen. Im Kopf bleibt darum nur die helle Bahn (Ausnahme zu Regel 1); im Schluss bleibt der Streifen.
   Text allein, gross und mittig; das Bild steht gross darunter, die Bahn laeuft hinter seinem unteren Teil. */
.f-kopf--v2{padding:64px 0 76px;text-align:center}
.f-kopf--v2::after{display:none}
.f-kopf-text{max-width:900px;display:flex;flex-direction:column;align-items:center}
.f-kopf--v2 h1{font-size:clamp(2.6rem,5.6vw,4.6rem)}
.f-kopf--v2 .e-wortmarke{font-size:clamp(2.9rem,6.4vw,5.4rem)}
.f-kopf--v2 .f-claim{max-width:40ch;font-size:1.2rem;margin-inline:auto}
.f-kopf--v2 .actions{justify-content:center}
/* .text-link bringt aus site.css margin-top mit; neben einem Knopf in derselben Zeile stuende er sonst tiefer */
.f-kopf--v2 .actions .text-link{margin-top:0}
.f-kopf--v2 .f-kopf-bild{margin:52px auto 0;max-width:1120px}
/* Kostenlos nur als kurze Zeile unter den Knoepfen (User 09.10.: der Kasten und der eigene Block waren zu viel) */
.f-kopf-notiz{margin-top:16px;font-size:.92rem;color:var(--muted)}
.f-kopf-notiz a{color:var(--accent)}

/* ---------- Funktionsreiter: sechs statt vier ---------- */
/* flex:1 0 auto: ein Reiter wird nie schmaler als sein Titel (nowrap aus e.css); reicht die Breite nicht, scrollt die
   Leiste in sich (overflow-x in e.css). Vorher lief "Einnahmen & Ausgaben" unter etwa 1100 px in den Nachbarn (P2-1). */
.f-home .e-tab{flex:1 0 auto;padding-inline:16px}
/* Reiter "Exporte & Daten" ohne Bildschirmfoto: Text links, Hinweis-Karte rechts */
.f-home .e-panel--ohne-bild{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
.f-daten-hinweis{padding:28px;border-radius:var(--f-radius-klein);background:var(--soft)}
.f-daten-hinweis svg{width:30px;height:30px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;margin-bottom:12px}
.f-daten-hinweis p{margin:0}
.f-daten-hinweis .text-link{margin-top:16px}

/* ---------- Handy kompakt: kleines Bild, vier kleine Karten ---------- */
.f-handy{display:grid;grid-template-columns:200px minmax(0,1fr);gap:44px;align-items:center}
.f-handy .f-handy-bild img{height:300px}
.f-handy{padding-block:36px}
.f-handy h2{margin-bottom:12px;font-size:clamp(1.6rem,2.4vw,2.2rem)}
.f-handy-karten{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.f-handy-karten li{display:grid;grid-template-columns:26px minmax(0,1fr);gap:2px 12px;padding:14px 16px;background:var(--surface);border-radius:var(--f-radius-klein)}
.f-handy-karten svg{grid-row:span 2;width:22px;height:22px;margin-top:2px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.f-handy-karten b{font-weight:600;font-size:.95rem}
.f-handy-karten span{color:var(--muted);font-size:.9rem;line-height:1.5}
@media (max-width:980px){.f-handy{grid-template-columns:1fr}.f-home .e-panel--ohne-bild{grid-template-columns:1fr}}
@media (max-width:600px){.f-handy-karten{grid-template-columns:1fr}.f-handy .f-handy-bild img{height:240px}}
@media (max-width:700px){
  .f-kopf--v2{padding:32px 0 96px}
  .f-kopf--v2 .f-kopf-bild{margin-top:32px}
}