/* ============================================================
   MFG — Entwurf einer Schul-App
   Weißer Grund, eine Signalfarbe (das Rot aus dem Schullogo),
   Newsreader für Redaktionelles, Inter für alles Bedienbare.
   ============================================================ */

@font-face{
  font-family:"Inter";
  src:url("../fonts/inter.woff2") format("woff2");
  font-weight:100 900; font-display:swap;
}
@font-face{
  font-family:"Newsreader";
  src:url("../fonts/newsreader.woff2") format("woff2");
  font-weight:400 700; font-display:swap;
}

:root{
  /* Flächen */
  --papier:#FFFFFF;
  --flaeche:#F5F6F7;
  --flaeche-zart:#FAFAFB;

  /* Schrift — alle Textfarben über 4.5:1 auf Weiß */
  --tinte:#15171B;
  --tinte-2:#4B5262;
  --tinte-3:#6B7280;
  /* NUR fuer Linien, Winkel und Symbole — nie fuer Text. Auf Weiss kommt die
     Farbe auf 2,5:1, auf der dunklen Flaeche auf 3,9:1, und beides faellt
     durch. Fuer zurueckhaltenden Text gibt es --tinte-3. Der Fehler ist am
     01.09. und am 05.09.2026 je einmal aufgetreten; beim zweiten Mal reicht
     ein Kommentar. */
  --deko:#9AA0AC;

  /* Linien */
  --linie:#E6E8EB;
  --linie-zart:#F0F1F3;

  /* Signalfarbe: aus dem Logo der Schule ausgelesen.
     Vier Rollen, weil eine Farbe im Dunkelmodus nicht alle vier kann:
     --rot        Schrift und Symbole (muss im Dunkeln heller werden)
     --rot-voll   gefuellte Flaechen (muss im Dunkeln dunkel BLEIBEN, sonst
                  traegt sie keinen weissen Text mehr)
     --auf-rot    was auf einer solchen Flaeche steht
     --rot-tief   Schrift auf der zarten Tintflaeche
     --rot-flaeche die zarte Tintflaeche selbst */
  --rot:#C1212B;
  --rot-voll:#C1212B;
  --auf-rot:#FFFFFF;
  --rot-tief:#9C1922;
  --rot-flaeche:#FBF2F2;

  --ui:"Inter",-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;
  --redaktion:"Newsreader",Georgia,"Times New Roman",serif;

  --rand:20px;                 /* Seitenrand der App */
  --kopf-h:48px;
  --tabs-h:58px;
  --oben:env(safe-area-inset-top,0px);
  --unten:env(safe-area-inset-bottom,0px);

  --schwung:cubic-bezier(.32,.72,0,1);   /* iOS-nahes Ausklingen */
  --schatten:0 1px 2px rgba(21,23,27,.04),0 12px 28px -14px rgba(21,23,27,.18);

  /* Die beiden Milchglasleisten oben und unten. */
  --glas:rgba(255,255,255,.82);
  --glas-fest:rgba(255,255,255,.88);

  /* Die kurze Rueckmeldung unten — im Hellen dunkel, im Dunkeln hell. */
  --melder-flaeche:rgba(21,23,27,.92);
  --melder-text:#FFFFFF;
}

/* ===========================================================================
   Dunkelmodus
   ---------------------------------------------------------------------------
   Zwei Wege hinein, und beide muessen zum selben Ergebnis fuehren: die
   Systemeinstellung des Telefons und der Schalter unter „Mein MFG". Der
   Schalter gewinnt — wer ihn angefasst hat, hat sich entschieden.

   Der Grundsatz der App bleibt: eine Flaeche, eine Signalfarbe. Nur die
   Rollen tauschen. Wichtig ist die Aufteilung des Rots oben: Als Schrift muss
   es im Dunkeln heller werden (sonst 2,5:1 auf Schwarz), als Flaeche muss es
   dunkel bleiben (sonst traegt es keinen weissen Text mehr).
   =========================================================================== */

@media (prefers-color-scheme: dark) {
  :root:not([data-farbschema="hell"]) {
  --papier:#131519;
  --flaeche:#1E2128;
  --flaeche-zart:#1A1D23;

  --tinte:#ECEEF2;
  --tinte-2:#B6BCC7;
  --tinte-3:#949CA8;
  --deko:#6C7481;

  --linie:#2A2E36;
  --linie-zart:#22262D;

  --rot:#FF6069;
  --rot-voll:#A81C26;
  --auf-rot:#FFFFFF;
  --rot-tief:#FF8A90;
  --rot-flaeche:#2C1518;

  --schatten:0 1px 2px rgba(0,0,0,.5),0 12px 28px -14px rgba(0,0,0,.7);
  --glas:rgba(19,21,25,.82);
  --glas-fest:rgba(19,21,25,.9);
  --melder-flaeche:rgba(236,238,242,.95);
  --melder-text:#131519;
}
}
:root[data-farbschema="dunkel"] {
  --papier:#131519;
  --flaeche:#1E2128;
  --flaeche-zart:#1A1D23;

  --tinte:#ECEEF2;
  --tinte-2:#B6BCC7;
  --tinte-3:#949CA8;
  --deko:#6C7481;

  --linie:#2A2E36;
  --linie-zart:#22262D;

  --rot:#FF6069;
  --rot-voll:#A81C26;
  --auf-rot:#FFFFFF;
  --rot-tief:#FF8A90;
  --rot-flaeche:#2C1518;

  --schatten:0 1px 2px rgba(0,0,0,.5),0 12px 28px -14px rgba(0,0,0,.7);
  --glas:rgba(19,21,25,.82);
  --glas-fest:rgba(19,21,25,.9);
  --melder-flaeche:rgba(236,238,242,.95);
  --melder-text:#131519;
}

*{box-sizing:border-box;margin:0;-webkit-tap-highlight-color:transparent}

html,body{height:100%}
body{
  font-family:var(--ui);
  font-size:15px;
  line-height:1.5;
  color:var(--tinte);
  background:var(--papier);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overscroll-behavior:none;
}

/* Die Oberflächen, die der Browser stellt, gehören mit gestaltet */
::selection{background:var(--rot-flaeche);color:var(--rot-tief)}
:focus-visible{outline:2px solid var(--rot);outline-offset:2px;border-radius:6px}
input{caret-color:var(--rot)}
.buehne::-webkit-scrollbar,.detail::-webkit-scrollbar{width:0;height:0}
.buehne,.detail{scrollbar-width:none}

.sprite{display:none}
.ikon{
  width:24px;height:24px;flex:none;
  fill:none;stroke:currentColor;stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;
}

button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ============ Gerüst ============ */
.app{
  position:relative;
  height:100%;
  display:flex;flex-direction:column;
  background:var(--papier);
  overflow:hidden;
}

/* ---- Kopfleiste ---- */
.kopf{
  position:absolute;top:0;left:0;right:0;z-index:45;
  height:calc(var(--kopf-h) + var(--oben));
  /* Der Rand ist aus dem Inhalt zurueckgerechnet, nicht geraten: Das Symbol
     ist 24 px breit und sitzt mittig in einem 40-px-Knopf, hat also 8 px Luft
     nach jeder Seite. Damit die Symbolkante genau auf der Spalte des Inhalts
     liegt (--rand), bleiben fuer den Knopf --rand minus 8 px.

     Vorher standen hier feste 8 px. Das Ergebnis: Die Glocke sass 16 px vom
     Bildschirmrand, waehrend jede Karte darunter bei 20 px anfing — als
     einziges Element brach sie aus der Spalte aus, und weil oben sonst nichts
     steht, gab es nichts, was den Versatz kaschiert haette. Am 01.09.2026 von
     Jaden im Bildschirmfoto entdeckt und nachgemessen. */
  padding:var(--oben) calc(var(--rand) - 8px) 0;
  display:flex;align-items:center;gap:4px;
  background:var(--glas);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid transparent;
  transition:border-color .25s linear,background-color .25s linear;
}
.kopf.ist-gefuellt{border-bottom-color:var(--linie)}
.kopf-titel{
  flex:1;min-width:0;text-align:center;
  font-family:var(--redaktion);font-size:16px;font-weight:600;
  letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transform:translateY(7px);
  transition:opacity .22s var(--schwung),transform .28s var(--schwung);
}
.kopf.ist-gefuellt .kopf-titel{opacity:1;transform:none}
.kopf-knopf{
  width:40px;height:40px;flex:none;
  display:grid;place-items:center;border-radius:50%;
  color:var(--tinte);position:relative;
  transition:background-color .18s linear,transform .18s var(--schwung);
}
.kopf-knopf:active{background:var(--flaeche);transform:scale(.94)}
.kopf-knopf[hidden]{display:none}
.kopf-knopf .punkt{
  position:absolute;top:9px;right:10px;
  width:7px;height:7px;border-radius:50%;
  background:var(--rot);box-shadow:0 0 0 2px var(--papier);
}

/* ---- Scrollbühne ---- */
.buehne{
  flex:1;min-height:0;
  overflow-y:auto;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  padding-top:calc(var(--kopf-h) + var(--oben));
  padding-bottom:calc(var(--tabs-h) + var(--unten) + 8px);
  scroll-behavior:smooth;
}
.ansicht[hidden]{display:none}
.ansicht{animation:auf .34s var(--schwung)}
@keyframes auf{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.titelzeile{padding:14px var(--rand) 6px}
/* `flex-wrap` statt Quetschen: Reicht der Platz nicht, rutscht der Knopf unter
   die Überschrift, statt sie in zwei Zeilen zu brechen. Mit „Auf den
   Home-Bildschirm" als Beschriftung stand dort „Die MFG-" / „App" — der Titel
   ist das Wichtigere und bleibt ganz. */
.titelzeile .kopfreihe{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.titelzeile .kopfreihe h1{white-space:nowrap}

/* Der kleine Knopf neben der Überschrift: die App auf den Home-Bildschirm
   legen. Klein und neben dem Titel, nicht als Banner quer über die Seite —
   er richtet sich an die, die sie behalten wollen, und stört die anderen
   nicht. Wer sie schon installiert hat, sieht ihn gar nicht. */
.anheften{
  flex:none;display:inline-flex;align-items:center;gap:5px;
  padding:6px 11px;border-radius:999px;
  background:var(--rot-flaeche);color:var(--rot-tief);
  font:inherit;font-size:12px;font-weight:600;letter-spacing:-.005em;
  transition:transform .15s var(--schwung);
}
.anheften:active{transform:scale(.95)}
.anheften .ikon{width:14px;height:14px;stroke-width:2}
.anheften[hidden]{display:none}
.titelzeile h1{
  font-family:var(--redaktion);
  font-size:31px;line-height:1.08;font-weight:600;
  letter-spacing:-.022em;
  font-variation-settings:"opsz" 34;
}
.gruss,.unterzeile{
  margin-top:5px;font-size:13.5px;color:var(--tinte-3);
  font-variant-numeric:tabular-nums;
}

/* ============ Streifen: der nächste Termin ============ */
.naechster{
  margin:14px var(--rand) 0;
  display:grid;grid-template-columns:auto 1fr auto;
  align-items:center;gap:14px;
  padding:13px 14px 13px 13px;
  background:var(--rot-flaeche);
  border-radius:14px;
  color:var(--tinte);
  text-align:left;width:calc(100% - var(--rand)*2);
  transition:transform .2s var(--schwung),filter .2s linear;
}
.naechster:active{transform:scale(.985);filter:brightness(.985)}
.naechster .tag{
  width:44px;text-align:center;color:var(--rot-tief);
}
.naechster .tag b{
  display:block;font-size:21px;font-weight:650;line-height:1.05;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.naechster .tag span{
  display:block;font-size:10.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;opacity:.8;
}
.naechster .was{min-width:0}
.naechster .was strong{
  display:block;font-size:14.5px;font-weight:600;letter-spacing:-.008em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.naechster .was small{
  display:block;margin-top:2px;font-size:12.5px;color:var(--tinte-2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.naechster .ikon{width:19px;height:19px;color:var(--rot);opacity:.55}

/* ============ Schnellzugriff ============ */
/* Drei Kacheln, mittig als Gruppe — nicht über die volle Breite gezogen.
   Mit `1fr`-Spalten saßen sie an den Rändern geklebt und die Symbole standen
   bei einem Sechstel, der Hälfte und fünf Sechsteln der Breite: drei
   Einzelstücke statt einer Gruppe. `max-content` plus `justify-content:center`
   hält sie zusammen. */
.schnell{
  display:grid;grid-template-columns:repeat(3,minmax(0,88px));
  justify-content:center;
  gap:6px;padding:18px var(--rand) 4px;
}
.schnell button{
  display:flex;flex-direction:column;align-items:center;gap:7px;
  padding:12px 4px 11px;border-radius:14px;
  color:var(--tinte);
  transition:background-color .18s linear,transform .18s var(--schwung);
}
.schnell button:active{background:var(--flaeche);transform:scale(.96)}
.schnell .ikon{width:23px;height:23px;color:var(--tinte-2);stroke-width:1.5}
.schnell span{
  font-size:11.5px;font-weight:500;line-height:1.25;text-align:center;
  color:var(--tinte-2);letter-spacing:-.005em;
}

/* ============ Abschnittsköpfe ============ */
.abschnitt{
  display:flex;align-items:baseline;justify-content:space-between;
  padding:26px var(--rand) 10px;
}
.abschnitt h2{
  font-family:var(--ui);
  font-size:12px;font-weight:600;letter-spacing:.075em;
  text-transform:uppercase;color:var(--tinte-3);
}
.abschnitt .mehr{font-size:13px;font-weight:500;color:var(--rot)}

/* ============ Aufmacher ============ */
.aufmacher{
  display:block;width:100%;text-align:left;
  padding:0 0 22px;
  transition:opacity .2s linear;
}
.aufmacher:active{opacity:.72}
.aufmacher .bild{
  position:relative;
  aspect-ratio:16/10;background:var(--flaeche);
  overflow:hidden;
}
.aufmacher .bild img{width:100%;height:100%;object-fit:cover;display:block}
.aufmacher .text{padding:15px var(--rand) 0}
.aufmacher h3{
  font-family:var(--redaktion);
  font-size:25px;line-height:1.14;font-weight:600;letter-spacing:-.02em;
  font-variation-settings:"opsz" 28;
  text-wrap:balance;
}
.aufmacher p{
  margin-top:7px;font-size:14.5px;line-height:1.48;color:var(--tinte-2);
  text-wrap:pretty;
}
.meta{
  margin-top:10px;display:flex;align-items:center;gap:7px;
  font-size:12px;color:var(--tinte-3);font-variant-numeric:tabular-nums;
}
.meta .marke{
  color:var(--rot);font-weight:600;letter-spacing:.02em;
}
.meta .trenner{width:3px;height:3px;border-radius:50%;background:var(--deko);flex:none}

/* ============ Meldungsliste ============ */
.liste{padding-left:var(--rand)}
.eintrag{
  display:grid;grid-template-columns:1fr 62px;gap:14px;
  align-items:start;width:100%;text-align:left;
  padding:15px var(--rand) 15px 0;
  border-bottom:1px solid var(--linie-zart);
  transition:opacity .18s linear;
}
.eintrag:last-child{border-bottom:0}
.eintrag:active{opacity:.6}
.eintrag h3{
  font-family:var(--redaktion);
  font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.012em;
  font-variation-settings:"opsz" 18;
  text-wrap:pretty;
}
.eintrag p{
  margin-top:4px;font-size:13.5px;line-height:1.45;color:var(--tinte-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.eintrag .thumb{
  width:62px;height:62px;border-radius:10px;
  background:var(--flaeche);overflow:hidden;flex:none;
}
.eintrag .thumb img{width:100%;height:100%;object-fit:cover;display:block}

/* Gruppenkopf der Meldungen — steht ruhig im Fluss, genau wie die übrigen
   Abschnittsköpfe der Seite. Kleben lohnt sich bei zwei kurzen Gruppen nicht
   und lässt beim Scrollen Text durch das Polster wandern. */
.gruppenkopf{
  padding:26px var(--rand) 10px;
  font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--tinte-3);
}

/* Ältere Meldungen: nur Titel und Datum, kleineres Bild */
.eintrag.ist-knapp{
  grid-template-columns:1fr 46px;
  padding-top:12px;padding-bottom:12px;
}
.eintrag.ist-knapp .thumb{width:46px;height:46px;border-radius:8px}
.eintrag.ist-knapp h3{font-size:16px}

/* Verzeichnis statt Liste: die Themen der älteren Meldungen */
.themen{padding-left:var(--rand)}
.thema-zeile{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:16px var(--rand) 16px 0;
  border-bottom:1px solid var(--linie-zart);
  font-size:16px;font-weight:500;letter-spacing:-.012em;
  transition:background-color .15s linear;
}
.thema-zeile:last-child{border-bottom:0}
.thema-zeile:active{background:var(--flaeche-zart)}
.thema-zeile .name{flex:1;min-width:0}
.thema-zeile .zahl{
  font-size:13px;color:var(--tinte-3);
  font-variant-numeric:tabular-nums;
}
.thema-zeile .ikon{width:18px;height:18px;color:var(--deko);stroke-width:1.9}
.thema-zeile.ist-alle{margin-top:2px}
.thema-zeile.ist-alle .name{color:var(--rot);font-weight:600}
.thema-zeile.ist-alle .zahl{color:var(--rot);opacity:.6}

/* Themenliste innerhalb der Detailschicht */
.detail .rumpf.schmal{padding-top:2px}
.detail .zaehler{
  margin-top:6px;font-size:13.5px;color:var(--tinte-3);
  font-variant-numeric:tabular-nums;
}
.liste-tief{margin-top:16px}

.ende{
  padding:26px var(--rand) 34px;text-align:center;
  font-size:12.5px;color:var(--tinte-3);
}
.ende::before{
  content:"";display:block;width:26px;height:1px;
  background:var(--linie);margin:0 auto 14px;
}

/* ============ Termine ============ */
.monat{
  position:sticky;top:calc(var(--kopf-h) + var(--oben));z-index:5;
  padding:10px var(--rand) 9px;
  font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--tinte-3);
  background:var(--papier);            /* deckend — sonst scheint der Text durch */
  box-shadow:0 1px 0 var(--linie-zart);
}
.termin{
  display:grid;grid-template-columns:48px 1fr;gap:14px;
  padding:13px var(--rand) 14px;
  align-items:start;
  border-bottom:1px solid var(--linie-zart);
  width:100%;text-align:left;
}
.termin:active{background:var(--flaeche-zart)}
.termin .datum{text-align:center;padding-top:1px}
.termin .datum b{
  display:block;font-size:20px;font-weight:600;line-height:1.1;
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;
}
.termin .datum span{
  display:block;margin-top:1px;font-size:10.5px;font-weight:600;
  letter-spacing:.08em;text-transform:uppercase;color:var(--tinte-3);
}
.termin.ist-heute .datum b,.termin.ist-heute .datum span{color:var(--rot)}
.termin h3{
  font-size:15px;font-weight:600;line-height:1.32;letter-spacing:-.01em;
  text-wrap:pretty;
}
.termin .zeile{
  margin-top:5px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;
  font-size:12.5px;color:var(--tinte-3);font-variant-numeric:tabular-nums;
}
.termin .zeile .ikon{width:14px;height:14px;stroke-width:1.7;color:var(--deko)}
.termin .hinweis{
  margin-top:7px;font-size:13px;line-height:1.45;color:var(--tinte-2);
}
.termin .art{
  margin-top:9px;display:inline-flex;align-items:center;gap:6px;
  padding:4px 9px 4px 7px;border-radius:999px;
  background:var(--flaeche);
  font-size:11.5px;font-weight:500;color:var(--tinte-2);
}
.termin .art .ikon{width:14px;height:14px;stroke-width:1.7;color:var(--tinte-3)}
.termin.ist-heute .art{background:var(--rot-flaeche);color:var(--rot-tief)}
.termin.ist-heute .art .ikon{color:var(--rot)}

/* ============ Suche und Bereichsliste ============ */
.suchfeld{
  position:relative;margin:10px var(--rand) 4px;
  display:flex;align-items:center;gap:9px;
  padding:0 12px;height:42px;
  background:var(--flaeche);border-radius:12px;
  transition:background-color .2s linear,box-shadow .2s linear;
}
.suchfeld:focus-within{
  background:var(--papier);
  box-shadow:0 0 0 1.5px var(--rot),0 6px 18px -12px rgba(21,23,27,.4);
}
.suchfeld .ikon{width:18px;height:18px;color:var(--tinte-3);stroke-width:1.8}
.suchfeld input{
  flex:1;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:15.5px;color:var(--tinte);
}
.suchfeld input::placeholder{color:var(--tinte-3)}
.suchfeld input::-webkit-search-cancel-button{display:none}
.suche-leeren{
  display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  background:var(--deko);color:var(--papier);
}
.suche-leeren[hidden]{display:none}
.suche-leeren .ikon{width:13px;height:13px;stroke-width:2.4;color:inherit}

.gruppe{padding:22px var(--rand) 6px}
.gruppe h2{
  font-size:12px;font-weight:600;letter-spacing:.075em;
  text-transform:uppercase;color:var(--tinte-3);
}
.zeilen{padding-left:var(--rand)}
.zeile-link{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:13px var(--rand) 13px 0;
  border-bottom:1px solid var(--linie-zart);
  font-size:15.5px;letter-spacing:-.01em;
  transition:background-color .15s linear;
}
/* Die Rechtsseiten sind echte Links (a), die Uebrigen Knoepfe — beide sollen
   gleich aussehen, nicht wie Browser-Blau mit Strich. */
a.zeile-link{color:inherit;text-decoration:none}
.zeile-link:last-child{border-bottom:0}
.zeile-link:active{background:var(--flaeche-zart)}
.zeile-link .name{flex:1;min-width:0}
.zeile-link .name small{
  display:block;margin-top:2px;font-size:12.5px;color:var(--tinte-3);
}
.zeile-link .ikon{width:18px;height:18px;color:var(--deko);stroke-width:1.9}
.zeile-link mark{background:var(--rot-flaeche);color:var(--rot-tief);border-radius:3px;padding:0 1px}

.leer{
  padding:56px var(--rand) 40px;text-align:center;
}
.leer .kreis{
  width:52px;height:52px;margin:0 auto 16px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--flaeche);color:var(--tinte-3);
}
.leer .kreis .ikon{width:24px;height:24px}
.leer h3{font-size:16px;font-weight:600;letter-spacing:-.01em}
.leer p{margin-top:6px;font-size:13.5px;line-height:1.5;color:var(--tinte-3)}

/* ============ Mein MFG ============ */
.ich-hinweis{
  margin:18px var(--rand) 0;padding:12px 14px;
  background:var(--flaeche);border-radius:12px;
  font-size:13px;line-height:1.5;color:var(--tinte-2);
}
.ich-hinweis b{color:var(--tinte);font-weight:600}
.ich-hinweis a{color:var(--rot);text-decoration:underline;text-underline-offset:2px}
.karte-ich{
  margin:8px var(--rand) 0;padding:18px 18px 16px;
  background:var(--flaeche-zart);border-radius:16px;
}
.karte-ich .wer{display:flex;align-items:center;gap:13px}
.karte-ich .initial{
  width:46px;height:46px;flex:none;border-radius:50%;
  display:grid;place-items:center;
  background:var(--rot-voll);color:var(--auf-rot);
  font-size:17px;font-weight:600;letter-spacing:.01em;
}
.karte-ich .wer strong{display:block;font-size:16px;font-weight:600;letter-spacing:-.01em}
.karte-ich .wer small{display:block;margin-top:2px;font-size:13px;color:var(--tinte-3)}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px}
.chip{
  padding:7px 13px;border-radius:999px;
  background:var(--papier);border:1px solid var(--linie);
  font-size:13.5px;font-weight:500;color:var(--tinte-2);
  transition:all .18s var(--schwung);
}
.chip[aria-pressed="true"]{
  background:var(--rot-voll);border-color:var(--rot-voll);color:var(--auf-rot);
}
.chip:active{transform:scale(.95)}

.schalter-zeile{
  display:flex;align-items:center;gap:12px;width:100%;
  padding:13px var(--rand) 13px 0;
  border-bottom:1px solid var(--linie-zart);
}
.schalter-zeile:last-child{border-bottom:0}
.schalter-zeile .name{flex:1;min-width:0;text-align:left;font-size:15.5px}
.schalter-zeile .name small{display:block;margin-top:2px;font-size:12.5px;color:var(--tinte-3)}
.schalter{
  width:47px;height:29px;flex:none;border-radius:999px;
  background:var(--linie);position:relative;
  transition:background-color .26s var(--schwung);
}
.schalter::after{
  content:"";position:absolute;top:2.5px;left:2.5px;
  width:24px;height:24px;border-radius:50%;
  background:var(--papier);
  box-shadow:0 1px 3px rgba(21,23,27,.28);
  transition:transform .26s var(--schwung);
}
.schalter[aria-checked="true"]{background:var(--rot-voll)}
.schalter[aria-checked="true"]::after{transform:translateX(18px)}

/* ============ Detailansicht ============ */
.detail{
  position:absolute;top:0;left:0;right:0;z-index:40;
  bottom:calc(var(--tabs-h) + var(--unten));
  background:var(--papier);
  overflow-y:auto;overflow-x:hidden;
  padding-top:calc(var(--kopf-h) + var(--oben));
  padding-bottom:40px;
  will-change:transform;
}
.detail[hidden]{display:none}
.detail.kommt{animation:herein .38s var(--schwung) both}
.detail.geht{animation:hinaus .3s var(--schwung) both}
@keyframes herein{from{transform:translateX(100%)}to{transform:none}}
.detail.blendet{animation:blende .3s var(--schwung)}
@keyframes blende{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes hinaus{from{transform:none}to{transform:translateX(100%)}}
/* Die Ebene darunter weicht leicht zurück, solange das Detail offen ist */
.app.ist-tief .buehne{transform:scale(.965);opacity:.5;transition:transform .38s var(--schwung),opacity .38s linear}
.buehne{transform-origin:50% 40%;transition:transform .3s var(--schwung),opacity .25s linear}

.detail .bild{
  aspect-ratio:16/10;background:var(--flaeche);overflow:hidden;
  margin-bottom:20px;
}
.detail .bild img{width:100%;height:100%;object-fit:cover;display:block}
.detail .rumpf{padding:0 var(--rand)}
.detail h1{
  font-family:var(--redaktion);
  font-size:27px;line-height:1.15;font-weight:600;letter-spacing:-.022em;
  font-variation-settings:"opsz" 30;
  text-wrap:balance;
}
.detail .vorspann{
  margin-top:10px;
  font-family:var(--redaktion);
  font-size:18px;line-height:1.48;color:var(--tinte-2);
  font-variation-settings:"opsz" 20;
}
.detail .fliess{margin-top:18px}
.detail .fliess p{
  font-family:var(--redaktion);
  font-size:17px;line-height:1.62;color:var(--tinte);
  font-variation-settings:"opsz" 16;
  margin-bottom:14px;
}
.detail .fliess p:last-child{margin-bottom:0}
.detail .fliess b{font-weight:650}
.detail .nachweis{
  padding:0 var(--rand);margin:-14px 0 20px;
  font-size:11.5px;color:var(--tinte-3);
}
.anhang{
  display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  margin-top:24px;padding:13px 14px;
  border:1px solid var(--linie);border-radius:13px;
  transition:background-color .18s linear,transform .18s var(--schwung);
}
.anhang:active{background:var(--flaeche);transform:scale(.99)}
.anhang .ikon{width:21px;height:21px;color:var(--rot)}
.anhang .name{flex:1;min-width:0}
.anhang .name strong{display:block;font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.anhang .name small{display:block;margin-top:1px;font-size:12px;color:var(--tinte-3)}

/* ============ Tab-Leiste ============ */
.tabs{
  position:relative;z-index:50;flex:none;
  height:calc(var(--tabs-h) + var(--unten));
  padding-bottom:var(--unten);
  display:grid;grid-template-columns:repeat(4,1fr);
  background:var(--glas-fest);
  backdrop-filter:saturate(180%) blur(20px);
  -webkit-backdrop-filter:saturate(180%) blur(20px);
  border-top:1px solid var(--linie);
}
.tab{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;color:var(--tinte-3);
  transition:color .2s linear;
}
.tab span{
  font-size:10.5px;font-weight:500;letter-spacing:-.005em;
}
.tab .ikon{
  width:25px;height:25px;stroke-width:1.6;
  transition:transform .34s var(--schwung);
}
.tab.ist-aktiv{color:var(--rot)}
.tab.ist-aktiv .ikon{stroke-width:1.9;transform:translateY(-1px)}
.tab:active .ikon{transform:scale(.9)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .buehne{scroll-behavior:auto}
}

/* ============ Kurze Rückmeldung (Entwurfs-Hinweis) ============ */
.melder{
  position:absolute;left:50%;z-index:60;
  bottom:calc(var(--tabs-h) + var(--unten) + 14px);
  transform:translateX(-50%);
  max-width:calc(100% - 40px);
  padding:10px 15px;border-radius:999px;
  background:var(--melder-flaeche);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:var(--melder-text);font-size:12.5px;font-weight:500;letter-spacing:-.005em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  box-shadow:0 8px 24px -10px rgba(21,23,27,.6);
  animation:melder-auf .3s var(--schwung) both;
}
.melder.weg{animation:melder-zu .26s var(--schwung) both}
@keyframes melder-auf{from{opacity:0;transform:translate(-50%,10px) scale(.96)}to{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes melder-zu{from{opacity:1;transform:translate(-50%,0)}to{opacity:0;transform:translate(-50%,8px) scale(.97)}}

/* ============ Im Geräterahmen der Bühne ============ */
html.im-rahmen{--oben:54px;--unten:34px}

/* ============================================================
   Inhaltsseiten (Stundenzeiten, AGs, Kollegium, Geschichte …)
   ============================================================ */
.s-inhalt{padding:18px var(--rand) 0}

.s-p{
  font-family:var(--redaktion);
  font-size:16.5px;line-height:1.6;color:var(--tinte);
  font-variation-settings:"opsz" 16;
  margin-bottom:14px;
}
.s-p b{font-weight:650}
.s-h{
  font-family:var(--ui);
  font-size:12px;font-weight:600;letter-spacing:.075em;text-transform:uppercase;
  color:var(--tinte-3);
  margin:26px 0 10px;
}
.s-inhalt > .s-h:first-child{margin-top:0}

.s-ul{
  list-style:none;padding:0;margin-bottom:16px;
  display:flex;flex-direction:column;
}
.s-ul li{
  position:relative;padding:7px 0 7px 18px;
  font-size:15px;line-height:1.45;
  border-bottom:1px solid var(--linie-zart);
}
.s-ul li:last-child{border-bottom:0}
.s-ul li::before{
  content:"";position:absolute;left:2px;top:15px;
  width:5px;height:5px;border-radius:50%;background:var(--rot);opacity:.55;
}

/* Tabellen dürfen quer scrollen, die Seite nicht */
.s-tab-halter{
  overflow-x:auto;margin:0 calc(var(--rand) * -1) 18px;
  padding:0 var(--rand);
  -webkit-overflow-scrolling:touch;
}
.s-tab{
  width:100%;border-collapse:collapse;
  font-size:14px;font-variant-numeric:tabular-nums;
}
.s-tab.ist-eng{font-size:13px}
.s-tab th{
  text-align:left;padding:0 10px 7px 0;
  font-size:11px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  color:var(--tinte-3);white-space:nowrap;
  border-bottom:1px solid var(--linie);
}
.s-tab td{
  padding:9px 10px 9px 0;
  border-bottom:1px solid var(--linie-zart);
  vertical-align:top;
}
.s-tab tr td:first-child{font-weight:500;white-space:nowrap}
.s-tab tr:last-child td{border-bottom:0}

.s-paare{margin-bottom:18px}
.s-paare > div{
  display:grid;grid-template-columns:1fr;gap:1px;
  padding:10px 0;border-bottom:1px solid var(--linie-zart);
}
.s-paare > div:last-child{border-bottom:0}
.s-paare dt{font-size:12.5px;color:var(--tinte-3)}
.s-paare dd{font-size:15.5px;letter-spacing:-.01em;overflow-wrap:anywhere}

/* Zeitleiste der Schulgeschichte */
.s-zeit{list-style:none;padding:0;margin:2px 0 6px}
.s-zeit li{
  position:relative;
  padding:0 0 20px 22px;
  border-left:1px solid var(--linie);
}
.s-zeit li:last-child{border-left-color:transparent;padding-bottom:4px}
.s-zeit li::before{
  content:"";position:absolute;left:-4.5px;top:6px;
  width:8px;height:8px;border-radius:50%;
  background:var(--papier);border:2px solid var(--rot);
}
.s-zeit .jahr{
  display:block;font-size:12.5px;font-weight:600;
  letter-spacing:.02em;color:var(--rot);
  font-variant-numeric:tabular-nums;
}
.s-zeit .was{
  display:block;margin-top:4px;
  font-family:var(--redaktion);font-size:15.5px;line-height:1.55;
  font-variation-settings:"opsz" 16;
}

.s-kontakt{margin-bottom:18px}
.s-kontakt-zeile{
  display:flex;align-items:center;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--linie-zart);
  font-size:15px;color:var(--tinte);text-decoration:none;
  overflow-wrap:anywhere;
}
.s-kontakt-zeile:last-child{border-bottom:0}
a.s-kontakt-zeile{color:var(--tinte)}
a.s-kontakt-zeile:active{opacity:.6}
.s-kontakt-zeile .ikon{width:19px;height:19px;color:var(--rot);opacity:.8}

.s-hinweis{
  margin:4px 0 16px;padding:12px 14px;
  background:var(--flaeche);border-radius:12px;
  font-size:13.5px;line-height:1.5;color:var(--tinte-2);
}
.s-hinweis b{color:var(--tinte);font-weight:600}

/* Ehrliche Lücke */
.s-leer{
  display:flex;flex-direction:column;gap:5px;
  margin:6px 0 16px;padding:15px 16px;
  border:1px dashed var(--linie);border-radius:13px;
}
.s-leer strong{font-size:14.5px;font-weight:600;letter-spacing:-.01em}
.s-leer span{font-size:13.5px;line-height:1.5;color:var(--tinte-3)}

/* Lange Liste mit eigener Suche (Kollegium) */
.suchfeld.ist-klein{margin:0 0 4px;height:40px}
.s-liste{margin-bottom:8px}
.s-zeile{
  display:flex;align-items:center;gap:12px;
  padding:11px 0;border-bottom:1px solid var(--linie-zart);
}
.s-zeile[hidden]{display:none}
.s-zeile:last-of-type{border-bottom:0}
.s-zeile .kuerzel{
  width:34px;flex:none;
  font-size:11px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--tinte-3);
}
.s-zeile .wer{min-width:0}
.s-zeile .wer strong{display:block;font-size:15px;font-weight:500;letter-spacing:-.01em}
.s-zeile .wer small{display:block;margin-top:1px;font-size:12.5px;color:var(--tinte-3)}
.s-leer-treffer{
  padding:26px 0;text-align:center;
  font-size:13.5px;color:var(--tinte-3);
}
.s-leer-treffer[hidden]{display:none}

.s-inhalt .anhang{margin-top:6px;margin-bottom:12px}

/* Nachladen (Termine) */
.nachladen{padding:20px var(--rand) 8px}
.mehr-knopf{
  display:block;width:100%;
  padding:14px 16px;
  border:1px solid var(--linie);border-radius:13px;
  background:var(--papier);
  font-size:14.5px;font-weight:500;letter-spacing:-.01em;
  color:var(--tinte-2);
  transition:background-color .18s linear,border-color .18s linear,transform .18s var(--schwung);
}
.mehr-knopf:active{background:var(--flaeche);border-color:var(--deko);transform:scale(.985)}
.spaeter[hidden]{display:none}
.spaeter{animation:spaeter-auf .42s var(--schwung)}
@keyframes spaeter-auf{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ============ Good News der Woche ============
   Die erste Zeile der App und bewusst die leiseste: kleiner Text, flache
   Fläche, kein Bild. Sie soll gelesen und dann übersehen werden können —
   die Hauptsache dieser App ist die Schule, nicht die Weltlage. */
/* Ueberschrift und „Mehr erfahren" links, ein kleines Bild rechts. Die ganze
   Flaeche ist der Knopf: Auf dem Telefon trifft der Daumen die Karte, nicht
   die zwei Woerter darin.

   `overflow:hidden` ist hier kein Zierrat — ohne es stiesse das Bild die
   runden Ecken der Karte rechts wieder gerade. */
.goodnews{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:12px;
  /* KEIN width:100% — das ist der Fehler, der die Karte am 05.09.2026 nach
     rechts aus dem Bild schob. `<button>` und `<a>` sind von Haus aus
     inline-level; `width:100%` rechnet dann gegen die volle Breite des
     Elternelements und nicht gegen den Platz zwischen den Außenabständen.
     Ergebnis: 390 px breit ab x=20, also 20 px über den Rand hinaus, und die
     rechte runde Ecke lag außerhalb. Ein Grid-Container ist ohnehin
     block-level und füllt den Platz von allein. */
  text-align:left;
  margin:14px var(--rand) 0;
  padding:12px;
  background:var(--flaeche-zart);
  border:1px solid var(--linie-zart);
  border-radius:14px;
  overflow:hidden;
  font:inherit;color:var(--tinte);
}
.gn-wort{display:block;min-width:0;padding-left:2px}
.gn-bild{
  width:66px;height:66px;flex:none;
  border-radius:11px;          /* auch rechts rund, wie die Karte selbst */
  object-fit:cover;display:block;
  background:var(--flaeche);
}
.goodnews.ist-antippbar{transition:border-color .15s var(--schwung),transform .15s var(--schwung)}
.goodnews.ist-antippbar:active{border-color:var(--rot);transform:scale(.99)}
.gn-titel{
  display:block;margin-top:5px;
  font-family:var(--redaktion);
  font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em;color:var(--tinte);
}
.gn-mehr{
  display:inline-flex;align-items:center;gap:5px;
  margin-top:9px;font-size:13px;font-weight:500;color:var(--rot);
}
.gn-mehr i{font-style:normal}
/* --deko ist eine Linien- und Symbolfarbe, keine Textfarbe: Auf der zarten
   Flaeche kommt sie auf 2,5:1 und faellt damit durch. Fuer Text steht
   --tinte-3 (#6B7280) zur Verfuegung — dieselbe Zurueckhaltung, aber lesbar.
   Am 01.09.2026 von Axe im Browser gefunden. */
.gn-marke{
  display:block;
  margin:0;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinte-3);
}
.gn-quelle{margin:6px 0 0;font-size:11.5px;color:var(--tinte-3)}
.gn-quelle a{color:var(--tinte-3);text-decoration:underline}

/* ============ Abstimmen ============ */
.sv-hinweis{
  margin:0 var(--rand) 14px;padding:10px 12px;
  background:var(--rot-flaeche);border-radius:12px;
  font-size:12.5px;line-height:1.5;color:var(--rot-tief);
}
.sv-karte{
  margin:0 var(--rand) 12px;padding:16px;
  background:var(--papier);border:1px solid var(--linie);border-radius:16px;
}
.sv-karte h2{margin:0;font-size:17px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.sv-zusatz{margin:6px 0 0;font-size:13px;line-height:1.5;color:var(--tinte-3)}
.sv-optionen{margin-top:14px;display:flex;flex-direction:column;gap:8px}

/* Vor der Wahl: große, ruhige Knöpfe — einer je Zeile, damit der Daumen
   nicht zielen muss. */
.sv-option{
  width:100%;padding:13px 14px;text-align:left;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:12px;
  font:inherit;font-size:14.5px;color:var(--tinte);
  transition:background .15s var(--schwung),border-color .15s var(--schwung);
}
.sv-option:active{background:var(--rot-flaeche);border-color:var(--rot)}

/* Nach der Wahl: dasselbe Feld, jetzt als Balken. Die Zeile springt nicht um,
   sie füllt sich — der Wechsel soll wie eine Antwort wirken, nicht wie ein
   Seitenwechsel. */
.sv-ergebnis{
  position:relative;overflow:hidden;
  padding:13px 14px;border-radius:12px;
  border:1px solid var(--linie);background:var(--flaeche);
  display:flex;align-items:center;gap:10px;
  font-size:14.5px;
}
.sv-ergebnis.ist-meine{border-color:var(--rot);background:var(--rot-flaeche)}
.sv-balken{
  position:absolute;left:0;top:0;bottom:0;
  background:var(--rot-flaeche);
  transition:width .5s var(--schwung);
}
.sv-ergebnis.ist-meine .sv-balken{background:rgba(193,33,43,.22)}
.sv-label{position:relative;flex:1;min-width:0}
.sv-label b{font-weight:600;color:var(--rot-tief)}
.sv-label small{display:block;margin-top:1px;font-size:11.5px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--rot-tief)}
.sv-prozent{position:relative;font-variant-numeric:tabular-nums;color:var(--tinte-3);font-size:13px}

.sv-fuss{margin:12px 0 0;font-size:12px;color:var(--tinte-3)}
.sv-fuss a{color:var(--rot);text-decoration:underline;text-underline-offset:2px}

/* Meinung geändert? Bewusst ein ruhiger Knopf und kein roter: Die Stimme
   zurückzunehmen ist ein Ausweg, keine Einladung — eine gefüllte Signalfläche
   direkt unter dem eigenen Ergebnis würde zum Antippen aus Neugier verleiten.
   44 Pixel hoch, weil das die Fingerspitze ist, nicht die Maus. */
.sv-umentscheiden{margin-top:12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.sv-zurueck{
  font-family:var(--ui);font-size:14px;font-weight:600;line-height:1;
  min-height:44px;padding:0 16px;border-radius:12px;
  border:1px solid var(--linie);background:transparent;color:var(--tinte);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background-color .15s ease,border-color .15s ease,transform .1s ease;
}
.sv-zurueck:hover{background:var(--flaeche-zart);border-color:var(--tinte-3)}
.sv-zurueck:active{transform:scale(.97)}
.sv-zurueck:focus-visible{outline:2px solid var(--rot);outline-offset:2px}
.sv-zurueck:disabled{opacity:.6;cursor:default;transform:none}
.sv-umentscheiden span{font-size:12px;color:var(--tinte-3)}
@media (prefers-reduced-motion:reduce){
  .sv-zurueck{transition:none}
  .sv-zurueck:active{transform:none}
}
.sv-entwurf{
  margin:18px var(--rand) 8px;padding:12px 14px;
  border:1px dashed var(--linie);border-radius:12px;
  font-size:12.5px;line-height:1.55;color:var(--tinte-3);
}

/* ===========================================================================
   Mitbestimmen — die Teile, die seit dem 01.09.2026 am Server hängen
   ---------------------------------------------------------------------------
   Alles hier bleibt in der Bildsprache der App: weiß, eine Signalfarbe, große
   Flächen zum Antippen. Der Wahlkampfblock ist die einzige Ausnahme — er ist
   ganz rot, weil er das eine ist, was auffallen soll, und weil er nach der
   Wahl wieder verschwindet.
   =========================================================================== */

/* ------------------------------------------- Projekte auf der Startseite
   Seit dem 28.09.2026 unter der Good News. Eine Reihe zum Wischen statt einer
   Liste: sieben Projekte untereinander würden die Startseite zur Projektseite
   machen. Die nächste Karte ragt angeschnitten herein — so sieht man, dass es
   weitergeht, ohne Pfeile oder Punkte. */
.ps{margin:18px 0 0}
.ps-kopf{
  display:flex;align-items:baseline;justify-content:space-between;gap:10px;
  margin:0 var(--rand);
}
.ps-titel{
  margin:0;font-family:var(--redaktion);
  font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;color:var(--tinte);
}
.ps-marke{
  flex:none;background:var(--rot-voll);color:var(--auf-rot);
  font-size:11px;font-weight:700;letter-spacing:.02em;
  padding:4px 10px;border-radius:999px;
}
.ps-reihe{
  display:flex;gap:10px;overflow-x:auto;
  padding:10px var(--rand) 4px;
  scroll-snap-type:x mandatory;scroll-padding:0 var(--rand);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.ps-reihe::-webkit-scrollbar{display:none}
.ps-karte{
  flex:0 0 72%;max-width:260px;scroll-snap-align:start;
  display:flex;flex-direction:column;text-align:left;
  padding:14px;border-radius:14px;
  background:var(--papier);border:1px solid var(--linie-zart);
  box-shadow:var(--schatten);
  font:inherit;color:var(--tinte);
  transition:transform .15s var(--schwung),border-color .15s var(--schwung);
}
.ps-karte:active{transform:scale(.985);border-color:var(--rot)}
.ps-karte b{font-size:15px;line-height:1.3;font-weight:600}
.ps-kurz{
  margin-top:5px;font-size:12.5px;line-height:1.45;color:var(--tinte-3);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.ps-mit{margin-top:auto;padding-top:10px;font-size:13px;font-weight:600;color:var(--rot)}
.pj{scroll-margin-top:72px}   /* unter der Kopfleiste, nicht dahinter */

/* ------------------------------------------------ Live-Umfrage (Startseite)
   Ganz unten auf der Startseite, solange eine Umfrage läuft. Eine Karte, die
   ganz antippbar ist; der Pfeil sagt, dass es woandershin geht. */
.lu{
  display:flex;align-items:center;gap:14px;
  margin:22px var(--rand) 0;padding:16px 16px 16px 18px;
  background:var(--rot-flaeche);border:1px solid var(--rot);border-radius:16px;
  color:var(--tinte);text-decoration:none;
  transition:transform .15s var(--schwung);
}
.lu:active{transform:scale(.985)}
.lu:focus-visible{outline:2px solid var(--rot);outline-offset:3px}
.lu-wort{flex:1;min-width:0;display:block}
.lu-marke{
  display:inline-block;background:var(--rot-voll);color:var(--auf-rot);
  font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:3px 9px;border-radius:999px;
}
.lu-titel{
  display:block;margin-top:8px;font-family:var(--redaktion);
  font-size:20px;line-height:1.2;font-weight:600;letter-spacing:-.01em;
}
.lu-satz{display:block;margin-top:4px;font-size:13px;line-height:1.45;color:var(--tinte-2)}
.lu-pfeil{
  flex:none;width:26px;height:26px;fill:none;stroke:var(--rot);
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;
}

/* ---------------------------------------------------------- Wahlkampfblock */
.wk{
  margin:14px var(--rand) 0;padding:16px 16px 14px;
  background:var(--rot-voll);color:var(--auf-rot);border-radius:18px;
  box-shadow:var(--schatten);
}
.wk-kopf{display:flex;align-items:center;justify-content:space-between;gap:10px}
.wk-marke{
  font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  opacity:.92;
}
.wk-zaehler{
  flex:none;background:var(--auf-rot);color:var(--rot-voll);
  font-size:11px;font-weight:700;font-variant-numeric:tabular-nums;
  padding:3px 9px;border-radius:999px;
}
.wk-titel{
  font-family:var(--redaktion);
  margin:8px 0 0;font-size:26px;line-height:1.1;font-weight:600;letter-spacing:-.015em;
}
.wk-satz{margin:8px 0 0;font-size:13.5px;line-height:1.55}
.wk-kacheln{margin-top:14px;display:flex;flex-direction:column;gap:8px}
/* Weiße Karten auf der Fläche: Text mit Deckkraft unter 100 % auf Rot bleibt
   unter dem Kontrastmaß, und abheben sollen sie sich ohnehin. */
.wk-kachel{
  display:block;width:100%;text-align:left;
  background:var(--papier);border-radius:12px;padding:12px 14px;
  font:inherit;color:var(--tinte);
  transition:transform .15s var(--schwung);
}
.wk-kachel:active{transform:scale(.985)}
.wk-kachel b{display:block;font-size:14.5px;font-weight:600}
.wk-kachel span{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--tinte-3)}

/* ------------------------------------------------------------- Anmeldung */
.sv-anmeldung{
  margin:0 var(--rand) 12px;padding:14px;
  background:var(--flaeche);border:1px solid var(--linie);border-radius:16px;
}
.sv-anmeldung p{font-size:13.5px;line-height:1.55;color:var(--tinte-2)}
.sv-eingabe{margin-top:10px;display:flex;gap:8px}
.sv-eingabe input{
  flex:1;min-width:0;padding:12px 14px;
  border:1px solid var(--linie);border-radius:12px;background:var(--papier);
  font:inherit;font-size:16px;               /* 16px: iOS zoomt sonst beim Tippen */
  letter-spacing:.08em;text-transform:uppercase;
}
.sv-eingabe input:focus{outline:2px solid var(--rot);outline-offset:1px;border-color:var(--rot)}

.sv-knopf{
  display:block;width:100%;margin-top:12px;padding:13px 16px;
  background:var(--rot-voll);color:var(--auf-rot);border:0;border-radius:12px;
  font:inherit;font-size:15px;font-weight:600;
  transition:transform .15s var(--schwung);
}
.sv-eingabe .sv-knopf{width:auto;margin-top:0;flex:none}
.sv-knopf:active{transform:scale(.985)}
.sv-knopf:disabled{opacity:.55}

.sv-fehler{margin-top:8px;font-size:13px;color:var(--rot-tief)}
.sv-erfolg{margin:0;font-size:14px;font-weight:600;color:var(--rot-tief)}

/* Der Anonymitätssatz unter jeder Abstimmung. Klein, aber immer da. */
.sv-anonym{
  margin:12px 0 0;padding-top:12px;border-top:1px solid var(--linie-zart);
  font-size:11.5px;line-height:1.55;color:var(--tinte-3);
}
.sv-anonym i{font-style:italic}

/* --------------------------------------------------------------- Ideenfeld */
.sv-ideen textarea{
  width:100%;margin-top:12px;padding:12px 14px;resize:vertical;
  border:1px solid var(--linie);border-radius:12px;background:var(--flaeche);
  font:inherit;font-size:16px;line-height:1.5;color:var(--tinte);
}
.sv-ideen textarea:focus{outline:2px solid var(--rot);outline-offset:1px}
.sv-ideen textarea:disabled{opacity:.6}

/* ------------------------------------------------------- Wege zu den Ebenen */
.sv-wege{margin:18px var(--rand) 4px;display:flex;flex-direction:column;gap:8px}
.sv-weg{
  display:block;width:100%;text-align:left;padding:14px 16px;
  background:var(--papier);border:1px solid var(--linie);border-radius:14px;
  font:inherit;color:var(--tinte);
  transition:border-color .15s var(--schwung);
}
.sv-weg:active{border-color:var(--rot)}
.sv-weg b{display:block;font-size:15px;font-weight:600}
.sv-weg span{display:block;margin-top:2px;font-size:12.5px;color:var(--tinte-3)}

.sv-teaser{
  display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--tinte-3);
}

/* --------------------------------------------------------------- Ebenen */
.ebene{padding:0 var(--rand) 40px}
.sv-einzeln h1{
  font-family:var(--redaktion);
  margin-top:6px;font-size:27px;line-height:1.18;font-weight:600;letter-spacing:-.015em;
}
.sv-datum{font-size:11.5px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--rot)}
.sv-vorspann{margin-top:10px;font-size:16px;line-height:1.55;color:var(--tinte-2)}
.sv-einzeln p{margin-top:14px;font-family:var(--redaktion);font-size:16.5px;line-height:1.62}

/* ------------------------------------------------------------- Projekte */
.pj{
  margin-bottom:12px;padding:16px;
  background:var(--papier);border:1px solid var(--linie);border-radius:16px;
}
.pj h2{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.pj-kurz{margin:6px 0 0;font-size:14px;line-height:1.5;color:var(--tinte-2)}
.pj-text{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--tinte-3)}
.pj-meta{margin:10px 0 0;font-size:12.5px;color:var(--tinte-3)}
/* `display:flex` aus einer Klasse schlaegt das `display:none`, das der Browser
   dem Attribut `hidden` mitgibt — eine Klasse ist spezifischer als die
   UA-Regel. Ohne die zweite Zeile stuende das Anmeldeformular offen da, bevor
   jemand „Ich mach mit" gedrueckt hat. Genau diese Falle steckt schon in
   `.detail[hidden]` weiter oben. */
.pj-form{margin-top:12px;display:flex;flex-direction:column;gap:10px}
.pj-form[hidden]{display:none}
.pj-form label{display:block;font-size:12.5px;color:var(--tinte-3)}
.pj-form input,.pj-form textarea{
  width:100%;margin-top:4px;padding:11px 13px;
  border:1px solid var(--linie);border-radius:11px;background:var(--flaeche);
  font:inherit;font-size:16px;color:var(--tinte);
}
.pj-form input:focus,.pj-form textarea:focus{outline:2px solid var(--rot);outline-offset:1px}
.pj-form .sv-knopf{margin-top:0}

/* ---------------------------------------------------------- Wahlprogramm */
.pg-video{margin-bottom:24px}
.pg-rahmen{position:relative;padding-top:56.25%;border-radius:14px;overflow:hidden;background:#000}
/* Der Startknopf traegt dieselbe Klasse, hat aber Inhalt statt eines
   eingehaengten Videos — deshalb keine Hoehe aus padding-top, sondern
   ein festes Seitenverhaeltnis. */
.pg-rahmen.pg-start{padding-top:0;aspect-ratio:16/9;background:var(--flaeche)}
.pg-rahmen iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.pg-luecke{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  aspect-ratio:16/9;padding:20px;text-align:center;
  border:1px dashed var(--linie);border-radius:14px;
}
.pg-luecke b{font-size:15px;font-weight:600}
.pg-luecke span{font-size:13px;color:var(--tinte-3)}

.pg-bereich{margin-bottom:26px}
.pg-bereich h2{
  font-family:var(--redaktion);
  font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.015em;
}
.pg-ein{margin:6px 0 14px;font-size:14px;line-height:1.55;color:var(--tinte-3)}
.pg-punkt{
  margin-bottom:10px;padding:14px 16px;
  background:var(--papier);border:1px solid var(--linie);border-radius:14px;
}
/* Hauptpunkte tragen die Kampagne — die Einteilung kommt aus der Spalte
   „Gewichtung" des Teams und darf in der App nicht verlorengehen. */
.pg-punkt.ist-haupt{border-left:3px solid var(--rot)}
.pg-marke{
  margin:0;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--tinte-3);
}
.pg-satz{
  font-family:var(--redaktion);
  margin:6px 0 0;font-size:18px;line-height:1.32;font-weight:600;letter-spacing:-.01em;
}
.pg-text{margin:8px 0 0;font-size:13.5px;line-height:1.6;color:var(--tinte-3)}

.pg-team h2{
  font-family:var(--redaktion);
  font-size:23px;line-height:1.2;font-weight:600;letter-spacing:-.015em;margin-bottom:12px;
}
.pg-koepfe{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.pg-kopf{
  padding:16px 12px;text-align:center;
  background:var(--papier);border:1px solid var(--linie);border-radius:14px;
}
.pg-kopf.ist-offen{border-style:dashed}
.pg-initial{
  display:grid;place-items:center;width:52px;height:52px;margin:0 auto 10px;
  border-radius:50%;background:var(--rot-flaeche);color:var(--rot-tief);
  font-family:var(--redaktion);font-size:22px;font-weight:600;
}
.pg-kopf.ist-offen .pg-initial{background:var(--flaeche);color:var(--tinte-3)}
.pg-kopf b{display:block;font-size:14.5px;font-weight:600}
.pg-kopf span{display:block;font-size:12.5px;color:var(--tinte-3)}
.pg-kopf p{margin-top:6px;font-size:12.5px;line-height:1.5;color:var(--tinte-3)}


/* Erklaerzeile unter den Darstellungs-Chips. */
.chip-hinweis{
  margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--tinte-3);
}


/* ============ Bannerplatz ganz oben in der App ============
   Dieselbe Haltung wie beim fehlenden Wahlvideo: Was noch nicht da ist, steht
   als ausgewiesene Lücke da und nicht als leerer Kasten, der wie ein
   Ladefehler aussieht. Das Seitenverhältnis steht schon fest, damit die Seite
   beim Eintragen des Bildes nicht springt. */
.app-banner{
  display:grid;place-items:center;
  margin:14px var(--rand) 0;
  aspect-ratio:3 / 1;
  border:1px dashed var(--linie);
  border-radius:16px;
  background:var(--flaeche-zart);
  overflow:hidden;
}
.app-banner span{font-size:13px;color:var(--tinte-3)}
.app-banner.ist-bild{border-style:solid;border-color:var(--linie);background:var(--flaeche)}
.app-banner img{width:100%;height:100%;object-fit:cover;display:block}
a.app-banner{transition:transform .15s var(--schwung)}
button.app-banner{width:calc(100% - 2*var(--rand));padding:0;font:inherit;color:inherit;cursor:pointer;-webkit-appearance:none;appearance:none;transition:transform .15s var(--schwung)}
button.app-banner:active,a.app-banner:active{transform:scale(.985)}
a.app-banner:active{transform:scale(.99)}


/* Der Startknopf vor dem Video. Er sieht aus wie das Video, das er ersetzt,
   damit die Seite beim Starten nicht springt. */
.pg-start{
  display:flex;align-items:center;gap:14px;
  width:100%;padding:0 18px;text-align:left;
  border:1px solid var(--linie);background:var(--flaeche);
  font:inherit;color:var(--tinte);
  transition:border-color .15s var(--schwung);
}
.pg-start:active{border-color:var(--rot)}
.pg-play{
  flex:none;display:grid;place-items:center;
  width:46px;height:46px;border-radius:50%;
  background:var(--rot-voll);color:var(--auf-rot);font-size:17px;
  padding-left:3px;
}
.pg-start-text{display:block;font-size:15px;font-weight:600}
.pg-start-text small{
  display:block;margin-top:3px;font-size:12.5px;font-weight:400;line-height:1.45;
  color:var(--tinte-3);
}