/* ================================================================
   ÖFFENTLICHE STARTSEITE: DIE FÄCHERWAND (seit 10.10.2026, index.php)

   Regeln: DESIGN.md, Abschnitt „Die öffentliche Fläche“. Die Schule als Wand aus
   Fächern; ein Eintrag landet in jedem Fach, das er betrifft. Fäden (blaue
   Linien) nur dort, wo im Code eine echte Verknüpfung besteht. Ein Ablauf
   ohne Verknüpfung wird gestrichelt gezeichnet, nie als Faden.

   Farben ausschließlich über die Tokens aus app/style.css (:root). Kein
   fester Farbwert in dieser Datei; Abstufungen über color-mix().
   Präfix fw- (Fächerwand), damit nichts mit den Klassen der Anwendung kollidiert.
   ================================================================ */

.fw-seite {
    --fw-rand: clamp(16px, 4vw, 56px);
    --fw-breite: 1200px;
    --fw-schatten-fach: inset 0 12px 16px -12px color-mix(in srgb, var(--text) 26%, transparent),
                        inset 0 0 0 1px var(--border);
    --fw-ease: cubic-bezier(0.16, 1, 0.3, 1);
    color: var(--text);
    overflow-x: clip;
}

/* Die Seite läuft randlos: Bänder reichen von Kante zu Kante. main trägt im
   Portal 20px Innenabstand; hier nicht. Die obere Leiste der Anwendung
   (Seitentitel, für Gäste leer) entfällt, die Seite bringt ihre eigene
   Navigation mit. Die Seitenleiste fehlt Gästen ohnehin
   (.app-content--ohne-leiste in app/layout.php).
   Bis zum 10.10.2026 stand beides mit !important in app/landing.css; :has()
   hebt die Regeln ohne Gewalt über die der Anwendung. */
main:has(> .fw-seite) { padding: 0; max-width: none; }
.app-content:has(.fw-seite) > .app-topbar { display: none; }
/* Zwischen </main> und der Fußzeile steht in app/layout_footer.php noch das
   <link> auf beruehrung.css, deshalb ~ und nicht +. */
main:has(> .fw-seite) ~ .footer {
    /* .app-content ist ein Flex-Behälter: ohne volle Breite schrumpft die
       Fußzeile mit margin: auto auf ihre Textbreite und steht mittig statt
       auf der Inhaltslinie (gemessen auf beta, x = 470 statt 176). */
    width: 100%;
    box-sizing: border-box;
    max-width: 1200px;
    margin: 0 auto;
    padding: 28px clamp(16px, 4vw, 56px) 40px;
    text-align: left;
}
.fw-seite *, .fw-seite *::before, .fw-seite *::after { box-sizing: border-box; }
.fw-seite ::selection { background: var(--primary-light); color: var(--text); }
.fw-seite :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 6px; }

.fw-innen {
    max-width: var(--fw-breite);
    margin: 0 auto;
    padding: 0 var(--fw-rand);
}

.fw-abschnitt { padding: clamp(64px, 9vw, 120px) 0; }
.fw-abschnitt--weiss { background: var(--card); }
.fw-abschnitt--gedaempft { background: var(--surface-low); }

.fw-seite h2 {
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.12;
    margin: 0 0 18px;
    max-width: 22ch;
    text-wrap: balance;
}

.fw-seite h3 {
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.3;
    margin: 0 0 6px;
}

.fw-lead {
    font-size: clamp(1.02rem, 1.3vw, 1.15rem);
    color: var(--text-muted);
    line-height: 1.65;
    max-width: 62ch;
    margin: 0;
}

/* ── Knöpfe ─────────────────────────────────────────────── */
.fw-knopf,
.fw-knopf:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 0 22px;
    border-radius: var(--r-md);
    font: 700 0.98rem/1 'Manrope', system-ui, sans-serif;
    text-decoration: none;
    cursor: pointer;
    border: 0;
    transition: background-color 160ms ease, box-shadow 220ms var(--fw-ease), transform 220ms var(--fw-ease);
}
.fw-knopf .material-symbols-outlined { font-size: 20px; }
.fw-knopf--voll,
.fw-knopf--voll:visited {
    background: var(--primary);
    color: var(--on-primary);
    box-shadow: 0 6px 18px -8px color-mix(in srgb, var(--primary) 70%, transparent);
}
.fw-knopf--voll:hover { background: var(--primary-hover); transform: translateY(-1px); }
.fw-knopf--leise,
.fw-knopf--leise:visited {
    background: var(--surface-high);
    color: var(--text-mid);
}
.fw-knopf--leise:hover { background: var(--surface-container); }
.fw-knopf--hell,
.fw-knopf--hell:visited {
    background: var(--card);
    color: var(--hero-btn-ink);
}
.fw-knopf--hell:hover { transform: translateY(-1px); box-shadow: var(--shadow-md); }
.fw-knopf--rahmen,
.fw-knopf--rahmen:visited {
    background: transparent;
    color: var(--on-hero);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--on-hero) 60%, transparent);
}
.fw-knopf--rahmen:hover { box-shadow: inset 0 0 0 1.5px var(--on-hero); }

/* ── Navigation ─────────────────────────────────────────── */
.fw-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 76px;
}
.fw-marke,
.fw-marke:visited {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--text);
    text-decoration: none;
    font-weight: 800;
    font-size: 1.06rem;
    letter-spacing: -0.01em;
}
.fw-marke-zeichen {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    /* Dasselbe Zeichen wie oben in der Seitenleiste des Portals (DESIGN.md,
       „Shapes"): Verlauf und Radius von .sidebar-brand-icon. */
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--hero-from) 0%, var(--hero-to) 100%);
    color: var(--on-primary);
}
.fw-marke-zeichen .material-symbols-outlined { font-size: 21px; }
.fw-nav-links {
    display: flex;
    align-items: center;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.fw-nav-links a,
.fw-nav-links a:visited {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    border-radius: var(--r-sm);
    color: var(--text-mid);
    font-weight: 600;
    font-size: 0.94rem;
    text-decoration: none;
}
.fw-nav-links a:hover { color: var(--primary); background: var(--surface-low); }
.fw-nav-links .fw-nav-anmelden,
.fw-nav-links .fw-nav-anmelden:visited {
    margin-left: 8px;
    color: var(--primary);
    box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--primary) 45%, transparent);
}

/* ── Kopf: Überschrift und Fächerwand ───────────────────── */
.fw-kopf {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: clamp(32px, 4vw, 64px);
    align-items: center;
    padding: clamp(24px, 3.5vw, 48px) 0 clamp(72px, 9vw, 120px);
}
.fw-kopf h1 {
    font-size: clamp(2.1rem, 3.3vw, 3.1rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.04;
    margin: 0 0 22px;
    text-wrap: balance;
}
.fw-unterzeile {
    margin: 0 0 22px;
    max-width: 34ch;
    font-size: clamp(1.15rem, 1.6vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.015em;
    line-height: 1.35;
    color: var(--text-light);
    text-wrap: balance;
}
.fw-kopf .fw-lead { margin-bottom: 28px; font-size: 1.02rem; }
.fw-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; }
.fw-kleingedrucktes {
    margin: 16px 0 0;
    font-size: 0.88rem;
    color: var(--text-light);
}

/* Die Wand */
.fw-wand {
    position: relative;
    padding: 20px 18px 16px;
    border-radius: 22px;
    background: var(--surface-container);
    box-shadow: var(--shadow-lg), inset 0 0 0 1px var(--border);
}
.fw-eingang {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: min(100%, 420px);
    margin: 0 auto 40px;
    padding: 14px 16px;
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--shadow-md), 0 1px 0 var(--border);
}
.fw-eingang-symbol {
    flex: none;
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--primary-light);
    color: var(--primary);
}
.fw-eingang-symbol .material-symbols-outlined { font-size: 20px; }
.fw-zettel-titel {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.35;
}
.fw-herkunft {
    margin: 4px 0 0;
    font-size: 0.78rem;
    line-height: 1.35;
    color: var(--text-light);
}

.fw-faecher {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 34px 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.fw-fach {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    min-height: 168px;
    padding: 12px 10px 10px;
    border-radius: 12px;
    background: var(--surface-low);
    box-shadow: var(--fw-schatten-fach);
}
.fw-fach-inhalt { position: relative; min-height: 96px; }
.fw-zettel {
    position: relative;
    padding: 9px 10px 10px;
    border-radius: 8px;
    background: var(--card);
    box-shadow: 0 6px 14px -6px color-mix(in srgb, var(--text) 22%, transparent), 0 0 0 1px var(--border-light);
    transform: translateY(-22px) rotate(var(--fw-dreh, 0deg));
}
.fw-zettel.fw-dreh-l { --fw-dreh: -1.2deg; }
.fw-zettel.fw-dreh-r { --fw-dreh: 1deg; }
.fw-zettel .fw-zettel-titel { font-size: 0.8rem; overflow-wrap: break-word; }
.fw-zettel .fw-herkunft { font-size: 0.75rem; color: var(--text-muted); }
.fw-zettel--alt { background: var(--surface-low); box-shadow: 0 0 0 1px var(--border); transform: translateY(-4px) rotate(var(--fw-dreh, 0deg)); }
.fw-zettel--alt .fw-zettel-titel { color: var(--text-mid); font-weight: 600; }
.fw-zettel--neu::before {
    content: "";
    position: absolute;
    top: 10px;
    right: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}
.fw-zettel--neu .fw-zettel-titel { padding-right: 14px; }
.fw-schild {
    align-self: center;
    max-width: 100%;
    padding: 5px 10px;
    border-radius: 6px;
    background: var(--card);
    box-shadow: 0 1px 2px color-mix(in srgb, var(--text) 10%, transparent);
    font: 600 0.72rem/1.25 'Inter', system-ui, sans-serif;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-align: center;
    color: var(--text-muted);
    overflow-wrap: break-word;
}
.fw-schild--ihres {
    background: var(--marker);
    color: var(--marker-ink);
}

.fw-spuren {
    position: absolute;
    inset: 0;
    z-index: 3;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.fw-spuren path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linecap: round;
}

.fw-wand-fuss {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 14px;
    min-height: 32px;
}
.fw-beispiel { margin: 0; font-size: 0.8rem; color: var(--text-muted); }
.fw-nochmal {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 32px;
    padding: 0 10px;
    border: 0;
    border-radius: var(--r-sm);
    background: transparent;
    color: var(--primary);
    font: 600 0.8rem/1 'Manrope', system-ui, sans-serif;
    cursor: pointer;
}
.fw-nochmal:hover { background: var(--card); }
.fw-nochmal .material-symbols-outlined { font-size: 18px; }

/* Ablauf: nur mit Skript. Ohne Skript stehen alle Zettel von Anfang an da. */
.fw-wand.fw-wartet .fw-zettel--neu {
    opacity: 0;
    transform: translateY(-64px) scale(0.94);
}
.fw-wand.fw-laeuft .fw-zettel--neu {
    transition: opacity 420ms var(--fw-ease), transform 700ms var(--fw-ease);
}
.fw-wand.fw-laeuft .fw-zettel--neu.fw-angekommen {
    opacity: 1;
    transform: translateY(-22px) rotate(var(--fw-dreh, 0deg));
}
.fw-eingang.fw-sendet { animation: fw-sendet 900ms var(--fw-ease); }
@keyframes fw-sendet {
    0%   { box-shadow: var(--shadow-md), 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent); }
    100% { box-shadow: var(--shadow-md), 0 0 0 14px color-mix(in srgb, var(--primary) 0%, transparent); }
}

/* ── Film ───────────────────────────────────────────────── */
.fw-film {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.fw-film figure { margin: 0; }
.fw-film-buehne { position: relative; }
.fw-film-start {
    position: absolute;
    left: 50%;
    top: 50%;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 52px;
    padding: 0 22px 0 16px;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--primary);
    color: var(--on-primary);
    font: 700 0.98rem/1 'Manrope', system-ui, sans-serif;
    box-shadow: var(--shadow-lg);
    transform: translate(-50%, -80%);
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 160ms ease, transform 220ms var(--fw-ease);
}
.fw-film-start:hover { background: var(--primary-hover); transform: translate(-50%, -84%); }
.fw-film-start .material-symbols-outlined { font-size: 28px; }
.fw-film video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 16px;
    background: var(--surface-container);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
}
.fw-film figcaption { margin-top: 12px; font-size: 0.85rem; color: var(--text-light); }

/* ── Verknüpft: Fäden ───────────────────────────────────── */
.fw-netz {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr);
    gap: clamp(28px, 4.5vw, 64px);
    align-items: center;
    margin-top: clamp(40px, 6vw, 72px);
}
.fw-netz-spalte { position: relative; z-index: 2; display: grid; gap: 22px; }
.fw-netz-spalte--folge { gap: 56px; }
.fw-quelle {
    padding: 16px 18px;
    border-radius: var(--r-md);
    background: var(--card);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
}
.fw-quelle-kopf {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font: 600 0.7rem/1.2 'Inter', system-ui, sans-serif;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.fw-quelle-kopf .material-symbols-outlined { font-size: 18px; color: var(--primary); }
.fw-quelle p { margin: 0; font-size: 0.92rem; line-height: 1.45; }
.fw-quelle .fw-weg {
    margin-top: 10px;
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 600;
}

.fw-konzept {
    position: relative;
    z-index: 2;
    padding: 26px 26px 22px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
}
.fw-konzept-kopf { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.fw-konzept-kopf .fw-eingang-symbol { width: 42px; height: 42px; }
.fw-konzept-titel { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -0.01em; }
.fw-konzept-unter { margin: 2px 0 0; font-size: 0.8rem; color: var(--text-light); }
.fw-kapitel { list-style: none; margin: 0; padding: 0; counter-reset: fw-kap; }
.fw-kapitel > li {
    counter-increment: fw-kap;
    display: grid;
    grid-template-columns: 26px minmax(0, 1fr);
    gap: 4px 8px;
    padding: 11px 0;
    border-top: 1px solid var(--border);
    font-size: 0.9rem;
}
.fw-kapitel > li::before {
    content: counter(fw-kap);
    font-weight: 800;
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}
.fw-kapitel-name { font-weight: 700; }
.fw-baustein {
    grid-column: 2;
    padding: 9px 11px;
    border-radius: 8px;
    background: var(--primary-light);
    color: var(--text);
    font-size: 0.82rem;
    line-height: 1.4;
}
.fw-baustein b { display: block; color: var(--mod-ink); font-size: 0.72rem; font-weight: 700; margin-bottom: 2px; }

.fw-faeden {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    overflow: visible;
    pointer-events: none;
}
.fw-faeden path {
    fill: none;
    stroke: var(--primary);
    stroke-width: 2;
    stroke-linecap: round;
}
.fw-faeden circle { fill: var(--primary); }

.fw-legende {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin: clamp(48px, 6vw, 80px) 0 0;
    padding: 28px 0 0;
    border-top: 1px solid var(--border);
    list-style: none;
}
.fw-legende p { margin: 0; color: var(--text-muted); font-size: 0.94rem; line-height: 1.55; }

/* ── Module: nach Arbeitsart gruppiert ───────────────────
   Keine zwölf gleichen Kacheln: vier Gruppen, darin Zeilen. Die Fächer
   gehören dem Kopf (was ankommt); hier geht es darum, wo gearbeitet wird. */
.fw-gruppen {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(28px, 4vw, 48px) clamp(24px, 3vw, 40px);
    margin-top: clamp(36px, 5vw, 56px);
}
.fw-gruppe h3 {
    margin: 0 0 12px;
    font-size: 1.15rem;
}
.fw-gruppe ul {
    list-style: none;
    margin: 0;
    padding: 4px 18px;
    border-radius: 16px;
    background: var(--card);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
}
.fw-gruppe li + li { border-top: 1px solid var(--border); }
.fw-zeile,
.fw-zeile:visited {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr) auto;
    gap: 14px;
    align-items: start;
    padding: 16px 0;
    color: var(--text);
    text-decoration: none;
}
.fw-zeile-text { display: grid; gap: 2px; }
.fw-zeile-satz { font-size: 0.9rem; line-height: 1.5; color: var(--text-muted); }
.fw-zeile-film {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 36px;
    padding: 0 10px;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--primary);
    transition: background-color 160ms ease;
}
.fw-zeile-film .material-symbols-outlined { font-size: 18px; }
.fw-zeile:hover .fw-modul-name { color: var(--primary); }
.fw-zeile:hover .fw-zeile-film { background: var(--primary-light); }
.fw-modul-symbol {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--mod);
    color: var(--mod-ink);
    flex: none;
}
.fw-modul-symbol .material-symbols-outlined { font-size: 20px; }
.fw-modul-name { font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; }

/* ── Neben der Schulplattform ───────────────────────────── */
.fw-zwei {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    margin-top: clamp(32px, 5vw, 56px);
}
.fw-stapel {
    padding: 26px 28px;
    border-radius: 16px;
}
.fw-stapel--fremd { background: var(--surface-low); box-shadow: var(--fw-schatten-fach); }
.fw-stapel--eigen { background: var(--card); box-shadow: var(--shadow-lg), 0 0 0 1px var(--border); }
.fw-stapel h3 { margin-bottom: 14px; }
.fw-stapel--eigen h3 { color: var(--primary); }
.fw-stapel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.fw-stapel li { display: flex; gap: 10px; align-items: flex-start; font-size: 0.98rem; }
.fw-stapel li .material-symbols-outlined { font-size: 20px; margin-top: 2px; }
.fw-stapel--fremd li { color: var(--text-muted); }
.fw-stapel--fremd li .material-symbols-outlined { color: var(--text-light); }
.fw-stapel--eigen li .material-symbols-outlined { color: var(--primary); }

/* ── Was Ihr Land verlangt: Ablauf, gestrichelt ───────────
   Seit dem 10.10.2026 kein eigenes Band mehr, sondern der Schluss von
   „verknüpft“: Beide Abschnitte erzählten, dass die Teile zusammenhängen.
   Gestrichelt, weil zwischen diesen vier Schritten keine Verknüpfung im
   Code besteht, nur eine Reihenfolge (Fäden nur bei echten Bezügen). */
.fw-kreislauf {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: center;
    margin-top: clamp(48px, 6vw, 80px);
    padding-top: clamp(36px, 4vw, 52px);
    border-top: 1px solid var(--border);
}
.fw-seite .fw-kreislauf h3 { font-size: clamp(1.3rem, 2vw, 1.6rem); font-weight: 800; letter-spacing: -0.02em; margin-bottom: 14px; }
.fw-kreislauf .fw-lead { font-size: 1rem; }
.fw-ablauf { position: relative; list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fw-ablauf::before {
    content: "";
    position: absolute;
    left: 21px;
    top: 24px;
    bottom: 24px;
    border-left: 2px dashed color-mix(in srgb, var(--primary) 45%, transparent);
}
.fw-ablauf li {
    position: relative;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 16px;
    align-items: center;
}
.fw-ablauf .fw-modul-symbol { width: 44px; height: 44px; border-radius: 12px; box-shadow: 0 0 0 6px var(--bg); }
.fw-ablauf b { display: block; font-size: 1rem; }
.fw-ablauf span.fw-ablauf-modul { font-size: 0.86rem; color: var(--text-light); }
.fw-ablauf-zurueck {
    margin: 4px 0 0 60px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    color: var(--text-muted);
}
.fw-ablauf-zurueck .material-symbols-outlined { font-size: 18px; color: var(--primary); }

/* ── Datenschutz ────────────────────────────────────────── */
.fw-schutz {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.fw-fakten { list-style: none; margin: 0; padding: 0; }
.fw-fakten li {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 14px;
    padding: 16px 0;
    border-top: 1px solid var(--border);
    font-size: 1rem;
    line-height: 1.5;
}
.fw-fakten li:last-child { border-bottom: 1px solid var(--border); }
.fw-fakten .material-symbols-outlined { color: var(--primary); font-size: 24px; }
.fw-mehr,
.fw-mehr:visited { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 10px; font-weight: 700; color: var(--primary); text-decoration: none; }
.fw-mehr:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Neu: das blaue Feld ────────────────────────────────── */
.fw-neu {
    background: var(--primary);
    color: var(--on-primary);
}
.fw-neu-innen {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: end;
}
.fw-neu h2 { color: var(--on-primary); max-width: 18ch; }
.fw-neu p { margin: 0; font-size: 1.08rem; line-height: 1.65; color: color-mix(in srgb, var(--on-primary) 88%, var(--primary)); max-width: 56ch; }
.fw-neu-team {
    padding: 24px 26px;
    border-radius: 16px;
    background: color-mix(in srgb, var(--on-primary) 10%, var(--primary));
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--on-primary) 18%, transparent);
}
.fw-neu-team p + p { margin-top: 12px; }
.fw-neu-team .fw-wortlaut { font-weight: 800; color: var(--on-primary); font-size: 1.12rem; }
.fw-neu-team .fw-traeger { font-size: 0.86rem; color: color-mix(in srgb, var(--on-primary) 90%, var(--primary)); }

/* ── Drei Schritte ──────────────────────────────────────── */
.fw-schritte {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(20px, 3vw, 40px);
    margin: clamp(36px, 5vw, 56px) 0 36px;
    padding: 0;
    list-style: none;
    counter-reset: fw-schritt;
}
.fw-schritte li { position: relative; counter-increment: fw-schritt; }
.fw-schritte li:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 22px;
    left: 60px;
    right: -6px;
    border-top: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent);
}
.fw-schritte li::before {
    content: counter(fw-schritt);
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-bottom: 18px;
    border-radius: 50%;
    background: var(--primary);
    color: var(--on-primary);
    font-weight: 800;
    font-size: 1.05rem;
    box-shadow: 0 0 0 8px var(--bg);
}
.fw-schritte p { margin: 0; color: var(--text-muted); line-height: 1.6; }

/* ── Preise ─────────────────────────────────────────────── */
.fw-preise {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 14px;
    margin: clamp(32px, 5vw, 52px) 0 28px;
    padding: 0;
    list-style: none;
}
.fw-preis {
    padding: 22px 22px 20px;
    border-radius: var(--r-lg);
    background: var(--card);
    box-shadow: var(--shadow-md), 0 0 0 1px var(--border);
}
.fw-preis-groesse {
    margin: 0 0 10px;
    font-size: 0.98rem;
    font-weight: 700;
    color: var(--text);
}
.fw-preis-betrag {
    display: block;
    font-size: clamp(1.7rem, 2.6vw, 2.2rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.fw-preis-hinweis { display: block; margin-top: 6px; font-size: 0.82rem; color: var(--text-light); }
.fw-preis-notiz { max-width: 72ch; margin: 0 0 24px; color: var(--text-muted); line-height: 1.65; }

/* ── Fragen ─────────────────────────────────────────────── */
.fw-fragen-raster {
    display: grid;
    grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr);
    gap: clamp(32px, 6vw, 96px);
    align-items: start;
}
.fw-fragen details { border-top: 1px solid var(--border); }
.fw-fragen details:last-child { border-bottom: 1px solid var(--border); }
.fw-fragen summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-height: 56px;
    padding: 14px 0;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.4;
    cursor: pointer;
    list-style: none;
}
.fw-fragen summary::-webkit-details-marker { display: none; }
.fw-fragen summary .material-symbols-outlined { color: var(--primary); transition: transform 240ms var(--fw-ease); flex: none; }
.fw-fragen details[open] summary .material-symbols-outlined { transform: rotate(45deg); }
.fw-fragen summary:hover { color: var(--primary); }
.fw-fragen details p { margin: 0 0 20px; max-width: 64ch; color: var(--text-muted); line-height: 1.65; }

/* ── Abschluss ──────────────────────────────────────────── */
.fw-schluss {
    background: var(--hero-from);
    color: var(--on-hero);
}
.fw-schluss h2 { color: var(--on-hero); max-width: 24ch; font-size: clamp(1.9rem, 3.6vw, 3rem); }
.fw-schluss p { margin: 0 0 30px; font-size: 1.08rem; color: color-mix(in srgb, var(--on-hero) 88%, var(--hero-from)); max-width: 58ch; }

/* ── Anmeldefenster (Dialog der Anwendung, #loginModal) ── */
.landing-anmelden { width: 100%; justify-content: center; }

/* ── Filmfenster ────────────────────────────────────────── */
.fw-filmfenster {
    width: min(960px, calc(100vw - 32px));
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: var(--card);
    color: var(--text);
    box-shadow: var(--shadow-lg);
}
.fw-filmfenster::backdrop { background: color-mix(in srgb, var(--text) 62%, transparent); }
.fw-filmfenster-kopf { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 10px 20px; }
.fw-filmfenster-kopf h3 { margin: 0; }
.fw-filmfenster-zu {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}
.fw-filmfenster-zu:hover { background: var(--surface-low); color: var(--text); }
.fw-filmfenster video { display: block; width: 100%; height: auto; background: var(--text); }
.fw-filmfenster-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; font-size: 0.86rem; color: var(--text-light); }

/* ── Formularseiten: Probeabo, Anmelden, Passwort, Kontakt ──
   Derselbe Rahmen wie die Startseite (app/oeffentlich_rahmen.php, DESIGN.md
   „Die Formularseiten-Regel"): links Ueberschrift und Zusagen, rechts das
   Formular in der Hausform des Portals. */
.fw-formularseite {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: start;
    padding: clamp(24px, 4vw, 56px) 0 clamp(64px, 8vw, 104px);
}
.fw-formularseite--schmal { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.fw-formular-intro h1 {
    font-size: clamp(2rem, 3vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.08;
    margin: 0 0 18px;
    text-wrap: balance;
}
.fw-formular-intro .fw-unterzeile { max-width: 38ch; margin-bottom: 0; }
.fw-zusagen { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.fw-zusagen li { display: flex; gap: 10px; align-items: flex-start; font-size: 1rem; line-height: 1.5; color: var(--text-mid); }
.fw-zusagen .material-symbols-outlined { flex: none; color: var(--primary); font-size: 22px; margin-top: 1px; }
.fw-formular-zusatz { margin: 26px 0 0; font-size: 0.95rem; color: var(--text-muted); }
.fw-formular-zusatz a { font-weight: 700; }
.fw-formular-feld .card {
    max-width: none;
    margin: 0;
    border-radius: 16px;
    box-shadow: var(--shadow-lg), 0 0 0 1px var(--border);
}

/* ── Breiten ────────────────────────────────────────────── */
@media (max-width: 1080px) {
    .fw-preise { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
    .fw-kopf,
    .fw-film,
    .fw-kreislauf,
    .fw-schutz,
    .fw-neu-innen,
    .fw-fragen-raster,
    .fw-formularseite,
    .fw-formularseite--schmal { grid-template-columns: minmax(0, 1fr); }
    .fw-netz { grid-template-columns: minmax(0, 1fr); }
    .fw-gruppen, .fw-legende { grid-template-columns: minmax(0, 1fr); }
    .fw-netz-spalte--folge { gap: 22px; }
    .fw-faeden { display: none; }
    .fw-nav-links li:not(.fw-nav-immer) { display: none; }
}

@media (max-width: 640px) {
    .fw-faecher { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px 10px; }
    .fw-wand { padding: 16px 12px 14px; border-radius: 18px; }
    .fw-eingang { margin-bottom: 34px; }
    .fw-fach { min-height: 150px; }
    .fw-preise { grid-template-columns: minmax(0, 1fr); }
    .fw-zwei { grid-template-columns: minmax(0, 1fr); }
    .fw-gruppe ul { padding: 2px 14px; }
    .fw-zeile { gap: 10px; padding: 14px 0; }
    .fw-zeile-film { padding: 0 6px; }
    .fw-zeile-satz { font-size: 0.86rem; }
    .fw-schritte { grid-template-columns: minmax(0, 1fr); }
    .fw-schritte li:not(:last-child)::after { top: 60px; bottom: -14px; left: 21px; right: auto; border-top: 0; border-left: 2px dashed color-mix(in srgb, var(--primary) 40%, transparent); }
    .fw-schritte li { padding-left: 64px; }
    .fw-schritte li::before { position: absolute; left: 0; top: 0; margin: 0; }
    .fw-knoepfe .fw-knopf { width: 100%; justify-content: center; }
    .fw-nav { gap: 10px; }
    .fw-nav-links a, .fw-nav-links a:visited { padding: 0 10px; }
    .fw-nav-links .fw-nav-anmelden, .fw-nav-links .fw-nav-anmelden:visited { margin-left: 2px; }
    .fw-marke { font-size: 1rem; gap: 8px; }
}

@media (max-width: 400px) {
    .fw-marke { font-size: 0.92rem; }
    .fw-marke-zeichen { width: 32px; height: 32px; }
    .fw-nav-links a, .fw-nav-links a:visited { padding: 0 8px; font-size: 0.88rem; }
}

/* Ohne Bewegung: Das Skript lässt den Ablauf dann ganz aus (Endbild sofort);
   hier fallen nur die kleinen Übergänge weg. */
@media (prefers-reduced-motion: reduce) {
    .fw-knopf, .fw-zeile-film, .fw-film-start, .fw-fragen summary .material-symbols-outlined,
    .fw-wand.fw-laeuft .fw-zettel--neu { transition: none; }
    .fw-eingang.fw-sendet { animation: none; }
    .fw-knopf--voll:hover, .fw-knopf--hell:hover { transform: none; }
}