/* ===================================================================
   Düsseldorfer Freizeit- und Kulturpanel — Befragungsportal
   Stylesheet für alle Seiten. Stand: 22. August 2026.

   Löst die Portalblau-Fassung ab, die sich am Erhebungsportal der
   Statistischen Ämter orientierte. Leitgedanken der neuen Fassung:
   · Warme Papierfarben statt Amtsblau, Signalrot nur für „Mitmachen"
   · Serifen-Überschriften über Grotesk-Fließtext — liest sich als
     Kampagne, nicht als Formular
   · Untereinander stehende Abschnitte statt Kachelraster: ein Gedanke
     je Bildschirm, viel Luft, kurze Absätze
   · Bilder tragen die Seite; Text erklärt sie
   · Grundschriftgröße 18 px

   Unverändert übernommen: kein Framework, kein Tracking, keine
   externen Aufrufe, keine Webfonts, kein Cookie-Banner.
   =================================================================== */

/* ---------- Grundwerte ---------- */
:root{
  /* Farben */
  --tinte:#1b1a17;         /* Text stark, dunkle Flächen */
  --text:#33302b;
  --text-leise:#6b665e;
  --sand:#faf6f0;          /* Grundfläche, liest sich als Papier */
  --sand-tief:#f1eae0;     /* zweite Fläche, für abgesetzte Abschnitte */
  --papier:#ffffff;
  --rand:#e3dace;
  --rand-hell:#efe8de;

  --gruen:#14524a;         /* Marke, Überschriften-Akzent, Links */
  --gruen-hell:#e4eeea;
  --gruen-mittel:#4c8579;

  --signal:#c0432a;        /* trägt ausschließlich „Mitmachen" */
  --signal-dunkel:#a0341f;
  --signal-zart:#fbeae4;

  --fehler:#a0341f;
  --erfolg:#1f5c3a;

  /* Form */
  --radius:10px;
  --radius-klein:6px;
  --spalte:1220px;
  --spalte-schmal:900px;
  --schatten:0 1px 2px rgba(27,26,23,.05), 0 8px 24px -14px rgba(27,26,23,.22);
  --schatten-hoch:0 2px 4px rgba(27,26,23,.06), 0 20px 44px -24px rgba(27,26,23,.30);

  /* Schrift — ausschließlich Systemschriften, kein Google-Fonts-Aufruf.
     Überschriften in einer Serife: nimmt der Seite das Amtliche und
     gibt ihr einen redaktionellen, zugewandten Ton.                    */
  --sans:"Source Sans 3","Source Sans Pro","Segoe UI",-apple-system,
         BlinkMacSystemFont,"Noto Sans",Roboto,"Helvetica Neue",Arial,sans-serif;
  --titel:"Iowan Old Style","Palatino Linotype","Book Antiqua",Palatino,
          Georgia,"Noto Serif",Cambria,"Times New Roman",serif;
  --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
}
@media (prefers-contrast: more){
  :root{--text:#000;--text-leise:#33302b;--rand:#8c857a;
        --gruen:#0d3b35;--signal:#8f2d17;--signal-dunkel:#7a2412}
}

/* Selbst gehostete Schrift aktivieren: Source Sans 3 (SIL Open Font License)
   herunterladen, als WOFF2 in einen Ordner "fonts" neben diese Datei legen
   und die folgenden Zeilen einkommentieren.
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/SourceSans3-Bold.woff2") format("woff2");font-weight:700;font-display:swap}
*/

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}
body{
  margin:0;color:var(--text);background:var(--sand);
  font-family:var(--sans);font-size:18px;line-height:1.65;
  text-underline-offset:3px;
  -webkit-font-smoothing:antialiased
}
h1,h2,h3,h4{
  font-family:var(--titel);color:var(--tinte);font-weight:700;
  line-height:1.18;margin:0;letter-spacing:-.01em
}
a{color:var(--gruen)}
a:hover{color:var(--signal-dunkel)}
img{max-width:100%}
:focus-visible{outline:3px solid var(--signal);outline-offset:3px;border-radius:2px}
.bereich{max-width:var(--spalte);margin:0 auto;padding:0 32px;width:100%}
.bereich.schmal{max-width:var(--spalte-schmal)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
[id]{scroll-margin-top:96px}

/* ---------- Sprungmarke ---------- */
.sprung{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--tinte);color:#fff;padding:14px 20px;
  border-radius:0 0 var(--radius-klein) 0;text-decoration:none
}
.sprung:focus{left:0}

/* ===================================================================
   KOPFZEILE — schlank, mitlaufend, mit Mitmachen-Knopf
   =================================================================== */
.kopf{
  position:sticky;top:0;z-index:100;
  background:rgba(250,246,240,.94);
  backdrop-filter:saturate(1.4) blur(8px);
  border-bottom:1px solid var(--rand)
}
.kopf-innen{display:flex;align-items:center;gap:20px;min-height:74px;padding-top:10px;padding-bottom:10px}
.marke{display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit;min-width:0}
.marke img{height:32px;width:auto;display:block;flex:0 0 auto}
.marke-text{line-height:1.22;min-width:0}
.marke-text .zeile1{
  font-family:var(--titel);font-size:17px;font-weight:700;
  color:var(--tinte);display:block;letter-spacing:-.012em
}
.marke-text .zeile2{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gruen);display:block;font-weight:600;margin-top:1px
}
.kopf-nav{margin-left:auto;display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.kopf-nav a{
  display:inline-flex;align-items:center;gap:7px;
  font-size:15.5px;text-decoration:none;color:var(--text);
  padding:9px 12px;border-radius:var(--radius-klein)
}
.kopf-nav a:hover{background:var(--gruen-hell);color:var(--gruen)}
.kopf-nav svg{width:17px;height:17px;flex:0 0 auto;stroke:var(--text-leise);fill:none}
.kopf-nav a:hover svg{stroke:var(--gruen)}
.sprachwahl{display:inline-flex;align-items:center;gap:7px;padding-left:10px;margin-left:4px;border-left:1px solid var(--rand)}
.sprachwahl svg{width:17px;height:17px;stroke:var(--text-leise);fill:none}
.sprachwahl select{
  font-family:inherit;font-size:15px;color:var(--text);
  background:var(--papier);border:1px solid var(--rand);
  border-radius:var(--radius-klein);padding:7px 8px;cursor:pointer
}
.sprach-hinweis{margin:0;font-size:14.5px;color:var(--gruen);text-align:right}
.sprach-hinweis:not(:empty){padding-bottom:10px}

/* Kleiner Mitmachen-Knopf in der Kopfzeile */
.kopf-cta{
  display:inline-flex;align-items:center;gap:8px;margin-left:8px;
  font-size:15.5px;font-weight:700;text-decoration:none;
  color:#fff;background:var(--signal);
  padding:10px 18px;border-radius:999px;white-space:nowrap
}
.kopf-cta:hover{background:var(--signal-dunkel);color:#fff}
.kopf-cta svg{width:15px;height:15px;stroke:#fff;fill:none}

/* ===================================================================
   KNÖPFE
   =================================================================== */
.knopf{
  display:inline-flex;align-items:center;justify-content:center;gap:11px;
  font-family:inherit;font-size:18px;font-weight:700;
  color:#fff;background:var(--signal);border:2px solid var(--signal);
  border-radius:999px;padding:15px 30px;cursor:pointer;text-decoration:none;
  box-shadow:0 10px 22px -14px rgba(192,67,42,.9);
  transition:background .15s ease, border-color .15s ease, transform .15s ease
}
.knopf:hover{background:var(--signal-dunkel);border-color:var(--signal-dunkel);color:#fff;transform:translateY(-1px)}
.knopf svg{width:19px;height:19px;stroke:#fff;fill:none;flex:0 0 auto}
.knopf.gross{font-size:20px;padding:18px 38px}
.knopf.breit{width:100%;max-width:460px}
.knopf.zweit{
  color:var(--gruen);background:transparent;border-color:var(--gruen);
  box-shadow:none;font-weight:600
}
.knopf.zweit:hover{background:var(--gruen);color:#fff;border-color:var(--gruen)}
.knopf.zweit svg{stroke:currentColor}
.knopf.hell{
  color:var(--tinte);background:var(--papier);border-color:var(--papier);box-shadow:none
}
.knopf.hell:hover{background:var(--sand-tief);border-color:var(--sand-tief);color:var(--tinte)}
.knopf.hell svg{stroke:currentColor}

/* ===================================================================
   HERO
   =================================================================== */
.hero{
  background:var(--sand);
  border-bottom:1px solid var(--rand);
  padding-bottom:34px;overflow:hidden
}
.hero-innen{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:56px;align-items:center;
  padding-top:64px;padding-bottom:64px
}
.hero .augbraue{
  display:inline-flex;align-items:center;gap:9px;
  margin:0 0 20px;padding:6px 14px 6px 10px;
  font-size:13.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gruen);background:var(--gruen-hell);border-radius:999px
}
.hero .augbraue svg{width:15px;height:15px;stroke:var(--gruen);fill:none}
.hero h1{font-size:40px;font-size:clamp(34px,4.4vw,54px);margin:0 0 20px;letter-spacing:-.022em}
.hero .slogan{
  font-size:21px;font-weight:600;line-height:1.5;color:var(--text);
  margin:0 0 14px;max-width:36ch
}
.hero .gruss{
  font-size:16.5px;line-height:1.6;color:var(--text-leise);
  margin:0 0 30px;max-width:46ch
}
.hero-knoepfe{display:flex;flex-wrap:wrap;gap:14px;margin:0 0 30px}
.hero-bild{position:relative}
.hero-bild img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--schatten-hoch)
}
/* kleine Marke unten links auf dem Bild */
.bild-notiz{
  position:absolute;left:14px;bottom:14px;
  background:rgba(255,255,255,.9);color:var(--tinte);
  font-size:12px;font-weight:600;padding:4px 10px;border-radius:999px;line-height:1.3
}

/* Drei Zusagen unter dem Hero */
.fakten{
  margin:0;padding:18px 0 0;border-top:1px solid var(--rand);
  list-style:none;display:flex;flex-wrap:wrap;gap:10px 32px;
  font-size:15.5px;color:var(--text-leise)
}
.fakten li{display:inline-flex;align-items:center;gap:9px}
.fakten svg{width:18px;height:18px;stroke:var(--gruen-mittel);fill:none;flex:0 0 auto}
.fakten strong{color:var(--tinte)}

/* ===================================================================
   ABSCHNITTE ALLGEMEIN
   =================================================================== */
.abs{padding:76px 0}
.abs.hell{background:var(--papier);border-top:1px solid var(--rand);border-bottom:1px solid var(--rand)}
.abs.getoent{background:var(--sand-tief)}
.abs.eng{padding:56px 0}

.abs-kopf{max-width:60ch;margin:0 0 40px}
.abs-kopf.mitte{margin-left:auto;margin-right:auto;text-align:center}
.abs-marke{
  display:block;margin:0 0 12px;
  font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--signal-dunkel)
}
.abs-kopf h2{font-size:30px;font-size:clamp(27px,3vw,37px);margin:0 0 14px;letter-spacing:-.018em}
.abs-kopf p{margin:0;font-size:19px;color:var(--text-leise);line-height:1.6}

/* ===================================================================
   AUSSAGE-BAND (dunkel, volle Breite)
   =================================================================== */
.band{
  background:var(--gruen);color:#eaf1ee;
  padding:64px 0;position:relative;overflow:hidden
}
.band-innen{position:relative;z-index:1;max-width:60ch}
.band p.gross{
  font-family:var(--titel);font-size:27px;font-size:clamp(24px,3.2vw,36px);line-height:1.3;
  color:#fff;margin:0 0 18px;letter-spacing:-.015em
}
.band p{font-size:18px;margin:0 0 16px;color:#d3e2dd}
.band p:last-child{margin-bottom:0}
.band strong{color:#fff}
.band a{color:#fff;text-decoration:underline}
.band :focus-visible{outline-color:#fff}
/* dezente Bildmarke als Kulisse rechts */
.band .kulisse{
  position:absolute;right:-40px;bottom:-40px;width:min(38%,420px);
  opacity:.10;pointer-events:none;z-index:0
}

/* ===================================================================
   MOTIVSTREIFEN (drei Bilder mit Bildunterschrift)
   =================================================================== */
.motive{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px
}
.motive figure{margin:0}
.motive img{
  display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;
  border-radius:var(--radius);box-shadow:var(--schatten)
}
.motive figcaption{margin:14px 2px 0}
.motive .m-titel{
  display:block;font-family:var(--titel);font-size:20px;font-weight:700;
  color:var(--tinte);margin-bottom:4px
}
.motive .m-text{display:block;font-size:16px;color:var(--text-leise);line-height:1.55}

/* Die drei Kacheln sind seit dem 02.09.2026 Verweise auf je eine
   Themenseite. Verlinkt ist die ganze Kachel — Bild, Titel und Text —,
   damit die Trefferflaeche gross ist; der Titel traegt die sichtbare
   Verweisauszeichnung, das Bild bleibt ohne Unterstreichung.
   `m-mehr` ist die Zeile, die die Kachel als Verweis zu erkennen gibt.
   Ohne sie sieht ein Bild mit Unterschrift nicht nach Verweis aus, und
   ein Verweis, den niemand als solchen erkennt, ist keiner. */
.motive a.kachel{display:block;color:inherit;text-decoration:none;border-radius:var(--radius)}
.motive a.kachel img{transition:box-shadow .18s ease}
.motive a.kachel:hover img,
.motive a.kachel:focus-visible img{box-shadow:var(--schatten-hoch)}
.motive a.kachel:hover .m-titel,
.motive a.kachel:focus-visible .m-titel{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.motive a.kachel:focus-visible{outline:3px solid var(--gruen);outline-offset:5px}
.motive .m-mehr{
  display:inline-flex;align-items:center;gap:7px;margin-top:11px;
  font-size:15.5px;font-weight:600;color:var(--gruen)
}
/* Pfeil als Zeichen, nicht als Grafik: eine Maske braeuchte eine
   Data-URI, ein Bild einen zweiten Aufruf. Das Zeichen skaliert mit der
   Schrift und ist per aria-hidden nicht noetig — es steht in einem
   ::after und wird von Screenreadern ohnehin nicht vorgelesen. */
.motive .m-mehr::after{
  content:"\2192";font-size:1.05em;line-height:1;
  transition:transform .18s ease
}
.motive a.kachel:hover .m-mehr::after,
.motive a.kachel:focus-visible .m-mehr::after{transform:translateX(3px)}
@media (prefers-reduced-motion: reduce){
  .motive a.kachel img,.motive .m-mehr::after{transition:none}
  .motive a.kachel:hover .m-mehr::after{transform:none}
}

/* Breites Bildband über die volle Seitenbreite.
   object-position: Das Band ist höchstens 340 px hoch, läuft aber über die
   volle Fensterbreite — bei 1920 px ist der sichtbare Ausschnitt 5,6:1, die
   Datei hat 3:1. Sichtbar sind dann nur 53 % der Bildhöhe. Mittig zentriert
   (die Voreinstellung) schneidet das den Kopf des Rheinturms ab. 20 % rückt
   den Streifen nach oben: Der Turm bleibt auf jeder Breite vollständig,
   weggeschnitten wird stattdessen unten, wo Pflaster liegt.
   Begründung und Prüfblatt: Bildstimmungen/Entwuerfe/band_fertigstellen.py
   Waagerecht (Stand 10.09.2026): 84 % statt 50 %. Auf breiten Fenstern ist
   die ganze Bildbreite sichtbar, der Wert wirkt dort nicht. Auf dem Telefon
   (390 px breit, 200 px hoch) sind nur rund zwei Drittel der Breite sichtbar —
   mittig zentriert war das vor allem Dunst und Brücke. 84 % legt den
   Ausschnitt auf Landtag, Rheinturm und die Hafengebäude. */
.bildband{position:relative;line-height:0;background:var(--sand-tief)}
.bildband img{width:100%;height:240px;height:clamp(200px,26vw,340px);object-fit:cover;
              object-position:84% 20%;display:block}

/* ===================================================================
   MITMACHEN — Codeeingabe
   =================================================================== */
.mitmachen{background:var(--sand-tief);padding:80px 0;border-top:1px solid var(--rand)}
.mitmach-karte{
  background:var(--papier);border:1px solid var(--rand);
  border-radius:var(--radius);box-shadow:var(--schatten-hoch);
  overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)
}
.mitmach-links{padding:44px 46px}
.mitmach-rechts{
  padding:44px 40px;background:var(--sand);border-left:1px solid var(--rand-hell);
  display:flex;flex-direction:column
}
.mitmach-notiz{
  margin:36px 0 0;padding-top:22px;border-top:1px solid var(--rand);
  font-size:15.5px;color:var(--text-leise);line-height:1.6
}
.mitmach-notiz strong{color:var(--tinte);display:block;margin-bottom:3px}
.mitmach-notiz a{display:inline-block;margin-top:6px;font-weight:700}
.mitmach-links h2{font-size:28px;font-size:clamp(26px,2.6vw,33px);margin:0 0 12px;letter-spacing:-.018em}
.mitmach-links .einleitung{margin:0 0 26px;font-size:18px;color:var(--text-leise);max-width:46ch}

label.feld-label{
  display:block;font-weight:700;font-size:17px;color:var(--tinte);
  margin-bottom:6px;font-family:var(--sans)
}
.hinweis-klein{font-size:15px;color:var(--text-leise);margin:0 0 14px;max-width:52ch}
#code{
  width:100%;max-width:460px;display:block;
  font-family:var(--mono);font-size:30px;letter-spacing:.16em;font-weight:700;
  color:var(--tinte);padding:16px 18px;background:var(--papier);
  border:2px solid var(--gruen-mittel);border-radius:var(--radius-klein)
}
#code:focus{border-color:var(--gruen)}
#code::placeholder{color:#c2bbb0;letter-spacing:.16em;opacity:1;font-weight:400}
#code[aria-invalid="true"]{border-color:var(--fehler);background:#fdf5f2}
.meldung{margin:12px 0 0;font-size:16px;min-height:1.6em}
.meldung.fehler{color:var(--fehler);font-weight:700}
.meldung.ok{color:var(--erfolg);font-weight:700}
#kennung-form .knopf{margin-top:18px}

/* --- Codefeld als Abbildung, ohne Funktion -------------------------------
   Seit 30.08.2026 wird der Zugangscode ausschliesslich im Fragebogen
   abgefragt (Fragebogen/CLAUDE.md, Punkt 13). Das Feld bleibt hier nur
   als Bild stehen, damit wiedererkannt wird, was das Anschreiben
   ankuendigt. Bewusst kein <input>: Was aussieht wie ein Feld und nichts
   annimmt, aergert. Was aussieht wie ein Abdruck, erklaert sich. */
.code-abbild{
  width:100%;max-width:460px;margin:0;
  font-family:var(--mono);font-size:30px;letter-spacing:.16em;font-weight:400;
  color:#c2bbb0;padding:16px 18px;background:var(--papier);
  border:2px dashed var(--gruen-mittel);border-radius:var(--radius-klein);
  -webkit-user-select:none;user-select:none
}
#muster-zeile{white-space:nowrap}
.code-nachsatz{margin:12px 0 0;font-size:15px;color:var(--text-leise);max-width:52ch}
.mitmach-links > .knopf.breit{margin-top:18px}

.kein-konto{
  margin:26px 0 0;padding:16px 18px;
  background:var(--gruen-hell);border-radius:var(--radius-klein);
  font-size:15.5px;color:var(--text);line-height:1.6
}
.kein-konto strong{color:var(--gruen)}
/* Zielpersonenregel (Last Birthday). Steht VOR dem Knopf, weil sie
   gelesen sein muss, bevor jemand den Bogen oeffnet — und ist deshalb
   mit dem Signalton abgesetzt statt in Gruen wie der Nachbarkasten. */
.kein-konto.zielperson{margin-top:20px;background:var(--signal-zart)}
.kein-konto.zielperson strong{color:var(--signal-dunkel)}
.kennung-fuss{
  margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rand-hell);
  font-size:15.5px;color:var(--text-leise)
}

/* rechte Spalte: was danach passiert */
.ablauf-mini{list-style:none;margin:0;padding:0;counter-reset:am}
.ablauf-mini li{
  counter-increment:am;position:relative;padding:0 0 22px 46px;font-size:16px
}
.ablauf-mini li::before{
  content:counter(am);position:absolute;left:0;top:-2px;
  width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:16px;font-weight:700;
  color:#fff;background:var(--gruen-mittel)
}
.ablauf-mini li::after{
  content:"";position:absolute;left:15.5px;top:36px;bottom:4px;width:1px;background:var(--rand)
}
.ablauf-mini li:last-child{padding-bottom:0}
.ablauf-mini li:last-child::after{display:none}
.ablauf-mini > li > strong{display:block;color:var(--tinte);font-size:17px;margin-bottom:2px}
/* Hervorhebung INNERHALB der Erlaeuterung bleibt im Textfluss —
   sonst reisst die Zielpersonenregel den Satz auseinander. */
.ablauf-mini span strong{display:inline;color:var(--tinte);font-size:inherit}
.ablauf-mini span{color:var(--text-leise)}
.mitmach-rechts h3{font-size:21px;margin:0 0 22px}

/* ---- Erklaervideo, eigene Zeile ueber beide Spalten der Mitmach-Karte ----
   Eingefuegt 15.09.2026. Das Video liegt bewusst NICHT in der rechten Spalte:
   die ist rund 410 px breit, darin waeren Zugangscode und Fragebogenseiten
   im Video nicht mehr lesbar. Ueberschrift, Vorspann, Video und Volltext
   stehen in derselben 820-px-Spalte, damit nichts versetzt wirkt. */
.mitmach-video{
  grid-column:1 / -1;
  margin:0;
  padding:38px 46px 42px;
  background:var(--papier);
  border-top:1px solid var(--rand)
}
.mitmach-video > *{max-width:820px;margin-left:auto;margin-right:auto}
.mitmach-video h3{font-size:21px;margin:0 auto 6px}
.video-vorspann{
  margin:0 auto 22px;
  font-size:15.5px;line-height:1.6;color:var(--text-leise)
}
.mitmach-video video{
  display:block;width:100%;max-width:820px;height:auto;margin:0 auto;
  background:var(--sand);
  border:1px solid var(--rand);
  border-radius:calc(var(--radius) - 4px)
}
.mitmach-video figcaption{
  margin:16px auto 0;max-width:820px;
  font-size:14.5px;line-height:1.6;color:var(--text-leise)
}
.video-volltext summary{
  cursor:pointer;font-weight:700;color:var(--gruen);
  padding:8px 0;list-style-position:outside
}
.video-volltext summary:focus-visible{outline:2px solid var(--gruen);outline-offset:3px}
.video-volltext p{margin:0 0 10px}
.video-volltext em{color:var(--text-leise);font-style:italic}

/* ===================================================================
   ZWEISPALTIGER KURZTEXT („Warum Sie?")
   =================================================================== */
.doppel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:44px 56px}
.doppel h3{font-size:22px;margin:0 0 10px}
.doppel p{margin:0 0 14px;font-size:17.5px;line-height:1.65}
.doppel p:last-child{margin-bottom:0}
.doppel .num{
  display:block;font-family:var(--titel);font-size:15px;font-weight:700;
  color:var(--signal);letter-spacing:.1em;margin-bottom:8px
}

/* ===================================================================
   VERTRAUENSBLOCK („Was diese Befragung nicht ist")
   =================================================================== */
.sicher{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.sicher li{
  display:flex;gap:15px;align-items:flex-start;
  padding:20px 22px;background:var(--papier);
  border:1px solid var(--rand-hell);border-radius:var(--radius);
  font-size:16.5px;line-height:1.55
}
.sicher .haken{
  flex:0 0 auto;width:26px;height:26px;border-radius:50%;
  background:var(--gruen-hell);display:flex;align-items:center;justify-content:center;margin-top:1px
}
.sicher .haken svg{width:15px;height:15px;stroke:var(--gruen);fill:none;stroke-width:2.6}
.sicher strong{color:var(--tinte)}

/* ===================================================================
   WEGE — Kacheln zu den Unterseiten
   =================================================================== */
.wege{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
a.weg{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--papier);border:1px solid var(--rand);
  border-radius:var(--radius);padding:26px 26px 22px;
  transition:border-color .15s ease, box-shadow .15s ease, transform .15s ease
}
a.weg:hover{border-color:var(--gruen-mittel);box-shadow:var(--schatten);transform:translateY(-2px)}
a.weg .weg-symbol{
  width:44px;height:44px;border-radius:12px;background:var(--gruen-hell);
  display:flex;align-items:center;justify-content:center;margin-bottom:16px
}
a.weg .weg-symbol svg{width:23px;height:23px;stroke:var(--gruen);fill:none}
a.weg h3{font-size:20px;margin:0 0 7px}
a.weg p{margin:0;font-size:16px;color:var(--text-leise);line-height:1.55}
a.weg .mehr{
  display:inline-flex;align-items:center;gap:7px;margin-top:auto;padding-top:18px;
  font-size:15.5px;font-weight:700;color:var(--gruen)
}
a.weg .mehr svg{width:15px;height:15px;stroke:currentColor;fill:none}
a.weg:hover .mehr{color:var(--signal-dunkel)}

/* ===================================================================
   NEUIGKEITEN
   =================================================================== */
/* Fassung vom 04.09.2026. Vorher standen hier drei gleich grosse
   Spalten mit Datum und einem Satz — sachlich richtig, aber ohne
   Rangfolge: Alles war gleich wichtig, also wirkte nichts wichtig.
   Jetzt traegt die juengste Meldung eine eigene Karte, die uebrigen
   stehen als knappe Liste daneben. Weiterhin ohne Bilder: Das Portal
   soll auch bei langsamer Verbindung sofort lesbar sein. */
.neu-kopf{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin:0 0 34px}
.neu-kopf > div{max-width:60ch}
.neu-kopf h2{font-size:30px;font-size:clamp(27px,3vw,37px);margin:0;letter-spacing:-.018em}
.neu-kopf .knopf{flex:0 0 auto}

.neu-band{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:34px;align-items:start}

.neu-haupt{
  display:block;padding:28px 30px 26px;background:var(--sand);
  border:1px solid var(--rand);border-radius:14px;
  border-top:4px solid var(--signal);
  text-decoration:none;color:inherit;
  transition:border-color .15s,transform .15s,box-shadow .15s
}
.neu-haupt:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(27,26,23,.08);border-color:var(--gruen-mittel);border-top-color:var(--signal)}
.neu-haupt .zeile{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.neu-haupt .marke{
  display:inline-block;padding:3px 11px;border-radius:2em;background:var(--signal);
  color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase
}
.neu-haupt .datum{font-size:14.5px;font-weight:700;letter-spacing:.05em;color:var(--text-leise);font-variant-numeric:tabular-nums}
.neu-haupt h3{font-size:24px;line-height:1.28;margin:0 0 10px;letter-spacing:-.012em}
.neu-haupt p{margin:0 0 16px;font-size:17px;line-height:1.58;color:var(--text)}
.neu-haupt .mehr{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:16.5px;color:var(--gruen)}
.neu-haupt .mehr svg{width:17px;height:17px;stroke:currentColor;fill:none}
.neu-haupt:hover .mehr svg{transform:translateX(3px);transition:transform .15s}

.neu-liste{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:0}
.neu-liste li{padding:0 0 16px;margin:0 0 16px;border-bottom:1px solid var(--rand)}
.neu-liste li:last-child{padding-bottom:0;margin-bottom:0;border-bottom:0}
.neu-liste a{display:block;text-decoration:none;color:inherit}
.neu-liste a:hover h3{color:var(--gruen);text-decoration:underline;text-underline-offset:3px}
.neu-liste .datum{
  display:block;margin:0 0 5px;font-size:13.5px;font-weight:700;
  letter-spacing:.06em;color:var(--signal);font-variant-numeric:tabular-nums
}
.neu-liste h3{font-size:18px;line-height:1.38;margin:0 0 4px;letter-spacing:-.008em}
.neu-liste p{margin:0;font-size:16px;line-height:1.5;color:var(--text-leise)}
.neu-fuss{margin:32px 0 0}

/* ===================================================================
   ANSPRECHPARTNER
   =================================================================== */
.person-gross{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  gap:32px;align-items:center;
  background:var(--papier);border:1px solid var(--rand);
  border-radius:var(--radius);padding:32px 36px
}
.person-gross img{
  width:104px;height:104px;border-radius:50%;object-fit:cover;
  border:3px solid var(--papier);box-shadow:0 0 0 1px var(--rand)
}
.person-gross .name{display:block;font-family:var(--titel);font-size:23px;font-weight:700;color:var(--tinte)}
.person-gross .rolle{display:block;color:var(--text-leise);font-size:16px;margin-bottom:10px}
.person-gross .tel{
  font-size:22px;font-weight:700;color:var(--gruen);text-decoration:none;
  font-variant-numeric:tabular-nums;display:inline-block;margin-right:16px
}
.person-gross .tel:hover{text-decoration:underline}
.person-gross .mail{font-size:16.5px;color:var(--gruen);display:inline-block}
.person-gross .zeiten{margin:6px 0 0;font-size:15px;color:var(--text-leise)}
.warnung{
  margin:26px 0 0;padding:18px 20px;max-width:78ch;
  background:var(--signal-zart);border-left:4px solid var(--signal);
  border-radius:0 var(--radius-klein) var(--radius-klein) 0;
  font-size:16px;line-height:1.6
}
.warnung strong{color:var(--signal-dunkel)}

/* Persönlicher Absatz der Studienleitung auf der Startseite */
.person-text{max-width:62ch;margin:0 0 34px}
.person-text p{margin:0 0 16px;font-size:17.5px;line-height:1.65}
.person-text p:first-child{
  font-family:var(--titel);font-size:20px;line-height:1.5;color:var(--tinte);
  padding-left:20px;border-left:3px solid var(--gruen-mittel)
}
.person-text .knopf{margin-top:6px}

/* Verweis auf die Studienleitung im Ansprechpartner-Kasten */
.kontakt .mehr-link{margin:10px 0 0;font-size:15.5px}
.kontakt .mehr-link a{font-weight:700}

/* ===================================================================
   ABSCHLUSSAUFRUF
   =================================================================== */
.schluss{
  background:var(--tinte);color:#e8e4dc;padding:70px 0;text-align:center
}
.schluss h2{color:#fff;font-size:30px;font-size:clamp(27px,3.2vw,40px);margin:0 0 14px;letter-spacing:-.018em}
.schluss p{margin:0 auto 30px;font-size:19px;max-width:46ch;color:#c9c3b8}
.schluss :focus-visible{outline-color:#fff}

/* ===================================================================
   FUSSZEILE
   =================================================================== */
.fuss{background:var(--tinte);color:#a9a49a;border-top:1px solid rgba(255,255,255,.09)}
.fuss-innen{display:flex;flex-wrap:wrap;align-items:center;gap:14px 30px;padding-top:30px;padding-bottom:30px}
.fuss .copy{font-size:15px;margin:0;line-height:1.6}
.fuss nav{margin-left:auto;display:flex;flex-wrap:wrap;gap:10px 30px}
.fuss a{color:#ded9d1;font-size:15px;text-decoration:none;padding:4px 0;display:inline-block}
.fuss a:hover{text-decoration:underline;color:#fff}
.fuss :focus-visible{outline-color:#fff}

/* ===================================================================
   NACH-OBEN-KNOPF (eingefügt von nach-oben.js, nur auf langen Seiten)
   Grün, nicht Signalrot — das Rot gehört allein dem Mitmachen.
   =================================================================== */
.nach-oben{
  position:fixed;right:22px;bottom:22px;z-index:90;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:50px;height:50px;padding:0 16px;border-radius:999px;
  background:var(--gruen);color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:700;letter-spacing:.01em;
  box-shadow:0 10px 24px -10px rgba(20,82,74,.75);
  opacity:0;visibility:hidden;transform:translateY(12px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s,background .15s ease
}
.nach-oben.sichtbar{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nach-oben:hover{background:var(--gruen-tief,#0f3f39);color:#fff}
.nach-oben:focus-visible{outline:3px solid var(--tinte);outline-offset:3px}
.nach-oben svg{width:20px;height:20px;flex:0 0 auto}
@media (max-width:760px){
  .nach-oben{right:16px;bottom:16px;width:50px;padding:0}
  .nach-oben .nach-oben-text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}
@media (prefers-reduced-motion: reduce){ .nach-oben{transition:none} }
@media print{ .nach-oben{display:none} }

/* ===================================================================
   MOBIL
   =================================================================== */
@media (max-width:1040px){
  .hero-innen{grid-template-columns:1fr;gap:38px;padding-top:44px;padding-bottom:48px}
  .hero-bild{order:-1}
  .hero .slogan,.hero .gruss{max-width:none}
  .mitmach-karte{grid-template-columns:1fr}
  .mitmach-rechts{border-left:0;border-top:1px solid var(--rand-hell)}
  .motive{grid-template-columns:1fr 1fr}
  .wege{grid-template-columns:1fr 1fr}
  .neu-band{grid-template-columns:1fr;gap:28px}
  .neu-kopf{flex-direction:column;align-items:flex-start;gap:18px}
}
@media (max-width:760px){
  body{font-size:17px}
  .bereich{padding:0 20px}
  .abs{padding:52px 0}
  .mitmachen{padding:52px 0}
  .band{padding:48px 0}
  .schluss{padding:52px 0}
  /* Kopfzeile mobil: Zeile 1 = Marke + Mitmachen, Zeile 2 = Servicemenü.
     Beide bleiben mitlaufend, verbrauchen aber nur rund 96 px Höhe.   */
  .kopf-innen{flex-wrap:wrap;min-height:0;gap:8px 12px;padding-top:8px;padding-bottom:6px}
  .kopf .marke{order:1;flex:1 1 56%;min-width:0;gap:10px}
  .kopf-cta{order:2;margin-left:auto;padding:9px 15px;font-size:15px}
  .kopf-nav{order:3;margin-left:0;width:100%;gap:0;justify-content:space-between;
            border-top:1px solid var(--rand-hell);padding-top:5px}
  .kopf-nav a{padding:8px 6px;font-size:14.5px;gap:6px}
  .sprachwahl{border-left:0;padding-left:0;margin-left:0}
  .sprachwahl svg{display:none}
  .sprachwahl select{font-size:13.5px;padding:6px 4px;max-width:124px}
  .sprach-hinweis{text-align:left;line-height:1.5}
  .marke img{height:28px}
  .marke-text .zeile1{font-size:14.5px}
  .marke-text .zeile2{font-size:10.5px}
  [id]{scroll-margin-top:110px}
  .hero .slogan{font-size:19.5px}
  .hero .gruss{font-size:16px}
  .hero-knoepfe .knopf{width:100%}
  .motive{grid-template-columns:1fr;gap:26px}
  .wege{grid-template-columns:1fr}
  .doppel{grid-template-columns:1fr;gap:32px}
  .sicher{grid-template-columns:1fr}
  .mitmach-links,.mitmach-rechts{padding:28px 22px}
  .mitmach-video{padding:30px 22px 34px}
  #code,.code-abbild{font-size:24px;letter-spacing:.12em}
  .person-gross{grid-template-columns:1fr;text-align:left;gap:18px;padding:26px 22px}
  .person-gross img{width:84px;height:84px}
  .fuss nav{margin-left:0;width:100%;gap:12px 38px;padding-top:8px}
  .fuss-innen{gap:14px;padding-top:32px;padding-bottom:36px}
  .fuss a{padding:6px 0}

  /* Umbrüche: Silbentrennung im Fließtext, lange Adressen dürfen brechen,
     Überschriften bleiben ohne Trennstrich. */
  p,li,dd,td,.gruss,.slogan{hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:8 4 4}
  h1,h2,h3,h4,.marke-text,.knopf,.kopf-cta,.abs-marke,.augbraue{hyphens:manual;-webkit-hyphens:manual}
  a[href^="mailto:"],a[href^="http"],.mailadresse,code,.mono,.daten dd,dl.fakten dd{overflow-wrap:anywhere}

  /* Untereinander gestellte Knöpfe brauchen mehr Abstand als nebeneinander. */
  .hero-knoepfe{gap:18px;margin-bottom:34px}
  .werkzeuge,.faq-werkzeuge{gap:16px}
  .hero-knoepfe .knopf,.werkzeuge .knopf,.werkzeuge .knopf-schlank{padding-top:16px;padding-bottom:16px}
  .fakten{gap:14px 28px;padding-top:22px}

  /* Textabstände */
  p{margin-bottom:1.15em}
  .abs-kopf{margin-bottom:32px}
  .abs-kopf p{font-size:18px}
  .hero .gruss{margin-bottom:32px}
  .hero h1{margin-bottom:22px}
  .band p{margin-bottom:20px}
  .bild-notiz{left:12px;bottom:12px;font-size:11.5px;padding:4px 9px}
  .hero .augbraue{font-size:12.5px;padding:5px 12px 5px 9px;margin-bottom:18px}
}


/* ===================================================================
   ÄLTERE BROWSER (iOS 12/13, Safari bis 14.0, Chrome bis 83)
   Diese Browser kennen `gap` nur im Grid, nicht im Flex-Layout — und
   fast jeder Abstand dieses Portals ist ein Flex-`gap`. Ohne Fallback
   kleben dort Logo und Schriftzug, Symbol und Text, Knopf an Knopf,
   und die Fußzeilenlinks werden zu einem Wort. Erkannt wird das über
   `aspect-ratio`, das erst Safari 15 / Chrome 88 kennen; moderne
   Browser überspringen den Block. Die Werte entsprechen den `gap`-
   Angaben oben, als Außenabstände nachgebaut. Stand: 10.09.2026.
   =================================================================== */
@supports not (aspect-ratio: 1 / 1){
  /* Kopfzeile */
  .marke img{margin-right:13px;align-self:center}
  .marke-text{align-self:center}
  .kopf-nav a svg{margin-right:7px;align-self:center}
  .kopf-nav a{margin-right:4px}
  .sprachwahl svg{margin-right:7px}
  .kopf-cta{margin-left:14px}
  .kopf-cta svg{margin-left:8px;align-self:center}
  /* Hero */
  .hero .augbraue svg{margin-right:9px;align-self:center;vertical-align:middle}
  .hero .augbraue > span{align-self:center}
  .hero-knoepfe > *{margin-right:14px;margin-bottom:14px}
  .hero-knoepfe{margin-bottom:16px}
  .knopf svg{margin-left:11px;align-self:center}
  .fakten li{margin:0 32px 12px 0}
  .fakten svg{margin-right:10px;align-self:center}
  /* Startseite: Wege, Neuigkeiten, Person */
  .weg .mehr svg,.m-mehr svg{margin-left:6px}
  .m-mehr::after{margin-left:6px}
  /* Fußzeile */
  .fuss .copy{margin-right:30px;margin-bottom:12px}
  .fuss nav a{margin-right:30px;margin-bottom:8px}
  .fuss nav a:last-child{margin-right:0}
  /* Merklisten, Werkzeuge, Rückweg */
  .werkzeuge > *,.faq-werkzeuge > *{margin-right:12px;margin-bottom:12px}
  .merkliste a svg,.karte-kopf svg{margin-right:10px}
  .zurueck a.knopf-schlank svg{margin-left:8px}
  .nach-oben svg{margin-right:0}
  .nach-oben .nach-oben-text{margin-left:8px}
}
@media (max-width:760px){
  @supports not (aspect-ratio: 1 / 1){
    .marke img{margin-right:10px}
    .kopf-cta{margin-left:auto;margin-top:4px;margin-bottom:4px}
    .kopf-nav{margin-top:8px}
    .hero-knoepfe > *{margin-right:0;margin-bottom:18px}
    .hero-knoepfe{margin-bottom:16px}
    .fakten li{margin:0 0 14px 0}
    .fuss .copy{margin-right:0;margin-bottom:14px}
    .fuss nav{margin-top:8px}
    .fuss nav a{margin-right:38px;margin-bottom:12px}
    .werkzeuge > *,.faq-werkzeuge > *{margin-right:0;margin-bottom:16px}
  }
}

/* ===================================================================
   DRUCK
   =================================================================== */
@media print{
  body{background:#fff;font-size:11.5pt;color:#000}
  .kopf{position:static;background:#fff}
  .kopf-nav,.kopf-cta,.hero-knoepfe,.knopf,.sprung,.bildband,.schluss{display:none}
  .abs,.mitmachen,.band{padding:18pt 0;background:#fff;color:#000}
  /* Ein Video auf Papier ist ein leeres Rechteck; der Volltext bleibt. */
  .mitmach-video video{display:none}
  .video-volltext summary{display:none}
  .video-volltext[open] p,.video-volltext p{display:block}
  .band p.gross,.band p,.band strong{color:#000}
  .mitmach-karte,a.weg,.sicher li,.person-gross{border:1px solid #999;box-shadow:none;break-inside:avoid}
  .fuss{background:#fff;color:#000}
  .fuss a{color:#000}
  .motive img,.hero-bild img{box-shadow:none;border:1px solid #ccc}
}

/* ===================================================================
   UNTERSEITEN
   Die vorhandenen Inhaltsseiten (studie.html, daten.html, technik.html …)
   verwenden dieselben Klassennamen wie bisher. Alles ab hier hält sie
   lauffähig und überträgt die neue Farb- und Formsprache auf sie.
   =================================================================== */

/* Seitenkopf mit Brotkrumen */
.seitenkopf{background:var(--sand-tief);border-bottom:1px solid var(--rand);padding:34px 0 40px}
.krumen{margin:0 0 14px;font-size:15px;color:var(--text-leise)}
.krumen ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;gap:7px}
.krumen li{display:inline-flex;align-items:center;gap:7px}
.krumen li+li::before{content:"›";color:var(--rand)}
.krumen a{color:var(--gruen);text-decoration:none}
.krumen a:hover{text-decoration:underline}
.krumen [aria-current]{color:var(--text-leise)}
.seitenkopf h1{font-size:32px;font-size:clamp(28px,3.6vw,42px);margin:0;letter-spacing:-.02em}
.seitenkopf .unterzeile{margin:12px 0 0;font-size:19px;color:var(--text-leise);max-width:60ch}

.haupt{padding:48px 0 64px}
.unterraster{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:34px;align-items:start}
.spalte-neben{display:flex;flex-direction:column;gap:22px;position:sticky;top:96px}

/* Karten */
.karte{
  background:var(--papier);border:1px solid var(--rand);
  border-radius:var(--radius);display:flex;flex-direction:column;min-width:0
}
.karte-kopf{
  padding:20px 30px;border-bottom:1px solid var(--rand-hell);
  display:flex;align-items:center;gap:13px;flex:0 0 auto
}
.karte-kopf h2{font-size:22px}
.karte-kopf svg{width:21px;height:21px;stroke:var(--gruen);fill:none;flex:0 0 auto}
.karte-koerper{padding:32px 34px;flex:1 1 auto;min-width:0}

/* Fließtext */
.text{max-width:68ch}
.text h2{font-size:27px;margin:0 0 14px;letter-spacing:-.015em}
.text h2+p,.text h2+ul,.text h2+ol,.text h2+.hinweiskasten,.text h2+dl{margin-top:0}
.text h3{font-size:21px;margin:30px 0 9px}
.text p{margin:0 0 17px}
.text p:last-child,.text ul:last-child,.text ol:last-child{margin-bottom:0}
.text ul,.text ol{margin:0 0 17px;padding-left:24px}
.text li{margin-bottom:9px}
.text li:last-child{margin-bottom:0}
.text a{color:var(--gruen)}
.text strong{color:var(--tinte)}
.abschnitt+.abschnitt{margin-top:36px;padding-top:34px;border-top:1px solid var(--rand-hell)}

/* Häkchenliste */
ul.haken{list-style:none;padding-left:0;margin:0 0 17px}
ul.haken li{position:relative;padding-left:32px;margin-bottom:11px}
ul.haken li::before{
  content:"";position:absolute;left:3px;top:.42em;width:15px;height:9px;
  border-left:2.5px solid var(--gruen);border-bottom:2.5px solid var(--gruen);
  transform:rotate(-45deg)
}

/* Hinweiskasten */
.hinweiskasten{
  margin:0 0 20px;padding:18px 20px;background:var(--gruen-hell);
  border-left:4px solid var(--gruen-mittel);
  border-radius:0 var(--radius-klein) var(--radius-klein) 0;font-size:16.5px
}
.hinweiskasten p{margin:0 0 11px}
.hinweiskasten p:last-child{margin-bottom:0}
.hinweiskasten .kasten-titel{display:block;font-weight:700;color:var(--gruen);margin-bottom:5px}
.hinweiskasten.neutral{background:var(--sand-tief);border-left-color:var(--rand)}
.hinweiskasten.neutral .kasten-titel{color:var(--tinte)}

/* E-Mail-Block */
.mailblock{
  display:flex;flex-wrap:wrap;align-items:center;gap:16px;
  margin:0 0 22px;padding:20px 22px;
  background:var(--sand-tief);border-radius:var(--radius)
}
.mailblock svg{width:26px;height:26px;stroke:var(--gruen);fill:none;flex:0 0 auto}
.mailblock .mailadresse{font-size:20px;font-weight:700;color:var(--gruen);text-decoration:none;word-break:break-word}
.mailblock .mailadresse:hover{text-decoration:underline}
.mailblock .maildazu{display:block;font-size:15px;color:var(--text-leise);margin-top:2px}

/* Definitionsliste */
.daten{margin:0;font-size:16.5px}
.daten div{
  display:grid;grid-template-columns:minmax(130px,34%) 1fr;gap:4px 20px;
  padding:12px 0;border-bottom:1px solid var(--rand-hell)
}
.daten div:last-child{border-bottom:0}
.daten dt{color:var(--text-leise)}
.daten dd{margin:0;color:var(--text)}

/* Sprungliste in der Seitenspalte */
.merkliste{list-style:none;margin:0;padding:0}
.merkliste li{border-bottom:1px solid var(--rand-hell)}
.merkliste li:last-child{border-bottom:0}
.merkliste a{
  display:flex;gap:11px;align-items:center;padding:14px 30px;
  text-decoration:none;color:var(--tinte);font-size:16px
}
.merkliste a:hover{background:var(--gruen-hell);color:var(--gruen)}
.merkliste svg{width:15px;height:15px;stroke:var(--gruen);fill:none;flex:0 0 auto}

/* Kontaktkarte in der Seitenspalte der Unterseiten */
.kontakt .karte-koerper{display:flex;flex-direction:column}
.kontakt p{margin:0 0 7px;font-size:16.5px}
.person{display:flex;gap:16px;align-items:center;margin-bottom:18px}
.person img{
  width:78px;height:78px;flex:0 0 auto;border-radius:50%;object-fit:cover;
  border:3px solid var(--papier);box-shadow:0 0 0 1px var(--rand)
}
.person .name{display:block;font-family:var(--titel);font-weight:700;color:var(--tinte);font-size:19px;margin:0 0 2px;line-height:1.25}
.person .rolle{display:block;color:var(--text-leise);font-size:15px;margin:0;line-height:1.35}
.kontakt .zeiten{color:var(--text-leise);font-size:15px}
.kontakt .tel{
  font-size:21px;font-weight:700;color:var(--gruen);
  font-variant-numeric:tabular-nums;display:inline-block;margin:0 0 2px;text-decoration:none
}
.kontakt .tel:hover{text-decoration:underline}
.kontakt .warnung{margin-top:auto}

/* Akzentband der alten Fassung: im neuen Entwurf ohne Funktion */
.akzentband{display:none}

/* Zurück-zum-Portal-Leiste */
.zurueck{
  margin-top:38px;padding:22px 26px;
  background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius);
  display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px
}
.zurueck p{margin:0;font-size:17px;color:var(--text-leise)}
.zurueck a.knopf-schlank{
  margin-left:auto;display:inline-flex;align-items:center;gap:10px;
  font-size:16.5px;font-weight:700;text-decoration:none;color:#fff;
  background:var(--signal);border-radius:999px;padding:13px 24px
}
.zurueck a.knopf-schlank:hover{background:var(--signal-dunkel);color:#fff}
.zurueck svg{width:16px;height:16px;stroke:currentColor;fill:none}

/* Suche und FAQ (Hilfecenter) */
.suche{margin:0 0 8px}
.suche-zeile{position:relative;display:flex;align-items:center}
.suche-zeile svg.lupe{position:absolute;left:16px;width:20px;height:20px;stroke:var(--text-leise);fill:none;pointer-events:none}
#suchfeld{
  width:100%;font-family:inherit;font-size:17.5px;color:var(--tinte);
  padding:14px 46px 14px 46px;background:var(--papier);
  border:1px solid var(--rand);border-radius:999px
}
#suchfeld:focus{border-color:var(--gruen)}
#suchfeld::placeholder{color:#a49d92;opacity:1}
#suchfeld::-webkit-search-cancel-button,#suchfeld::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.suche-loeschen{
  position:absolute;right:8px;display:none;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;cursor:pointer;background:none;border:0;border-radius:50%
}
.suche-loeschen svg{width:16px;height:16px;stroke:var(--text-leise);fill:none}
.suche-loeschen:hover{background:var(--sand-tief)}
.suche-loeschen.sichtbar{display:inline-flex}
.suche-status{margin:12px 0 0;font-size:16px;color:var(--text-leise);min-height:1.5em}
.suche-status strong{color:var(--tinte)}

.faq{margin:0;border-top:1px solid var(--rand-hell)}
.faq details{border-bottom:1px solid var(--rand-hell)}
.faq details[hidden]{display:none}
.faq summary{
  list-style:none;cursor:pointer;display:flex;gap:15px;align-items:flex-start;
  padding:18px 4px;font-family:var(--titel);font-size:19px;font-weight:700;color:var(--tinte)
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--gruen)}
.faq summary .pfeil{width:18px;height:18px;flex:0 0 auto;margin-top:6px;stroke:var(--gruen);fill:none;transition:transform .15s ease}
.faq details[open] summary .pfeil{transform:rotate(90deg)}
.faq .antwort{padding:0 4px 22px 37px;max-width:66ch}
.faq .antwort p{margin:0 0 15px}
.faq .antwort p:last-child,.faq .antwort ul:last-child{margin-bottom:0}
.faq .antwort ul{margin:0 0 15px;padding-left:22px}
.faq .antwort li{margin-bottom:8px}
.faq mark{background:#fdf0c9;color:inherit;padding:0 2px;border-radius:2px}
.faq-werkzeuge{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:0 0 4px;padding-bottom:16px}
button.leise{
  font-family:inherit;font-size:15.5px;font-weight:700;color:var(--gruen);
  background:none;border:1px solid var(--rand);border-radius:999px;padding:9px 18px;cursor:pointer
}
button.leise:hover{background:var(--gruen-hell);border-color:var(--gruen-mittel)}

.treffer{list-style:none;margin:0 0 4px;padding:0}
.treffer li{border-bottom:1px solid var(--rand-hell)}
.treffer li:last-child{border-bottom:0}
.treffer a{display:block;padding:14px 4px;text-decoration:none;color:inherit}
.treffer a:hover .treffer-titel{color:var(--gruen);text-decoration:underline}
.treffer-titel{display:block;font-weight:700;color:var(--tinte);font-size:17px}
.treffer-text{display:block;font-size:15px;color:var(--text-leise);margin-top:2px}
.leermeldung{margin:16px 0 0;padding:16px 18px;background:var(--sand-tief);border-left:4px solid var(--rand);font-size:16.5px}

/* Schrittfolge */
ol.schritte{list-style:none;margin:0 0 4px;padding:0;counter-reset:schritt}
ol.schritte li{position:relative;counter-increment:schritt;padding:0 0 26px 66px;margin:0}
ol.schritte li::before{
  content:counter(schritt);position:absolute;left:0;top:0;
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:20px;font-weight:700;
  color:#fff;background:var(--gruen-mittel)
}
ol.schritte li::after{content:"";position:absolute;left:21.5px;top:50px;bottom:6px;width:1px;background:var(--rand)}
ol.schritte li:last-child{padding-bottom:0}
ol.schritte li:last-child::after{display:none}
ol.schritte h3,ol.schritte h4{font-family:var(--titel);color:var(--tinte);font-weight:700;line-height:1.25;margin:8px 0 7px;font-size:20px}
ol.schritte p{margin:0 0 11px}
ol.schritte p:last-child{margin-bottom:0}
.schritt-code{
  display:inline-block;font-family:var(--mono);font-size:17px;letter-spacing:.1em;
  padding:4px 10px;background:var(--sand-tief);border:1px solid var(--rand);
  border-radius:var(--radius-klein);color:var(--tinte)
}
.dank{
  margin:0;padding:22px 24px;text-align:center;background:var(--gruen-hell);
  border-radius:var(--radius);font-size:18px;color:var(--gruen);font-family:var(--titel);font-weight:700
}

/* Lesezeichen auf der Abbruchseite. Die einzige Illustration des Portals,
   und sie steht mit Absicht genau hier: Wer abbricht, soll als Erstes
   sehen, dass die Stelle gemerkt ist — ein Bild sagt das schneller als
   ein Satz. Strichstaerke und Rundungen folgen der Bildmarke. */
.dank.gemerkt{display:flex;align-items:center;justify-content:center;gap:14px;text-align:left}
.dank .dank-zusatz{display:inline-block;margin-top:3px;font-family:var(--sans);font-weight:400;font-size:15.5px;color:var(--gruen-mittel)}
.dank.gemerkt svg{width:30px;height:30px;flex:0 0 auto;stroke:var(--gruen);fill:none;
  stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:600px){
  .dank.gemerkt{flex-direction:column;text-align:center;gap:10px}
}

/* Systemprüfung */
.pruefung{margin:0 0 20px;border:1px solid var(--rand);border-radius:var(--radius);background:var(--papier);overflow:hidden}
.pruefung .kopfzeile{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--rand-hell)}
.pruefung .kopfzeile svg{width:19px;height:19px;stroke:var(--gruen);fill:none;flex:0 0 auto}
.pruefung .kopfzeile strong{font-size:17px;color:var(--tinte)}
.pruefung dl{margin:0;padding:6px 20px 16px}
.pruefung dl div{display:grid;grid-template-columns:minmax(130px,40%) 1fr;gap:4px 18px;padding:10px 0;border-bottom:1px solid var(--rand-hell);font-size:16.5px}
.pruefung dl div:last-child{border-bottom:0}
.pruefung dt{color:var(--text-leise)}
.pruefung dd{margin:0;color:var(--text);display:flex;align-items:center;gap:9px}
.pruefung .zeichen{width:18px;height:18px;flex:0 0 auto;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff}
.pruefung .zeichen.ja{background:var(--erfolg)}
.pruefung .zeichen.nein{background:var(--fehler)}
.pruefung .zeichen.neutral{background:var(--text-leise)}
.pruefung .fussnote{margin:0;padding:14px 20px;border-top:1px solid var(--rand-hell);background:var(--sand-tief);font-size:15px;color:var(--text-leise)}

/* Beitragsliste */
.beitraege{list-style:none;margin:0;padding:0;border-top:1px solid var(--rand-hell)}
.beitraege > li{display:grid;grid-template-columns:48px 1fr;gap:0 20px;padding:22px 4px;border-bottom:1px solid var(--rand-hell)}
.beitraege > li[hidden]{display:none}
.beitraege .nummer{
  grid-row:1 / span 3;width:40px;height:40px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:16px;font-weight:700;
  color:var(--gruen);background:var(--gruen-hell)
}
.beitraege h3{font-size:20px;margin:5px 0 7px;line-height:1.3}
.beitraege h3 a{color:var(--tinte);text-decoration:none}
.beitraege h3 a:hover{color:var(--gruen);text-decoration:underline}
.beitraege .meta{margin:0 0 9px;font-size:14.5px;color:var(--text-leise);display:flex;flex-wrap:wrap;gap:4px 15px}
.beitraege .meta .marke{
  display:inline-block;padding:2px 10px;font-size:13px;font-weight:700;
  color:var(--gruen);background:var(--gruen-hell);border-radius:2em
}
.beitraege .anriss{margin:0;font-size:16.5px;color:var(--text-leise);max-width:66ch}

/* Zusagen und Trennungsschaubild */
.zusagen{list-style:none;margin:0 0 4px;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:16px}
.zusagen li{
  display:flex;gap:14px;align-items:flex-start;padding:18px 20px;
  background:var(--sand-tief);border-radius:var(--radius);font-size:16.5px
}
.zusagen svg{width:22px;height:22px;stroke:var(--gruen);fill:none;flex:0 0 auto;margin-top:2px}
.zusagen strong{display:block;color:var(--tinte);margin-bottom:3px}
.zusagen span.txt{color:var(--text-leise)}

.trennung{margin:0 0 20px;padding:26px 24px;background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius)}
.trennung .paar{display:grid;grid-template-columns:1fr 74px 1fr;gap:0;align-items:stretch}
.trennung .kasten{padding:18px 20px;border:1px solid var(--rand-hell);border-radius:var(--radius);background:var(--sand-tief)}
.trennung .kasten h3,.trennung .kasten h4{font-family:var(--titel);font-size:17px;color:var(--tinte);margin:0 0 7px;font-weight:700;display:flex;align-items:center;gap:10px}
.trennung .kasten h3 svg,.trennung .kasten svg{width:18px;height:18px;stroke:var(--gruen);fill:none;flex:0 0 auto}
.trennung .kasten p{margin:0;font-size:15.5px;color:var(--text-leise)}
.trennung .schnitt{position:relative;display:flex;align-items:center;justify-content:center}
.trennung .schnitt::before{content:"";position:absolute;left:6px;right:6px;height:1px;background:var(--rand)}
.trennung .schnitt span{position:relative;z-index:1;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--papier);border:1px solid var(--rand)}
.trennung .schnitt svg{width:17px;height:17px;stroke:var(--fehler)}
.trennung .bildtext{margin:18px 0 0;padding-top:16px;border-top:1px solid var(--rand-hell);font-size:15.5px;color:var(--text-leise)}

/* Rechtsseiten */
/* ---------- Plantabelle (Erhebungsplan auf der Seite „Studie") ----------
   Waagerecht scrollbar in einem eigenen Behälter — die Seite selbst darf
   auf keiner Breite waagerecht scrollen.                                  */
.tabellenrahmen{
  margin:0 0 14px;overflow-x:auto;
  border:1px solid var(--rand);border-radius:var(--radius);background:var(--papier);
  -webkit-overflow-scrolling:touch
}
table.plan{
  border-collapse:collapse;width:100%;min-width:520px;
  font-size:15px;font-variant-numeric:tabular-nums
}
table.plan caption{
  caption-side:top;text-align:left;padding:16px 20px 12px;
  font-size:15px;color:var(--text-leise);line-height:1.5
}
table.plan th,table.plan td{
  padding:10px 11px;text-align:right;
  border-bottom:1px solid var(--rand-hell);white-space:nowrap
}
table.plan th[scope="row"],table.plan thead th:first-child,table.plan tfoot th{text-align:left;white-space:nowrap}
table.plan thead th{
  position:sticky;top:0;background:var(--sand-tief);color:var(--tinte);
  font-size:14.5px;font-weight:700;border-bottom:2px solid var(--rand)
}
table.plan tbody th{font-weight:600;color:var(--tinte)}
table.plan tbody tr:hover td,table.plan tbody tr:hover th{background:var(--gruen-hell)}
table.plan tfoot th,table.plan tfoot td{
  border-top:2px solid var(--rand);border-bottom:0;
  background:var(--sand);font-weight:700;color:var(--tinte)
}
table.plan .platzhalter{color:#b4ada2}
table.plan .nullwert{color:#b4ada2}
.tabellenfuss{margin:0 0 18px;font-size:14.5px;color:var(--text-leise)}
@media (max-width:640px){
  /* Auf dem Telefon passt die Tabelle ohne Querscrollen: kein Mindestmaß,
     die Textzellen dürfen umbrechen, nur Bezirk und Zahlen bleiben einzeilig. */
  table.plan{font-size:14.5px;min-width:0;table-layout:auto}
  table.plan th,table.plan td{padding:10px 8px;white-space:normal;vertical-align:top;line-height:1.4;text-align:left;hyphens:manual}
  table.plan th:first-child,table.plan td:first-child{padding-left:12px}
  table.plan td:last-child,table.plan th:last-child{text-align:right;padding-right:12px}
  table.plan tbody td:last-child,table.plan tfoot td:last-child{white-space:nowrap}
  table.plan caption{padding:14px 12px 10px;font-size:14px}
  table.plan .platzhalter{font-size:13.5px}
}

.kurzfassung{
  margin:0 0 28px;padding:24px 26px;background:var(--gruen-hell);
  border-radius:var(--radius)
}
.kurzfassung h2{font-size:20px;margin:0 0 13px;color:var(--gruen)}
.kurzfassung ul{margin:0;padding-left:22px;font-size:16.5px}
.kurzfassung li{margin-bottom:8px}
.kurzfassung li:last-child{margin-bottom:0}
.widerspruch{margin:0 0 22px;padding:26px 28px;background:var(--papier);border:2px solid var(--signal);border-radius:var(--radius)}
.widerspruch h3{display:flex;align-items:center;gap:12px;font-size:21px;margin:0 0 13px;color:var(--tinte)}
.widerspruch h3 svg{width:22px;height:22px;stroke:var(--signal);fill:none;flex:0 0 auto}
.widerspruch p{margin:0 0 13px;font-size:17px}
.widerspruch p:last-child{margin-bottom:0}
.fundstelle{margin:14px 0 0;font-size:14.5px;color:var(--text-leise);padding-left:16px;border-left:2px solid var(--rand-hell)}

/* Leichte Sprache */
.ls{font-size:22px;line-height:1.75;max-width:52ch;hyphens:none}
.ls h2{font-size:28px;margin:0 0 18px;line-height:1.25}
.ls h3{font-size:23px;margin:32px 0 11px}
.ls p{margin:0 0 22px}
.ls p:last-child{margin-bottom:0}
.ls .abschnitt+.abschnitt{margin-top:40px;padding-top:36px;border-top:2px solid var(--rand-hell)}
.ls strong{font-weight:700;color:var(--tinte)}
ul.ls-punkte{list-style:none;margin:0 0 22px;padding:0}
ul.ls-punkte li{display:flex;gap:20px;align-items:flex-start;padding:18px 20px;margin-bottom:14px;background:var(--sand-tief);border-radius:var(--radius)}
ul.ls-punkte li:last-child{margin-bottom:0}
ul.ls-punkte svg{width:34px;height:34px;stroke:var(--gruen);fill:none;flex:0 0 auto;margin-top:2px}
ol.ls-schritte{list-style:none;margin:0 0 22px;padding:0;counter-reset:lss}
ol.ls-schritte li{counter-increment:lss;position:relative;padding:0 0 28px 72px}
ol.ls-schritte li::before{
  content:counter(lss);position:absolute;left:0;top:0;width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-size:24px;font-weight:700;color:#fff;background:var(--gruen-mittel)
}
ol.ls-schritte li:last-child{padding-bottom:0}
ol.ls-schritte p{margin:0 0 13px}
ol.ls-schritte p:last-child{margin-bottom:0}
.ls-kasten{margin:0 0 24px;padding:24px 26px;background:var(--gruen-hell);border-radius:var(--radius)}
.ls-kasten p:last-child{margin-bottom:0}
.ls-wechsel{display:flex;flex-wrap:wrap;gap:15px;align-items:center;margin:0 0 32px;padding:18px 20px;background:var(--papier);border:1px solid var(--rand);border-radius:var(--radius);font-size:18px}
.ls-wechsel svg{width:22px;height:22px;stroke:var(--gruen);fill:none;flex:0 0 auto}

/* Meldungsarchiv */
.meldungen{list-style:none;margin:0;padding:0}
.meldungen > li{display:grid;grid-template-columns:124px 1fr;gap:0 26px;padding:24px 4px;border-bottom:1px solid var(--rand-hell)}
.meldungen > li[hidden]{display:none}
.meldungen > li:last-child{border-bottom:0}
.meldungen .zeit{display:flex;flex-direction:column;gap:9px}
.meldungen time{font-size:15.5px;color:var(--text-leise);font-variant-numeric:tabular-nums;white-space:nowrap}
.meldungen .art{display:inline-block;padding:3px 11px;font-size:13px;font-weight:700;border-radius:2em;color:var(--gruen);background:var(--gruen-hell);width:-moz-fit-content;width:fit-content}
.meldungen .art.wichtig{color:var(--signal-dunkel);background:var(--signal-zart)}
.meldungen h3{font-size:21px;margin:0 0 9px;line-height:1.3}
.meldungen p{margin:0 0 11px;font-size:17px}
.meldungen p:last-child{margin-bottom:0}
/* Downloadhinweis in einer Meldung: Berichte als PDF.
   Kein eigener Knopf — die Meldungsliste soll ruhig bleiben. Ein
   abgesetzter Kasten mit Dateiangabe reicht und sagt vorher, was
   beim Klick passiert (Format und Groesse), statt es zu verschweigen. */
.dateikasten{display:flex;align-items:center;gap:16px;margin:14px 0 0;padding:14px 18px;
  background:var(--gruen-hell);border:1px solid var(--rand);border-radius:10px}
.dateikasten svg{width:26px;height:26px;flex:0 0 auto;stroke:var(--gruen);fill:none}
.dateikasten a{font-weight:700;font-size:17px}
.dateikasten .datei-zusatz{display:block;margin-top:2px;font-size:14.5px;color:var(--text-leise);font-weight:400}
.dateikasten > span{flex:1 1 auto;min-width:0}
/* In der Beitragsliste (artikel.html) ist jedes <li> ein Raster aus Nummer
   und Text; der Dateikasten als viertes Kind rutschte in die Nummernspalte.
   Er nimmt jetzt beide Spalten ein. (10.09.2026) */
.beitraege .dateikasten{grid-column:1 / -1;margin-top:16px}
@media (max-width:600px){.dateikasten{gap:12px;padding:12px 14px}}

.meldungen .neu{display:inline-block;margin-left:10px;padding:2px 10px;font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#fff;background:var(--signal);border-radius:2em;vertical-align:middle}
h2.jahrmarke{font-family:var(--sans)}
.jahrmarke{margin:34px 0 4px;padding-bottom:9px;border-bottom:2px solid var(--rand);font-size:15px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-leise)}
.jahrmarke:first-child{margin-top:0}
.jahrmarke[hidden]{display:none}

/* ===================================================================
   EINWILLIGUNGSBAUSTEINE
   Fragebogen: Datenschutzhinweis, Art.-9-Einwilligung, Panelfrage.
   Vorlage und Wortlaut: Fragebogen-Einwilligung-Bausteine.html
   =================================================================== */
.einwilligung{
  border:1px solid var(--rand); border-left:4px solid var(--gruen);
  border-radius:var(--radius); background:var(--papier);
  padding:24px 26px; margin:0 0 24px;
}
.einwilligung h2, .einwilligung h3{
  font-family:var(--titel); color:var(--tinte); margin:0 0 10px;
  font-size:20px; font-weight:700; line-height:1.2;
}
.einwilligung p{margin:0 0 12px}
.einwilligung p:last-child{margin-bottom:0}

/* Zustimmungszeile: großes Klickziel, sichtbarer Fokus, nie vorbelegt */
.zustimmung{
  display:grid; grid-template-columns:auto 1fr; gap:14px;
  align-items:start; padding:16px 18px; margin:16px 0 12px;
  background:var(--gruen-hell); border-radius:var(--radius-klein);
  cursor:pointer;
}
.zustimmung input[type="checkbox"]{
  width:22px; height:22px; margin:2px 0 0; accent-color:var(--gruen);
  cursor:pointer; flex:0 0 auto;
}
.zustimmung:focus-within{outline:3px solid var(--signal); outline-offset:2px}
.zustimmung strong{display:block; color:var(--tinte); margin-bottom:3px}
.zustimmung .txt{color:var(--text); font-size:16.5px}

/* Folgefeld — erscheint erst, wenn die zugehörige Zustimmung gesetzt ist */
.folge{margin:0 0 14px; padding-left:22px; border-left:2px solid var(--rand-hell)}
.folge label{display:block; font-weight:600; margin-bottom:6px; color:var(--tinte)}
.folge input[type="email"], .folge input[type="text"]{
  width:100%; max-width:420px; font-family:inherit; font-size:17px;
  padding:11px 13px; border:1px solid var(--rand); border-radius:var(--radius-klein);
  background:var(--papier); color:var(--text);
}
.folge input:focus-visible{outline:3px solid var(--signal); outline-offset:2px}

.merksatz{
  margin:14px 0 0; padding:14px 16px; background:var(--sand-tief);
  border-radius:var(--radius-klein); font-size:15.5px; color:var(--text-leise);
}
.merksatz strong{color:var(--tinte)}

/* ===================================================================
   EINWILLIGUNGSBELEG (danke.html)
   Übersicht der erteilten Einwilligungen, zum Ausdrucken.
   Die Druckregeln stehen unten im @media-print-Block.
   =================================================================== */
.beleg{
  border:1px solid var(--rand); border-radius:var(--radius);
  background:var(--papier); padding:26px 28px; margin:0 0 22px;
}
.beleg-kopf{
  display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap;
  padding-bottom:16px; margin-bottom:18px; border-bottom:1px solid var(--rand-hell);
}
.beleg-kopf h2{margin:0; font-size:21px}
.beleg-zeit{margin:4px 0 0; font-size:15px; color:var(--text-leise)}
.beleg-marke{display:none}   /* nur im Druck sichtbar, siehe unten */

.eintraege{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:14px}
.eintraege li{
  display:grid; grid-template-columns:26px 1fr; gap:14px; align-items:start;
  padding-bottom:14px; border-bottom:1px solid var(--rand-hell);
}
.eintraege li:last-child{border-bottom:0; padding-bottom:0}
.eintraege .zeichen{
  width:24px; height:24px; border-radius:50%; display:grid; place-items:center;
  font-size:14px; font-weight:700; margin-top:1px; flex:0 0 auto;
}
.eintraege .ja{background:var(--gruen-hell); color:var(--gruen)}
.eintraege .nein{background:var(--sand-tief); color:var(--text-leise)}
/* Ohne Parameter aus dem Fragebogen zeigt die Dankeseite keine Haken,
   sondern nur, welche Einwilligungen es gibt — ein Beleg ohne Beleg
   wäre eine Fälschung. */
.eintraege .offen{background:var(--papier); color:var(--text-leise); border:1px solid var(--rand)}
.eintraege strong{display:block; color:var(--tinte); margin-bottom:3px}
.eintraege .txt{color:var(--text-leise); font-size:15.5px}
.eintraege li.aus strong{color:var(--text-leise); font-weight:600}

.beleg-fuss{
  margin:20px 0 0; padding-top:16px; border-top:1px solid var(--rand-hell);
  font-size:15px; color:var(--text-leise);
}
.werkzeuge{display:flex; gap:12px; flex-wrap:wrap; margin:0 0 26px}

/* .nur-bildschirm — Hilfsklasse ohne Wirkung am Bildschirm; der
   @media-print-Block unten blendet damit ausgezeichnete Teile aus. */

@media (max-width:1040px){
  .unterraster{grid-template-columns:minmax(0,1fr);gap:26px}
  .spalte-neben{position:static}
}
@media (max-width:760px){
  .einwilligung{padding:20px 18px}
  .zustimmung{padding:14px 15px; gap:12px}
  .beleg{padding:22px 20px}
  .werkzeuge .knopf,.werkzeuge .knopf-schlank{width:100%; justify-content:center}
  .karte-koerper{padding:24px 22px}
  .karte-kopf{padding:18px 22px}
  .merkliste a{padding:14px 22px}
  .daten div,.pruefung dl div{grid-template-columns:1fr;gap:2px}
  .zusagen{grid-template-columns:1fr}
  .trennung .paar{grid-template-columns:1fr}
  .trennung .schnitt{height:58px}
  .trennung .schnitt::before{left:50%;right:auto;top:6px;bottom:6px;height:auto;width:1px}
  .zurueck a.knopf-schlank{margin-left:0;width:100%;justify-content:center}
  .ls{font-size:20px}
  .ls h2{font-size:24px}
  ol.ls-schritte li{padding-left:60px}
  ol.ls-schritte li::before{width:46px;height:46px;font-size:21px}
  .beitraege > li{grid-template-columns:36px 1fr;gap:0 14px}
  .beitraege .nummer{width:32px;height:32px;font-size:14px}
  .meldungen > li{grid-template-columns:1fr;gap:10px}
  .meldungen .zeit{flex-direction:row;align-items:center;gap:12px}
}
@media print{
  .nur-bildschirm{display:none !important}
  .sprung{display:none !important}
  .einwilligung{border:1px solid #999; break-inside:avoid}
  .zustimmung{background:transparent; border:1px solid #bbb}

  /* Einwilligungsbeleg: die Seite druckt nur den Beleg, sonst nichts. */
  body.beleg-seite .kopf,
  body.beleg-seite .akzentband,
  body.beleg-seite .seitenkopf,
  body.beleg-seite .fuss,
  body.beleg-seite .werkzeuge,
  body.beleg-seite .spalte-neben,
  body.beleg-seite .nach-druck{display:none !important}
  body.beleg-seite{background:#fff}
  body.beleg-seite .haupt{padding:0}
  body.beleg-seite .bereich{padding:0; max-width:none}
  body.beleg-seite .unterraster{display:block}
  body.beleg-seite .karte{border:0; box-shadow:none; padding:0}
  body.beleg-seite .beleg{border:1px solid #999; padding:16pt 18pt;
                          box-shadow:none; break-inside:avoid}
  body.beleg-seite .beleg-marke{display:block; font-size:10pt; color:#000;
                          margin-bottom:10pt; letter-spacing:.08em;
                          text-transform:uppercase}
  body.beleg-seite .eintraege .zeichen{border:1px solid #666;
                          background:#fff !important; color:#000 !important}
  body.beleg-seite .eintraege .txt,
  body.beleg-seite .beleg-zeit,
  body.beleg-seite .beleg-fuss{color:#000}
  .krumen,.zurueck,.merkliste,.suche,.faq-werkzeuge{display:none}
  .faq details{break-inside:avoid}
  .faq .antwort{display:block !important}
  .pruefung,.trennung,.zusagen li,.widerspruch,.kurzfassung{break-inside:avoid}
  .tabellenrahmen{overflow:visible;border:1px solid #999;break-inside:avoid}
  table.plan{min-width:0;font-size:9pt}
  table.plan thead th{position:static;background:#eee}
}

/* --- Vorrangklausel der englischen Rechtstexte -------------------------
   Steht ganz oben auf datenschutz-en, impressum-en und
   barrierefreiheit-en. Sie ist bewusst KEIN Hinweiskasten: Ein
   Hinweiskasten erklaert etwas, diese Zeile trifft eine Rechtsaussage —
   welche Sprachfassung im Zweifel gilt. Zwei gleichrangige Fassungen
   einer Datenschutzerklaerung waeren angreifbar; deshalb steht der
   Vorrang der deutschen Fassung sichtbar an erster Stelle und nicht
   in einer Fussnote. */
.vorrang{
  margin:0 0 26px;padding:14px 18px;
  background:var(--sand-tief);border:1px solid var(--rand);
  border-left:5px solid var(--signal);border-radius:var(--radius-klein);
  font-size:15.5px;line-height:1.6;color:var(--text)
}
.vorrang p{margin:0}
.vorrang strong{color:var(--signal-dunkel)}
@media print{ .vorrang{border-left-width:3px} }

/* Systemprüfung auf technik.html und technik-en.html */
#systemwerte{margin:0 0 12px;font-size:15.5px}
#systemwerte > div{display:grid;grid-template-columns:150px 1fr;gap:0 14px;
  padding:7px 0;border-bottom:1px solid var(--rand-hell)}
#systemwerte > div:last-child{border-bottom:0}
#systemwerte dt{color:var(--text-leise)}
#systemwerte dd{margin:0;font-weight:600}
#systemwerte .zeichen{display:inline-flex;align-items:center;justify-content:center;
  width:1.35em;height:1.35em;margin-right:7px;border-radius:50%;
  font-size:12px;font-weight:700;color:#fff;vertical-align:-2px}
#systemwerte .zeichen.ja{background:var(--erfolg)}
#systemwerte .zeichen.nein{background:var(--fehler)}
#systemwerte .zeichen.neutral{background:var(--text-leise)}
@media(max-width:520px){ #systemwerte > div{grid-template-columns:1fr;gap:2px} }


/* ===================================================================
   Stimmen-Karten — stimmen.html
   -------------------------------------------------------------------
   Aufbau wie eine Beitragskarte: Zeichen, Name, Kennungen, Menue,
   darunter der Satz. Vier Entscheidungen, die bewusst anders sind als
   im Vorbild:

   1. Das Siegel ist gruen, nicht blau. Blau ist das Zeichen einer
      Plattform und behauptet eine Pruefung durch Dritte. Hier heisst
      es nur: Die Nennung ist von der Person ausdruecklich freigegeben.
      Was es heisst, steht als Text daneben, nicht nur im title.
   2. Das Menue ist ein <details>. Kein Skript, kein Framework — wie
      der Rest des Portals. Es funktioniert auch ohne JavaScript.
   3. Die Kennungen sind Verweise auf Institution und Projekt, keine
      Konten. Sie sagen, wo jemand herkommt, nicht wo er postet.
   4. Ohne Freigabe kein Siegel, keine Kennung, kein Zitat: Die Karte
      im Zustand "angefragt" traegt eine Statusmarke und sonst nichts.
   =================================================================== */
.stimmen-liste{margin:0 0 22px;padding:0;list-style:none;display:grid;gap:16px}
.stimmen-liste li{margin:0}

.stimme-karte{
  position:relative;
  padding:22px 24px;background:var(--papier);
  border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten)
}
.stimme-karte.angefragt{background:var(--sand-tief);box-shadow:none}

.stimme-kopf{display:flex;gap:16px;align-items:flex-start}

.person-zeichen,.person-foto{
  flex:0 0 auto;width:56px;height:56px;border-radius:50%;overflow:hidden
}
.person-zeichen{
  background:var(--gruen);color:var(--papier);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--titel);font-size:19px;letter-spacing:.5px;line-height:1
}
.stimme-karte.angefragt .person-zeichen{background:var(--rand);color:var(--text-leise)}
.person-foto{border:1px solid var(--rand)}
.person-foto img{display:block;width:100%;height:100%;object-fit:cover}

.stimme-titel{flex:1 1 auto;min-width:0;padding-right:34px}
.person-name{
  display:block;margin:0;font-family:var(--titel);font-size:19.5px;
  color:var(--tinte);line-height:1.3
}
.person-rolle{display:block;margin-top:3px;font-size:15px;color:var(--text-leise)}

/* Siegel */
.siegel{display:inline-flex;align-items:center;gap:5px;margin-left:8px;vertical-align:2px}
.siegel svg{width:17px;height:17px;flex:0 0 auto}
/* Der Haken traegt die Aussage. Die Beschriftung bleibt im Markup, aber
   unsichtbar — fuer Screenreader und als title-Tooltip am Siegel. */
.siegel-text{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0
}
.siegel.offen svg{opacity:.85}

/* Kennungen */
.person-kennungen{
  display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:7px;
  font-size:15px;line-height:1.5
}
.person-kennungen a,.person-kennungen span{color:var(--gruen-mittel);text-decoration:none}
.person-kennungen a:hover,.person-kennungen a:focus-visible{
  color:var(--gruen);text-decoration:underline
}

/* Drei-Punkte-Menue */
.person-mehr{position:absolute;top:18px;right:18px}
.person-mehr>summary{
  list-style:none;cursor:pointer;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;color:var(--text-leise)
}
.person-mehr>summary::-webkit-details-marker{display:none}
.person-mehr>summary:hover,.person-mehr[open]>summary{
  background:var(--sand-tief);color:var(--gruen)
}
.person-mehr>summary svg{width:19px;height:19px;fill:currentColor}
.mehr-menue{
  position:absolute;top:36px;right:0;z-index:20;width:290px;
  padding:8px;background:var(--papier);
  border:1px solid var(--rand);border-radius:var(--radius);
  box-shadow:var(--schatten-hoch)
}
.mehr-menue .menue-titel{
  display:block;padding:6px 10px 8px;font-size:12.5px;font-weight:600;
  letter-spacing:.3px;text-transform:uppercase;color:var(--text-leise)
}
.mehr-menue a{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 10px;border-radius:var(--radius-klein);
  font-size:15px;line-height:1.35;color:var(--text);text-decoration:none
}
.mehr-menue a:hover,.mehr-menue a:focus-visible{background:var(--gruen-hell);color:var(--gruen)}
.mehr-menue a svg{width:16px;height:16px;margin-top:2px;flex:0 0 auto;stroke:var(--gruen-mittel);fill:none}
.mehr-menue .menue-quelle{display:block;font-size:12.5px;color:var(--text-leise);margin-top:1px}

/* Zitat */
.stimme-zitat{
  margin:16px 0 0;padding:0 0 0 17px;
  border-left:3px solid var(--gruen-mittel)
}
.stimme-zitat p{margin:0;font-size:17px;line-height:1.6;color:var(--text)}
.stimme-zitat.platzhalter{border-left-style:dashed;border-left-color:var(--rand)}
.stimme-zitat.platzhalter p{color:var(--text-leise);font-style:italic;font-size:16px}

@media (max-width:560px){
  .stimme-karte{padding:18px 18px}
  .stimme-kopf{gap:13px}
  .person-zeichen,.person-foto{width:46px;height:46px}
  .person-zeichen{font-size:16px}
  .person-name{font-size:18px}
  .mehr-menue{width:min(270px,calc(100vw - 72px))}
}

/* Klaus' voller Titel passt unterhalb von 630px nicht mehr in eine Zeile.
   Dort steht die Kurzform „Prof. Dr."; der Rest bleibt im Markup. */
@media (max-width:629px){
  .titel-lang{display:none}
}