/* JGG Schülerinfo – Webapp
 * Design-System „Academic Clarity", Tokens 1:1 aus der iOS-App
 * (Schuelerinfo-iOS/Schuelerinfo/DesignSystem/Farben.swift). Bei Änderungen
 * dort hier mitziehen, damit App und Webapp gleich aussehen. */

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

:root {
  color-scheme: light dark;
  --hintergrund: #F3FAFF;
  --flaeche: #FFFFFF;
  --flaeche-gedimmt: #F7FBFE;
  --text: #1F2A37;
  --text-gedimmt: #5B6675;
  --rahmen: #E3EDF5;
  --akzent: #2E7D32;
  --auf-akzent: #FFFFFF;
  --akzent-zart: #E6F4E7;
  --auf-akzent-zart: #2E7D32;
  --rot: #C62828;  --rot-zart: #FDECEC;
  --amber: #A36A00; --amber-zart: #FFF6E5;
  --blau: #1565C0; --blau-zart: #E8F1FC;
  --logo-zeile: #3F3C3C;
  --leiste: rgba(243, 250, 255, 0.82);
  --schatten: 0 2px 6px rgba(0, 0, 0, 0.04);
  --schatten-hoch: 0 10px 40px rgba(15, 20, 27, 0.18);
  --radius: 10px;
  --radius-gross: 16px;
  --tab-hoehe: 56px;
  --oben: env(safe-area-inset-top, 0px);
  --unten: env(safe-area-inset-bottom, 0px);
  --schrift: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", system-ui, "Segoe UI", Roboto, sans-serif;
  --schrift-rund: ui-rounded, -apple-system, "SF Pro Rounded", "Inter", system-ui, sans-serif;

  /* Fachfarben – Schrift/Fläche, siehe Fachfarben.swift */
  --f0s: #2E7D32; --f0f: #E6F4E7;
  --f1s: #1565C0; --f1f: #E6F0FB;
  --f2s: #6A3FB5; --f2f: #F0EAFB;
  --f3s: #C0392B; --f3f: #FBEBE9;
  --f4s: #00796B; --f4f: #E2F3F1;
  --f5s: #9A6400; --f5f: #FBF0DA;
  --f6s: #3949AB; --f6f: #EAECFA;
  --f7s: #B02A6E; --f7f: #FBE9F2;
  --f8s: #5F7A1F; --f8f: #EFF4E1;
  --f9s: #54606E; --f9f: #EDF1F5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --hintergrund: #0F141B;
    --flaeche: #182029;
    --flaeche-gedimmt: #1E2732;
    --text: #E7ECF3;
    --text-gedimmt: #9AA6B4;
    --rahmen: #26303C;
    --akzent: #52C452;
    --auf-akzent: #0B1420;
    --akzent-zart: #18301C;
    --auf-akzent-zart: #9ADFA0;
    --rot: #FF6B6B;  --rot-zart: #35191B;
    --amber: #FFC145; --amber-zart: #322611;
    --blau: #74B4F5; --blau-zart: #152436;
    --leiste: rgba(15, 20, 27, 0.8);
    --schatten: 0 2px 6px rgba(0, 0, 0, 0.25);
    --schatten-hoch: 0 10px 40px rgba(0, 0, 0, 0.5);
    --f0s: #74D67C; --f0f: #18301C;
    --f1s: #7CB8F7; --f1f: #142639;
    --f2s: #BCA1F2; --f2f: #251D3B;
    --f3s: #FF9184; --f3f: #371E1B;
    --f4s: #5FD5C6; --f4f: #11302D;
    --f5s: #F3BA48; --f5f: #33270F;
    --f6s: #97A3F3; --f6f: #1D2142;
    --f7s: #F396C4; --f7f: #361A29;
    --f8s: #B6CE71; --f8f: #232C12;
    --f9s: #AEB9C6; --f9f: #252D37;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.35;
  color: var(--text);
  background: var(--hintergrund);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--akzent); }
[hidden] { display: none !important; }
.nur-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2.5px solid var(--akzent); outline-offset: 2px; border-radius: 6px; }

/* ------------------------------------------------------------------ */
/* App-Gerüst                                                          */
/* ------------------------------------------------------------------ */

#app { min-height: 100dvh; }

.leiste {
  position: fixed; inset: 0 0 auto 0; z-index: 20;
  height: calc(44px + var(--oben)); padding-top: var(--oben);
  display: flex; align-items: center; justify-content: center;
  background: transparent;
  transition: background .2s, border-color .2s;
  border-bottom: 0.5px solid transparent;
}
.leiste.fest {
  background: var(--leiste);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--rahmen);
}
.leiste-titel { font-size: 17px; font-weight: 600; opacity: 0; transform: translateY(4px); transition: opacity .2s, transform .2s; }
.leiste.fest .leiste-titel { opacity: 1; transform: none; }
.leiste-zurueck {
  position: absolute; left: max(8px, env(safe-area-inset-left)); bottom: 0; height: 44px;
  display: flex; align-items: center; gap: 2px; padding: 0 8px 0 2px;
  border: 0; background: none; color: var(--akzent); font-size: 17px;
}
.leiste-zurueck svg.ic { width: 24px; height: 24px; stroke-width: 2.4; }
.leiste-aktion {
  position: absolute; right: max(12px, env(safe-area-inset-right)); bottom: 0; height: 44px;
  display: flex; align-items: center; border: 0; background: none; color: var(--akzent); font-size: 17px; font-weight: 600;
}

main.seite {
  max-width: 720px; margin: 0 auto;
  padding: calc(44px + var(--oben) + var(--band-hoehe, 0px)) 16px calc(var(--tab-hoehe) + var(--unten) + 32px);
  transition: padding-top .25s ease;
  animation: einblenden .28s ease;
}
@keyframes einblenden { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.grosstitel { padding: 4px 4px 14px; }
.grosstitel h1 { margin: 0; font-size: 34px; line-height: 1.12; font-weight: 700; letter-spacing: .2px; }
.grosstitel p { margin: 4px 0 0; color: var(--text-gedimmt); font-size: 15px; }

.stapel { display: flex; flex-direction: column; gap: 14px; }
.abschnitt { display: flex; align-items: baseline; justify-content: space-between; margin: 10px 4px -4px; }
.abschnitt h2 { margin: 0; font-size: 20px; font-weight: 700; }
.abschnitt span, .abschnitt button { font-size: 15px; color: var(--text-gedimmt); background: none; border: 0; padding: 0; }
.abschnitt button { color: var(--akzent); }

/* Tab-Leiste wie UITabBar */
.tabs {
  position: fixed; inset: auto 0 0 0; z-index: 30;
  padding-bottom: var(--unten);
  background: var(--leiste);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-top: 0.5px solid var(--rahmen);
}
.tabs nav { max-width: 720px; margin: 0 auto; display: flex; height: var(--tab-hoehe); }
.tabs a {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-gedimmt); text-decoration: none; font-size: 10.5px; font-weight: 500;
}
.tabs a svg.ic { width: 25px; height: 25px; stroke-width: 1.8; }
.tabs a[aria-current="page"] { color: var(--akzent); }
.tabs a[aria-current="page"] svg.ic { stroke-width: 2.2; }

/* ------------------------------------------------------------------ */
/* Bausteine                                                           */
/* ------------------------------------------------------------------ */

.karte {
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius);
  box-shadow: var(--schatten); padding: 16px;
}
.karte.eng { padding: 12px 14px; }
.karte h3 { margin: 0; font-size: 17px; font-weight: 600; }
.gedimmt { color: var(--text-gedimmt); }
.klein { font-size: 13px; }
.fuss { font-size: 15px; }

.pill {
  display: inline-flex; align-items: center; gap: 4px; white-space: nowrap;
  font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 999px;
  color: var(--text-gedimmt); background: var(--flaeche-gedimmt);
}
.pill.gruen { color: var(--akzent); background: var(--akzent-zart); }
.pill.rot { color: var(--rot); background: var(--rot-zart); }
.pill.amber { color: var(--amber); background: var(--amber-zart); }
.pill.blau { color: var(--blau); background: var(--blau-zart); }
.pill svg.ic { width: 14px; height: 14px; stroke-width: 2.4; }

.hinweis {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius);
  font-size: 15px; background: var(--blau-zart); color: var(--text);
}
.hinweis svg.ic { color: var(--blau); width: 20px; height: 20px; margin-top: 1px; }
.hinweis.gruen { background: var(--akzent-zart); } .hinweis.gruen svg.ic { color: var(--akzent); }
.hinweis.amber { background: var(--amber-zart); } .hinweis.amber svg.ic { color: var(--amber); }
.hinweis.rot { background: var(--rot-zart); } .hinweis.rot svg.ic { color: var(--rot); }

.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%;
  padding: 14px 16px; border-radius: var(--radius); border: 0;
  background: var(--akzent); color: var(--auf-akzent); font-weight: 600; font-size: 17px;
  transition: opacity .15s, transform .1s;
}
.knopf:active { opacity: .85; transform: scale(.99); }
.knopf:disabled { background: var(--flaeche-gedimmt); color: var(--text-gedimmt); box-shadow: inset 0 0 0 1px var(--rahmen); cursor: default; transform: none; }
.knopf.geist { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--rahmen); font-weight: 500; }
.knopf.geist.rot { color: var(--rot); }
.knopf.klein { width: auto; padding: 8px 14px; font-size: 15px; }
.textknopf { background: none; border: 0; padding: 0; color: var(--akzent); font-size: 15px; font-weight: 500; }

/* Segmented Control im Pill-Look */
.segmente {
  display: flex; gap: 4px; padding: 4px; border-radius: 999px;
  background: var(--flaeche); border: 1px solid var(--rahmen);
}
.segmente button {
  flex: 1; border: 0; background: none; border-radius: 999px; padding: 8px 10px;
  font-size: 15px; font-weight: 600; color: var(--text-gedimmt); transition: background .2s, color .2s;
}
.segmente button[aria-pressed="true"] { background: var(--akzent); color: var(--auf-akzent); }

/* Chips (Klassenfilter) */
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 2px 16px 4px; scrollbar-width: none; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: none; border: 1px solid var(--rahmen); background: var(--flaeche); border-radius: 999px;
  padding: 7px 14px; font-size: 15px; font-weight: 600; color: var(--text);
}
.chip[aria-pressed="true"] { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }

/* Gruppierte Liste wie UITableView inset grouped */
.liste { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); overflow: hidden; box-shadow: var(--schatten); }
.zeile {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 50px; padding: 10px 14px;
  background: none; border: 0; text-align: left; color: var(--text); text-decoration: none; font-size: 17px;
  position: relative;
}
.zeile + .zeile::before { content: ""; position: absolute; top: 0; left: 56px; right: 0; border-top: 1px solid var(--rahmen); }
.zeile.ohne-symbol + .zeile.ohne-symbol::before { left: 14px; }
.zeile:active { background: var(--flaeche-gedimmt); }
.zeile .mitte { flex: 1; min-width: 0; }
.zeile .mitte small { display: block; color: var(--text-gedimmt); font-size: 13px; margin-top: 1px; }
.zeile .wert { color: var(--text-gedimmt); font-size: 15px; }
.zeile .pfeil { color: var(--text-gedimmt); opacity: .6; width: 18px; height: 18px; stroke-width: 2.4; }
.symbolfeld {
  width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; flex: none;
  background: var(--akzent); color: #fff;
}
.symbolfeld svg.ic { width: 19px; height: 19px; stroke-width: 2.1; }

.leer { text-align: center; padding: 32px 16px; color: var(--text-gedimmt); }
.leer svg.ic { width: 40px; height: 40px; stroke-width: 1.5; margin-bottom: 8px; opacity: .7; }
.leer h3 { margin: 0 0 4px; color: var(--text); font-size: 17px; }
.leer p { margin: 0; font-size: 15px; }

.lade { display: grid; place-items: center; padding: 60px 0; }
.lade-marke { width: 30px; height: 30px; border-radius: 9px; border: 3px solid var(--akzent-zart); border-top-color: var(--akzent); animation: dreh .8s linear infinite; }
@keyframes dreh { to { transform: rotate(360deg); } }

/* Formular */
.feld { display: flex; flex-direction: column; gap: 6px; }
.feld > span { font-size: 13px; font-weight: 600; color: var(--text-gedimmt); text-transform: uppercase; letter-spacing: .3px; padding-left: 4px; }
.eingabe {
  width: 100%; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--rahmen);
  background: var(--flaeche-gedimmt); font-size: 17px; color: var(--text); outline: none;
  transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none;
}
.eingabe:focus { border-color: var(--akzent); box-shadow: 0 0 0 3px var(--akzent-zart); }
textarea.eingabe { resize: vertical; min-height: 84px; line-height: 1.4; }
select.eingabe { background-image: linear-gradient(45deg, transparent 50%, var(--text-gedimmt) 50%), linear-gradient(135deg, var(--text-gedimmt) 50%, transparent 50%); background-position: calc(100% - 20px) 52%, calc(100% - 15px) 52%; background-size: 5px 5px; background-repeat: no-repeat; padding-right: 36px; }
.reihe { display: flex; gap: 10px; }
.reihe > * { flex: 1; min-width: 0; }
.fehler { color: var(--rot); font-size: 15px; min-height: 0; }

/* ------------------------------------------------------------------ */
/* Sheet (von unten)                                                   */
/* ------------------------------------------------------------------ */

.sheet-hinten {
  position: fixed; inset: 0; z-index: 50; background: rgba(0, 0, 0, .32);
  display: flex; align-items: flex-end; justify-content: center;
  animation: abdunkeln .25s ease;
}
@keyframes abdunkeln { from { background: rgba(0, 0, 0, 0); } }
.sheet {
  width: 100%; max-width: 620px; max-height: calc(100dvh - var(--oben) - 24px); overflow-y: auto;
  background: var(--hintergrund); border-radius: 22px 22px 0 0;
  padding: 8px 16px calc(20px + var(--unten)); box-shadow: var(--schatten-hoch);
  animation: hochfahren .34s cubic-bezier(.2, .9, .25, 1);
  overscroll-behavior: contain;
}
@media (min-width: 700px) {
  .sheet-hinten { align-items: center; }
  .sheet { border-radius: 22px; padding-bottom: 20px; }
}
.sheet-hinten.zu { animation: aufhellen .22s ease forwards; }
.sheet-hinten.zu .sheet { animation: runterfahren .22s ease forwards; }
@keyframes hochfahren { from { transform: translateY(100%); } }
@keyframes runterfahren { to { transform: translateY(100%); } }
@keyframes aufhellen { to { background: rgba(0, 0, 0, 0); } }
.griff { width: 36px; height: 5px; border-radius: 3px; background: var(--rahmen); margin: 0 auto 10px; }
.sheet-kopf { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.sheet-kopf h2 { margin: 0; font-size: 22px; font-weight: 700; }
.schliessen { width: 30px; height: 30px; border-radius: 50%; border: 0; background: var(--flaeche-gedimmt); color: var(--text-gedimmt); display: grid; place-items: center; flex: none; }
.schliessen svg.ic { width: 16px; height: 16px; stroke-width: 2.6; }

.toast {
  position: fixed; left: 50%; bottom: calc(var(--tab-hoehe) + var(--unten) + 86px); z-index: 60;
  transform: translateX(-50%); background: var(--text); color: var(--hintergrund);
  padding: 10px 16px; border-radius: 999px; font-size: 15px; font-weight: 600; box-shadow: var(--schatten-hoch);
  animation: toast 2.6s ease forwards; white-space: nowrap; max-width: calc(100vw - 32px); overflow: hidden; text-overflow: ellipsis;
}
@keyframes toast { 0% { opacity: 0; transform: translate(-50%, 10px); } 10%, 85% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }

/* ------------------------------------------------------------------ */
/* Anmeldung                                                           */
/* ------------------------------------------------------------------ */

.anmeldung { min-height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative; }
.buehne-kopf { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: calc(40px + var(--oben)) 24px 32px; position: relative; text-align: center; }
.nachhall { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
.nachhall i {
  position: absolute; left: 0; top: 0; width: 76px; height: 76px; border-radius: 22%;
  border: 1.5px solid var(--akzent); transform: translate(-50%, -50%) scale(1); opacity: 0;
  animation: nachhall 18s linear infinite;
}
.nachhall i:nth-child(2) { animation-delay: -4.5s; }
.nachhall i:nth-child(3) { animation-delay: -9s; }
.nachhall i:nth-child(4) { animation-delay: -13.5s; }
@keyframes nachhall {
  0% { transform: translate(-50%, -50%) scale(1); opacity: .18; }
  30% { opacity: .05; }
  100% { transform: translate(-50%, -50%) scale(7); opacity: 0; }
}
.marke { width: 120px; height: 120px; position: relative; filter: drop-shadow(0 12px 28px rgba(46, 125, 50, .28)); }
.marke.mittel { width: 64px; height: 64px; }
.marke.klein { width: 40px; height: 40px; filter: none; }
.wortmarke { font-family: var(--schrift-rund); font-size: 34px; font-weight: 800; margin: 22px 0 4px; letter-spacing: -.3px; position: relative; }
.claim { color: var(--text-gedimmt); font-size: 17px; margin: 0; position: relative; }
.buehne-blatt {
  background: var(--flaeche); border-radius: 30px 30px 0 0; padding: 26px 22px calc(26px + var(--unten));
  box-shadow: 0 -8px 40px rgba(15, 20, 27, .08); width: 100%; max-width: 560px; margin: 0 auto;
  animation: hochfahren .5s cubic-bezier(.2, .9, .25, 1);
}
@media (min-width: 700px) { .buehne-blatt { border-radius: 30px; margin-bottom: 40px; } }
.buehne-blatt h2 { margin: 0 0 4px; font-size: 24px; }
.buehne-blatt p.unter { margin: 0 0 18px; color: var(--text-gedimmt); font-size: 15px; }
.schulkarte { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius); background: var(--akzent-zart); margin-bottom: 16px; }
.schulkarte b { display: block; font-size: 15px; }
.schulkarte small { color: var(--text-gedimmt); font-size: 13px; }
.schulkarte button { margin-left: auto; }

/* ------------------------------------------------------------------ */
/* Start                                                               */
/* ------------------------------------------------------------------ */

.gruss { display: flex; align-items: center; gap: 12px; padding: 4px 4px 16px; }
.gruss h1 { margin: 0; font-size: 30px; line-height: 1.1; font-weight: 700; }
.gruss p { margin: 3px 0 0; color: var(--text-gedimmt); font-size: 15px; }
.gruss .marke { margin-left: auto; }

.jetzt { display: flex; gap: 14px; align-items: center; }
.jetzt .kachel-gross { width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 15px; flex: none; }
.jetzt .mitte { flex: 1; min-width: 0; }
.jetzt .mitte b { display: block; font-size: 19px; }
.ueberzeile { font-size: 12px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase; color: var(--akzent); margin-bottom: 2px; }
.fortschritt { height: 5px; border-radius: 3px; background: var(--flaeche-gedimmt); overflow: hidden; margin-top: 10px; }
.fortschritt i { display: block; height: 100%; background: var(--akzent); border-radius: 3px; }

.kacheln { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kachel {
  display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px 12px;
  background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius); box-shadow: var(--schatten);
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 600; line-height: 1.2; min-height: 92px; overflow-wrap: anywhere; hyphens: manual;
  transition: transform .12s;
}
.kachel:active { transform: scale(.97); }
.kachel .symbolfeld { width: 34px; height: 34px; border-radius: 9px; }

.vertretungs-mini { display: flex; flex-direction: column; gap: 8px; }
.vertretungs-mini .z { display: flex; gap: 10px; align-items: center; font-size: 15px; }
.vertretungs-mini .z .std { width: 34px; text-align: center; font-weight: 700; }

/* ------------------------------------------------------------------ */
/* Stundenplan-Raster                                                  */
/* ------------------------------------------------------------------ */

.raster { background: var(--flaeche); border: 1px solid var(--rahmen); border-radius: var(--radius-gross); padding: 10px; display: grid; grid-template-columns: 38px repeat(5, 1fr); gap: 6px; }
.raster .tagkopf { height: 26px; display: grid; place-items: center; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--text-gedimmt); }
.raster .tagkopf.heute { background: var(--akzent); color: var(--auf-akzent); }
.raster .stdkopf { height: 54px; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.15; }
.raster .stdkopf b { font-size: 15px; }
.raster .stdkopf small { font-size: 10.5px; color: var(--text-gedimmt); }
.zelle {
  height: 54px; border-radius: 10px; border: 0; padding: 2px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; letter-spacing: .3px; position: relative; line-height: 1.1;
  transition: transform .12s;
}
.zelle small { font-size: 10px; font-weight: 500; opacity: .85; letter-spacing: 0; margin-top: 2px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zelle:active { transform: scale(.94); }
.zelle.frei { background: transparent; border: 1.5px dashed var(--rahmen); opacity: .55; cursor: default; }
.zelle.laeuft { box-shadow: 0 0 0 2.5px var(--akzent), 0 0 0 5px var(--akzent-zart); }
.zelle .punkt { position: absolute; top: 4px; right: 4px; width: 8px; height: 8px; border-radius: 50%; background: var(--rot); box-shadow: 0 0 0 2px var(--flaeche); }
.zelle .punkt.amber { background: var(--amber); }
.zelle .punkt.blau { background: var(--blau); }
.legende { display: flex; flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--text-gedimmt); padding: 0 4px; }
.legende i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 5px; vertical-align: 1px; }

.tagesliste .eintrag { display: flex; gap: 12px; align-items: center; padding: 12px 14px; position: relative; }
.tagesliste .eintrag + .eintrag::before { content: ""; position: absolute; top: 0; left: 66px; right: 0; border-top: 1px solid var(--rahmen); }
.tagesliste .fachfeld { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; font-size: 12px; font-weight: 800; flex: none; }
.tagesliste .mitte { flex: 1; min-width: 0; }
.tagesliste .mitte b { font-weight: 600; }
.tagesliste .mitte small { display: block; color: var(--text-gedimmt); font-size: 13px; }
.tagesliste .eintrag.vorbei { opacity: .5; }
.tagesliste .eintrag.laeuft { background: var(--akzent-zart); }

/* ------------------------------------------------------------------ */
/* Vertretungsplan                                                     */
/* ------------------------------------------------------------------ */

.vertretung { display: flex; gap: 14px; }
.vertretung .std { width: 44px; flex: none; text-align: center; }
.vertretung .std b { display: block; font-size: 22px; font-weight: 800; line-height: 1.1; }
.vertretung .std small { font-size: 11px; color: var(--text-gedimmt); }
.vertretung .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.vertretung .titel { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vertretung .titel b { font-size: 17px; }
.vertretung .details { font-size: 15px; color: var(--text-gedimmt); display: flex; flex-wrap: wrap; gap: 4px 14px; }
.vertretung .details span { display: inline-flex; align-items: center; gap: 5px; }
.vertretung .details svg.ic { width: 15px; height: 15px; }
.vertretung del { opacity: .7; }
.vertretung .info { font-size: 15px; }
.karte.ausfall { border-left: 4px solid var(--rot); }
.karte.vertretung-k { border-left: 4px solid var(--blau); }
.karte.raum { border-left: 4px solid var(--amber); }
.karte.aufgaben { border-left: 4px solid var(--akzent); }
.karte.verlegt { border-left: 4px solid var(--text-gedimmt); }

/* ------------------------------------------------------------------ */
/* Verfassungsviertelstunde (Padlet)                                   */
/* ------------------------------------------------------------------ */

.vvs-kopf { display: flex; gap: 12px; align-items: center; }
.vvs-kopf .symbolfeld { width: 44px; height: 44px; border-radius: 12px; }
.wochen { display: flex; gap: 5px; margin-top: 12px; }
.wochen i { flex: 1; height: 26px; border-radius: 6px; background: var(--flaeche-gedimmt); border: 1px solid var(--rahmen); position: relative; }
.wochen i.ja { background: var(--akzent); border-color: var(--akzent); }
.wochen i.jetzt::after { content: ""; position: absolute; left: 50%; bottom: -7px; width: 4px; height: 4px; border-radius: 50%; background: var(--text-gedimmt); transform: translateX(-50%); }
.wochen-legende { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-gedimmt); margin-top: 10px; }

.datumskopf { position: sticky; top: calc(44px + var(--oben)); z-index: 5; margin: 6px -16px 0; padding: 8px 20px; display: flex; align-items: baseline; gap: 8px; background: var(--hintergrund); font-weight: 700; font-size: 15px; }
.datumskopf small { font-weight: 500; color: var(--text-gedimmt); }
.pinnwand { columns: 2 150px; column-gap: 10px; }
@media (min-width: 640px) { .pinnwand { columns: 3 180px; column-gap: 12px; } }
.zettel {
  break-inside: avoid; margin: 0 0 12px; border-radius: 14px; padding: 14px; position: relative;
  background: var(--zf, var(--f0f)); color: var(--text); border: 1px solid color-mix(in srgb, var(--zs, var(--f0s)) 18%, transparent);
  box-shadow: var(--schatten); animation: einblenden .3s ease;
}
.zettel .ztitel { font-size: 16px; font-weight: 700; color: var(--zs, var(--f0s)); margin: 0 0 6px; line-height: 1.25; padding-right: 30px; overflow-wrap: anywhere; hyphens: auto; }
.zettel p { margin: 0 0 10px; font-size: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.zettel .zfuss { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--text-gedimmt); }
.zettel .zfuss .pill { background: color-mix(in srgb, var(--flaeche) 70%, transparent); color: var(--zs); font-size: 12px; padding: 3px 8px; }
.zettel .zmenue { position: absolute; top: 6px; right: 4px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--zs); display: grid; place-items: center; }
.zettel .zmenue:active { background: color-mix(in srgb, var(--zs) 12%, transparent); }
.fab {
  position: fixed; z-index: 25; right: max(18px, calc(50vw - 360px + 18px)); bottom: calc(var(--tab-hoehe) + var(--unten) + 18px);
  height: 54px; padding: 0 20px 0 16px; border-radius: 27px; border: 0; display: flex; align-items: center; gap: 8px;
  background: var(--akzent); color: var(--auf-akzent); font-weight: 700; font-size: 16px;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--akzent) 40%, transparent);
  transition: transform .15s;
}
.fab:active { transform: scale(.95); }
.fab svg.ic { stroke-width: 2.6; }
.farbwahl { display: flex; gap: 10px; flex-wrap: wrap; }
.farbwahl button { width: 34px; height: 34px; border-radius: 50%; border: 2px solid transparent; background: var(--zf); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--zs) 30%, transparent); }
.farbwahl button[aria-pressed="true"] { border-color: var(--zs); box-shadow: 0 0 0 3px var(--flaeche) inset; }
.themen-vorschlaege { display: flex; flex-wrap: wrap; gap: 6px; }
.themen-vorschlaege button { border: 1px solid var(--rahmen); background: var(--flaeche); border-radius: 999px; padding: 5px 11px; font-size: 13px; color: var(--text); }
.menue-liste { display: flex; flex-direction: column; gap: 8px; }

/* ------------------------------------------------------------------ */
/* Aktionstage                                                         */
/* ------------------------------------------------------------------ */

.tag-karte { display: flex; gap: 14px; align-items: center; text-decoration: none; color: var(--text); }
.datumsblock { width: 58px; flex: none; border-radius: 12px; overflow: hidden; text-align: center; background: var(--flaeche); border: 1px solid var(--rahmen); }
.datumsblock small { display: block; background: var(--akzent); color: var(--auf-akzent); font-size: 11px; font-weight: 700; text-transform: uppercase; padding: 3px 0; letter-spacing: .5px; }
.datumsblock b { display: block; font-size: 24px; font-weight: 800; padding: 4px 0 5px; }
.tag-karte .mitte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.tag-karte .mitte b { font-size: 18px; }

.angebot { display: flex; flex-direction: column; gap: 10px; }
.angebot.gewaehlt { box-shadow: 0 0 0 2px var(--akzent), var(--schatten); border-color: var(--akzent); }
.angebot .oben { display: flex; gap: 10px; align-items: flex-start; justify-content: space-between; }
.angebot h3 { font-size: 17px; }
.angebot .meta { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--text-gedimmt); }
.angebot .meta span { display: inline-flex; gap: 5px; align-items: center; }
.angebot .meta svg.ic { width: 15px; height: 15px; }
.angebot p { margin: 0; font-size: 15px; }
.platzbalken { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-gedimmt); }
.platzbalken .balken { flex: 1; height: 6px; border-radius: 3px; background: var(--flaeche-gedimmt); overflow: hidden; }
.platzbalken .balken i { display: block; height: 100%; background: var(--akzent); border-radius: 3px; transition: width .4s; }
.platzbalken .balken i.knapp { background: var(--amber); }
.platzbalken .balken i.voll { background: var(--rot); }

/* ------------------------------------------------------------------ */
/* Zeitung                                                             */
/* ------------------------------------------------------------------ */

.titelausgabe { display: flex; gap: 16px; align-items: stretch; text-decoration: none; color: var(--text); }
.titelausgabe img { width: 120px; aspect-ratio: 707 / 1000; object-fit: cover; border-radius: 8px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); flex: none; background: var(--flaeche-gedimmt); }
.titelausgabe .mitte { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; justify-content: center; }
.titelausgabe h3 { font-size: 20px; }
.titelausgabe p { margin: 0; font-size: 15px; color: var(--text-gedimmt); }
.ausgaben { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 16px 12px; }
.ausgabe { text-decoration: none; color: var(--text); display: flex; flex-direction: column; gap: 6px; }
.ausgabe img { width: 100%; aspect-ratio: 707 / 1000; object-fit: cover; border-radius: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .12); background: var(--flaeche-gedimmt); transition: transform .15s; }
.ausgabe:active img { transform: scale(.97); }
.ausgabe b { font-size: 15px; }
.ausgabe small { color: var(--text-gedimmt); font-size: 13px; }

/* ------------------------------------------------------------------ */
/* Notenrechner                                                        */
/* ------------------------------------------------------------------ */

.gesamtschnitt { display: flex; align-items: flex-end; justify-content: space-between; }
.gesamtschnitt .zahl { font-family: var(--schrift-rund); font-size: 44px; font-weight: 800; line-height: 1; margin-top: 4px; }
.fach-kopf { display: flex; justify-content: space-between; align-items: center; }
.fach-kopf .schnitt { font-size: 20px; font-weight: 800; }
.notengruppe { display: flex; flex-direction: column; gap: 8px; }
.notengruppe + .notengruppe { border-top: 1px solid var(--rahmen); padding-top: 12px; }
.notengruppe > span { font-size: 13px; font-weight: 600; color: var(--text-gedimmt); }
.notenchips { display: flex; gap: 6px; flex-wrap: wrap; }
.notenchips button { border: 0; border-radius: 999px; background: var(--flaeche-gedimmt); padding: 5px 10px; font-size: 14px; font-weight: 600; display: inline-flex; gap: 5px; align-items: center; }
.notenchips button svg.ic { width: 10px; height: 10px; stroke-width: 3.5; opacity: .6; }
.noteneingabe { display: flex; gap: 8px; }
.noteneingabe input { flex: 1; padding: 9px 12px; border-radius: 8px; border: 1px solid transparent; background: var(--flaeche-gedimmt); font-size: 15px; outline: none; }
.noteneingabe input:focus { border-color: var(--akzent); }
.rund { width: 36px; height: 36px; border-radius: 50%; border: 0; background: var(--akzent); color: var(--auf-akzent); display: grid; place-items: center; flex: none; }
.rund:disabled { opacity: .35; }
.rund svg.ic { width: 16px; height: 16px; stroke-width: 3; }
.farbe-gruen { color: var(--akzent); } .farbe-amber { color: var(--amber); } .farbe-rot { color: var(--rot); } .farbe-neutral { color: var(--text-gedimmt); }

/* ------------------------------------------------------------------ */
/* Mehr / Profil                                                       */
/* ------------------------------------------------------------------ */

.profil { display: flex; gap: 14px; align-items: center; }
.profil .mitte b { display: block; font-size: 19px; }
.profil .mitte small { color: var(--text-gedimmt); font-size: 15px; }
.versionszeile { text-align: center; color: var(--text-gedimmt); font-size: 13px; padding: 8px 0; }
.ergebnis h4 { margin: 0 0 6px; font-size: 15px; display: flex; justify-content: space-between; }
.ergebnis ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 6px; }
.ergebnis li { font-size: 13px; background: var(--flaeche-gedimmt); border-radius: 6px; padding: 3px 7px; }
.ergebnis + .ergebnis { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rahmen); }

@media (min-width: 560px) {
  .kacheln { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; }
  .nachhall { display: none; }
}

/* ------------------------------------------------------------------ */
/* Hausaufgabenheft                                                    */
/* ------------------------------------------------------------------ */

.zeile.ha { align-items: flex-start; cursor: pointer; transition: opacity .3s, transform .3s; }
.zeile.ha + .zeile.ha::before { left: 52px; }
.zeile.ha.weg { opacity: 0; transform: translateX(16px); }
.zeile.ha .mitte { padding-top: 2px; }
.ha-text { font-size: 16px; line-height: 1.3; overflow-wrap: anywhere; }
.zeile.ha.fertig .ha-text { text-decoration: line-through; color: var(--text-gedimmt); }
.zeile.ha small { display: flex; align-items: center; gap: 6px; }
.fachpunkt { width: 9px; height: 9px; border-radius: 50%; background: var(--zs) !important; display: inline-block; flex: none; }
.ha-haken {
  width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--rahmen); background: var(--flaeche);
  display: grid; place-items: center; flex: none; padding: 0; color: transparent; margin-top: 1px;
  transition: background .2s, border-color .2s, transform .15s;
}
.ha-haken svg.ic { width: 15px; height: 15px; stroke-width: 3.2; }
.ha-haken:active { transform: scale(.88); }
.ha-haken.an { background: var(--akzent); border-color: var(--akzent); color: var(--auf-akzent); }
.fachfeld-mini { width: 34px; height: 24px; border-radius: 6px; display: grid; place-items: center; font-size: 10px; font-weight: 800; flex: none; }
.tabs a span { white-space: nowrap; }

/* ------------------------------------------------------------------ */
/* Bänder: Update, Offline, lange nicht geprüft                        */
/* ------------------------------------------------------------------ */

.baender {
  position: fixed; z-index: 40; left: 0; right: 0; top: calc(var(--oben) + 50px);
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 12px; pointer-events: none;
}
.band {
  pointer-events: auto; width: 100%; max-width: 560px; display: flex; align-items: center; gap: 10px;
  padding: 10px 12px 10px 14px; border-radius: 14px; font-size: 14px; line-height: 1.35;
  background: var(--flaeche); color: var(--text); border: 1px solid var(--rahmen); box-shadow: var(--schatten-hoch);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  animation: band-rein .35s cubic-bezier(.2, .9, .25, 1);
}
.band svg.ic { width: 20px; height: 20px; color: var(--text-gedimmt); }
.band.blau { background: var(--blau-zart); border-color: color-mix(in srgb, var(--blau) 25%, transparent); }
.band.blau svg.ic { color: var(--blau); }
.band.amber { background: var(--amber-zart); border-color: color-mix(in srgb, var(--amber) 30%, transparent); }
.band.amber svg.ic { color: var(--amber); }
.band-text { flex: 1; min-width: 0; }
.band-weg { width: 30px; height: 30px; border-radius: 50%; border: 0; background: transparent; display: grid; place-items: center; flex: none; margin: -4px -4px -4px 0; }
.band-weg svg.ic { width: 16px; height: 16px; stroke-width: 2.6; color: var(--text-gedimmt); }
.band-weg:active { background: color-mix(in srgb, var(--text) 10%, transparent); }
.band-dreht { width: 18px; height: 18px; flex: none; border-radius: 6px; border: 2.5px solid color-mix(in srgb, var(--blau) 25%, transparent); border-top-color: var(--blau); animation: dreh .8s linear infinite; }
@keyframes band-rein { from { opacity: 0; transform: translateY(-12px); } }
.anmeldung ~ .baender, body:not(:has(.leiste)) .baender { top: calc(var(--oben) + 12px); }