am , das auf JEDES Element mit
[data-tip] reagiert). Ein zweites CSS-Tooltip auf demselben Attribut ist
immer eine Dopplung. Das Aussehen wird deshalb unten bei .ss-tipbox
gepflegt, nicht hier. (Rueckmeldung Murat 29.07.2026)
qa/unit/test_tooltip_einfach.py nagelt das fest. */
/* ===== Der zentrale Sofort-Tooltip (gilt fuer ALLE [data-tip]-Elemente) =====
Auf Wunsch Murat 29.07.2026 hell: weisser Grund, schwarze Schrift, feine
Linie + Schatten, damit er sich vom Hintergrund abhebt. Im dunklen Design
waere weiss ein Blitz - dort dieselbe Form in Karten-Optik. Die Groessen
(max-width, Position) setzt weiterhin das JS, weil sie am Viewport haengen. */
.ss-tipbox{position:fixed;z-index:9999;display:none;pointer-events:none;
max-width:280px;padding:7px 11px;border-radius:9px;
background:#fff;color:#12161F;border:1px solid rgba(16,24,40,.10);
font-size:12px;font-weight:600;line-height:1.45;
box-shadow:0 8px 24px rgba(16,24,40,.16),0 1px 3px rgba(16,24,40,.08);}
html[data-theme="dark"] .ss-tipbox{background:var(--card,#1b2230);color:var(--ink,#e8ecf5);
border-color:rgba(255,255,255,.14);box-shadow:0 8px 24px rgba(0,0,0,.45);}
/* ===== Akkordeon der Optionen-Gruppen =====
Bis 2026-07 nur auf dem Handy (<=720px). Jetzt ueberall: das Fenster war
auf dem Desktop ueber zwei Bildschirmhoehen lang, obwohl "Zielgruppe &
Sprache" und "Aufgaben" fast immer auf den Voreinstellungen bleiben.
Zugeklappt zeigt die Titelzeile rechts eine Kurz-Zusammenfassung
(.mat-grp-sum, gefuellt von matGrpSummary() in index-app.js), damit man
den aktuellen Stand sieht, ohne aufzuklappen.
.mat-group-bd wird zur Laufzeit von matAdvAccordionInit() eingehaengt. */
.mat-grp-chev{flex:none;color:var(--muted);display:none;}
.mat-grp-sum{margin-left:auto;flex:none;max-width:52%;font-size:11.5px;font-weight:650;
color:var(--muted);letter-spacing:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
display:none;}
/* OHNE `.mat-modal-body` DAVOR (v2.324.0). Die Regeln hingen am Fenster,
das es nicht mehr gibt - im Kasten griff dann kein Zuklappen mehr: alle
Gruppen standen ausgeklappt untereinander, zwei Bildschirmhoehen lang,
genau das Gegenteil des Gemeinten. `#advanced-options` ist einmalig im
Dokument; der Vorsatz war also nie eine Eingrenzung, sondern nur die
Herkunft der Regeln. */
#advanced-options > .mat-group.collapsed > .mat-group-ttl > .mat-grp-sum{display:block;}
#advanced-options > .mat-group > .mat-group-ttl{cursor:pointer;margin-bottom:0;
transition:margin-bottom .24s cubic-bezier(.4,0,.2,1);}
#advanced-options > .mat-group:not(.collapsed) > .mat-group-ttl{margin-bottom:11px;}
/* ===== WEICH AUF UND ZU (v2.560.3) ==================================
Wunsch Murat 30.08.2026: „dan diye acilmasa akordiyonlar. yani yumusak
böyle inme yukari sürüklenmeyle acilip kapansalar biraz hava katalim
oraya." Bis hierher stand an dieser Stelle `display:none` - der Pfeil
drehte sich weich (Regel darunter, .18s), der Inhalt sprang hart. Das
ist genau der Bruch, den man als „dan" hoert.
WARUM `grid-template-rows` UND NICHT `height`: die Zielhoehe ist in
jeder Gruppe eine andere und steht als `auto` fest - darauf greift kein
Uebergang. Das Raster kann von `1fr` nach `0fr` fahren, ohne dass
irgendwo eine Pixelhoehe gemessen werden muss. Deshalb legt
`matAdvAccordionInit()` den Inhalt in EINE innere Huelle
(`.mat-group-bdin`) - ein Rasterkind, sonst bewegt sich nur die erste
Zeile.
`overflow:hidden` muss sein, sonst quillt der Inhalt beim Fahren aus
der Zeile. Die 3 px Innenabstand mit gleich grossem negativem
Aussenabstand kosten kein Layout und lassen dem FOKUSRAHMEN der
aeussersten Knoepfe Platz - ohne sie schnitte die Kante ihn ab.
`visibility` ist kein Schmuck, sondern die Tastatur: bei `0fr` ist der
Inhalt zwar flach, aber weiter anspringbar - man tabbte in eine
zugeklappte Gruppe. Beim OEFFNEN ohne Verzoegerung sichtbar, beim
SCHLIESSEN erst nach dem Fahren versteckt; daher die zwei
verschiedenen Verzoegerungen.
Auch der Abstand unter dem Titel wandert (0 <-> 11 px, Regeln
darueber) - ohne eigenen Uebergang bliebe genau dort ein Sprung
zurueck.
WER BEWEGUNG ABGESTELLT HAT, BEKOMMT KEINE. `prefers-reduced-motion`
ist fuer manche Menschen kein Geschmack, sondern Uebelkeit. */
#advanced-options > .mat-group > .mat-group-bd{display:grid;
grid-template-rows:1fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1);}
#advanced-options > .mat-group.collapsed > .mat-group-bd{grid-template-rows:0fr;}
#advanced-options > .mat-group > .mat-group-bd > .mat-group-bdin{
min-height:0;overflow:hidden;padding:0 3px;margin:0 -3px;
transition:visibility 0s;}
#advanced-options > .mat-group.collapsed > .mat-group-bd > .mat-group-bdin{
visibility:hidden;transition:visibility 0s .24s;}
@media (prefers-reduced-motion: reduce){
#advanced-options > .mat-group > .mat-group-bd,
#advanced-options > .mat-group > .mat-group-bd > .mat-group-bdin,
#advanced-options > .mat-group > .mat-group-ttl,
#advanced-options > .mat-group > .mat-group-ttl > .mat-grp-chev{transition:none;}
}
#advanced-options > .mat-group > .mat-group-ttl > .mat-grp-chev{display:inline-flex;transition:transform .18s ease;}
/* Ohne Zusammenfassung schiebt der Pfeil selbst nach rechts. */
#advanced-options > .mat-group > .mat-group-ttl > .mat-grp-sum + .mat-grp-chev{margin-left:8px;}
#advanced-options > .mat-group:not(.collapsed) > .mat-group-ttl > .mat-grp-chev{margin-left:auto;}
.mat-group.collapsed .mat-grp-chev{transform:rotate(0deg);}
.mat-group:not(.collapsed) .mat-grp-chev{transform:rotate(90deg);}
#advanced-options > .mat-group.collapsed{padding-bottom:12px;}
/* ===== Aufgabentyp „Reihenfolge" (v2.61.0) =====
Sortiert wird mit Hoch/Runter-Knoepfen, NICHT per Ziehen: Drag&Drop ist auf
Tablets die fehleranfaelligste Geste (Seite scrollen vs. Karte ziehen), und
ein grosser Teil der Klassen arbeitet am Tablet. Die Knoepfe sind mit 34px
bewusst fingerfreundlich. */
.reihe-liste{display:flex;flex-direction:column;gap:8px;}
.reihe-zeile{display:flex;align-items:center;gap:10px;padding:11px 12px;
border:1.5px solid var(--line);border-radius:12px;background:var(--card);
transition:border-color .15s,background .15s;}
.reihe-nr{flex:none;width:24px;height:24px;border-radius:50%;background:var(--brand-soft,#EEF2FF);
color:var(--brand);font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;}
.reihe-tx{flex:1;min-width:0;font-size:var(--fs-md);line-height:1.35;color:var(--ink);}
.reihe-btns{flex:none;display:flex;gap:4px;}
.reihe-b{width:34px;height:34px;border:1.5px solid var(--line);border-radius:9px;background:var(--card);
color:var(--sub,#475569);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0;}
.reihe-b:hover:not(:disabled){border-color:var(--brand);color:var(--brand);}
.reihe-b:disabled{opacity:.3;cursor:default;}
.reihe-zeile.ans-ok{border-color:var(--ok);background:var(--ok-soft);}
.reihe-zeile.ans-bad{border-color:var(--bad);background:var(--bad-soft);}
/* ===== Aufgabentyp „Tabelle" (v2.61.0) =====
Auf schmalen Bildschirmen darf die Tabelle waagerecht gewischt werden –
Umbrechen wuerde die Spaltenzuordnung zerstoeren, und genau die IST die
Aufgabe. */
.tab-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table.tab-quiz{border-collapse:collapse;width:100%;min-width:320px;font-size:14px;}
table.tab-quiz th,table.tab-quiz td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:middle;}
table.tab-quiz thead th{background:var(--brand-soft,#EEF2FF);color:var(--brand);font-size:12.5px;font-weight:800;}
table.tab-quiz tbody th{background:rgba(127,127,127,.05);font-weight:700;font-size:13.5px;white-space:nowrap;}
table.tab-quiz td.tab-fix{color:var(--muted);}
input.tab-in{width:100%;min-width:90px;border:1.5px solid var(--line);border-radius:8px;
padding:7px 9px;font:inherit;font-size:14px;background:var(--card);color:var(--ink);}
input.tab-in:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(46,91,255,.14);}
input.tab-in.ans-ok{border-color:var(--ok);background:var(--ok-soft);}
input.tab-in.ans-bad{border-color:var(--bad);background:var(--bad-soft);}
.vis-seg-wrap{margin-top:2px;}
.vis-note{font-size:12px;color:var(--muted);margin:8px 0 2px;line-height:1.45;display:none;}
.vis-note.on{display:block;}
/* ===== DIE KNOPFREIHE UND DAS ZAHNRAD (v2.925.0) =======================
Unter dem Textfeld steht EINE Reihe: links der Knopf „Lernspiele &
mehr“, rechts das Zahnrad (Auftrag Murat 02.10.2026: „lern spiele
butonlarını da bir açılır menüye koy tek satırda olsunlar“ - drei Chips
brachen am Telefon in zwei Zeilen um). Der Knopf öffnet ein Menü in der
Bauart des Plus-Menüs (.pop): darin die drei Einstiege mit Symbol, Titel
und Untertitel. Das VERHALTEN bleibt das von v2.528.0: Lernspiele klappt
die Spiele DARUNTER auf, über die volle Breite; Erklärblatt und
Klassenarbeit wechseln den Bildschirm. Die Glyphen behalten ihre
Kennfarben (--ls-glyph, --eb-glyph, --kont-plan); offen oder mit
gewähltem Spiel trägt der Knopf die THEMENFARBE (--kapsel-ton) wie
„Mittel" und jede andere Wahl der Kapsel. Bis v2.991.0 war es VIOLETT
(Kennfarbe der Lernspiele) – Murat 10.10.2026: „tema rengi olacak …
bir tarafta tema rengi, diğer tarafta mor“. */
.ls-acc{margin:0;padding:0;border-radius:0;background:none;box-shadow:none;}
.ls-acc-inner{background:transparent;border-radius:0;}
.mod-reihe{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:4px 8px 8px;}
.mod-reihe > *{flex:none;min-width:0;}
/* DIE DREI EINSTIEGE ALS 3D-REITER (v2.996.1, Murat 11.10.2026:
„lernspiele und mehr kısmında da 3d tab button şeklinde yapsana“).
Bis v2.996.0 hingen sie im Menü am Knopf „Lernspiele & mehr“. Jetzt
stehen sie nebeneinander in der Reihe - dieselbe Tiefe wie die Reiter im
Einstellungskasten (.mat-reiter): erhaben mit dem Schattenpaar der alten
Leiste auf --paper, gedrückt bzw. offen eingedrückt in der Themenfarbe,
keine Unterstreichung. Sichtbar ist nur der Titel; der Untertitel bleibt
im Markup (Vorlesewerkzeug). Die Symbole tragen die Themenfarbe statt
ihrer Kennfarben - auch das Lernspiel-Violett ist damit weg. */
.mod-reihe > .mat-start-reiter{flex:0 1 auto;}
.mat-start-reiter{display:flex;align-items:center;gap:10px;min-width:0;padding:3px 2px;}
.mat-start-reiter > .mod-eb{display:flex;min-width:0;}
.mat-start-reiter .ls-acc-head{gap:7px;padding:6px 13px 6px 9px;border-radius:12px;min-width:0;
background:var(--paper);color:var(--ink);text-decoration:none;
box-shadow:3px 3px 7px var(--sb-tief), -3px -3px 7px var(--sb-hoch);
transition:box-shadow .2s var(--sb-weich), background-color .2s ease, color .2s ease, transform .12s var(--sb-weich);}
.mat-start-reiter .ls-acc-head > div{min-width:0;}
.mat-start-reiter .ls-acc-ico,
.mat-start-reiter .ls-acc-ico.eb-acc-ico,
.mat-start-reiter .ls-acc-ico.ka-acc-ico{width:auto;height:auto;background:transparent;border-radius:0;
color:var(--kapsel-ton, var(--brand));}
.mat-start-reiter .ls-acc-ico svg{width:17px;height:17px;}
.mat-start-reiter .ls-acc-ttl{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mat-start-reiter .ls-acc-zusatz,
.mat-start-reiter .ls-acc-sub,
.mat-start-reiter .ls-acc-arrow{display:none;}
.mat-start-reiter .ls-acc-head:hover{background:var(--paper);
box-shadow:1px 1px 3px var(--sb-tief), -1px -1px 3px var(--sb-hoch);}
.mat-start-reiter .ls-acc-head:active,
.mat-start-reiter #ls-acc-kopf[aria-expanded="true"],
body.ls-active .mat-start-reiter #ls-acc-kopf{
background:var(--kapsel-ton-soft, var(--brand-soft));color:var(--kapsel-ton-ink, var(--brand));
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);}
.mat-start-reiter .ls-acc-head:active{transform:scale(.985);}
.mat-start-reiter #ls-acc-kopf[aria-expanded="true"] .ls-acc-ico,
body.ls-active .mat-start-reiter #ls-acc-kopf .ls-acc-ico{color:var(--kapsel-ton-ink, var(--brand));}
.mat-start-reiter .ls-acc-head:focus-visible{outline:2px solid var(--kapsel-ton, var(--brand));outline-offset:2px;}
@media (prefers-reduced-motion: reduce){ .mat-start-reiter .ls-acc-head{transition:none;} }
/* Grundform der Einstiege (bis v2.996.0 Menüzeilen: Symbol auf einem
Hauch, Titel, darunter ein Satz). In der Kapsel überschreibt sie
.mat-start-reiter oben. */
.ls-acc-head{display:flex;align-items:center;gap:12px;padding:10px;border-radius:11px;
color:var(--ink);cursor:pointer;user-select:none;transition:background .15s;}
.ls-acc-head:hover{background:var(--kapsel-ton-soft, var(--surface-subtle));}
.ls-acc-head:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.ls-acc-ico{flex:none;width:36px;height:36px;border-radius:10px;display:flex;
align-items:center;justify-content:center;background:var(--surface-subtle);color:var(--ls-glyph);}
.ls-acc-ico svg{width:19px;height:19px;}
.ls-acc-ttl{font-weight:650;font-size:14px;letter-spacing:0;line-height:1.25;}
.ls-acc-sub{font-size:11.5px;font-weight:500;color:var(--muted);margin-top:2px;line-height:1.35;}
.ls-pill{display:inline-flex;align-items:center;gap:4px;font-size:10.5px;font-weight:800;letter-spacing:.4px;
text-transform:uppercase;padding:3px 9px;border-radius:99px;color:#fff;
background:linear-gradient(135deg,#7A5AF8,#2E5BFF);}
.ls-acc-arrow{display:none;}
#ls-acc-kopf[aria-expanded="true"],body.ls-active #ls-acc-kopf{background:var(--kapsel-ton-soft, var(--brand-soft));}
.mod-reihe .mod-eb:empty{display:none;}
/* DAS ZAHNRAD: nur das Zeichen (Murat 02.10.2026: „o sürekli böyle
yanmasın arka planını sil sadece dişli olsun“). Ruhend grau wie Plus
und Mikrofon, beim Zeigen und offen in der Flächenfarbe; es dreht sich
ein Stück - das ist der Zustand, kein Spiel. Kurz hatte es eine Fläche
und pulsierte („yanıp sönen … bana bas“); beides ist zurückgenommen. */
.mat-einst-knopf{margin-left:auto;flex:none;width:34px;height:34px;border:0;border-radius:50%;
display:flex;align-items:center;justify-content:center;cursor:pointer;
background:transparent;color:var(--sub);transition:color .2s;}
.mat-einst-knopf .ic{transition:transform .4s cubic-bezier(.3,.7,.3,1);}
.mat-einst-knopf:hover,.mat-einst-knopf.offen{color:var(--kapsel-ton-ink, var(--brand));}
.mat-einst-knopf:hover .ic{transform:rotate(60deg);}
.mat-einst-knopf.offen .ic{transform:rotate(90deg);}
.mat-einst-knopf:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* ===== DER EINSTELLUNGSKASTEN UNTER DER KAPSEL (v2.996.0) ==============
Auftrag Murat 11.10.2026: „kutu sabit kalsın, büyümesin … ayarlar
altta ayrı bir kutuda açılsın, aynı stilde … yan yana 3D tuşlar …
sol nav gibi yumuşak açılıp kapansın“. Bis v2.995 standen die Gruppen
als Klappzeilen IN der leuchtenden Kapsel und zogen sie lang.
1. DER KASTEN ist ein zweites `.komposit` mit `.box` und
`.kapsel-feld` - Rahmen, Verlauf und Schein kommen aus denselben
Regeln wie oben, nichts davon ist hier nachgebaut. Zu ist er
0 px hoch und ohne Schein.
2. WEICH wie die Leiste links (#ml-alles): dieselbe Kurve
--sb-weich, dieselbe Bewegung (ein Stück versetzt und minimal
kleiner -> an seinem Platz). Die Höhe fährt über das Raster
0fr -> 1fr - auf `auto` greift kein Übergang (siehe Akkordeon).
`overflow:hidden` nur während des Fahrens; `.steht` setzt
matEinstellungenUmschalten() nach dem Fahren.
3. DIE REITER (.mat-reiter) nebeneinander, erhaben mit dem
Schattenpaar der alten Seitenleiste (--sb-tief/--sb-hoch, auf
--paper - auf Weiß fiele die helle Hälfte aus, siehe .pf-btn),
gewählt EINGEDRÜCKT und in der Themenfarbe. Keine Unterstreichung.
Ihr Inhalt erscheint direkt darunter (matReiterWaehlen).
Wer Bewegung abgestellt hat, bekommt keine. */
#screen-upload .komposit.mat-einst-komposit{margin-top:0;transition:margin-top .34s var(--sb-weich);}
#screen-upload .komposit.mat-einst-komposit.offen{margin-top:18px;}
#screen-upload .komposit.mat-einst-komposit:not(.offen)::before{opacity:0;}
#screen-upload .mat-einst-falte{display:grid;grid-template-rows:0fr;overflow:hidden;
transition:grid-template-rows .34s var(--sb-weich);}
#screen-upload .mat-einst-komposit.offen > .mat-einst-falte{grid-template-rows:1fr;}
#screen-upload .mat-einst-komposit.steht > .mat-einst-falte{overflow:visible;}
#screen-upload .mat-einst-falte > .mat-einst-box{min-height:0;padding-top:4px;
opacity:0;visibility:hidden;transform:translateY(-10px) scale(.985);transform-origin:50% 0;
transition:transform .34s var(--sb-weich), opacity .24s ease, visibility 0s linear .34s;}
#screen-upload .mat-einst-komposit.offen > .mat-einst-falte > .mat-einst-box{
opacity:1;visibility:visible;transform:none;
transition:transform .34s var(--sb-weich), opacity .24s ease, visibility 0s;}
#screen-upload .mat-einst-feld{padding:0;}
/* Die Reiter: gleich breit nebeneinander, am Telefon schrumpfen sie mit. */
#screen-upload .mat-reiter-reihe{display:flex;gap:12px;padding:14px 14px 12px;}
#screen-upload .mat-reiter{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;
padding:10px 12px;border:0;border-radius:14px;cursor:pointer;font:inherit;text-align:left;
background:var(--paper);color:var(--ink);text-decoration:none;
box-shadow:3px 3px 7px var(--sb-tief), -3px -3px 7px var(--sb-hoch);
transition:box-shadow .2s var(--sb-weich), background-color .2s ease, color .2s ease, transform .12s var(--sb-weich);}
#screen-upload .mat-reiter .ic{flex:none;color:var(--kapsel-ton, var(--brand));}
#screen-upload .mat-reiter-txt{display:flex;flex-direction:column;min-width:0;line-height:1.2;}
#screen-upload .mat-reiter-name{font-size:13px;font-weight:750;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-upload .mat-reiter-name .k-kurz{display:none;}
#screen-upload .mat-reiter-sum{font-size:11px;font-weight:600;color:var(--muted);margin-top:2px;
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
#screen-upload .mat-reiter-sum:empty{display:none;}
#screen-upload .mat-reiter:hover{box-shadow:1px 1px 3px var(--sb-tief), -1px -1px 3px var(--sb-hoch);}
#screen-upload .mat-reiter:active,
#screen-upload .mat-reiter[aria-selected="true"]{
background:var(--kapsel-ton-soft, var(--brand-soft));color:var(--kapsel-ton-ink, var(--brand));
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);}
#screen-upload .mat-reiter:active{transform:scale(.985);}
#screen-upload .mat-reiter[aria-selected="true"] .ic{color:var(--kapsel-ton-ink, var(--brand));}
#screen-upload .mat-reiter[aria-selected="true"] .mat-reiter-sum{color:var(--kapsel-ton-ink, var(--brand));opacity:.75;}
#screen-upload .mat-reiter:focus-visible{outline:2px solid var(--kapsel-ton, var(--brand));outline-offset:2px;}
/* Die Gruppen: ohne Titel (der Reiter ist der Titel), ohne Linie und
ohne Polster, solange sie zu sind - nur die gewählte trägt Höhe. */
#screen-upload #advanced-options > .mat-group{padding:4px 18px 16px;border-top:0;
transition:padding .34s var(--sb-weich);}
#screen-upload #advanced-options > .mat-group.collapsed{padding-top:0;padding-bottom:0;}
#screen-upload #advanced-options > .mat-group > .mat-group-ttl{display:none;}
#screen-upload #advanced-options > .mat-group > .mat-group-bd{overflow:hidden;
transition:grid-template-rows .34s var(--sb-weich);}
#screen-upload #advanced-options > .mat-group.collapsed > .mat-group-bd > .mat-group-bdin{transition:visibility 0s .34s;}
@media (prefers-reduced-motion: reduce){
#screen-upload .komposit.mat-einst-komposit,
#screen-upload .mat-einst-falte,
#screen-upload .mat-einst-falte > .mat-einst-box,
#screen-upload .mat-einst-komposit.offen > .mat-einst-falte > .mat-einst-box,
#screen-upload .mat-reiter,
#screen-upload #advanced-options > .mat-group,
#screen-upload #advanced-options > .mat-group > .mat-group-bd{transition:none;}
}
@media (max-width:640px){
#screen-upload .komposit.mat-einst-komposit.offen{margin-top:12px;}
#screen-upload .mat-reiter-reihe{gap:6px;padding:10px 8px 8px;}
#screen-upload .mat-reiter{flex-direction:column;justify-content:center;gap:4px;
padding:8px 4px;border-radius:12px;text-align:center;}
#screen-upload .mat-reiter-txt{align-items:center;width:100%;}
#screen-upload .mat-reiter-name{font-size:var(--fs-2xs, 11px);max-width:100%;}
#screen-upload .mat-reiter-name .k-lang{display:none;}
#screen-upload .mat-reiter-name .k-kurz{display:inline;}
#screen-upload .mat-reiter-sum{display:none;}
#screen-upload #advanced-options > .mat-group{padding-left:10px;padding-right:10px;}
#screen-upload #advanced-options > .mat-group:not(.collapsed){padding-bottom:12px;}
}
/* Die Kapsel darüber liegt eine Stufe höher: ihre Menüs („Lernspiele &
mehr“, Plus) klappen über diesen Kasten, nicht darunter. */
#screen-upload > .komposit.mat-einst-komposit{z-index:2;}
/* Gruppensymbole in der Themenfarbe, nie Violett (Murat 11.10.2026). */
#screen-upload .mat-group-ttl::before{background:var(--kapsel-ton, var(--brand));}
/* „Fertige Blätter“ ist ausgeblendet (v2.992.0, Murat: „Fertige Blätter'ı
kaldırıyoruz“). Der Code bleibt; die Vorlage wählt „Blattvorlage“. */
#advanced-options > .mat-group[data-grp="vor"]{display:none !important;}
/* Das Erklaerblatt traegt seine eigene Farbe - dieselbe wie die Kachel im
Werkzeugkasten. Zwei Einstiege in derselben Farbe saehen aus wie ein
Knopf mit zwei Haelften. */
.eb-acc-ico{color:var(--eb-glyph);}
/* Die Klassenarbeit (v2.898.0) im Ton ihres Kontingents - sie zählt wie
die Planung (loadPlanQuota2 im Editor), deshalb --kont-plan. */
.ka-acc-ico{color:var(--kont-plan);}
/* ===== Fertige Blaetter (v2.533.0, benannt v2.534.0) =====
Karten nebeneinander, umbrechend. Keine verkleinerte Seite - die kommt
mit der Design-Schicht; bis dahin steht auf der Karte, was die
Einstellung wirklich setzt. */
/* EINE REIHE MIT PFEILEN (v2.535.0, Wunsch Murat 29.08.2026:
„tek sira olmali, saga sola ok koy"). Vorher ein umbrechendes Raster -
bei zehn Karten drei Zeilen, und die Reihe wuchs mit jeder neuen Karte
nach unten statt zur Seite. Mit dem Regal je Fach (Plan Faz 12) waeren
es Dutzende gewesen.
Die Masse sind ABSICHTLICH dieselben wie bei der Design-Buehne des
Erklaerblatts (`.eb-dz-*`): dort sind sie im Browser gemessen. Eigene
Klassennamen trotzdem, weil `eb-` der Namensraum des Erklaerblatts ist -
zwei Module an EINER Klasse haengen zu lassen heisst, dass die naechste
Aenderung an einem beide trifft.
WEDER `scroll-snap-type` NOCH `scroll-behavior:smooth` - beides ist
dort ausprobiert und wieder herausgenommen worden (gemessen 28.08.2026):
mit Rasterung zog ein Sprung auf 200 px wieder auf 32 px zurueck, mit
Weichzeichner bewegte sich `scrollLeft` gar nicht. */
.mat-vor-liste{display:flex;flex-direction:column;gap:8px;}
.mat-vor-lauf{display:flex;align-items:stretch;gap:6px;min-width:0;}
/* NUR DER PFEIL, KEIN KASTEN (v2.537.0, Anweisung Murat: „sadece ok
olsunlar, kutuyu kaldir"). Ein Rahmen um einen Pfeil macht aus einer
Blaetterhilfe ein Bedienelement, das mit den Karten daneben um
Aufmerksamkeit streitet - und die Karten sind das, was man ansehen
soll. Die Trefferflaeche bleibt 30 px breit; sie haengt an der Groesse
des Knopfes, nicht an seinem Rahmen. */
.mat-vor-pfeil{appearance:none;flex:none;width:30px;cursor:pointer;padding:0;
display:inline-flex;align-items:center;justify-content:center;
border:0;background:none;color:var(--muted);transition:color .12s;}
.mat-vor-pfeil:hover{color:var(--brand);}
.mat-vor-pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
/* AM TELEFON KEINE PFEILE (v2.540.0, Befund Murat 29.08.2026: „mobilde
fertige blätter kismi sag sol yerlerini kaldir, mobile özel cok kötü
duruyor orasi").
Er hat recht, und der Grund ist der Platz: zweimal 30 px Pfeil plus
Abstände fressen auf einem 375-px-Schirm ein Viertel der Zeile, und
zurück bleibt eine Karte, die weder ganz zu sehen noch bequem zu
treffen ist. Geblättert wird dort ohnehin mit dem FINGER - der Pfeil
ist eine Maus-Hilfe, und auf dem Telefon gibt es keine Maus.
NUR IM SCHMALEN BLOCK (CLAUDE.md, Mobil-Abschnitt): auf Tablet und
Rechner bleibt die Reihe genau so, wie sie in v2.535.0 gebaut wurde.
Die Einrückung der zwei Fusszeilen hing an der Pfeilbreite (36 px) -
ohne Pfeil wäre sie eine Einrückung zu nichts. */
/* KEIN SICHTBARER SCHIEBEBALKEN (Befund Murat 30.08.2026: „saga sola
kaydirma bari cikiyor, görünmez yap").
Geblättert wird hier mit den Pfeilen (Maus) oder mit dem Finger
(Telefon). Der Balken ist also keine nötige Anzeige, sondern eine
zweite, hässlichere Bedienung unter einer Reihe, die selbst nur gut
zwei Fingerbreit hoch ist. GESCROLLT WIRD WEITER: `overflow-x:auto`
bleibt stehen, nur die Anzeige verschwindet - Finger, Rad und Tastatur
merken keinen Unterschied, und die Pfeile arbeiten unverändert über
`scrollLeft` (matVorSchieben).
ZWEI ZEILEN, WEIL EINE NICHT REICHT: `scrollbar-width:none` deckt
Firefox und neuere Chrome/Safari ab. Die zweite Zeile richtet sich
gegen die GLOBALE Regel `*:hover::-webkit-scrollbar-thumb` weiter oben
in dieser Datei - die malt in WebKit beim Überfahren einen Daumen, und
ohne sie zu überschreiben käme der Balken genau dann zurück, wenn die
Maus über der Reihe steht. Also derselbe Bau wie bei `.fachbar`.
Damit steht die Reihe auf demselben Stand wie die übrigen
Karten-Streifen des Hauses (`.cockpit-recent`, `.pod-classbar`,
`.kbp-tabs`); sie war mit `thin` der einzige Ausreisser. */
@media (max-width:640px){
.mat-vor-pfeil{display:none;}
.mat-vor-alle,.mat-vor-zurueck{padding-left:2px;}
.mat-vor-spur{padding-left:0;padding-right:0;}
}
.mat-vor-spur{flex:1 1 auto;min-width:0;display:flex;gap:12px;
overflow-x:auto;overflow-y:hidden;padding:2px 2px 8px;
scrollbar-width:none;-ms-overflow-style:none;}
.mat-vor-spur::-webkit-scrollbar{display:none;}
.mat-vor-k{position:relative;flex:0 0 176px;width:176px;}
@media (max-width:560px){ .mat-vor-k{flex-basis:150px;width:150px;} }
.mat-vor{appearance:none;cursor:pointer;font:inherit;text-align:left;
width:100%;height:100%;display:flex;flex-direction:column;gap:3px;
border:1px solid var(--line);border-radius:var(--r-control);
background:var(--card);color:var(--ink);padding:10px 12px;
transition:border-color .12s,background .12s;}
.mat-vor:hover{border-color:var(--brand);}
/* Der Name mittig, darunter die Facheignung - und sonst nichts (Faz A2).
`text-align:left` steht an `.mat-vor` fuer die alten Erklaersaetze; die
sind weg, also darf die Kachel mittig werden. Der Name darf umbrechen,
die Fachzeile nicht: „Politik & Wirtschaft" auf zwei Zeilen liest sich
wie zwei Faecher. */
.mat-vor{text-align:center;align-items:center;}
/* ===== NAME UND FACH LIEGEN AUF DEM BLATT (Faz B1, §3.1) ============
Vorher standen sie DARUNTER und kosteten drei Zeilen Hoehe - mehr, als
das Blatt darueber hoch war. In einer Reihe, durch die man blaettert,
ist das die falsche Verteilung: gesucht wird mit dem Auge, gelesen erst
bei der Kachel, die in Frage kommt.
KEINE NEUE FARBE: der Streifen nimmt `--card` und `--line` aus dem
Woerterbuch. Ein halbdurchsichtiges Dunkel haette hier besser
ausgesehen und waere im Dunkelmodus falsch geblieben
(DESIGN_SYSTEM.md §9).
`pointer-events:none` ist Pflicht und nicht Feinschliff: der Lupenknopf
liegt in derselben Kachel, und ein Streifen, der Klicks schluckt,
nimmt ihm die untere Haelfte (§3.1, zweiter Punkt). */
/* ZWEI KLASSEN JE REGEL, und das ist kein Zierat: weiter unten in dieser
Datei stehen aus der alten Kachel noch `.mat-vor b` und `.mat-vor span`.
Beide sind spezifischer als eine einzelne Klasse UND stehen spaeter -
sie haetten jede Angabe hier ueberschrieben, und zwar lautlos. */
.mat-vor .mat-vor-info{position:absolute;left:0;right:0;bottom:0;z-index:1;
display:flex;flex-direction:column;gap:1px;padding:5px 7px 6px;
background:var(--card);border-top:1px solid var(--line);
opacity:0;transition:opacity .12s;pointer-events:none;}
.mat-vor-k:hover .mat-vor-info,
.mat-vor:focus-visible .mat-vor-info,
.mat-vor-k.an .mat-vor-info{opacity:1;}
@media (hover:none){ .mat-vor .mat-vor-info{opacity:1;} }
.mat-vor .mat-vor-info > b{font-size:12px;line-height:1.25;font-weight:700;
display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mat-vor .mat-vor-fach{font-size:11px;font-weight:600;color:var(--ink);
white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.mat-vor .mat-vor-fach2{font-size:10px;color:var(--muted);line-height:1.3;
max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.mat-vor-k.an .mat-vor{border-color:var(--brand);background:var(--brand-soft);
box-shadow:inset 0 0 0 1px var(--brand);}
/* Die Vorschau: ein GANZES Dokument in einem Rahmen, herunterskaliert.
176 px von 760 px Blattbreite ergeben den Massstab 0.2316; die Rechnung
steht hier und nicht im Blatt, weil die Breite hier festgelegt wird -
dieselbe Ueberlegung wie bei `--ebb-mini-skala` im Erklaerblatt. */
.mat-vor-mini{display:block;width:100%;aspect-ratio:210/297;overflow:hidden;
border:1px solid var(--line);border-radius:6px;background:var(--paper);
position:relative;pointer-events:none;}
.mat-vor-mini iframe{position:absolute;top:0;left:0;width:760px;height:1074px;
border:0;transform:scale(.2316);transform-origin:top left;}
@media (max-width:560px){ .mat-vor-mini iframe{transform:scale(.1974);} }
.mat-vor-lupe{position:absolute;top:6px;right:6px;width:26px;height:26px;z-index:2;
display:inline-flex;align-items:center;justify-content:center;padding:0;
border:1px solid var(--line);border-radius:8px;background:var(--card);
color:var(--muted);cursor:pointer;opacity:0;transition:opacity .12s;}
.mat-vor-k:hover .mat-vor-lupe,.mat-vor-lupe:focus-visible{opacity:1;}
.mat-vor-lupe:hover{color:var(--brand);border-color:var(--brand);}
.mat-vor-lupe svg{width:14px;height:14px;fill:none;stroke:currentColor;
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
@media (hover:none){ .mat-vor-lupe{opacity:1;} }
/* Die grosse Ansicht - ueber der Seite, damit die Auswahl stehen bleibt. */
.mat-vor-gk{max-width:min(860px,96vw);width:100%;max-height:94vh;
display:flex;flex-direction:column;overflow-y:auto;}
.mat-vor-gk-akt{display:flex;align-items:center;gap:var(--s-2);margin-left:auto;}
.mat-vor-gk-akt .btn{margin:0;width:auto;}
.mat-vor-gk-satz{font-size:12px;color:var(--muted);margin:2px 0 8px;}
/* EINE BILDLAUFLEISTE, NICHT ZWEI (v2.537.0).
BEFUND MURAT 29.08.2026: „groß ansehen'a basiyom, hem icerdeki pdf
kaydiriliyo hem pencerenin kendisi kaydirma cubugu geliyo - biri
olmalidir." Er hat recht, und der Grund war hausgemacht: `.modal-card`
scrollt ohnehin (`overflow-y:auto`), und der Blattkasten scrollte
zusaetzlich. Zwei Leisten nebeneinander, und keine davon tat, was man
erwartete.
JETZT SCROLLT NUR DIE KARTE. Der Blattkasten waechst einfach mit -
„millet salak degil, kaydirabilir". Die Kopfzeile bleibt oben kleben,
sonst muesste man zum Schliessen erst wieder hochscrollen.
Und mittig mit gleichen Raendern: das Blatt ist 760 px breit, die Karte
breiter - ohne `justify-content` klebte es links und die Luft sammelte
sich rechts. */
.mat-vor-gk .modal-head{position:sticky;top:0;z-index:2;
background:var(--card);padding-bottom:8px;}
.mat-vor-gk-blatt{overflow:visible;display:flex;
justify-content:center;align-items:flex-start;
background:var(--paper);border-radius:var(--r-control);padding:var(--s-2);}
.mat-vor-gk-buehne{flex:none;width:760px;transform-origin:top center;}
.mat-vor-gk-blatt iframe{display:block;width:760px;height:1074px;
border:0;background:var(--paper);}
.mat-vor b{font-size:13px;font-weight:700;display:flex;align-items:center;
gap:6px;flex-wrap:wrap;}
.mat-vor span{font-size:11.5px;color:var(--muted);line-height:1.4;}
.mat-vor.an span{color:var(--ink);}
.mat-vor-was{font-size:11px !important;opacity:.8;}
/* `.mat-vor-empf` gab es bis v2.533.2 – es hat die eine „empfohlene"
Karte hervorgehoben. Seit der Fachfilter da ist, sind ALLE gezeigten
Karten passend; eine davon auszuzeichnen hiesse, die anderen ohne Grund
abzuwerten. Die Regel bleibt nur fuer `.mat-vor-ge` („geändert"). */
.mat-vor-ge{font-style:normal;font-size:10px;font-weight:800;
letter-spacing:.03em;text-transform:uppercase;padding:2px 6px;
border-radius:999px;color:var(--bad);background:var(--bad-soft);}
/* Der Ausweg aus dem Fachfilter (v2.533.3). Er steht in derselben Zeile
wie die Karten, damit sichtbar ist, dass es noch mehr gibt - ein Filter
ohne sichtbaren Ausweg ist eine Sperre mit besseren Manieren. */
.mat-vor-alle{font-size:12px;padding-left:36px;}
.mat-vor-alle button{appearance:none;border:0;background:none;padding:0;
font:inherit;color:var(--muted);cursor:pointer;text-decoration:underline;}
.mat-vor-alle button:hover{color:var(--brand);}
.mat-vor-zurueck{font-size:12px;color:var(--muted);padding-left:36px;}
.mat-vor-zurueck button{appearance:none;border:0;background:none;padding:0;
font:inherit;font-weight:700;color:var(--brand);cursor:pointer;
text-decoration:underline;}
/* Wie viel Platz der Lesetext braucht (v2.531.1). Ein Satz unter den
Schaltern - kein Absatz (CLAUDE.md: an einem Bedienelement steht
hoechstens ein Satz). `warn` faerbt ihn, wenn es nicht mehr passt. */
.lesetext-platz{font-size:12px;color:var(--muted);line-height:1.45;
margin:2px 0 4px;}
.lesetext-platz:empty{display:none;}
.lesetext-platz.warn{color:var(--bad);font-weight:600;}
/* ===== Beta-Protokoll im Admin-Bereich (v2.529.0) ===== */
/* Der Beta-Reiter traegt eine eigene Farbe: er ist befristet und soll sich
von den dauerhaften Eintraegen unterscheiden. `--kont-plan` ist der Ton,
den das Woerterbuch fuer „vorlaeufig/Planung" schon fuehrt - keine neue
Farbe. */
.adm-tab-beta{color:var(--kont-plan);font-weight:800;}
.adm-tab.active .adm-tab-beta{color:var(--kont-plan);}
#admtab-beta .adm-tab-ico{color:var(--kont-plan);}
.adm-tab-ico{display:inline-flex;align-items:center;}
.adm-tab-ico svg{width:20px;height:20px;fill:none;stroke:currentColor;
stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;}
.adm-beta-filter{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:10px;}
.adm-beta-btn{width:auto;padding:8px 14px;margin:0;}
.adm-beta-kenn{display:block;font-size:11px;}
.adm-beta-pdf{margin-left:8px;font-weight:700;}
/* Die Frist ist aus der Zeile verschwunden (v2.564.0) - die Regel bleibt
stehen, damit ein alter zwischengespeicherter Aufbau nichts zerreisst. */
.adm-beta-frist{display:none;}
/* ZWEI BEDIENELEMENTE, NEBENEINANDER. Vorher schob die Frist sie mit
`margin-left:auto` an die beiden Raender - dazwischen lag eine
Handbreit Nichts, und die Auswahl zog sich ueber die halbe Seite. */
#admin-beta-filter{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
#admin-beta-filter select{width:auto;min-width:180px;max-width:280px;}
.adm-beta-wrap{overflow-x:auto;}
.adm-beta-tab{width:100%;border-collapse:collapse;font-size:12.5px;}
.adm-beta-tab th{text-align:left;padding:6px 8px;border-bottom:1px solid var(--line);
white-space:nowrap;color:var(--muted);font-weight:700;}
.adm-beta-tab td{padding:6px 8px;border-bottom:1px solid var(--line);vertical-align:top;}
.adm-beta-tab td.eng{white-space:nowrap;}
/* ⛔ DIE LETZTE SPALTE DARF NICHT ABGESCHNITTEN WERDEN (v2.640.3, Befund
Murat 04.09.2026: „bide yaninda bisey daha var ama görünmüyor").
Dort stehen bis zu VIER Wege - Erster Stand · Aktuell · Inhalt · PDF -
und sie trug `white-space:nowrap` wie jede andere „enge" Spalte. Damit
lief sie aus dem Bild, und „Inhalt" und „PDF" waren unerreichbar, ohne
dass irgendetwas darauf hindeutete. Jetzt brechen die Wege um, stehen
untereinander und sind alle erreichbar. */
.adm-beta-tab td.adm-beta-wege{ white-space:normal; min-width:96px;
display:flex; flex-direction:column; gap:2px; align-items:flex-start; }
.adm-beta-tab td.adm-beta-wege a{ white-space:nowrap; }
.adm-beta-pdf{ margin-left:0 !important; }
.ls-acc-body{padding:4px 18px 16px;}
.ls-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:6px 0 4px;}
@media(min-width:620px){.ls-grid{grid-template-columns:repeat(3,1fr);}}
.ls-tile{position:relative;border:1.5px solid var(--line);border-radius:13px;padding:13px 11px;cursor:pointer;
background:var(--card);transition:border-color .14s,background .14s,transform .08s;text-align:center;}
.ls-tile:hover{border-color:var(--kapsel-ton, var(--brand));background:var(--kapsel-ton-soft, var(--brand-soft));}
.ls-tile:active{transform:scale(.98);}
.ls-tile.on{border-color:var(--kapsel-ton, var(--brand));background:var(--kapsel-ton-soft, var(--brand-soft));
box-shadow:0 0 0 1px var(--kapsel-ton, var(--brand)) inset;}
.ls-tile-ico{width:26px;height:26px;margin:0 auto 7px;color:var(--kapsel-ton, var(--brand));}
.ls-tile.on .ls-tile-ico{color:var(--kapsel-ton-ink, var(--brand));}
.ls-tile-name{font-size:12.5px;font-weight:700;color:var(--ink);line-height:1.2;}
.ls-tile-desc{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.25;}
.ls-tile-check{position:absolute;top:7px;right:7px;width:17px;height:17px;border-radius:50%;
background:var(--kapsel-ton, var(--brand));color:var(--card);display:none;align-items:center;justify-content:center;}
.ls-tile.on .ls-tile-check{display:flex;}
.ls-diff-wrap{margin-top:12px;}
/* Escape-Room: Themen-Auswahl (fachunabhängige Story-Verpackung) */
.esc-theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-top:6px;}
@media(min-width:620px){.esc-theme-grid{grid-template-columns:repeat(5,1fr);}}
.esc-theme{position:relative;border:1.5px solid var(--line);border-radius:11px;padding:10px 6px 9px;cursor:pointer;
text-align:center;background:var(--card);transition:border-color .14s,background .14s,transform .08s;}
.esc-theme:hover{transform:translateY(-1px);}
.esc-theme .et-emoji{font-size:22px;line-height:1;display:block;margin-bottom:5px;}
.esc-theme .et-name{font-size:11px;font-weight:700;line-height:1.25;}
.esc-theme.on{border-color:var(--kapsel-ton, var(--brand));background:var(--kapsel-ton-soft, var(--brand-soft));box-shadow:0 0 0 1px var(--kapsel-ton, var(--brand)) inset;}
.ls-diff-lbl{font-size:12px;font-weight:700;color:var(--muted);display:block;margin-bottom:6px;}
.ls-hint{font-size:12px;color:var(--muted);background:var(--kapsel-ton-soft, var(--brand-soft));border:0;
border-radius:10px;padding:10px 12px;margin-top:12px;line-height:1.4;display:flex;gap:8px;align-items:flex-start;}
.ls-hint svg{flex:none;color:var(--kapsel-ton, var(--brand));margin-top:1px;}
.ls-locked{opacity:.45;pointer-events:none;filter:grayscale(.3);}
.ls-lockbadge{display:none;font-size:11px;font-weight:700;color:var(--kapsel-ton-ink, var(--brand));background:var(--kapsel-ton-soft, var(--brand-soft));
border-radius:8px;padding:6px 10px;margin-top:10px;align-items:center;gap:6px;}
body.ls-active .ls-lockbadge{display:inline-flex;}
.acc-head{display:flex;align-items:center;gap:9px;cursor:pointer;user-select:none;}
.acc-head h3{margin:0;}
.acc-arrow{display:inline-block;transition:transform .18s ease;font-size:13px;color:var(--muted);flex:0 0 auto;}
.acc-arrow.open{transform:rotate(90deg);}
.acc-body{margin-top:14px;}
.acc-body.hidden{display:none;}
/* Aufgaben-Quelle: Icon-Kacheln */
.ex-src-tile{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
background:#fff;border:1.5px solid var(--line);border-radius:12px;padding:14px 8px;cursor:pointer;
color:var(--ink,#1a2233);font:inherit;text-align:center;line-height:1.2;transition:border-color .15s,background .15s,transform .1s;}
.ex-src-tile:hover{border-color:var(--brand);background:var(--brand-soft,#F0F4FF);}
.ex-src-tile:active{transform:scale(.97);}
.ex-src-tile svg{width:24px;height:24px;color:var(--brand);}
.ex-src-tile span{font-size:12px;font-weight:600;}
/* === EDITOR === */
.ed-card{border:1.5px solid var(--line);border-radius:14px;padding:14px;margin-bottom:14px;}
.ed-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;font-size:12.5px;color:var(--muted);font-weight:700;}
.ed-del{color:var(--bad);cursor:pointer;font-weight:700;text-decoration:none;}
/* Frage-Akkordeon im Editor: zugeklappt zeigt nur den Kopf, Klick öffnet den Body */
.ed-card .ed-head{cursor:pointer;user-select:none;margin-bottom:0;gap:8px;}
.ed-head-main{display:flex;align-items:center;gap:8px;min-width:0;flex:1;}
.ed-chev{width:16px;height:16px;flex:none;fill:none;stroke:var(--muted);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s;}
.ed-card:not(.ed-collapsed) .ed-chev{transform:rotate(90deg);}
.ed-head-no{color:var(--ink);font-weight:800;flex:none;}
.ed-head-type{flex:none;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:99px;background:var(--brand-soft);color:var(--brand-dk);}
.ed-head-prev{font-weight:500;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;}
.ed-del{flex:none;font-size:14px;padding:2px 6px;border-radius:8px;}
.ed-del:hover{background:var(--bad-soft,rgba(216,64,64,.1));}
.ed-body{margin-top:12px;}
.ed-card.ed-collapsed .ed-body{display:none;}
.ed-card.ed-collapsed{padding-bottom:14px;}
.ed-del:hover{text-decoration:underline;}
.ed-card textarea{min-height:54px;margin-bottom:10px;}
.ed-card input[type=text]{margin-bottom:0;}
/* Abbildungs-Buttons (Funktionsgraph · Figur · Eigenes Bild): gleiche Größe,
Icon + Label, dezent bis Hover. */
.ed-abb-btn{flex:1 1 0;min-width:130px;display:inline-flex;align-items:center;justify-content:center;gap:7px;
font-size:13px;padding:10px 12px;color:var(--brand);border:1px solid var(--line);border-radius:10px;
background:var(--card);font-weight:600;cursor:pointer;transition:border-color .12s,background .12s,box-shadow .12s;}
.ed-abb-btn:hover{border-color:var(--brand);background:var(--brand-soft,#EEF2FF);box-shadow:0 2px 8px rgba(46,91,255,.1);}
.ed-abb-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none;}
.ed-meta{display:flex;gap:14px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);}
.ed-meta label{display:flex;flex-direction:column;gap:4px;font-size:11.5px;color:var(--muted);font-weight:700;}
.ed-meta select,.ed-meta input{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:13px;font-family:inherit;}
.ed-meta input[type=number]{width:80px;}
.ed-optrow{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.ed-optrow input[type=text]{flex:1;}
.ed-optrow input[type=radio],.ed-optrow input[type=checkbox]{width:18px;height:18px;flex-shrink:0;accent-color:var(--ok);}
/* === ESCAPE-ROOM BEARBEITEN (B1, PLAN_ESCAPE_LEBENDIG §3) ================
Das Fenster der Lehrkraft fuer die Texte der Stationen
(static/js/escape-bearbeiten.js). Karten wie der Quiz-Editor (.ed-card),
dazu nur, was ein Raum mehr hat: der Buchstabe je Station, das
Loesungswort, ein fester Fuss mit Speichern. Steht VOR dem Escape-Block -
dort darf nur stehen, was am Kinder-Bildschirm haengt
(qa/unit/test_escape_modus.py). */
.esb-karte{max-width:760px;width:100%;max-height:92vh;display:flex;flex-direction:column;padding:0;
background:var(--card);color:var(--ink);overflow:hidden;}
.esb-karte .modal-head{padding:var(--s-4) var(--s-5) var(--s-3);margin:0;}
.esb-satz{margin:0;padding:var(--s-3) var(--s-5);font-size:var(--fs-sm);color:var(--muted);}
.esb-liste{flex:1;min-height:0;overflow-y:auto;padding:0 var(--s-5) var(--s-3);
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
.esb-wort{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:0 0 var(--s-3);}
.esb-wort-lbl{font-size:var(--fs-sm);font-weight:700;color:var(--muted);margin-right:4px;}
.esb-zeichen{display:inline-flex;align-items:center;justify-content:center;min-width:24px;height:24px;
padding:0 5px;border-radius:6px;background:var(--brand-soft);color:var(--brand-dk);font-weight:800;
font-size:13px;flex:none;}
.esb-neben{flex:none;font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:var(--r-pill);
background:var(--paper);color:var(--muted);}
.esb-feld{display:flex;flex-direction:column;gap:5px;margin:0 0 var(--s-3);}
.esb-feld>span{font-size:12px;font-weight:700;color:var(--muted);}
.esb-feld input[type=text],.esb-feld textarea{width:100%;box-sizing:border-box;padding:9px 11px;
border:1px solid var(--line);border-radius:var(--r-control);font:inherit;font-size:14px;
color:var(--ink);background:var(--card);margin:0;}
.ed-card .esb-feld textarea{min-height:44px;margin:0;resize:vertical;}
.esb-feld input[type=text]:focus,.esb-feld textarea:focus{outline:none;border-color:var(--brand);
box-shadow:0 0 0 3px var(--brand-soft);}
.esb-feld .ed-optrow{margin:0;}
.esb-aufgabe{border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);
padding:var(--s-3) 0 0;margin:0 0 var(--s-3);}
.esb-paar,.esb-schritt{display:flex;align-items:center;gap:8px;}
.esb-paar>span{color:var(--muted);flex:none;}
.esb-nr{flex:none;width:22px;text-align:center;font-weight:800;color:var(--muted);}
.esb-wahl{display:flex;gap:var(--s-4);}
.esb-wahl label{display:flex;align-items:center;gap:6px;font-weight:600;cursor:pointer;}
.esb-fuss{display:flex;align-items:center;justify-content:flex-end;gap:var(--s-2);flex-wrap:wrap;
padding:var(--s-3) var(--s-5);border-top:1px solid var(--line);background:var(--card);}
.esb-fuss .btn{width:auto;padding:10px 18px;font-size:15px;}
.esb-msg{flex:1 1 200px;font-size:var(--fs-sm);color:var(--muted);}
.esb-msg.warn{color:var(--bad-ink);font-weight:600;}
.ed-card.esb-fehler{border-color:var(--bad);}
/* „Neu erzeugen" (B2) oben in der Karte: Wunsch + Knopf, darunter die Rueckmeldung. */
.esb-neu{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 var(--s-3);padding:var(--s-2);
border-radius:var(--r-control);background:var(--paper);}
.esb-neu input[type=text]{flex:1 1 220px;min-width:0;padding:8px 10px;border:1px solid var(--line);
border-radius:var(--r-control);font:inherit;font-size:14px;color:var(--ink);background:var(--card);margin:0;}
.esb-neu .btn{width:auto;padding:8px 14px;font-size:14px;}
.esb-neu-msg{flex:1 1 100%;font-size:var(--fs-sm);color:var(--muted);}
.esb-neu-msg:empty{display:none;}
.esb-neu-msg.warn{color:var(--bad-ink);font-weight:600;}
/* Die Raetselart (B3) als Auswahl ueber der Aufgabe. */
.esb-art select{align-self:flex-start;max-width:100%;padding:8px 10px;border:1px solid var(--line);
border-radius:var(--r-control);font:inherit;font-size:14px;color:var(--ink);background:var(--card);}
/* Stationen einfuegen und entfernen (B4). Das Wort, das daraus wird, steht
oben - VOR dem Speichern (Plan §3 B4). */
.esb-st-fuss{display:flex;flex-wrap:wrap;gap:8px;justify-content:space-between;margin-top:var(--s-2);}
.esb-st-fuss .btn{width:auto;padding:7px 12px;font-size:13px;}
.esb-st-fuss .btn.esb-weg{color:var(--bad-ink);}
.esb-st-fuss .btn:disabled{opacity:.5;cursor:default;}
.esb-marke{display:inline-flex;align-items:center;gap:6px;flex:none;}
.esb-neu-marke{flex:none;font-size:10.5px;font-weight:800;padding:2px 7px;border-radius:var(--r-pill);
background:var(--ok-soft);color:var(--ok-ink);}
.ed-card.esb-st-neu{border-style:dashed;}
.esb-wort-neu{margin:0 0 var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-control);
background:var(--amber-soft);color:var(--amber-ink);font-size:var(--fs-sm);}
body.esb-offen{overflow:hidden;}
@media (max-width:640px){
.esb-karte{max-height:100%;}
.esb-karte .modal-head,.esb-satz,.esb-liste,.esb-fuss{padding-left:var(--s-3);padding-right:var(--s-3);}
}
/* Aufgabentypen als kompakte Chips (2026-07, Konzept B): statt grosser
Kaestchen kleine Pillen, die umbrechen – spart Hoehe, passt zum Karten-Look.
Die native Checkbox wird versteckt, ein Haekchen-Kreis zeigt die Auswahl. */
/* EIN AUSGERICHTETES RASTER (v2.467.0).
ZWEI ANLAEUFE, und der erste war falsch. v2.465.0 machte aus dem
umbrechenden Block EINE waagerecht rollende Zeile - Befund Murat sofort:
„aufgaben scroll a düsüyo bu olmaz böyle. düzenli alt alta koy ama
düzenli görüsünler." Und das stimmt: Waagerechtes Rollen versteckt
Auswahlmoeglichkeiten hinter einer Kante, die niemand sucht. Wer
„Fehlersuche" nie sieht, benutzt sie nie.
Das eigentliche Uebel war nie das Umbrechen, sondern die UNRUHE: ein
`flex-wrap` bricht dort um, wo die Breite zufaellig endet - jede Zeile
endet woanders, nichts steht untereinander. Ein Raster mit GLEICH
BREITEN Spalten bricht an derselben Stelle: die Kaestchen stehen in
Spalten und Zeilen, wie eine Liste. Sichtbar bleibt alles, und ruhig
ist es trotzdem. `auto-fill` bestimmt die Spaltenzahl aus der Breite -
am Computer vier, auf dem Tablet drei, auf dem Handy zwei (unten). */
.typ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(146px,1fr));gap:6px;}
/* `flex` statt `inline-flex`: das Kaestchen fuellt seine Rasterzelle, sonst
schrumpft es auf die Textbreite und die Spalten waeren wieder ungleich. */
.typ-row{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:11.5px;font-weight:700;
color:var(--sub,#475569);border:1.5px solid var(--line);border-radius:18px;padding:6px 10px 6px 9px;
background:var(--card);white-space:nowrap;min-width:0;
transition:border-color .12s,background .12s,color .12s,opacity .12s;}
/* Ein zu langer Name kuerzt sich, statt die Spalte zu sprengen. */
.typ-row span{overflow:hidden;text-overflow:ellipsis;}
/* SCHMAL: zwei Spalten. Vier Spalten a 146 px passen auf einem Handy nicht,
`auto-fill` faellt dort ohnehin auf eine Spalte zurueck - und elf
einspaltige Zeilen sind wieder genau der lange Block, der weg sollte.
Zwei feste Spalten sind der Mittelweg. Die Grundregel oben bleibt
unberuehrt (CLAUDE.md: „schmal aendern heisst SCHMAL aendern"). */
@media (max-width:640px){
.typ-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;}
.typ-row{font-size:11px;padding:6px 8px;}
}
/* Gesperrt heisst SICHTBAR gesperrt: ausgegraut, nicht anklickbar - aber
weiterhin da, damit klar ist, dass es die Wahl gibt. Ein Feld, das
verschwindet, sucht man beim naechsten Mal. */
.typ-row.typ-aus{opacity:.42;cursor:not-allowed;}
.typ-row.typ-aus:hover{border-color:var(--line);}
.typ-row:hover{border-color:#C7D2FE;}
.typ-row:has(input:checked){border-color:#B9C7FF;background:var(--brand-soft,#EEF1FB);color:#1B3FCC;}
.typ-row input[type=checkbox]{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none;}
.typ-row::before{content:"";width:14px;height:14px;flex:none;border-radius:50%;
border:1.6px solid var(--line);background:transparent;transition:all .12s;}
.typ-row:has(input:checked)::before{border-color:var(--brand,#2E5BFF);
background:var(--brand,#2E5BFF) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/11px no-repeat;}
.typ-row:has(input:focus-visible){box-shadow:0 0 0 3px rgba(46,91,255,.18);}
.ed-hint{font-size:11.5px;color:var(--muted);margin:2px 0 8px;}
.ed-pair{display:flex;align-items:center;gap:8px;margin-bottom:8px;}
.ed-pair input[type=text]{flex:1;}
.ed-pair .ed-pairdel{color:var(--bad);cursor:pointer;font-weight:700;flex-shrink:0;}
.ed-erk{margin-top:6px;}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) .mini-btn{background:var(--card);}
}
/* ===== UNTERRICHTSFÄCHER-MANAGER (Dateimanager) ===== */
.uf-bar{display:flex;align-items:center;gap:12px;margin:4px 0 20px;flex-wrap:wrap;}
.uf-back{display:inline-flex;align-items:center;gap:5px;border:none;background:rgba(127,127,127,0.10);border-radius:10px;padding:8px 14px 8px 11px;cursor:pointer;font-weight:600;font-family:inherit;font-size:14px;color:var(--ink);}
.uf-back:hover{background:rgba(127,127,127,0.18);}
.uf-back svg{width:16px;height:16px;}
/* pfad: mavi/mor badge stili */
.uf-pfad{display:inline-flex;align-items:center;gap:6px;background:linear-gradient(135deg,rgba(59,130,246,0.12),rgba(139,92,246,0.12));border:1px solid rgba(124,92,246,0.25);padding:6px 13px;border-radius:999px;}
.uf-crumb-item{font-size:13px;font-weight:700;color:#6d5dd3;letter-spacing:.01em;}
.uf-crumb-sep{color:#9b8fd6;font-size:13px;}
.uf-trashrow{position:absolute;top:12px;right:12px;margin:0;z-index:5;}
.uf-trashbtn{display:inline-flex;align-items:center;gap:5px;border:none;background:none;cursor:pointer;padding:6px;color:var(--muted);font-family:inherit;}
.uf-trashbtn:hover{color:var(--ink);}
.uf-trashbtn svg{width:18px;height:18px;}
.uf-trashbtn .ubadge{background:var(--bad);color:#fff;border-radius:10px;padding:1px 8px;font-size:11.5px;font-weight:700;}
/* 2'li kare grid — ortalanmış */
.uf-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;max-width:520px;margin:0 auto;}
.uf-card{position:relative;border:1px solid var(--line);border-radius:18px;background:var(--card);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:11px;padding:26px 16px;text-align:center;transition:transform .12s,box-shadow .12s,border-color .12s;}
.uf-card:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(27,34,48,0.10);border-color:rgba(127,127,127,0.25);}
.uf-ico{width:54px;height:54px;border-radius:15px;display:flex;align-items:center;justify-content:center;}
.uf-ico svg{width:30px;height:30px;}
.uf-card .lbl{font-weight:700;font-size:15px;line-height:1.25;color:var(--ink);}
.uf-cnt{font-size:11.5px;color:var(--muted);}
.uf-card-add{border-style:dashed;border-color:rgba(124,92,246,0.4);background:rgba(124,92,246,0.03);}
.uf-card-add:hover{background:rgba(124,92,246,0.07);}
.uf-ico-add{background:rgba(124,92,246,0.10);color:#7c5cf6;}
.uf-ico-add svg{width:26px;height:26px;}
.uf-lbl-add{color:#7c5cf6;font-size:14px;}
.uf-draghandle{position:absolute;top:9px;left:9px;color:var(--muted);opacity:0;cursor:grab;transition:opacity .12s;}
.uf-card:hover .uf-draghandle{opacity:.45;}
.uf-draghandle svg{width:18px;height:18px;}
.uf-cardmenu{position:absolute;top:9px;right:9px;color:var(--muted);opacity:0;cursor:pointer;transition:opacity .12s;padding:2px;}
.uf-card:hover .uf-cardmenu{opacity:.55;}
.uf-cardmenu:hover{opacity:1;}
.uf-cardmenu svg{width:18px;height:18px;}
.uf-dragging{opacity:.4;}
/* Pop menü */
.uf-popmenu{position:absolute;z-index:10000;background:var(--card);border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:5px;min-width:150px;}
.uf-popmenu button{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 12px;border-radius:8px;cursor:pointer;font-family:inherit;font-size:13.5px;color:var(--ink);}
.uf-popmenu button:hover{background:rgba(127,127,127,0.10);}
.uf-popmenu button.danger{color:var(--bad);}
/* Akordeon (Börse fach-acc) */
.uf-acc-ico{width:34px;height:34px;border-radius:10px;background:rgba(127,127,127,0.10);display:flex;align-items:center;justify-content:center;color:var(--muted);flex:none;}
.uf-acc-ico svg{width:19px;height:19px;}
.uf-acc-drag{position:static;opacity:.35;flex:none;}
.fach-acc:hover .uf-acc-drag{opacity:.6;}
.uf-foldacts{display:flex;gap:1px;margin-right:6px;opacity:0;transition:opacity .12s;}
.fach-acc-head:hover .uf-foldacts{opacity:1;}
/* Dosya satırı — numaralı */
.uf-list{display:flex;flex-direction:column;gap:8px;}
.uf-item{display:flex;align-items:center;gap:6px;padding:4px 6px 4px 4px;border-radius:11px;transition:background .12s;}
.uf-item:hover{background:rgba(127,127,127,0.05);}
.uf-item.is-hidden{opacity:.5;}
.uf-itemdrag{color:var(--muted);opacity:0;cursor:grab;flex:none;display:flex;}
.uf-item:hover .uf-itemdrag{opacity:.4;}
.uf-itemdrag svg{width:16px;height:16px;}
.uf-item-link{flex:1;display:flex;align-items:center;gap:11px;text-decoration:none;color:inherit;padding:8px 6px;min-width:0;}
.uf-num{width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#3B82F6,#7c5cf6);color:#fff;font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
/* Titel: EINZEILIG mit Ellipsis – nie mehr Buchstabe-für-Buchstabe umbrechen,
wenn es auf dem Handy eng wird. */
.uf-item-link .ttl{flex:1;min-width:0;font-weight:600;font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-break:normal;}
.uf-item .tag{font-size:10.5px;color:#b8860b;border:1px solid #e3c07a;border-radius:6px;padding:1px 7px;flex:none;}
.uf-item .acts{display:flex;gap:1px;flex:none;}
/* Schmale Screens: Aktionen kompakter, Typ-Tag weglassen (Platz für den Titel). */
@media (max-width:560px){
.uf-item{flex-wrap:nowrap;}
.uf-item .tag{display:none;}
.uf-item-link{gap:8px;padding:8px 2px;}
.uf-item .acts .uf-act svg{width:15px;height:15px;}
}
.uf-act{border:none;background:transparent;cursor:pointer;padding:7px;border-radius:8px;color:var(--muted);display:flex;}
.uf-act svg{width:17px;height:17px;}
.uf-act:hover{background:rgba(127,127,127,0.15);color:var(--ink);}
.uf-empty{color:var(--muted);font-style:italic;padding:14px;text-align:center;font-size:13.5px;}
.uf-addbtn{margin-top:10px;display:flex;align-items:center;justify-content:center;gap:7px;border:1px dashed var(--brand);color:var(--brand);background:none;border-radius:11px;padding:11px;cursor:pointer;font-weight:700;font-family:inherit;font-size:13.5px;width:100%;}
.uf-addbtn svg{width:16px;height:16px;}
.uf-addbtn:hover{background:rgba(99,102,241,0.06);}
.uf-addbtn-folder{border-color:rgba(124,92,246,0.45);color:#7c5cf6;margin-top:14px;}
.uf-addbtn-folder:hover{background:rgba(124,92,246,0.06);}
.uf-addbtn.uf-danger{border-color:var(--bad);color:var(--bad);margin-top:16px;}
.uf-addbtn.uf-danger:hover{background:rgba(216,64,64,0.06);}
.uf-locked{text-align:center;padding:60px 20px;}
.uf-lock-ico{color:var(--muted);opacity:.6;display:flex;justify-content:center;margin-bottom:4px;}
.uf-lock-ico svg{width:54px;height:54px;}
.uf-locked h2{margin:14px 0 6px;color:var(--ink);}
.uf-locked p{color:var(--muted);}
.uf-locked button{margin-top:18px;padding:11px 24px;border:none;border-radius:10px;background:var(--brand);color:#fff;font-weight:700;cursor:pointer;font-family:inherit;}
.uf-modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.uf-modal{background:var(--card);border-radius:16px;padding:24px;width:100%;max-width:440px;box-shadow:0 20px 50px rgba(0,0,0,.3);}
.uf-modal h3{margin:0 0 16px;color:var(--ink);}
.uf-modal label{display:block;font-size:12.5px;font-weight:700;margin:12px 0 5px;color:var(--muted);}
.uf-modal input,.uf-modal .uf-sel{width:100%;box-sizing:border-box;padding:11px 13px;border:1px solid var(--line);border-radius:10px;font-size:15px;background:var(--bg);color:var(--ink);font-family:inherit;}
.uf-modal .row{display:flex;gap:10px;margin-top:22px;}
.uf-modal .row button{flex:1;padding:11px;border:none;border-radius:10px;font-weight:700;cursor:pointer;font-family:inherit;font-size:14px;}
.uf-modal .ok{background:var(--brand);color:#fff;}
.uf-modal .cancel{background:rgba(127,127,127,0.12);color:var(--ink);}
.uf-modal .hint{font-size:12px;color:var(--muted);margin-top:6px;}
/* ===== HIER STAND DIE ZWEITE LANDING-PAGE (entfernt in v2.100.1) =====
Rund 290 Zeilen `.lp-*` fuer einen Marketing-Bildschirm INNERHALB der
App (`templates/teile/screen-landing.html`), der bei `/login` ohne
Sitzung erschien. Damit gab es SchlauStart zweimal als Startseite, mit
verschiedenen Versprechen (`in Minuten` gegen `in Sekunden`) und zwei
handgepflegten Werkzeuglisten. `/login` zeigt jetzt die Anmeldung,
die Startseite ist `templates/landing.html` - und nur die.
Wer hier wieder Marketing einbauen will: es gehoert nach landing.html. */
/* Infotext-Boxen (Schueler-Ansicht) */
.it-wrap .it-p{margin:0 0 8px;}
.it-box{border-radius:10px;padding:10px 13px;margin:9px 0;border-left:4px solid;}
.it-box-t{font-weight:700;font-size:13px;margin-bottom:3px;}
.it-merk{background:#EEF3FF;border-color:#2E5BFF;}
.it-formel{background:#F3FBF6;border-color:#15A05A;text-align:center;font-size:16px;}
.it-bsp{background:#FFF9EC;border-color:#E2A100;}
.it-wichtig{background:#FFF1EE;border-color:#E0552E;}
.it-step{display:block;padding-left:10px;}
.it-mark{background:linear-gradient(180deg,transparent 12%,#FFE873 12%,#FFE873 90%,transparent 90%);padding:0 3px;border-radius:3px;color:inherit;}
/* ODER SELBST WAEHLEN - der Verweis neben „Passendes Bild dazu suchen"
(Anweisung Murat 05.09.2026, PLAN_BILDPOOL.md §4.3). Er steht eingerueckt
unter dem Schalter, damit erkennbar bleibt, wozu er gehoert, und traegt
keine eigene Farbe: `--muted` fuer den Satz, `--brand` fuer den Knopf -
dieselben Tokens wie ueberall sonst. */
.t-bild-eigen{margin:0 0 10px 27px;font-size:13px;color:var(--muted);
display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.t-bild-eigen button{border:0;background:none;padding:0;font:inherit;
color:var(--brand);font-weight:600;cursor:pointer;text-decoration:underline;}
.t-bild-eigen .t-bild-name{color:var(--ink);font-weight:600;}
/* ===== DESKTOP-LAYOUT (>=1024px): einheitliche Breite fuer ALLE Screens =====
Mobil/Tablet-Hochformat (<1024px) bleibt zu 100% unveraendert - alle
Regeln liegen in Media Queries. Eine Breite fuer alle Seiten, damit die
Ansicht beim Seitenwechsel nicht springt. */
@media (min-width:1024px){
.wrap{ max-width:1100px; }
/* Quiz-Karten (Dashboard + Boerse): mehr Spalten statt breiter Karten */
.card-grid{
grid-template-columns:repeat(auto-fill,minmax(240px,1fr));
}
/* Schueler-Kacheln (Klassenbuch): mehr Luft, groessere Klick-Ziele */
.kb-stud-grid{
grid-template-columns:repeat(auto-fill,minmax(112px,1fr));
gap:var(--s-3);
}
/* Lernbot-Historie: breitere Kinder-Liste neben dem Gespraech.
Hoehe folgt dem Bildschirm statt fester 600px-Boxen ("ince uzun"-Fix). */
.lhl-wrap{
grid-template-columns:360px 1fr;
}
.lhl-list, .lhl-detail{
max-height:calc(var(--vh100) - 300px);
min-height:480px;
}
}
/* Grosse Monitore: eine Stufe weiter, weiterhin einheitlich */
@media (min-width:1440px){
.wrap{ max-width:1240px; }
}
/* DAS BLATT-STUDIO BEKOMMT DIE GANZE BREITE (Murat 07.08.2026: „sagdaki
beyaz yer var ya biraz daha genisletilebilir").
Nicht das PAPIER wird groesser - das bleibt A4 bei 100 %, sonst luegt die
Vorschau ueber die wirkliche Groesse. Groesser wird die SEITE um das
Papier herum: die einheitlichen 1100/1240 px sind fuer Text gedacht, und
1240 px reichen fuer 794 px Papier plus rechte Eigenschaftsspalte (die in
Stufe 1.3 dazukommt) nicht aus. Dieselbe Ausnahme, die admin (1560) und
blauerbrief (1240) schon haben - der Weg ist also vorgezeichnet. */
/* Unten KEIN Polster: bringt sonst 80 px Luft mit, und unter der
Seitenleiste stand ein leerer weisser Streifen, der nach einem Fehler
aussah (Murat 07.08.2026). Das Studio rechnet seine Hoehe selbst. */
/* Unten KEIN Polster: `.wrap` bringt sonst rund 80 px Luft mit, und unter
der Seitenleiste stand ein leerer weisser Streifen, der nach einem
Fehler aussah (Rueckmeldung Murat 07.08.2026). Das Studio rechnet
seine Hoehe selbst und braucht die Luft nicht. */
/* ===== DAS STUDIO HAT EINE EIGENE SHELL ================================
GEMESSEN, nicht geraten (Konsole, 07.08.2026 – der dritte Anlauf war der
erste mit Zahlen):
SECTION#screen-blaetter | overflow:auto | h:0 scrollH:320 | scrollt
DIV.wrap | overflow:hidden| h:138 scrollH:463 | scrollt
Damit war klar, was drei Runden lang unklar war: **nicht die Seite rollte,
sondern die Section selbst.** Die generische Shell-Regel gibt jeder
`.wrap > section[id^="screen-"]` ein `overflow-y:auto` – richtig für
Textseiten, falsch für ein Werkzeug, dessen Spalten an den Rändern kleben
sollen. Rollt die Section, wandert ALLES mit: Werkzeugkästen, Lineale,
Seitenleiste.
Cockpit, Unterrichtsfächer, Lautlesezeit und die Nachrichten-Zentrale sind
aus genau diesem Grund schon ausgenommen. Das Studio gehört dazu – deshalb
steht `blaetter` jetzt in derselben `:not()`-Kette und bekommt hier seine
eigene Shell.
KEINE MAGISCHE ZAHL MEHR: die Höhe kommt aus `--vh100` (die App rechnet
sie selbst, weil `100vh` auf iOS lügt), und darunter reicht `flex` sie
weiter. `#st-wirt` braucht deshalb kein `calc(100vh - …)` – der Wert war
ohnehin falsch, weil `.wrap` schon begrenzt war. */
body[data-screen="blaetter"].has-sidebar .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden; display:flex; flex-direction:column;
}
body[data-screen="blaetter"].has-sidebar .app-topbar{ flex:none; }
/* `padding-top:var(--pl-oben)` (v2.862.0): die 20 px unter der Kopflinie
stehen am Rechner nicht mehr als Rand an der Kopfzeile, sondern werden
vom Bildschirm selbst geholt - ohne diese Zeile klebte die Werkzeugleiste
des Studios an der Linie. Unter 900 px ist die Variable leer, dort 0. */
body[data-screen="blaetter"] #screen-blaetter{
flex:1 1 auto; min-height:0; overflow:hidden; display:flex;
flex-direction:column;
padding-top:var(--pl-oben, 0px);
}
body[data-screen="blaetter"] #blaetter-content{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
/* ⛔ DAS REGAL ROLLT (v2.906.0, Befund Murat 30.09.2026: „asagiya
kaydiramiyorum"). Die Shell oben haelt Section und .wrap fest
(overflow:hidden) - richtig fuer das offene Blatt, das seine Hoehe selbst
rechnet. Das Regal aber ist eine Liste: ohne diese Regel endete es an der
Unterkante, und alles darunter war nicht zu erreichen. Gerollt wird
INNEN, wie auf den anderen Reitern (ohne sichtbaren Balken); die Kinder
behalten ihre Hoehe (flex:none), sonst quetschte die Spalte das Raster.
Im offenen Blatt (.bl-offen, blSammlungZeile) gilt die Regel nicht. */
body[data-screen="blaetter"] #screen-blaetter:not(.bl-offen) #blaetter-content{
overflow-y:auto; scrollbar-width:none; overscroll-behavior-y:contain;
padding-bottom:var(--pl-unten, 16px);
}
body[data-screen="blaetter"] #screen-blaetter:not(.bl-offen) #blaetter-content::-webkit-scrollbar{ display:none; }
body[data-screen="blaetter"] #screen-blaetter:not(.bl-offen) #blaetter-content > *{ flex:none; }
body[data-screen="blaetter"]{ overflow:hidden; }
/* DIE WERKZEUGSPALTEN GEHEN BIS AN DIE KARTENKANTE (Murat 07.08.2026:
„soldaki aracin solunda, sagdakinin saginda bosluklar var - o bosluklara
dogru araclari büyüt").
NICHT ueber ein kleineres `.wrap`-Polster: dieselbe Zahl haelt auch die
Kopfzeile („‹ Regal", Name, Speichern) vom Rand fern, und die soll dort
bleiben, wo sie ist. Stattdessen steht das Mass EINMAL als `--bl-pad`,
und `#st-wirt` zieht sich mit einem negativen Rand genau darum wieder
hinaus (AB_ST_CSS). Zwei Zahlen, die sich aufheben muessen, gehoeren
nicht an zwei Orte. */
body[data-screen="blaetter"]{ --bl-pad:12px; }
body[data-screen="blaetter"] .wrap{ max-width:none;
padding-left:var(--bl-pad); padding-right:var(--bl-pad);
padding-bottom:10px; }
/* DIE SEITENLEISTE SITZT 1 MM UEBER DER KARTENKANTE (Murat 07.08.2026:
„o alttaki sayfa bari icerikleri sayfanin kenarina indir, hemen 1 mm
üstünde olsun").
WARUM DIESE ZEILE UEBERHAUPT NOETIG IST - und warum die drei Zeilen
darueber NICHT gereicht haben: `body.has-sidebar:not(.lh-fullscreen)
.wrap` setzt weiter unten (im 900px-Block) die KURZFORM
`padding:20px … 32px`. Sie hat dieselbe Gewichtung (0,3,1) wie die
blaetter-Regel und steht SPAETER in der Datei - also gewann sie, und
unter der Seitenleiste blieben 32 px weisser Streifen stehen. Genau
das Bild, das nach einem Fehler aussieht. `:not(.lh-fullscreen)` hebt
die Gewichtung hier auf (0,4,1); damit entscheidet nicht mehr die
Reihenfolge. 4 px sind bei 96 dpi 1,06 mm. */
body[data-screen="blaetter"].has-sidebar:not(.lh-fullscreen) .wrap{
padding-bottom:4px;
padding-left:var(--bl-pad); padding-right:var(--bl-pad);
}
/* =====================================================================
SEITENLEISTE (Sidebar) + neue Kopfzeile — ersetzt die alte Top-Nav.
Idee: linke, aufklappbare Spalte (Icons, eingeklappt mit Mini-Label),
Inhalt bleibt mittig; oben nur Seitentitel + Postfach/Profil rechts.
Mobil: Sidebar wird zur Schublade (Drawer), oben links per Menü-Icon.
===================================================================== */
:root{
--sb-w-collapsed: 84px; /* eingeklappt: Icon + kleines Label */
--sb-w-open: 248px; /* ausgeklappt: Icon + Text (etwas breiter) */
/* Abstand Leiste <-> Panel. ⛔ DERSELBE WERT steht links vor der Leiste
(Shell-Polster im 900er-Block liest diese Variable) - und nur so stehen
die Symbole GENAU MITTIG zwischen Bildschirmrand und Panel. Bis
v2.862.1 waren es links 6 px, hier 14 px: das aktive Plaettchen sass
14 px vom Rand und 22 px vom Panel entfernt (Befund Murat 26.09.2026:
„sol kisimda biraz daha sola dayali gibi duruyor … mesafe tam ayni
degil"). Zugeklappt jetzt 14/14, aufgeklappt 20/20. */
--sb-gap: 6px;
/* ===== WEICHE TIEFE (2026-08-15) ======================================
WIE ES FUNKTIONIERT: ein Eintrag hat zwei Schatten – einen dunklen unten
rechts, einen hellen oben links. Beim Ueberfahren liegen beide INNEN
(`inset`), der Eintrag wirkt eingedrueckt; der aktive Eintrag hat sie
AUSSEN und wirkt erhaben. Mehr ist es nicht.
WARUM ES HIER rgba IST UND KEIN FESTES GRAU: die Flaeche hinter der
Leiste ist --shell-bg, und die WAEHLT DER NUTZER (sieben Toene + freie
Wunschfarbe, applyShellFarbe in index-app.js). Ein fest gewaehltes
Schattenpaar wie in den ueblichen Neumorphismus-Vorlagen passt dann zu
genau einer der acht Flaechen und sieht auf den anderen sieben schmutzig
aus. Schwarz/Weiss mit Deckkraft dunkelt bzw. hellt dagegen JEDE Flaeche
um denselben Betrag auf – die Leiste bleibt automatisch farbgleich mit
dem Hintergrund, was die eigentliche Bedingung dieses Aussehens ist.
WAS BEWUSST NICHT PASSIERT: die Leiste selbst bekommt KEINEN erhabenen
Schatten. Sie ist seit 2026-07 absichtlich keine eigene Karte mehr
(Vorbild Gmail, siehe Regel weiter unten) – ein Rahmen ringsum waere ein
Rueckschritt hinter diese Entscheidung. Die Tiefe sitzt nur an den
Eintraegen, dort wo sie etwas BEDEUTET (beruehrbar / ausgewaehlt).
VERBUNDEN MIT: qa/unit/test_seitenleiste.py, docs/DESIGN_SYSTEM.md §5. */
--sb-tief: rgba(15,23,42,.10); /* dunkle Seite – Richtung --ink */
--sb-hoch: rgba(255,255,255,.92); /* helle Seite */
--sb-weich: cubic-bezier(.22,1,.36,1);
/* ===== GLAS (v2.646.0) ================================================
AUFTRAG MURAT 04.09.2026: „su soldaki kutucugu saydam böyle cam gibi
yapsan … whatsappta alt kisimdaki gecislerde kullaniyoruz." Vorbild ist
die WhatsApp-Leiste unten: eine schwebende, milchige Kapsel, durch die
der Grund durchscheint.
EIN REZEPT, ZWEI ORTE – und deshalb steht es hier und nicht doppelt
verstreut: die Schublade (mobil) und die Lesekarten des Cockpits. Wer
den Ton ändert, ändert ihn einmal.
(Bis v2.861.0 waren es drei: auch die Seitenleiste am Rechner war Glas,
`--glas-leiste`. Seit v2.862.0 hat sie gar keinen Kasten mehr - Auftrag
Murat 26.09.2026, Vorbild ChatGPT und Zoom; Begruendung an ihrer Regel
im 900er-Block. Das Token ist mit ihr gegangen.)
DIE VIER TEILE, ohne die es „billig" aussieht – dieselben, die schon an
der Fertig-Kapsel (.ss-fertig) stehen:
1. eine HALBDURCHSICHTIGE Füllung. Ohne sie hat backdrop-filter
nichts zu tun.
2. --glas-schliff: blur UND saturate. Das saturate ist der Trick –
ohne es wirkt der Grund hinter dem Glas grau statt lebendig.
3. eine feine Kante (--glas-kante) plus ein heller Innenrand
(--glas-licht): so sitzt die Fläche AUF dem Grund statt darin zu
kleben.
4. ein tragender, weicher Schatten (--glas-trage) – kein Ring.
⛔ `backdrop-filter` GIBT ES NUR AN EINER STELLE: AN DER SCHUBLADE.
Und das ist seit v2.647.1 eine Erfahrung, keine Meinung.
Die Regel dahinter: `backdrop-filter` unschärft, was DAHINTER liegt.
· Schublade (mobil) – dahinter liegt der Bildschirm. Es wirkt. JA.
· Seitenleiste – dahinter liegt --shell-bg, eine glatte Fläche. blur
von einer glatten Fläche ist dieselbe Fläche; nur saturate hätte
den Ton vertieft. NEIN.
· Cockpit-Karte – dahinter liegt das weiße Panel. blur von Weiß ist
Weiß, saturate eines neutralen Tons ist derselbe Ton. NEIN.
WAS v2.647.0 GEKOSTET HAT: die Leiste trug das Filter, obwohl es dort
fast nichts zeigte – ein Element über die volle Bildschirmhöhe,
`position:sticky`, mit einer Animation darin (der Linse). Safari
berechnet den Hintergrund einer solchen Fläche bei JEDEM Bild neu, und
zwar für die ganze Fläche. Rückmeldung Murat 04.09.2026, wenige Minuten
nach dem Deploy: „yanda gezinirken kitlendi." Der Server war dabei
gesund (/healthz), es war allein die Darstellung.
Also: kein backdrop-filter über einer glatten Fläche. Nie. Was das Glas
dort ausmacht, ist ohnehin die halbdurchsichtige Füllung, die Kante und
der tragende Schatten – die drei bleiben.
RÜCKFALL: die Schublade braucht einen für Browser ohne backdrop-filter
(ältere Firefox-Fassungen, alte Android-WebViews) – --glas-schublade-fest,
dieselbe Fläche, nur deckender. Die Leiste braucht keinen mehr; sie hat
kein Filter, das ausfallen könnte.
VERBUNDEN MIT: qa/unit/test_seitenleiste.py (Zusage 2),
qa/unit/test_cockpit_check.py, docs/DESIGN_SYSTEM.md §5. */
--glas-schliff: blur(22px) saturate(180%);
/* Das Cockpit-Glas (v2.943.0: Blatt des Bearbeiten-Modus, v2.944.0:
die Widgets) hat ein EIGENES Token: es gilt nur, wenn hinter dem
Cockpit ein Verlauf oder Foto liegt (body.ck-hg-an) – die Zählung der
--glas-schliff-Stellen (test_seitenleiste) bleibt davon unberührt. */
--ck-glas-schliff: blur(24px) saturate(170%);
--glas-schublade: rgba(255,255,255,.80); /* Schublade über Inhalt */
/* Die Kapsel am Telefon (v2.922.0): durchsichtiger als die Schublade - der
rollende Inhalt soll „belli belirsiz" durchscheinen (Murat 01.10.2026). */
--glas-kapsel: rgba(255,255,255,.44);
--glas-schublade-fest: rgba(255,255,255,.97);
--glas-karte: rgba(15,23,42,.022); /* Lesekarte auf dem weißen Panel */
--glas-kante: rgba(15,23,42,.070); /* die feine Begrenzung */
--glas-licht: rgba(255,255,255,.62);/* heller Innenrand oben */
--glas-trage: 0 10px 26px -14px rgba(15,23,42,.34);
/* DUNKLES GLAS (v2.947.1) – EIN Rezept für zwei Orte: den Dunkelmodus
gleich darunter und den RAHMEN auf einem dunklen Hintergrund
(body.ck-hg-dunkel, Abschnitt HINTERGRUND DES COCKPITS). */
--glas-dunkel-kapsel: rgba(31,39,57,.48);
--glas-dunkel-kante: rgba(255,255,255,.070);
--glas-dunkel-licht: rgba(255,255,255,.10);
--glas-dunkel-tief: rgba(0,0,0,.38);
}
/* Im Dunkelmodus traegt Weiss nicht mehr: eine helle Kante auf dunklem Grund
wird sofort zum Grat. Der helle Anteil geht auf ein Achtel zurueck, der
dunkle wird kraeftiger – dieselbe Regel, anderer Betrag. */
html[data-theme="dark"]{
--sb-tief: var(--glas-dunkel-tief);
--sb-hoch: rgba(255,255,255,.045);
/* Im Dunkeln kehren sich die Rollen um: die Füllung hellt AUF statt
abzudunkeln, und der helle Innenrand geht fast ganz zurück – eine
weiße Kante auf dunklem Grund wird sofort zum Grat (dieselbe Regel
wie bei --sb-hoch eine Zeile darüber). */
--glas-schublade: rgba(31,39,57,.84);
--glas-kapsel: var(--glas-dunkel-kapsel);
--glas-schublade-fest: rgba(31,39,57,.98);
--glas-karte: rgba(255,255,255,.045);
--glas-kante: var(--glas-dunkel-kante);
--glas-licht: var(--glas-dunkel-licht);
--glas-trage: 0 10px 26px -14px rgba(0,0,0,.60);
}
/* Dynamische Viewport-Höhe: --vh100 = tatsächlich SICHTBARE Bildschirmhöhe.
Problem: im Browser (Safari/Chrome auf Tablet/Handy) zählt 100vh die GRÖSSTE
Höhe – so als wäre die Adressleiste ausgeblendet. Die App-Shells (Cockpit,
Nachrichten, Lautlesezeit …) wurden dadurch höher als der sichtbare Bereich
und ragten unten heraus -> genau die 10-Zoll-Tablet-Beschwerde. Als installierte
App (kein Browser-Chrome) passte 100vh dagegen exakt. 100dvh = aktuell sichtbare
Höhe -> passt in BEIDEN Fällen. Fallback bleibt 100vh, falls dvh fehlt (alte
Android-WebViews / Safari < 15.4): dort läuft exakt das bisherige Verhalten,
also KEIN Risiko/Regression. Überall statt 100vh: var(--vh100). */
:root{ --vh100: 100vh; }
@supports (height: 100dvh){ :root{ --vh100: 100dvh; } }
/* Nachtrag Rotationsfix: 100dvh meldet auf iOS direkt nach dem Drehen kurzzeitig
noch den ALTEN Wert. Sobald JS die echte Hoehe gemessen hat (siehe
ssSyncViewport() in index.html), setzt es --vh100-js; das gewinnt dann. */
:root{ --vh100-js: 0px; }
@supports (height: 100dvh){
:root:not([data-vh-ready]){ --vh100: 100dvh; }
}
:root[data-vh-ready]{ --vh100: var(--vh100-js); }
/* ===== SICHERHEITSNETZ (2026-07-26) =====================================
Beschwerde aus der installierten App (iOS-PWA): "mal ist es ganzer
Bildschirm, mal ist es unten abgeschnitten" – unzuverlaessig, mal so, mal so.
URSACHE: `--vh100-js` ist ein FESTER Pixelwert und wurde als GROESSTE je
beobachtete Hoehe gefuehrt. Ein einziger zu grosser Messwert (z. B. wenn
`visualViewport` kurz fehlte und der Fallback `innerHeight` einsprang, der
den Bereich hinter Statusleiste und Home-Indicator mitzaehlt) blieb dann
fuer die ganze Sitzung stehen – das Panel war hoeher als der Bildschirm,
der untere Rand lag ausserhalb. Beim naechsten Start passte es zufaellig
wieder, daher das wechselhafte Bild.
LOESUNG: beide Quellen gegeneinander deckeln. `min()` ist in BEIDE
Fehlerrichtungen richtig:
· JS-Wert zu GROSS (der Fehler oben) -> 100dvh gewinnt.
· 100dvh veraltet nach dem Drehen (der
Grund, aus dem es den JS-Wert gibt) -> der kleinere JS-Wert gewinnt.
Die Tastatur stoert dabei nicht: `dvh` beruecksichtigt nur die dynamische
Browser-Oberflaeche, NICHT die Bildschirmtastatur.
Ohne `dvh` (iOS < 15.4) bleibt es bei der Zeile darueber – dort greift
weiterhin allein der JS-Wert, wie bisher. */
@supports (height: 100dvh){
:root[data-vh-ready]{ --vh100: min(var(--vh100-js), 100dvh); }
}
/* Die aufklappbare Leiste ist im Grundzustand versteckt (Landing/Schüler/
Vollbild-Screens). Sichtbar wird sie erst, wenn renderSidebar() sie füllt. */
#app-sidebar{ display:none; }
#sb-overlay{ display:none; }
/* ---------- DESKTOP / TABLET quer (>= 900px): zwei bündige Spalten ---------- */
@media (min-width:900px){
/* Body wird zum Flex-Container: Sidebar links, Inhalt rechts – aneinander,
gleiche Höhe. Das Paar (Leiste + Panel) hat eine feste Maximalbreite und
wird IMMER mittig gehalten (margin:auto) – links wie rechts gleich viel
Luft, egal wie breit der Bildschirm ist. */
body.has-sidebar:not(.lh-fullscreen){
display:flex; align-items:stretch; gap:var(--sb-gap);
/* Breiter + randnäher: Tablet nutzt fast die volle Breite, große Monitore
bekommen mehr Lesefläche. Oben respektieren wir die iOS-Statusleiste
(PWA auf dem Homescreen); ALLE Höhenrechnungen nutzen dieselben
Variablen, damit unten exakt derselbe Rand bleibt wie oben/seitlich. */
--shell-top:max(16px, env(safe-area-inset-top));
/* ===== DAS PANEL GEHT NACH UNTEN UND NACH RECHTS (v2.862.0) ==========
Auftrag Murat 26.09.2026, Vorbild ChatGPT und Zoom: „sagdaki
kutucugun yüksekligini artirsak ve saga uzatsak … yukari
genisletmeyelim bar ile kaynasmasin … asagi dogru uzatalim saga
dogru uzatalim." Unten standen 26 px, rechts bis zu 22 px - jetzt
10 px an beiden Kanten. Die Safe-Area geht vor: am iPad mit
Home-Leiste bleibt unten deren Hoehe, nicht weniger.
⛔ OBEN BLEIBT --shell-top UNVERAENDERT. Das ist ausdruecklich
bestellt, nicht vergessen: am Tablet sitzt darueber die
Statusleiste, und ein Panel, das hinaufrueckt, verschmilzt mit ihr
(„yukari gitmesin … tam sinirda").
Links sind es nur 6 px, weil dort seit v2.862.0 kein Kasten mehr
steht, sondern die Symbole selbst - sie tragen ihren Abstand in
sich (8 px Polster der Leiste). Die 6 px sind --sb-gap: links vor
der Leiste steht dasselbe Mass wie zwischen Leiste und Panel, sonst
stehen die Symbole nicht mittig (v2.862.2, siehe :root).
⛔ UNTEN 10 px AUCH AM TABLET (v2.862.2). Bis v2.862.1 stand hier
`max(10px, env(safe-area-inset-bottom))` - am iPad meldet die
Home-Leiste mehr als 10 px, und genau diese Safe-Area war die Luecke
unter dem Panel, in der PWA wie in Safari (Befund Murat 26.09.2026:
„ipadde asagida bosluk var … tablet tarafi icinde uzasin"; am
Bildschirmfoto 26 px). Das Panel geht jetzt wie am Rechner bis
10 px an die Kante, die Home-Leiste liegt darueber - so wie mobil
seit 2026-07. Dass die letzte Zeile trotzdem frei bleibt, sorgt der
Auslauf IM rollenden Bereich: --pl-unten (32 px) ist groesser als
jede Home-Leiste. */
--shell-bot:10px;
padding:var(--shell-top) max(10px, env(safe-area-inset-right))
var(--shell-bot) max(var(--sb-gap), env(safe-area-inset-left));
min-height:var(--vh100);
/* Breiter (2026-07): auf 13-Zoll-Tablets/grossen Monitoren blieb bei 1560px
links/rechts viel Luft ungenutzt. 1760px nutzte die Fläche besser, ohne dass
Zeilen unangenehm lang werden; auf 10-Zoll-Tablets greift die Kappe eh nicht
(dort füllt der Inhalt schon fast randlos).
⛔ 2100px SEIT v2.642.2 (Wunsch Murat 04.09.2026: „solda sagda yer var
orayi artiralim bari"). Nachgemessen auf 1920 px: der weisse Kasten war
1618 px breit, rechts blieben 102 px ungenutzt - 80 davon allein durch
diese Kappe, der Rest ist der Innenabstand. Der Kasten oben hat 16 px
Rand; 102 px an der Seite waren also nicht „derselbe Rand wie
oben/seitlich", wie der Absatz darueber es verspricht, sondern das
Sechsfache.
WARUM NICHT `none`: auf einem 27-Zoll-Monitor (2560 px) waere jede
Zeile ueber zwei Meter Text lang. 2100 px deckt 1920 px vollstaendig ab
- dort bestimmt dann der Innenabstand den Rand, so wie es gemeint war -
und laesst auf 2560 px einen ruhigen Rahmen stehen. Unter 1760 px
aendert sich nichts; die Kappe greift dort ohnehin nicht. */
max-width:2100px; margin:0 auto;
}
/* Das Inhaltspanel darf die volle Restbreite nutzen (die alten .wrap-Kappen
bei 1100/1240px gelten nur noch für Seiten OHNE Seitenleiste). */
body.has-sidebar:not(.lh-fullscreen) .wrap{ max-width:none; }
/* ===== DIE LEISTE HAT KEINEN KASTEN (v2.862.0) =======================
Auftrag Murat 26.09.2026, mit Bildschirmfotos von ChatGPT und Zoom:
„bende chatgpt ve zoomdaki gibi bir sol alan istiyorum yani o
kutucugu kaldir sol tarafin kutusu olmasin sagdaki o icerik
kutucugu tek basina kalsin."
Die Symbole stehen damit direkt auf der Flaeche der Lehrkraft
(--shell-bg), und das weisse Panel ist der EINE Kasten der Seite.
Das ist zugleich der Zustand, an dem die weiche Tiefe der Eintraege
haengt: Eintrag und Grund haben DIESELBE Flaeche (siehe --sb-tief).
DIE GESCHICHTE, damit niemand im Kreis baut:
2026-07 keine Flaeche (Vorbild Gmail) - „keine zweite weisse Karte"
v2.646.0 halbdurchsichtiges Glas (Vorbild WhatsApp-Leiste)
v2.862.0 wieder keine Flaeche, kein Rand, kein Schatten - jetzt
ausdruecklich, weil der Kasten links neben dem Panel wie
eine zweite Karte gelesen wurde.
Wer das Glas zurueckholt, holt den zweiten Kasten zurueck.
⛔ UND KEIN backdrop-filter - die Lehre aus v2.647.0 gilt weiter:
bildschirmhohe, klebende Flaeche + Linse darin = Safari friert ein.
BEWACHT VON qa/unit/test_seitenleiste.py, Zusage 2. */
body.has-sidebar:not(.lh-fullscreen) #app-sidebar{
display:flex; flex-direction:column; flex:none;
position:sticky; top:var(--shell-top,16px); align-self:flex-start;
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
width:var(--sb-w-collapsed);
background:transparent; border:none; border-radius:0; box-shadow:none;
padding:14px 8px; overflow:hidden;
transition:width .22s cubic-bezier(.4,0,.2,1), padding .22s cubic-bezier(.4,0,.2,1);
}
body.has-sidebar.sb-open:not(.lh-fullscreen) #app-sidebar{
width:var(--sb-w-open); padding:14px;
}
/* Ohne Kasten hat die Leiste auch keine Kanten, zwischen denen eine Linie
etwas trennen muesste: die Striche unter dem Logo und ueber dem Fuss
standen als kurze, frei schwebende Reste da. Die mobile Schublade ist
weiterhin eine Flaeche und behaelt sie (dort gilt diese Regel nicht). */
body.has-sidebar:not(.lh-fullscreen) #app-sidebar .sb-top{ border-bottom:none; }
body.has-sidebar:not(.lh-fullscreen) #app-sidebar .sb-bottom{ border-top:none; }
/* Inhaltsspalte = EIN großes weißes Panel, bündig mit der Leiste:
gleicher oberer Rand, füllt die Restbreite, wächst mit dem Inhalt.
Oben sitzt die Kopfzeile (Titel/Begrüßung + Profil), darunter der Screen. */
body.has-sidebar:not(.lh-fullscreen) .wrap{
flex:1 1 auto; min-width:0; margin:0;
background:var(--card); border:1px solid var(--line);
border-radius:22px; box-shadow:var(--shadow);
/* ===== DER INHALT ROLLT BIS AN DIE KANTE (v2.862.0) ================
Befund Murat 26.09.2026: „beyaz alanin her bir karisini
sinirlarinin sonuna kadar kullanmaliyiz asagida cok bosluk varken
kesiliyor ve bu beni cildirtiyor."
VORHER lagen die 32 px unten als Polster am PANEL, die 20 px unter
der Kopflinie als Rand an der KOPFZEILE - beide also ausserhalb des
Bereichs, der rollt. Der Inhalt wurde deshalb 32 px ueber dem
Panelrand abgeschnitten und 20 px unter der Linie, und darunter bzw.
darueber stand leeres Weiss: genau das Bild „kesiliyor".
JETZT stehen dieselben beiden Masse als --pl-oben/--pl-unten IM
rollenden Bereich (Cockpit, generische Shell, Einstellungen,
Schulverwaltung - jeweils dort, wo wirklich gerollt wird). In Ruhe
sitzt alles auf demselben Pixel wie vorher; erst beim Rollen laeuft
der Inhalt bis an die Linie und bis an die Unterkante.
Mobil ist das seit 2026-07 so (`padding:16px 16px 0` im Block
max-width:899.98px) - der Rechner zieht nach, nicht umgekehrt. */
--pl-oben:20px;
--pl-unten:32px;
/* ===== EIN RAND FUER ALLE BILDSCHIRME: --pl-seite (v2.863.0) =======
Befund Murat 26.09.2026, mit Bildschirmfotos von Faecher, Material,
Werkzeuge und Boerse nebeneinander: „her sayfada farkli yani bir
standarti yok kiminde bosluk cok kiminde az" - und „sagdaki beyaz
kisimda sag ve soldada biraz daha bosluklar var … genisletsek
icerigi nasil olur".
ZWEI DINGE, und beide gehoeren zusammen:
1. EIN Mass. Titel, Kopflinie und der Inhalt JEDES Bildschirms
beginnen an diesem Polster; kein Bildschirm legt einen eigenen
Rand, eine eigene Wurzelkarte oder eine mittige Kappe darueber
(gemessen bei 1470 px vorher: Boerse 30, Faecher 59, Werkzeuge 81,
Material 91). Bewacht von qa/unit/test_ein_rand_fuer_alle.py.
2. Ein KLEINERES Mass: 16 px statt clamp(18px, 2vw, 28px) und 30 px
ab 1440 px. 16 ist der Abstand, den die Karten des Cockpits
untereinander haben (14 px) plus die Linie - Aussenrand und
Innenabstand lesen sich damit als EIN Raster. Weniger waere der
Fehler vom 04.09.2026 („herseyi yapistirmissin mesafe birak
biraz" - damals 4 bis 6 px).
Mobil gilt dasselbe Prinzip mit 12 px (Block max-width:899.98px). */
--pl-seite:16px;
padding:20px var(--pl-seite) 0;
align-self:flex-start;
min-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
}
/* DAS PANEL BLEIBT - ES IST DIE SEITE (Klarstellung Murat 17.08.2026:
„en arkadaki beyazi cikar demedim … o ana sayfanin arkaplani").
Kurzzeitig war es hier transparent geschaltet. Das war der falsche der
beiden Kaesten: weg gehoert die GLASKARTE im Panel (#screen-upload .box),
nicht das Panel selbst. Es ist auf jedem Bildschirm dieselbe Flaeche -
Cockpit, Klassenbuch, Material -, und genau darauf soll der Eingang
liegen, statt als zweite Karte darin zu schweben. Bitte nicht erneut
„aufraeumen". */
/* Material-Einstieg: WIRKLICH mittig im weißen Panel (v2.30.4).
VORHER: #screen-upload rechnete mit `min-height:calc(var(--vh100) - 150px)`.
Die 150 px waren geraten und decken den echten Overhead nicht ab
(--shell-top + --shell-bot + 20/32 px Panel-Padding + Kopfzeile mit
Titel/Profil). Der Screen wurde also HÖHER als der freie Bereich, das
Panel wuchs über einen Bildschirm hinaus und der Inhalt saß sichtbar zu
tief – „dikeyde ortalanmamış".
JETZT: dasselbe Muster wie beim Cockpit – Panel ist genau einen Bildschirm
hoch, die Kopfzeile bleibt oben stehen (flex:none), #screen-upload nimmt
den Rest (flex:1) und zentriert sich darin über sein vorhandenes
`justify-content:center`. Reicht der Platz auf kleinen Laptops nicht,
scrollt NUR der Screen (ohne sichtbaren Balken), nichts wird abgeschnitten.
Mobil/<900px bleibt unberührt. */
body.has-sidebar[data-screen="upload"]:not(.lh-fullscreen) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
min-height:0; max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden;
display:flex; flex-direction:column;
}
body.has-sidebar[data-screen="upload"]:not(.lh-fullscreen) .app-topbar{
flex:none;
}
body.has-sidebar[data-screen="upload"]:not(.lh-fullscreen) #screen-upload{
flex:1 1 auto; min-height:0; overflow-y:auto;
scrollbar-width:none;
}
/* DIE MITTE DER WEISSEN FLÄCHE (v2.925.0): .wrap trägt oben 20 px Polster,
unten keins. #screen-upload gleicht das unten aus - sonst stünden
Begrüßung und Kapsel 10 px unter der Mitte (gemessen bei 1280 × 800). */
body.has-sidebar[data-screen="upload"]:not(.lh-fullscreen) #screen-upload{
padding-bottom:calc(var(--pl-oben, 0px) + 20px);
}
body.has-sidebar[data-screen="upload"]:not(.lh-fullscreen) #screen-upload::-webkit-scrollbar{
display:none;
}
/* Cockpit = feste App-Shell (wie Unterrichtsfächer, der Nutzer-Referenz):
Panel ist GENAU einen Bildschirm hoch, die Kopfzeile (Titel/Postfach/Profil)
bleibt oben STEHEN, NUR der Inhalt scrollt im Panel – und zwar OHNE sichtbaren
Scrollbalken (der störte im weißen Panel). Ergebnis: stabile Höhe (nicht mal
kurz, mal lang), Leiste + Panel immer auf gleicher Höhe, Kopf immer sichtbar. */
body.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
min-height:0; max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden;
display:flex; flex-direction:column;
}
body.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) #screen-cockpit,
body.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) #screen-cockpit > .card{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
/* Inhaltsbereich scrollt intern; Scrollbalken ausgeblendet (wie das uf-Portal).
Er beginnt direkt an der Kopflinie und endet an der Unterkante des
Panels; die Luft davor und danach liegt IN ihm (--pl-oben/--pl-unten,
Begruendung am .wrap). Das untere Mass steht an #cockpit-fit und nicht
hier: ein Flex-Container, der rollt, zaehlt sein eigenes unteres Polster
in Safari nicht ueberall zur Rollflaeche - das Polster eines Kindes
zaehlt ueberall. */
body.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) #cockpit-content{
flex:1 1 auto; min-height:0; overflow-y:auto;
scrollbar-width:none;
display:flex; flex-direction:column;
padding-top:var(--pl-oben);
}
body.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) #cockpit-content::-webkit-scrollbar{ display:none; }
body.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) #cockpit-fit{
width:100%;
padding-bottom:var(--pl-unten);
}
/* ===== GENERISCHE feste App-Shell für ALLE übrigen Nav-Seiten =====
(Material, Aufgaben, Klassenbuch, Pinnwände, Kurse, Planung, Klassenarbeiten,
Förderung, Fehlzeiten, Dateien …). Gleiches Muster wie Cockpit: die Kopfzeile
bleibt oben (flex:none), die AKTIVE Screen-Section scrollt intern OHNE
sichtbaren Balken, Panel-Höhe bleibt stabil (ein Bildschirm), Leiste + Panel
bündig. Ausgenommen die Screens mit EIGENER Shell (cockpit, unterrichtsfaecher,
lautlesezeit) und die Nachrichten-Zentrale (eigene .pf-shell). Die verborgenen
Sections sind display:none -> die generische Regel trifft nur die sichtbare. */
body.has-sidebar:not(.lh-fullscreen):not([data-screen="cockpit"]):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]):not([data-screen="blaetter"]) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden; display:flex; flex-direction:column;
}
body.has-sidebar:not(.lh-fullscreen):not([data-screen="cockpit"]):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]):not([data-screen="blaetter"]) .app-topbar{
flex:none;
}
body.has-sidebar:not(.lh-fullscreen):not([data-screen="cockpit"]):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]):not([data-screen="blaetter"]) .wrap > section[id^="screen-"]{
flex:1 1 auto; min-height:0; overflow-y:auto; scrollbar-width:none;
overscroll-behavior-y:none; /* siehe Begruendung im mobilen Zweig */
/* Die Luft unter der Kopflinie und am Ende rollt MIT (v2.862.0,
Begruendung am .wrap). In Ruhe steht alles wie vorher; der
Inhaltskasten der Section ist genau so hoch wie zuvor, deshalb
aendert sich auch an Bildschirmen mit `height:100%` im Inneren
nichts. Bildschirme, die innen rollen (Einstellungen,
Schulverwaltung), nehmen das untere Mass weiter unten zurueck. */
padding-top:var(--pl-oben); padding-bottom:var(--pl-unten);
}
body.has-sidebar:not(.lh-fullscreen):not([data-screen="cockpit"]):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]):not([data-screen="blaetter"]) .wrap > section[id^="screen-"]::-webkit-scrollbar{ display:none; }
/* Lautlesezeit = feste App-Shell wie Cockpit: Seite und Nav scrollen NICHT,
nur der Kapiteltext im iframe scrollt. */
body.has-sidebar[data-screen="lautlesezeit"]:not(.lh-fullscreen) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
min-height:0; max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden;
display:flex; flex-direction:column;
}
body.has-sidebar[data-screen="lautlesezeit"]:not(.lh-fullscreen) .app-topbar{
flex:none;
}
/* Oben dieselbe Luft wie ueberall unter der Kopflinie; unten keine - das
Buecherregal rollt in seinem eigenen Rahmen bis an die Panelkante. */
body.has-sidebar[data-screen="lautlesezeit"]:not(.lh-fullscreen) #screen-lautlesezeit{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
padding-top:var(--pl-oben);
}
body.has-sidebar[data-screen="lautlesezeit"]:not(.lh-fullscreen) #screen-lautlesezeit.hidden{
display:none;
}
body.has-sidebar[data-screen="lautlesezeit"]:not(.lh-fullscreen) #ll-frame{
flex:1 1 auto; min-height:0; height:auto !important;
}
/* Ohne Kasten hat die Leiste auch keine Kanten, zwischen denen eine Linie
etwas trennen muesste: die Striche unter dem Logo und ueber dem Fuss
standen als kurze, frei schwebende Reste da. Die mobile Schublade ist
weiterhin eine Flaeche und behaelt sie (dort gilt diese Regel nicht). */
body.has-sidebar:not(.lh-fullscreen) #app-sidebar .sb-top{ border-bottom:none; }
body.has-sidebar:not(.lh-fullscreen) #app-sidebar .sb-bottom{ border-top:none; }
/* Unterrichtsfächer = ebenfalls feste App-Shell: NUR das eingebettete Portal
scrollt, nie die äußere Seite (sonst zwei Scrollbalken nebeneinander). */
body.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
min-height:0; max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden;
display:flex; flex-direction:column;
}
body.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) .app-topbar{
flex:none;
}
/* Wie die Lautlesezeit: oben die Luft unter der Kopflinie, unten rollt
das Portal in seinem Rahmen bis an die Panelkante. */
body.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #screen-unterrichtsfaecher{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
padding-top:var(--pl-oben);
}
body.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #screen-unterrichtsfaecher.hidden{
display:none;
}
body.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #uf-frame{
flex:1 1 auto; min-height:0; height:auto !important;
}
/* Nachrichten-Zentrale = ebenfalls feste App-Shell (Kernregel: Leiste + Panel
sind IMMER exakt gleich hoch, egal welcher Screen). Vorher war "nachrichten"
von den Shell-Regeln ausgenommen und die .pf-shell hatte eine starre Hoehe
calc(vh - 175px): stimmte die 175px-Annahme nicht mit Topbar + Panel-Padding
ueberein, wurde .wrap hoeher als der Viewport, die Seite scrollte und die
sticky Leiste stand versetzt zum Panel ("oben verrutscht"). Jetzt: Panel
exakt ein Bildschirm hoch (wie Cockpit), Kopfzeile fix, die pf-shell fuellt
den Rest per Flex (height:auto statt calc). Mobil (<=720px) bleibt die
pf-shell ein position:fixed-Overlay – diese Regeln greifen nur >=900px. */
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
min-height:0; max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
overflow:hidden;
display:flex; flex-direction:column;
}
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .app-topbar{
flex:none;
}
/* KEINE KARTE MEHR IM PANEL (v2.909.0). Bis v2.908.0 war die Zentrale eine
eigene Karte mit Rand und stand deshalb eingerueckt (oben --pl-oben,
unten --pl-seite), damit die Panelrundung ihren Rand nicht abschnitt.
Jetzt liegen Liste und Chat auf dem Panel selbst: die Linie zwischen
beiden beginnt an der Kopflinie und laeuft bis an die Unterkante, die
Liste beginnt dort, wo der Titel „Nachrichten" beginnt, und der Chat
endet dort, wo das Profil endet. Darum stehen hier die Polster nach
aussen auf 0 - nach innen (zur Linie hin) behalten sie ihre Luft. */
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) #screen-nachrichten{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
padding-top:0; padding-bottom:0;
}
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) #screen-nachrichten.hidden{
display:none;
}
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) #pf-shell{
flex:1 1 auto; min-height:0; height:auto;
}
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-searchrow{ padding-left:0; padding-top:16px; }
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-filters,
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-lhead{ padding-left:0; }
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-convs{ padding-left:0; padding-bottom:var(--pl-seite); }
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-chead,
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) #pf-csuche{ padding-right:0; padding-left:16px; }
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-msgs{ padding-right:0; padding-left:18px; }
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) .pf-comp{ padding-right:0; padding-left:18px; padding-bottom:var(--pl-seite); }
/* Screens innerhalb des Panels: keine eigene weiße Karte mehr (sonst
Weiß-auf-Weiß). Rahmen/Schatten/Hintergrund entfernen, Panel trägt alles.
DIE DRITTE ZEILE IST DER GRUND, WARUM DAS ERKLÄRBLATT DREIMAL „in einer
Box" AUSSAH (Befund Murat 27.08.2026: „ya kardesim erklär blatt hala kutu
icinde aufgabena bak böyle istiyom demistim sna").
Und es lag NICHT am Erklärblatt-Stylesheet, sondern an EINEM Zeichen hier:
`>`. Die Aufgabenliste steht als `.wrap > section#screen-dashboard >
.card` – ein direktes Kind, die Regel greift, die Karte verschwindet.
Das Erklärblatt hat eine Zwischenebene, weil das JavaScript seine Karte
erst zeichnet: `.wrap > section#screen-erklaerblatt > #erklaerblatt-content
> .card`. Ein ENKEL. Der Kindkombinator trifft ihn nicht, die Karte behielt
Rahmen, Schatten, Radius und 22 px Polster – und genau das ist die Box,
die man sieht.
Warum hier eine dritte Zeile und kein Nachkommenkombinator (`section .card`):
der träfe AUCH die Karten INNERHALB eines Bildschirms – die Detailkarte
rechts, die Kästen im Konto –, und die sollen ihren Rahmen behalten. Die
Regel meint die EINE Wurzelkarte eines Bildschirms, nicht jede Karte
darin. Ein weiterer Bildschirm mit JS-gezeichneter Wurzelkarte gehört
deshalb hier dazu; bewacht von qa/unit/test_erklaerblatt_ui.py.
DIE VIER ZEILEN DARUNTER (v2.863.0) sind genau dieser Fall, viermal:
Pinnwaende, Foerderplaene, Fehlzeitenbriefe und Blaue Briefe zeichnen
ihre Wurzelkarte per JavaScript in `#…-content` - ein Enkel. Sie
standen deshalb als Kasten mit 22 px Polster IM Panel, und am Telefon
begann der Text erst 47 px hinter dem Bildschirmrand (Befund Murat
26.09.2026: „mobilde oralar bazi kisimlar icin cok cok genis"; „her
sayfada farkli … bir standarti yok"). Gemessen an allen Bildschirmen
der Leiste und des Werkzeugkastens; es sind die einzigen vier.
Bewacht von qa/unit/test_ein_rand_fuer_alle.py. */
body.has-sidebar:not(.lh-fullscreen) .wrap > section.card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #erklaerblatt-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #pwh-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #foerder-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #fehlzeiten-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #blauerbrief-content > .card{
background:transparent; border:none; box-shadow:none;
border-radius:0; padding:0; margin:0;
}
/* Die Kopfzeile bündig oben im Panel, mit dünner Trennlinie zum Inhalt. */
body.has-sidebar:not(.lh-fullscreen) .app-topbar{
padding-bottom:16px; border-bottom:1px solid var(--line);
}
/* KEIN Rand darunter (v2.862.0): die 20 px stehen jetzt als --pl-oben im
rollenden Bereich, damit der Inhalt beim Rollen bis an die Linie laeuft
statt 20 px darunter abgeschnitten zu werden. Jeder Bildschirm holt sie
sich dort ab, wo er rollt - wer einen neuen Bildschirm mit eigener
Shell baut, gibt ihm `padding-top:var(--pl-oben)`, sonst klebt sein
Inhalt an der Linie.
`.wrap >` ist NOETIG, nicht Zierde: die Grundregel der Kopfzeile
(`margin:2px 0 20px`, Abschnitt „Neue Kopfzeile") steht WEITER UNTEN
in dieser Datei und haette bei gleicher Gewichtung gewonnen - genau
daran ist der erste Anlauf im Browser gescheitert. */
body.has-sidebar:not(.lh-fullscreen) .wrap > .app-topbar{
margin-bottom:0;
}
/* Bildschirme OHNE Kopfzeile (QR-Seite, Ergebnisse, Laden, Anmeldung -
dort ist .app-topbar ausgeblendet) haben keine Linie, unter der Luft
stehen muesste. Ohne diese Regel rueckten sie 20 px nach unten. */
body[data-screen="share"].has-sidebar:not(.lh-fullscreen) .wrap,
body[data-screen="results"].has-sidebar:not(.lh-fullscreen) .wrap,
body[data-screen="loading"].has-sidebar:not(.lh-fullscreen) .wrap,
body[data-screen="sso-invite"].has-sidebar:not(.lh-fullscreen) .wrap,
body[data-screen="auth"].has-sidebar:not(.lh-fullscreen) .wrap{ --pl-oben:0px; }
/* Die QR-Seite nimmt per ID ihr ganzes Polster zurueck (#screen-share.card)
- das untere Mass muss sie deshalb ausdruecklich wiederbekommen, sonst
stoesst ihr letzter Knopf beim Rollen an die Unterkante. */
body.has-sidebar:not(.lh-fullscreen) .wrap > #screen-share.card{
padding-bottom:var(--pl-unten);
}
}
@media (min-width:1440px){
/* --pl-seite steht hier NICHT mehr (bis v2.862.3: 30 px) - der Rand ist
seit v2.863.0 auf jeder Breite derselbe, siehe `.wrap` im 900er-Block. */
body.has-sidebar:not(.lh-fullscreen) .wrap{
--pl-unten:36px;
padding:24px var(--pl-seite) 0;
}
}
/* ---------- Sidebar-Innenleben (shared) ---------- */
#app-sidebar .sb-top{
display:flex; align-items:center; gap:6px;
padding:2px 4px 12px; margin-bottom:6px;
border-bottom:1px solid var(--line);
}
#app-sidebar .sb-logo{ height:24px; width:auto; flex:none; cursor:pointer; transition:opacity .18s ease; }
/* Eingeklappt: logo.png (kompakt). Aufgeklappt: logo2.png (volle Wortmarke). */
#app-sidebar .sb-logo-mark{ height:26px; object-fit:contain; max-width:100%; }
body:not(.sb-open) #app-sidebar .sb-logo-full{ display:none; }
body.sb-open #app-sidebar .sb-logo-mark{ display:none; }
/* Aufgeklappt: Wortmarke (logo2) mittig statt linksbündig. */
body.sb-open #app-sidebar .sb-logo-full{ margin:0 auto; height:30px; }
#app-sidebar .sb-toggle{
margin-left:auto; appearance:none; border:none; cursor:pointer;
width:28px; height:28px; border-radius:8px; flex:none;
background:transparent; color:var(--muted-shell);
display:flex; align-items:center; justify-content:center;
transition:background .16s var(--sb-weich), color .16s var(--sb-weich),
box-shadow .16s var(--sb-weich), transform .16s var(--sb-weich);
box-shadow:3px 3px 7px var(--sb-tief), -3px -3px 7px var(--sb-hoch);
}
/* Der Knopf ist im Ruhezustand erhaben und geht beim Druecken hinein – die
Bewegung sagt dasselbe wie das Symbol, nur schneller. */
#app-sidebar .sb-toggle:hover{ color:var(--ink); transform:translateY(-1px); }
#app-sidebar .sb-toggle:active{
transform:scale(.94);
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);
}
#app-sidebar .sb-toggle svg{ width:16px; height:16px; fill:none; stroke:currentColor;
stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; transition:transform .22s; }
body.sb-open #app-sidebar .sb-toggle svg{ transform:rotate(180deg); }
/* Eingeklappt (schmal): Logo-Marke + Pfeil bleiben nebeneinander, mittig,
ohne umzuspringen (Wunsch: Pfeil klebt am Logo). */
body:not(.sb-open) #app-sidebar .sb-top{ padding:2px 2px 12px; gap:3px; justify-content:center; }
body:not(.sb-open) #app-sidebar .sb-toggle{ margin-left:2px; }
body:not(.sb-open) #app-sidebar .sb-logo-mark{ height:22px; }
/* ===========================================================================
ZEITWERK - Stoppuhr und Timer (v2.291.0)
---------------------------------------------------------------------------
AUSSEHEN: dasselbe Prinzip wie die Seitenleiste - zwei Schatten statt
Fuellfarben, eine helle Kante oben links, eine dunkle unten rechts. Die
Zahl liegt in einer MULDE (inset), die Knoepfe stehen ERHABEN darauf und
senken sich beim Beruehren ein. Mehr ist der Effekt nicht.
WARUM --paper UND NICHT --card: eine helle Kante braucht einen Grund, von
dem sie sich abheben kann. Auf Weiss faellt die halbe Tiefe aus - dieselbe
Physik, die schon die Kopfzeile und die mobile Schublade gelernt haben
(qa/unit/test_seitenleiste.py, Zusage 3).
KEINE eigenen Farbwerte: alles kommt aus --sb-tief/--sb-hoch und den
Bedeutungsfarben. Das Fenster soll aussehen, als haette es immer
dazugehoert - nicht wie ein Gast aus einem anderen Programm.
MIT WEM: ZW/zwZeichnen() in static/js/index-app.js. */
.zw{
position:fixed; top:96px; right:28px; z-index:9600;
width:min(404px, calc(100vw - 24px));
background:var(--paper); border-radius:var(--r-panel);
/* ZWEITE ZEILE, ABSICHTLICH (v2.294.0): DAS FENSTER TRAEGT DIE FLAECHENFARBE
DER LEHRKRAFT (--shell-bg, waehlbar im Konto: Stein, Himmel, Rose …).
Zwei Gruende, und der zweite ist der eigentliche:
(1) Wunsch Murat 16.08.2026 - "stopuhrun rengi de arkaplana göre degisse".
(2) Diese Tiefe FUNKTIONIERT nur so. Die weichen Schatten sind kein
Muster, sondern Licht auf einer Flaeche: eine helle Kante oben links,
eine dunkle unten rechts. Sie setzen voraus, dass das Element
DIESELBE Farbe hat wie der Grund, aus dem es herausgedrueckt wird -
genau die Begruendung, die auch an --sb-tief/--sb-hoch steht. Ein
festes Weiss darauf sieht bei jeder Wunschfarbe schmutzig aus; das
war der Befund "zu weiss".
Die Zeile darueber bleibt als Rueckfallebene stehen: --shell-bg hat als
Vorgabe ohnehin --paper. */
background:var(--shell-bg);
box-shadow:8px 8px 22px var(--sb-tief), -6px -6px 18px var(--sb-hoch);
user-select:none; touch-action:none;
animation:zwAuf .22s var(--sb-weich);
}
@keyframes zwAuf{ from{opacity:0; transform:translateY(-6px) scale(.98);} to{opacity:1;} }
.zw.zw-zieht{ box-shadow:12px 12px 30px var(--sb-tief), -8px -8px 22px var(--sb-hoch); }
.zw-kopf{
display:flex; align-items:center; gap:8px; padding:12px 12px 8px;
cursor:grab;
}
.zw.zw-zieht .zw-kopf{ cursor:grabbing; }
/* Die Umschaltung liegt in einer Mulde, der aktive Bereich steht erhaben
darin - dieselbe Sprache wie der aktive Eintrag in der Leiste. */
.zw-tabs{
display:flex; gap:4px; padding:4px; border-radius:var(--r-card); flex:1; min-width:0;
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);
}
.zw-tab{
flex:1; min-width:0; appearance:none; border:none; background:transparent;
font:inherit; font-size:12px; font-weight:700; color:var(--muted);
padding:7px 8px; border-radius:var(--r-control); cursor:pointer;
transition:color .16s, box-shadow .16s;
}
.zw-tab.an{
color:var(--brand);
box-shadow:3px 3px 7px var(--sb-tief), -3px -3px 7px var(--sb-hoch);
}
.zw-kopf-btns{ display:flex; gap:5px; flex:none; }
.zw-ico{
width:28px; height:28px; flex:none; appearance:none; border:none; cursor:pointer;
border-radius:50%; background:transparent; color:var(--muted);
display:flex; align-items:center; justify-content:center;
transition:box-shadow .16s, color .16s;
}
.zw-ico svg{ width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2;
stroke-linecap:round; stroke-linejoin:round; }
.zw-ico:hover{ color:var(--ink);
box-shadow:inset 2px 2px 4px var(--sb-tief), inset -2px -2px 4px var(--sb-hoch); }
.zw-body{ padding:4px 18px 18px; display:flex; flex-direction:column; gap:13px; }
/* Die Zahl sitzt in einer eingelassenen Scheibe - das ist das Bild aus der
Vorlage: nichts liegt AUF der Flaeche, alles ist HINEINGEDRUECKT.
Die Mulde ist seit v2.293.0 einen Tick staerker eingefaerbt als das Fenster
darum: eine Vertiefung, die dieselbe Helligkeit hat wie ihre Umgebung, ist
nur ein Schatten - mit dem Farbunterschied wird sie zum Zifferblatt. */
.zw-scheibe{
border-radius:var(--r-panel); padding:20px 12px; text-align:center;
/* Einen Schritt TIEFER als die Flaeche - nicht bunter. Gemischt wird mit
--ink, also mit der Schriftfarbe: im hellen Design dunkelt das ab, im
dunklen hellt es auf, und der Farbton der Lehrkraft bleibt in beiden
Faellen erhalten. Eine feste Beimischung waere bei "Rose" rosa und bei
"Minze" gruen daneben. */
background:color-mix(in srgb, var(--ink) 7%, var(--shell-bg));
box-shadow:inset 5px 5px 12px var(--sb-tief), inset -5px -5px 12px var(--sb-hoch);
}
.zw-zeit{
font-size:36px; font-weight:800; letter-spacing:-.02em; color:var(--ink);
font-variant-numeric:tabular-nums; line-height:1.05;
}
.zw-eingabe{ display:flex; gap:8px; }
.zw-eingabe label{
flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;
font-size:10px; font-weight:700; letter-spacing:.04em; text-transform:uppercase;
color:var(--muted); text-align:center;
}
.zw-eingabe input{
width:100%; box-sizing:border-box; appearance:textfield; -moz-appearance:textfield;
border:none; background:transparent; border-radius:var(--r-control);
padding:8px 4px; font:inherit; font-size:16px; font-weight:800; text-align:center;
color:var(--ink); font-variant-numeric:tabular-nums;
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);
}
.zw-eingabe input::-webkit-outer-spin-button,
.zw-eingabe input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.zw-eingabe input:focus{ outline:2px solid var(--brand); outline-offset:1px; }
/* umbrechen statt ueberlaufen: auf einem 320-px-Handy quer haben drei
Knoepfe nebeneinander keinen Platz - dann steht "Runde" eine Zeile
tiefer, statt aus dem Fenster zu ragen. */
.zw-knoepfe{ display:flex; flex-wrap:wrap; gap:8px; }
/* KEIN Umbruch und keine feste Breite: "Zuruecksetzen" ist das laengste Wort
im Fenster und passte bei 340 px Breite nicht in sein Drittel (Befund Murat
16.08.2026). Jetzt wachsen die Knoepfe mit ihrer Beschriftung (flex-basis
auto statt 0), und das Fenster ist breit genug fuer alle drei. */
.zw-btn{
flex:1 1 auto; min-width:0; appearance:none; border:none; cursor:pointer;
/* dieselbe Flaeche wie das Fenster - sonst liegt ein andersfarbiges
Rechteck darauf und die Tiefe kippt (siehe Begruendung an .zw). */
background:var(--shell-bg); color:var(--ink); white-space:nowrap;
font:inherit; font-size:12.5px; font-weight:700; padding:12px 10px;
border-radius:var(--r-card);
box-shadow:4px 4px 9px var(--sb-tief), -4px -4px 9px var(--sb-hoch);
transition:box-shadow .16s, color .16s;
}
.zw-btn:hover{ box-shadow:inset 3px 3px 6px var(--sb-tief), inset -3px -3px 6px var(--sb-hoch); }
.zw-btn:active{ transform:scale(.985); }
.zw-btn[disabled]{ opacity:.45; cursor:default; box-shadow:none; }
.zw-btn.zw-haupt{ color:var(--ok-ink); }
.zw-btn.zw-haupt.laeuft{ color:var(--amber-ink); }
.zw-ton{ display:flex; align-items:center; gap:9px; font-size:11.5px; color:var(--muted); }
.zw-ton select{
flex:1; min-width:0; font:inherit; font-size:12px; color:var(--ink);
border:none; background:transparent; border-radius:var(--r-control); padding:7px 9px;
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);
}
/* Ein-/Ausschalter im Fliesstext-Format (Konfetti). Er sieht eingedrueckt aus,
wenn er AN ist - dieselbe Sprache wie der aktive Bereich der Umschaltung
oben; ein zweiter Schaltertyp waere eine zweite Formensprache. */
.zw-schalter{
flex:none; appearance:none; border:none; cursor:pointer;
font:inherit; font-size:11.5px; font-weight:800; color:var(--muted);
background:transparent; padding:7px 12px; border-radius:var(--r-pill);
box-shadow:3px 3px 7px var(--sb-tief), -3px -3px 7px var(--sb-hoch);
transition:color .16s, box-shadow .16s;
}
.zw-schalter.an{
color:var(--brand);
box-shadow:inset 2px 2px 5px var(--sb-tief), inset -2px -2px 5px var(--sb-hoch);
}
/* Die Leinwand fuer Feuerwerk und Konfetti liegt UEBER allem und faengt
keinen Klick ab - sonst waere die Seite fuenf Sekunden lang tot. */
.zw-konfetti{
position:fixed; inset:0; z-index:9700; pointer-events:none;
}
.zw-runden{ max-height:132px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.zw-runde{ display:flex; justify-content:space-between; align-items:center;
font-size:12px; color:var(--muted); padding:5px 2px;
border-bottom:1px solid var(--hair); }
.zw-runde b{ color:var(--ink); font-variant-numeric:tabular-nums; }
/* Abgelaufen: die Scheibe pulst kurz in der Warnfarbe. Der Ton kann stumm
sein (Autoplay-Sperre, Geraet lautlos) - sichtbar muss es trotzdem sein. */
.zw-aus .zw-scheibe{ animation:zwPuls 1s ease-in-out 4; }
@keyframes zwPuls{
0%,100%{ box-shadow:inset 5px 5px 12px var(--sb-tief), inset -5px -5px 12px var(--sb-hoch); }
50%{ box-shadow:inset 5px 5px 12px var(--sb-tief), inset -5px -5px 12px var(--sb-hoch),
0 0 0 3px var(--amber-soft); }
}
.zw-aus .zw-zeit{ color:var(--amber-ink); }
/* Eingeklappt: nur noch die Zahl - gross genug, um sie vom Pult aus zu lesen,
und auf JEDER Seite sichtbar. Der gruene Punkt daneben ist mit v2.294.0
entfallen (Befund Murat 16.08.2026: "o yesil sey olmasin gereksiz"): eine
laufende Zahl sagt selbst, dass sie laeuft; eine stehende ebenso. */
.zw.zw-klein{ width:auto; top:96px; right:28px; border-radius:var(--r-pill); cursor:grab; }
.zw.zw-klein.zw-zieht{ cursor:grabbing; }
.zw-mini{
display:flex; align-items:center; justify-content:center; appearance:none; border:none;
cursor:inherit; background:transparent; font:inherit; font-size:26px; font-weight:800;
color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
padding:12px 24px; border-radius:var(--r-pill);
}
/* Laeuft die Zeit, atmet die Pille ganz leicht - das ersetzt den Punkt und
braucht keine zweite Farbe. Bei "weniger Bewegung" steht sie still. */
.zw.zw-klein.zw-laeuft{ animation:zwAtmen 2.6s ease-in-out infinite; }
@keyframes zwAtmen{
0%,100%{ box-shadow:8px 8px 22px var(--sb-tief), -6px -6px 18px var(--sb-hoch); }
50%{ box-shadow:5px 5px 14px var(--sb-tief), -4px -4px 12px var(--sb-hoch); }
}
@media (prefers-reduced-motion: reduce){
.zw.zw-klein.zw-laeuft{ animation:none; }
}
@media (max-width:640px){
.zw{ right:12px; left:12px; width:auto; top:74px; }
.zw.zw-klein{ left:auto; right:12px; width:auto; }
.zw-zeit{ font-size:32px; }
}
/* Scrollbereich mit den Einträgen */
#app-sidebar .sb-scroll{ flex:1; overflow-y:auto; overflow-x:hidden; margin:2px -4px; padding:2px 4px;
scrollbar-width:none; display:flex; flex-direction:column;
/* Bezugsrahmen der Linse (siehe .sb-linse). Sie liegt IN der Rolle, damit
sie beim Scrollen mitwandert statt stehenzubleiben. */
position:relative; }
#app-sidebar .sb-scroll::-webkit-scrollbar{ display:none; }
#app-sidebar .sb-scroll .sb-item{ flex:none; }
/* Unterstützen: Teil der Liste, sitzt unten (margin-top:auto), scrollt aber mit. */
#app-sidebar .sb-scroll .sb-support{ margin-top:auto; }
#app-sidebar .sb-bottom{ flex:none; padding-top:8px; margin-top:4px; border-top:1px solid var(--line); }
/* Update-Zeile: ruhig (Claude-Stil). Kleiner blauer Punkt am Icon signalisiert
"es gibt was Neues", ohne die ganze Zeile einzufaerben. Beschreibung bleibt
dauerhaft sichtbar (kein Hover noetig), damit klar ist: Klick = neu laden. */
/* "HILFE & IDEEN" STEHT NICHT MEHR IN DER SEITENLEISTE (v2.514.0).
Der Eintrag war der zweite Eingang zum Assistenten, neben dem Chip in den
Nachrichten. Beide sind mit dem Umzug entfallen; der Punkt fuer wartende
Antworten sitzt jetzt auf dem Maskottchen (.asst-mk-dot). Die Regeln fuer
die laufende Fassung darunter bleiben - sie hingen nie an diesem Eintrag,
sondern nur am selben Fuss der Leiste. */
/* Die laufende Fassung, klein unter "Hilfe & Ideen" (v2.316.0). Sie ist der
Deploy-Beweis und soll ohne Umweg lesbar sein. Bewusst KEIN Knopf: es gibt
nichts zu tun, sie ist eine Auskunft. Zugeklappt (70px) faellt sie weg -
dort stehen nur Symbole, und eine abgeschnittene Versionsnummer ist
schlechter als keine. */
#app-sidebar .sb-version{
font-size:10.5px; line-height:1.2; color:var(--muted); opacity:.55;
text-align:center; padding:7px 4px 2px; letter-spacing:.01em;
font-variant-numeric:tabular-nums; user-select:text; }
body:not(.sb-open) #app-sidebar .sb-version{ display:none; }
/* HIER STAND DIE ZEILE „UPDATE" (.sb-update, bis v2.737.2). Eine neue Fassung
kommt seit v2.738.0 von selbst - index-app.js „EINE NEUE FASSUNG KOMMT VON
SELBST". */
/* Kurze Bildschirme: Navigation kompakter, damit ALLE Knöpfe sichtbar bleiben
(Inhalte skalieren, nichts verschwindet).
SEIT v2.920.0 NUR NOCH IN DER SCHUBLADE (unter 900 px). Am Rechner teilen
sich die Eintraege die Hoehe selbst und ziehen Zeichen und Schrift nach
der Hoehe der Rolle mit - „DIE LEISTE FUELLT IHRE HOEHE" weiter unten.
Diese beiden Stufen schrumpften dort Zeichen auf 15 px und Schrift auf
8,5 px, waehrend darunter ein Drittel der Leiste leer stand. */
@media (max-width:899.98px) and (max-height:880px){
#app-sidebar .sb-item{ padding:7px 8px; margin:1px 0; gap:10px; }
body:not(.sb-open) #app-sidebar .sb-item{ padding:6px 3px; gap:3px; }
body:not(.sb-open) #app-sidebar .sb-item .sb-label{ font-size:9px; }
#app-sidebar .sb-group{ padding:8px 8px 3px 10px; font-size:9.5px; }
body:not(.sb-open) #app-sidebar .sb-group{ padding:6px 12px 2px; }
/* Kleiner heisst nicht duenner: 17px brauchen 2.25, um dieselbe
1.6px-Linie zu zeichnen wie 21px/1.85 (DESIGN_SYSTEM.md §6.2).
Ohne die zweite Zahl erbt die Regel 1.85 und zeichnet 1.31px -
die Seitenleiste wuerde auf schmalen Schirmen blasser. */
#app-sidebar .sb-item svg{ width:17px; height:17px; stroke-width:2.25; }
}
@media (max-width:899.98px) and (max-height:740px){
#app-sidebar .sb-item{ padding:5px 8px; }
body:not(.sb-open) #app-sidebar .sb-item{ padding:4px 2px; }
body:not(.sb-open) #app-sidebar .sb-item .sb-label{ font-size:8.5px; }
#app-sidebar .sb-item svg{ width:15px; height:15px; stroke-width:2.55; }
}
#app-sidebar .sb-support{ position:relative; overflow:hidden; color:#7C5CFF; }
#app-sidebar .sb-support svg{ stroke:#7C5CFF; }
#app-sidebar .sb-support:hover{ background:rgba(124,92,255,.10); }
/* Sanfter Schein hinter dem Text (Markenfarbe, sehr dezent) – kein Lauflicht. */
#app-sidebar .sb-support::after{
content:""; position:absolute; top:50%; left:50%; width:130px; height:36px;
transform:translate(-50%,-50%); border-radius:999px; pointer-events:none;
background:radial-gradient(ellipse at center, rgba(46,91,255,.16), transparent 70%);
opacity:0; animation:sbGlowSoft 8s ease-in-out infinite;
}
@keyframes sbGlowSoft{ 0%,60%,100%{opacity:0;} 75%{opacity:1;} 90%{opacity:.35;} }
@media (prefers-reduced-motion: reduce){ #app-sidebar .sb-support::after{ animation:none; } }
/* Gruppen-Überschrift ("Werkzeuge" usw.) — klein, informativ, nicht laut */
#app-sidebar .sb-group{
font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted-shell); opacity:.75; padding:14px 8px 6px 10px; white-space:nowrap;
}
#app-sidebar .sb-group + .sb-item{ margin-top:0; }
body:not(.sb-open) #app-sidebar .sb-group{
/* eingeklappt: als dünne Trennlinie statt Text */
font-size:0; padding:10px 12px 4px; position:relative;
}
body:not(.sb-open) #app-sidebar .sb-group::after{
content:""; display:block; height:1px; background:var(--line);
}
/* Aufklappbare Menü-Bereiche (Unterricht / Planen & Prüfen / Werkzeuge).
Verhalten wie macOS-Seitenleisten: Kopf klickbar, Pfeil dreht sich,
Zustand bleibt (localStorage). Eingeklappte (schmale) Leiste: Kopf wird
zur Trennlinie, Einträge bleiben IMMER sichtbar (sonst käme man nicht ran). */
#app-sidebar .sb-sec-h{
appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit;
width:100%; display:flex; align-items:center; justify-content:space-between; gap:6px;
font-size:10.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase;
color:var(--muted-shell); opacity:.8; padding:14px 8px 6px 10px; white-space:nowrap;
border-radius:8px;
}
#app-sidebar .sb-sec-h:hover{ color:var(--ink); opacity:1; }
#app-sidebar .sb-sec-h svg{
width:12px; height:12px; fill:none; stroke:currentColor; stroke-width:2.2;
stroke-linecap:round; stroke-linejoin:round; transition:transform .18s; flex:none;
}
#app-sidebar .sb-sec.closed .sb-sec-h svg{ transform:rotate(-90deg); }
body.sb-open #app-sidebar .sb-sec.closed .sb-sec-items{ display:none; }
body:not(.sb-open) #app-sidebar .sb-sec-h{
font-size:0; padding:10px 12px 4px; cursor:default; pointer-events:none;
}
body:not(.sb-open) #app-sidebar .sb-sec-h::after{
content:""; display:block; height:1px; background:var(--line); width:100%;
}
body:not(.sb-open) #app-sidebar .sb-sec-h svg{ display:none; }
/* Einträge */
/* `text-decoration:none` ist seit v2.311.0 noetig: die Eintraege mit eigener
Adresse sind jetzt
statt , damit die mittlere Maustaste
und Cmd/Strg+Klick sie in einem neuen Tab oeffnen (Begruendung bei navUrl
in index-app.js). Ohne diese Zeile traegt genau die Haelfte der Leiste
einen Unterstrich - naemlich die mit einer Adresse. */
#app-sidebar .sb-item{
appearance:none; border:none; background:transparent; cursor:pointer;
text-decoration:none;
font-family:inherit; color:var(--muted-shell); width:100%;
display:flex; align-items:center; gap:11px;
padding:6px 10px; border-radius:11px; margin:1px 0;
text-align:left;
transition:background .16s var(--sb-weich), color .16s var(--sb-weich),
box-shadow .16s var(--sb-weich), transform .16s var(--sb-weich);
}
/* Beruehrbar = eingedrueckt. Die Flaeche bleibt durchsichtig, gearbeitet wird
allein mit den zwei inneren Schatten – deshalb stimmt die Farbe auf jeder
der acht waehlbaren Schalen von selbst. */
#app-sidebar .sb-item:hover{
background:transparent; color:var(--ink);
box-shadow:inset 3px 3px 6px var(--sb-tief), inset -3px -3px 6px var(--sb-hoch);
}
/* Ausgewaehlt = erhaben.
HIER STEHT ABSICHTLICH KEIN `background`. Die Fuellung des aktiven Eintrags
gehoert dem Abschnitt „Akzent aus der Flaechenfarbe" am Dateiende – dort
traegt sie die Farbe, die die Lehrkraft gewaehlt hat, und dort steht die
VOLLSTAENDIGE Liste aller Stellen mit Akzent (qa/unit/test_flaeche_akzent.py
zaehlt sie). Stuende die Fuellung auch hier, gaebe es zwei Wahrheiten, und
die spaetere gewaenne stillschweigend – genau der Fehler, den dieser
Abschnitt verhindern soll. Form, Tiefe und Schriftfarbe sind dagegen vom
Farbton unabhaengig und bleiben hier.
Und die Schriftfarbe ist NICHT nur Geschmack: die bisherige Paarung
--brand auf --brand-soft erreicht 4.47:1 und faellt unter der
Schriftschwelle 4.5 knapp durch. Weiss auf der Akzentfuellung ist
dagegen gerechnet – ssAkzentSetzen() dunkelt sie so lange ab, bis
4.5:1 stehen. Die Umstellung raeumt damit einen echten
Barrierefreiheits-Mangel weg (BITV 2.0). */
#app-sidebar .sb-item.on{
color:var(--on-brand); font-weight:700;
}
/* ⛔ DER AUSGEWAEHLTE EINTRAG WIRD BEIM UEBERFAHREN NICHT AUCH NOCH
EINGEDRUECKT (Befund Murat 06.09.2026: „su cam efekti garip duruyo üstüne
gelince yani arkadaki renkli kisim büyük duruyo, kenarlardan bire bir üst
üste gelmelilerdi").
Hier standen zwei innere Schatten - dieselbe Mulde wie beim Ueberfahren
eines INAKTIVEN Eintrags. Auf der farbigen Linse ergab das einen hellen
Innenrand, also ein zweites, kleineres Rechteck INNERHALB der Fuellung;
zusammen mit dem Aussenschatten der Linse sah man zwei versetzte Kaesten
statt eines. Und es war auch sachlich falsch: „eingedrueckt" heisst
„beruehrbar" - ein Eintrag, der schon ausgewaehlt IST, hat nichts mehr
anzubieten. Die Auswahl traegt die Linse, mehr braucht es nicht. */
#app-sidebar .sb-item.on:hover{
color:var(--on-brand);
box-shadow:none;
}
/* ===== DIE LINSE (v2.647.0) ===========================================
AUFTRAG MURAT 04.09.2026: „secili halde cam olmasinda tusunca digerine
gecerken o cam effekti versek." Vorbild ist wieder die WhatsApp-Leiste:
dort ist die Auswahl kein Zustand, den zwei Felder abwechselnd tragen,
sondern EIN Koerper, der von einem Feld zum naechsten zieht.
GENAU DAS IST DER UMBAU: die Fuellung des aktiven Eintrags sitzt nicht
mehr am Eintrag, sondern an einem einzigen Element in der Rolle. Der
Eintrag behaelt Schriftfarbe, Schriftschnitt und Icon - also alles, woran
die gerechnete Lesbarkeit haengt (weiss auf --flaeche-akzent, 4.5:1,
ssDunkelnBis). Die FARBE der Linse steht wie zuvor im Abschnitt „Akzent
aus der Flaechenfarbe" am Dateiende; hier stehen Form, Tiefe und Bewegung.
WARUM DAS UEBERHAUPT NOETIG IST - und das ist die Falle beim Nachbauen:
renderMainNav() zeichnet die Leiste bei JEDEM Seitenwechsel per innerHTML
neu. Ein Eintrag, den es vor einer Millisekunde noch nicht gab, kann
nirgendwo herkommen; eine Ueberblendung zwischen altem und neuem Eintrag
ist damit unmoeglich. Ein Koerper, dessen Lage gemerkt und beim Zeichnen
stumm wiederhergestellt wird, kann es. Die Merker-Logik steht bei
sbLinseSetzen() in index-app.js - ohne sie fliegt die Linse bei jedem
Seitenaufruf von oben herein.
DER GLASZUG: der helle Innenrand (--glas-licht) ist derselbe wie an der
Leiste, und beim Reisen zieht sich der Koerper kurz schmal zusammen. Das
ist der ganze „liquid"-Eindruck - kein Filter, keine zweite Bibliothek.
BEWACHT VON qa/unit/test_seitenleiste.py (Zusage 1: erhaben statt
eingedrueckt, keine feste Farbe) und qa/unit/test_flaeche_akzent.py. */
#app-sidebar .sb-linse{
position:absolute; left:4px; right:4px; top:0; height:0; z-index:0;
border-radius:11px; pointer-events:none; opacity:0;
transform:translateY(var(--linse-y,0px));
/* ⛔ DIE TIEFE UMARMT DIE FORM, SIE WAECHST NICHT UEBER SIE HINAUS
(derselbe Befund: „arkadaki renkli kisim büyük duruyo"). Vorher
5px/12px Weichzeichnung auf einer gesaettigten Fuellung - das liest sich
nicht als Schatten, sondern als zweiter, groesserer Koerper hinter dem
ersten. Jetzt kurz und eng: die Kanten liegen aufeinander, die Erhebung
bleibt (kein `inset` bei --sb-tief/--sb-hoch, siehe
qa/unit/test_seitenleiste.py). */
box-shadow:0 2px 6px var(--sb-tief), 0 -1px 3px var(--sb-hoch),
inset 0 1px 0 var(--glas-licht);
transition:transform .40s cubic-bezier(.34,1.26,.44,1),
height .26s var(--sb-weich), opacity .18s ease;
}
#app-sidebar .sb-linse.da{ opacity:1; }
#app-sidebar .sb-linse.reist{ transform:translateY(var(--linse-y,0px)) scaleX(.93); }
/* Beim ersten Zeichnen, beim Auf-/Zuklappen und beim Drehen des Geraets wird
die Linse GESETZT, nicht geflogen - sonst kaeme sie bei jedem Seitenaufruf
von oben angerauscht. */
#app-sidebar .sb-linse.stumm{ transition:none; }
/* Die Eintraege liegen ueber der Linse: sie ist ihre Fuellung, nicht ihr
Deckel. Ohne diese Zeile gewaenne das absolut gesetzte Element und
verdeckte Schrift und Symbol. */
#app-sidebar .sb-item{ position:relative; z-index:1; }
@media (prefers-reduced-motion: reduce){
#app-sidebar .sb-linse{ transition:opacity .18s ease; }
#app-sidebar .sb-linse.reist{ transform:translateY(var(--linse-y,0px)); }
}
/* IM DUNKELN GILT DAS UMGEKEHRTE, und zwar gerechnet, nicht gefuehlt:
dort ist --brand-dk (#9DB0FF) HELLER als --brand (#6E8CFF) – die Rollen der
beiden Token kehren sich um (design-tokens.css sagt das ausdruecklich).
Weisse Schrift erreicht auf diesem Verlauf nur 3.06:1 bzw. 2.08:1 und faellt
klar durch. Deshalb bleibt der Dunkelmodus bei der bisherigen weichen
Fuellung (4.49:1). Kein Rueckschritt, sondern die einzige Fassung, die dort
lesbar ist. */
html[data-theme="dark"] #app-sidebar .sb-item.on{
color:var(--brand);
}
html[data-theme="dark"] #app-sidebar .sb-linse{
background:var(--brand-soft);
box-shadow:3px 3px 8px var(--sb-tief), -3px -3px 8px var(--sb-hoch);
}
html[data-theme="dark"] #app-sidebar .sb-item.on .sb-ico svg{ stroke:var(--brand); }
html[data-theme="dark"] #app-sidebar .sb-item.on .sb-desc{ color:var(--muted); }
/* Kurz nachgeben beim Druecken – das ist der ganze Unterschied zwischen
"Bild einer Taste" und "Taste". */
#app-sidebar .sb-item:active{ transform:scale(.985); }
#app-sidebar .sb-item svg{ width:21px; height:21px; flex:none; fill:none; stroke:currentColor;
stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; }
#app-sidebar .sb-item .sb-label{
font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden;
opacity:1; transition:opacity .16s;
}
#app-sidebar .sb-item.on .sb-label{ font-weight:700; }
/* Standard (offen / Drawer): volle Beschriftung; kurze ausgeblendet. */
#app-sidebar .sb-item .sb-label-short{ display:none; }
/* ---- Konfetti-Pop (Hover): Icon-Badge färbt sich, wackelt kurz, zwei
Farbpunkte fliegen davon; unter dem Namen klappt eine Mini-Beschreibung auf. */
#app-sidebar .sb-ico{
position:relative; width:34px; height:32px; flex:none; border-radius:10px;
display:flex; align-items:center; justify-content:center;
transition:background .18s;
}
/* ===== KEIN WACKELN MEHR (v2.413.0) ====================================
ANWEISUNG MURAT 24.08.2026: „kesinlikle oyunsal biseye dönmesin."
Hier lag genau das: `sbWob` drehte das Zeichen beim Ueberfahren um 8° und
vergroesserte es um 15 %. Auf einem Werkzeug, mit dem Lehrkraefte den
ganzen Tag arbeiten, ist eine huepfende Menuezeile kein Charme, sondern
Unruhe - und sie sagt nichts, was die Farbflaeche nicht schon sagt.
Die Rueckmeldung bleibt: das Plaettchen faerbt sich, das Zeichen wird
weiss. Das ist deutlich genug und haelt still. */
#app-sidebar .sb-item:hover .sb-ico{ background:var(--sbc,#7F77DD); }
#app-sidebar .sb-item:hover .sb-ico svg{ stroke:#fff; }
/* (Hier lagen bis v2.413.0 zwei Konfetti-Punkte .pp/.pp2 mit `sbPop`. Sie
sprangen beim Ueberfahren aus dem Plaettchen heraus - genau das, was ein
Werkzeug fuer den Schulalltag nicht sein soll. Ersatzlos entfernt, in CSS
UND im Markup: eine Regel ohne Element findet spaeter niemand wieder.)
Auf dem aktiven Eintrag ist der Grund schon die Marke: ein zweites farbiges
Kaestchen darauf waere Farbe auf Farbe. */
#app-sidebar .sb-item.on .sb-ico,
#app-sidebar .sb-item.on:hover .sb-ico{ background:transparent; }
#app-sidebar .sb-item.on .sb-ico svg,
#app-sidebar .sb-item.on:hover .sb-ico svg{ stroke:var(--on-brand); }
#app-sidebar .sb-item .sb-desc{
display:block; font-size:10.5px; font-weight:500; color:var(--muted-shell);
max-height:0; opacity:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
transition:max-height .2s ease, opacity .2s ease; letter-spacing:0;
}
#app-sidebar .sb-item.on .sb-desc{ color:var(--on-brand); }
/* ⛔ HIER STAND BIS v2.647.1 EIN AUFKLAPPENDER BESCHREIBUNGSTEXT:
`body.sb-open #app-sidebar .sb-item:hover .sb-desc{max-height:15px;opacity:1;}`
Er machte den ueberfahrenen Eintrag 15px hoeher und schob damit ALLE
Eintraege darunter nach unten - bei jeder Mausbewegung durch die Liste neu.
Befund Murat 04.09.2026: „nav genis haldeyken tuslar böyle oynuyor
kipirdiyor gezikce." Genau das war es.
ZWEI GRUENDE, WARUM ER NICHT WIEDERKOMMT:
1. CLAUDE.md, Entscheidung 2026-07: erklaerende Absaetze in der Oberflaeche
werden nicht gelesen; ein `title`-Tooltip ist erlaubt, und den hat jeder
Eintrag (title=""). Die Beschreibung war genau so ein Absatz.
2. Die Linse (.sb-linse) misst die Lage des aktiven Eintrags EINMAL beim
Zeichnen. Eine Liste, die beim Ueberfahren ihre Hoehen aendert, laesst
die Auswahl neben ihrem Eintrag stehen. Wer den Text zurueckholt, muss
seinen Platz FEST reservieren (immer sichtbar), nicht aufklappen.
`.sb-desc` selbst bleibt: die Update-Zeile unten benutzt sie weiter, und
dort bewegt sich nichts (sie steht dauerhaft offen, eine Zeile am Ende). */
body:not(.sb-open) #app-sidebar .sb-ico{ width:30px; height:26px; border-radius:8px; }
/* eingeklappt: Icon oben, Mini-Label darunter (kleine, nette Beschriftung) */
body:not(.sb-open) #app-sidebar .sb-item{
flex-direction:column; gap:4px; padding:9px 3px; border-radius:14px;
}
body:not(.sb-open) #app-sidebar .sb-item .sb-label-full{ display:none; }
body:not(.sb-open) #app-sidebar .sb-item .sb-label-short{ display:block; }
body:not(.sb-open) #app-sidebar .sb-item .sb-label{
font-size:9.5px; font-weight:600; line-height:1.05; width:100%;
text-align:center; letter-spacing:-.015em;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* ===== DIE LEISTE FUELLT IHRE HOEHE (v2.920.0) ===========================
Befund Murat 01.10.2026, mit zwei Bildschirmfotos: seit der Werkzeugraum
aufgeloest ist (PLAN_WERKZEUGE_VERTEILEN N4) stehen nur noch acht
Eintraege in der Leiste. Darunter blieb ein Drittel der Hoehe leer,
waehrend die Eintraege selbst auf kurzen Schirmen bis auf 15-px-Zeichen
und 8,5-px-Schrift schrumpften (die alten Stufen 880/740 weiter oben).
Wortlaut: „boyutlarini büyütüp modernlestirsek … browserin boyutu
kücüldükce boyutu da kücülsün … hep büyük olup asagi kaymasin menü."
WIE: Am Rechner (ab 900 px) teilen sich die Eintraege die freie Hoehe
der Rolle - `flex:1 1 0`, gedeckelt auf --sb-zeile-max. Ein hohes
Fenster bekommt grosse Eintraege und den Rest als Luft darunter, ein
niedriges kleinere. Kleiner als ihr Inhalt werden sie nie (die
automatische Mindesthoehe eines Flex-Kindes); erst dann rollt die Liste,
der alte Ausweg mit unsichtbarem Balken.
ZEICHEN UND SCHRIFT folgen in Stufen der Hoehe, die die ROLLE wirklich
hat - nicht der Fensterhoehe. Darum ist `.sb-scroll` ein Groessen-
Container: was unter der Liste steht (Robi abgelegt oder nicht), zaehlt
so von selbst mit, ohne dass hier jemand nachrechnet. Wie die Schwellen
entstehen, steht an den Stufen selbst. Browser ohne Container-Abfragen
(iPadOS 15) bleiben auf der grossen Stufe und rollen.
⛔ JEDE STUFE SETZT GROESSE UND STRICH ZUSAMMEN (DESIGN_SYSTEM.md §6.2):
24/1.6 · 22/1.75 · 20/1.92 · 18/2.13 · 17/2.25 - immer 1,6 px sichtbare
Linie.
Eine Stufe, die nur --sb-ico aendert, zeichnet duennere oder dickere
Linien als der Rest der Seite. Nachgerechnet von
qa/unit/test_seitenleiste.py (test_jede_leistenstufe_zeichnet_1_6_px).
DIE SCHUBLADE (unter 900 px) BLEIBT, WIE SIE IST.
VERBUNDEN MIT: sbLinseSetzen() (misst den aktiven Eintrag nach dem
Layout und beim Aendern der Fenstergroesse neu), renderMainNav(). */
@media (min-width:900px){
#app-sidebar .sb-scroll{ container:sb-rolle / size; }
#app-sidebar .sb-scroll .sb-item{ flex:1 1 0; max-height:var(--sb-zeile-max); }
#app-sidebar .sb-scroll{
--sb-zeile-max:66px; --sb-ico:24px; --sb-strich:1.6; --sb-kissen:8px;
--sb-schrift-zu:11px; --sb-schrift-auf:15px; --sb-luft:6px; --sb-abstand:5px;
}
body.sb-open #app-sidebar .sb-scroll{ --sb-zeile-max:54px; }
#app-sidebar .sb-scroll .sb-item svg{
width:var(--sb-ico); height:var(--sb-ico); stroke-width:var(--sb-strich);
}
/* Eingeklappt: Plaettchen ueber dem kurzen Namen, beides mittig in der
Zeile, wie hoch sie auch geworden ist. */
body:not(.sb-open) #app-sidebar .sb-scroll .sb-item{
justify-content:center; gap:var(--sb-abstand); padding:var(--sb-luft) 3px; border-radius:16px;
}
body:not(.sb-open) #app-sidebar .sb-scroll .sb-ico{
width:calc(var(--sb-ico) + 16px); height:calc(var(--sb-ico) + var(--sb-kissen)); border-radius:10px;
}
body:not(.sb-open) #app-sidebar .sb-scroll .sb-item .sb-label{
font-size:var(--sb-schrift-zu); line-height:1.1; letter-spacing:0;
}
/* Aufgeklappt: eine ruhige Zeile mit groesserem Plaettchen und Schrift in
Lesegroesse - „acik pozisyonda cok sig duruyor". */
body.sb-open #app-sidebar .sb-scroll .sb-item{ gap:13px; padding:4px 12px 4px 8px; border-radius:14px; }
body.sb-open #app-sidebar .sb-scroll .sb-ico{
width:calc(var(--sb-ico) + 16px); height:calc(var(--sb-ico) + 14px); border-radius:12px;
}
body.sb-open #app-sidebar .sb-scroll .sb-item .sb-label{
font-size:var(--sb-schrift-auf); letter-spacing:-.01em;
}
/* Die Linse folgt der Rundung der Eintraege - sonst steht ihre Ecke
neben der Ecke des Eintrags. */
body:not(.sb-open) #app-sidebar .sb-linse{ border-radius:16px; }
body.sb-open #app-sidebar .sb-linse{ border-radius:14px; }
/* Die Schwellen sind gerechnet, nicht geschaetzt: acht Eintraege mal die
Hoehe, die der Inhalt der VORIGEN Stufe eingeklappt braucht (Polster +
Plaettchen + Abstand + Namenszeile + 2 px Rand). Stufe 1 braucht
8 x 63 = 504 px - darunter kaeme sie nicht mehr unter, also greift bei
510 die zweite. Wer an einer Groesse dreht, rechnet die Schwelle
darunter nach; sonst rollt die Liste wieder um ein paar Pixel
(gemessen bei 1000 x 670, bevor die Zahlen stimmten: 13 px). */
@container sb-rolle (max-height:510px){
.sb-item{ --sb-ico:22px; --sb-strich:1.75; --sb-schrift-zu:10.5px;
--sb-schrift-auf:14.5px; --sb-luft:4px; --sb-abstand:4px; }
}
@container sb-rolle (max-height:448px){
.sb-item{ --sb-ico:20px; --sb-strich:1.92; --sb-schrift-zu:10px;
--sb-schrift-auf:14px; --sb-luft:3px; }
}
@container sb-rolle (max-height:412px){
.sb-item{ --sb-ico:18px; --sb-strich:2.13; --sb-kissen:6px; --sb-schrift-zu:9.5px;
--sb-schrift-auf:13.5px; --sb-luft:2px; --sb-abstand:3px; }
}
@container sb-rolle (max-height:352px){
.sb-item{ --sb-ico:17px; --sb-strich:2.25; --sb-kissen:5px; --sb-schrift-zu:9px;
--sb-schrift-auf:13px; --sb-luft:1px; --sb-abstand:2px; }
}
}
/* ---------- Neue Kopfzeile (App-Topbar): Titel links, Postfach/Profil rechts ---------- */
.app-topbar{ display:none; }
body.has-sidebar:not(.lh-fullscreen) .app-topbar{
display:flex; align-items:center; gap:14px; margin:2px 0 20px; min-height:44px;
}
.app-topbar .at-menu{ /* nur mobil sichtbar */ display:none; }
.app-topbar .at-title{
flex:1 1 auto; min-width:0;
font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
font-weight:800; letter-spacing:-.02em; color:var(--ink);
font-size:clamp(19px,3vw,26px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* Dezente Kennzahlen NEBEN dem Seitentitel (z. B. Pinnwand-Hub:
"3 Pinnwände · 1 Ordner · 1 freigegeben"). Wird von pwhRender() gesetzt,
setPageTitle() raeumt beim Screenwechsel via textContent automatisch auf. */
.at-title .at-title-meta{
margin-left:12px; font-size:12.5px; font-weight:650; letter-spacing:0;
color:var(--muted); vertical-align:2px; white-space:nowrap;
}
@media(max-width:600px){ .at-title .at-title-meta{ display:none; } }
/* Cockpit-Begrüßung als Kopfzeilen-Titel: NIE zweizeilig (Wunsch 2026-07) –
eine Zeile, kürzt bei Bedarf mit … und bleibt neben dem Profilbild. Gilt
zentral fuer alle Seiten (setPageTitle setzt denselben #page-title). */
.app-topbar .at-title.at-title-hello{
font-size:clamp(19px,3vw,30px); line-height:1.15;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
body.has-sidebar:not(.lh-fullscreen) .app-topbar:has(.at-title-hello){
align-items:center;
}
/* ⛔ SCHRIFTGROESSE AUF JEDER SEITE (v2.683.0, Ansage Murat 06.09.2026:
„her sayfaya sayfadaki metinleri kücültüp büyüten bir -A+ istiyorum").
Skaliert wird `.wrap` mit `zoom`, NICHT `font-size`. Grund: die Oberfläche
ist in Pixeln gebaut (`font-size:13px` steht hundertfach im CSS) - eine
Umstellung auf `rem` wäre ein Umbau jeder Seite, und eine reine
Schriftvergrößerung ließe Kästen, Zeilenhöhen und Symbole zurück. `zoom`
nimmt alles mit und ist genau das, was ein Mensch mit „größer" meint.
⛔ NUR DER INHALT, NICHT DIE HUELLE. Seitenleiste und Kopfzeile bleiben,
wie sie sind - sonst wandert der Knopf unter dem eigenen Finger weg, und
feste Überlagerungen (Menüs, Fenster) säßen falsch.
Gespeichert im Browser, nicht am Konto: am Tablet im Klassenraum will man
oft etwas anderes als am Schreibtisch. */
.app-topbar #authbar{ flex:none; min-width:0; }
/* ===== DIE KOPFZEILE AUF SCHMALEN SCHIRMEN (v2.363.0) ====================
BEFUND MURAT 22.08.2026: „mobilde giris yapinca ve ben okul adminiysem sag
üstteki mesaj, okul amblemi, text, admin girisi, profil resmi acayip yer
kapliyo ve kocaman. soldaki mesajimida kesiyor."
Er beschreibt zwei verschiedene Dinge, und beide stimmen:
1. ZU VIELE ELEMENTE. Ein Schul-Admin traegt rechts FUENF Dinge: Postfach,
Schul-Logo, Schulname, Verwaltungs-Knopf, Profilbild. Der 640er-Block
unten blendete Name und Trennstrich schon aus - aber erst ab 641px war
wieder alles da, und genau dazwischen (Tablet hochkant, geteiltes
Fenster) draengt sich die volle Kapsel neben den Titel.
Jetzt faellt der Schulname schon ab 900px weg. Das Logo bleibt: es sagt
auf einen Blick, in WELCHER Schule man arbeitet - bei Lehrkraeften an
zwei Schulen ist das keine Zierde.
2. ZU GROSS. Postfach, Verwaltung und Profil sind je 40px - zusammen mit
Abstaenden 140px, auf einem 375er Schirm mehr als ein Drittel der Zeile.
Unter 640px werden es 34px; die Klickflaeche bleibt damit ueber den
44px-Empfehlungen, weil die Knoepfe die volle Kopfzeilenhoehe treffen.
WAS NICHT MEHR PASSIERT (v2.414.0): Der SCHULNAME wird nicht mehr
ausgeblendet. Bis hierher stand hier `.av-school-name{display:none}` ab
900px - und weil diese Regel WEITER UNTEN in der Datei steht als die der
Kapsel, gewann sie. Am Telefon blieb vom „Wo arbeite ich" also nur ein
Logo uebrig; genau das war Befund Murat 24.08.2026 („eskiden burda benim
okulum okulum ismi dururdu o gitmis"). Der Platz ist jetzt da, weil der
zweite Knopf daneben entfallen ist. Gekuerzt wird der Name ueber
`max-width`, nicht versteckt - ein abgeschnittener Schulname sagt noch
etwas, ein fehlender nichts.
⛔ Und die Kapsel selbst verschwindet nirgends: sie ist am Telefon der
EINZIGE Weg in die Schulverwaltung. Wer sie hier ausblendet, sperrt jeden
Schul-Admin aus, ohne dass es am Computer auffaellt. */
@media (max-width:900px){
.av-school-name{ max-width:120px; }
.avatar-wrap.with-school{ padding:4px 6px; gap:6px; }
}
@media (max-width:640px){
body.has-sidebar:not(.lh-fullscreen) .app-topbar{ gap:8px; }
.app-topbar .at-title{ font-size:clamp(17px,4.6vw,21px); }
.pf-btn, .avatar-btn{ width:34px; height:34px; }
.pf-btn svg{ width:20px; height:20px; }
/* DAS BILD MUSS MITSCHRUMPFEN (v2.414.0). Der Knopf ging hier auf 34px,
`.avatar-circle` blieb bei 40 - das Bild stand also 6px ueber seinen
eigenen Knopf hinaus und wurde von der Kopfzeile angeschnitten. Genau
das war der Befund Murat 24.08.2026: „sag üstteki profil resmi boka
sarmis." Am Computer war nichts zu sehen, weil dort beide 40px sind. */
.avatar-circle{ width:34px; height:34px; font-size:13px; }
.avatar-caret{ width:9px; height:9px; }
.av-school-logo{ width:26px; height:26px; }
.av-school-logo svg{ width:15px; height:15px; }
}
/* Die alte Kopfzeile (Logo + Greeting + authbar) wird ersetzt, sobald die
Sidebar aktiv ist. */
body.has-sidebar .topbar{ display:none; }
/* Doppelte Seitentitel: steht der Name schon oben in der App-Kopfzeile,
blenden wir die identische Überschrift in der Karte aus. */
body.has-sidebar .screen-h2-dup{ display:none; }
/* ---------- MOBIL (< 900px): Sidebar als Schublade ---------- */
@media (max-width:899.98px){
body.has-sidebar:not(.lh-fullscreen) .app-topbar{
display:flex; margin:4px 0 16px; min-height:40px;
}
/* Seitliche Lücken auf Tablet-Hochkant (z. B. iPad 8, ~810px) für ALLE
App-Seiten weg: die globale .wrap-Kappe (720px, Zeile ~28) ließ den Inhalt
mittig kleben. Ab 900px hebt die Zwei-Spalten-Regel die Kappe schon auf –
hier machen wir es fürs schmalere Fenster GLEICH, damit Cockpit, Material,
Klassenbuch, Pinnwand … einheitlich die Breite nutzen (nur echte App-Shell-
Seiten; Landing/Auth/Konto haben kein .has-sidebar und behalten 720px). */
body.has-sidebar:not(.lh-fullscreen) .wrap{ max-width:none; }
/* Tablet hochkant (721-899 px): hier steht die Zentrale NICHT im weissen
Panel (Ausnahme unten) - seit v2.909.0 traegt sie keine eigene Karte mehr
und laege sonst auf der Flaechenfarbe. Deshalb hier ihre Flaeche; bis
720 px ist sie das deckende Blatt ueber der App (Regel bei .pf-shell). */
@media (min-width:721px){
body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) #pf-shell{
background:var(--card); border-radius:22px; }
}
/* ===== FESTE App-Shell auch mobil + Tablet-Hochkant (iPad 8) =====
Weisses Panel bleibt STEHEN, der Inhalt scrollt DARIN – Kopf oben fix, unten
gefüllt. WICHTIG (der Fehler beim letzten Mal): die Ränder respektieren die
Safe-Area (Notch/Statusleiste), damit das Panel oben NICHT unter die
Statusleiste rutscht und oben genauso viel Luft bleibt wie unten.
- Im Browser ist env(safe-area-inset-*) = 0 -> 10px Rand ringsum.
- Als installierte App (Notch) -> Rand = Notch-Höhe, Panel sitzt sauber darunter.
Ausnahme: Nachrichten + iframe-Portale (eigene Vollflächen). */
body.has-sidebar:not(.lh-fullscreen):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]) .wrap{
/* ===== GLEICH GROSSE LUECKE oben wie unten =====
Vorher: --m-top = safe-area-top (47px auf iPhone 12 Pro Max),
--m-bot = safe-area-bottom (34px).
Der obere Bereich wird aber von der STATUSLEISTE (Uhr/Akku) gefuellt –
sichtbar grau blieb dort also ~0px, unten dagegen volle 34px. Genau das
war die "unten ist eine Luecke"-Beschwerde: die Zahlen waren gesetzt,
aber der SICHTBARE Abstand war ungleich.
Jetzt: --gap ist die sichtbare graue Luecke und gilt oben wie unten
identisch. Oben kommt die Statusleisten-Hoehe zusaetzlich dazu (sonst
laege das Panel unter der Uhr), unten NICHT – dadurch ist der graue
Rand ober- und unterhalb des Panels exakt gleich breit.
Der Home-Indicator liegt dann auf dem weissen Panel; damit Inhalt nicht
darunter rutscht, federt die Scroll-Section unten ab (siehe unten). */
/* 10px -> 7px (Rueckmeldung Murat 02.08.2026: "oben frisst es Flaeche").
WAS DABEI ZU HOLEN IST, und was nicht - am iPhone 17 nachgerechnet:
Dynamic Island endet ~48px
safe-area-inset-top 62px <- 14px gehoeren iOS, nicht uns
--gap 10px <- NUR das ist unser Anteil
Panel beginnt 72px
Die 14px Reserve setzt das Betriebssystem; wer sie anfasst, schiebt das
Panel unter Uhr und Akku. Verhandelbar ist allein --gap, und der gilt
oben wie unten GLEICH - die Symmetrie ist kein Zufall, sondern die
Behebung der alten Beschwerde "unten ist eine Luecke" (siehe oben).
Deshalb 7px statt 4px: das kostet 3px Flaeche und haelt den Rahmen
ringsum gleich breit. */
--gap: 7px;
--m-top: calc(env(safe-area-inset-top, 0px) + var(--gap));
--m-bot: var(--gap);
--m-side: max(var(--gap), env(safe-area-inset-left, 0px));
/* ===== KEINE HOEHENRECHNUNG MEHR (2026-07-26) =========================
Vorher: `height: calc(var(--vh100) - …)`. Damit haengt die Panel-Hoehe
an einer GEMESSENEN Zahl - und jede Abweichung zwischen dem, was das
Geraet meldet, und dem, was es wirklich anzeigt, wird sofort als
abgeschnittener oder zu kurzer Bildschirm sichtbar. Genau das war die
wiederkehrende, nicht reproduzierbare Beschwerde.
Jetzt: das Panel ist `position:fixed` und an ALLEN VIER SEITEN
angeschlagen. Ein so verankertes Element fuellt den Layout-Viewport
exakt aus - ohne dass irgendjemand seine Hoehe kennen muss. Es gibt
nichts mehr zu messen, zu runden oder zu deckeln: was der Viewport ist,
ist das Panel. Rechnet das Geraet anders als erwartet, waechst oder
schrumpft das Panel einfach mit.
(Die Seite selbst scrollt ohnehin nicht - gescrollt wird die
Screen-Section IM Panel, siehe weiter unten.) */
position: fixed;
top: var(--m-top); bottom: var(--m-bot);
left: var(--m-side); right: var(--m-side);
margin: 0;
width: auto; max-width: none; height: auto; max-height: none;
box-sizing: border-box;
overflow: hidden;
display: flex; flex-direction: column;
background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
/* Seitlich 12 statt 16 px (v2.863.0, Befund Murat 26.09.2026: „mobilde
oralar bazi kisimlar icin cok cok genis"). Der Inhalt beginnt damit
20 px hinter dem Bildschirmrand (7 Luecke + 1 Linie + 12) - so wie
die Randabstaende der Systemapps. Begruendung und Regel: --pl-seite
im 900er-Block. */
padding: 16px 12px 0;
/* ===== Ecken-Rundung: geraetetypisch OHNE Geraete-Abfrage =====
Kein CSS/JS kann den echten Eckenradius des Bildschirms auslesen – weder
fuer iPhone 6 (eckig) noch iPhone 17 (stark gerundet) noch die hunderten
Android-Geraete. Fest verdrahtete Werte waeren also auf der Mehrheit der
Geraete falsch.
Trick: env(safe-area-inset-*) ist der einzige verfuegbare Indikator.
Geraete MIT gerundetem Display/Home-Indicator melden dort Werte > 0
(iPhone X..17: unten 34px), eckige Geraete (iPhone 6/SE, iPad, Android
mit Tasten, Desktop) melden 0. Wir rechnen daraus einen weichen Radius –
je runder das Geraet, desto runder das Panel – und deckeln oben und unten
per clamp(), damit nichts entgleist.
Unten bewusst runder als oben (dort ist die Geraeterundung am staerksten
sichtbar, oben ueberdeckt die Statusleiste einen Teil).
WICHTIG – Fallback zuerst: clamp() gibt es erst ab iOS 13.4. Auf aelteren
Geraeten (iPhone 6 bleibt bei iOS 12) wird die zweite Zeile als ungueltig
verworfen und die feste 24px-Regel bleibt stehen. Kein eckiges Panel. */
NACHGESCHAERFT 02.08.2026, mit zwei Aenderungen:
(a) ALLE VIER Ecken haengen jetzt an safe-area-inset-BOTTOM, auch die
oberen. Vorher richteten sich die oberen nach -TOP, und der Wert ist
je nach Betriebsart verschieden: als installierte PWA meldet iOS
oben 0 (die Statusleiste liegt dort ausserhalb der WebView), in der
Capacitor-App dagegen 62. Dieselbe Seite hatte damit auf demselben
Geraet unterschiedlich runde obere Ecken - PWA 20px, App 30px.
-bottom meldet in BEIDEN Betriebsarten denselben Wert (34px) und ist
damit der verlaesslichere Anzeiger fuer "dieses Geraet hat einen
gerundeten Bildschirm".
(b) Die Obergrenzen waren zu niedrig. Ein iPhone hat rund 55px
Eckenradius; das Panel sitzt --gap davon entfernt, passend waeren
also etwa 45px. Gedeckelt war bei 30/34 - sichtbar eckiger als das
Geraet. Jetzt ~40 oben und ~47 unten (bei -bottom = 34px).
Unten bleibt runder als oben: dort ist die Geraeterundung am
staerksten sichtbar, oben ueberdeckt die Statusleiste einen Teil. */
border-radius: 24px;
border-radius:
clamp(20px, calc(16px + env(safe-area-inset-bottom, 0px) * 0.70), 42px)
clamp(20px, calc(16px + env(safe-area-inset-bottom, 0px) * 0.70), 42px)
clamp(22px, calc(18px + env(safe-area-inset-bottom, 0px) * 0.85), 47px)
clamp(22px, calc(18px + env(safe-area-inset-bottom, 0px) * 0.85), 47px);
}
/* Kopfzeile bleibt oben (flex:none) mit dünner Trennlinie, klar getrennt vom
Inhalt (kein Ineinanderlaufen mehr). */
body.has-sidebar:not(.lh-fullscreen):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]) .app-topbar{
flex: none; margin: 0 0 12px; padding-bottom: 12px; border-bottom: 1px solid var(--line);
}
/* Die aktive Screen-Section ist der interne Scroll-Bereich (Balken ausgeblendet). */
body.has-sidebar:not(.lh-fullscreen):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]) .wrap > section[id^="screen-"]{
/* Unten federt die Safe-Area ab: das Panel reicht jetzt bis dicht an den
Bildschirmrand, der Home-Indicator liegt also DARUEBER. Diese Reserve
sorgt dafuer, dass die letzte Zeile trotzdem frei lesbar/tippbar bleibt. */
flex: 1 1 auto; min-height: 0; overflow-y: auto; scrollbar-width: none;
/* KEIN eigenes Gummiband (v2.42.8): Beim Pull-to-Refresh schiebt unser
Skript das ganze Panel nach unten. Ohne diese Zeile federt iOS die
Liste ZUSAETZLICH im Panel durch - Kopfzeile und Inhalt wandern dann
getrennt voneinander, es sieht aus wie zwei Bewegungen uebereinander
(Rueckmeldung 2026-07-26). Jetzt bewegt sich nur das Panel. */
overscroll-behavior-y: none;
padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
}
body.has-sidebar:not(.lh-fullscreen):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]) .wrap > section[id^="screen-"]::-webkit-scrollbar{ display: none; }
/* ---- AUSNAHME: Einstellungen und Admin scrollen NICHT selbst (v2.99.2) ---
BEFUND Murat 02.08.2026: "einstellungen a özel altta o bos yer duruyo" -
unter der Liste klaffte eine Luecke, die zu nichts gehoerte.
URSACHE: Die Regel darueber gibt JEDER Screen-Section ein Polster von
16px + Safe-Area (rund 50px am iPhone). Das ist richtig, SOLANGE die
Section selbst scrollt - dann ist es die Reserve, in die die letzte Zeile
hineinlaufen darf. Genau diese beiden Bildschirme scrollen aber nicht
selbst: `#screen-konto` und `#screen-admin` stehen weiter oben auf
`overflow:hidden`, weil INNEN `#konto-content` bzw. `.adm-main` scrollt
(sonst gaebe es zwei Balken). Fuer sie ist das Polster deshalb kein
Auslauf, sondern eine tote Flaeche am unteren Panelrand, die niemand je
fuellen kann - unabhaengig davon, wie weit man scrollt.
KORREKTUR MEINERSEITS: In v2.99.0 stand hier die Vermutung, der Inhalt
sei ABGESCHNITTEN, und `#konto-content` bekam zusaetzliches Polster.
Das war die falsche Richtung - es hat die Luecke vergroessert. Die
Reserve gehoert an den Ort, der wirklich scrollt, und nur einmal.
WARUM HIER UND NICHT IM 640px-Block: die Luecke entsteht durch diese
Regel, und die gilt ab 899.98px abwaerts. Auf dem Tablet im Hochformat
ist sie genauso da. Ein Fix nur fuer 640px waere kein Fix, sondern eine
zweite Wahrheit. */
body.has-sidebar[data-screen="konto"] .wrap > #screen-konto,
body.has-sidebar[data-screen="admin"] .wrap > #screen-admin{
padding-bottom: 0;
}
body.has-sidebar[data-screen="konto"] #konto-content{
padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}
/* Innere weisse Karten neutralisieren (Panel trägt das Weiss).
DIESELBE REGEL WIE WEITER OBEN – und deshalb auch dieselbe dritte Zeile
für die JS-gezeichnete Wurzelkarte des Erklärblatts. Wer nur eine der
beiden Stellen ändert, bekommt die Box in der anderen Fenstergröße
zurück; die ausführliche Begründung steht bei der ersten Fassung
(dort auch, warum Pinnwand, Förderung, Fehlzeiten und Blauer Brief seit
v2.863.0 dazugehören). */
body.has-sidebar:not(.lh-fullscreen) .wrap > section.card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #erklaerblatt-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #pwh-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #foerder-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #fehlzeiten-content > .card,
body.has-sidebar:not(.lh-fullscreen) .wrap > section > #blauerbrief-content > .card{
background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0; margin: 0;
}
.app-topbar .at-menu{
display:flex; align-items:center; justify-content:center; flex:none;
width:40px; height:40px; border-radius:12px; cursor:pointer;
appearance:none; border:none; background:rgba(127,127,127,.08); color:var(--ink);
}
.app-topbar .at-menu:hover{ background:rgba(127,127,127,.16); }
.app-topbar .at-menu svg{ width:21px; height:21px; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.app-topbar .at-title{ font-size:clamp(17px,5vw,21px); }
/* Begrüßung mobil ebenfalls einzeilig halten (sonst kürzt sie neben dem
Profilbild nicht, weil die Zwei-Klassen-Regel groesser bleibt). */
.app-topbar .at-title.at-title-hello{ font-size:clamp(16px,4.6vw,22px); }
/* Drawer + Overlay */
/* ===== DIE SCHUBLADE IST GLAS (v2.646.0) ===============================
HIER hat das Milchglas seinen eigentlichen Sinn: die Schublade liegt
UEBER dem Bildschirm, also hat blur etwas zu unschaerfen - genau das
Bild der WhatsApp-Leiste, die den Auftrag ausgeloest hat.
Deckkraft .80 statt .46 wie am Rechner, und das ist keine Willkuer: hier
steht Text ueber wechselndem Inhalt und muss lesbar bleiben. Der
abdunkelnde Vorhang (#sb-overlay, .42) hilft zusaetzlich.
Der Rand rechts bleibt: er trennt die Schublade vom Inhalt, den sie
ueberdeckt - am Rechner gibt es diese Kante nicht zu trennen. */
body.has-sidebar #app-sidebar{
display:flex; flex-direction:column; position:fixed; top:0; bottom:0; left:0; z-index:9500;
width:min(84vw,300px); background:var(--glas-schublade);
border:none; border-right:1px solid var(--line); border-radius:0 20px 20px 0;
box-shadow:0 12px 40px rgba(27,34,48,.22);
padding:calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom));
transform:translateX(-104%); transition:transform .26s cubic-bezier(.4,0,.2,1);
overflow:hidden;
/* ===== WEICHE TIEFE, ABER LEISER (2026-08-15) =====================
Die Schublade steht auf --card, also auf WEISS – und auf Weiss ist der
helle Anteil des Schattenpaars per Definition unsichtbar. Bliebe der
Desktop-Wert stehen, wirkte nur noch die dunkle Haelfte, und aus der
weichen Mulde wuerde ein einseitiger Schmutzrand.
Deshalb hier: heller Anteil aus, dunkler auf zwei Drittel. Das ergibt
auf Weiss eine ruhige Vertiefung statt eines Schattens. Die REGELN
darueber bleiben unveraendert – geaendert wird nur der Betrag, an
genau einer Stelle. */
--sb-tief: rgba(15,23,42,.07);
--sb-hoch: rgba(255,255,255,0);
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
body.has-sidebar #app-sidebar{ background:var(--glas-schublade-fest); }
}
/* DAS FILTER LAEUFT NUR, WENN DIE SCHUBLADE OFFEN IST (v2.647.1).
Geschlossen steht sie mit `translateX(-104%)` neben dem Bildschirm - sie
ist nicht weg, sie ist nur verschoben. Ein backdrop-filter an der
Grundregel haelt dort eine Ebene, die nie jemand sieht, und laesst sie
bei jedem Bild mitrechnen. Am Telefon ist das Akku ohne Gegenwert. */
body.has-sidebar.drawer-open #app-sidebar{
transform:translateX(0);
-webkit-backdrop-filter:var(--glas-schliff); backdrop-filter:var(--glas-schliff);
}
#sb-overlay{
display:block;
position:fixed; inset:0; z-index:9400; background:rgba(0,0,0,.42);
opacity:0; pointer-events:none; transition:opacity .22s;
}
body.drawer-open #sb-overlay{ opacity:1; pointer-events:auto; }
/* Im Drawer immer die volle (ausgeklappte) Darstellung — Text sichtbar. */
body.has-sidebar #app-sidebar .sb-item{ flex-direction:row; gap:12px; padding:11px 12px; }
body.has-sidebar #app-sidebar .sb-item .sb-label{ font-size:15px; }
body.has-sidebar #app-sidebar .sb-item .sb-label-full{ display:block; }
body.has-sidebar #app-sidebar .sb-item .sb-label-short{ display:none; }
body.has-sidebar #app-sidebar .sb-group{ font-size:10.5px; padding:16px 10px 6px; }
body.has-sidebar #app-sidebar .sb-group::after{ display:none; }
body.has-sidebar #app-sidebar .sb-toggle{ display:none; }
body.has-sidebar #app-sidebar .sb-top{ flex-direction:row; gap:10px; padding:2px 4px 12px; }
body.has-sidebar #app-sidebar .sb-logo-mark{ display:none; }
body.has-sidebar #app-sidebar .sb-logo-full{ display:block; }
body.has-sidebar .wrap{ padding-left:calc(16px + env(safe-area-inset-left)); }
/* Auf der Schulseite laufen breite Verwaltungslisten - dort geben Shell
und Karte ihre Raender ab (Ansage Murat 06.09.2026, „bi yürü yer var").
Nur diese eine Seite; die uebrigen Bildschirme bleiben, wie sie sind. */
body.has-sidebar[data-screen="schule"] .wrap{
padding-left:calc(6px + env(safe-area-inset-left));
padding-right:calc(6px + env(safe-area-inset-right)); }
/* Profilkopf im Drawer (Foto + Name), oben — Tap öffnet Konto verwalten. */
#app-sidebar .sb-profile{
display:flex; align-items:center; gap:11px; width:100%;
appearance:none; border:none; background:transparent; cursor:pointer;
padding:10px 8px; border-radius:14px; text-align:left; margin-bottom:4px;
transition:background .13s;
}
#app-sidebar .sb-profile:hover{ background:rgba(127,127,127,.08); }
#app-sidebar .sb-prof-av{ width:44px; height:44px; border-radius:50%; flex:none;
display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700;
font-size:16px; background-size:cover; background-position:center; }
/* display:block, damit Name und Schule UNTEREINANDER stehen (sonst kleben
sie in einer Zeile zusammen: "AdminFrida-Levy-…"). */
#app-sidebar .sb-prof-name{ display:block; font-weight:700; font-size:15px; color:var(--ink); line-height:1.15;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#app-sidebar .sb-prof-sub{ display:block; font-size:12px; color:var(--muted); margin-top:2px;
overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
/* Desktop: Profil-Kopf im Drawer nicht anzeigen (dort sitzt Profil oben rechts). */
@media (min-width:900px){ #app-sidebar .sb-profile{ display:none; } }
/* ===== DIE SCHWEBENDE KAPSEL – Telefon und Tablet hochkant (v2.921.0) =====
Auftrag Murat 01.10.2026: „aşağıda yüzen cam menü … sayfa arkada akacak",
„üst tarafı açmak çok önemli", „şekil damla olsun, yazılar sadece
seçildiğinde, minimalist". Wie sie arbeitet und warum die Kopfzeile in den
Bildschirm zieht: index-app.js, „DIE SCHWEBENDE KAPSEL".
NUR FUER DIE LEHRKRAFT (`body.ml-an`, gesetzt von mlAnwenden). Das Kind
im Arbeitsplatz behaelt seine Schublade und den Menueknopf - deshalb
haengt hier alles an `ml-an` und nicht an der Breite allein.
⛔ ZWEI FLAECHEN MIT backdrop-filter, und beide liegen wie die Schublade
UEBER rollendem Inhalt: die Kapsel (klein, 60 px hoch) und das Blatt
„Alles" (nur offen). Die Lehre von v2.647.0 - kein Filter auf einer
bildschirmhohen Flaeche - bleibt unberuehrt. Der Huegel ueber dem
gewaehlten Platz hat KEIN Filter: Safari schneidet backdrop-filter nicht
an clip-path ab (im Prototyp ein Rechteck um die ganze Leiste); die
Unschaerfe liegt deshalb an `.ml-glas` mit border-radius.
⛔ KEINE FESTE FARBE: Glas, Kante und Schatten kommen aus den --glas-*
und --sb-tief-Variablen, der Tropfen aus dem Akzent-Abschnitt am
Dateiende (#ml-leiste .ml-blase).
VERBUNDEN MIT: qa/unit/test_mobil_kapsel.py, qa/unit/test_seitenleiste.py
(Zahl der backdrop-filter-Stellen). */
/* Dieselbe Kapsel fuer Telefon und Rechner: die Form, Tropfen und Federn
bleiben identisch. Desktop dreht nur die Laengsachse; keine rollende Liste. */
.ml-logo{ display:none; }
#ml-leiste{
/* Klareres Glas: beide SVG-Kanten und der gefilterte Streifen lesen
denselben Stoff. Dunkel-/Fotowerte im Cockpit-Abschnitt gehen vor. */
--glas-kapsel:rgba(255,255,255,.28);
--glas-licht:rgba(255,255,255,.74);
--muted:color-mix(in srgb,var(--ink) 85%,var(--card));
--ml-oben:var(--glas-kapsel); --ml-unten:var(--glas-kapsel);
--ml-kante:var(--glas-kante); --glas-schliff:blur(12px) saturate(160%);
}
@supports (color:color-mix(in srgb, white, transparent)){
#ml-leiste{
--ml-oben:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 6%, var(--glas-kapsel));
--ml-unten:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 12%, var(--glas-kapsel));
--ml-kante:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 16%, var(--glas-kante));
}
}
#ml-leiste .ml-glas{ position:absolute; left:0; right:0; bottom:0; height:60px; border-radius:30px;
background:linear-gradient(0deg, var(--glas-licht), transparent 32%, transparent 68%, var(--glas-licht));
box-shadow:inset 0 0 2px var(--glas-licht);
-webkit-backdrop-filter:var(--glas-schliff); backdrop-filter:var(--glas-schliff); }
#ml-leiste .ml-form{ position:absolute; inset:0; width:100%; height:100%; overflow:visible;
pointer-events:none; filter:drop-shadow(0 0 8px var(--sb-tief)); }
#ml-leiste .ml-flaeche{ fill:var(--glas-kapsel); fill:url(#ml-glas-ton); stroke:var(--ml-kante); stroke-width:1; }
#ml-leiste .ml-ton-oben{ stop-color:var(--ml-oben); }
#ml-leiste .ml-ton-unten{ stop-color:var(--ml-unten); }
#ml-leiste .ml-licht{ fill:none; stroke:var(--glas-licht); stroke-width:1.6; }
html[data-theme="dark"] #ml-leiste{ --glas-kapsel:var(--glas-dunkel-kapsel); --glas-licht:var(--glas-dunkel-licht); }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
#ml-leiste .ml-flaeche{ fill:var(--glas-schublade-fest); }
}
#ml-leiste .ml-plaetze{ position:absolute; left:6px; right:6px; bottom:0; height:60px; display:flex; }
#ml-leiste .ml-platz{ flex:1 1 0; min-width:0; position:relative; padding:0; border:0; margin:0;
background:transparent; cursor:pointer; pointer-events:auto; color:var(--muted);
display:flex; flex-direction:column; align-items:center; justify-content:center; }
#ml-leiste .ml-platz:focus-visible{ outline:2px solid var(--brand); outline-offset:-4px; border-radius:16px; }
#ml-leiste .ml-platz > svg{ width:22px; height:22px; flex:none; fill:none; stroke:currentColor;
stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
transition:transform .34s cubic-bezier(.34,1.4,.5,1), opacity .2s ease; }
/* Der Name steht NUR unter dem gewaehlten Platz, klein - „minimalist". */
#ml-leiste .ml-name{ position:absolute; bottom:7px; left:50%; transform:translate(-50%, 4px);
font-size:10px; font-weight:700; letter-spacing:.01em; white-space:nowrap; color:var(--ink);
opacity:0; transition:opacity .2s ease, transform .3s cubic-bezier(.34,1.4,.5,1); }
#ml-leiste .ml-platz.an .ml-name{ opacity:1; transform:translate(-50%, 0); }
#ml-leiste .ml-platz.an > svg,
#ml-leiste .ml-platz.an > .ml-av{ opacity:0; transform:translateY(-20px) scale(.6); }
#ml-leiste .ml-av{ width:27px; height:27px; border-radius:50%; flex:none; display:grid; place-items:center;
color:var(--on-brand); font-size:10.5px; font-weight:800; overflow:hidden;
transition:transform .34s cubic-bezier(.34,1.4,.5,1), opacity .2s ease; }
#ml-leiste .ml-zahl{ position:absolute; top:7px; left:calc(50% + 4px); min-width:17px; height:17px;
padding:0 4px; border-radius:9px; background:var(--bad); color:var(--on-brand);
font-size:10px; font-weight:800; line-height:13px; text-align:center;
border:2px solid var(--card); box-sizing:border-box; }
#ml-leiste .ml-zahl[hidden]{ display:none; }
#ml-leiste .ml-platz.an .ml-zahl{ opacity:0; }
#ml-leiste .ml-blase{ position:absolute; top:0; left:0; width:44px; height:44px; border-radius:50%;
display:grid; place-items:center; color:var(--on-brand); pointer-events:none; z-index:2;
box-shadow:0 0 0 4px var(--ml-ring, var(--shell-bg, var(--paper))), 0 0 12px -4px var(--sb-tief),
inset 0 0 1px var(--glas-licht);
will-change:transform; transition:opacity .2s ease; }
#ml-leiste.ohne-wahl .ml-blase{ opacity:0; }
#ml-leiste .ml-blase > svg{ width:21px; height:21px; fill:none; stroke:currentColor; stroke-width:1.83;
stroke-linecap:round; stroke-linejoin:round; }
#ml-leiste .ml-blase > .ml-av{ width:44px; height:44px; font-size:14px; }
#ml-leiste .ml-blase.tausch > *{ transform:scale(.4) rotate(-20deg); opacity:0; }
#ml-leiste .ml-blase > *{ transition:transform .16s ease, opacity .16s ease; }
@media (min-width:900px){
body.sb-fest.has-sidebar:not(.lh-fullscreen){ padding-left:124px; }
body.sb-fest.has-sidebar:not(.lh-fullscreen) #app-sidebar{ display:none; }
body.sb-fest.ml-an.has-sidebar #ml-leiste{
display:block; position:fixed; z-index:590; left:var(--sb-leiste-links,10px); top:50%;
width:76px; height:min(720px, calc(var(--vh100) - 124px)); transform:translateY(-50%);
pointer-events:none; -webkit-tap-highlight-color:transparent;
}
body.sb-fest #ml-leiste .ml-glas{ left:0; right:auto; top:0; bottom:0; width:60px; height:100%; }
body.sb-fest #ml-leiste .ml-form{ inset:auto; top:0; left:0; width:var(--ml-laenge); height:88px;
transform-origin:0 0; transform:rotate(90deg) translateY(-88px); }
body.sb-fest #ml-leiste .ml-plaetze{ top:6px; bottom:6px; left:0; right:0; height:auto; flex-direction:column; }
body.sb-fest #ml-leiste .ml-platz{ min-height:0; align-items:flex-start; padding-left:16px; }
body.sb-fest #ml-leiste .ml-platz > svg{ width:28px; height:28px; stroke-width:1.65; }
body.sb-fest #ml-leiste .ml-platz > .ml-av{ width:28px; height:28px; }
body.sb-fest #ml-leiste .ml-platz.an > svg,
body.sb-fest #ml-leiste .ml-platz.an > .ml-av{ transform:translateX(8px) scale(.6); }
body.sb-fest #ml-leiste .ml-name{ left:44px; top:calc(50% + 28px); bottom:auto; font-size:9px; line-height:12px; z-index:3; }
body.sb-fest #ml-leiste .ml-blase > svg{ width:26px; height:26px; stroke-width:1.65; }
body.sb-fest #ml-leiste .ml-zahl{ top:calc(50% - 22px); right:auto; left:34px; }
body.sb-fest.has-sidebar:not(.lh-fullscreen) .app-topbar #authbar,
body.sb-fest .app-topbar .at-menu{ display:none; }
body.sb-fest .app-topbar #page-title:not(.at-title-hello):not(:has(.at-kopf)){ display:none; }
body.sb-fest.has-sidebar:not(.lh-fullscreen) .app-topbar:not(:has(.at-title-hello, .at-kopf, #kbx-tb, #kal-tb, #kal-bar, #st-tb, #ss-tabs-host)),
body.sb-fest.has-sidebar[data-screen="cockpit"]:not(.lh-fullscreen) .app-topbar{ display:none; }
body.sb-fest.has-sidebar:not(.lh-fullscreen) .app-topbar{ border-bottom:0; padding-bottom:0; margin-bottom:0; min-height:0; }
body.sb-fest.has-sidebar[data-screen="upload"]:not(.lh-fullscreen) .app-topbar{ display:none; }
body.sb-fest.has-sidebar[data-screen="upload"] #mat-greeting{ display:block; text-align:center; }
body.sb-fest .ck2-uhr .ck2-gruss{ display:block; text-align:center; margin-bottom:10px; font-size:clamp(16px,1.7vw,24px); }
body.sb-fest.ml-an #ml-schleier{ display:block; position:fixed; inset:0; z-index:9059;
background:transparent; opacity:0; pointer-events:none; }
body.sb-fest.ml-an.ml-alles-auf #ml-schleier{ opacity:1; pointer-events:auto; }
#ml-alles{ --ma-oben:var(--glas-schublade); --ma-unten:var(--glas-schublade);
--ma-kante:var(--glas-kante); --ma-innen:var(--card); }
@supports (color:color-mix(in srgb, white, transparent)){
#ml-alles{
--ma-oben:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 12%, var(--glas-schublade));
--ma-unten:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 20%, var(--glas-schublade));
--ma-kante:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 28%, var(--glas-kante));
--ma-innen:color-mix(in srgb, var(--card) 78%, transparent);
}
}
body.sb-fest.ml-an #ml-alles{ display:flex; flex-direction:column; gap:10px; position:fixed; z-index:9060;
left:var(--sb-blatt-links,112px); bottom:24px; width:min(400px, calc(100vw - 136px));
max-height:calc(var(--vh100) - 48px); overflow-y:auto; overscroll-behavior:contain;
scrollbar-width:none; padding:14px; border-radius:26px;
background:linear-gradient(145deg, var(--ma-oben), var(--ma-unten)); border:1px solid var(--ma-kante);
box-shadow:0 18px 40px -12px var(--sb-tief), inset 0 1px 0 var(--glas-licht);
transform:translateX(-12px) scale(.97); transform-origin:0 100%; opacity:0; pointer-events:none;
transition:transform .25s var(--sb-weich), opacity .2s ease; }
body.sb-fest.ml-an.ml-alles-auf #ml-alles{ transform:none; opacity:1; pointer-events:auto; }
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
body.ml-an #ml-alles{ background:var(--glas-schublade-fest); }
}
#ml-alles::-webkit-scrollbar{ display:none; }
#ml-alles .ml-identitaet{ border-radius:20px; background:var(--ma-innen);
border:1px solid var(--glas-kante); overflow:hidden; flex-shrink:0; }
#ml-alles .ml-zeile{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
padding:12px; border:0; border-radius:0; background:transparent; color:var(--ink); font:inherit; }
#ml-alles .ml-zeile > svg{ width:18px; height:18px; flex:none; margin-left:auto; fill:none; stroke:var(--muted);
stroke-width:2.13; stroke-linecap:round; stroke-linejoin:round; }
#ml-alles .ml-ich-av{ width:50px; height:50px; border-radius:50%; flex:none; display:grid; place-items:center;
color:var(--on-brand); font-weight:800; font-size:15px; overflow:hidden; }
#ml-alles .ml-zeile-tx{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
#ml-alles .ml-zeile-tx b{ font-size:16px; letter-spacing:-.02em; line-height:1.3;
white-space:normal; overflow-wrap:anywhere; }
#ml-alles .ml-zeile-tx small{ font-size:12.5px; color:var(--muted); }
#ml-alles .ml-schule{ border-top:1px solid var(--glas-kante); padding:11px 12px; }
#ml-alles .ml-schule .ml-zeile-tx b{ font-size:13.5px; letter-spacing:0; }
#ml-alles .ml-schule .ml-zeile-tx small{ font-size:11.5px; }
#ml-alles .ml-schullogo{ position:relative; flex:none; display:flex; }
#ml-alles .ml-schullogo .av-school-logo{ width:32px; height:32px; }
#ml-alles .ml-raster{ flex-shrink:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
#ml-alles .ml-kachel{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;
padding:8px 2px; border:0; border-radius:16px; background:transparent; cursor:pointer;
color:var(--ink); font:inherit; font-size:11.5px; font-weight:700; }
#ml-alles .ml-kachel i{ width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
background:var(--ma-innen); color:var(--ink); box-shadow:inset 0 1px 0 var(--glas-licht), 0 2px 6px -3px var(--sb-tief); }
#ml-alles .ml-kachel i svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75;
stroke-linecap:round; stroke-linejoin:round; }
#ml-alles .ml-kachel span{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ml-alles .ml-robi .robi-leiste, #ml-alles .ml-robi .robi-leiste-figur{ width:40px; height:40px; }
#ml-alles .ml-liste{ display:flex; flex-direction:column; flex-shrink:0; border-radius:18px;
background:var(--ma-innen); border:1px solid var(--glas-kante); overflow:hidden; }
#ml-alles .ml-liste button{ display:flex; align-items:center; gap:12px; min-height:46px;
text-align:left; padding:11px 14px; border:0; border-top:1px solid var(--glas-kante);
background:transparent; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); }
#ml-alles .ml-aktionsicon{ width:22px; flex:none; display:grid; place-items:center; color:var(--muted); }
#ml-alles .ml-aktionsicon svg{ width:20px; height:20px; }
#ml-alles .ml-raus .ml-aktionsicon{ color:inherit; }
#ml-alles .ml-zeile:hover, #ml-alles .ml-liste button:hover{ background:var(--glas-karte); }
#ml-alles .ml-liste button:first-child{ border-top:0; }
#ml-alles .ml-liste .ml-raus{ color:var(--bad); }
#ml-alles button:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
}
@media (min-width:900px) and (max-height:540px){
body.sb-fest.ml-an.has-sidebar #ml-leiste{ height:calc(var(--vh100) - 84px); top:calc(50% + 18px); }
body.sb-fest #ml-leiste .ml-logo{ top:-38px; height:30px; }
body.sb-fest #ml-leiste .ml-logo img{ height:24px; }
}
body.ml-an.ml-alles-auf #ml-alles{
-webkit-backdrop-filter:var(--glas-schliff); backdrop-filter:var(--glas-schliff);
}
#ml-leiste, #ml-schleier, #ml-alles{ display:none; }
@media (max-width:899.98px){
body.ml-an #app-sidebar, body.ml-an #sb-overlay{ display:none !important; }
body.ml-an .app-topbar .at-menu,
body.ml-an .app-topbar #authbar{ display:none; }
/* Im Bildschirm (mlKopfPlatzieren) ist die Kopfzeile nur noch Titel und
rollt mit weg - ohne Linie darunter, sie trennt nichts mehr ab. */
/* `.wrap >` ist noetig: die feste Shell darueber setzt Linie und Polster
mit drei :not() - ohne die zusaetzliche Stufe gewaenne sie. */
body.ml-an.has-sidebar:not(.lh-fullscreen) .wrap > section[id^="screen-"] > .app-topbar{
margin:0 0 10px; padding-bottom:0; border-bottom:none; min-height:0;
}
body.ml-an.has-sidebar #ml-leiste{
display:block; position:fixed; z-index:590;
left:50%; bottom:calc(8px + env(safe-area-inset-bottom, 0px));
width:min(calc(100% - 24px), 440px); height:88px;
transform:translateX(-50%); pointer-events:none;
transition:transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease;
-webkit-tap-highlight-color:transparent;
}
/* Die Einstellungen tragen ihren eigenen Kopf („✕ Einstellungen") und rollen
nicht selbst - der Seitentitel stuende dort doppelt und fest. */
body.ml-an.has-sidebar[data-screen="konto"] .app-topbar{ display:none; }
/* Waehrend getippt wird, tritt die Kapsel zurueck (ml-tippen, index-app.js). */
body.ml-an.ml-tippen #ml-leiste{ transform:translate(-50%, 130%); opacity:0; }
/* Die Nachrichten liegen am Telefon als eigenes Blatt (z-index 9000) ueber
der App. In der Liste bleibt die Kapsel darueber erreichbar; im
geoeffneten Gespraech gehoert der untere Rand dem Eingabefeld. */
body.ml-an[data-screen="nachrichten"] #ml-leiste{ z-index:9050; }
/* Das Blatt „Alles" und sein Schleier muessen mit hinauf - sonst oeffnet
das Profilbild auf den Nachrichten ein Blatt UNTER der Zentrale (Befund
Murat 01.10.2026: „nachrichten acikken profil acamiyorum"). */
body.ml-an[data-screen="nachrichten"] #ml-alles{ z-index:9049; }
body.ml-an[data-screen="nachrichten"] #ml-schleier{ z-index:9048; }
/* KEINE SEITENTITEL AM TELEFON (v2.922.0, Murat 01.10.2026: „basliklara
ihtiyac yok … onlarin yerine ikinci satira düsen kisimlari oraya
kaldiralim"). Welcher Bereich offen ist, sagt der Name unter dem
Tropfen. Es bleibt, was in der Zeile ARBEITET: die Begruessung, der
Schulname mit Jahr (.at-kopf) und die Leisten, die Bildschirme dort
einhaengen (Klasse, Kalender, Sprechtag/Studio, Schulverwaltung). Eine
Kopfzeile, in der dann nichts mehr steht, faellt ganz weg. */
body.ml-an .app-topbar #page-title:not(.at-title-hello):not(:has(.at-kopf)){ display:none; }
body.ml-an .app-topbar:not(:has(#page-title.at-title-hello, .at-kopf, #kal-tb, #kal-bar, #st-tb, #ss-tabs-host)){
display:none; }
/* `#kbx-tb` (Klassen-Chip) zaehlt dort nicht mit: unter der Kapsel steht
der Chip in der Karte neben dem Schuljahr (Abschnitt Klassen unten). */
/* Nur AUF den Nachrichten: `.chat` bleibt an der Zentrale haengen, wenn
man sie verlaesst - ohne den Bildschirm-Bezug verschwaende die Kapsel
danach ueberall (gemessen im Pruefstand). */
/* Weggetreten heisst auch: nicht mehr antippbar. */
body.ml-an.ml-tippen #ml-leiste .ml-platz{ pointer-events:none; }
body.ml-an[data-screen="nachrichten"] .pf-convs{
padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
/* Glas braucht eine sichtbare Toennung auch ueber weissem Inhalt.
SVG-Verlauf folgt der Tropfenform; nur die kleine Kapsel wird unscharf.
Ohne color-mix bleiben die vorhandenen neutralen Glasfarben erhalten. */
/* Das Blatt „Alles" - dasselbe Glas, ueber der Kapsel. */
body.ml-an #ml-schleier{ display:block; position:fixed; inset:0; z-index:588;
/* Nur der Tipp ausserhalb schliesst das Blatt. Kein dunkler Hintergrund:
Safari/iOS-PWA kann die Farbe eines festen Overlays in die Statusleiste
uebernehmen (WebKit 302272/305546). Das Glasblatt traegt seinen Schatten
selbst; eine bildschirmhohe Abdunklung faerbt oben die Schale um. */
background:transparent; opacity:0; pointer-events:none; transition:opacity .2s ease; }
body.ml-an.ml-alles-auf #ml-schleier{ opacity:1; pointer-events:auto; }
/* Das Blatt bleibt ueber Weiss als eigene Flaeche erkennbar. Die Toene
folgen dem Akzent; ohne color-mix bleiben die bisherigen Glasfarben. */
#ml-alles{ --ma-oben:var(--glas-schublade); --ma-unten:var(--glas-schublade);
--ma-kante:var(--glas-kante); --ma-innen:var(--card); }
@supports (color:color-mix(in srgb, white, transparent)){
#ml-alles{
--ma-oben:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 12%, var(--glas-schublade));
--ma-unten:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 20%, var(--glas-schublade));
--ma-kante:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 28%, var(--glas-kante));
--ma-innen:color-mix(in srgb, var(--card) 78%, transparent);
}
}
body.ml-an #ml-alles{ display:flex; flex-direction:column; gap:10px; position:fixed; z-index:589;
left:50%; width:min(calc(100% - 24px), 440px);
bottom:calc(104px + env(safe-area-inset-bottom, 0px));
max-height:calc(var(--vh100) - 140px - env(safe-area-inset-bottom, 0px) - env(safe-area-inset-top, 0px));
overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none;
padding:14px; border-radius:26px;
background:linear-gradient(145deg, var(--ma-oben), var(--ma-unten));
border:1px solid var(--ma-kante);
box-shadow:0 18px 40px -12px var(--sb-tief), 0 3px 10px -4px var(--sb-tief), inset 0 1px 0 var(--glas-licht);
transform:translate(-50%, 16px) scale(.94); transform-origin:90% 100%; opacity:0; pointer-events:none;
transition:transform .32s cubic-bezier(.34,1.3,.5,1), opacity .2s ease; }
body.ml-an.ml-alles-auf #ml-alles{ transform:translate(-50%, 0) scale(1); opacity:1; pointer-events:auto;
}
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
body.ml-an #ml-alles{ background:var(--glas-schublade-fest); }
}
#ml-alles::-webkit-scrollbar{ display:none; }
#ml-alles .ml-identitaet{ border-radius:20px; background:var(--ma-innen);
border:1px solid var(--glas-kante); overflow:hidden; flex-shrink:0; }
#ml-alles .ml-zeile{ display:flex; align-items:center; gap:12px; width:100%; text-align:left; cursor:pointer;
padding:12px; border:0; border-radius:0; background:transparent; color:var(--ink); font:inherit; }
#ml-alles .ml-zeile > svg{ width:18px; height:18px; flex:none; margin-left:auto; fill:none; stroke:var(--muted);
stroke-width:2.13; stroke-linecap:round; stroke-linejoin:round; }
#ml-alles .ml-ich-av{ width:50px; height:50px; border-radius:50%; flex:none; display:grid; place-items:center;
color:var(--on-brand); font-weight:800; font-size:15px; overflow:hidden; }
#ml-alles .ml-zeile-tx{ min-width:0; flex:1; display:flex; flex-direction:column; gap:3px; }
#ml-alles .ml-zeile-tx b{ font-size:16px; letter-spacing:-.02em; line-height:1.3;
white-space:normal; overflow-wrap:anywhere; }
#ml-alles .ml-zeile-tx small{ font-size:12.5px; color:var(--muted); }
#ml-alles .ml-schule{ border-top:1px solid var(--glas-kante); padding:11px 12px; }
#ml-alles .ml-schule .ml-zeile-tx b{ font-size:13.5px; letter-spacing:0; }
#ml-alles .ml-schule .ml-zeile-tx small{ font-size:11.5px; }
#ml-alles .ml-schullogo{ position:relative; flex:none; display:flex; }
#ml-alles .ml-schullogo .av-school-logo{ width:32px; height:32px; }
#ml-alles .ml-raster{ flex-shrink:0; display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:4px; }
#ml-alles .ml-kachel{ display:flex; flex-direction:column; align-items:center; gap:6px; min-width:0;
padding:8px 2px; border:0; border-radius:16px; background:transparent; cursor:pointer;
color:var(--ink); font:inherit; font-size:11.5px; font-weight:700; }
#ml-alles .ml-kachel i{ width:46px; height:46px; border-radius:15px; display:grid; place-items:center;
background:var(--ma-innen); color:var(--ink); box-shadow:inset 0 1px 0 var(--glas-licht), 0 2px 6px -3px var(--sb-tief); }
#ml-alles .ml-kachel i svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75;
stroke-linecap:round; stroke-linejoin:round; }
#ml-alles .ml-kachel span{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#ml-alles .ml-robi .robi-leiste, #ml-alles .ml-robi .robi-leiste-figur{ width:40px; height:40px; }
#ml-alles .ml-liste{ display:flex; flex-direction:column; flex-shrink:0; border-radius:18px;
background:var(--ma-innen); border:1px solid var(--glas-kante); overflow:hidden; }
#ml-alles .ml-liste button{ display:flex; align-items:center; gap:12px; min-height:46px;
text-align:left; padding:11px 14px; border:0; border-top:1px solid var(--glas-kante);
background:transparent; cursor:pointer; font:inherit; font-size:14.5px; font-weight:600; color:var(--ink); }
#ml-alles .ml-aktionsicon{ width:22px; flex:none; display:grid; place-items:center; color:var(--muted); }
#ml-alles .ml-aktionsicon svg{ width:20px; height:20px; }
#ml-alles .ml-raus .ml-aktionsicon{ color:inherit; }
#ml-alles .ml-zeile:hover, #ml-alles .ml-liste button:hover{ background:var(--glas-karte); }
#ml-alles .ml-liste button:first-child{ border-top:0; }
#ml-alles .ml-liste .ml-raus{ color:var(--bad); }
#ml-alles button:focus-visible{ outline:2px solid var(--brand); outline-offset:-2px; }
/* Platz fuer die Kapsel am Ende jedes rollenden Bildschirms - sonst laege
die letzte Zeile unter dem Glas. 104 = 88 Kapsel + 8 Abstand + 8 Luft. */
body.ml-an.has-sidebar:not(.lh-fullscreen):not([data-screen="unterrichtsfaecher"]):not([data-screen="lautlesezeit"]):not([data-screen="nachrichten"]) .wrap > section[id^="screen-"]{
padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px));
}
/* Material ist eine Flex-Spalte. Ein echtes Endstueck bleibt auch in
WebKit scrollbar, wenn dessen Flex-Scrollbox das Endpolster verschluckt. */
body.ml-an.has-sidebar .wrap > #screen-upload{ padding-bottom:0; }
body.ml-an #screen-upload > .komposit{ flex-shrink:0; }
/* Seit v2.925.0 ist dieses Endstück zugleich die UNTERE FEDER der
Mitte (Abschnitt „MITTIG – FÜR ALLE“): es wächst wie die obere
(flex-grow 1), behält aber seine 104 px - gemittelt wird über der
Kapsel-Leiste, nicht hinter ihr. */
body.ml-an #screen-upload::after{ content:""; display:block; width:100%;
flex:1 0 calc(104px + env(safe-area-inset-bottom, 0px)); }
/* Das Fachportal scrollt im iframe. Seine Schale braucht dieselbe sichere
Oberkante; die Reserve unten liegt deshalb IM Portal (ufKapselPlatz). */
body.ml-an.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) .wrap{
position:fixed; top:calc(7px + env(safe-area-inset-top, 0px)); bottom:7px;
left:calc(7px + env(safe-area-inset-left, 0px));
right:calc(7px + env(safe-area-inset-right, 0px));
margin:0; width:auto; height:auto; max-height:none; min-height:0; padding:12px;
display:flex; flex-direction:column; overflow:hidden;
}
body.ml-an.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #screen-unterrichtsfaecher{
padding-top:0; flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
body.ml-an.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #screen-unterrichtsfaecher.hidden{ display:none; }
body.ml-an.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #uf-frame{
flex:1 1 auto; min-height:0; height:auto !important;
}
body.ml-an.has-sidebar[data-screen="konto"] .wrap > #screen-konto{ padding-bottom:0; }
body.ml-an.has-sidebar[data-screen="konto"] #konto-content,
body.ml-an.has-sidebar[data-kset="main"][data-screen="konto"] .kset-nav{
padding-bottom:calc(104px + env(safe-area-inset-bottom, 0px));
}
/* Robi schwebt ueber der Kapsel, nicht auf ihr (Ort ohne eigene Wahl) -
und tritt zurueck, solange das Blatt offen ist, sonst saesse er darauf. */
body.ml-an .asst-mk{ bottom:calc(104px + env(safe-area-inset-bottom, 0px)); }
body.ml-an.ml-alles-auf .asst-mk{ opacity:0; pointer-events:none; }
body.ml-an #toast-wrap{ bottom:calc(108px + env(safe-area-inset-bottom, 0px)); }
}
/* DAS GESPRAECH AM TELEFON gehoert dem Eingabefeld (bis 720 px liegt die
Zentrale als eigenes Blatt ueber der App, mit Zurueck-Pfeil oben). */
@media (max-width:720px){
body.ml-an[data-screen="nachrichten"]:has(.pf-shell.chat) #ml-leiste{ transform:translate(-50%, 130%); opacity:0; }
body.ml-an[data-screen="nachrichten"]:has(.pf-shell.chat) #ml-leiste .ml-platz{ pointer-events:none; }
}
/* DIE LISTE DER NACHRICHTEN BRAUCHT KEINEN ZURUECK-PFEIL (Murat 01.10.2026:
„mesajlarin oldugu kisim icin geriye ihtiyac yok … tek ihtiyac bir mesaj
acilinca geri dönülebilmesi"). Die Kapsel steht darunter; zurueck muss man
nur aus dem Gespraech, und dessen Kopf behaelt seinen Pfeil. Der Titel
„Nachrichten" faellt mit - wie jeder Seitentitel am Telefon. Die Suche
rueckt hinauf und nimmt dafuer den Abstand zur Statusleiste. */
@media (max-width:720px){
body.ml-an .pf-mobiletop{ display:none; }
body.ml-an .pf-left .pf-searchrow{ padding-top:calc(10px + env(safe-area-inset-top, 0px)); }
}
/* DIE BEGRUESSUNG STEHT AM TELEFON NEBEN DER UHR (v2.922.0, Befund Murat am
iPhone: allein an der gerundeten Panelkante „komik duruyo"). Links der
Spruch, zwei bis drei Zeilen, rechts Datum, Uhr und Stoppuhr - ohne neuen
Wrapper, das Raster stellt nur um. Die Kopfzeile des Cockpits faellt am
Telefon weg; am Tablet und Rechner bleibt alles, wie es war. */
.ck2-gruss{ display:none; }
@media (max-width:640px){
body.ml-an[data-screen="cockpit"] .app-topbar{ display:none; }
body.ml-an .ck2-card.ck2-uhr{
display:grid; grid-template-columns:minmax(0,1fr) auto;
grid-template-areas:"gruss datum" "gruss zeit" "gruss timer";
align-items:center; column-gap:14px; row-gap:1px; text-align:center; padding:4px 0 6px; }
body.ml-an .ck2-uhr .ck2-gruss{ display:block; grid-area:gruss; text-align:left;
font-size:clamp(17px, 5.2vw, 21px); font-weight:800; line-height:1.18; letter-spacing:-.02em;
color:var(--ink); overflow-wrap:anywhere; }
/* Datum, Uhr und Timer sind in IHRER rechten Spalte gemeinsam zentriert. */
body.ml-an .ck2-uhr .ckb-date{ grid-area:datum; justify-self:center; }
body.ml-an .ck2-uhr .ck-uhr-zeit{ grid-area:zeit; justify-self:center; font-size:28px; }
body.ml-an .ck2-uhr .ck-uhr-timer{ grid-area:timer; justify-self:center; }
/* KLASSEN AM TELEFON (v2.922.0, Befund Murat am iPhone):
1. „schuljahr kismini yukari tasi alt satirda biraz daha cok menü göster":
Klasse und Schuljahr stehen oben nebeneinander in der Karte, die
Aktionen bekommen die zweite Zeile ganz. Der Chip kommt dafuer aus der
Kopfzeile zurueck (`.kbx-head-ck`) - die gibt es am Telefon nicht mehr.
2. In der vollen Zeile stehen jetzt auch Fehltage, Gruppen und Zufall
(`.kbx-nurbreit`). Dafuer verschwinden genau diese Eintraege aus dem
Schubfach (`.kbv-nurschmal`) - nie an beiden Stellen zugleich
(qa/unit/test_halbjahr_waehler.py).
3. „fachlarda … cocuk isimlerini kesiyor … genel görünümde bunu
göstermeyelim": die Faecher-Spalten fallen weg, der Name bekommt die
Zeile. Alle Faecher stehen im Profil des Kindes. */
body.ml-an #kbx-tb{ display:none; }
body.ml-an .kbx-head{ flex-wrap:wrap; overflow-x:visible; row-gap:var(--s-2); }
body.ml-an .kbx-head-ck{ display:flex; flex:none; }
body.ml-an .kbx-head .kbx-acts{ flex:1 0 100%; order:3; margin-left:0; justify-content:flex-end;
overflow-x:auto; scrollbar-width:none; }
/* Auge = Zustand links, die Werkzeuge rechts; alle vertikal mittig. */
body.ml-an .kbx-head .kbx-acts{ align-items:center; }
body.ml-an .kbx-head .kbx-acts > .kbx-auge{ margin-right:auto; flex:none; }
body.ml-an .kbx-head .kbx-acts::-webkit-scrollbar{ display:none; }
body.ml-an .kbx-act.kbx-nurbreit{ display:inline-flex; }
body.ml-an .kbv-item.kbv-nurschmal{ display:none; }
body.ml-an .kbx-table .kbx-cfach,
body.ml-an .kbx-table .kbx-cplus{ display:none; }
}
/* AM TABLET HOCHKANT stehen Liste und Gespraech nebeneinander IM Panel, ohne
Zurueck-Pfeil - die Kapsel ist dort der einzige Weg hinaus und bleibt.
Die Zentrale endet deshalb ueber ihr. */
@media (min-width:721px) and (max-width:899.98px){
body.ml-an[data-screen="nachrichten"] #pf-shell{ margin-bottom:calc(96px + env(safe-area-inset-bottom, 0px)); }
}
/* Ab 640 px hat die Kapsel neun Plaetze und wird breiter. */
@media (min-width:640px) and (max-width:899.98px){
body.ml-an.has-sidebar #ml-leiste, body.ml-an #ml-alles{ width:min(calc(100% - 48px), 600px); }
}
@media (max-width:899.98px) and (prefers-reduced-motion: reduce){
#ml-leiste, #ml-leiste *, #ml-alles, #ml-schleier{ transition:none !important; }
}
/* ===== PINNWÄNDE: Ordner-Übersicht (App-Tab) =========================
GEBAUT WIE DAS REGAL IM BLATT-STUDIO (v2.910.0, Befund Murat 01.10.2026:
„burası da ayrı bir dünya gibi"). Bis v2.908.0 sprach diese Seite eine
eigene Sprache: Suchbalken ueber die volle Breite, blauer „Neu"-Knopf,
roter „Papierkorb", Ordner mit dickem Farbrand, Pinnwaende in zufaelligen
Pastellfarben mit einem Kreis in der Ecke, Fenster als weisse Kaesten mit
festen Farben. Jetzt dieselben Bausteine wie im Blatt-Studio:
- die Pille rechts (.pwh-pille) mit DENSELBEN Knoepfen .bl-u-knopf
(Fuellung und Zeigen: Akzent-Abschnitt Nr. 11) - die Pille selbst ist
ein eigener Kasten, weil die des Blatt-Studios eine Spitze zum Reiter
hat und von blUnterEinpassen() verschoben wird;
- EIN Raster fuer Ordner und Pinnwaende, jede Kachel mit Bild oben, Name
und Zeile darunter (wie .bl-karte), das Menue „⋮" erst beim Zeigen;
- das Bild einer Pinnwand ist GEZEICHNET: ihre eigene Hintergrundfarbe
(--bg, frueher ignoriert) und ein Zettel je Karte, hoechstens sechs;
- die Fenster sind die der App (.modal-overlay, .modal-card, .kswitch,
.seg) - pwhFenster() in index-app.js.
Farben der Flaechenfarbe: Akzent-Abschnitt Nr. 13. */
.pwh-toolbar{display:flex;align-items:center;gap:10px;margin-bottom:18px;flex-wrap:wrap;}
.pwh-search{display:flex;align-items:center;gap:8px;flex:1 1 220px;max-width:420px;min-width:0;height:38px;
box-sizing:border-box;background:var(--paper);border:1.5px solid transparent;border-radius:12px;
padding:0 8px 0 12px;color:var(--muted);transition:border-color .18s ease,background .18s ease;}
.pwh-search:focus-within{border-color:var(--brand);background:var(--card);}
.pwh-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);padding:0;}
.pwh-search-x{display:flex;align-items:center;justify-content:center;flex:none;width:24px;height:24px;
border:none;border-radius:7px;background:transparent;color:var(--muted);cursor:pointer;padding:0;}
.pwh-search-x:hover{background:var(--line);color:var(--ink);}
.pwh-pille{margin-left:auto;display:inline-flex;align-items:center;gap:2px;padding:4px;flex:none;
background:var(--card);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e-1);}
/* Der Weg zurueck, nur im Ordner. Die Krumen sehen aus wie im Blatt-Studio. */
.pwh-krumen{display:flex;align-items:center;gap:2px;margin:0 0 14px;font-size:13px;}
.pwh-krume{border:0;background:transparent;font:inherit;color:var(--brand);font-weight:600;padding:4px 8px;border-radius:8px;cursor:pointer;}
.pwh-krume:hover{background:var(--brand-soft);}
.pwh-krume.an{color:var(--ink);font-weight:700;cursor:default;}
.pwh-krume.an:hover{background:transparent;}
.pwh-krume-p{display:flex;color:var(--muted);}
.pwh-hint{color:var(--muted);font-size:14px;padding:12px 2px;}
.pwh-leer{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:34px 20px;color:var(--muted);font-size:13px;}
.pwh-leer img{width:100%;max-width:120px;opacity:.85;margin-bottom:8px;}
.pwh-leer b{font-size:14.5px;color:var(--ink);}
/* Die Spalten FUELLEN die Zeile - dieselbe Regel wie .bl-regal (v2.906.0). */
.pwh-raster{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}
.pwh-kachel{position:relative;display:flex;flex-direction:column;cursor:pointer;border-radius:12px;outline:none;}
.pwh-bild{position:relative;aspect-ratio:16 / 10;border-radius:12px;border:1px solid var(--line);overflow:hidden;
box-sizing:border-box;transition:border-color .12s ease,box-shadow .12s ease;}
.pwh-kachel:hover .pwh-bild,.pwh-kachel:focus-visible .pwh-bild{border-color:var(--brand);box-shadow:var(--e-1);}
/* Ordner: dieselbe Kachel, das Bild ist ein Ordner in SEINER Farbe (die hat
die Lehrkraft gewaehlt - sie bleibt, wie im Blatt-Studio). */
.pwh-ordner .pwh-bild{display:grid;place-items:center;background:color-mix(in srgb, var(--fc) 11%, var(--card));}
.pwh-ordner .pwh-bild .ic{width:40%;height:auto;fill:var(--fc);stroke:none;opacity:.92;}
.pwh-kachel.pwh-ordner:hover .pwh-bild,.pwh-kachel.pwh-ordner:focus-visible .pwh-bild{border-color:var(--fc);}
/* Pinnwand: ihre Hintergrundfarbe, ein Zettel je Karte (hoechstens sechs). */
.pwh-brett{background:var(--bg, var(--paper));display:grid;grid-template-columns:repeat(3,1fr);
align-content:start;gap:8%;padding:9% 9%;}
.pwh-brett i{display:block;aspect-ratio:4 / 3;background:var(--card);border-radius:4px;
border-top:3px solid var(--brand);box-shadow:0 1px 2px rgba(20,30,50,.14);}
.pwh-info{padding:8px 2px 0;min-width:0;}
.pwh-name{font-size:13.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pwh-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:3px;font-size:11.5px;color:var(--muted);}
.pwh-frei{display:inline-flex;align-items:center;gap:3px;color:var(--ok-ink);font-weight:700;}
.pwh-mehr{position:absolute;top:6px;right:6px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;
border:0;border-radius:8px;background:var(--card);color:var(--ink);box-shadow:var(--e-1);cursor:pointer;padding:0;
opacity:0;transition:opacity .12s ease;}
.pwh-kachel:hover .pwh-mehr,.pwh-kachel:focus-within .pwh-mehr{opacity:1;}
@media (hover:none){ .pwh-mehr{opacity:1;} }
/* Die Fenster (Neue Pinnwand, Ordner, Papierkorb) - Rahmen aus .modal-*. */
.pwh-fenster .modal-card{max-width:480px;}
.pwh-fenster .modal-head b{font-size:16px;}
.pwh-lbl{display:block;font-weight:700;font-size:13px;color:var(--ink);margin:12px 0 6px;}
.pwh-in{width:100%;box-sizing:border-box;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:var(--fs-md);color:var(--ink);resize:vertical;}
.pwh-seg button{padding:9px 6px;}
.pwh-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:14px;font-size:13.5px;color:var(--ink);cursor:pointer;}
.pwh-toggle > span:first-child{flex:1;}
.pwh-fuss{display:flex;justify-content:flex-end;gap:9px;margin-top:20px;}
.pwh-fuss .btn{width:auto;margin:0;padding:9px 18px;font-size:14px;}
.pwh-sw-row{display:flex;flex-wrap:wrap;gap:9px;}
.pwh-sw{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);cursor:pointer;padding:0;
transition:transform .12s ease, box-shadow .12s ease;}
.pwh-sw:hover{transform:scale(1.08);}
.pwh-sw.keine{background:var(--card);border:2px dashed var(--line);}
.pwh-sw.on{box-shadow:0 0 0 3px var(--card), 0 0 0 5px var(--ink);}
.pwh-trash-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:10px 0 4px;}
.pwh-trash-h:first-child{margin-top:2px;}
.pwh-trash-row{display:flex;align-items:center;gap:10px;padding:8px 2px;border-bottom:1px solid var(--line);}
.pwh-trash-row:last-child{border-bottom:0;}
.pwh-trash-ico{display:flex;flex:none;color:var(--muted);}
.pwh-trash-ordner .ic{fill:color-mix(in srgb, var(--fc) 22%, transparent);stroke:var(--fc);}
.pwh-trash-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pwh-trash-zahl{color:var(--muted);font-weight:600;}
.pwh-trash-leer{padding:18px 4px;text-align:center;font-size:14px;color:var(--muted);}
.pwh-trash-leer.pwh-fehler{color:var(--bad);}
.pwh-restore{flex:none;border:1.5px solid var(--brand);background:var(--card);color:var(--brand);border-radius:9px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;}
.pwh-restore:hover{background:var(--brand-soft);}
.pwh-purge{flex:none;display:inline-flex;align-items:center;border:1.5px solid transparent;background:var(--bad-soft);color:var(--bad-ink);border-radius:9px;padding:5px 7px;cursor:pointer;}
.pwh-purge:hover{background:var(--bad);color:var(--on-brand);}
/* Das Menue „⋮" an einer Kachel - dieselbe Form wie die Menues der Zentrale. */
.pwh-pop{position:absolute;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--e-2);padding:5px;min-width:200px;z-index:80;}
.pwh-pop button{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);padding:9px 10px;border-radius:10px;cursor:pointer;text-align:left;}
.pwh-pop button span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pwh-pop button .ic{color:var(--muted);}
.pwh-pop button:hover{background:var(--paper);}
.pwh-pop button.danger,.pwh-pop button.danger .ic{color:var(--bad-ink);}
.pwh-pop button.danger:hover{background:var(--bad-soft);}
.pwh-pop-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 10px 3px;}
.pwh-pop-div{height:1px;background:var(--line);margin:5px 0;}
/* =====================================================================
SCHULSEITE (#screen-schule) – Umbau 2026-07
WIE: Alle Blöcke der Schulseite haben jetzt echte Klassen statt
Inline-Styles. Grund: die Inline-Grids (`ss-head-grid`, das alte
Bewertungs-Panel) hatten KEINE Media Query – unter 400px blieben sie
zweispaltig und die Kennzahlen-Kacheln rutschten aus dem Bild
("mobilde kutucuklar kaymış", Murat 2026-07). Regel für diese Datei:
jedes mehrspaltige Grid der Schulseite bricht unter 760px auf eine
Spalte, jeder Text darf umbrechen (overflow-wrap), nichts wird
abgeschnitten.
MIT WEM: schulseiteHtml() / ssFunktionenHtml() / ssBewertungHtml() /
svRender() / svTabelleRender() in static/js/index-app.js.
Breite: in der App-Shell KEINE eigene Kappe – die Seite füllt das
Inhaltspanel wie Cockpit/Klassenbuch auch (body.has-sidebar .wrap
ist max-width:none). Nur der Vollbild-Fallback kappt bei 1240px.
===================================================================== */
/* ⛔ DIE SEITENRAENDER GEHOEREN DER TABELLE (Ansage Murat 06.09.2026:
„su tablolari … hepsini genisletmeni istiyorum. yani beyaz sayfa blogunun
saginda solunca bi yürü yer var"). Die Verwaltungslisten sind breiter als
der Bildschirm und scrollen quer - jeder Pixel Polsterung ist eine Spalte
weniger, die man sieht. Die Karte selbst bleibt, nur ihr Innenabstand
schrumpft; der Vollbild-Rueckfall (.ss-solo) behaelt seinen. */
.ss-wrap{margin:0 auto;padding:6px 8px 48px;}
.ss-wrap.ss-solo{max-width:1240px;padding:34px 22px 90px;}
/* ---- Reiterleiste: mittig, waagerecht scrollbar statt gequetscht ---- */
.ss-tabs{max-width:820px;margin-left:auto;margin-right:auto;overflow-x:auto;
scrollbar-width:none;-webkit-overflow-scrolling:touch;}
.ss-tabs::-webkit-scrollbar{display:none;}
.ss-tabs .adm-tab{flex:1 1 auto;min-width:max-content;padding-left:12px;padding-right:12px;font-size:12.5px;}
.ss-tabs .adm-tab span{white-space:nowrap;}
/* ---- DIE SAMMLUNG: sechs Listen, EINE Reiterzeile -----------------------
Inhaltstypen stehen links in ihrer natuerlichen Breite. Ein Themenstrich
markiert die Auswahl, die darunterliegenden Leisten filtern deren Inhalt.
Telefon/Tablet: eine waagerecht rollende Zeile, aktive Wahl im Bild.
Derselbe Zeichner und dieselben Rechte fuer alle sechs Bildschirme. */
.sam-reiter{ --sam-akzent:var(--flaeche-akzent,var(--brand)); display:flex; flex-wrap:nowrap; justify-content:flex-start; gap:24px;
padding:0; margin:0 0 14px; width:100%; max-width:100%; min-width:0;
background:transparent; border:0; border-bottom:1px solid var(--line); border-radius:0;
overflow-x:auto; scrollbar-width:none;
-webkit-overflow-scrolling:touch; scroll-snap-type:x proximity; flex:none;
position:relative; }
.sam-reiter::-webkit-scrollbar{ display:none; }
.sam-reiter .adm-tab{ flex:1 0 0; min-width:max-content; flex-direction:row; gap:7px;
min-height:44px; padding:10px 0 12px; border-radius:0; font-weight:600;
font-size:var(--fs-sm); scroll-snap-align:center;
position:relative; z-index:1; }
.sam-reiter .adm-tab span{ overflow:visible; white-space:nowrap; }
.sam-reiter .adm-tab svg{ width:17px; height:17px; }
@media (max-width:640px){
.sam-reiter{ margin-bottom:10px; gap:20px; }
.sam-reiter .adm-tab{ flex:0 0 auto; padding:10px 12px 12px; gap:6px; }
}
/* Die vorhandene Linse ist jetzt ein schmaler Themenstrich. Ihre Messung
und weiche Bewegung bleiben; keine zweite Auswahlflaeche dahinter. */
html .sam-reiter .adm-tab.active{ background:transparent; box-shadow:none; }
html .sam-reiter .adm-tab.active{ color:var(--sam-akzent,var(--flaeche-akzent,var(--brand))); }
.sam-reiter .adm-tab:hover{ background:transparent; color:var(--ink); }
.sam-reiter .adm-tab:focus-visible{ outline:2px solid var(--sam-akzent,var(--flaeche-akzent,var(--brand))); outline-offset:-3px; }
.sam-reiter .sam-linse{
position:absolute; left:0; top:auto; bottom:0; height:2px; z-index:0;
width:var(--sam-w, 0px); transform:translateX(var(--sam-x, 0px));
border-radius:2px; background:var(--sam-akzent,var(--flaeche-akzent,var(--brand))); box-shadow:none;
pointer-events:none; opacity:0;
transition:transform .44s cubic-bezier(.34,1.2,.44,1),
width .44s cubic-bezier(.34,1.2,.44,1), opacity .18s ease;
}
.sam-reiter .sam-linse.da{ opacity:1; }
.sam-reiter .sam-linse.stumm{ transition:none; }
/* Die Liste darunter blendet beim Reiterwechsel ein, statt hart zu
erscheinen. NUR Deckkraft - ein transform machte die Section zum
Bezugsrahmen jedes position:fixed darin (Fenster, Menues). */
.sam-ein > :not(.sam-reiter){ animation:samEin .34s ease both; }
@keyframes samEin{ from{ opacity:0; } to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){
.sam-reiter .sam-linse{ transition:opacity .18s ease; }
.sam-ein > :not(.sam-reiter){ animation:none; }
}
/* Status ist eine untergeordnete Auswahl, keine zweite Hauptnavigation. */
section:has(> .sam-reiter) .dtb-seg{ padding:2px; border:0; background:transparent; }
section:has(> .sam-reiter) .dtb-seg button{ height:30px; padding:0 10px; font-size:12px; }
section:has(> .sam-reiter) .dtb-seg button.an{
background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); border:0; box-shadow:none;
}
section:has(> .sam-reiter) .dtb-seg button.an .seg-n{ color:inherit; opacity:.75; }
/* Im Dunkelmodus ist die Fuellfarbe fuer Text zu dunkel. Derselbe helle
Auswahlton gilt fuer ausdruecklich und automatisch dunkle Ansichten. */
html[data-theme="dark"] .sam-reiter{ --sam-akzent:#A7B6FF; }
html[data-theme="dark"] section:has(> .sam-reiter) .dtb-seg button.an{ color:#A7B6FF; }
@media (prefers-color-scheme:dark){
html:not([data-theme="light"]) .sam-reiter{ --sam-akzent:#A7B6FF; }
html:not([data-theme="light"]) section:has(> .sam-reiter) .dtb-seg button.an{ color:#A7B6FF; }
}
/* DASSELBE MASS WIE DIE ANDEREN FUENF REITER. Das Blatt-Studio hat einen
eigenen, schmaleren Rand (--bl-pad, die Werkzeugspalten des offenen
Blatts gehen bis an die Kante). Im Regal stand die Reiterzeile dadurch
4 px weiter links und 8 px breiter als auf den anderen Reitern - bei
jedem Wechsel ein kleiner Sprung der ganzen Zeile. Im Regal holt die
Section die Differenz zurueck; im offenen Blatt (.bl-offen, gesetzt von
blSammlungZeile) bleibt es beim schmalen Rand. Unter 900 px sind beide
Masse 12 px (--pl-seite ist dort nicht gesetzt). */
body[data-screen="blaetter"] #screen-blaetter:not(.bl-offen){
padding-left:calc(var(--pl-seite, 12px) - var(--bl-pad, 12px));
padding-right:calc(var(--pl-seite, 12px) - var(--bl-pad, 12px));
}
/* Hier stand `#bl-zeile-akt{ margin-left:auto; }` (v2.900.0) - die Knoepfe
des Regals rechts. Seit v2.906.0 stehen sie als Pille unter ihrem Reiter
(Abschnitt REGAL weiter unten, blUnterEinpassen in blatt-studio.js). */
/* Die Werkzeugseite hat keinen Leisteneintrag mehr (v2.901.0) - ihr
Rueckweg ins Cockpit steht oben, wie auf den anderen Seiten. */
.wz-zurueck{ margin:0 0 12px; cursor:pointer; }
/* ---- SPIELZEIT (v2.903.0, PLAN_WERKZEUGE_VERTEILEN N5) --------------------
Zwei Seiten derselben Sache: die Zeile in der Belohnungstafel der
Lehrkraft (.bel-spielzeit, belSpielzeitHtml) und die Spiele im Arbeitsplatz
der Kinder (.sz-*, static/js/spielzeit.js). Nur Farben aus dem Woerterbuch;
die Kinderseite hat grosse Flaechen und wenig Text (DESIGN_SYSTEM §2). */
.bel-spielzeit{ display:flex; align-items:center; gap:12px; flex-wrap:wrap;
margin:0 0 16px; padding:12px 14px; border-radius:var(--r-card);
background:var(--card); border:1px solid var(--line); }
.bel-spielzeit > svg{ width:20px; height:20px; flex:none; fill:none; stroke:var(--brand);
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.bel-spielzeit.an{ background:var(--ok-soft); border-color:var(--ok); }
.bel-spielzeit.an > svg{ stroke:var(--ok-ink); }
.bel-sz-text{ flex:1 1 220px; min-width:0; font-size:var(--fs-sm); color:var(--ink); line-height:1.4; }
.bel-sz-text b{ font-variant-numeric:tabular-nums; }
.bel-sz-knoepfe{ display:flex; gap:6px; flex-wrap:wrap; }
.bel-sz-knopf{ appearance:none; font:inherit; font-size:var(--fs-sm); font-weight:750; cursor:pointer;
padding:7px 12px; border-radius:var(--r-control); border:1px solid var(--line);
background:var(--paper); color:var(--ink); }
.bel-sz-knopf:hover{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-dk); }
.bel-spielzeit.an .bel-sz-knopf{ background:var(--card); }
.sz{ display:flex; flex-direction:column; gap:16px; }
.sz-hinweis{ display:flex; align-items:center; gap:12px; padding:14px 16px;
border-radius:var(--r-card); background:var(--amber-soft); color:var(--ink);
font-size:var(--fs-md); line-height:1.4; }
.sz-hinweis > svg{ width:24px; height:24px; flex:none; fill:none; stroke:var(--amber-ink);
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sz-hinweis.sz-frei{ background:var(--ok-soft); }
.sz-hinweis.sz-frei > svg{ stroke:var(--ok-ink); }
.sz-hinweis.sz-leer{ background:var(--paper); color:var(--muted); }
.sz-hinweis b{ font-variant-numeric:tabular-nums; }
.sz-raster{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:12px; }
.sz-spiel{ appearance:none; font:inherit; cursor:pointer; text-align:center;
display:flex; flex-direction:column; align-items:center; gap:4px; min-height:132px;
padding:16px 12px; border-radius:var(--r-card); border:1px solid var(--line);
background:var(--card); color:var(--ink); box-shadow:var(--e-1);
transition:transform .12s ease, border-color .12s ease; }
.sz-spiel:hover{ border-color:var(--brand); transform:translateY(-2px); }
.sz-spiel:active{ transform:scale(.98); }
.sz-spiel:focus-visible{ outline:2px solid var(--brand); outline-offset:2px; }
.sz-spiel:disabled{ cursor:not-allowed; opacity:.5; transform:none; box-shadow:none; }
.sz-ico{ font-size:40px; line-height:1.1; }
.sz-name{ font-weight:800; font-size:var(--fs-md); }
.sz-desc{ font-size:var(--fs-xs); color:var(--muted); line-height:1.35; }
.sz-spieler{ gap:10px; }
.sz-leiste{ display:flex; align-items:center; gap:10px; flex:none; }
.sz-chip svg{ width:18px; height:18px; fill:none; stroke:currentColor;
stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.sz-titel{ flex:1; min-width:0; font-size:var(--fs-lg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sz-chip{ display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:var(--r-pill);
font-weight:800; font-size:var(--fs-sm); font-variant-numeric:tabular-nums;
background:var(--amber-soft); color:var(--amber-ink); }
.sz-chip.sz-chip-frei{ background:var(--ok-soft); color:var(--ok-ink); }
.sz-buehne{ position:relative; flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
/* Der Rahmen selbst braucht keine eigene Regel: `.sl-detail-frame
.sl-task-frame` (Aufgaben im Rahmen) laesst ihn schon die Buehne fuellen. */
/* Die Rundenkarte legt sich UEBER den Rahmen - dessen eigenes „Nochmal"
ist darunter nicht mehr erreichbar (dieselbe Regel wie belohnung.html). */
.sz-runde{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
background:color-mix(in srgb, var(--ink) 55%, transparent); border-radius:var(--r-card); padding:16px; }
.sz-runde[hidden]{ display:none; }
.sz-runde-karte{ display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;
background:var(--card); color:var(--ink); border-radius:var(--r-panel); padding:22px 24px;
box-shadow:var(--e-3); min-width:min(320px, 100%); }
.sz-runde-karte b{ font-size:var(--fs-xl); }
.sz-runde-karte span{ color:var(--muted); font-size:var(--fs-md); }
.sz-runde-knoepfe{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:6px; }
.sz-runde-knoepfe .btn{ width:auto; margin:0; min-height:48px; padding-left:22px; padding-right:22px; }
@media (max-width:640px){
.sz-raster{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
.sz-spiel{ min-height:118px; }
}
/* ---- Kopfkarte: Identität links, Kennzahlen rechts ---- */
.ss-head{background:var(--card);border:1px solid var(--line);border-radius:22px;
box-shadow:var(--shadow);padding:22px 24px;margin-bottom:6px;
display:grid;grid-template-columns:minmax(220px,.85fr) minmax(320px,2fr);gap:22px;align-items:center;}
.ss-ident{display:flex;align-items:center;gap:16px;min-width:0;}
.ss-logo{width:84px;height:84px;flex:none;border-radius:22px;border:1px solid var(--line);
box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center;
background:var(--brand) center/contain no-repeat content-box;cursor:pointer;}
.ss-chips{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-width:0;}
.ss-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:700;
padding:5px 12px;border-radius:20px;overflow-wrap:anywhere;}
.ss-chip.ok{background:var(--ok-soft);color:#0F7A43;}
.ss-chip.warn{background:var(--amber-soft);color:#B4690E;}
.ss-chip.star{background:#FFF7E3;color:#8A6100;}
.ss-chip.plain{background:transparent;color:var(--muted);font-weight:600;padding-left:0;}
.ss-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;min-width:0;}
.ss-stat{border:1px solid var(--line);border-radius:16px;padding:13px 10px;text-align:center;min-width:0;}
.ss-stat b{display:block;font-size:22px;font-weight:800;letter-spacing:-.02em;line-height:1.15;}
.ss-stat span{display:block;font-size:11.5px;color:var(--muted);margin-top:3px;line-height:1.35;overflow-wrap:anywhere;}
.ss-stat i{display:inline-flex;width:32px;height:32px;border-radius:11px;align-items:center;justify-content:center;margin-bottom:7px;}
/* ---- Abschnittsüberschrift mit optionalem Textknopf rechts ---- */
.ss-sec{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin:26px 2px 12px;}
.ss-sec b{font-size:17px;letter-spacing:-.01em;}
.ss-sec .ss-sub{font-size:13px;color:var(--muted);}
.ss-sec .ss-lnk{margin-left:auto;background:none;border:0;padding:0;font:inherit;font-size:13px;
font-weight:700;color:var(--brand);cursor:pointer;}
.ss-sec .ss-lnk:hover{text-decoration:underline;}
/* ---- Funktionen ---- */
.ss-fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px;}
/* ---- Kollegium: kompakte Karte statt Farbpanel ---- */
.ss-kol{background:var(--card);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);
padding:16px 20px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;}
.ss-kol-num{font-size:34px;font-weight:800;letter-spacing:-.03em;line-height:1;}
.ss-kol-meta{min-width:0;}
.ss-kol-meta .s{font-size:12.5px;color:var(--muted);margin-top:4px;overflow-wrap:anywhere;}
.ss-kol-sp{flex:1 1 0;min-width:0;}
.ss-btn{border:1px solid var(--line);background:var(--card);color:var(--ink);border-radius:12px;
padding:9px 16px;font:inherit;font-size:13.5px;font-weight:650;cursor:pointer;white-space:nowrap;}
.ss-btn:hover{border-color:var(--brand);color:var(--brand);}
.ss-btn.pri{background:var(--brand);border-color:var(--brand);color:#fff;}
.ss-btn.pri:hover{background:var(--brand-dk);color:#fff;}
.ss-bewgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-top:12px;}
/* =====================================================================
SCHÜLERVERZEICHNIS – EINE Werkzeugleiste (2026-07)
Vorher standen drei dauerhaft aufgeklappte Blöcke über der Tabelle
(Klasse anlegen · Filter · Aktionen) – zusammen fast ein halber
Bildschirm, bevor man das erste Kind sah. Jetzt: Suche links, aktive
Filter als Chips, rechts zwei Aufklapp-Menüs. Zustand liegt in
SV_MENU (index-app.js), damit ein Neuzeichnen das Menü nicht schließt.
===================================================================== */
/* AUCH DIE LEISTE IST KEIN KASTEN MEHR (v2.374.0, dieselbe Ansage wie bei der
Tabelle: „icerigi kutudan kurtar, arkadaki beyaz alana göm"). Sie stand als
weisse Karte auf einem weissen Panel - eine Ebene, die nichts trennte, weil
darunter dieselbe Farbe lag. Die Knoepfe darin tragen ihre Form selbst. */
/* `.sv-tbar` GIBT ES NICHT MEHR (v2.380.0). Sie war die zweite Zeile mit
Knoepfen ueber der Tabellen-Kopfzeile - zwei Reihen Handgriffe uebereinander,
in verschiedenen Hoehen. Filter und Hinzufuegen stehen jetzt IN der
Kopfzeile (`opt.aktion`), bei der Liste, auf die sie wirken.
Die Filter-CHIPS bleiben darueber: sie sind keine Handgriffe, sondern die
Antwort auf „warum ist die Liste so kurz", und sie duerfen umbrechen. */
.sv-chipzeile{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:0 0 10px;}
/* DIE LUPE IST WEG (v2.374.0). Die Kinderliste ist jetzt dieselbe Tabelle wie
bei den Lehrkraeften, und die bringt ihr Suchfeld ueber den Spalten mit.
Zwei Suchfelder auf einem Bildschirm, die verschieden filtern, waeren
schlimmer als keines - deshalb sind `.sv-lupe`, `.sv-search` und
`.such-offen` hier ersatzlos raus statt nur versteckt. */
.sv-btx{white-space:nowrap;}
.sv-tbar-sp{flex:1 1 0;min-width:0;}
.sv-fchips{display:flex;gap:7px;flex-wrap:wrap;align-items:center;min-width:0;}
.sv-fchip{display:inline-flex;align-items:center;gap:7px;background:var(--brand-soft);color:var(--brand-dk);
border-radius:20px;padding:5px 8px 5px 12px;font-size:12.5px;font-weight:650;max-width:100%;}
.sv-fchip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sv-fchip button{flex:none;border:0;background:rgba(46,91,255,.16);color:var(--brand-dk);
width:18px;height:18px;border-radius:50%;font:inherit;font-size:11px;line-height:1;cursor:pointer;}
.sv-menuwrap{position:relative;}
.sv-menu{position:absolute;right:0;top:calc(100% + 7px);z-index:60;width:270px;max-width:min(300px,88vw);
background:var(--card);border:1px solid var(--line);border-radius:16px;
box-shadow:0 14px 38px rgba(27,34,48,.18);padding:8px;}
.sv-menu h4{margin:9px 10px 5px;font-size:11px;font-weight:750;color:var(--muted);
text-transform:uppercase;letter-spacing:.06em;}
.sv-menu button, .sv-menu a{display:flex;width:100%;align-items:center;gap:10px;background:none;border:0;
border-radius:10px;padding:9px 10px;font:inherit;font-size:13.5px;font-weight:600;color:var(--ink);
text-align:left;text-decoration:none;cursor:pointer;}
.sv-menu button:hover, .sv-menu a:hover{background:var(--brand-soft);color:var(--brand-dk);}
.sv-menu button svg, .sv-menu a svg{flex:none;opacity:.7;}
.sv-menu hr{border:0;border-top:1px solid var(--line);margin:7px 4px;}
.sv-menu label{display:block;margin:9px 10px 4px;font-size:11.5px;font-weight:700;color:var(--muted);}
.sv-menu select{display:block;width:calc(100% - 20px);margin:0 10px 8px;padding:8px 10px;
border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13px;
background:var(--card);color:var(--ink);}
.sv-badge{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;
padding:0 5px;border-radius:9px;background:var(--brand);color:#fff;font-size:11px;font-weight:800;}
/* ---- Fußzeile der Liste (v2.354.0) ----------------------------------------
Die Zahlen standen bis dahin ÜBER der Tabelle, zusammen mit einem Titel,
der schon im Reiter darüber stand. Jetzt unten - Vorbild ANTON: oben, was
man TUN will, unten, was man WISSEN will. Die drei Auffälligkeiten sind
Knöpfe und setzen den passenden Filter. */
/* Der leere Zustand: kein Kasten mit eigenem Rand - der Bereich ist schon
ein Panel, und ein Rahmen darin waere die zweite Ebene, die wir gerade
ueberall abgeschafft haben. */
.sv-leer{padding:var(--s-6) var(--s-4);text-align:center;color:var(--muted);line-height:1.6;}
.sv-fuss{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
padding:10px 4px 2px;font-size:12.5px;color:var(--muted);}
.sv-fuss-m{border:1px solid var(--line);background:var(--card);border-radius:20px;
padding:3px 11px;font:inherit;font-size:12px;font-weight:700;color:var(--muted);cursor:pointer;}
.sv-fuss-m:hover{border-color:var(--brand);color:var(--brand);}
.sv-fuss-m.rot{background:var(--bad-soft);border-color:var(--bad-soft);color:var(--bad-ink);}
.sv-fuss-m.gelb{background:var(--amber-soft);border-color:var(--amber-line);color:var(--amber-ink);}
/* ---- „Aus dem Schulverzeichnis" im Klassenbuch (v2.711.0) -----------------
Der Reiter zeigt seit v2.711.0 auch die Listen der ECHTEN Klassen, wenn
die eigene Klasse nicht aus dem Verzeichnis bezogen ist (Untis-Klasse,
Kurs). Dazu gehoeren eine Suche, eine Zaehlzeile und die Leiste mit den
uebrigen Klassen. Begruendung: app.py
/classes//verzeichnis-nachtragen. */
.stuadd-suche{width:100%;box-sizing:border-box;margin:0 0 8px;padding:8px 10px;
font:inherit;font-size:13px;border:1px solid var(--line);border-radius:10px;
background:var(--card);color:var(--ink);}
.stuadd-zahl{font-size:12px;color:var(--muted);margin:6px 2px 0;}
.stuadd-mehr{font-size:12px;color:var(--muted);margin:8px 2px 0;line-height:1.9;}
/* ⛔ DAS FENSTER WIRD BREIT, UND DIE LISTE BEKOMMT SPALTEN (v2.712.0).
Befund Murat 12.09.2026: „bu popupi genisletelim, sinif listesi gelsin,
böyle excel tarzi iki sütun olsun … mümkün olsa bir cirpida hepsini bi
anda gösterebilsek, yani bir sinifi sonra diger sinif gelir altta."
Berechtigt: 41 Kinder in einer 300 px hohen Spalte sind vierzehn
Bildschirmhoehen Gescrolle, um zu sehen, WER ueberhaupt zur Wahl steht.
Jetzt: 52 rem breit, die Kinder einer Klasse als Gitter (zwei bis drei
Spalten, je nach Platz), die naechste Klasse darunter mit ihrem eigenen
Kopf. Auf dem Handy bleibt es von selbst eine Spalte - `auto-fill`
braucht dafuer keine eigene Regel. Nur der Verzeichnis-Reiter wird breit;
ein Textfeld zum Tippen wird von Breite nicht besser. */
.stuadd-card{max-width:480px;}
.stuadd-card.breit{max-width:56rem;}
.stuadd-liste{max-height:min(58vh,34rem);overflow:auto;
border:1px solid var(--line);border-radius:10px;padding:0 10px 6px;}
/* Der Klassenkopf bleibt beim Scrollen stehen - sonst weiss man nach zehn
Zeilen nicht mehr, in wessen Liste man gerade hakt. */
.stuadd-verz-kopf{display:flex;align-items:center;gap:9px;padding:10px 2px 6px;
position:sticky;top:0;z-index:1;background:var(--card);
border-bottom:1px solid var(--line);}
.stuadd-verz-kopf b{font-size:13px;}
.stuadd-verz-kopf .stuadd-verz-zahl{font-size:12px;color:var(--muted);font-weight:400;}
.stuadd-verz-kinder{display:grid;
grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:0 18px;}
.stuadd-verz-zeile{display:flex;align-items:center;gap:9px;min-width:0;
padding:7px 2px;border-bottom:1px solid var(--line);cursor:pointer;}
.stuadd-verz-zeile span{font-size:14px;min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;}
.stuadd-verz-leer{padding:14px 2px;color:var(--muted);font-size:13px;line-height:1.5;}
/* ---- Hinzufügen-Fenster (v2.354.0, svAddOeffnen) --------------------------
EIN Fenster für alles, was Kinder ins Verzeichnis bringt. Der Aufbau ist
bewusst derselbe wie im Klassenbuch (#stuadd-modal): oben die Herkunft als
Reiter, darunter die Quellen-Knöpfe, unten das prüfbare Textfeld. Wer eins
von beiden kennt, kennt beide. */
.svadd-reiter{display:flex;gap:6px;padding:12px 18px 0;flex:none;}
/* Der Reiter-Inhalt scrollt, nicht das Fenster: `.sv-modal` ist eine
Flex-Spalte mit overflow:hidden – ohne eigenes overflow wüchse der Inhalt
aus dem Rahmen heraus und die Knopfzeile unten wäre nicht mehr erreichbar. */
#svadd-eins{overflow:auto;min-height:0;}
.svadd-reiter button{flex:1;border:1px solid var(--line);background:var(--card);border-radius:11px;
padding:9px 10px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer;}
.svadd-reiter button.an{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.svadd-body{padding:14px 18px 6px;overflow:auto;min-height:0;}
.svadd-lbl{display:block;font-size:11.5px;font-weight:750;color:var(--muted);
text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px;}
.svadd-klasse{display:flex;gap:7px;flex-wrap:wrap;}
.svadd-klasse select,.svadd-klasse input{flex:1 1 200px;min-width:0;padding:9px 11px;
border:1px solid var(--line);border-radius:10px;font:inherit;font-size:13.5px;
background:var(--card);color:var(--ink);}
/* K0a: „+ Klasse anlegen" steht neben der Auswahl und waechst nicht mit -
die Auswahl ist der Normalfall, das Anlegen die Ausnahme. */
.svadd-klneu{flex:0 0 auto;padding:9px 13px;border:1px solid var(--line);
border-radius:10px;background:var(--paper);color:var(--ink);
font:inherit;font-size:13px;font-weight:650;cursor:pointer;}
.svadd-klneu:hover{border-color:var(--brand);color:var(--brand);}
.svadd-vorschau{font-size:12.5px;color:var(--muted);margin-top:7px;}
/* K0b: die Fachliste im Verwaltungs-Fenster. Kaesten statt Tabelle - es
sind zwanzig kurze Woerter, und jedes ist ein Knopf zum Bearbeiten. */
.svuv-faecher{display:flex;gap:7px;flex-wrap:wrap;}
.svuv-fach{border:1px solid var(--line);background:var(--paper);color:var(--ink);
border-radius:10px;padding:7px 11px;font:inherit;font-size:13px;font-weight:600;
cursor:pointer;}
.svuv-fach:hover{border-color:var(--brand);color:var(--brand);}
/* K1: der Dublettenbericht im Verwaltungs-Fenster. */
.svuv-dubl{margin-top:12px;}
.svuv-dgrp{border:1px solid var(--line);border-radius:10px;padding:9px 11px;
margin-bottom:8px;font-size:13px;}
.svuv-dzeile{display:flex;align-items:center;justify-content:space-between;gap:8px;
flex-wrap:wrap;margin-top:6px;font-size:12.5px;color:var(--muted);}
.svuv-dzeile button{border:1px solid var(--line);background:var(--paper);
color:var(--ink);border-radius:9px;padding:5px 9px;font:inherit;font-size:12px;
font-weight:650;cursor:pointer;}
.svuv-dzeile button:hover{border-color:var(--brand);color:var(--brand);}
/* ===== K2d: KURSE & GRUPPEN (PLAN_KLASSEN_KURSE.md §4) ==================
Das Aufteilungs-Fenster ist bewusst BREIT (bis 1040 px, §4) - eine
Kinderliste mit einem Auswahlfeld je Zeile ist in einem schmalen Fenster
eine Zumutung. Auf schmalen Geraeten faellt alles auf volle Breite
zurueck; die Regel dafuer steht weiter unten im 640er-Block und NICHT
hier (CLAUDE.md: schmal aendern heisst schmal aendern). */
.svkg-zeile{display:flex;align-items:center;gap:10px;border:1px solid var(--line);
border-radius:10px;padding:9px 11px;margin-bottom:7px;background:var(--paper);}
.svkg-name{flex:1;min-width:0;font-size:13.5px;}
.svkg-sub{font-size:12px;color:var(--muted);margin-top:2px;}
.svkg-marke{display:inline-block;border:1px solid var(--line);border-radius:6px;
padding:1px 6px;font-size:11.5px;color:var(--muted);margin-left:4px;}
.svkg-zahl{font-size:12.5px;color:var(--muted);white-space:nowrap;}
.svkg-oeffnen{border:1px solid var(--line);background:var(--paper);color:var(--ink);
border-radius:8px;padding:4px 10px;font-size:12.5px;cursor:pointer;}
.svkg-oeffnen:hover{border-color:var(--brand);color:var(--brand);}
.svkg-gruppen{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;}
.svkg-karte{flex:1 1 150px;border:1px solid var(--line);border-radius:10px;
padding:9px 11px;background:var(--paper);font-size:13px;}
.svkg-karte-offen{border-style:dashed;}
.svkg-karte-zahl{font-size:20px;margin-top:4px;}
/* ⛔ EINE SPALTE JE KLASSE (v2.674.0: „solda bir liste sagda diger sinifin
listesi"). Vorher lief eine einzige Liste ueber beide Klassen, umgebrochen
nach Platz - man suchte seine 8A zwischen den Kindern der 8B. Die
Stammklasse ist aber die Ordnung, in der eine Lehrkraft denkt. */
.svkg-spalten{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
gap:14px;max-height:52vh;overflow:auto;}
.svkg-spalte{display:grid;gap:0;align-content:start;}
/* ⛔ EINE ZEILE, KEIN KAESTCHEN (v2.674.1: „cocukalr kutu icinde degil excel
tarzi minimal liste gibi olsunlar"). Vierzig gerahmte Kaesten sind vierzig
Rahmen, die um Aufmerksamkeit bitten - gemeint ist eine Liste, in der man
die Namen herunterliest. Deshalb nur eine feine Trennlinie. */
.svkg-zeile{display:flex;align-items:center;gap:8px;padding:4px 2px;
border-bottom:1px solid var(--line);font-size:13px;min-height:30px;}
.svkg-zeile:last-child{border-bottom:0;}
.svkg-zeile:hover{background:var(--paper);}
.svkg-chips{display:flex;gap:4px;flex:none;}
.svkg-chip{border:1px solid var(--line);background:var(--card);color:var(--muted);
border-radius:7px;padding:2px 9px;font:inherit;font-size:12px;font-weight:700;
cursor:pointer;min-width:30px;}
.svkg-chip:hover{border-color:var(--brand);color:var(--brand);}
.svkg-chip.an{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.svkg-spalte-k{position:sticky;top:0;background:var(--card);z-index:1;
padding:4px 2px;font-weight:700;font-size:13px;border-bottom:1px solid var(--line);}
.svkg-spalte-k i{font-style:normal;color:var(--muted);font-weight:600;font-size:12px;}
/* Die leise Rueckmeldung des Selbstsicherns - sie darf nichts verschieben. */
.svkg-gesichert{min-height:16px;margin-top:8px;color:var(--muted);
font-size:12px;text-align:right;}
.svkg-gesichert.schlecht{color:var(--bad);font-weight:700;}
.svkg-kinder{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
gap:6px;max-height:46vh;overflow:auto;}
.svkg-kind{display:flex;align-items:center;gap:8px;border:1px solid var(--line);
border-radius:9px;padding:6px 9px;background:var(--paper);font-size:13px;}
.svkg-kind-n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.svkg-kind-n i{font-style:normal;color:var(--muted);font-size:12px;}
.svkg-kind select{max-width:46%;font-size:12.5px;}
.svkg-feld{display:block;margin-bottom:12px;font-size:13px;}
.svkg-feld>span{display:block;color:var(--muted);font-size:12.5px;margin-bottom:4px;}
.svkg-kl{display:flex;gap:7px;flex-wrap:wrap;}
.svkg-klbox{border:1px solid var(--line);border-radius:8px;padding:5px 10px;
background:var(--paper);font-size:13px;cursor:pointer;}
/* Die schmale Fassung - und NUR sie (CLAUDE.md „schmal aendern heisst
SCHMAL aendern"). Die Regeln oben bleiben unangetastet: auf Tablet und
Rechner war die Aufteilung nicht kaputt, und dort arbeitet die Lehrkraft.
Eigener Block direkt an den Grundregeln, damit beim naechsten Umbau
sichtbar ist, was zusammengehoert - es gibt in dieser Datei mehrere
640er-Bloecke, und vom Dateianfang aus findet man den falschen. */
@media (max-width:640px){
.svu-fwerk{opacity:1;}
#svkg-modal .sv-modal{max-width:100%;}
.svkg-gruppen .svkg-karte{flex:1 1 100%;}
.svkg-kinder{grid-template-columns:1fr;max-height:none;}
.svkg-spalten{grid-template-columns:1fr;max-height:none;}
.svkg-kind select{max-width:52%;}
.svkg-kl{gap:6px;}
/* DREI KNOEPFE PASSEN AUF 375 px NICHT NEBENEINANDER. Gemessen am
05.09.2026 im Browser: „Bestätigen" endete 28 px hinter dem Fensterrand
und war angeschnitten - ausgerechnet der Knopf, um den es geht. Die
Grundregel (`.sv-modal-f`) steht auf `nowrap` und bleibt so; hier darf
die Reihe umbrechen, und der Hauptknopf nimmt dann die ganze Zeile. */
#svkg-modal .sv-modal-f{flex-wrap:wrap;}
#svkg-modal .sv-modal-f .btn{flex:1 1 auto;}
#svkg-modal .sv-modal-f .btn:last-child{flex:1 1 100%;}
}
.svadd-quellen{display:flex;gap:7px;flex-wrap:wrap;}
.svadd-quellen button{flex:1 1 150px;display:inline-flex;align-items:center;justify-content:center;gap:8px;
border:1px solid var(--line);background:var(--paper);border-radius:11px;padding:11px 10px;
font:inherit;font-size:13px;font-weight:650;color:var(--ink);cursor:pointer;}
.svadd-quellen button:hover{border-color:var(--brand);color:var(--brand);}
.svadd-quellen button svg{flex:none;opacity:.75;}
.svadd-status{margin-top:10px;border-radius:10px;padding:9px 12px;font-size:12.5px;
background:var(--ok-soft);color:var(--ok-ink);}
.svadd-status.err{background:var(--bad-soft);color:var(--bad-ink);}
.svadd-body textarea{width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--line);
border-radius:11px;font:inherit;font-size:14px;resize:vertical;background:var(--card);color:var(--ink);}
.svadd-zaehl{font-size:12px;color:var(--muted);margin:4px 2px 0;}
.svadd-fuss{font-size:12px;color:var(--muted);line-height:1.55;margin-top:10px;}
.svadd-fuss a{color:var(--brand);}
.svadd-akt{display:flex;gap:9px;justify-content:flex-end;padding:12px 18px 16px;border-top:1px solid var(--line);flex:none;}
/* ---- Tabelle (Desktop) ---- */
.sv-tab{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow);overflow:hidden;}
.sv-row{display:grid;grid-template-columns:minmax(150px,2.2fr) minmax(74px,.8fr) 96px minmax(96px,1fr);
gap:10px;padding:11px 16px;align-items:center;border-bottom:1px solid var(--line);font-size:13.5px;}
.sv-row:last-child{border-bottom:0;}
.sv-row.head{background:var(--paper);font-size:11.5px;font-weight:750;color:var(--muted);
text-transform:uppercase;letter-spacing:.04em;}
.sv-row.klick{cursor:pointer;}
.sv-row.klick:hover{background:var(--brand-soft);}
.sv-row .nm{font-weight:700;min-width:0;overflow-wrap:anywhere;}
.sv-row .sv-zelle{min-width:0;color:var(--muted);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sv-row .pin{font-variant-numeric:tabular-nums;letter-spacing:.08em;font-weight:700;}
.sv-mark{border-radius:6px;padding:1px 7px;font-size:10.5px;font-weight:800;white-space:nowrap;}
.sv-mark.dop{background:#F6D7D5;color:#B4322F;}
.sv-mark.abg{background:#FEF3E7;color:#8A5B0E;}
/* Zwei Zustaende, die in den Verwaltungslisten immer wieder vorkommen
(v2.365.0): etwas ist FERTIG (aktives Konto, verknuepfte Zuordnung) oder es
WARTET NOCH (offene Einladung, unbestaetigte Zuordnung). Sie stehen hier als
Klasse und nicht als Hex im JavaScript - sonst waeren es vier feste Farben
je Liste, und bei der naechsten Liste wieder vier (DESIGN_SYSTEM.md). */
.sv-mark.fertig{background:var(--ok-soft);color:var(--ok-ink);}
.sv-mark.wartet{background:var(--amber-soft);color:var(--amber-ink);}
/* ---- Mobil (<=760px): alles einspaltig, Tabelle wird zur Kartenliste ---- */
@media (max-width:760px){
.ss-wrap{padding:4px 14px 44px;}
.ss-head{grid-template-columns:1fr;gap:16px;padding:16px;border-radius:18px;}
.ss-ident{gap:13px;}
.ss-logo{width:60px;height:60px;border-radius:17px;}
.ss-stats{grid-template-columns:repeat(2,minmax(0,1fr));}
.ss-stat b{font-size:19px;}
.ss-fgrid{grid-template-columns:1fr;}
.ss-bewgrid{grid-template-columns:1fr;}
.ss-kol{padding:15px 16px;gap:14px;}
.ss-kol-sp{display:none;}
.ss-kol .ss-btn{flex:1 1 100%;}
.ss-sec{margin-top:22px;}
.ss-tabs{margin-left:0;margin-right:0;}
/* EINE Zeile am Telefon: Lupe · Filter · Ausgeben · Hinzufügen. Die drei
Knöpfe zeigen dort nur ihr Zeichen - vier Wörter nebeneinander passen auf
360px nicht, und die Leiste würde waagerecht schiebbar (dieselbe Rechnung
wie in der Aufgaben-Werkzeugleiste, §4c 2.99.7). Sobald die Suche offen
ist, nimmt sie die ganze Zeile und die Knöpfe rutschen darunter. */
.sv-btx{display:none;}
.sv-tbar-sp{display:none;}
.sv-tbar.such-offen .sv-search{flex:1 1 100%;}
.sv-menuwrap{position:static;}
.sv-menu{left:12px;right:12px;width:auto;max-width:none;}
/* Tabelle -> Karten: vier Spalten passen auf 360px nicht ohne Abschneiden. */
.sv-tab{background:transparent;border:0;box-shadow:none;overflow:visible;}
.sv-row.head{display:none;}
.sv-row{display:block;background:var(--card);border:1px solid var(--line);border-radius:14px;
box-shadow:var(--shadow);padding:13px 15px;margin-bottom:9px;}
/* display:block ist PFLICHT: `.sv-row` wird hier zum Block, `.nm` blieb aber
ein Inline-Element – dadurch klebte das erste Feld direkt am Namen
("Elif ÖztürkKlasse: 5a"). Befund Murat 02.08.2026. */
.sv-row .nm{display:block;font-size:15px;white-space:normal;}
.sv-row .sv-zelle{display:inline-flex;align-items:center;gap:6px;margin:8px 10px 0 0;
font-size:12.5px;color:var(--muted);}
.sv-row .sv-zelle::before{content:attr(data-lbl);font-weight:700;color:var(--muted);opacity:.75;}
}
/* ---- Fenster der Schulverwaltung (Lehrkraft-Konto, Einsammeln) -----------
EIN Rahmen fuer alle Popups dieses Bereichs, damit sie sich gleich anfuehlen
und mobil gleich brechen. Hoehe folgt dem sichtbaren Bereich (--vh100, siehe
ARCHITEKTUR §4b: NIE 100vh hart setzen). */
.sv-modal-bg{position:fixed;inset:0;z-index:1300;background:rgba(15,20,35,.45);
display:flex;align-items:center;justify-content:center;padding:16px;}
.sv-modal{background:var(--card);border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);
width:100%;max-width:520px;max-height:calc(var(--vh100) - 60px);
display:flex;flex-direction:column;overflow:hidden;}
.sv-modal-breit{max-width:760px;}
.sv-modal-h{display:flex;align-items:flex-start;gap:12px;padding:16px 18px 13px;
border-bottom:1px solid var(--line);flex:none;}
.sv-modal-h b{font-size:var(--fs-base);letter-spacing:-.01em;overflow-wrap:anywhere;}
/* ⛔ EIN KNOPF IN DER KOPFZEILE IST KLEIN (v2.674.1). Als `.btn` nahm
„Bestätigen" die ganze Breite und drückte den Titel in eine
Buchstabensäule - `.btn` ist für Fußzeilen gebaut, wo Breite erwünscht
ist. Hier gilt dasselbe Maß wie für das X daneben. */
.sv-modal-ok{flex:none;border:1px solid var(--brand);background:var(--brand);
border-radius:10px;padding:6px 12px;font:inherit;font-size:13px;font-weight:700;
color:var(--on-brand);cursor:pointer;white-space:nowrap;}
.sv-modal-ok:hover{background:var(--brand-dk);border-color:var(--brand-dk);}
.sv-modal-x{flex:none;border:1px solid var(--line);background:var(--card);border-radius:10px;
padding:6px 11px;font:inherit;font-size:13px;color:var(--muted);cursor:pointer;}
.sv-modal-x:hover{border-color:var(--brand);color:var(--brand);}
.sv-modal > div:not(.sv-modal-h){min-height:0;}
.sv-modal > div[style*="overflow:auto"]{flex:1;}
/* KOERPER UND FUSS (v2.373.0). Vorher hatte `.sv-modal` weder Innenabstand
noch eine scrollbare Zone - wer Inhalt direkt hineinschrieb, bekam Text,
der am Rand klebte und unten abgeschnitten war (Befund Murat 22.08.2026:
„pop-up cok kötü gözüküyor, sanki büyütülmüs, o pop-up'a sigmamis").
Jetzt: Kopf fest, Koerper scrollt, Fuss fest unten - dieselbe Bauform wie
in jedem anderen Fenster des Projekts. */
.sv-modal-b{flex:1;min-height:0;overflow:auto;padding:16px 18px;}
.sv-modal-f{flex:none;display:flex;gap:10px;padding:13px 18px;border-top:1px solid var(--line);
background:var(--card);}
.sv-modal-f .btn{margin:0;flex:1;}
.sv-modal-feld{width:100%;box-sizing:border-box;padding:9px 11px;border:1.5px solid var(--line);
border-radius:10px;font:inherit;font-size:13.5px;background:var(--card);color:var(--text);}
.sv-modal-kasten{background:var(--paper);border-radius:12px;padding:12px;margin-bottom:12px;}
/* Zwei gleich breite Knoepfe nebeneinander im Rumpf eines Fensters. Als
Klasse und nicht inline: ein Inline-Style schlaegt jedes Stylesheet,
und genau daran scheiterte schon einmal eine Korrektur fuer schmale
Schirme (qa/unit/test_landing_mobil.py). */
.sv-modal-reihe{display:flex;gap:8px;flex-wrap:wrap;}
/* Beschriftung links, Auswahlfeld rechts - fuer Formulare, in denen es
um Zuordnung geht (Spalte X ist Y). Untereinander waere jede Zeile
doppelt so hoch, und man sucht die Paare. */
.sv-modal-feld-zeile{display:flex;align-items:center;gap:10px;margin-bottom:8px;}
.sv-modal-feld-zeile > label{flex:none;width:78px;font-size:12.5px;font-weight:700;color:var(--muted);}
.sv-modal-feld-zeile > select{flex:1;min-width:0;border:1px solid var(--line);
border-radius:var(--r-control);background:var(--card);color:var(--ink);
font:inherit;font-size:13px;padding:7px 9px;}
.sv-modal-reihe > .btn{flex:1;margin:0;min-width:130px;}
.sv-modal-kasten-h{font-size:11px;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;margin-bottom:6px;}
/* Schlüssel-Wert-Zeilen im Konto-Fenster */
.sv-kv{display:flex;align-items:baseline;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);
font-size:13.5px;flex-wrap:wrap;}
.sv-kv span{flex:1;min-width:120px;color:var(--muted);}
.sv-kv b{font-weight:700;text-align:right;overflow-wrap:anywhere;}
.sv-kv-h{font-size:11px;font-weight:750;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;margin:16px 0 2px;}
.sv-kv-h:first-child{margin-top:0;}
@media (max-width:760px){
.sv-modal-bg{padding:10px;align-items:flex-end;}
.sv-modal{max-height:calc(var(--vh100) - 40px);border-radius:18px;}
.sv-kv b{text-align:left;}
}
/* ---- „Hab ich gesehen": Knopf an abgeleiteten To-do-Zeilen (v2.42.0) ------
Cockpit-Karte (.t-row) und Seite "Meine Aufgaben" (.mtl-table). Dezent, bis
die Zeile berührt wird – der Knopf soll nicht wie die Hauptaktion aussehen,
die Hauptaktion ist der Deep-Link der Zeile.
Seit v2.53.0 trägt er im Cockpit das WORT „Gesehen" statt nur einen Haken:
ein nackter Haken liest sich wie „erledigt", und das ist er nicht – er
blendet die Zeile bis zur nächsten Änderung aus. Der Knopf bleibt trotzdem
ruhig (Umriss, kein Farbfeld), damit der Deep-Link die Hauptaktion bleibt.
MIT WEM: todoAusblenden() in index-app.js, mtHeuteHtml() in index-aufgaben.js. */
.t-row .t-weg, .mtl-table .mtl-weg{
flex:none;display:inline-flex;align-items:center;justify-content:center;gap:5px;
min-height:28px;padding:0 10px;border:1px solid var(--line);border-radius:99px;
background:var(--card);color:var(--muted);cursor:pointer;
font:650 12px/1 inherit;white-space:nowrap;
opacity:.55;transition:opacity .14s,border-color .14s,color .14s,background .14s;}
.mtl-table .mtl-weg{width:28px;padding:0;border-radius:9px;}
.t-row .t-weg svg, .mtl-table .mtl-weg svg{width:14px;height:14px;flex:none;fill:none;
stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;}
.t-row:hover .t-weg, .mtl-table tr:hover .mtl-weg{opacity:1;}
.t-row .t-weg:hover, .mtl-table .mtl-weg:hover{
opacity:1;border-color:var(--ok);color:var(--ok);background:var(--ok-soft);}
.t-row .t-weg:focus-visible, .mtl-table .mtl-weg:focus-visible{
opacity:1;outline:2px solid var(--brand);outline-offset:2px;}
.mtl-table td.mtl-chev{white-space:nowrap;}
.mtl-table td.mtl-chev .mtl-weg{margin-right:8px;vertical-align:middle;}
/* Touch-Geräte kennen kein Hover – dort dauerhaft sichtbar. */
@media (hover:none){
.t-row .t-weg, .mtl-table .mtl-weg{opacity:1;}
}
/* ---- "Verwalten": Schubfach von rechts (v2.56.0) -------------------------
Ersetzt das "…"-Menue der Klassen-Kopfzeile. WARUM ein Schubfach und kein
Menue: ein Menue ist eine Spalte ohne Platz - keine Ueberschriften, kein
Raum fuer den einen erklaerenden Satz je Eintrag. Das Schubfach laesst die
Schuelertabelle stehen (ein Aufklapp-Bereich haette sie nach unten
geschoben) und legt sich nicht auf einen bestehenden Dialog.
Auf schmalen Geraeten wird daraus ein Blatt von UNTEN - dort ist ein
seitliches Schubfach entweder zu schmal oder deckt alles zu.
MIT WEM: kbVerwaltenOeffnen()/kbVerwaltenSchliessen() in index-app.js. */
.kbv-ov{position:fixed;inset:0;z-index:9600;background:rgba(20,24,35,0);
display:flex;justify-content:flex-end;transition:background .18s ease;}
.kbv-ov.auf{background:rgba(20,24,35,.34);}
.kbv{width:min(420px,92vw);max-height:100%;overflow-y:auto;background:var(--card,#fff);
border-left:1px solid var(--line);box-shadow:-18px 0 48px rgba(20,30,60,.16);
transform:translateX(100%);transition:transform .2s cubic-bezier(.22,.61,.36,1);}
.kbv-ov.auf .kbv{transform:translateX(0);}
.kbv-kopf{position:sticky;top:0;z-index:2;display:flex;align-items:flex-start;gap:var(--s-3);
padding:var(--s-4) var(--s-4) var(--s-3);background:var(--card);border-bottom:1px solid var(--line);}
.kbv-kopf b{display:block;font-size:var(--fs-md);font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.kbv-kopf small{display:block;margin-top:2px;font-size:var(--fs-xs);color:var(--muted);}
.kbv-zu{flex:none;margin-left:auto;width:30px;height:30px;border:1px solid var(--line);
border-radius:var(--r-control);background:var(--card);color:var(--muted);cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;}
.kbv-zu:hover{border-color:var(--ink);color:var(--ink);}
.kbv-zu svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;}
.kbv-body{padding:var(--s-3) var(--s-3) var(--s-5);}
.kbv-grp + .kbv-grp{margin-top:var(--s-4);padding-top:var(--s-3);border-top:1px solid var(--line);}
.kbv-grp-t{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);text-transform:uppercase;
letter-spacing:.06em;padding:2px var(--s-1) var(--s-2);}
.kbv-item{display:flex;align-items:flex-start;gap:var(--s-3);width:100%;box-sizing:border-box;
border:1px solid transparent;border-radius:var(--r-control);background:none;font:inherit;text-align:left;
padding:var(--s-2) var(--s-3);cursor:pointer;transition:background .12s,border-color .12s;}
.kbv-item:hover{background:var(--paper);border-color:var(--line);}
.kbv-item:focus-visible{outline:2px solid var(--brand);outline-offset:1px;}
.kbv-ico{flex:none;width:30px;height:30px;border-radius:var(--r-control);background:var(--paper);
color:var(--ink);display:inline-flex;align-items:center;justify-content:center;}
.kbv-ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
stroke-linecap:round;stroke-linejoin:round;}
.kbv-tx{flex:1;min-width:0;}
.kbv-tx b{display:block;font-size:var(--fs-sm);font-weight:700;color:var(--ink);}
.kbv-tx small{display:block;margin-top:1px;font-size:var(--fs-2xs);color:var(--muted);line-height:1.45;}
/* Die eine unumkehrbare Aktion sieht auch so aus - aber erst beim Zeigen,
damit die Liste nicht dauerhaft nach Warnung aussieht. */
.kbv-item.gefahr .kbv-tx b{color:var(--bad);}
.kbv-item.gefahr:hover{background:rgba(224,70,62,.07);border-color:rgba(224,70,62,.35);}
.kbv-item.gefahr .kbv-ico{color:var(--bad);}
/* HERVORGEHOBEN - die zwei Wege, die in einen eigenen Bildschirm fuehren
(v2.391.0: Aufgabenzentrale, Elternsprechtag planen). Alles andere im
Schubfach oeffnet ein Fenster und ist nach einem Klick erledigt; diese
beiden sind der Anfang einer Arbeit, die eine Weile dauert. Gleich
aussehende Zeilen behaupten gleiches Gewicht - deshalb tragen nur sie eine
Flaeche und ein GEFUELLTES Zeichen. Anders, nicht lauter: rot bleibt dem
Unumkehrbaren vorbehalten (.gefahr darueber).
SEIT v2.419.0 IST ES DIE VOLLE FLAECHENFARBE, NICHT MEHR IHR HAUCH
(Anweisung Murat 24.08.2026: „arkaplanini tema rengi degil kendini belirgin
tema rengi yap ... ama her zaman okunur olmali. gri secen birinde sicar bu
kisim"). Er hat den wunden Punkt getroffen, und es ist ein RECHENFEHLER,
kein Geschmack:
- Der Hauch trug farbige Schrift (`-ink` auf `-soft`). Diese Paarung ist
auf 4.5:1 GERECHNET, aber nur knapp - dieselbe Rechnung, die schon den
aktiven Eintrag der Seitenleiste in v2.283.0 von Hauch auf Fuellung
gebracht hat (Rueckfall dort: 4.47:1, knapp UNTER der Schwelle).
- Bei einem fast grauen Wunschton (Stein, oder eine selbst gewaehlte
Farbe knapp ueber der Saettigungsgrenze von ssAkzentSetzen) wird aus
„hervorgehoben" ein blassgrauer Kasten mit blassgrauer Schrift: der
auffaelligste Eintrag der Liste ist dann der unauffaelligste.
DIE FUELLUNG HAT DIESES PROBLEM NICHT: `--flaeche-akzent` wird von
`ssDunkelnBis()` so lange abgedunkelt, bis 4.5:1 GEGEN WEISS stehen - egal
welcher Farbton gewaehlt ist. Weisse Schrift darauf ist damit nicht
„wahrscheinlich lesbar", sondern nachgerechnet (Test: qa/unit/
test_flaeche_akzent.py, „weisse Schrift auf jedem Akzent").
Deshalb traegt auch die UNTERZEILE volles Weiss und kein abgesenktes:
jede Deckkraft unter 100 % rechnet genau diese Zusage wieder herunter
(0.88 Weiss auf dem Grenzton ergibt ~4.3:1). Unterschieden werden die
beiden Zeilen ueber Groesse und Fettung, nicht ueber Blaesse.
Das Zeichen dreht sich mit um: weisse Scheibe, Glyph in der Flaechenfarbe.
HIER STEHT NUR DIE GRUNDFASSUNG IN DER MARKENFARBE. Die Wunschfarbe der
Lehrkraft zieht sie im Abschnitt „Akzent aus der Flaechenfarbe" am
DATEIENDE nach - dort steht die vollstaendige Liste dessen, was die
Farbwahl faerbt, und qa/unit/test_flaeche_akzent.py haelt sie beisammen.
MIT WEM: kbVerwaltenGruppen (klasse:"kbv-betont"), kbSchubfach. */
/* KEINE FLAECHE MEHR (v2.491.0, Befund Murat 27.08.2026: „su sagdaki
vorbereitung kismi bok gibi olmus butonlar girmis birbirine ... arkaplani
koymak yerine baska cözüm bul").
Er hat recht, und der Grund liegt eine Regel weiter oben: `.kbv-item` hat
`border:1px solid transparent` und KEINEN Aussenabstand. Ein einzelner
gefuellter Eintrag sieht damit gut aus - zwei UNTEREINANDER stossen Kante
an Kante und lesen sich als EIN Block mit zwei Zeilen. Genau diese zwei
gibt es hier („Aufgabenzentrale", „Elternsprechtag planen"), und sie sind
die einzige Stelle der App, an der zwei betonte Zeilen aufeinandertreffen.
Ein Abstand haette den Blockeindruck geheilt und die Flaeche behalten -
aber die Ansage war, es OHNE Flaeche zu loesen, und das ist auch das
robustere Mittel: eine Flaeche kann verschmelzen, ein Randstrich nicht.
STATTDESSEN: ein Strich an der linken Kante, ein getoentes Zeichen und die
Ueberschrift in der Akzentfarbe. Der Strich sitzt als `inset`-Schatten und
nicht als `border-left` - eine echte Kante von 3px wuerde den Text um 2px
verschieben und die Zeile gegen ihre Nachbarn verrutschen lassen.
DER KONTRAST BLEIBT NACHGERECHNET, und zwar leichter als vorher:
`--flaeche-akzent` ist von `ssDunkelnBis()` so weit abgedunkelt, dass
WEISS darauf 4.5:1 erreicht. Kontrast ist symmetrisch - also erreicht
dieselbe Farbe ALS SCHRIFT auf der weissen Karte ebenfalls 4.5:1. Die
Unterzeile bleibt bewusst in `--muted`: sie ist Beiwerk, und zwei
Akzentzeilen uebereinander waeren wieder ein Block.
MIT WEM: kbVerwaltenGruppen (klasse:"kbv-betont"), kbSchubfach,
qa/unit/test_flaeche_akzent.py, qa/unit/test_schubfach_betont.py. */
.kbv-item.kbv-betont{background:none;border-color:transparent;
box-shadow:inset 3px 0 0 var(--brand);}
.kbv-item.kbv-betont:hover{background:var(--paper);border-color:transparent;
box-shadow:inset 3px 0 0 var(--brand);}
.kbv-item.kbv-betont .kbv-ico{background:var(--brand-soft);color:var(--brand);}
.kbv-item.kbv-betont .kbv-tx b{color:var(--brand);}
/* "VERWALTEN" TRUG ALS EINZIGER KNOPF DER ZEILE IMMER SEINE BESCHRIFTUNG.
Weg seit v2.331.0 (Wunsch Murat 18.08.2026: „verwalten yazisini kaldir tek
ikon kalsin ... o ikonlarin üstüne gelince ismi text olarak geliyo").
Er hat recht: Die Zeile besteht aus Symbolen, die ihren Namen beim Zeigen
nennen; ein einziger, der ihn dauerhaft ausschreibt, ist keine Hilfe,
sondern eine Ausnahme, die die Zeile unruhig macht. Der Name geht nicht
verloren – er steht im `title` und faehrt beim Zeigen aus, genau wie bei
Bewerten, Analyse und Gewichtung.
ABSICHTLICH NICHT GELOESCHT, SONDERN AUSKOMMENTIERT: Wer sie zurueckholen
will, soll die Regel finden und nicht neu erfinden – und mit ihr die
Begruendung, warum sie weg ist.
AM HANDY STAND DAS WORT BIS v2.921.0 NOCH - seit v2.922.0 nirgends mehr
(„verwalten texti gösterme hicbiyerde tek cark olsun"). */
/* .kbx-act.kbx-verw .kbx-actlbl{max-width:110px;opacity:1;margin-left:6px;} */
.kbx-act.kbx-verw .kbx-actlbl{display:none;}
.kbx-act.kbx-verw{border-color:var(--line);color:var(--ink);}
.kbx-act.kbx-verw:hover,.kbx-act.kbx-verw:focus-visible{border-color:var(--ink);
color:var(--ink);box-shadow:0 0 0 1px var(--ink) inset;}
@media (max-width:640px){
.kbv-ov{align-items:flex-end;justify-content:center;}
/* DAS BLATT WAR IN SAFARI NICHT ZU SCHLIESSEN (Befund Murat 05.08.2026:
„mobilde verwalten acinca o en üst kisim x in oldugu yukari kayiyor
kapatamiyorum … safariden girince böyle ama pwa da sikinti yok").
URSACHE - und der PWA-Hinweis ist der Beweis: Hier stand `86vh`. `vh`
misst in mobilem Safari gegen den GROSSEN Bildschirm, den OHNE die
eingeblendeten Browserleisten. Die Huelle `.kbv-ov` ist dagegen mit
`position:fixed; inset:0` am sichtbaren Bereich verankert und damit
kleiner. Das Blatt haengt unten an (`align-items:flex-end`), also schob
jedes zu viel gemessene Pixel seinen KOPF nach oben aus der Huelle heraus
- und mit ihm das X. In der PWA gibt es keine Leisten, dort ist `vh`
zufaellig richtig; deshalb trat es nur im Browser auf.
LOESUNG NACH DER HAUSREGEL (ARCHITEKTUR §4b, qa/unit/test_viewport_hoehe):
bildschirmhohe Flaechen MESSEN nicht, sie sind verankert. 86 % beziehen
sich auf die Huelle, die bereits an allen vier Seiten haengt - damit gibt
es gar keine Geraetehoehe mehr, die falsch sein koennte. Kein `vh`, kein
`dvh`, keine Rechnung. */
.kbv{width:100%;max-height:86%;border-left:0;
border-top:1px solid var(--line);
border-radius:18px 18px 0 0;transform:translateY(100%);}
.kbv-ov.auf .kbv{transform:translateY(0);}
}
/* ===== SCHUELER-ARBEITSPLATZ (v2.230.0) ================================
MIGRIERT MIT SCHRITT 8 (v2.280.0) - DER LETZTE SCHRITT VON §10.
"Gleiche Familie, eigene Dichte" (§2): dieselbe Farb-, Icon- und
Bausteinfamilie wie bei der Lehrkraft, aber groessere Flaechen, weniger
Text, deutlichere Hierarchie. Nicht die Lehrer-Oberflaeche in klein.
GEZOGEN: 57 Schriftgroessen, 32 Ecken, 141 Abstaende, 37 feste Farben.
DIE EIGENTLICHE AUFGABE DIESES SCHRITTS WAR EINE SCHULD AUS SCHRITT 6:
die fuenf Zustandsstufen (ok gruen · info blau · soon gelb · warn orange ·
bad rot) standen mit denselben festen Werten HIER und in der
Aufgabenzentrale (.az-k-*). v2.278.0 hat sie bewusst stehen lassen, weil
eine halbe Migration die zwei Seiten auseinanderlaufen liesse - bei
Toenen, deren einziger Zweck es ist, auf beiden Seiten dasselbe zu
bedeuten. Jetzt sind BEIDE Seiten im selben Commit gezogen.
SOON UND WARN SIND BEIDE BERNSTEIN und muessen trotzdem unterscheidbar
bleiben ("morgen faellig" gegen "in wenigen Stunden"). Statt zwei
erfundener Toene sind es jetzt zwei Saettigungen DERSELBEN Farbe:
color-mix(--amber 4%) und color-mix(--amber 14%). Aendert sich der
Bernstein, ziehen beide mit und ihr Abstand bleibt.
DIE ZWEI PROZENTZAHLEN SIND GEMESSEN, NICHT GESCHAETZT. Der erste Versuch
stand auf 10% und 22%; nachgerechnet erreichte die Schrift (--amber-ink)
auf 22% nur 4.30:1 und fiel damit unter WCAG AA (§3.2). Die Messreihe:
4% -> 4.88 8% -> 4.75 12% -> 4.62 14% -> 4.55 16% -> 4.49
Ab 16% besteht sie nicht mehr. Gewaehlt sind deshalb 4% und 14% - beide
ueber der Schwelle, mit dem groesstmoeglichen Abstand dazwischen.
Dass dieser Abstand klein ist (1.07), ist vertretbar: die fuenf Stufen
sind ausdruecklich auch OHNE Farbe unterscheidbar - daneben steht
"morgen" oder "in 3 Stunden".
EINE TOTE DOPPELDEFINITION ENTFERNT: `.sl-task-deadline.warn` stand
ZWEIMAL da (erst #FFF5DE/#A45E00, spaeter #FFF0E0/#B4520B). Bei gleicher
Spezifitaet gewinnt die spaetere - die fruehere hat nie gewirkt, aber
jeder, der die Farbe nachschlug, las die falsche Zahl ab. Gefunden beim
Schreiben des Klassenbuch-Tests (v2.279.0).
WAS STEHENBLEIBT: der Verlauf der Pizza-Anzeige (#FFF6DF -> #FFEFC9 mit
Rand #F0DCAB). Das ist eine ZEICHNUNG - ein Stueck Pizza, das den
Fortschritt zeigt -, kein Bauteil des Systems (§9.1).
EINE ENTSCHEIDUNG ZUR SKALA: das PIN-Feld (.sl-in) stand auf 27px, also
zwischen --fs-xl (24) und --fs-2xl (32). Gewaehlt ist die GROESSERE Stufe:
hier tippt ein Kind seine Nummer, und §2 verlangt fuer das Kind-Gesicht
ausdruecklich groessere Ziele - nicht die bequemere kleine Zahl.
======================================================================= */
body.student-workspace #authbar{display:none;}
/* HIER STANDEN BIS 2.243.1 ZWEI REGELN FÜR `.sl-side-head` UND
`.sl-side-logo` – und sie waren der Grund, warum die Leiste des Kindes
kaputt aussah (Befund Murat 10.08.2026: „sol üstteki logoya bak bide bu
sol kisim acilir kapanirdi yani").
WAS PASSIERT WAR: v2.240.0 hat den Kopf der Kind-Leiste auf dieselbe
Bauart umgestellt wie den der Lehrkraft – eine Flex-Zeile mit ZWEI Logos
(volle Wortmarke + kompakte Marke, eine davon versteckt) und dem
Klappknopf rechts (`.sl-side-head`/`.sl-side-logo`/`.sl-logo-marke`/
`.sl-side-klapp`, weiter unten in dieser Datei). Diese beiden alten
Zeilen aus v2.230.0 blieben stehen – und sie GEWINNEN, weil sie
`#app-sidebar` enthalten (0-1-2-1 gegen 0-0-1-0):
• `display:block` schlug `.sl-logo-marke{display:none}` → BEIDE Logos
waren sichtbar, eins über dem anderen gequetscht.
• `width:174px` schlug `width:auto` → zwei Bilder à 174 px in einer
268 px breiten Leiste. Der Klappknopf hat `flex:none` und wurde aus
dem sichtbaren Bereich geschoben. Für das Kind war die Leiste damit
nicht mehr einklappbar – der Knopf war nicht kaputt, er war weg.
LEHRE, die schon zweimal in diesem Projekt Geld gekostet hat: wer eine
Bauart ersetzt, LÖSCHT die alte im selben Commit. Zwei Regelsätze für
dasselbe Bauteil entscheidet sonst die Spezifität – und die kennt die
Absicht nicht. Der Trennstrich unter dem Kopf war das einzig Brauchbare
an den beiden Zeilen; er steht jetzt unten bei `.sl-side-head`. */
body.student-workspace #app-sidebar .sl-side-name{font-size:var(--fs-lg);font-weight:800;color:var(--ink);}
body.student-workspace #app-sidebar .sl-side-class{font-size:var(--fs-sm);color:var(--muted);margin-top:3px;}
body.student-workspace #app-sidebar .sl-side-nav{display:flex;flex-direction:column;gap:var(--s-1);padding:var(--s-4) 0;}
body.student-workspace #app-sidebar .sl-side-btn{appearance:none;width:100%;border:0;background:transparent;color:var(--muted);font:inherit;font-weight:700;display:flex;align-items:center;gap:var(--s-3);text-align:left;padding:var(--s-3) var(--s-3);border-radius:var(--r-control);cursor:pointer;white-space:nowrap;}
body.student-workspace #app-sidebar .sl-side-btn:hover,body.student-workspace #app-sidebar .sl-side-btn.on{background:var(--brand-soft);color:var(--brand);}
body.student-workspace #app-sidebar .sl-side-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;}
body.student-workspace #app-sidebar .sl-side-count{margin-left:auto;min-width:22px;height:22px;border-radius:var(--r-pill);background:var(--brand);color:var(--card);font-size:var(--fs-2xs);display:flex;align-items:center;justify-content:center;}
/* ===== DAS PROFIL IN DER LEISTE (v2.281.0) ==============================
Befund Murat 12.08.2026: "solda kocaman yer var abmelden üstünde ... o sag
üstteki logo isim ve yildizi daha klas bi sekilde sola alsak daha iyi gibi
olur hem daha büyük görünür".
Er hat recht in beide Richtungen: oben rechts war der Block klein und
gedraengt (Stern, Name, 38px-Bild in einer Zeile), und in der Leiste stand
ueber "Abmelden" die halbe Hoehe leer.
`margin-top:auto` schiebt ihn nach UNTEN an die Abmelden-Linie - nicht
nach oben unter das Menue. Das ist Absicht: die vier Ansichten sind das,
was ein Kind benutzt; das Profil ist das, was es ANSIEHT. Es soll dort
stehen, wo der Blick hinfaellt, wenn er nichts sucht.
DAS BILD ZUERST, dann der Name. Ein Kind erkennt sich an seiner Figur -
deshalb 72px, etwa doppelt so gross wie vorher oben rechts. */
/* ZWEI `margin-top:auto` IN EINER SPALTE TEILEN DIE LUECKE, statt einen
Block nach unten zu schieben - beim Bauen stand das Profil deshalb genau
in der Mitte zwischen Menue und Abmelden (je 129px Luft). Das `auto`
gehoert an den OBEREN der beiden; der untere schliesst direkt an. */
.sl-profil{margin-top:auto;display:flex;flex-direction:column;align-items:center;
gap:var(--s-1);padding:var(--s-4) var(--s-2);text-align:center;}
.sl-profil-bild{appearance:none;border:0;background:none;padding:0;cursor:pointer;
border-radius:var(--r-pill);line-height:0;transition:transform .16s;}
.sl-profil-bild:hover{transform:scale(1.06);}
.sl-profil-bild:focus-visible{outline:2px solid var(--brand);outline-offset:3px;}
.sl-profil-name{font-size:var(--fs-lg);font-weight:800;color:var(--ink);line-height:1.2;
margin-top:var(--s-1);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sl-profil-klasse{font-size:var(--fs-sm);color:var(--muted);}
/* Die Sternzeile ist ein KNOPF - sie fuehrt zur Belohnungstafel. Damit das
sichtbar ist, traegt sie eine Flaeche und keine blosse Zahl. */
.sl-profil-sterne{appearance:none;cursor:pointer;margin-top:var(--s-2);
display:inline-flex;align-items:center;gap:var(--s-1);
border:1px solid var(--amber-line);border-radius:var(--r-pill);
padding:var(--s-1) var(--s-3);
background:color-mix(in srgb, var(--amber) 10%, var(--card));
color:var(--amber-ink);font:inherit;font-size:var(--fs-sm);font-weight:700;
transition:background .14s;}
.sl-profil-sterne:hover{background:color-mix(in srgb, var(--amber) 18%, var(--card));}
.sl-profil-sterne svg{width:16px;height:16px;fill:currentColor;flex:none;}
.sl-profil-sterne b{font-size:var(--fs-base);font-weight:800;}
.sl-profil-schatz{font-size:var(--fs-2xs);font-weight:700;color:var(--amber-ink);
letter-spacing:.03em;text-transform:uppercase;}
/* Wer noch keinen Schatz hat, liest nicht NICHTS, sondern wie weit es ist -
der Unterschied zwischen "du hast nichts" und "du bist fast da". */
.sl-profil-schatz.offen{color:var(--muted);text-transform:none;letter-spacing:0;
font-weight:600;}
/* Zugeklappt (70px) bleibt nur das Bild - Name und Zahl haetten dort keinen
Platz, und ein abgeschnittener Name ist schlimmer als keiner. */
body.sl-leiste-zu .sl-profil-name,
body.sl-leiste-zu .sl-profil-klasse,
body.sl-leiste-zu .sl-profil-schatz{display:none;}
/* Der kleine Fortschritt im Profil (v2.317.0, Faz 5a). Er zeigt den AKTUELLEN
Abschnitt des Sternenwegs - der ganze Weg steht auf der Belohnungstafel.
Zugeklappt (70px) faellt er weg wie die Schatzzeile darueber: ein Balken
ohne Beschriftung waere ein Strich ohne Aussage. */
.sl-profil-weg{width:100%;max-width:170px;margin-top:var(--s-2);}
.sl-profil-weg-bahn{display:block;height:6px;border-radius:var(--r-pill);
background:var(--line);overflow:hidden;}
.sl-profil-weg-bahn i{display:block;height:100%;border-radius:var(--r-pill);
/* Beide Enden aus Tokens - der Profil-Test verbietet feste Farben
hier ausdruecklich, und ein zweiter Goldton waere ohnehin ein
Ton mehr, als die Marke hat. */
background:linear-gradient(90deg,var(--amber),var(--ld-4));
transition:width .8s cubic-bezier(.2,.8,.3,1);}
.sl-profil-weg-txt{display:block;margin-top:var(--s-1);font-size:var(--fs-3xs);
color:var(--muted);text-align:center;}
.sl-profil-weg-txt.voll{color:var(--amber-ink);font-weight:750;}
body.sl-leiste-zu .sl-profil-weg,
body.sl-leiste-zu .sl-profil-weg-txt{display:none;}
@media (prefers-reduced-motion: reduce){ .sl-profil-weg-bahn i{transition:none;} }
body.sl-leiste-zu .sl-profil-sterne{padding:var(--s-1);}
body.sl-leiste-zu .sl-profil-sterne span{display:none;}
body.sl-leiste-zu .sl-profil{padding:var(--s-3) 0;}
/* DAS BILD MUSS MITSCHRUMPFEN. Nachgemessen: 72px in einer 70px schmalen
Leiste laufen ueber den Rand hinaus - das faellt nur auf, wenn man
zuklappt UND hinsieht. Die Groesse steht am als Inline-Mass
(slAvKreisHtml rechnet sie), deshalb hier mit !important. */
body.sl-leiste-zu .sl-profil-bild .sl-av-kreis{width:44px!important;height:44px!important;}
body.student-workspace #app-sidebar .sl-side-out{margin-top:0;border-top:1px solid var(--line);padding-top:var(--s-3);}
@media(min-width:900px){body.student-workspace #app-sidebar{width:268px!important;min-width:268px;flex-basis:268px;padding:var(--s-4)!important;}}
/* ===== DIE LEISTE DER KINDER PASST WIEDER AUF DEN SCHIRM (v2.907.2) =======
Befund Murat 30.09.2026: „cocuk menüsünde … ordaki menü tuslarini ya
kücült metinlerle birlikte yada birini cikar." Mit „Rechner" und „Spiele"
(v2.903.0/v2.904.0) stehen bis zu zehn Eintraege in der Leiste. Gemessen
bei 1024 × 690 (iPad quer im Browser): Kopf 43 + Menue 444 + Profil 241 +
Abmelden 61 = 825 px auf 664 px - Sterne, Schatzweg und „Abmelden" lagen
unter der Kante, und die Leiste rollte nicht (overflow:hidden).
Also beides: die Knoepfe werden SAMT SCHRIFT kleiner (48 → 38 px, --fs-md,
Zeichen 19 px), auf niedrigen Schirmen auch das Profil - und reicht es
dann noch immer nicht (Telefon quer), ROLLT die Leiste, statt etwas
abzuschneiden. Kein Eintrag faellt weg. */
body.student-workspace #app-sidebar{ overflow-x:hidden; overflow-y:auto; scrollbar-width:none; }
body.student-workspace #app-sidebar::-webkit-scrollbar{ display:none; }
body.student-workspace #app-sidebar .sl-side-nav{ gap:2px; padding:var(--s-3) 0; }
body.student-workspace #app-sidebar .sl-side-btn{ padding:var(--s-2) var(--s-3); font-size:var(--fs-md); }
body.student-workspace #app-sidebar .sl-side-btn svg{ width:19px; height:19px; }
@media (max-height:860px){
.sl-profil{ padding:var(--s-2) var(--s-2); gap:2px; }
body.student-workspace:not(.sl-leiste-zu) .sl-profil-bild .sl-av-kreis{ width:56px!important; height:56px!important;
font-size:var(--fs-2xl)!important; }
.sl-profil-name{ font-size:var(--fs-base); margin-top:2px; }
.sl-profil-sterne{ margin-top:var(--s-1); }
body.student-workspace #app-sidebar .sl-side-out{ padding-top:var(--s-2); }
}
.sl-work-card{min-height:100%;}
/* Der Begruessungsblock ist leer, seit der Gruss oben in der Kopfzeile steht
(v2.235.4). Er darf dann auch keinen Platz und keine Linie mehr kosten -
sonst stehen zwei Trennlinien untereinander. */
#sl-work-head:empty{display:none;}
.sl-welcome{padding:0 2px var(--s-5);border-bottom:1px solid var(--line);margin-bottom:var(--s-5);}.sl-welcome h2{margin:0 0 var(--s-2);font-size:clamp(22px,2.6vw,30px);font-weight:650;letter-spacing:-.025em;}.sl-rainbow{font-weight:850;}.sl-welcome p{margin:0;color:var(--muted);font-size:var(--fs-sm);}.sl-welcome p span::after{content:"";display:inline-block;width:4px;height:4px;margin:0 var(--s-2) 3px;border-radius:50%;background:var(--brand);}
.sl-section-title{font-size:var(--fs-xs);font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin:0 0 var(--s-3);}.sl-task-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);}
.sl-task{appearance:none;width:100%;min-height:230px;border:1px solid var(--line);background:var(--card);border-radius:var(--r-panel);padding:var(--s-4);text-align:left;font:inherit;cursor:pointer;display:flex;flex-direction:column;align-items:stretch;transition:border-color .13s,box-shadow .13s,transform .13s;overflow:hidden;}.sl-task:hover{border-color:var(--brand);box-shadow:0 10px 28px rgba(20,28,50,.09);transform:translateY(-2px);}.sl-task.done{opacity:.7;cursor:default;}
.sl-task-top{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin-bottom:var(--s-4);}.sl-task-subject{display:inline-flex;align-items:center;min-height:25px;padding:var(--s-1) var(--s-3);border-radius:var(--r-pill);background:var(--brand-soft);color:var(--brand);font-size:var(--fs-2xs);font-weight:800;}.sl-task-type{font-size:var(--fs-2xs);color:var(--muted);}.sl-task-title{display:block;font-size:var(--fs-lg);font-weight:830;color:var(--ink);line-height:1.25;margin-bottom:var(--s-2);}.sl-task-copy{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;font-size:var(--fs-sm);line-height:1.45;color:var(--muted);margin-bottom:var(--s-4);}.sl-task-deadline{display:block;margin-top:auto;border-radius:var(--r-card);padding:var(--s-3) var(--s-3);background:var(--paper);}.sl-task-deadline strong,.sl-task-deadline small{display:block;}.sl-task-deadline strong{font-size:var(--fs-base);color:var(--ink);}.sl-task-deadline small{font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;}.sl-task-deadline.bad{background:var(--bad-soft)}.sl-task-deadline.bad strong{color:var(--bad-ink)}.sl-task-deadline.soon{background:color-mix(in srgb, var(--amber) 4%, var(--card))}.sl-task-deadline.soon strong{color:var(--amber-ink)}.sl-task-deadline.ok{background:var(--ok-soft)}.sl-task-deadline.ok strong{color:var(--ok-ink)}
/* Die Stufen des Countdowns, von ruhig nach dringend (slFristInfo):
ok gruen (3+ Tage) · info blau (2 Tage) · soon gelb (1 Tag / 12+ Std) ·
warn orange (weniger als 12 Std) · bad rot (vorbei). Sie sind bewusst
auch OHNE Farbe unterscheidbar - die Zahl daneben wechselt die Einheit. */
.sl-task-deadline.info{background:var(--brand-soft)}.sl-task-deadline.info strong{color:var(--brand-dk)}
.sl-task-deadline.warn{background:color-mix(in srgb, var(--amber) 14%, var(--card))}.sl-task-deadline.warn strong{color:var(--amber-ink)}
.sl-task-deadline.done{background:var(--ok-soft)}.sl-task-deadline.done strong{color:var(--ok-ink)}.sl-task-open{display:flex;align-items:center;gap:var(--s-1);justify-content:flex-end;color:var(--brand);font-size:var(--fs-xs);font-weight:800;margin-top:var(--s-3);}.sl-task-open svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;}.sl-empty{border:1px dashed var(--line);border-radius:var(--r-card);padding:var(--s-6) var(--s-4);text-align:center;}.sl-empty strong{display:block;font-size:var(--fs-lg);margin-bottom:var(--s-1);}.sl-empty span{font-size:var(--fs-sm);color:var(--muted);}
/* ===== DIE BUECHEREI DES KINDES (v2.330.0) ================================
Dieselbe Bauteilfamilie wie die Aufgabenkarten daneben, nur ruhiger: hier
drueckt nichts, es gibt keine Frist und keinen Zustand. Deshalb Karten
ohne Farbflaeche und Zeilen statt Kacheln, sobald es um einzelne Themen
geht - eine Liste mit 40 Kacheln waere ein Bilderteppich, durch den ein
Kind nicht liest.
ALLE Werte aus dem Woerterbuch (docs/DESIGN_SYSTEM.md): keine feste Farbe,
keine Groesse neben der Skala. */
.sl-bib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-4);}
.sl-bib-fach{appearance:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-panel);padding:var(--s-5) var(--s-4);font:inherit;text-align:left;cursor:pointer;display:flex;flex-direction:column;gap:var(--s-2);transition:border-color .13s,box-shadow .13s,transform .13s;}
.sl-bib-fach:hover{border-color:var(--brand);box-shadow:0 10px 28px rgba(20,28,50,.09);transform:translateY(-2px);}
.sl-bib-fach-ico{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:var(--r-card);background:var(--brand-soft);color:var(--brand);}
.sl-bib-fach-ico svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sl-bib-fach-name{font-size:var(--fs-lg);font-weight:830;color:var(--ink);line-height:1.25;}
.sl-bib-fach-zahl{font-size:var(--fs-sm);color:var(--muted);}
.sl-bib-liste{display:flex;flex-direction:column;gap:var(--s-2);margin-bottom:var(--s-5);}
.sl-bib-thema{appearance:none;width:100%;border:1px solid var(--line);background:var(--card);border-radius:var(--r-card);padding:var(--s-3) var(--s-4);font:inherit;text-align:left;cursor:pointer;display:flex;align-items:center;gap:var(--s-3);min-height:56px;transition:border-color .13s,background .13s;}
.sl-bib-thema:hover{border-color:var(--brand);background:var(--paper);}
.sl-bib-thema-txt{flex:1;min-width:0;}
.sl-bib-thema-txt b{display:block;font-size:var(--fs-base);font-weight:750;color:var(--ink);line-height:1.3;}
.sl-bib-thema-txt small{display:block;font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;}
.sl-bib-thema svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--brand);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
/* 44px hoch, obwohl der Text kleiner ist: das Kind-Gesicht braucht groessere
Ziele (DESIGN_SYSTEM.md §2). */
.sl-bib-zurueck{appearance:none;border:0;background:transparent;color:var(--brand);font:inherit;font-weight:750;padding:0;margin-bottom:var(--s-3);cursor:pointer;display:inline-flex;align-items:center;gap:var(--s-1);min-height:44px;}
.sl-bib-zurueck svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
/* HIER STAND DIE ZWEITE FASSUNG DES FACHTEXTES (.sl-bib-seite,
.sl-bib-klassen, .sl-bib-inhalt und alles darunter - bis v2.332.0).
Sie hat den Fliesstext des Fachportals im Arbeitsplatz NACHGEBAUT:
eigene Ueberschriften, eigene Tabellen, eigenes MathJax-Rollen. Seit
v2.333.0 steht dort die echte Seite im Rahmen (fach-thema.css bringt
ihre Gestaltung selbst mit), also gibt es hier nichts mehr zu
gestalten. Was BLEIBT, sind die zwei Listen davor (.sl-bib-grid,
.sl-bib-liste) - die gehoeren dem Arbeitsplatz, nicht dem Fachportal. */
@media(max-width:640px){
.sl-bib-grid{grid-template-columns:1fr;}
}
.sl-detail{max-width:900px;}.sl-detail-back{appearance:none;border:0;background:transparent;color:var(--brand);font:inherit;font-weight:750;padding:0;cursor:pointer;}.sl-detail h2{margin:0 0 var(--s-2);}.sl-detail-copy{white-space:pre-wrap;line-height:1.6;color:var(--ink);background:var(--paper);border-radius:var(--r-card);padding:var(--s-4);margin:var(--s-4) 0;}.sl-answer{width:100%;min-height:150px;resize:vertical;border:1.5px solid var(--line);border-radius:var(--r-card);padding:var(--s-3);font:inherit;box-sizing:border-box;}.sl-detail-frame{max-width:none;}.sl-detail-bar{display:flex;align-items:center;gap:var(--s-4);margin-bottom:var(--s-3);padding-bottom:var(--s-3);border-bottom:1px solid var(--line);}.sl-detail-bar>div{min-width:0;}.sl-detail-bar strong,.sl-detail-bar span{display:block;}.sl-detail-bar strong{font-size:var(--fs-lg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.sl-detail-bar span{font-size:var(--fs-2xs);color:var(--muted);margin-top:2px;}.sl-task-frame{display:block;width:100%;height:clamp(560px,68vh,900px);border:0;border-radius:var(--r-card);background:var(--paper);}
/* ===== KOPFZEILE DES KINDES (v2.235.2) ================================
Name, Klasse und Sterne stehen oben rechts; der Gruss hat den Titel. */
.sl-ich{margin-left:auto;flex:none;display:flex;align-items:center;gap:var(--s-3);}
/* Der Gruss steht im Seitentitel und darf dort NICHT umbrechen - er ist die
einzige Zeile, die das Kind hier lesen soll. */
body.student-workspace .app-topbar .at-title{font-weight:650;letter-spacing:-.025em;}
@media(max-width:600px){.sl-ich-name{display:none;}}
.sl-ich-name{display:flex;flex-direction:column;line-height:1.2;text-align:right;}
.sl-ich-name b{font-size:var(--fs-sm);color:var(--ink);}
.sl-ich-name small{font-size:var(--fs-2xs);color:var(--muted);}
/* Die Sterne sind ein KNOPF, kein Abzeichen - er oeffnet die Tafel. Das
muss man sehen koennen, sonst probiert es niemand aus. */
.sl-sterne{appearance:none;display:inline-flex;align-items:center;gap:var(--s-1);border:1px solid var(--amber-line);
background:color-mix(in srgb, var(--amber) 4%, var(--card));color:var(--amber-ink);border-radius:var(--r-pill);padding:var(--s-1) var(--s-3) var(--s-1) var(--s-3);font:inherit;
font-size:var(--fs-sm);font-weight:800;cursor:pointer;}
.sl-sterne:hover{background:color-mix(in srgb, var(--amber) 18%, var(--card));border-color:var(--amber);}
.sl-sterne svg{width:17px;height:17px;fill:var(--amber);stroke:none;}
/* Abmelden ist der einzige Knopf, der etwas BEENDET - er sieht anders aus. */
.sl-side-out-btn{color:var(--bad)!important;}
.sl-side-out-btn svg{stroke:currentColor;}
.sl-side-out-btn:hover{background:var(--bad-soft)!important;}
/* Belohnungstafel - nur zum Ansehen. */
.sl-tafel-ov{position:fixed;inset:0;z-index:10030;background:rgba(19,28,45,.48);display:grid;place-items:center;padding:var(--s-5);}
.sl-tafel{width:min(720px,calc(100vw - 32px));max-height:min(720px,calc(var(--vh100) - 40px));
display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-panel);overflow:hidden;
box-shadow:0 22px 70px rgba(20,30,50,.3);}
.sl-tafel-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);padding:var(--s-4) var(--s-4);border-bottom:1px solid var(--line);}
.sl-tafel-kopf b{font-size:var(--fs-base);}
.sl-tafel-kopf button{border:0;background:var(--paper);border-radius:var(--r-control);width:30px;height:30px;font-size:var(--fs-lg);cursor:pointer;color:var(--muted);}
.sl-tafel-inhalt{padding:var(--s-3) var(--s-4) var(--s-4);overflow:auto;font-size:var(--fs-sm);color:var(--muted);}
.sl-tafel-liste{list-style:none;margin:0;padding:0;display:grid;gap:var(--s-1);counter-reset:platz;}
.sl-tafel-liste li{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-2) var(--s-3);border-radius:var(--r-control);background:var(--paper);}
.sl-tafel-liste li.ich{background:var(--brand-soft);outline:1.5px solid var(--brand);}
.sl-tafel-emoji{font-size:var(--fs-xl);width:28px;text-align:center;flex:none;}
.sl-tafel-name{flex:1;min-width:0;font-size:var(--fs-sm);font-weight:750;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sl-tafel-zahl{font-size:var(--fs-md);font-weight:850;color:var(--amber-ink);flex:none;}
/* Pizza-Karte der Klasse: dasselbe Bild wie bei der Lehrkraft, ohne Knoepfe. */
.sl-tafel-pizza{background:linear-gradient(180deg,#FFF6DF,#FFEFC9);border:1px solid #F0DCAB;
border-radius:var(--r-card);padding:var(--s-4) var(--s-4);margin-bottom:var(--s-4);}
.sl-pizza-kopf{font-size:var(--fs-sm);font-weight:800;color:var(--amber-ink);text-align:center;}
.sl-pizza-kopf b{color:var(--ok);}
/* Der Satz unter der Ueberschrift - dieselbe Rolle und dieselbe Gestalt wie
`.sl-weg-satz` beim eigenen Weg (v2.320.0). Zwei Fortschritte auf einem
Bildschirm sollen sich gleich lesen; nur die Farbe bleibt die des
Pizza-Blocks, damit „ihr" und „du" trotzdem unterscheidbar bleiben. */
.sl-pizza-satz{font-size:var(--fs-sm);color:var(--amber-ink);text-align:center;
margin:var(--s-1) 0 var(--s-2);opacity:.85;}
.sl-pizza-satz b{opacity:1;}
.sl-pizza-reihe{display:flex;justify-content:center;gap:var(--s-1);margin:var(--s-2) 0 var(--s-3);flex-wrap:wrap;}
.sl-pizza-st{width:30px;height:30px;}
/* ===== DER STERNENWEG (v2.317.0, Faz 5a) ================================
HIER STANDEN `.sl-beutel-reihe` und `.sl-beutel` - drei Schatzbeutel
nebeneinander mit „★ 5 · ★ 8 · ★ 11". Eine Preisliste: das Kind sah, was
es kostet, aber nicht, wo es steht; zwischen der Liste und der eigenen
Zahl oben in der Ecke musste es selbst rechnen.
Der Weg zeigt beides in einem Bild: die Stationen UND den eigenen Stand.
Er ist bewusst waagerecht und ohne Bild-Datei gebaut - eine Grafik pro
Station waere ein neuer Satz Dateien fuer etwas, das drei Farben und ein
Haken genauso sagen.
`--wf` ist die Farbe der erreichten Station; sie kommt aus dem JS, weil
dort auch `belBeutelFor()` dieselben drei Toene vergibt (EINE Quelle). */
.sl-weg{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
padding:var(--s-4) var(--s-4) var(--s-5);margin-bottom:var(--s-3);}
.sl-weg-kopf{font-size:var(--fs-sm);font-weight:800;color:var(--ink);text-align:center;}
.sl-weg-ich{color:var(--amber-ink);}
.sl-weg-satz{font-size:var(--fs-sm);color:var(--muted);text-align:center;margin:var(--s-1) 0 var(--s-5);}
.sl-weg-satz b{color:var(--ink);}
/* Die Bahn traegt die Stationen ABSOLUT - nur so sitzt jede genau ueber
ihrem Anteil. Ein Flex-Raster mit `space-between` sieht bei vier gleichen
Abstaenden identisch aus und bricht in dem Moment, in dem die Lehrkraft
die Schwellen ungleichmaessig einstellt (5/6/20 ist erlaubt). */
.sl-weg-bahn{position:relative;height:8px;margin:0 var(--s-5);}
.sl-weg-spur{position:absolute;inset:0;border-radius:var(--r-pill);background:var(--line);}
/* Die drei Stufenfarben sind DIESELBEN wie an den Stationen (slWegStationen
in index-app.js) - sonst haette der Balken bei „Mittlerer Schatz" einen
anderen Blauton als der Punkt, den er gerade erreicht. Klein und Mittel
sind echte Token; der Ton des grossen Schatzes hat keinen, und §3.1 des
Design-Systems verbietet, dafuer eine Bedeutungsfarbe zu erfinden. */
.sl-weg-voll{position:absolute;top:0;bottom:0;left:0;border-radius:var(--r-pill);
background:linear-gradient(90deg,var(--ok),var(--brand) 55%,#7A5AF8);
transition:width .8s cubic-bezier(.2,.8,.3,1);}
.sl-weg-station{position:absolute;top:50%;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;width:76px;}
.sl-weg-station i{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
background:var(--paper);border:2px solid var(--line);box-shadow:0 0 0 3px var(--card);}
.sl-weg-station i svg{width:14px;height:14px;fill:none;stroke:var(--muted);
stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;}
.sl-weg-station.auf i{background:var(--wf,var(--brand));border-color:var(--wf,var(--brand));}
.sl-weg-station.auf i svg{stroke:var(--on-brand);}
.sl-weg-station small{margin-top:var(--s-2);font-size:var(--fs-3xs);font-weight:750;
color:var(--muted);line-height:1.2;text-align:center;}
.sl-weg-station.auf small{color:var(--ink);}
.sl-weg-station em{font-style:normal;font-size:var(--fs-3xs);color:var(--muted);opacity:.75;}
@media (prefers-reduced-motion: reduce){ .sl-weg-voll{transition:none;} }
/* ===== ABZEICHEN (v2.318.0, Faz 5b) ====================================
Ein Raster, keine Reihe: fuenf Kacheln passen am Telefon nicht
nebeneinander, und waagerecht scrollen wuerde die hinteren verstecken -
gerade die noch offenen, die das Ziel sind. Erreichte tragen Farbe,
offene bleiben grau; der Unterschied muss auf einen Blick sichtbar sein,
ohne dass ein Kind den Text liest. */
.sl-abz{background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);
padding:var(--s-4);margin-bottom:var(--s-3);}
.sl-abz-kopf{font-size:var(--fs-sm);font-weight:800;color:var(--ink);
text-align:center;margin-bottom:var(--s-3);}
.sl-abz-reihe{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));
gap:var(--s-2);}
.sl-abz-stueck{display:flex;flex-direction:column;align-items:center;text-align:center;
gap:2px;padding:var(--s-3) var(--s-2);border-radius:var(--r-control);
background:var(--paper);opacity:.6;}
.sl-abz-stueck.hat{opacity:1;background:var(--amber-soft);}
.sl-abz-stueck i{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;
background:var(--card);margin-bottom:2px;}
.sl-abz-stueck i svg{width:17px;height:17px;fill:none;stroke:var(--muted);
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.sl-abz-stueck.hat i{background:var(--amber);}
.sl-abz-stueck.hat i svg{fill:var(--card);stroke:var(--card);}
.sl-abz-stueck b{font-size:var(--fs-2xs);font-weight:800;color:var(--muted);line-height:1.2;}
.sl-abz-stueck.hat b{color:var(--amber-ink);}
.sl-abz-stueck small{font-size:var(--fs-3xs);color:var(--muted);line-height:1.25;}
.sl-abz-stueck em{font-style:normal;font-size:var(--fs-3xs);font-weight:750;
color:var(--muted);opacity:.8;margin-top:2px;}
/* Schmal: die Beschriftungen der vier Stationen wuerden sich sonst
ueberlappen. Sie stehen dann nur noch an der ERREICHTEN und der naechsten
- genau die zwei, die gerade zaehlen. */
@media (max-width:520px){
.sl-weg-station{width:56px;}
/* --fs-3xs (10px) ist die Untergrenze der Skala (§4.3, abgeschlossen).
Hier stand 9.5px - ein halber Pixel unter dem Kleinsten, was wir einem
Kind zumuten. Der Platz reicht auch mit 10px: schmal stehen nur noch
zwei der vier Beschriftungen. */
.sl-weg-station small{font-size:var(--fs-3xs);}
.sl-weg-station em{display:none;}
}
/* Ein Kind je Karte - dieselbe Rasteroptik wie die Tafel der Lehrkraft. */
.sl-tafel-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:var(--s-2);}
.sl-tafel-karte{display:flex;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3);border-radius:var(--r-card);
background:var(--paper);border:1px solid var(--line);}
.sl-tafel-karte.ich{background:var(--brand-soft);border-color:var(--brand);}
.sl-tafel-mitte{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;}
.sl-tafel-mitte b{font-size:var(--fs-sm);color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.sl-tafel-schatz{font-style:normal;font-size:var(--fs-3xs);font-weight:800;border:1px solid;border-radius:var(--r-pill);
padding:1px var(--s-2);align-self:flex-start;}
.sl-tafel-fuss{margin:var(--s-4) 0 0;font-size:var(--fs-2xs);line-height:1.5;color:var(--muted);text-align:center;}
/* ===== AVATAR DES KINDES (v2.238.0, docs/PLAN_AVATAR.md §5) ============
Uebertragen aus der Sichtprobe `docs/vorschau_avatar.html` - dort wurde
das Verhalten in drei Breiten angesehen, bevor es hierher kam.
ZWEI REGELN, die den ganzen Bildschirm tragen:
* Galerie `repeat(auto-fill, minmax(88px,1fr))` - eine Regel, drei
Groessen: Telefon 3, Tablet 6, Computer 8 Spalten.
* Beruehrflaechen mindestens 44 px, Farbpunkte 40 px. 24 px wird am
Telefon danebengetippt, und dieser Bildschirm ist FUER das Telefon.
Die Umschaltung auf eine Spalte steht bei 900 px, nicht bei 640 px: ein
hoch gehaltenes Tablet ist breit genug fuer eine Galerie, aber nicht fuer
Galerie UND klebende Vorschau nebeneinander. */
/* ===== DER VERDIENTE RING (v2.319.0, Faz 5c) ===========================
Wer eine Station des Sternenwegs erreicht hat, traegt einen farbigen Kranz
um sein Bild - auf der Belohnungstafel sieht ihn die ganze Klasse.
WARUM EIN RING UND NICHT FREIGESCHALTETE AVATAR-TEILE: im Vorrat stehen
`hijab`, `cornrows`, `afro`, `gray-bun`, `glasses`, `eyepatch`, und die
Kategorie "Farben" sind Hauttoene. Das ist kein Schmuck, sondern wie ein
Kind aussieht; daraus eine Belohnung zu machen hiesse, dass es sich selbst
verdienen muss. Der Ring sagt etwas ueber die ARBEIT, nicht ueber die
Person - und laesst das Bild darunter unangetastet.
`box-shadow` statt `border`: ein Rahmen wuerde die Kreisgroesse aendern,
und die steht als Inline-Stil an acht Aufrufstellen (28px auf der Tafel,
72px im Profil, 46px im Klassenbuch). Der Schatten legt sich AUSSEN an und
verschiebt nichts. */
.sl-av-rang{position:relative;}
.sl-av-rang-klein{box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--ok);}
.sl-av-rang-mittel{box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px var(--brand);}
/* Klein/Mittel tragen Token, Gross den Ton des grossen Schatzes - derselbe
Wert wie am Ende des Sternenwegs (.sl-weg-voll). */
.sl-av-rang-gross{box-shadow:0 0 0 2.5px var(--card), 0 0 0 5px #7A5AF8,
0 0 12px rgba(122,90,248,.45);}
.sl-av-kreis{display:inline-flex;align-items:center;justify-content:center;flex:none;position:relative;
border-radius:50%;overflow:hidden;background:var(--paper);line-height:1;}
.sl-av-kreis img{width:100%;height:100%;object-fit:cover;object-position:top center;}
/* Pixel-Figuren sind 240-px-Rastergrafiken. Weichgezeichnet sehen sie aus
wie ein Fehler; `pixelated` ist hier die originalgetreue Wiedergabe. */
.sl-av-kreis img.ist-pixel{image-rendering:pixelated;object-fit:contain;object-position:center;}
.sl-av-kreis svg{width:100%;height:100%;display:block;}
/* EINE FIGUR UEBERALL (v2.854.0): eine Rennfigur zeigt im Kreis nur Kopf und
Schultern (index-app.js slAvBildHtml, Ausschnitt aus RENN_KATALOG.kopf) -
das Bild wird groesser gesetzt und verschoben, der Kreis schneidet. */
.sl-av-kreis img.ist-ausschnitt,.sl-av-mini img.ist-ausschnitt{position:absolute;max-width:none;max-height:none;
object-fit:fill;object-position:0 0;}
.sl-av-emoji{background:transparent;}
/* Der Emoji-Rueckfall bei der Lehrkraft (studentBild). Die alten Stellen
hatten den Schlagschatten einzeln im style-Attribut stehen; hier steht er
einmal, damit ein Kind mit Emoji neben einem Kind mit Avatar nicht
ploetzlich flach aussieht. */
.stud-emoji{filter:drop-shadow(0 2px 3px rgba(0,0,0,.18));}
.sl-ich-knopf{appearance:none;border:0;background:transparent;padding:0;cursor:pointer;
border-radius:50%;display:inline-flex;}
.sl-ich-knopf:hover .sl-av-kreis{outline:2px solid var(--brand);outline-offset:1px;}
.sl-ich{position:relative;}
/* HIER STANDEN DIE REGELN FUER `.sl-ich-menue` (entfernt in v2.312.1).
Das Klappmenue am Profilkreis war seit v2.281.0 unerreichbar und ist mit
seinem Aufrufer zusammen entfallen - die Begruendung steht bei
`slAufgabeOeffnen` in static/js/index-app.js. Der Kreis oeffnet jetzt
direkt den Bildwaehler (`.sl-av-*`, gleich darunter). */
.sl-av-ov{position:fixed;inset:0;z-index:10035;background:rgba(19,28,45,.48);display:grid;place-items:center;padding:var(--s-5);}
.sl-av-box{width:min(1040px,calc(100vw - 32px));height:min(760px,calc(var(--vh100) - 40px));
display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-panel);overflow:hidden;
box-shadow:0 22px 70px rgba(20,30,50,.3);}
.sl-av-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
padding:var(--s-4) var(--s-4);border-bottom:1px solid var(--line);flex:none;}
.sl-av-kopf b{font-size:var(--fs-base);}
.sl-av-kopf button{border:0;background:var(--paper);border-radius:var(--r-control);width:34px;height:34px;
font-size:var(--fs-lg);cursor:pointer;color:var(--muted);}
.sl-av-leib{flex:1;min-height:0;display:grid;grid-template-columns:38% 1fr;}
/* Die Vorschau KLEBT: beim Blaettern durch 105 Koepfe muss die Figur stehen
bleiben, sonst sieht das Kind nicht, was es gerade waehlt. */
.sl-av-vorschau{border-right:1px solid var(--line);background:var(--paper);position:sticky;top:0;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s-3);padding:var(--s-4);
position:relative;}
/* DIE GROSSE VORSCHAU IST KEIN KREIS. Eine stehende Figur hat das
Seitenverhaeltnis 1179:3291 - in einem Kreis stuende sie als schmaler
Strich in der Mitte, und die gewaehlte Haltung waere nicht zu erkennen.
Also eine hohe Flaeche mit weichen Ecken; rund wird es erst dort, wo der
Avatar spaeter wirklich erscheint (der Mini-Kreis daneben). */
.sl-av-gross{flex:1;width:100%;max-width:230px;min-height:0;border-radius:var(--r-panel);
overflow:hidden;display:grid;place-items:center;}
.sl-av-gross svg{width:100%;height:100%;}
.sl-av-gross img{max-width:100%;max-height:100%;object-fit:contain;}
.sl-av-gross img.ist-pixel{image-rendering:pixelated;}
/* Derselbe Avatar im echten Format der Belohnungstafel - OBEN LINKS und ohne
Beschriftung (v2.240.0). Unten am Rand ging er unter, und der Satz daneben
erklaerte etwas, das ein Kind an einem Kopf im Kreis von selbst sieht.
Ohne ihn waere die grosse Figur ein Versprechen, das der Alltag nicht
haelt - er bleibt also, nur an der richtigen Stelle. */
.sl-av-mini{position:absolute;top:12px;left:12px;z-index:2;
width:44px;height:44px;border-radius:50%;overflow:hidden;flex:none;
display:grid;place-items:center;background:var(--paper);
box-shadow:0 0 0 2px var(--card);}
.sl-av-mini svg{width:100%;height:100%;display:block;}
.sl-av-mini img{width:100%;height:100%;object-fit:cover;object-position:top center;}
.sl-av-mini img.ist-pixel{image-rendering:pixelated;object-fit:contain;object-position:center;}
.sl-av-vorschau small{font-size:var(--fs-2xs);color:var(--muted);text-align:left;}
.sl-av-rechts{display:flex;flex-direction:column;min-width:0;min-height:0;}
.sl-av-reiter{display:flex;gap:var(--s-1);padding:var(--s-3) var(--s-4) 0;flex:none;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sl-av-reiter button{flex:none;appearance:none;border:1.5px solid var(--line);background:var(--card);
color:var(--muted);font:inherit;font-weight:750;font-size:var(--fs-sm);border-radius:var(--r-pill);
padding:var(--s-2) var(--s-3);cursor:pointer;min-height:44px;white-space:nowrap;}
.sl-av-reiter button.on{background:var(--brand-soft);border-color:var(--brand);color:var(--brand);}
/* Die Kategorien im Kurator scrollen WAAGERECHT. Eine senkrechte Liste
fraesse am Telefon das halbe Bild (PLAN_AVATAR.md §5). */
.sl-av-chips{display:flex;gap:var(--s-1);padding:var(--s-3) var(--s-4) 0;flex:none;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.sl-av-chips button{flex:none;appearance:none;border:1.5px solid var(--line);background:var(--card);
color:var(--muted);font:inherit;font-weight:750;font-size:var(--fs-sm);border-radius:var(--r-pill);
padding:var(--s-2) var(--s-3);cursor:pointer;min-height:44px;white-space:nowrap;}
.sl-av-chips button.on{background:var(--ink);border-color:var(--ink);color:var(--card);}
/* `grid-auto-rows:min-content` (v2.854.0): ohne sie bemass Chrome die Zeilen
nach der Mindesthoehe der Kachel (88 px), waehrend die Kachel quadratisch
breiter wird - am Telefon (Kachel 109 px) lagen die Reihen uebereinander.
Gefunden beim Browserlauf 26.09.2026; am Computer (Kachel unter 88 px)
aendert sich nichts. */
.sl-av-galerie{flex:1;min-height:0;overflow:auto;padding:var(--s-3) var(--s-4);font-size:var(--fs-sm);color:var(--muted);
display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));grid-auto-rows:min-content;gap:var(--s-2);align-content:start;}
.sl-av-kachel{appearance:none;border:1.5px solid var(--line);background:var(--card);border-radius:var(--r-card);
padding:var(--s-1);cursor:pointer;aspect-ratio:1;min-height:88px;display:grid;place-items:center;overflow:hidden;}
.sl-av-kachel:hover{border-color:color-mix(in srgb, var(--brand) 22%, var(--card));}
.sl-av-kachel.on{border-color:var(--brand);background:var(--brand-soft);outline:1.5px solid var(--brand);}
.sl-av-kachel img{max-width:100%;max-height:100%;object-fit:contain;}
.sl-av-kachel img.ist-pixel{image-rendering:pixelated;}
/* Die Kacheln aus dem Katalog der Rennfiguren (warteplatz.js wpFigurenHtml)
markieren die Wahl mit `an`; Pixelkunst bleibt scharf - dieselbe Regel wie
im Rennmotor (der Pfad entscheidet, …/pixel/ = scharf). */
.sl-av-kachel.an{border-color:var(--brand);background:var(--brand-soft);outline:1.5px solid var(--brand);}
/* Die Katalogbilder tragen width/height="240" (die Kachel haelt ihre Form,
solange das Bild noch laedt) - hier fuellen sie die Kachel quadratisch. */
.sl-av-kachel[data-rennfigur] img{display:block;width:100%;height:auto;max-height:none;aspect-ratio:1/1;}
.sl-av-kachel img[src*="/pixel/"]{image-rendering:pixelated;}
.sl-av-kachel img:not([src*="/pixel/"]){image-rendering:auto;}
.sl-av-reiter button:focus-visible,.sl-av-chips button:focus-visible,.sl-av-kachel:focus-visible,
.sl-av-seg button:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
/* „Gezeichnet" unter „Menschen" (bis v2.853.0 zwei eigene Reiter): eine
Ueberschrift ueber die ganze Breite, daneben der Schalter Bunt/Umriss. */
.sl-av-abschnitt{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;
gap:var(--s-3);margin:var(--s-3) 0 0;}
.sl-av-abschnitt b{font-size:var(--fs-base);color:var(--ink);}
.sl-av-seg{display:inline-flex;gap:2px;padding:3px;border-radius:var(--r-pill);background:var(--paper);}
.sl-av-seg button{appearance:none;border:0;background:transparent;color:var(--muted);font:inherit;
font-weight:750;font-size:var(--fs-sm);border-radius:var(--r-pill);padding:var(--s-1) var(--s-3);
min-height:36px;cursor:pointer;}
.sl-av-seg button.on{background:var(--card);color:var(--ink);box-shadow:0 1px 3px rgba(20,30,50,.14);}
/* Der Reitername: am Computer lang, am Telefon kurz (Regel unten, 640px). */
.sl-av-kurz{display:none;}
/* SELBST BAUEN IN DREI STILEN (v2.855.0): die Stilzeile (Mensch · Roboter ·
Gezeichnet), Kacheln mit der ganzen Figur, runde Farbfelder, der Wuerfel
oben rechts in der Vorschau. Beruehrflaechen 44 px wie ueberall hier. */
.sl-av-stile{display:flex;padding:var(--s-3) var(--s-4) 0;flex:none;}
.sl-av-stile .sl-av-seg button{min-height:40px;padding:var(--s-1) var(--s-4);}
.sl-av-baukachel{position:relative;}
.sl-av-baukachel svg{width:100%;height:100%;display:block;}
.sl-av-ohne-marke{position:absolute;left:var(--s-1);bottom:var(--s-1);font-size:var(--fs-3xs);font-weight:800;
color:var(--muted);background:var(--card);border-radius:var(--r-pill);padding:0 var(--s-1);}
.sl-av-farben{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s-2);}
.sl-av-farbe{appearance:none;width:44px;height:44px;padding:0;border-radius:50%;border:3px solid var(--card);
box-shadow:0 0 0 1.5px var(--line);cursor:pointer;}
.sl-av-farbe.on{box-shadow:0 0 0 3px var(--brand);}
.sl-av-farbe:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
.sl-av-wuerfel{position:absolute;top:var(--s-3);right:var(--s-3);z-index:2;width:44px;height:44px;
border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);
display:grid;place-items:center;cursor:pointer;}
.sl-av-wuerfel:hover{border-color:var(--brand);color:var(--brand);}
.sl-av-wuerfel:focus-visible{outline:3px solid var(--brand);outline-offset:2px;}
.sl-av-wuerfel svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;
stroke-linecap:round;stroke-linejoin:round;}
.sl-av-ohne{font-size:var(--fs-xs);font-weight:800;color:var(--muted);}
/* Die Haltung wird als Bild gewaehlt, mit dem Wort darunter - "Sitzend"
allein sagt weniger als die Figur. */
.sl-av-haltung{gap:2px;grid-template-rows:1fr auto;}
.sl-av-haltung b{font-size:var(--fs-3xs);font-weight:800;color:var(--muted);}
.sl-av-haltung.on b{color:var(--brand);}
.sl-av-paletten{grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:var(--s-3);}
.sl-av-pal{appearance:none;border:1.5px solid var(--line);background:var(--card);border-radius:var(--r-card);
padding:var(--s-3);cursor:pointer;min-height:88px;display:flex;flex-direction:column;
align-items:center;justify-content:center;gap:var(--s-2);}
.sl-av-pal.on{border-color:var(--brand);outline:1.5px solid var(--brand);}
.sl-av-pal-punkte{display:flex;gap:var(--s-1);}
/* 40 px, nicht 24: ein Farbpunkt ist am Telefon ein Ziel, kein Symbol. */
.sl-av-pal-punkte i{width:40px;height:40px;border-radius:50%;border:1px solid rgba(0,0,0,.12);}
.sl-av-pal b{font-size:var(--fs-xs);}
/* Speichern klebt unten - in Daumenreichweite, und ausdruecklich: kein
Autosave (PLAN_AVATAR.md §5). */
.sl-av-fuss{flex:none;border-top:1px solid var(--line);padding:var(--s-3) var(--s-4);background:var(--card);
display:flex;gap:var(--s-3);align-items:center;justify-content:space-between;}
.sl-av-fuss small{font-size:var(--fs-2xs);color:var(--muted);min-width:0;overflow:hidden;
text-overflow:ellipsis;white-space:nowrap;}
.sl-av-sichern{flex:none;min-height:44px;padding:var(--s-3) var(--s-5);font-weight:800;}
.sl-av-sichern:disabled{opacity:.5;cursor:default;}
@media(max-width:900px){
/* NIE nebeneinander: Vorschau als fester Streifen oben, darunter Reiter,
darunter die scrollende Galerie. Genau das Muster, das am Telefon
funktioniert. */
.sl-av-ov{padding:0;}
.sl-av-box{width:100vw;height:var(--vh100);border-radius:0;}
.sl-av-leib{grid-template-columns:1fr;grid-template-rows:170px 1fr;}
.sl-av-vorschau{border-right:0;border-bottom:1px solid var(--line);flex-direction:row;
gap:var(--s-4);padding:var(--s-3) var(--s-4);justify-content:flex-start;}
.sl-av-gross{max-width:110px;height:100%;}
.sl-av-so{flex-direction:column;align-items:flex-start;gap:var(--s-1);}
.sl-av-vorschau small{text-align:left;}
}
/* TELEFON (v2.854.0): die sechs Reiter des Figurenfensters als EINE Leiste
(Anweisung Murat 26.09.2026 fuer die Rennauswahl: „mobilde alle pixel filan
butonlari yan yana olmali tek satirda … iki satir olamaz" - sie gilt fuer
das eine Fenster weiter). Kurze Namen, gleich geteilt, die Schrift waechst
mit dem Schirm. Nur hier - Tablet und Computer behalten die Pillen. */
@media (max-width:640px){
.sl-av-lang{display:none;}
.sl-av-kurz{display:inline;}
.sl-av-reiter{gap:0;margin:var(--s-2) var(--s-3) 0;padding:3px;border-radius:var(--r-card);
background:var(--surface-subtle);overflow:hidden;}
.sl-av-reiter button{flex:1 1 auto;min-width:0;padding:var(--s-1) 3px;border:0;border-radius:var(--r-control);
background:transparent;font-size:clamp(10px,3.2vw,12px);letter-spacing:-.01em;}
.sl-av-reiter button.on{background:var(--brand);color:var(--on-brand);}
.sl-av-reiter button:focus-visible{outline-offset:-2px;}
}
/* ===== NACHRICHTEN ALS SPRECHBLASEN ===================================
Die Farbe gehoert zur Lehrkraft, nicht zur Nachricht - sie wird aus dem
Namen gerechnet (slBlasenFarbe) und ist damit immer dieselbe. */
.sl-blasen{display:grid;gap:var(--s-4);max-width:760px;}
.sl-blase-zeile{display:flex;align-items:flex-start;gap:var(--s-3);}
.sl-blase-kopf{flex:none;width:38px;height:38px;border-radius:50%;border:1.5px solid;
display:flex;align-items:center;justify-content:center;font-size:var(--fs-sm);font-weight:850;}
.sl-blase{position:relative;flex:1;min-width:0;border:1.5px solid;border-radius:var(--r-card);
border-top-left-radius:5px;padding:var(--s-3) var(--s-4);}
/* Der kleine Zipfel zum Kopf hin - das ist es, was eine Blase zur Blase macht. */
.sl-blase::before{content:"";position:absolute;left:-8px;top:11px;width:0;height:0;
border:7px solid transparent;border-right-color:inherit;border-left:0;}
.sl-blase-wer{font-size:var(--fs-sm);font-weight:800;display:flex;align-items:baseline;
justify-content:space-between;gap:var(--s-3);flex-wrap:wrap;}
.sl-blase-wer span{font-size:var(--fs-2xs);font-weight:650;color:var(--muted);}
.sl-blase p{margin:var(--s-2) 0 0;font-size:var(--fs-md);line-height:1.55;white-space:pre-wrap;color:var(--ink);}
.sl-blase small{display:block;margin-top:var(--s-2);font-size:var(--fs-3xs);color:var(--muted);}
@media(max-width:600px){.sl-blase-kopf{width:32px;height:32px;font-size:var(--fs-xs);}}
/* ===== EINKLAPPBARE LEISTE ============================================
Zugeklappt bleiben die Symbole stehen. Eine Leiste, die ganz verschwindet,
nimmt dem Kind den Weg zurueck - und der Klappknopf muesste dann irgendwo
anders wieder auftauchen. */
/* DIESELBE BAUART WIE DIE LEISTE DER LEHRKRAFT (`.sb-top`/`.sb-toggle`,
v2.240.0). Vorher schwebte der Klappknopf absolut ueber dem Kopf; klappte
man zu, verschwand das Logo und uebrig blieb ein grosser Pfeil im Nichts.
Jetzt: eine Zeile mit Logo und Knopf, der Knopf 28 px mit weichem Grund
statt Rahmen - genau wie nebenan. Zwei Leisten, die sich verschieden
bedienen lassen, sind eine zu viel. */
/* Der Trennstrich kommt aus der alten v2.230.0-Regel, die oben gelöscht
wurde – er ist dasselbe Bild wie bei der Lehrkraft (`.sb-top`). */
/* DAS LOGO STEHT MITTIG (Befund Murat 12.08.2026: "sol üstteki logo
ortalansin"). Es hing links am Rand, waehrend der Klappknopf rechts
stand - eine Zeile mit zwei Dingen an den Enden und nichts dazwischen.
Der Knopf liegt jetzt ABSOLUT rechts; nur so kann das Logo in der ganzen
Breite mittig sitzen und nicht nur in dem, was der Knopf uebriglaesst. */
.sl-side-head{position:relative;display:flex;align-items:center;justify-content:center;
gap:var(--s-2);
padding:2px var(--s-1) var(--s-3);margin-bottom:var(--s-1);border-bottom:1px solid var(--line);}
.sl-side-logo{height:28px;width:auto;max-width:100%;flex:none;}
.sl-logo-marke{display:none;height:22px;}
.sl-side-klapp{position:absolute;right:var(--s-1);top:0;appearance:none;border:none;cursor:pointer;padding:0;
width:28px;height:28px;border-radius:var(--r-control);flex:none;color:var(--muted);
background:rgba(127,127,127,.08);display:flex;align-items:center;justify-content:center;
transition:background .14s,color .14s;}
.sl-side-klapp:hover{background:rgba(127,127,127,.16);color:var(--ink);}
.sl-side-klapp svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;transition:transform .22s;}
body.sl-leiste-zu .sl-side-klapp svg{transform:rotate(180deg);}
@media(min-width:900px){
body.student-workspace.sl-leiste-zu #app-sidebar{width:70px!important;min-width:70px;flex-basis:70px;padding:var(--s-4) var(--s-2)!important;}
/* Zugeklappt: kompakte Marke + Pfeil nebeneinander, mittig - wie nebenan. */
body.sl-leiste-zu .sl-side-head{justify-content:center;gap:3px;padding:2px 2px var(--s-3);}
body.sl-leiste-zu .sl-logo-voll{display:none;}
body.sl-leiste-zu .sl-logo-marke{display:block;}
/* Zugeklappt ist die Leiste 70px schmal: dort stehen Marke und Pfeil
nebeneinander in EINER Reihe - absolut positioniert laege der Pfeil
ueber dem Logo. */
body.sl-leiste-zu .sl-side-klapp{position:static;margin-left:2px;}
body.sl-leiste-zu .sl-side-btn span:not(.sl-side-count){display:none;}
body.sl-leiste-zu .sl-side-btn{justify-content:center;padding:var(--s-3) 0;position:relative;}
body.sl-leiste-zu .sl-side-count{position:absolute;top:4px;right:8px;margin:0;min-width:17px;height:17px;font-size:var(--fs-3xs);}
}
/* UNTER 900 px IST DIE LEISTE EINE SCHUBLADE, KEINE SPALTE - dort gibt es
nichts einzuklappen (die Schublade geht ohnehin ganz zu). Alle Regeln
oben stecken deshalb in `min-width:900px`; bliebe der Knopf sichtbar,
stuende im Handy-Menue eines Kindes eine Schaltflaeche, die nichts tut.
Genau dieselbe Zeile hat die Leiste der Lehrkraft (`.sb-toggle`,
@media max-width:899.98px). */
@media (max-width:899.98px){
body.student-workspace #app-sidebar .sl-side-klapp{display:none;}
body.student-workspace #app-sidebar .sl-logo-voll{display:block;}
body.student-workspace #app-sidebar .sl-logo-marke{display:none;}
}
/* Der Kopf ueber einem eingebetteten Inhalt: EINE Zeile. */
.sl-detail-bar-schlank{align-items:center;gap:var(--s-3);padding-bottom:var(--s-3);margin-bottom:var(--s-3);}
.sl-back-rund{flex:none;width:36px;height:36px;border:1px solid var(--line);background:var(--card);
border-radius:var(--r-control);cursor:pointer;padding:0;color:var(--brand);}
.sl-back-rund:hover{background:var(--brand-soft);border-color:var(--brand);}
.sl-back-rund svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.2;
stroke-linecap:round;stroke-linejoin:round;}
@media(max-width:720px){.sl-detail-bar-schlank{flex-direction:row;align-items:center;}}
.sl-message-banner{appearance:none;width:100%;border:1px solid color-mix(in srgb, var(--brand) 25%, var(--card));background:color-mix(in srgb, var(--brand) 6%, var(--card));color:var(--ink);border-radius:var(--r-card);padding:var(--s-4) var(--s-4);text-align:left;font:inherit;cursor:pointer;margin-bottom:var(--s-4);display:flex;align-items:center;gap:var(--s-4)}.sl-message-banner span{font-size:var(--fs-2xs);font-weight:800;color:var(--brand);white-space:nowrap}.sl-message-banner strong{font-size:var(--fs-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.sl-message-list{display:grid;gap:var(--s-3);max-width:900px}.sl-message{border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-4);background:var(--card)}.sl-message-head{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-3)}.sl-message-head strong{font-size:var(--fs-md)}.sl-message-head span,.sl-message small{font-size:var(--fs-2xs);color:var(--muted)}.sl-message p{white-space:pre-wrap;font-size:var(--fs-md);line-height:1.55;margin:var(--s-3) 0}
body.student-embedded #app-sidebar,body.student-embedded #sb-overlay,body.student-embedded .app-topbar,body.student-embedded .topbar{display:none!important;}body.student-embedded{display:block!important;max-width:none!important;min-height:0!important;margin:0!important;padding:0!important;background:var(--card)!important;}body.student-embedded .wrap{max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:var(--s-4)!important;border:0!important;border-radius:0!important;box-shadow:none!important;}
/* DIE LEERE FLAECHE UNTER EINER KURZEN MELDUNG (v2.282.0, Befund Murat
12.08.2026: "unter dem Ergebnis eine grosse leere graue Flaeche"). Die
Startkarte des Quiz bekommt mit einem Quiz-Design `min-height:100dvh` -
gedacht fuer die eigene Seite, wo sie den Bildschirm fuellen soll. Im
Rahmen des Schuelerarbeitsplatzes ist 100dvh die Hoehe des RAHMENS: eine
dreizeilige Meldung ("Schon erledigt") blaeht die Karte damit auf volle
Rahmenhoehe auf, und darunter steht getoente Leere. Der Rahmen bringt seine
Hoehe selbst mit, die Karte darf also so hoch sein wie ihr Inhalt.
Das Quiz selbst ist ausgenommen - dort ist das Fuellen richtig. */
body.student-embedded #screen-student-welcome{min-height:0!important;}
@media(max-width:720px){.sl-task-grid{grid-template-columns:1fr}.sl-task{min-height:210px;padding:var(--s-4)}.sl-welcome{margin-bottom:var(--s-4)}.sl-detail-bar{align-items:flex-start;flex-direction:column;gap:var(--s-2)}.sl-task-frame{height:72vh}}
/* ===== AUFGABENZENTRALE (v2.230.0) =====================================
MIGRIERT MIT SCHRITT 6 (v2.278.0, docs/DESIGN_SYSTEM.md §10) - "Kern des
Arbeitsablaufs". Nach den vier oeffentlichen Seiten und dem Cockpit ist das
der Bildschirm, auf dem eine Lehrkraft ihre eigentliche Arbeit macht.
WAS GEZOGEN WURDE: 18 Schriftgroessen auf die Skala (die halben Pixel
9.5/11.5/12.5/15.5 sind weg - hier greifen zum ersten Mal --fs-3xs und
--fs-2xs aus §4.3, entschieden in v2.271.0), 11 Ecken nach Bauteil (§4.1),
28 Abstaende auf die Reihe (§4.2) und zwei feste Farben.
WAS ABSICHTLICH STEHENBLEIBT - und das ist die wichtigste Zeile hier:
die fuenf Zustandstoene .az-k-ok/-info/-soon/-warn/-bad. Sie gehoeren NICHT
allein diesem Bildschirm: dieselben Werte stehen in .sl-task-deadline
(Schuelerarbeitsplatz, Schritt 8) - der Kommentar dort sagt es ausdruecklich,
"dieselben Stufen wie beim Kind". Und sie sind NICHT wertgleich mit dem
Woerterbuch: #EAF7F0 gegen --ok-soft #E4F6EC, #147A45 gegen --ok-ink
#0E7A43, und so weiter bei allen fuenf.
Sie hier zu ziehen hiesse also, die Lehrer- und die Kinderseite fuer die
Dauer von zwei Migrationsschritten AUSEINANDERLAUFEN zu lassen - bei
Toenen, deren einziger Zweck es ist, auf beiden Seiten dasselbe zu
bedeuten. Sie wandern gemeinsam in Schritt 8. Wer sie vorher anfasst,
loest genau den Fehler aus, den das Design-System verhindern soll.
ZWEI KLEINIGKEITEN, die kein Token vertragen:
* Der Pfeil im Auswahlfeld ist eine data-URI (SVG im CSS). Dort kann keine
Variable stehen - eine data-URI wird nicht als CSS ausgewertet. Der Ton
%236B7280 ist von --muted (#6A7384) nicht unterscheidbar.
* `gap:1px` in .az-k-daten>span ist kein Abstand aus der Reihe, sondern
der Ausgleich zwischen Beschriftung und Zahl INNERHALB einer Zeile.
4px waeren hier sichtbar zu viel; die Kachel wuerde um 9px hoeher.
TOTE REGELN ENTFERNT: .az-list, .az-item (mit :hover und >span),
.az-progress (mit strong) und der ganze .az-message-Block. Die Liste
wurde in v2.236.1 durch Karten ersetzt, die Mitteilungsleiste ist mit
v2.242.0 in die Nachrichten gewandert - der Kommentar dazu stand seit
damals hier, die Regeln aber auch. 16 Regeln, die kein Markup mehr
erreicht. */
/* FILTER LINKS, AKTIONEN RECHTS (Murat 22.08.2026: "diger iki acilir
filtre tuslarini sola daya"). Vorher waren die beiden Auswahlfelder
eigene Flex-Kinder neben den Knoepfen - `space-between` schob das
zweite in die Mitte, und dort stand es ohne Bezug zum ersten. Jetzt
sind sie EINE Gruppe. */
.az-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);margin:0 0 var(--s-4);min-width:0}.az-toolbar-filter{display:flex;align-items:center;gap:var(--s-2);min-width:0;flex:1}.az-toolbar select{appearance:none;-webkit-appearance:none;height:42px;min-width:190px;max-width:280px;border:1px solid var(--line);border-radius:var(--r-control);background-color:var(--card);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 11px center;color:var(--ink);font:inherit;font-size:var(--fs-sm);font-weight:700;padding:0 38px 0 13px;box-sizing:border-box;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.az-toolbar-actions{display:flex;align-items:center;gap:var(--s-2)}.az-tool-btn{appearance:none;height:42px;border:1px solid var(--brand);border-radius:var(--r-control);background:var(--brand);color:var(--card);padding:0 16px;font:inherit;font-size:var(--fs-sm);font-weight:750;white-space:nowrap;cursor:pointer}.az-tool-btn.ghost{background:var(--card);color:var(--brand)}
.az-form select,.az-form input,.az-form textarea{width:100%;min-width:0;font:inherit;border:1px solid var(--line);border-radius:var(--r-control);background:var(--card);color:var(--ink);padding:10px 11px;box-sizing:border-box;}.az-form select,.az-form input{height:42px;min-height:42px;line-height:20px}.az-form input[type=file]{height:42px;padding:6px 11px;line-height:28px;font-size:var(--fs-sm)}.az-form input[type=file]::file-selector-button{box-sizing:border-box;font:inherit;font-size:var(--fs-sm);font-weight:750;margin:0 10px 0 0;padding:0 12px;height:28px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper);color:var(--ink);cursor:pointer}.az-form input[type=file]::-webkit-file-upload-button{box-sizing:border-box;font:inherit;font-size:var(--fs-sm);font-weight:750;margin:0 10px 0 0;padding:0 12px;height:28px;border:1px solid var(--line);border-radius:var(--r-control);background:var(--paper);color:var(--ink);cursor:pointer}.az-form select:disabled{color:var(--muted);background:var(--paper)}.az-form{border:0;background:transparent;padding:0;margin:0;}.az-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:var(--s-2);margin-bottom:var(--s-4);}.az-type{appearance:none;border:1px solid var(--line);background:var(--card);border-radius:var(--r-control);padding:var(--s-3) var(--s-2);font:inherit;font-size:var(--fs-sm);font-weight:750;color:var(--ink);cursor:pointer;}.az-type.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
/* Vier Spalten statt zwei: Klasse, Fach, Thema und Inhalt gehoeren in EINE
Reihe - sie sind eine Kaskade, kein Stapel Einzelfelder (Murat 09.08.2026).
Titel/Frist/Uhrzeit teilen sich die zweite Reihe im Verhaeltnis 2:1:1. */
.az-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);}.az-field{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;}.az-field.wide{grid-column:1/-1;}
.az-field.az-titelzeile{grid-column:span 2;}
.az-field.az-fristfeld,.az-field.az-uhrfeld{grid-column:span 1;}
@media(max-width:1100px){.az-fields{grid-template-columns:repeat(2,minmax(0,1fr));}.az-field.az-titelzeile{grid-column:1/-1;}}.az-field label{font-size:var(--fs-2xs);font-weight:750;color:var(--muted);}.az-actions{display:flex;justify-content:flex-end;gap:var(--s-2);margin-top:var(--s-3);}.az-title{display:block;font-weight:800;font-size:var(--fs-md);}.az-meta{display:block;font-size:var(--fs-xs);color:var(--muted);margin-top:var(--s-1);}.az-bar{display:block;width:100px;height:5px;background:var(--line);border-radius:var(--r-pill);overflow:hidden;margin-top:var(--s-1);}.az-bar i{display:block;height:100%;background:var(--ok);}.az-empty{padding:var(--s-5);text-align:center;border:1px dashed var(--line);border-radius:var(--r-card);color:var(--muted);display:flex;flex-direction:column;align-items:center;gap:var(--s-2);}
/* Der Grund steht klein, aber er STEHT da - sonst braucht jede Stoerung den
Server-Log (siehe openAufgabenzentrale, v2.235.1). */
.az-fehlergrund{font-size:var(--fs-xs);color:var(--muted);max-width:520px;line-height:1.5;word-break:break-word;}
.az-empty .btn{margin:0;}
/* Der zweite Satz im leeren Bereich: er sagt, was dieser Ort ist -
frueher stand dort ein Knopf zum anderen Ort (v2.362.0). */
.az-empty-sub{font-size:var(--fs-xs);line-height:1.55;max-width:460px;color:var(--muted);}
/* .az-detail-head/.az-kinder/.az-kind sind mit v2.308.0 entfallen: der
Fortschritt ist keine Namensliste mit Fliesstext mehr, sondern eine
Tabelle mit Spalten (.az-tab weiter unten). Die Regeln erreichte danach
kein Markup mehr - test_die_klassen_die_bleiben_werden_auch_benutzt. */
/* ---- Aufgabenliste als Karten (v2.236.1) --------------------------------
Zwei bis drei je Reihe; jede Angabe hat ihren festen Platz, damit sich
zwei Aufgaben vergleichen lassen. In einer Zeile stand alles als
Fliesstext hintereinander und war nur zu LESEN, nicht zu ueberblicken. */
.az-karten{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:var(--s-3);}
.az-karte{appearance:none;text-align:left;font:inherit;color:inherit;cursor:pointer;
display:flex;flex-direction:column;gap:var(--s-2);border:1px solid var(--line);background:var(--card);
border-radius:var(--r-card);padding:var(--s-4);min-width:0;}
.az-karte:hover{border-color:var(--brand);box-shadow:0 8px 22px rgba(20,28,50,.08);}
.az-k-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-2);}
.az-k-typ{font-size:var(--fs-2xs);font-weight:800;color:var(--brand);background:var(--brand-soft);
border-radius:var(--r-pill);padding:var(--s-1) var(--s-2);}
.az-k-klasse{font-size:var(--fs-2xs);font-weight:750;color:var(--muted);}
.az-k-titel{font-size:var(--fs-base);font-weight:830;line-height:1.25;overflow:hidden;
display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;}
.az-k-fach{font-size:var(--fs-2xs);color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* EINZELAUFGABE (v2.589.0): die Marke "Nur für " auf der Karte und das
feste Empfängerschild in der Maske. Beide tragen den Violett-Ton des
Wörterbuchs – dieselbe Farbe wie die PIN im Klassenbuch, weil beides
dasselbe meint: es geht um EIN Kind, nicht um die Klasse. */
.az-k-nur{align-self:flex-start;font-size:var(--fs-2xs);font-weight:800;color:var(--violett-ink);
background:var(--violett-soft);border-radius:var(--r-pill);padding:var(--s-1) var(--s-2);
max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
/* OHNE FACH (F3, v2.805.0): die Noten dieser Aufgabe zählen in keine
Zeugnisnote. Bernstein heißt „Hinweis/Achtung" (DESIGN_SYSTEM §3.1). */
.az-k-ohnefach{align-self:flex-start;font-size:var(--fs-2xs);font-weight:800;color:var(--amber-ink);
background:var(--amber-soft);border-radius:var(--r-pill);padding:var(--s-1) var(--s-2);white-space:nowrap;}
/* Entwurf (PLAN_PDF_ABGABE B3): Kinder sehen ihn nicht. */
.az-k-entwurf{align-self:flex-start;font-size:var(--fs-2xs);font-weight:800;color:var(--brand-dk);
background:var(--brand-soft);border-radius:var(--r-pill);padding:var(--s-1) var(--s-2);white-space:nowrap;}
.az-nurkind{display:flex;align-items:center;gap:var(--s-1);height:42px;box-sizing:border-box;
border:1px solid var(--violett);background:var(--violett-soft);color:var(--violett-ink);
border-radius:var(--r-control);padding:0 11px;min-width:0;overflow:hidden;}
.az-nurkind b{font-size:var(--fs-md);font-weight:830;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.az-nurkind span{font-size:var(--fs-2xs);font-weight:750;opacity:.85;white-space:nowrap;flex:none;}
.az-k-daten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-1);margin-top:var(--s-1);}
.az-k-daten>span{display:flex;flex-direction:column;gap:1px;font-size:var(--fs-xs);font-weight:750;
background:var(--paper);border-radius:var(--r-control);padding:var(--s-1) var(--s-2);min-width:0;}
.az-k-daten small{font-size:var(--fs-3xs);font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);}
/* Dieselben Stufen wie beim Kind - beide Seiten benutzen dasselbe Wort. */
.az-k-ok{background:var(--ok-soft)!important;color:var(--ok-ink);}
.az-k-info{background:var(--brand-soft)!important;color:var(--brand-dk);}
.az-k-soon{background:color-mix(in srgb, var(--amber) 4%, var(--card))!important;color:var(--amber-ink);}
.az-k-warn{background:color-mix(in srgb, var(--amber) 14%, var(--card))!important;color:var(--amber-ink);}
.az-k-bad{background:var(--bad-soft)!important;color:var(--bad-ink);}
.az-k-frei{color:var(--muted);}
.az-k-fuss{margin-top:auto;padding-top:var(--s-2);border-top:1px solid var(--line);
display:flex;flex-direction:column;gap:var(--s-1);}
.az-k-fuss b{font-size:var(--fs-sm);}
.az-k-fuss small{font-size:var(--fs-2xs);color:var(--muted);}
.az-k-fuss .az-bar{width:100%;}
/* Die Mitteilungs-Leiste der Aufgabenzentrale ist mit v2.242.0 entfallen -
Durchsagen leben vollstaendig in den Nachrichten (.pf-klwahl, .pf-klkachel).
Wer sie hier wieder einbaut, hat zwei Orte fuer dieselbe Sache. */
.az-section-label{font-size:var(--fs-2xs);text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:var(--muted);margin:var(--s-5) 0 var(--s-2)}
/* VERLAUF: abgelaufene UND geschlossene Aufgaben. Sie verschwinden NICHT -
die Lehrkraft muss nachlesen koennen, wer abgegeben hat, und wer nichts
abgegeben hat, bekommt seine Note aus genau diesem Eintrag.
Von v2.306.0 bis v2.307.0 war der Verlauf ein zugeklappter Abschnitt UNTER
der laufenden Liste; seit v2.308.0 ist er ein eigener Ort hinter dem Knopf
in der Leiste (azVerlaufUm) - die Aufklapp-Regeln hier sind deshalb weg.
Geblieben ist die blassere Karte: man soll auf einen Blick sehen, dass
hier nichts mehr zu tun ist. */
.az-karte-alt{opacity:.72}
.az-karte-alt:hover{opacity:1}
/* ===== DIE GEOEFFNETE AUFGABE (v2.308.0) =================================
Befund Murat 19.08.2026: "ögretmen aufgabenin icine girince ... detayli
sekilde notlarinin her tipi gözükmelidir. listeme tipi kullanalim
spalteleriyle birlikte." Deshalb steht hier eine TABELLE statt der
frueheren Kachelliste: eine Klasse hat 25 Kinder, und wer sucht, wer noch
nicht abgegeben hat, liest eine Spalte hinunter - nicht 25 Absaetze.
Die Nummer vorne ist die Zeilennummer, nicht die Schueler-ID.
Ueber der Tabelle sitzt EINE Leiste mit dem Zurueck-Knopf (ein Knopf, kein
Text - Befund derselbe Tag) und den Handgriffen Bearbeiten/Beenden. Die
Toolbar der Uebersicht (Klassenwahl, "Neue Aufgabe") wird waehrenddessen
ausgeblendet: sie gehoert zur Liste, nicht zur einzelnen Aufgabe.
VERBUNDEN MIT: azDetailHtml/azToolbarZeigen (index-app.js),
hausaufgabe_fortschritt (hausaufgaben.py). */
.az-detail-bar{display:flex;align-items:center;gap:var(--s-3);flex-wrap:nowrap;
padding-bottom:var(--s-3);margin-bottom:var(--s-3);border-bottom:1px solid var(--line);}
.az-detail-titel{flex:1;min-width:160px;}
.az-detail-titel .az-title{font-size:var(--fs-lg);font-weight:830;line-height:1.25;}
.az-detail-titel .az-meta{font-size:var(--fs-xs);color:var(--muted);margin-top:1px;}
.az-detail-tools{display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:flex-end;}
/* Die Handgriffe sind KLEIN und stehen in EINER Reihe mit dem Titel (Befund
Murat 24.09.2026: „daha küçük textli … tek satır olmalı iki değil"). `.btn`
ist global volle Breite - deshalb hier `width:auto`. Farbe: Akzent-Abschnitt. */
.az-detail-bar .btn{margin:0;width:auto;flex:none;padding:var(--s-1) var(--s-3);min-height:32px;
font-size:var(--fs-sm);font-weight:750;border-radius:var(--r-control);white-space:nowrap;}
.az-zurueck{margin:0;flex:none;}
.az-detail-zahl{font-size:var(--fs-sm);font-weight:750;color:var(--muted);margin:0 0 var(--s-2);}
.az-tab-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-card);background:var(--card);}
.az-tab{width:100%;border-collapse:collapse;font-size:var(--fs-sm);}
.az-tab th{text-align:left;font-size:var(--fs-3xs);text-transform:uppercase;letter-spacing:.06em;
font-weight:800;color:var(--muted);background:var(--paper);padding:var(--s-2) var(--s-3);
white-space:nowrap;border-bottom:1px solid var(--line);}
.az-tab td{padding:var(--s-2) var(--s-3);border-bottom:1px solid var(--line);
vertical-align:top;white-space:nowrap;}
.az-tab tr:last-child td{border-bottom:0;}
.az-tab .az-nr{width:var(--s-6);color:var(--muted);font-weight:750;text-align:right;
padding-right:var(--s-1);}
.az-td-name{font-weight:800;white-space:normal;}
.az-status{display:inline-block;font-size:var(--fs-2xs);font-weight:800;
border-radius:var(--r-pill);padding:var(--s-1) var(--s-2);}
.az-st-offen{background:color-mix(in srgb, var(--amber) 14%, var(--card));color:var(--amber-ink);}
.az-st-fertig{background:var(--ok-soft);color:var(--ok-ink);}
/* Die Zustaende je Kind (v2.875.0, azZustandHtml): offen/entschuldigt neutral,
in Arbeit/Nachfrist Markenblau, ueberfaellig Rot - nur Variablen. */
.az-st-neutral{background:var(--line);color:var(--muted);}
.az-st-arbeit{background:var(--brand-soft);color:var(--brand);}
.az-st-warn{background:var(--bad-soft);color:var(--bad-ink);}
.az-fehlen{color:var(--bad-ink);}
.az-hinweis{font-size:var(--fs-xs);color:var(--muted);margin:0 0 var(--s-2);}
.az-nachtrag{display:flex;gap:var(--s-2);align-items:center;flex-wrap:wrap;
font-size:var(--fs-xs);color:var(--muted);margin:0 0 var(--s-2);}
.az-nachtrag select{width:auto;margin:0;}
/* Die automatische 6 des Altbestands (v2.877.0) und die Entscheidung je Kind
(azEntscheidungDialog) - nur Variablen. Die Auswahl sind Radioknoepfe im
Fenster der Aufgabenzentrale; `.az-modal-body input` machte sie sonst
seitenbreit. */
.az-auto6{font-weight:700;color:var(--amber-ink);}
.az-auto6-hinweis{color:var(--amber-ink);}
.aze-stand{margin:0 0 var(--s-2);font-size:var(--fs-sm);color:var(--ink);}
.aze-warn{margin:0 0 var(--s-3);font-size:var(--fs-xs);color:var(--amber-ink);
background:var(--amber-soft);border-radius:var(--r-control);padding:var(--s-2) var(--s-3);}
.aze-wahl{display:flex;flex-direction:column;gap:var(--s-1);}
.az-modal-body .aze-opt{display:flex;align-items:center;gap:var(--s-2);font-size:var(--fs-sm);
font-weight:650;color:var(--ink);cursor:pointer;padding:var(--s-1) 0;}
.az-modal-body .aze-opt input{width:auto;margin:0;flex:none;}
.aze-aus{opacity:.5;cursor:default;}
.aze-zusatz{margin:0 0 var(--s-2) var(--s-5,28px);}
.az-modal-body .aze-zusatz select,.az-modal-body .aze-zusatz input{width:auto;max-width:100%;}
.aze-hinweis{margin:var(--s-3) 0 var(--s-2);font-size:var(--fs-xs);color:var(--muted);}
.az-modal-body .aze-entfernen{display:flex;align-items:center;gap:var(--s-2);font-weight:700;
color:var(--bad-ink);margin:var(--s-2) 0;}
.az-modal-body .aze-entfernen input{width:auto;margin:0;}
.aze-verlauf{margin-top:var(--s-3);font-size:var(--fs-xs);color:var(--muted);}
.aze-verlauf-titel{font-weight:800;color:var(--ink);margin-bottom:var(--s-1);}
.az-td-note{font-weight:800;}
/* Grundton hier bleibt das Markenblau; die Wunschfarbe der Lehrkraft setzt
sich weiter unten im Abschnitt "Akzent aus der Flaechenfarbe" darueber -
dort steht die vollstaendige Liste, und nur dort darf sie stehen. */
.az-mini{appearance:none;font:inherit;font-size:var(--fs-2xs);font-weight:800;cursor:pointer;
border:1px solid var(--brand);border-radius:var(--r-pill);padding:var(--s-1) var(--s-2);
background:var(--card);color:var(--brand);}
.az-tr-antwort td{padding-top:0;white-space:normal;}
.az-tr-antwort p{margin:0 0 var(--s-1);padding:var(--s-2) var(--s-3);background:var(--paper);
border-radius:var(--r-control);white-space:pre-wrap;line-height:1.5;font-size:var(--fs-xs);}
/* Das kleine Fenster der Aufgabenzentrale (azModalOeffnen). Eigener Baustein,
weil die App keinen gemeinsamen hat - kzModal und pwhBoardModal daneben. */
.az-ov{position:fixed;inset:0;z-index:1400;background:rgba(16,22,40,.44);
display:flex;align-items:center;justify-content:center;padding:var(--s-4);}
.az-modal{background:var(--card);border:1px solid var(--line);border-radius:var(--r-panel);
width:min(560px,100%);max-height:88vh;display:flex;flex-direction:column;
box-shadow:var(--e-3);}
.az-modal-kopf{display:flex;align-items:center;justify-content:space-between;gap:var(--s-3);
padding:var(--s-3) var(--s-4);border-bottom:1px solid var(--line);}
/* `.btn` ist global volle Breite - im Kopf fraß „Schließen" die Zeile
(830 von 980 px) und der Titel brach um. */
.az-modal-kopf .btn{margin:0;width:auto;flex:none;}
.az-modal-body{padding:var(--s-4);overflow:auto;}
.az-modal-body .az-fields{grid-template-columns:repeat(2,minmax(0,1fr));}
.az-modal-body input,.az-modal-body textarea{width:100%;box-sizing:border-box;font:inherit;
border:1px solid var(--line);border-radius:var(--r-control);background:var(--card);
color:var(--ink);padding:var(--s-2) var(--s-3);}
.az-modal-body label{font-size:var(--fs-xs);font-weight:750;color:var(--muted);}
.az-modal-fuss{display:flex;justify-content:flex-end;gap:var(--s-2);
padding:var(--s-3) var(--s-4);border-top:1px solid var(--line);}
.az-modal-fuss .btn{margin:0;}
/* Gruppen bilden (PLAN_PDF_ABGABE B10): breiteres Fenster, Spalten zum
Hineintippen - erst das Kind, dann die Gruppe. Keine Leistungswerte, keine
eigenen Gruppennamen (§8 Nr. 2). Die Arbeitsform im Formular sind zwei
Radioknoepfe - `.az-form input` wuerde sie sonst 42 px hoch und voll breit
ziehen. */
.az-modal.breit{width:min(980px,100%);}
.az-arbeitsform{display:flex;gap:var(--s-4);align-items:center;min-height:42px;flex-wrap:wrap;}
.az-arbeitsform label{display:inline-flex;align-items:center;gap:var(--s-1);font-weight:650;color:var(--ink);cursor:pointer;}
.az-form .az-arbeitsform input{width:auto;min-width:0;height:auto;min-height:0;padding:0;margin:0;}
.az-g-regler{display:flex;flex-wrap:wrap;gap:var(--s-3);align-items:flex-end;margin:0 0 var(--s-3);}
.az-g-regler label{display:flex;flex-direction:column;gap:var(--s-1);}
.az-modal-body .az-g-regler input{width:96px;}
.az-g-getrennt{display:flex;flex-wrap:wrap;gap:var(--s-2);align-items:center;margin:0 0 var(--s-3);font-size:var(--fs-sm);}
.az-g-getrennt select{width:auto;max-width:200px;}
.az-g-paar{display:inline-flex;align-items:center;gap:var(--s-1);padding:var(--s-1) var(--s-2);border-radius:var(--r-pill);
background:var(--paper);border:1px solid var(--line);}
.az-g-weg{appearance:none;border:0;background:none;font:inherit;cursor:pointer;color:var(--muted);padding:0 var(--s-1);}
.az-g-spalten{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:var(--s-3);}
.az-g-spalte{display:flex;flex-direction:column;gap:var(--s-2);min-height:96px;padding:var(--s-2);border:1px solid var(--line);
border-radius:var(--r-card);background:var(--card);cursor:pointer;}
.az-g-spalte > b{font-size:var(--fs-sm);}
.az-g-spalte small{font-size:var(--fs-2xs);color:var(--muted);margin-top:calc(-1 * var(--s-1));}
.az-g-spalte.ohne{background:var(--paper);}
.az-g-neu{appearance:none;font:inherit;align-items:center;justify-content:center;color:var(--muted);border-style:dashed;}
.az-g-kind{appearance:none;font:inherit;font-size:var(--fs-sm);text-align:left;padding:var(--s-2);
border-radius:var(--r-control);border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;}
.az-g-kind.an{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dk);}
span.az-g-kind{cursor:default;}
.az-g-hier{appearance:none;font:inherit;font-size:var(--fs-xs);font-weight:650;padding:var(--s-2);
border:1px dashed var(--brand);border-radius:var(--r-control);background:transparent;color:var(--brand-dk);cursor:pointer;}
.az-g-hinweis{font-size:var(--fs-xs);color:var(--muted);margin:var(--s-3) 0 0;}
/* `.btn` ist global volle Breite - im Regler stehen die Knoepfe neben den Feldern. */
.az-g-regler .btn,.az-g-getrennt .btn{width:auto;margin:0;}
@media(max-width:640px){.az-detail-bar{flex-wrap:wrap}.az-toolbar{align-items:stretch;flex-direction:column}.az-toolbar-filter{flex-direction:column;width:100%}.az-toolbar select{width:100%;max-width:none}.az-toolbar-actions{width:100%}.az-tool-btn{flex:1;padding:0 var(--s-3)}.az-fields{grid-template-columns:1fr}.az-bar{width:100%}.az-modal-body .az-fields{grid-template-columns:1fr}.az-detail-tools{width:100%}.az-detail-tools .btn{flex:1}.az-tab td,.az-tab th{padding:var(--s-2)}.sl-message-banner{align-items:flex-start;flex-direction:column;gap:var(--s-1)}.sl-message-banner strong{white-space:normal}.sl-message-head{align-items:flex-start;flex-direction:column;gap:var(--s-1)}}
.az-form option:disabled{color:var(--muted);background:var(--paper)}
/* ===== AUFGABE IM RAHMEN: der Inhalt bekommt die Flaeche (v2.240.0) =====
Befund Murat 09.08.2026: unten stand eine grosse leere Flaeche, waehrend
Kopfzeile und Knopf sich oben draengten. Jetzt fuellt der Rahmen die Hoehe
und der Abgeben-Knopf klebt unten - dort ist auf dem Telefon der Daumen,
und es ist der letzte Schritt, nicht der erste. */
/* DIE 132 PX SIND WEG (v2.332.0, Befund Murat 19.08.2026: „o anki acilan
görünür bölgeye sigmali her zaman"). Sie waren geraten und deckten den
echten Ueberbau nicht ab - Panel-Rand, Kopfzeile, `#sl-work-head` mit dem
Aufgabentitel, die Titelzeile des Rahmens. Der Rahmen wurde hoeher als der
freie Platz, die Seite wuchs ueber einen Bildschirm hinaus, und die
Fertig-Leiste des Lernberichts (`.ha-fertig`, im Rahmen `position:fixed`)
lag unter dem sichtbaren Rand.
Jetzt nimmt der Rahmen, was uebrig ist - gemessen vom Layout, nicht
geraten. Die Hoehe der Kette setzt `body.sl-rahmen` weiter unten. */
/* DIE BUECHEREI STEHT AUF WEISS, NICHT AUF GRAU (v2.342.0).
`.sl-task-frame` traegt `--paper` - richtig fuer eine AUFGABE, die wie ein
Blatt auf der Unterlage liegt. Die Buecherei ist aber keine Aufgabe,
sondern eine Seite; ihre Karten stehen selbst auf Weiss, und der graue
Streifen dazwischen sah aus wie ein Ladefehler (Befund Murat 20.08.2026:
„arkaplanida gri ya, beyaz olsa ya orasi").
BEWUSST NUR HIER: die Grundregel bleibt, wie sie ist - fuer Hausaufgaben,
Pinnwand und Lautlesezeit war sie nie falsch (CLAUDE.md: schmal aendern
heisst SCHMAL aendern, und dasselbe gilt fuer einen einzelnen Fall). */
.sl-bib-rahmen .sl-task-frame{background:var(--card);}
.sl-detail-frame{display:flex;flex-direction:column;min-height:0;
flex:1 1 auto;height:auto;}
.sl-detail-frame .sl-task-frame{flex:1;height:auto;min-height:0;}
/* Die Pinnwand bringt ihren eigenen Kopf mit - hier bleibt nur das Board. */
.sl-detail-blank .sl-task-frame{border-radius:var(--r-card);}
.sl-frame-fuss{flex:none;padding-top:var(--s-3);display:flex;justify-content:flex-end;}
.sl-frame-fuss .btn{min-height:48px;padding-left:26px;padding-right:26px;}
@media(max-width:720px){
/* Die zweite geratene Zahl (112 px) ist aus demselben Grund weg - auf dem
Telefon war der Fehler nur groesser, weil dort weniger Platz uebrig ist. */
.sl-frame-fuss .btn{width:100%;}
}
/* ===== RAHMEN-MODUS: die Aufgabe passt IMMER auf einen Bildschirm ==========
Gesetzt von `slRahmenModus()` (index-app.js), solange eine Aufgabe im
Rahmen offen ist - Quiz, Lernbericht, Lautlesezeit, Spiel, Pinnwand.
WARUM EINE KETTE UND KEINE RECHNUNG: Jede Zahl, die den Ueberbau schaetzt,
ist beim naechsten Zusatz oben falsch - genau so ist dieser Fehler
entstanden. Die Kette Panel -> Bildschirm -> Karte -> Inhalt ist eine
Flex-Spalte von genau einem Bildschirm Hoehe; der Rahmen bekommt den Rest.
Gescrollt wird NUR im Rahmen.
Dasselbe Muster wie `body.has-sidebar[data-screen="upload"]` (v2.30.4);
wer eines aendert, sollte das andere ansehen.
NUR FUER RAHMEN-AUFGABEN: Die Textaufgabe hat keinen Rahmen und darf mit
der Seite wachsen - dort ist ein langes Antwortfeld richtig. */
body.sl-rahmen .wrap{
height:var(--vh100); min-height:0; max-height:var(--vh100);
overflow:hidden; display:flex; flex-direction:column;
}
body.sl-rahmen .app-topbar{ flex:none; }
body.sl-rahmen #screen-schuelerbereich{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
body.sl-rahmen .sl-work-card{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
body.sl-rahmen #sl-work-head{ flex:none; }
body.sl-rahmen #sl-work-content{
flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
}
/* Mit Seitenleiste ist das Panel nicht der ganze Bildschirm, sondern der
Bildschirm minus der Raender, mit denen die Leiste buendig steht. */
@media(min-width:900px){
body.sl-rahmen.has-sidebar:not(.lh-fullscreen) .wrap{
height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
max-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px));
}
}
.az-field small{min-height:16px;color:var(--muted);font-size:11.5px;line-height:1.35}
/* Ein leerer Hinweis (z. B. der Upload-Status vor dem Hochladen) nimmt keinen Platz. */
.az-field small:empty{display:none}
/* ---- Filter-Leiste „neue Abgaben" im Klassenbuch (v2.53.0) ---------------
Steht ÜBER der Klassentabelle, wenn man über einen Deep-Link aus „Meine
Aufgaben" bzw. dem Cockpit gekommen ist. Sie ist PFLICHT, sobald gefiltert
wird: eine Tabelle, in der ohne Ansage vier von sieben Kindern fehlen,
sieht aus wie ein Datenverlust, nicht wie ein Filter.
MIT WEM: kbxClassTable()/kbNeuFilterAus() in index-app.js. */
.kbx-tablewrap .kbx-neubar{display:flex;align-items:center;gap:var(--s-3);margin:0 0 var(--s-3);
padding:var(--s-2) var(--s-4);border:1px solid var(--ok);border-radius:var(--r-control);
background:var(--ok-soft,rgba(21,160,90,.08));}
.kbx-tablewrap .kbx-neubar svg{flex:none;width:16px;height:16px;fill:none;stroke:var(--ok);
stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;}
.kbx-tablewrap .kbx-neubar span{flex:1;min-width:0;font-size:var(--fs-sm);color:var(--ink);}
.kbx-tablewrap .kbx-neubar b{font-weight:750;}
.kbx-tablewrap .kbx-neubar button{flex:none;border:1px solid var(--line);border-radius:var(--r-pill);
background:var(--card);color:var(--ink);cursor:pointer;padding:var(--s-1) var(--s-3);font:650 12px inherit;}
.kbx-tablewrap .kbx-neubar button:hover{border-color:var(--ink);}
.kbx-tablewrap .kbx-neubar button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;}
/* ---- Rückgängig-Zeile nach dem Ausblenden (v2.53.0) ----------------------
Erscheint unter der Kopfzeile der Karte "Meine Aufgaben", sobald eine Zeile
ausgeblendet wurde. Sie ist der EINE Satz, der erklärt, was gerade passiert
ist – deshalb steht sonst nirgends in der Karte ein Erklärabsatz.
MIT WEM: renderTodo()/todoRueckgaengig() in index-app.js. */
.ck2-todo .ck2-undo{display:flex;align-items:center;gap:9px;padding:9px 16px;
border-top:1px solid rgba(127,127,127,.1);background:var(--paper,#F4F5F9);}
.ck2-todo .ck2-undo svg{flex:none;width:15px;height:15px;fill:none;stroke:var(--muted);
stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round;}
.ck2-todo .ck2-undo span{flex:1;min-width:0;font-size:12px;color:var(--muted);}
.ck2-todo .ck2-undo button{flex:none;border:0;background:none;cursor:pointer;padding:2px 4px;
color:var(--brand);font:700 12px inherit;text-decoration:underline;text-underline-offset:2px;}
.ck2-todo .ck2-undo button:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:6px;}
/* ---- Zwei Einstiege in "Meine Aufgaben" (v2.53.0) ------------------------
Vorher hing die volle Ansicht an einem kleinen Pillen-Knopf rechts oben.
Jetzt sind die ganze Kopfzeile und eine breite Fußzeile der Weg dorthin;
ein eigener Menüpunkt kam bewusst nicht in Frage (Namenskollision mit
"Aufgaben" = Material im Seitenmenü).
MIT WEM: renderTodo() in index-app.js, openMeineAufgaben() in
index-aufgaben.js. */
.ck2-todo .ck2-todo-head{justify-content:flex-start;cursor:pointer;
border-radius:14px 14px 0 0;transition:background .12s;}
.ck2-todo .ck2-todo-head:hover{background:var(--paper,#F4F5F9);}
.ck2-todo .ck2-todo-head:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.ck2-todo .ck2-todo-hico{flex:none;width:16px;height:16px;fill:none;stroke:var(--brand);
stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ck2-todo .ck2-todo-hchev{margin-left:auto;}
.ck2-todo .ck2-todo-foot{display:flex;width:100%;align-items:center;justify-content:center;gap:7px;
padding:11px 16px;border:0;border-top:1px solid rgba(127,127,127,.1);
background:var(--paper,#F4F5F9);color:var(--brand);cursor:pointer;
font:700 13px inherit;transition:background .12s;}
.ck2-todo .ck2-todo-foot:hover{background:var(--brand-soft,rgba(0,113,227,.1));}
.ck2-todo .ck2-todo-foot:focus-visible{outline:2px solid var(--brand);outline-offset:-2px;}
.ck2-todo .ck2-todo-foot svg{width:15px;height:15px;fill:none;stroke:currentColor;
stroke-width:2.55;stroke-linecap:round;stroke-linejoin:round;}
/* ---- Aufbewahrungs-Fenster: ein Satz + aufklappbares „i" ------------------
Vorher stand dort ein fünfzeiliger Absatz, den niemand liest, und es gab
NUR „verlängern" – wer die Unterlagen nicht mehr braucht, hatte keinen Weg
(Entscheidung Murat 2026-07). */
.vw-i{margin-left:7px;width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);
background:var(--card);color:var(--muted);font:700 12px/1 inherit;cursor:pointer;
display:inline-flex;align-items:center;justify-content:center;vertical-align:baseline;padding:0;}
.vw-i:hover, .vw-i.on{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);}
.vw-abl-mehr-info{font-size:12.5px;line-height:1.6;color:var(--muted);
background:var(--paper);border-radius:11px;padding:11px 13px;margin:0 0 12px;}
.vw-abl-mehr-info[hidden]{display:none;}
.vw-abl-grp-h .vw-abl-ok{border-color:var(--line);color:var(--muted);}
.vw-abl-grp-h .vw-abl-ok:hover{border-color:var(--ink);color:var(--ink);}
/* ===========================================================================
AUSWAHLFELD (static/js/index-auswahl.js)
Ein Eingabefeld, das sich wie ein öffnet, aber Tippen erlaubt.
Anlass: Rückmeldung Murat 27.07.2026 – das Thema-Feld war ein
und sah neben dem Fach- aus wie ein totes Textfeld.
Der Pfeil ist DERSELBE wie in `.fpk select` (gleiches SVG, gleiche Größe),
damit beide Felder nebeneinander nicht zu unterscheiden sind.
=========================================================================== */
.ss-aus{position:relative;display:block;width:100%;}
.ss-aus>input{width:100%;padding-right:20px !important;cursor:pointer;}
/* Der Pfeil ist ein eigener Knopf statt eines Hintergrundbildes: so ist er
auch dann anklickbar, wenn das Feld schon Text enthält. */
.ss-aus-pfeil{position:absolute;right:0;top:50%;transform:translateY(-50%);
width:20px;height:20px;padding:0;border:none;background:transparent;cursor:pointer;
background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237A8194' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat:no-repeat;background-position:center;background-size:15px;
transition:transform .15s;}
.ss-aus-auf .ss-aus-pfeil{transform:translateY(-50%) rotate(180deg);}
/* ABGELEHNTE EINGABE (v2.335.0): das strenge Feld hat einen Wert geleert, der
nicht in der Liste stand. Kurz rot statt einer Meldung - eine Meldung waere
ein Kasten, den man wegklicken muss, fuer etwas, das man am Feld selbst
sieht. Verbunden mit: static/js/index-auswahl.js ssAusStrengPruefen(). */
.ss-aus-abgelehnt input{border-color:var(--bad)!important;
box-shadow:0 0 0 3px color-mix(in srgb,var(--bad) 22%,transparent);}
/* Die Liste hängt an (das Optionen-Fenster scrollt und würde sie
abschneiden), deshalb feste Positionierung und ein hoher z-Index. */
.ss-aus-panel{position:fixed;z-index:9000;overflow-y:auto;background:var(--card,#fff);
border:1.5px solid var(--line);border-radius:12px;
box-shadow:0 12px 30px rgba(15,20,35,.16);padding:5px;}
.ss-aus-opt{padding:8px 10px;border-radius:8px;font-size:var(--fs-md);font-weight:600;
color:var(--ink);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.ss-aus-opt:hover,.ss-aus-akt{background:rgba(109,91,255,.10);color:#4B3FD8;}
.ss-aus-panel-material .ss-aus-opt{white-space:normal;overflow:visible;text-overflow:clip;
overflow-wrap:anywhere;font-size:13px;line-height:1.45;padding:9px 12px;}
.ss-aus-leer{padding:9px 10px;font-size:13px;color:var(--muted);}
/* ===== Akzent aus der Flaechenfarbe (2.87.0) ==============================
WORUM ES GEHT: waehlt die Lehrkraft eine Flaechenfarbe, sollen die
Bedienelemente dazu passen – ein blauer Knopf auf einer Salbei-Flaeche sieht
aus wie ein Fremdkoerper. Die drei Toene kommen aus `ssAkzentSetzen()`
(index-app.js) und haben denselben Farbton wie die Flaeche:
--flaeche-akzent Fuellung, traegt weisse Schrift (Kontrast gerechnet)
--flaeche-akzent-soft Hauch hinter einem aktiven Eintrag
--flaeche-akzent-ink Schrift auf diesem Hauch
DIESER ABSCHNITT IST DIE VOLLSTAENDIGE LISTE. Wer den Akzent an einer
weiteren Stelle haben will, traegt sie HIER ein – nicht verstreut im
Stylesheet. `qa/unit/test_flaeche_akzent.py` zaehlt die Regeln und schlaegt
an, wenn die Liste hier und der Test auseinanderlaufen.
WAS BEWUSST NICHT DAZUGEHOERT und auch nicht dazukommen soll:
- Die Bedeutungsfarben bleiben unabhängig; seit v2.930.0 folgt hingegen
die allgemeine Marke über :root dem gewählten Flächenakzent.
- Die BEDEUTUNGSFARBEN `--ok` (gruen = richtig), `--bad` (rot = falsch),
`--amber` (Hinweis). Ein gruener Akzent, der neben einem gruenen
„richtig" steht, macht die Rueckmeldung mehrdeutig – und die ist der Kern
einer Lern-App. Deshalb bleiben `.btn.ok`, `.btn.sub` und `.btn.ghost`
ausgenommen.
- Alles im dunklen Design: `ssAkzentSetzen()` loescht die Variablen dort,
die Regeln fallen dann auf `var(--brand)` zurueck.
DER FALLBACK IST DIE SICHERUNG: ohne gewaehlte Farbe (oder bei einem zu
blassen Wunschton) sind die Variablen nicht gesetzt und jede Regel hier
liefert exakt den Markenton – also genau das Bild von vorher. */
/* 1) Der Hauptknopf. Ausgenommen sind die drei Sonderfassungen: `ghost` ist
weiss umrandet, `sub` ist bewusst tintenfarben, `ok` traegt die
Bedeutungsfarbe Gruen. */
.btn:not(.ghost):not(.sub):not(.ok){ background:var(--flaeche-akzent,var(--brand)); }
/* Der dunklere Hover-Ton entsteht als schwarze Auflage UEBER der Fuellfarbe.
So funktioniert er mit jedem Farbton, ohne dass je Farbe ein zweiter Wert
gepflegt werden muesste (dasselbe Prinzip wie die helle Auflage bei
.ss-glas, nur andersherum). */
.btn:not(.ghost):not(.sub):not(.ok):hover{
background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),var(--flaeche-akzent,var(--brand-dk));}
/* 2) Aktives Segment im Umschalter. */
.seg button.on{ background:var(--flaeche-akzent,var(--brand)); }
/* 3) Eingeschalteter Schalter (Bedienungshilfen, Einstellungen). */
.kswitch input:checked + .ksl{ background:var(--flaeche-akzent,var(--brand)); }
/* 4) Aktiver Eintrag der Seitenleiste – seit v2.283.0 die VOLLE Fuellung,
nicht mehr der Hauch.
WARUM DER WECHSEL: die alte Paarung war Hauch + farbige Schrift, und die
erreichte im Rueckfall (--brand auf --brand-soft) 4.47:1 – knapp unter
der Schriftschwelle 4.5. Die Fuellung dagegen IST auf weisse Schrift
gerechnet: `ssAkzentSetzen()` dunkelt `--flaeche-akzent` so lange ab, bis
4.5:1 gegen Weiss stehen (index-app.js, ssDunkelnBis). Der Eintrag wird
also lesbarer, nicht nur anders.
WARUM DIE AUFLAGE NUR ABDUNKELT: der schraege Verlauf ist der Rest des
erhabenen Eindrucks – Licht von oben links, Schatten nach unten rechts.
Eine AUFHELLENDE Auflage waere hier gefaehrlich: sie wuerde genau die
Rechnung von oben nach unten druecken, und aus 4.5:1 wuerden 4.2:1.
Schwarz mit Deckkraft kann den Kontrast gegen Weiss nur VERBESSERN –
dieselbe Ueberlegung wie beim Hover des Hauptknopfs, nur andersherum
begruendet. Die weiche Tiefe selbst steht beim Bauteil (Abschnitt
SEITENLEISTE), hier steht ausschliesslich die Farbe. */
/* ⛔ DIE REITERLEISTE DER SCHULVERWALTUNG (Ansage Murat 06.09.2026:
„bastaki menü rengi hala mavi"). Sie steht ueber allem und war die letzte
grosse Flaeche im Marken-Blau, waehrend die Knoepfe darunter schon der
Schale folgten. Sie steht HIER und nicht bei `.adm-tab` oben, weil dieser
Abschnitt die vollstaendige Liste aller Stellen mit Akzent ist -
qa/unit/test_flaeche_akzent.py zaehlt sie. */
.adm-tab.active{ color:var(--flaeche-akzent, var(--brand)); }
/* ⛔ DER GEFUELLTE VERWALTUNGSKNOPF (Ansage Murat 06.09.2026: „Schüler
verzeichnisteki + hinzufügende mavi"). `.ss-btn.pri` ist der Zwilling von
`.btn` in den Verwaltungslisten – „+ hinzufügen", „Speichern", „Einladen" –
und war der letzte gefuellte Knopf im Marken-Blau, waehrend alles um ihn
herum schon der Schale folgte. Der Hover entsteht wie beim Hauptknopf als
schwarze Auflage, damit er mit jedem Farbton stimmt und kein zweiter Wert
je Farbe gepflegt werden muss. Der Rand geht mit: bliebe er blau, saesse um
die Fuellung ein blauer Faden. */
.ss-btn.pri{ background:var(--flaeche-akzent,var(--brand));
border-color:var(--flaeche-akzent,var(--brand)); }
.ss-btn.pri:hover{
background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),var(--flaeche-akzent,var(--brand-dk));
border-color:var(--flaeche-akzent,var(--brand-dk)); }
/* Und der leere Zwilling beim Zeigen – ein blauer Rand auf einer Salbei-
Flaeche ist derselbe Fremdkoerper, nur duenner. */
.ss-btn:hover{ border-color:var(--flaeche-akzent,var(--brand));
color:var(--flaeche-akzent,var(--brand)); }
#app-sidebar .sb-linse{
background:linear-gradient(145deg, rgba(0,0,0,0), rgba(0,0,0,.20)),
var(--flaeche-akzent,var(--brand));}
#app-sidebar .sb-item.on{ color:var(--on-brand);}
/* v2.921.0 – der Tropfen der schwebenden Kapsel (Telefon, Tablet hochkant).
Er sagt dasselbe wie die Linse der Seitenleiste: „hier bist du". Der helle
Fleck oben links macht ihn zur Kugel statt zur Scheibe. */
#ml-leiste .ml-blase{
background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.34), rgba(255,255,255,0) 46%),
var(--flaeche-akzent,var(--brand));}
/* SchlauHeft folgt der gewaehlten Flaechenfarbe; freie Tage bleiben rot. */
#screen-kalender .kal-datumfeld-tag .kal-datumtext strong,
#screen-kalender .kh-startsymbol{color:var(--flaeche-akzent,var(--brand));}
body.kal-titel-aus #kal-bar .kal-seg.kal-views button.on{
background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand));}
body.kal-titel-aus .kal-flach:hover,#screen-kalender .kal-blattern button:hover{
color:var(--flaeche-akzent,var(--brand));}
/* 5) ZEIGEN UND STRUKTUR IN LISTEN (v2.143.0, Wunsch Murat 05.08.2026:
„arkaplanim mor ya … o renkte olsa. bunu klasiklestirmek lazim tüm site
icin"). Das Grau beim Ueberfahren war neutral, aber es war auch fremd:
Wer sich Lavendel eingestellt hat, bekam ein Blaugrau.
ZWEI STAERKEN, WEIL ES ZWEI AUSSAGEN SIND – das ist die Regel, an der
sich kuenftige Zeilen hier orientieren sollen:
-soft (0.88) „hier zeigt die Maus hin" bzw. „das ist ausgewaehlt"
-hauch (0.965) reine STRUKTUR, behauptet nichts (Zebra)
Ein Streifenmuster in Auswahlstaerke laese sich, als waere die halbe
Liste markiert.
DIE `:not()` SIND KEIN SCHMUCK: Dieser Abschnitt steht am Dateiende,
also NACH `.kbx-row:hover td` und `.kbx-row.open td` (~Zeile 615). Ohne
die Ausnahmen wuerde das Zebra beide ueberstimmen – auf jeder zweiten
Zeile gaebe es dann weder Hover- noch Aufklapp-Anzeige. Die Wirkung
haengt hier also NICHT an der Reihenfolge, sondern steht im Selektor.
Der Rueckfall haelt beides unveraendert, wenn keine Farbe gewaehlt ist –
und im dunklen Design, wo `ssAkzentSetzen()` die Variablen loescht. */
.kbx-row.kbx-zebra:not(.open):not(:hover) td{
background:var(--flaeche-akzent-hauch,#FAFBFE);}
.kbx-row:hover td{ background:var(--flaeche-akzent-soft,var(--paper)); }
.kbx-addbtn:hover{ color:var(--flaeche-akzent-ink,var(--brand));
background:var(--flaeche-akzent-soft,var(--paper)); }
.kbv-item:hover{ background:var(--flaeche-akzent-soft,var(--paper)); }
/* 5b) DIE ZWEI HERVORGEHOBENEN EINTRAEGE des Schubfachs (v2.391.0, seit
v2.419.0 die VOLLE Fuellung statt des Hauchs).
WARUM DIE FUELLUNG UND NICHT DER HAUCH - es ist dieselbe Ueberlegung
wie bei 4) und derselbe Weg, den die Seitenleiste in v2.283.0 gegangen
ist: Hauch + farbige Schrift ist auf 4.5:1 gerechnet, aber knapp; und
bei einem fast grauen Wunschton verschwindet die Hervorhebung ganz.
`--flaeche-akzent` ist dagegen so weit abgedunkelt, dass WEISSE Schrift
darauf bei JEDEM Farbton 4.5:1 erreicht (ssDunkelnBis, index-app.js).
Der auffaelligste Eintrag der Liste haengt damit nicht mehr davon ab,
welche Farbe die Lehrkraft gewaehlt hat.
DIE AUFLAGE BEIM ZEIGEN DARF NUR ABDUNKELN. Schwarz mit Deckkraft kann
den Kontrast gegen Weiss nur VERBESSERN; eine aufhellende Auflage wuerde
die 4.5:1 von oben nach unten druecken (siehe 4)).
DIE HOVER-ZEILE IST PFLICHT, nicht Schmuck: `.kbv-item:hover` eine Zeile
weiter oben hat dieselbe Spezifitaet wie `.kbv-item.kbv-betont` und
steht davor - ohne eigene Hover-Regel legte sich der HAUCH ueber die
Fuellung, und die weisse Schrift stuende auf einem Pastell. */
.kbv-item.kbv-betont{ box-shadow:inset 3px 0 0 var(--flaeche-akzent,var(--brand)); }
.kbv-item.kbv-betont:hover{ background:var(--paper);
box-shadow:inset 3px 0 0 var(--flaeche-akzent,var(--brand)); }
.kbv-item.kbv-betont .kbv-ico{ background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent,var(--brand)); }
.kbv-item.kbv-betont .kbv-tx b{ color:var(--flaeche-akzent,var(--brand)); }
/* 6) Halbjahr-Waehler (v2.144.0): "Gesamt" im aktiven Zustand und der mobile
Kasten sind AUSGEWAEHLT-Flaechen - also -soft, nicht -hauch. */
.kbz-ges.an{ background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
.kbz-kbtn{ background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
/* 6b) DIE FORMULAR-KNOEPFE DER BRIEFE UND FOERDERBLAETTER (v2.381.0, Befund
Murat 23.08.2026: „Fehlzeitenbriefe sayfasindaki butonlar thema rengi
olmali").
`.fo-btn` stand auf `var(--brand)` - festes Blau. Auf einer gruenen
Flaeche sah die ganze Seite richtig aus, bis unten die vier Knoepfe
kamen: Speichern, Vorschau, Word, PDF, alle blau. Es ist derselbe Fehler
wie beim Glas-Block in v2.373.0, nur an einer anderen Stelle - eine
zweite Farbquelle neben dem Woerterbuch.
`.fo-btn.ghost` bleibt neutral: er ist die ZWEITE Wahl neben dem
Hauptknopf, und zwei gefuellte Knoepfe nebeneinander sagen nicht mehr,
welcher gemeint ist. */
.fo-btn:not(.ghost){ background:var(--flaeche-akzent,var(--brand)); }
.fo-btn:not(.ghost):hover{
background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),
var(--flaeche-akzent,var(--brand-dk)); filter:none; }
.fo-btn.ghost:hover{ border-color:var(--flaeche-akzent,var(--brand)); }
/* Der aktive Ankreuz-Block traegt den Hauch der Flaechenfarbe statt eines
festen Blaus - er markiert eine AUSWAHL, keine Bedeutung. */
.fo-pair.on{ border-color:var(--flaeche-akzent,var(--brand));
background:var(--flaeche-akzent-soft,var(--brand-soft)); }
/* 7) MATERIAL-EINSTIEG (v2.253.0, Auftrag Murat 10.08.2026: „renk kismi bide
arkaplan rengine göre degismeli"). Der Einstieg war die auffaelligste
Seite der App und zugleich die einzige, die stur blau blieb: blauer
Kontingent-Streifen, blaue Chips, blauer Sende-Knopf – auf einer
lavendelfarbenen Flaeche. Diese acht Zeilen ziehen ihn nach.
WARUM DIE SELEKTOREN `#screen-upload` MITFUEHREN: Die Grundfassung
dieser Regeln steht weiter oben im Stylesheet MIT dieser ID. Ohne sie
verloere der Akzent hier gegen die eigene Vorlage – nicht wegen der
Reihenfolge, sondern wegen der Spezifitaet.
DER SENDE-KNOPF traegt weisse Symbole: er darf deshalb NUR
`--flaeche-akzent` bekommen (dort ist 4.5:1 gegen Weiss gerechnet), nie
`-soft`. Chips und Karten sind Flaechen unter dunkler Schrift und
nehmen `-soft` mit `-ink`. */
/* Die Marke traegt seit v2.324.2 keine Fuellung mehr (neumorphe Tiefe statt
Flaeche) und keinen Ring - der Akzent sitzt nur noch in der Schrift.
Deshalb faellt hier die Hintergrund-Regel weg; sie wuerde die Marke wieder
zu einem farbigen Balken machen. */
/* DIE KAPSEL NIMMT IHRE FARBE AN DIESER EINEN STELLE (v2.925.0). Auftrag
Murat 02.10.2026: „o şeylerin içlerindeki renkler hep mavi. tema rengi
olsun … o arkadaki yansımayı da tema renginin farklı renklerine“. Die
drei Töne der Flächenfarbe werden hier als `--kapsel-ton*` an den
Bildschirm gehängt; Rahmen, Band, Schein, Kontingent, Chips, Felder,
„Übernehmen“ und die Listen von Fach/Klasse lesen NUR diese Namen
(index.css, Abschnitt „DIE EINGABEKAPSEL“). Ohne gewählte Fläche und im
dunklen Design greift der Rückfall --brand.
`#screen-upload .notiz .l,#screen-upload .notiz a{…}` stand bis v2.924
hier: der Kontingent-Streifen über dem Eingang. Er ist ins Kopfband
gewandert und färbt sich jetzt über --kapsel-ton-ink. */
#screen-upload{ --kapsel-ton:var(--flaeche-akzent,var(--brand));
--kapsel-ton-soft:var(--flaeche-akzent-soft,var(--brand-soft));
--kapsel-ton-ink:var(--flaeche-akzent-ink,var(--brand)); }
/* Die Liste des Auswahlfelds (ssAuswahl, z. B. „Thema“) trug ein festes
Violett-Blau - auf jeder Fläche dasselbe („renkler hep mavi“). */
.ss-aus-opt:hover,.ss-aus-akt{ background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
/* `#screen-upload .box:focus-within{ border-color:… }` stand hier bis
v2.924: ein Akzentrand um den Eingang beim Tippen. Seit v2.925.0 ist der
Rand der Regenbogen der Kapsel - eine Akzentfarbe darauf würde ihn beim
Tippen auslöschen. Den Fokus zeigt jetzt der Schein (er hört auf zu
atmen und steht voll da, `.box:focus-within::before`). */
/* Bis v2.924 stand hier die Akzent-Regel des Sende-Knopfs (`.senden`,
Farbe des Fliegers). Seit v2.925.0 ist der Flieger SCHWARZ (--ink) und ohne Fläche
(Murat 02.10.2026: „siyah gönderme … sadece uçak … arka plansız“) - er
trägt keine Flächenfarbe mehr. Plus und Zahnrad färben sich beim Zeigen
über --kapsel-ton* (oben). */
#screen-upload .ikbtn:hover,#screen-upload .ikbtn.aktiv,
#screen-upload .pop-add .zeile:hover{
background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
#screen-upload .pop-add .zeile .ic{
background:var(--flaeche-akzent-soft,var(--brand-soft)); }
#screen-upload .pop-add .zeile .ic svg{
stroke:var(--flaeche-akzent-ink,var(--brand)); }
/* 8) EINSTELLUNGEN, KATEGORIENSPALTE (v2.253.0). Die aktive Zeile links ist
dieselbe Aussage wie der aktive Eintrag der Seitenleiste unter 4) –
also derselbe Ton, damit die App an zwei Orten nicht zwei Sprachen fuer
„hier bist du" spricht. Die Namensvorschau ist ein ERGEBNIS und traegt
denselben Hauch. */
.kset-nav .knav.on,.kset-nav .kprof.on{
background:var(--flaeche-akzent-soft,var(--brand-soft)); }
.kset-nav .knav.on .knav-title{ color:var(--flaeche-akzent-ink,var(--brand)); }
.kname-vorschau{ background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
/* Die Knoepfe unter „Push-Benachrichtigungen" (kontoSubBenachrichtigungen,
v2.865.1): eine Klasse statt des Inline-Stils, den test_landing_mobil
verbietet. Nicht .fo-btnreihe - die bricht am Telefon absichtlich nicht
um, und drei lange Beschriftungen passen dort nicht in eine Zeile. */
.push-knoepfe{ display:flex; gap:8px; flex-wrap:wrap; }
/* 9) ERWEITERTE OPTIONEN (v2.254.0, Befund Murat 10.08.2026: „Erweiterte
Optionen kismini unutmusun orasi mavi kalmis bütünlük bozuluyor"). Das
Fenster haengt am Material-Einstieg, blieb bei der Umstellung aber
stehen – man schloss also einen eingefaerbten Kasten auf und bekam ein
blaues Fenster.
DREI STELLEN, MEHR NICHT: der Zahnrad-Kopf, der Aufklapp-Streifen unter
dem Eingabekasten und der Knopf „Übernehmen". Der Knopf bekommt NUR
`--flaeche-akzent` (dort ist 4.5:1 gegen Weiss gerechnet) und verliert
dafuer seinen Verlauf – ein selbst gemischter Verlauf waere in der
oberen Haelfte heller als gerechnet, und genau dort steht die Schrift.
WAS BEWUSST BLAU-VIOLETT BLEIBT: der Lernspiele-Block (`.ls-*`, Ton
#7A5AF8). Das ist keine vergessene Stelle, sondern eine eigene
Kennfarbe – sie markiert im selben Fenster einen ANDEREN Weg
(druckfertige Spiele statt Aufgabensatz) und traegt das Premium-Etikett.
Faerbte sie sich mit, verschwaende der Unterschied zwischen „das gehoert
zu deiner Einstellung" und „das ist etwas anderes". */
/* Fenster und Riegel der Erweiterten Optionen gibt es seit v2.324.0 nicht
mehr - ihre Akzent-Regeln sind mit ihnen entfallen. Was vom Panel uebrig
ist (Gruppentitel, Symbole), faerbt sich ueber .mat-group-ttl::before. */
.mat-group-ttl::before{ background:var(--flaeche-akzent,#534AB7); }
/* v2.308.0 – zwei Knoepfe, die stur blau blieben (Befund Murat 19.08.2026:
"ekledigin butonlari otomatik mavi yapiyosun, her zaman arkaplan rengiyle
uyumu düsünmelisin ... hem lautlesen sayfasindaki tuslar hem cockpitteki
Stoppuhr butonu"). Beide sind HAUPTAKTIONEN ihrer Flaeche und tragen
deshalb eine Fuellung - nur eben in der Farbe, die die Lehrkraft gewaehlt
hat, statt im Markenblau daneben.
Die Lautlesezeit steht in einem eigenen Dokument (iframe) und erreicht
diese Variablen nicht; sie bekommt den Ton per postMessage - siehe
`llAkzentMelden` in index-app.js und `ss:"akzent"` in lautlesezeit.html. */
.az-tool-btn:not(.ghost){ background:var(--flaeche-akzent,var(--brand));
border-color:var(--flaeche-akzent,var(--brand)); }
/* Die Handgriffe einer Aufgabe (Zurück, Bearbeiten, Aufgabe beenden …) und
die Nebenknoepfe der Maske (Abbrechen, Als Entwurf speichern) tragen die
Flaechenfarbe - „tema rengi olmalı her şey" (Murat 24.09.2026). */
.az-detail-bar .btn.ghost,.az-actions .btn.ghost{ color:var(--flaeche-akzent-ink,var(--brand)) !important;
border-color:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 30%, transparent) !important; }
.az-tool-btn.ghost{ color:var(--flaeche-akzent-ink,var(--brand));
border-color:var(--flaeche-akzent,var(--brand)); }
/* Dieselbe Flaeche, eine Ebene tiefer: der Speichern-Knopf im Aufgaben-
Fenster und der kleine "Bewerten"-Knopf in der Fortschrittstabelle. */
.az-modal-fuss .btn:not(.ghost){ background:var(--flaeche-akzent,var(--brand));
border-color:var(--flaeche-akzent,var(--brand)); }
.az-mini{ border-color:var(--flaeche-akzent,var(--brand));
color:var(--flaeche-akzent-ink,var(--brand)); }
/* Die Wunschfarbe faerbt auch diesen Knopf. DER SCHEIN DARUNTER IST MIT
v2.414.0 WEG - er wurde von der Kartenkante abgeschnitten (Begruendung an
der Grundregel oben); deshalb steht hier nur noch die Fuellung. */
.ck2-uhr .ck-uhr-timer{ background:var(--flaeche-akzent,var(--brand)); }
.ck2-uhr .ck-uhr-timer:hover{
background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),var(--flaeche-akzent,var(--brand-dk)); }
/* 10) DIE GEWAEHLTE STUNDE IM KALENDER (v2.729.0, Ansage Murat 14.09.2026:
„thema rengi olsun secili termin"). Es ist die Stunde, deren SEITE
rechts im SchlauHeft steht - dieselbe Aussage wie der aktive Eintrag
der Seitenleiste unter 4), also dieselbe Fuellung mit weisser Schrift.
WARUM `!important`: FullCalendar setzt Fuellung, Rand und die farbige
linke Kante INLINE je Ereignis (kalWeicheFarbe, index-app.js); ohne
Nachdruck kaeme diese Regel gegen das style-Attribut nicht an. Es ist
die einzige Stelle im Akzent-Abschnitt, an der das noetig ist, und sie
gilt genau einem Element. Die Schrift wird an den INNEREN Elementen
gesetzt: FullCalendar faerbt Zeit und Titel ueber eigene Regeln
(templates/index.html, „DIE SCHRIFT MUSS DUNKEL SEIN"), eine Farbe am
aeusseren Kasten erreichte sie nicht. */
#kal-host .fc-event.kh-gewaehlt{
background-color:var(--flaeche-akzent,var(--brand)) !important;
border-color:var(--flaeche-akzent,var(--brand)) !important;
border-left-color:var(--flaeche-akzent,var(--brand)) !important;
box-shadow:0 2px 10px color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 35%, transparent); }
#kal-host .fc-event.kh-gewaehlt .fc-event-main,
#kal-host .fc-event.kh-gewaehlt .fc-event-title,
#kal-host .fc-event.kh-gewaehlt .fc-event-time,
#kal-host .fc-event.kh-gewaehlt .kal-ev-ort{ color:var(--on-brand); }
#kal-host .fc-event.kh-gewaehlt .kal-ev-ort{ opacity:.85; }
/* Die LISTE (Tag am Tablet/Handy, `uh-schmaltag`): dort ist das Ereignis
eine Tabellenzeile, und FullCalendar faerbt beim Zeigen die ZELLEN - also
muessen die Zellen die Fuellung tragen, nicht nur die Zeile. */
#kal-host .fc-list-event.kh-gewaehlt td{
background-color:var(--flaeche-akzent,var(--brand)) !important; }
#kal-host .fc-list-event.kh-gewaehlt .fc-list-event-time,
#kal-host .fc-list-event.kh-gewaehlt .fc-list-event-title,
#kal-host .fc-list-event.kh-gewaehlt .fc-list-event-title a{ color:var(--on-brand); }
/* 11) DAS BLATT-STUDIO (v2.906.0, Befund Murat 30.09.2026: „rengi thema
rengi degil o kismin"). Das Regal war der letzte Reiter der Sammlung,
der stur im Marken-Blau stand: Hauptknopf, Wegmarken, der Rahmen beim
Zeigen, der Kopfbalken der gezeichneten Vorschau, das Abzeichen
„Studio", der Stift an der Karte, das Ziel beim Ziehen. Die
Ordnerfarben bleiben - die hat die Lehrkraft je Ordner gewaehlt.
Die Pille unter dem Reiter (.bl-u-*) steht mit hier.
⛔ `html` VOR JEDEM SELEKTOR, und zwar mit Grund: der Abschnitt REGAL
(.bl-*) steht in dieser Datei HINTER diesem hier. Bei gleicher
Gewichtung gewinnt die spaetere Regel - die Akzentfarbe verlor still
gegen das Blau der Grundregel (im Browser gesehen, kein Test haette es
gemerkt). `html` hebt die Gewichtung um ein Element an; damit
entscheidet nicht mehr die Reihenfolge. `.bl-krume.an` (die aktuelle
Wegmarke, Textfarbe) bleibt dabei staerker - so soll es sein. */
html .bl-u-knopf.haupt,html .bl-neu{ background:var(--flaeche-akzent,var(--brand)); }
html .bl-u-knopf.haupt:hover{
background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),var(--flaeche-akzent,var(--brand-dk)); }
html .bl-u-knopf:not(.haupt):hover,html .bl-krume:hover,html .bl-krume.bl-ueber,
html .bl-vm-liste button:hover{
background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
html .bl-krume,html .bl-akt .bl-bearb{ color:var(--flaeche-akzent-ink,var(--brand)); }
html .bl-vorschau:hover{ border-color:var(--flaeche-akzent,var(--brand)); }
html .bl-kopfbalken{ background:var(--flaeche-akzent,var(--brand)); }
html .bl-abz.studio{ background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand-dk)); }
html .bl-ueber{ outline-color:var(--flaeche-akzent,var(--brand)); }
/* 12) DIE NACHRICHTEN (v2.909.0, Befund Murat 01.10.2026: „tema rengi
olmuyor"). Die Zentrale war die letzte grosse Seite im Markenblau: der
Knopf „Neuer Chat", der gewaehlte Filter, die offene Unterhaltung, die
Zaehler, die Kreise mit den Anfangsbuchstaben, die eigene Blase, der
Knopf in einer Systemnachricht („Bewerten & beenden") und die Linie
zwischen Liste und Chat, wenn man sie zieht.
WAS BLEIBT, WIE ES IST: der gruene Haken „gelesen" und der gruene Punkt
„gerade aktiv" (Bedeutungsfarben, siehe oben), der rote Knopf beim
Loeschen und der Bernstein-Kreis „An das ganze Kollegium" - der sagt:
das geht an alle, nicht an eine Person. */
.pf-plus,.pf-deeplink,.pf-conv-unread,.pf-conv-at,.pf-gava .g2{
background:var(--flaeche-akzent,var(--brand)); }
.pf-plus:hover,.pf-deeplink:hover{
background:linear-gradient(rgba(0,0,0,.13),rgba(0,0,0,.13)),var(--flaeche-akzent,var(--brand-dk)); }
.pf-fchip.on,.pf-conv.active{ background:var(--flaeche-akzent-soft,var(--brand-soft)); }
.pf-fchip.on,.pf-conv-date.neu,.pf-absender,.pf-mention,.pf-mehr-btn{
color:var(--flaeche-akzent-ink,var(--brand)); }
.pf-ava-ini,.pf-gava .g1,.pf-cico,.pf-klkachel-ico,.pf-gn-ava,.pf-leer-chat .pf-leer-ico{
background:var(--flaeche-akzent-soft,var(--brand-soft));
color:var(--flaeche-akzent-ink,var(--brand)); }
/* In der offenen Zeile liegt der Kreis sonst Hauch auf Hauch und verschwindet. */
.pf-conv.active .pf-ava-ini,.pf-conv.active .pf-gava .g1{ background:var(--card); }
.pf-mrow.me .pf-bubble{ background:var(--flaeche-akzent-soft,var(--pf-sent-bg,#E6EAFF));
color:var(--flaeche-akzent-ink,var(--pf-sent-ink,#2B3358)); }
.pf-quote,.pf-mrow.me .pf-quote{ border-left-color:var(--flaeche-akzent,var(--pf-sent,#5063D6)); }
.pf-mrow.me .pf-mact{ color:var(--flaeche-akzent-ink,var(--pf-sent,#5063D6)); }
.pf-rchip.mir,.pf-reply-prev{ border-color:var(--flaeche-akzent,var(--brand));
background:var(--flaeche-akzent-soft,var(--brand-soft)); }
.pf-search:focus-within,.pf-compbar:focus-within,.pf-klkachel:hover,.pf-mehr-btn:hover{
border-color:var(--flaeche-akzent,var(--brand)); }
.pf-mehr-btn:hover{ background:var(--flaeche-akzent-soft,var(--brand-soft)); }
.pf-icobtn:hover{ background:var(--flaeche-akzent-soft,var(--paper));
color:var(--flaeche-akzent-ink,var(--brand)); }
.pf-conv-check{ accent-color:var(--flaeche-akzent,var(--brand)); }
.pf-trenner:hover::before,.pf-trenner.zieht::before,.pf-trenner:focus-visible::before{
background:var(--flaeche-akzent,var(--brand)); }
.pf-mrow.erwaehnt .pf-bubble{ box-shadow:0 0 0 1.5px var(--flaeche-akzent,var(--brand)); }
.pf-reply-ico,.pf-med-ico,#pf-anhang-menue .ic,.pf-gm-x.an{ color:var(--flaeche-akzent-ink,var(--brand)); }
/* 13) DIE PINNWÄNDE (v2.910.0, Befund Murat 01.10.2026: „burası da ayrı bir
dünya gibi"). Die Knoepfe der Pille nehmen ihre Farbe schon aus Nr. 11
(.bl-u-knopf, dieselben wie im Blatt-Studio). Hier stehen: die Krume
zurueck zur Uebersicht, der Rahmen beim Zeigen auf eine Kachel, die
Kopfkante der Zettel im Bild einer Pinnwand, das Suchfeld beim Tippen
und „Wiederherstellen" im Papierkorb. WAS BLEIBT: die Ordnerfarbe (von
der Lehrkraft gewaehlt) und das gruene „freigegeben" (Bedeutung: die
Kinder sehen es). */
.pwh-krume{ color:var(--flaeche-akzent-ink,var(--brand)); }
.pwh-krume:hover,.pwh-restore:hover{ background:var(--flaeche-akzent-soft,var(--brand-soft)); }
.pwh-kachel:hover .pwh-bild,.pwh-kachel:focus-visible .pwh-bild,.pwh-search:focus-within{
border-color:var(--flaeche-akzent,var(--brand)); }
.pwh-brett i{ border-top-color:var(--flaeche-akzent,var(--brand)); }
.pwh-restore{ border-color:var(--flaeche-akzent,var(--brand)); color:var(--flaeche-akzent-ink,var(--brand)); }
/* „Abbrechen" in den Fenstern: .btn.ghost setzt Farbe und Rand mit
!important - deshalb hier dasselbe, wie bei .az-detail-bar (Nr. 9). */
.pwh-fuss .btn.ghost{ color:var(--flaeche-akzent-ink,var(--brand)) !important;
border-color:color-mix(in srgb, var(--flaeche-akzent,var(--brand)) 30%, transparent) !important; }
/* ===== HINWEIS: RECHTSTEXTE GEAENDERT (v2.98.0) ============================
Gegenstueck zu consentDialog() in index-app.js.
BEWUSST KEIN SPERR-OVERLAY: keine Flaeche ueber der ganzen Seite, kein
`pointer-events` auf dem Hintergrund. Der Hinweis sitzt unten rechts wie
eine Meldung und laesst die Arbeit weiterlaufen. Eine Zustimmung, die man
nur durch Wegklicken loswird, waere nach Art. 7 Abs. 4 DSGVO keine
freiwillige - und wer zwischen zwei Stunden schnell etwas nachschlagen
will, darf daran nicht haengenbleiben.
Auf schmalen Schirmen legt er sich ueber die volle Breite an den unteren
Rand und haelt `safe-area-inset-bottom` frei, damit er nicht unter dem
Home-Indicator klebt. */
#consent-neu, #bn-intro{ position:fixed; z-index:9600; right:18px; bottom:18px; max-width:420px; }
#consent-neu .cn-box, #bn-intro .cn-box{
background:var(--card,#fff); border:1px solid var(--line); border-radius:16px;
box-shadow:0 12px 34px rgba(16,24,40,.16); padding:16px 18px 14px;
animation:cnAuf .22s ease; }
@keyframes cnAuf{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
#consent-neu .cn-kopf, #bn-intro .cn-kopf{ display:flex; align-items:center; gap:9px; margin-bottom:8px; }
#consent-neu .cn-kopf svg, #bn-intro .cn-kopf svg{ width:20px; height:20px; flex:none; stroke:#157347; fill:none;
stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
#consent-neu .cn-kopf b, #bn-intro .cn-kopf b{ font-size:var(--fs-md); font-weight:800; color:var(--ink); flex:1; min-width:0; }
#consent-neu .cn-zu, #bn-intro .cn-zu{ appearance:none; border:0; background:transparent; cursor:pointer;
padding:4px; color:var(--muted); flex:none; border-radius:8px; }
#consent-neu .cn-zu:hover, #bn-intro .cn-zu:hover{ background:var(--line); color:var(--ink); }
#consent-neu .cn-zu svg, #bn-intro .cn-zu svg{ width:16px; height:16px; stroke:currentColor; fill:none;
stroke-width:2.2; stroke-linecap:round; }
#consent-neu p, #bn-intro p{ margin:0 0 9px; font-size:13.5px; line-height:1.5; color:var(--muted); }
#consent-neu .cn-links, #bn-intro .cn-links{ font-size:13px; }
#consent-neu .cn-links a, #bn-intro .cn-links a{ color:var(--brand); font-weight:700; text-decoration:none; }
#consent-neu .cn-links a:hover, #bn-intro .cn-links a:hover{ text-decoration:underline; }
#consent-neu .cn-fuss, #bn-intro .cn-fuss{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; }
#consent-neu .cn-fuss button, #bn-intro .cn-fuss button{ appearance:none; font-family:inherit; font-weight:700;
font-size:13px; padding:8px 14px; border-radius:10px; cursor:pointer; }
#consent-neu .cn-spaeter, #bn-intro .cn-spaeter{ border:1px solid var(--line); background:#fff; color:var(--muted); }
#consent-neu .cn-spaeter:hover, #bn-intro .cn-spaeter:hover{ background:var(--line); color:var(--ink); }
#consent-neu .cn-ok, #bn-intro .cn-ok{ border:0; background:var(--flaeche-akzent,var(--brand)); color:#fff; }
#consent-neu .cn-ok:disabled, #bn-intro .cn-ok:disabled{ opacity:.6; cursor:default; }
@media (max-width:640px){
#consent-neu, #bn-intro{ right:10px; left:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); max-width:none; }
#consent-neu .cn-fuss button, #bn-intro .cn-fuss button{ flex:1; }
/* Drei Knoepfe passen am Telefon nicht in eine Zeile (gemessen 375 px:
„Benachrichtigungen aktivieren" drueckte „Später" ueber den Kartenrand).
Der Hauptknopf steht deshalb oben ueber die volle Breite. */
#bn-intro .cn-fuss{ flex-wrap:wrap; }
#bn-intro .cn-fuss .cn-ok{ flex-basis:100%; order:-1; }
}
/* ===========================================================================
ANSICHT-FENSTER (#ss-fenster) – Ersatz fuer window.open (v2.99.0)
---------------------------------------------------------------------------
WOZU: Arbeitsblatt-Vorschau, Karteikarten, Datentabelle, Mindmap und die
Druckansichten oeffnen seit jeher ein ZWEITES Fenster
(`window.open("","_blank")` + `document.write`). Genau das gibt es in einer
WKWebView (Store-App) und in der installierten PWA NICHT: `window.open`
liefert dort `null`, und der bestehende Code zeigte daraufhin nur noch
„Pop-up wurde blockiert" – auf dem Handy war damit KEINE dieser Ansichten
erreichbar (Befund Murat 02.08.2026).
LOESUNG: dieselben Generatoren schreiben in ein