/* ============================================================
   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;
  --deko:#9AA0AC;

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

  /* Signalfarbe: aus dem Logo der Schule ausgelesen */
  --rot:#C1212B;
  --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);
}

*{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));
  padding:var(--oben) 8px 0;
  display:flex;align-items:center;gap:4px;
  background:rgba(255,255,255,.82);
  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}
.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 ============ */
.schnell{
  display:grid;grid-template-columns:repeat(4,1fr);
  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;
}
.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 ============ */
.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);color:var(--papier);
  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);border-color:var(--rot);color:var(--papier);
}
.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)}
.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(5,1fr);
  background:rgba(255,255,255,.88);
  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:rgba(21,23,27,.92);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  color:#fff;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. */
.goodnews{
  margin:14px var(--rand) 0;
  padding:12px 14px;
  background:var(--flaeche-zart);
  border:1px solid var(--linie-zart);
  border-radius:14px;
}
.gn-marke{
  margin:0;font-size:10.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--deko);
}
.gn-text{
  margin:4px 0 0;font-size:13.5px;line-height:1.5;color:var(--tinte-2,var(--tinte));
}
.gn-text b{font-weight:600;color:var(--tinte)}
.gn-quelle{margin:6px 0 0;font-size:11.5px;color:var(--deko)}
.gn-quelle a{color:var(--deko);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(--deko)}
.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)}
.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,.14)}
.sv-label{position:relative;flex:1;min-width:0}
.sv-label b{font-weight:600;color:var(--rot-tief)}
.sv-prozent{position:relative;font-variant-numeric:tabular-nums;color:var(--deko);font-size:13px}

.sv-fuss{margin:12px 0 0;font-size:12px;color:var(--deko)}
.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(--deko);
}