/* EDN Website – gemeinsame Bausteine der Unterseiten (Prototyp)
   Liegt nach site.css und nutzt dessen Farben, Zettel (.zettel-wrap/.zettel) und Bahnen (.bahn-wrap/.bahn).
   Inhalt: Fokus, Menü-Ergänzungen, Fußzeile, Seitenkopf mit Platz für Prägungen, Formular, Fragen (Akkordeon),
   Neuigkeiten, Rechtstexte, Presse, Barrierefreiheit, 404. */

/* ---------- Fokus: auf hellem Papier ein dunkleres Gold (reines Gold hat dort nur 1,9 : 1, dunkles Gold 5 : 1) ---------- */
:focus-visible { outline-color: #8a5f12; }
.hero-night :focus-visible, .bahn--nacht :focus-visible, .site-header.over-night :focus-visible,
.cinema :focus-visible, .lupe :focus-visible { outline-color: var(--gold); }

/* ---------- Menü: fünf Punkte passen auch auf mittlere Bildschirme ---------- */
.nav .nur-mobil { display: none; }
@media (min-width: 921px) and (max-width: 1180px) {
  .nav { gap: 20px; }
  .nav ul { gap: 18px; }
  .nav ul a { font-size: 15px; }
  .nav .btn { padding: 11px 15px; font-size: 14.5px; }
  .brand small { display: none; }
}
@media (max-width: 920px) {
  /* "Früh dabei sein" bleibt auch auf schmalen Bildschirmen im ersten Bild: ein kleiner Knopf links neben "Menü",
     gleich hoch wie dieser (vorher war er unter 921 px Breite ganz ausgeblendet und nur im aufgeklappten Menü). */
  .nav { gap: 12px; }
  .nav > .btn { display: inline-flex; order: 2; margin-left: auto; padding: 9px 14px; font-size: 14px; border-width: 1.5px; white-space: nowrap; }
  .menu-btn { order: 3; margin-left: 0; }
  .brand, .nav > .btn, .menu-btn { flex-shrink: 0; }   /* nichts zusammenquetschen, lieber unten kleiner setzen */
  /* Startseite: Im Nacht-Kopf steht der große Knopf schon direkt darunter. Der kleine erscheint erst, wenn die Leiste
     die Nacht verlässt (behält seinen Platz, damit "Menü" nicht springt). */
  .nav > .btn { transition: opacity .3s ease, visibility .3s ease; }
  .site-header.over-night .nav > .btn { opacity: 0; visibility: hidden; }
}
@media (max-width: 439px) {
  /* Handys (bis 439 px, z. B. 414, 390, 360): Marke ohne "System" wie schon bei mittlerer Breite, Abstände etwas enger */
  .brand small { display: none; }
  .nav { gap: 8px; }
  .nav > .btn, .menu-btn { padding: 9px 12px; }
}
@media (max-width: 359px) {
  /* sehr schmale Handys (344, 320 px): Logo und Knöpfe eine Stufe kleiner, Seitenrand schmaler */
  .site-header .nav { padding-left: 14px; padding-right: 14px; gap: 6px; }
  .brand { font-size: 20px; gap: 8px; }
  .brand img { width: 36px; height: 36px; }
  .nav > .btn, .menu-btn { padding: 9px 10px; font-size: 13px; }
}
@media (max-width: 920px) {
  .nav.is-open .nur-mobil { display: block; margin-top: 8px; padding-top: 12px; border-top: 1px solid var(--line); }
  .nav.is-open .nur-mobil a { display: flex; justify-content: center; background: var(--ink); color: #fbf7ef; border-radius: 999px; font-weight: 620; }
  .nav.is-open .nur-mobil a[aria-current] { outline: 2px solid var(--gold); outline-offset: 2px; }
}
.nav ul a[aria-current="page"] { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 7px; }
.site-header.over-night .nav ul a[aria-current="page"] { color: #f4ecdb; }

/* ---------- Fußzeile ---------- */
.site-footer { padding: clamp(48px, 8vh, 84px) 0 30px; }
.fuss { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 34px 48px; }
.fuss-logo { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 14px; text-decoration: none; color: var(--ink);
             font: 700 22px/1 "Fraunces", Georgia, serif; letter-spacing: -.01em; }
.fuss-logo img { width: 40px; height: 40px; display: block; }
.fuss-marke p { max-width: 27em; line-height: 1.55; }
.fuss-marke .fuss-fein { margin-top: 10px; font-size: 14px; }
html .site-footer .fuss-spalte h2 { font: 650 15px/1.3 "Inter", system-ui, sans-serif; font-variation-settings: normal; letter-spacing: 0; color: var(--ink); margin: 2px 0 14px; }
.fuss-spalte ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.site-footer a { color: var(--ink-soft); }
.site-footer a:hover { color: var(--ink); }
/* Förderer (25.10.2026): Satz links, Logos rechts; auf dem Handy untereinander */
.fuss-foerderer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 40px; margin-top: 40px; }
.fuss-foerderer p { margin: 0; font-size: 14px; max-width: 30em; }
.fuss-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; }
.fuss-logos img { display: block; height: auto; }
.fuss-logos .ff-nbank { width: 112px; }
.fuss-logos .ff-sozio { width: 150px; }
.fuss-logos .ff-region { width: 108px; }
@media (max-width: 560px) { .fuss-logos { gap: 12px 16px; } .fuss-logos .ff-nbank { width: 92px; } .fuss-logos .ff-sozio { width: 118px; } .fuss-logos .ff-region { width: 86px; } }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; margin-top: 44px; font-size: 14px; }
.fuss-unten::before { content: ""; flex: 1 0 100%; height: 1px; background: var(--line); margin-bottom: 8px; }
@media (max-width: 900px) { .fuss { grid-template-columns: repeat(3, minmax(0, 1fr)); } .fuss-marke { grid-column: 1 / -1; } }
@media (max-width: 560px) { .fuss { grid-template-columns: 1fr 1fr; gap: 30px 24px; } .fuss-spalte:last-child { grid-column: 1 / -1; } }

/* ---------- Seitenkopf mit ruhigem Platz für eine spätere Prägung ---------- */
.kopf-raster { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: clamp(30px, 5vw, 80px); align-items: center; }
.praeg-platz { min-height: clamp(240px, 40vh, 500px); }    /* bleibt leer: hier setzt der Motivplan später eine Figur */
.page-head .kicker + h1 { margin-top: 0; }
.page-head .stand-zeile { margin-top: 24px; }
/* Einspaltig mit minmax(0, 1fr) statt 1fr: Sonst wächst die Spalte mit dem breitesten Inhalt (langes Wort, Bild mit fester Breite)
   und läuft am Handy rechts aus der Seite. Früher reparierte das jede Seite für sich (impressum, datenschutzerklaerung, maria, saja). */
@media (max-width: 860px) { .kopf-raster { grid-template-columns: minmax(0, 1fr); } .praeg-platz { display: none; } }
/* Handy: Lange Wörter in Überschriften ("Datenschutzerklärung" im Kopf, "Verbraucherstreitbeilegung" im Rechtstext) liefen bei 360 bis 390 px
   rechts aus der Seite (gemessen 21.10.: bis 73 px). Erst Silbentrennung nach lang="de", und wo der Browser keine Trennregeln hat,
   darf das Wort zur Not ohne Strich umbrechen. Silbentrennung nur auf den Rechtsseiten (dort sind die langen Wörter), überall sonst
   bricht ein Wort nur um, wenn es allein nicht in die Zeile passt. Größere Bildschirme bleiben, wie sie sind. */
@media (max-width: 560px) {
  .page-head h1, .rechtstext h2 { overflow-wrap: anywhere; }
  .page-head--recht h1, .rechtstext h2 { -webkit-hyphens: auto; hyphens: auto; }
  /* "Datenschutzerklärung" ist ein einziges Wort von rund 9,8 Schriftgrößen Breite: Die Überschrift wird so klein, dass es ganz
     in die Zeile passt (360 px: 32 px statt 42 px), statt als "Datenschutzerklärun / g" umzubrechen. */
  html body.seite-datenschutzerklaerung .page-head--recht h1 { font-size: min(42px, calc((100vw - 44px) / 9.9)); max-width: none; }   /* 15ch wären schmaler als das Wort */
}

/* kleine Zeile mit Stand, Verantwortlichem usw. */
.stand-zeile { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 15px; color: var(--ink-soft); list-style: none; padding: 0; margin: 0; }
/* Trennpunkt mitten in der Lücke (18 px) vor jedem Eintrag außer dem ersten. Er steht absolut und nimmt keinen Platz weg.
   Bricht die Zeile um, stünde der Punkt des ersten Eintrags der neuen Zeile links vor dem Rand: clip-path schneidet ihn dort ab
   (nur links, oben, rechts und unten bleibt alles sichtbar). Früher: margin-left -10px am ::before, der Punkt hing beim Umbruch vor dem Rand. */
.stand-zeile { clip-path: inset(-20px -20px -20px 0); }
.stand-zeile li { position: relative; display: inline-flex; align-items: center; gap: 18px; }   /* gap: Abstand zu einer Markierung im selben Eintrag, wie bisher */
.stand-zeile li + li::before { content: ""; position: absolute; left: -11px; top: 50%; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%; background: currentColor; opacity: .5; }
.stand-zeile b { color: var(--ink); font-weight: 600; }

/* Hinweis „Entwurf“: nur im Prototyp sichtbar, damit beim Gegenlesen klar ist, was noch offen ist */
.entwurf { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; color: #6d4c10; padding: 6px 12px; border-radius: 999px;
           border: 1.5px dashed rgba(138,95,18,.55); background: rgba(214,166,58,.10); }

/* Schlagwort (Neuigkeiten, Fragen, Presse) */
.schlagwort { display: inline-block; font-size: 13.5px; font-weight: 600; line-height: 1; color: var(--ink-soft); padding: 6px 11px 5px; border-radius: 999px;
              border: 1px solid #c9b994; background: rgba(251,248,240,.6); white-space: nowrap; }

/* Sprungmarken zu Abschnitten */
.sprung { display: flex; flex-wrap: wrap; gap: 10px; list-style: none; padding: 0; margin: 30px 0 0; }
.sprung a { display: inline-block; padding: 10px 16px; border-radius: 999px; border: 1.5px solid rgba(43,33,22,.35); text-decoration: none; font-size: 15.5px; font-weight: 560;
            color: var(--ink); background: rgba(251,248,240,.5); transition: background .2s ease, border-color .2s ease; }
.sprung a:hover { background: rgba(251,248,240,.95); border-color: var(--ink); }

/* Textverweis mit Pfeil */
.weiter { font-weight: 600; text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.weiter::after { content: " →"; }

/* =================== Formular (Kontakt / Früh dabei sein) =================== */
.kontakt-raster { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr); gap: clamp(30px, 5vw, 76px); align-items: start; }
@media (max-width: 900px) { .kontakt-raster { grid-template-columns: 1fr; } }
.brief { padding: clamp(28px, 4vw, 50px) clamp(22px, 4vw, 54px) clamp(30px, 4vw, 52px); }
.brief > h2 { font-size: clamp(28px, 2.6vw, 40px); margin-bottom: 10px; }
.brief > .hilfe { font-size: 17px; color: var(--ink-soft); margin-bottom: 30px; max-width: 34em; }
.formular { display: grid; gap: 28px; }
.formular .zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 26px; }
@media (max-width: 640px) { .formular .zwei { grid-template-columns: 1fr; } }
.feld { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.feld > label, .feld > legend { font: 600 16.5px/1.35 "Inter", system-ui, sans-serif; color: var(--ink); padding: 0; margin-bottom: 2px; }
.feld .optional { font-weight: 400; color: var(--ink-soft); font-size: 14.5px; }
.feld .hilfe { font-size: 14.5px; color: var(--ink-soft); line-height: 1.45; }
.eingabe { width: 100%; font: 400 18px/1.5 "Inter", system-ui, sans-serif; color: var(--ink); background: rgba(255,252,245,.5);
           border: 0; border-bottom: 1.5px solid #9d8b6c; border-radius: 6px 6px 0 0; padding: 11px 12px 9px; transition: background .2s ease, border-color .2s ease; }
.eingabe:hover { background: rgba(255,252,245,.78); }
.eingabe:focus { outline: none; }
.eingabe:focus-visible { outline: 3px solid #8a5f12; outline-offset: 2px; background: #fffcf5; border-bottom-color: var(--ink); }
.eingabe::placeholder { color: #6f5f48; opacity: 1; }
.eingabe:user-invalid { border-bottom-color: #9c3b2e; box-shadow: inset 0 -1px 0 #9c3b2e; }
/* Nachricht: geschrieben wie auf liniertem Papier */
textarea.eingabe { min-height: calc(6 * 32px + 12px); resize: vertical; line-height: 32px; padding: 6px 12px; background-attachment: local;
                   background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(122,99,66,.22) 31px 32px); background-position: 0 6px; }
/* Rolle: Auswahl als kleine Marken */
.wahl { display: flex; flex-wrap: wrap; gap: 10px; }
.wahl label { position: relative; cursor: pointer; }
.wahl input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.wahl span { display: inline-block; padding: 11px 17px 10px; border-radius: 999px; border: 1.5px solid #b5a383; background: rgba(255,252,245,.55);
             font-size: 16px; font-weight: 540; color: var(--ink); transition: background .2s ease, color .2s ease, border-color .2s ease; }
.wahl label:hover span { border-color: var(--ink); }
.wahl input:checked + span { background: var(--ink); border-color: var(--ink); color: #fbf7ef; }
.wahl input:focus-visible + span { outline: 3px solid #8a5f12; outline-offset: 2px; }
.haken { display: flex; gap: 12px; align-items: flex-start; font-size: 16.5px; line-height: 1.45; color: var(--ink); cursor: pointer; }
.haken input { flex: none; width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--ink); cursor: pointer; }
.haken small { display: block; font-size: 14.5px; color: var(--ink-soft); margin-top: 2px; }
.formular-hinweis { font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; max-width: 38em; }
.formular-hinweis a { color: var(--ink); }
.formular-ende { display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: center; }
.formular-ende .fein { font-size: 14px; color: var(--ink-soft); }
/* Honigtopf: für Menschen unsichtbar, für einfache Bots ein Feld zum Ausfüllen */
.hp { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
/* Antwort nach dem Absenden */
.formular-meldung { margin-top: 26px; }
.formular-meldung[hidden] { display: none; }
.formular-meldung .zettel { padding: 22px 24px 24px; }
.formular-meldung b { display: block; font-size: 18px; margin-bottom: 6px; }
.formular-meldung p { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }
.formular-meldung p + p, .formular-meldung .actions { margin-top: 12px; }
.formular-meldung:focus { outline: none; }
/* Live-Bau: Antwort nach dem echten Absenden. Das Empfangsprogramm leitet auf kontakt.html#gesendet oder #nicht-gesendet,
   :target zeigt den passenden Zettel über dem Formular (geht ohne JavaScript). Im Prototyp gibt es diese Zettel nicht. */
.formular-antwort { display: none; margin: 0 0 28px; scroll-margin-top: 110px; }
.formular-antwort:target { display: block; }
.formular-antwort:focus { outline: none; }
.formular-antwort .zettel { padding: 22px 24px 24px; }
.formular-antwort b { display: block; font-size: 18px; margin-bottom: 6px; }
.formular-antwort p { font-size: 16.5px; line-height: 1.55; color: var(--ink-soft); }

/* Seitenspalte: direkt schreiben */
.direkt { display: grid; gap: 26px; }
.direkt .pinned { max-width: 300px; justify-self: center; }
.kanaele { list-style: none; margin: 0; padding: 0; }
.kanaele li { padding: 16px 0; border-top: 1px solid var(--line); }
.kanaele li:last-child { border-bottom: 1px solid var(--line); }
.kanaele b { display: block; font-size: 16px; margin-bottom: 3px; }
.kanaele p { font-size: 16px; color: var(--ink-soft); line-height: 1.5; }
.kanaele a { color: var(--ink); overflow-wrap: anywhere; }

/* =================== Häufige Fragen: Akkordeon mit <details> =================== */
.fragen-raster { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.7fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.fragen-raster > .gruppe-kopf { position: sticky; top: 110px; }
.gruppe-kopf h2 { font-size: clamp(30px, 3vw, 44px); margin-bottom: 14px; }
.gruppe-kopf p { font-size: 17px; color: var(--ink-soft); line-height: 1.55; }
.gruppe-kopf .praeg-platz { min-height: 220px; margin-top: 20px; }
@media (max-width: 900px) { .fragen-raster { grid-template-columns: 1fr; } .fragen-raster > .gruppe-kopf { position: static; } .gruppe-kopf .praeg-platz { display: none; } }
.fragen { border-top: 1px solid rgba(43,33,22,.22); }
.frage { border-bottom: 1px solid rgba(43,33,22,.22); }
.frage > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; padding: 22px 4px 22px 2px;
                   font-family: "Fraunces", Georgia, serif; font-weight: 400; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(20px, 1.6vw, 24px); line-height: 1.3;
                   color: var(--ink); border-radius: 4px; }
.frage > summary::-webkit-details-marker { display: none; }
.frage > summary::after { content: ""; flex: none; width: 30px; height: 30px; margin-top: -1px; border-radius: 50%; border: 1.5px solid rgba(43,33,22,.4);
  background: linear-gradient(var(--ink), var(--ink)) center / 12px 1.6px no-repeat, linear-gradient(var(--ink), var(--ink)) center / 1.6px 12px no-repeat;
  transition: transform .25s ease, background-color .2s ease; }
.frage > summary:hover::after { background-color: rgba(251,248,240,.9); }
.frage[open] > summary::after { transform: rotate(45deg); }
.frage .antwort { padding: 0 52px 26px 2px; max-width: 46em; }
.frage .antwort p, .frage .antwort li { font-size: 18px; line-height: 1.65; color: var(--ink-soft); }
.frage .antwort p + p, .frage .antwort p + ul, .frage .antwort ul + p { margin-top: .8em; }
.frage .antwort ul { margin: .6em 0 0; padding-left: 1.2em; }
.frage .antwort strong { color: var(--ink); font-weight: 600; }
.frage .antwort a { color: var(--ink); font-weight: 560; }
.frage .antwort .schlagwort { margin-top: 14px; }
@media (prefers-reduced-motion: reduce) { .frage > summary::after { transition: none; } }
@media (max-width: 560px) { .frage .antwort { padding-right: 0; } }
/* auf einer Bahn */
.bahn .fragen, .bahn .frage { border-color: rgba(43,33,22,.25); }

/* =================== Neuigkeiten =================== */
.stand-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; margin-top: 8px; }
@media (max-width: 1000px) { .stand-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .stand-raster { grid-template-columns: 1fr; } }
.stand-raster .zettel { padding: 20px 22px 22px; }
.stand-raster b { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 400; font-variation-settings: "SOFT" 100; font-size: 22px; line-height: 1.2; margin-bottom: 6px; color: var(--ink); }
.stand-raster .stufe { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
.stand-raster p { font-size: 16px; line-height: 1.5; color: var(--ink-soft); }

.notizen { list-style: none; margin: 0; padding: 0; }
.notiz { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px clamp(24px, 4vw, 60px); padding: clamp(34px, 5vh, 52px) 0; border-top: 1px solid rgba(43,33,22,.2); scroll-margin-top: 90px; }
.notizen > li:last-child .notiz { border-bottom: 1px solid rgba(43,33,22,.2); }
.notiz time { display: block; font-family: "Fraunces", Georgia, serif; font-variation-settings: "SOFT" 100; font-weight: 360; color: var(--ink-soft); font-size: 18px; line-height: 1.25; padding-top: 4px; }
.notiz time b { display: block; font-weight: 360; font-size: 48px; line-height: 1; color: var(--ink); letter-spacing: -.02em; }
.notiz .kopf { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.notiz h3 { font-size: clamp(25px, 2.3vw, 34px); line-height: 1.15; margin-bottom: 14px; max-width: 24ch; }
.notiz .prose p { font-size: 18px; }
.notiz .mehr { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 16.5px; }
.notiz .mehr a { color: var(--ink); }
.notiz-inhalt.mit-bild { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.notiz-inhalt .pinned { margin-top: 6px; }
.notiz-inhalt .pinned img { aspect-ratio: auto; }
@media (max-width: 860px) { .notiz-inhalt.mit-bild { grid-template-columns: 1fr; } .notiz-inhalt .pinned { max-width: 480px; } }
@media (max-width: 640px) {
  .notiz { grid-template-columns: 1fr; gap: 10px; }
  .notiz time { display: flex; align-items: baseline; gap: 10px; }
  .notiz time b { font-size: 34px; }
}

/* =================== Rechtstexte: Impressum, Datenschutzerklärung =================== */
.recht-raster { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 46rem); gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (max-width: 960px) { .recht-raster { grid-template-columns: minmax(0, 1fr); } }   /* minmax(0, …): siehe .kopf-raster, sonst Überlauf am Handy */
.recht-inhalt { position: sticky; top: 110px; font-size: 15px; }
@media (max-width: 960px) { .recht-inhalt { position: static; } }
html .recht-inhalt h2 { font: 650 15px/1.3 "Inter", system-ui, sans-serif; font-variation-settings: normal; letter-spacing: 0; color: var(--ink); margin: 0 0 12px; }
.recht-inhalt ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; counter-reset: r; }
.recht-inhalt li { counter-increment: r; }
.recht-inhalt a { display: grid; grid-template-columns: 2.1em 1fr; padding: 6px 0; color: var(--ink-soft); text-decoration: none; line-height: 1.35; }
.recht-inhalt a::before { content: counter(r, decimal-leading-zero); font-variant-numeric: tabular-nums; color: #8d7c62; }
.recht-inhalt a:hover { color: var(--ink); }
@media (max-width: 960px) { .recht-inhalt ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; } }
@media (max-width: 520px) { .recht-inhalt ol { grid-template-columns: 1fr; } }
.rechtstext > section { padding: 34px 0 36px; border-top: 1px solid rgba(43,33,22,.2); scroll-margin-top: 90px; }
.rechtstext > section:first-child { border-top: 0; padding-top: 0; }
html .rechtstext h2 { font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; display: flex; gap: 14px; align-items: baseline; margin: 0 0 18px; }
.rechtstext h2 .nr { flex: none; font: 600 14px/1 "Inter", system-ui, sans-serif; font-variation-settings: normal; color: #7a6a52; font-variant-numeric: tabular-nums; min-width: 2.4em; }
.rechtstext p, .rechtstext li { font-size: 17.5px; line-height: 1.7; color: var(--ink-soft); }
.rechtstext p + p, .rechtstext ul + p, .rechtstext p + ul, .rechtstext .zettel-wrap + p { margin-top: 1em; }
.rechtstext ul { margin: 0; padding-left: 1.25em; }
.rechtstext li + li { margin-top: 4px; }
.rechtstext strong { color: var(--ink); font-weight: 600; }
.rechtstext a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.rechtstext em { font-style: normal; }
.rechtstext code { font: 500 .9em/1 ui-monospace, Consolas, monospace; background: rgba(43,33,22,.06); padding: 2px 5px; border-radius: 4px; overflow-wrap: anywhere; }
.rechtstext .zettel-wrap { margin: 16px 0 4px; max-width: 34em; }
.rechtstext .zettel { padding: 20px 24px 22px; }
.rechtstext .zettel p { color: var(--ink); }
.rechtstext .zettel p + p { margin-top: 10px; }

/* =================== Presse =================== */
.presse-kurz { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(28px, 5vw, 76px); align-items: start; }
@media (max-width: 900px) { .presse-kurz { grid-template-columns: 1fr; } }
.textbaustein + .textbaustein { margin-top: 20px; }
.textbaustein .zettel { padding: 22px 26px 24px; }
.textbaustein .kopf { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; }
.textbaustein .kopf b { font-size: 15px; color: var(--ink-soft); font-weight: 600; }
.textbaustein p { font-size: 18px; line-height: 1.62; color: var(--ink); }
.kopieren { font: 600 14px/1 "Inter", system-ui, sans-serif; color: var(--ink); background: rgba(251,248,240,.7); border: 1.5px solid rgba(43,33,22,.35); border-radius: 999px;
            padding: 8px 13px; cursor: pointer; white-space: nowrap; }
.kopieren:hover { border-color: var(--ink); }
.kopieren[data-ok] { background: var(--ink); color: #fbf7ef; border-color: var(--ink); }
.fakten { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; font-size: 16.5px; }
.fakten dt, .fakten dd { padding: 13px 0; border-top: 1px solid rgba(43,33,22,.18); }
.fakten dt { color: var(--ink-soft); padding-right: 22px; font-weight: 500; }
.fakten dd { margin: 0; color: var(--ink); line-height: 1.5; }
.presse-raster { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; margin-top: 10px; }
@media (max-width: 1100px) { .presse-raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .presse-raster { grid-template-columns: 1fr; } }
.presse-kachel .zettel { padding: 14px 14px 20px; display: flex; flex-direction: column; gap: 14px; height: 100%; }
.presse-kachel .vorschau { margin: 0; aspect-ratio: 4 / 3; display: grid; place-items: center; overflow: hidden; background: #fbf8f1; box-shadow: inset 0 0 0 1px rgba(43,33,22,.08); }
.presse-kachel .vorschau img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; display: block; }
.presse-kachel .vorschau.logo img { width: 46%; height: auto; object-fit: contain; }
.presse-kachel .vorschau.dunkel { background: #1b1e5e; }
.presse-kachel .text { padding: 0 6px; display: grid; gap: 6px; flex: 1 1 auto; align-content: start; }
.presse-kachel b { font-size: 17px; color: var(--ink); }
.presse-kachel .datei { font-size: 14px; color: var(--ink-soft); line-height: 1.45; }
.laden { display: inline-flex; align-items: center; gap: 8px; margin: 0 6px; font-weight: 620; font-size: 15.5px; color: var(--ink); text-decoration: none;
         border-bottom: 1.5px solid rgba(43,33,22,.4); padding-bottom: 2px; align-self: flex-start; }
.laden::before { content: ""; width: 11px; height: 13px; flex: none;
  background: linear-gradient(currentColor, currentColor) 50% 0 / 1.6px 9px no-repeat, linear-gradient(currentColor, currentColor) 50% 100% / 100% 1.6px no-repeat; }
.laden:hover { border-bottom-color: var(--ink); }
.bahn--nacht .laden { color: #f4ecdb; border-bottom-color: rgba(244,236,219,.5); }

/* =================== Barrierefreiheit: Liste „tut / offen“ =================== */
.liste-haken { list-style: none; margin: 26px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; }
@media (max-width: 760px) { .liste-haken { grid-template-columns: 1fr; } }
.liste-haken li { padding: 18px 0 18px 34px; border-top: 1px solid var(--line); position: relative; }
.liste-haken li::before { content: ""; position: absolute; left: 2px; top: 25px; width: 14px; height: 8px; border-left: 2px solid var(--ink-soft); border-bottom: 2px solid var(--ink-soft); transform: rotate(-45deg); }
.liste-haken--offen li::before { width: 12px; height: 12px; border: 1.8px dashed currentColor; border-radius: 50%; transform: none; top: 23px; opacity: .8; }
.liste-haken b { display: block; font-size: 18.5px; margin-bottom: 4px; }
.liste-haken p { font-size: 16.5px; color: var(--ink-soft); line-height: 1.55; }
.bahn--nacht .liste-haken li { border-color: rgba(244,236,219,.2); }
.bahn--nacht .liste-haken p { color: #cfcbe0; }
.bahn--nacht .liste-haken li::before { border-color: #cfcbe0; color: #cfcbe0; }

/* =================== 404 =================== */
.verirrt { text-align: center; }
.verirrt .gross { display: block; font-family: "Fraunces", Georgia, serif; font-weight: 300; font-variation-settings: "SOFT" 100, "WONK" 0; font-size: clamp(110px, 18vw, 240px);
                  line-height: .9; letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px rgba(43,33,22,.55); margin-bottom: 18px; }
.verirrt h1 { margin: 0 auto 22px; max-width: 16ch; }
.verirrt .lead { margin: 0 auto; }
.wege { list-style: none; margin: clamp(40px, 7vh, 70px) auto 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; max-width: 980px; text-align: left; }
@media (max-width: 820px) { .wege { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .wege { grid-template-columns: 1fr; } }
.wege a { display: block; height: 100%; text-decoration: none; color: inherit; }
.wege .zettel { padding: 20px 22px 22px; height: 100%; transition: transform .2s ease; }
.wege a:hover .zettel { transform: translateY(-2px); }
.wege b { display: block; font-size: 18px; margin-bottom: 4px; }
.wege b::after { content: " →"; }
.wege p { font-size: 15.5px; color: var(--ink-soft); line-height: 1.45; }
@media (prefers-reduced-motion: reduce) { .wege .zettel { transition: none; } .wege a:hover .zettel { transform: none; } }

/* Abschluss mit zwei Wegen nebeneinander (kleiner als .closing) */
.abschluss-klein { text-align: center; }
.abschluss-klein h2 { font-size: clamp(28px, 2.8vw, 42px); max-width: 22ch; margin: 0 auto 16px; }
.abschluss-klein .lead { margin: 0 auto 28px; }
.abschluss-klein .actions { justify-content: center; }

/* =================== Ergänzungen 21.10. (Gerüst): Hilfen, Kopf, Neuigkeiten, Sterne, Kontraste =================== */
/* nur für Vorleseprogramme sichtbar */
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Kopf der neuen Unterseiten: Entwurfs-Hinweis, Knöpfe gleich oben (Call to Action nicht nur am Ende) */
.entwurf-zeile { margin: 0 0 16px; max-width: 46em; line-height: 1.7; }
.entwurf-zeile + .entwurf-zeile { margin-top: -6px; }
.entwurf-zeile + .kicker { margin-top: 10px; }
.kopf-aktionen { margin-top: 30px; }
.page-head .sprung { margin-top: 34px; }
.page-head--recht { padding-bottom: clamp(36px, 6vh, 70px); }
html.f4 .page-head--recht h1 { font-size: clamp(42px, 4.8vw, 72px); }
.page-head--recht .lead { font-size: clamp(18px, 1.3vw, 20px); }
.klein-h { font-size: clamp(24px, 2vw, 30px); }

/* Kontraste: Ziffern und Eingabelinien auf Papier mindestens 3 : 1 (vorher 2,7 bis 3,4) */
.recht-inhalt a::before { color: #6f5f48; }
.rechtstext h2 .nr { color: #6f5f48; }
.eingabe { border-bottom-color: #8a7656; }
.wahl span { border-color: #8a7656; }

/* Listen ohne Aufzählungszeichen */
ul.stand-raster, ul.presse-raster { list-style: none; padding: 0; margin-left: 0; margin-right: 0; }
.ehrlich-zeile { margin-top: 32px; max-width: 40em; font-size: 18.5px; line-height: 1.6; color: var(--ink); font-weight: 520; }
.laden-paar { display: flex; flex-wrap: wrap; gap: 10px 4px; }
.direkt .pinned { max-width: 280px; }
.direkt .klein-h { margin-bottom: 14px; }

/* ---------- Neuigkeiten: links angeheftet und Filter, rechts die Einträge ---------- */
.neu-raster { display: grid; grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); align-items: start; }
.neu-seite { position: sticky; top: 104px; }
@media (max-width: 980px) { .neu-raster { grid-template-columns: 1fr; } .neu-seite { position: static; } .neu-seite .angeheftet { max-width: 560px; } }
.angeheftet { transform: rotate(-.7deg); margin-top: 14px; }
.angeheftet::after { content: ""; position: absolute; left: 50%; top: -13px; width: 104px; height: 26px; transform: translateX(-50%) rotate(-2.5deg); z-index: 2;
                     background: rgba(233,223,202,.86); box-shadow: 0 1px 2px rgba(58,45,31,.12); }   /* Klebestreifen */
.angeheftet .zettel { padding: 30px 26px 26px; }
.angeheftet-marke { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); margin-bottom: 8px; }
html .angeheftet h2 { font-size: clamp(23px, 1.9vw, 28px); line-height: 1.2; margin-bottom: 10px; }
.angeheftet p { font-size: 17px; line-height: 1.55; color: var(--ink); }
.angeheftet .mehr { margin-top: 14px; font-size: 16px; }
.angeheftet .mehr a { color: var(--ink); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.filter[hidden] { display: none; }
.filter button { font: 560 15px/1 "Inter", system-ui, sans-serif; color: var(--ink); background: rgba(251,248,240,.55); border: 1.5px solid rgba(43,33,22,.38);
                 border-radius: 999px; padding: 10px 14px 9px; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.filter button:hover { border-color: var(--ink); background: rgba(251,248,240,.95); }
.filter button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: #fbf7ef; }
.filter .zahl { font-weight: 450; opacity: .72; margin-left: 3px; font-variant-numeric: tabular-nums; }
.filter-stand { margin-top: 14px; font-size: 14.5px; color: var(--ink-soft); min-height: 1.4em; }
.filter-leer { padding: 40px 0; font-size: 18px; color: var(--ink-soft); }
.neu-raster .notiz { grid-template-columns: 128px minmax(0, 1fr); }
.neu-raster .notizen > li:first-child .notiz { border-top: 0; padding-top: 6px; }
.notiz time b { font-size: 34px; }
.notiz h3 { max-width: 26ch; }
.fuer-dich { margin-top: 18px; max-width: 38em; padding: 12px 16px 13px; border-left: 3px solid #b8892a; background: rgba(214,166,58,.09); border-radius: 0 6px 6px 0;
             font-size: 17px; line-height: 1.55; color: var(--ink); }
.fuer-dich b { font-weight: 620; }
@media (max-width: 640px) { .neu-raster .notiz { grid-template-columns: 1fr; } .notiz time b { font-size: 26px; } }

/* ---------- Sterne, leise: das Bild aus dem Film „Die Sterne“, klein über einer Einladung ---------- */
.sterne-leise { width: 180px; height: 56px; margin: 0 auto 26px; opacity: .9;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 180 56'><path d='M10 44 L48 20 L88 34 L126 10 L168 28' fill='none' stroke='%234f3f2e' stroke-opacity='.4' stroke-width='1' stroke-dasharray='3 5'/><g fill='%234f3f2e' fill-opacity='.6'><circle cx='10' cy='44' r='2'/><circle cx='48' cy='20' r='2.6'/><circle cx='88' cy='34' r='1.8'/><circle cx='168' cy='28' r='1.7'/></g><circle cx='126' cy='10' r='3.4' fill='%23b8892a'/></svg>") center / contain no-repeat; }
.bahn--nacht .sterne-leise { filter: invert(1) brightness(1.6); }

/* ---------- 404: kleines Haus mit erleuchtetem Fenster ---------- */
.haus-klein { display: block; width: 190px; height: auto; margin: 0 auto 6px; overflow: visible; }
.haus-klein .linie { fill: none; stroke: var(--ink-soft); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; opacity: .7; }
.haus-klein .sterne circle { fill: var(--ink-soft); opacity: .55; }
.haus-klein .stern-gold { fill: #b8892a; }
.haus-klein .fenster { fill: #d6a63a; }
@media (prefers-reduced-motion: no-preference) { .haus-klein .fenster { animation: fenster 9s ease-in-out infinite; } }
.verirrt .gross { font-size: clamp(84px, 12vw, 170px); margin-bottom: 14px; }
.verirrt .wege { margin-top: clamp(40px, 7vh, 64px); }
.verirrt-mail { margin-top: 40px; font-size: 16px; color: var(--ink-soft); }
.verirrt-mail a { color: var(--ink); overflow-wrap: anywhere; }
/* heller Knopf auf der Nacht-Bahn: die allgemeine Linkfarbe der Bahn (hell) darf ihn nicht überschreiben */
.bahn--nacht a.btn-light { color: #1b1e5e; }
.bahn--nacht a.btn-light:hover { background: #fffaf0; }
/* .feature setzt die seitlichen Abstände auf 0 und hob damit den Rand von .wrap auf (Inhalt klebte am Bildschirmrand,
   z. B. SAJA „Was zwischen den Schichten …“ und Über uns „Video“). Der Seitenrand bleibt jetzt immer erhalten. */
.wrap.feature { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
/* Formular-Zettel: der Rissrand ist rund 30px breit, darum innen mindestens so viel Abstand (sonst berühren die Felder den Rand) */
.brief { padding-left: clamp(32px, 4vw, 54px); padding-right: clamp(32px, 4vw, 54px); }
/* Kopfleiste vor dem ersten Scrollen: ein leiser Papierschleier, damit die Menüpunkte lesbar bleiben,
   wenn eine Prägung bis nach oben reicht (z. B. SAJA-Kopf). Über der Nacht der Startseite bleibt sie klar. */
body:not(.seite-start) .site-header:not(.is-solid):not(.over-night) { background: linear-gradient(to bottom, rgba(241,233,216,.92) 0, rgba(241,233,216,.78) 62%, rgba(241,233,216,0) 100%); }