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;} .mat-modal-body #advanced-options > .mat-group.collapsed > .mat-group-ttl > .mat-grp-sum{display:block;} .mat-modal-body #advanced-options > .mat-group > .mat-group-ttl{cursor:pointer;margin-bottom:0;} .mat-modal-body #advanced-options > .mat-group:not(.collapsed) > .mat-group-ttl{margin-bottom:11px;} .mat-modal-body #advanced-options > .mat-group.collapsed > .mat-group-bd{display:none;} .mat-modal-body #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. */ .mat-modal-body #advanced-options > .mat-group > .mat-group-ttl > .mat-grp-sum + .mat-grp-chev{margin-left:8px;} .mat-modal-body #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);} .mat-modal-body #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:14.5px;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;} /* ===== Lernspiele (Premium) Akkordeon ===== */ .ls-acc{margin:18px 0 6px;border-radius:16px;padding:2px; background:linear-gradient(135deg,#7A5AF8 0%,#2E5BFF 45%,#00B3A6 100%); box-shadow:0 6px 22px rgba(90,60,248,.14);} .ls-acc-inner{background:var(--card);border-radius:14px;overflow:hidden;} .ls-acc-head{display:flex;align-items:center;gap:11px;padding:15px 16px;cursor:pointer;user-select:none;} .ls-acc-ico{flex:none;width:34px;height:34px;border-radius:10px;display:flex;align-items:center;justify-content:center; background:linear-gradient(135deg,#7A5AF8,#2E5BFF);color:#fff;} .ls-acc-ttl{font-weight:800;font-size:15px;letter-spacing:-.2px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;} .ls-acc-sub{font-size:12px;color:var(--muted);margin-top:2px;} .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{margin-left:auto;flex:none;color:var(--muted);transition:transform .18s ease;} .ls-acc-arrow.open{transform:rotate(90deg);} .ls-acc-body{padding:4px 16px 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:#7A5AF8;background:rgba(122,90,248,.05);} .ls-tile:active{transform:scale(.98);} .ls-tile.on{border-color:#7A5AF8;background:linear-gradient(135deg,rgba(122,90,248,.12),rgba(46,91,255,.08)); box-shadow:0 0 0 3px rgba(122,90,248,.15);} .ls-tile-ico{width:26px;height:26px;margin:0 auto 7px;color:#7A5AF8;} .ls-tile.on .ls-tile-ico{color:#5A3CF8;} .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:#7A5AF8;color:#fff;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:#7A5AF8;background:rgba(122,90,248,.08);box-shadow:0 0 0 1px #7A5AF8 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:rgba(122,90,248,.07);border:1px solid rgba(122,90,248,.18); 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:#7A5AF8;margin-top:1px;} .ls-locked{opacity:.45;pointer-events:none;filter:grayscale(.3);} .ls-lockbadge{display:none;font-size:11px;font-weight:700;color:#7A5AF8;background:rgba(122,90,248,.1); 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);} /* 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. */ .typ-grid{display:flex;flex-wrap:wrap;gap:6px;} .typ-row{display:inline-flex;align-items:center;gap:7px;cursor:pointer;font-size:12.5px;font-weight:700; color:var(--sub,#475569);border:1.5px solid var(--line);border-radius:20px;padding:6px 12px 6px 9px; background:var(--card);white-space:nowrap;transition:border-color .12s,background .12s,color .12s;} .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:16px;height:16px;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;} /* ===== 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:10px; } /* 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; } body[data-screen="blaetter"] #screen-blaetter{ flex:1 1 auto; min-height:0; overflow:hidden; display:flex; flex-direction:column; } body[data-screen="blaetter"] #blaetter-content{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } 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) */ --sb-gap: 14px; /* Abstand Sidebar <-> Inhaltskarte */ } /* 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)); /* etwas mehr Luft unten (Wunsch: Panel unten ein Stück "runter"). */ --shell-bot:max(26px, env(safe-area-inset-bottom)); padding:var(--shell-top) clamp(12px, 1.4vw, 22px) var(--shell-bot); min-height:var(--vh100); /* Breiter (2026-07): auf 13-Zoll-Tablets/grossen Monitoren blieb bei 1560px links/rechts viel Luft ungenutzt. 1760px nutzt 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). */ max-width:1760px; 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; } /* 2026-07 (Wunsch Murat, Vorbild Gmail): Die Leiste ist KEINE eigene weisse Karte mehr, sondern Teil der Flaeche dahinter – weiss ist nur noch das Inhaltspanel rechts. Dadurch wirkt die Seite ruhiger und der Blick landet dort, wo gearbeitet wird. Konkret entfallen background, border und box-shadow; Breite, Position und Innenabstand bleiben unveraendert. ACHTUNG: Mobil bleibt die Leiste eine Schublade ueber dem Inhalt und MUSS dort undurchsichtig sein – siehe die Regel bei @media(max-width:899.98px). */ 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:22px; 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; } /* 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); /* Innenabstand skaliert mit: Tablet kompakter, Desktop großzügig. */ padding:20px clamp(18px, 2vw, 28px) 32px; align-self:flex-start; min-height:calc(var(--vh100) - var(--shell-top,16px) - var(--shell-bot,16px)); } /* 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; } 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). */ 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; } 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%; } /* ===== 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 */ } 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; } body.has-sidebar[data-screen="lautlesezeit"]:not(.lh-fullscreen) #screen-lautlesezeit{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } 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; } /* 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; } body.has-sidebar[data-screen="unterrichtsfaecher"]:not(.lh-fullscreen) #screen-unterrichtsfaecher{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } 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; } body.has-sidebar[data-screen="nachrichten"]:not(.lh-fullscreen) #screen-nachrichten{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; } 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; } /* Screens innerhalb des Panels: keine eigene weiße Karte mehr (sonst Weiß-auf-Weiß). Rahmen/Schatten/Hintergrund entfernen, Panel trägt alles. */ body.has-sidebar:not(.lh-fullscreen) .wrap > section.card, body.has-sidebar:not(.lh-fullscreen) .wrap > section > .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{ margin:0 0 20px; padding-bottom:16px; border-bottom:1px solid var(--line); } } @media (min-width:1440px){ body.has-sidebar:not(.lh-fullscreen) .wrap{ padding:24px 30px 36px; } } /* ---------- 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:rgba(127,127,127,.08); color:var(--muted); display:flex; align-items:center; justify-content:center; transition:background .14s,color .14s; } #app-sidebar .sb-toggle:hover{ background:rgba(127,127,127,.16); color:var(--ink); } #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; } /* 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; } #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. */ #app-sidebar .sb-update{ color:var(--ink); } #app-sidebar .sb-update .sb-ico{ position:relative; color:#2E5BFF; } #app-sidebar .sb-update .sb-ico::after{ content:""; position:absolute; top:3px; right:3px; width:7px; height:7px; border-radius:50%; background:#2E5BFF; box-shadow:0 0 0 2px var(--card); } #app-sidebar .sb-update:hover{ background:rgba(46,91,255,.10); color:var(--ink); } #app-sidebar .sb-update:hover .sb-ico{ background:transparent; } #app-sidebar .sb-update:hover .sb-ico svg{ stroke:#2E5BFF; animation:none; } body.sb-open #app-sidebar .sb-update .sb-desc{ max-height:15px; opacity:1; } /* Kurze Bildschirme: Navigation kompakter, damit ALLE Knöpfe sichtbar bleiben (Inhalte skalieren, nichts verschwindet). */ @media (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; } #app-sidebar .sb-item svg{ width:17px; height:17px; } } @media (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; } } #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); 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); 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 */ #app-sidebar .sb-item{ appearance:none; border:none; background:transparent; cursor:pointer; font-family:inherit; color:var(--muted); width:100%; display:flex; align-items:center; gap:11px; padding:6px 10px; border-radius:11px; margin:1px 0; text-align:left; transition:background .13s,color .13s; } #app-sidebar .sb-item:hover{ background:rgba(127,127,127,.08); color:var(--ink); } #app-sidebar .sb-item.on{ background:var(--brand-soft); color:var(--brand); font-weight:700; } #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; } #app-sidebar .sb-item:hover .sb-ico{ background:var(--sbc,#7F77DD); } #app-sidebar .sb-item:hover .sb-ico svg{ stroke:#fff; animation:sbWob .5s ease; } #app-sidebar .sb-ico .pp{ position:absolute; right:-2px; top:-2px; width:5px; height:5px; border-radius:50%; background:var(--sbc,#7F77DD); opacity:0; transform:scale(0); pointer-events:none; } #app-sidebar .sb-ico .pp2{ right:auto; left:-3px; top:auto; bottom:-1px; width:4px; height:4px; } #app-sidebar .sb-item:hover .sb-ico .pp{ animation:sbPop .6s ease forwards; } #app-sidebar .sb-item:hover .sb-ico .pp2{ animation:sbPop .6s ease .12s forwards; } @keyframes sbWob{ 0%{transform:rotate(0) scale(1)} 35%{transform:rotate(8deg) scale(1.15)} 70%{transform:rotate(-6deg) scale(1.05)} 100%{transform:rotate(0) scale(1.08)} } @keyframes sbPop{ 0%{opacity:0; transform:scale(0) translate(0,0)} 40%{opacity:1; transform:scale(1) translate(2px,-4px)} 100%{opacity:0; transform:scale(.4) translate(5px,-10px)} } #app-sidebar .sb-item .sb-desc{ display:block; font-size:10.5px; font-weight:500; color:var(--muted); max-height:0; opacity:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; transition:max-height .2s ease, opacity .2s ease; letter-spacing:0; } body.sb-open #app-sidebar .sb-item:hover .sb-desc{ max-height:15px; opacity:1; } body:not(.sb-open) #app-sidebar .sb-ico{ width:30px; height:26px; border-radius:8px; } @media (prefers-reduced-motion: reduce){ #app-sidebar .sb-item:hover .sb-ico svg, #app-sidebar .sb-item:hover .sb-ico .pp, #app-sidebar .sb-item:hover .sb-ico .pp2{ animation:none; } } /* 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; } /* ---------- 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; } .app-topbar #authbar{ flex:none; } /* 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; } /* ===== 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); padding: 16px 16px 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). */ body.has-sidebar:not(.lh-fullscreen) .wrap > section.card, body.has-sidebar:not(.lh-fullscreen) .wrap > section > .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 */ 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(--card); 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; } body.has-sidebar.drawer-open #app-sidebar{ transform:translateX(0); } #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)); } /* 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; } } /* ===== PINNWÄNDE: Ordner-Übersicht (App-Tab) ===== */ .pwh-toolbar{display:flex;align-items:stretch;gap:8px;margin-bottom:18px;flex-wrap:nowrap;} /* Suche + Buttons alle exakt 40px hoch (box-sizing), damit nichts heraussteht. */ .pwh-search{display:flex;align-items:center;gap:8px;flex:1;min-width:0;height:40px;box-sizing:border-box;background:var(--paper,#F4F6FA);border:1.5px solid var(--line);border-radius:10px;padding:0 12px;color:var(--muted);} .pwh-search input{flex:1;min-width:0;border:none;outline:none;background:transparent;font:inherit;font-size:14px;color:var(--ink);} .pwh-search-x{border:none;background:transparent;color:var(--muted);cursor:pointer;font-size:14px;flex:none;} .pwh-tbtn{flex:none;height:40px;box-sizing:border-box;display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--line);background:#fff;color:var(--ink);border-radius:10px;padding:0 14px;font:inherit;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;} .pwh-tbtn.primary{background:var(--brand,#2E5BFF);border-color:var(--brand,#2E5BFF);color:#fff;} .pwh-tbtn.danger{border-color:#F1A9A9;background:#FDECEC;color:#B42318;} .pwh-tbtn:hover{filter:brightness(.97);} @media(max-width:560px){ .pwh-tbtn-tx{display:none;} .pwh-tbtn{padding:8px 10px;} } .pwh-trash-h{font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);margin:4px 0 6px;} .pwh-trash-row{display:flex;align-items:center;gap:9px;padding:8px 2px;border-bottom:1px solid var(--line);} .pwh-trash-name{flex:1;min-width:0;font-size:13.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pwh-restore{flex:none;border:1.5px solid var(--brand,#2E5BFF);background:#fff;color:var(--brand,#2E5BFF);border-radius:9px;padding:5px 11px;font:inherit;font-size:12px;font-weight:700;cursor:pointer;} .pwh-restore:hover{background:var(--brand-soft,#E9EEFF);} .pwh-purge{flex:none;border:1.5px solid #F1A9A9;background:#FDECEC;color:#B42318;border-radius:9px;padding:5px 8px;cursor:pointer;display:inline-flex;align-items:center;} .pwh-crumb{display:flex;align-items:center;gap:8px;margin-bottom:16px;font-size:14px;color:var(--muted);} .pwh-home{display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--line);background:#fff;border-radius:9px;width:32px;height:32px;cursor:pointer;color:var(--ink);} .pwh-home:hover{border-color:var(--brand);color:var(--brand);} .pwh-sec-h{font-size:16px;font-weight:850;color:var(--ink);margin:0 0 10px;} .pwh-hint{color:var(--muted);font-size:14px;padding:12px 2px;} .pwh-newitem{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;font:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:9px 11px;border-radius:9px;cursor:pointer;text-align:left;} .pwh-newitem:hover{background:var(--brand-soft,#E9EEFF);} /* FESTE Kartenbreite (240px) + linksbündig: Karten ändern ihre Größe NIE, egal wie viele es sind. Ordner und Pinnwände nutzen dieselbe Breite -> Spalten sind bündig untereinander (stabil, kein Springen beim Hinzufügen). */ .pwh-fgrid{display:grid;grid-template-columns:repeat(auto-fill,240px);justify-content:start;gap:13px;} .pwh-folder{background:#fff;border:1.5px solid var(--line);border-left:5px solid var(--fc,#2E5BFF);border-radius:14px;padding:13px 15px;cursor:pointer;transition:transform .12s,box-shadow .12s;} .pwh-folder:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,30,60,.13);} .pwh-folder-top{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;} .pwh-fmenu{border:none;background:transparent;color:var(--muted);cursor:pointer;padding:2px;border-radius:6px;opacity:.6;} .pwh-fmenu:hover{opacity:1;background:rgba(127,127,127,.1);} .pwh-folder-name{font-weight:850;font-size:15.5px;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pwh-folder-meta{font-size:12.5px;color:var(--muted);font-weight:700;margin-top:3px;} .pwh-bgrid{display:grid;grid-template-columns:repeat(auto-fill,240px);justify-content:start;gap:13px;} .pwh-board{position:relative;overflow:hidden;background:var(--sf,#E9EEFF);border:1.5px solid var(--line);border-top:4px solid var(--ac,#2E5BFF);border-radius:14px;padding:14px 15px;cursor:pointer;transition:transform .12s,box-shadow .12s;min-height:92px;} .pwh-board::after{content:"";position:absolute;top:-20px;right:-20px;width:70px;height:70px;border-radius:50%;background:var(--ac,#2E5BFF);opacity:.16;pointer-events:none;} .pwh-board:hover{transform:translateY(-2px);box-shadow:0 8px 22px rgba(20,30,60,.13);} .pwh-board-title,.pwh-board-desc,.pwh-board-meta,.pwh-board-open,.pwh-bmenu{position:relative;z-index:1;} .pwh-bmenu{position:absolute;top:8px;right:8px;z-index:5;border:none;background:rgba(255,255,255,.9);color:var(--ink);cursor:pointer;padding:5px;border-radius:8px;opacity:.7;line-height:0;box-shadow:0 1px 4px rgba(20,30,60,.12);transition:opacity .12s,background .12s,box-shadow .12s;} .pwh-board:hover .pwh-bmenu{opacity:1;} .pwh-bmenu:hover{background:#fff;box-shadow:0 3px 10px rgba(20,30,60,.2);} .pwh-board-title{font-weight:850;font-size:15.5px;color:var(--ink);margin-bottom:4px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:22px;} .pwh-board-desc{font-size:12.5px;color:var(--ink);opacity:.72;margin-bottom:5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;} .pwh-board-meta{font-size:12.5px;color:var(--ink);opacity:.65;font-weight:700;} .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:14.5px;color:var(--ink);resize:vertical;} .pwh-seg-row{display:flex;gap:6px;} .pwh-seg{flex:1;border:1.5px solid var(--line);background:#fff;border-radius:9px;padding:8px;font:inherit;font-size:13.5px;font-weight:700;color:var(--muted);cursor:pointer;} .pwh-seg.on{background:var(--brand,#2E5BFF);border-color:var(--brand,#2E5BFF);color:#fff;} .pwh-toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px;font-size:13.5px;color:var(--ink);cursor:pointer;} .pwh-toggle span{flex:1;} .pwh-toggle input{width:20px;height:20px;flex:none;cursor:pointer;} .pwh-board-open{font-size:12px;color:var(--brand);font-weight:700;margin-top:8px;opacity:0;transition:opacity .12s;} .pwh-board:hover .pwh-board-open{opacity:1;} .pwh-sw-row{display:flex;flex-wrap:wrap;gap:9px;} .pwh-sw{width:30px;height:30px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0;} .pwh-sw.on{border-color:var(--ink);box-shadow:0 0 0 2px #fff inset;} .pwh-pop{position:absolute;background:#fff;border:1px solid var(--line);border-radius:11px;box-shadow:0 12px 34px rgba(15,23,42,.2);padding:5px;min-width:190px;z-index:80;} .pwh-pop button{display:block;width:100%;border:none;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);padding:9px 11px;border-radius:8px;cursor:pointer;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} .pwh-pop button:hover{background:var(--brand-soft,#E9EEFF);} .pwh-pop button.danger{color:#D9534F;} .pwh-pop button.danger:hover{background:#FDECEC;} .pwh-pop-lbl{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);padding:6px 11px 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. ===================================================================== */ .ss-wrap{margin:0 auto;padding:6px clamp(14px,1.6vw,24px) 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;} /* ---- 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. ===================================================================== */ .sv-tbar{background:var(--card);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow); padding:10px 12px;margin-bottom:12px;display:flex;align-items:center;gap:9px;flex-wrap:wrap;} .sv-search{flex:1 1 240px;min-width:0;display:flex;align-items:center;gap:8px; border:1px solid var(--line);border-radius:12px;padding:7px 12px;background:var(--paper);} .sv-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:13.5px;color:var(--ink);outline:none;} .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-menu .sv-neu-zeile{display:flex;gap:6px;margin:0 10px 8px;} .sv-menu .sv-neu-zeile select{margin:0;flex:1;width:auto;} .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;} /* ---- 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;} /* ---- 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;} .sv-search{flex:1 1 100%;} .sv-tbar-sp{display:none;} .sv-menuwrap{flex:1 1 calc(50% - 5px);min-width:0;} .sv-menuwrap > .ss-btn{width:100%;justify-content:center;display:flex;align-items:center;gap:7px;} .sv-menu{left:0;right:auto;} /* 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:434;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:16.5px;letter-spacing:-.01em;overflow-wrap:anywhere;} .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;} /* 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:10px; padding:16px 18px 12px;background:var(--card,#fff);border-bottom:1px solid var(--line);} .kbv-kopf b{display:block;font-size:15px;font-weight:800;color:var(--ink);letter-spacing:-.01em;} .kbv-kopf small{display:block;margin-top:2px;font-size:12px;color:var(--muted);} .kbv-zu{flex:none;margin-left:auto;width:30px;height:30px;border:1px solid var(--line); border-radius:9px;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:10px 12px 22px;} .kbv-grp + .kbv-grp{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);} .kbv-grp-t{font-size:11px;font-weight:800;color:var(--muted);text-transform:uppercase; letter-spacing:.06em;padding:2px 6px 7px;} .kbv-item{display:flex;align-items:flex-start;gap:11px;width:100%;box-sizing:border-box; border:1px solid transparent;border-radius:11px;background:none;font:inherit;text-align:left; padding:9px 10px;cursor:pointer;transition:background .12s,border-color .12s;} .kbv-item:hover{background:var(--paper,#F4F5F9);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:9px;background:var(--paper,#F4F5F9); 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:13.5px;font-weight:700;color:var(--ink);} .kbv-tx small{display:block;margin-top:1px;font-size:11.5px;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,#E0463E);} .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,#E0463E);} /* "Verwalten" traegt als einziger Knopf der Zeile immer seine Beschriftung - er ist die Tuer, nicht eine Aktion unter vielen. */ .kbx-act.kbx-verw .kbx-actlbl{max-width:110px;opacity:1;margin-left:6px;} .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);} } /* ---- 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:10px;margin:0 0 10px; padding:9px 14px;border:1px solid var(--ok,#15A05A);border-radius:12px; 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,#15A05A); stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;} .kbx-tablewrap .kbx-neubar span{flex:1;min-width:0;font-size:13px;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:99px; background:var(--card);color:var(--ink);cursor:pointer;padding:5px 12px;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;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.2;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 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);} /* 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:14.5px;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-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: - `--brand` selbst (353 Stellen: Links, Fokusringe, Diagramme, Balken). - 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. Hier ist die Flaeche ein Hauch und die Schrift traegt die Farbe – deshalb die beiden anderen Variablen. */ #app-sidebar .sb-item.on{ background:var(--flaeche-akzent-soft,var(--brand-soft)); color:var(--flaeche-akzent-ink,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,#F4F5F9)); } /* 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)); } /* ===== 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{ position:fixed; z-index:9600; right:18px; bottom:18px; max-width:420px; } #consent-neu .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{ display:flex; align-items:center; gap:9px; margin-bottom:8px; } #consent-neu .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{ font-size:14.5px; font-weight:800; color:var(--ink); flex:1; min-width:0; } #consent-neu .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{ background:var(--line); color:var(--ink); } #consent-neu .cn-zu svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2.2; stroke-linecap:round; } #consent-neu p{ margin:0 0 9px; font-size:13.5px; line-height:1.5; color:var(--muted); } #consent-neu .cn-links{ font-size:13px; } #consent-neu .cn-links a{ color:var(--brand); font-weight:700; text-decoration:none; } #consent-neu .cn-links a:hover{ text-decoration:underline; } #consent-neu .cn-fuss{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px; } #consent-neu .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{ border:1px solid var(--line); background:#fff; color:var(--muted); } #consent-neu .cn-spaeter:hover{ background:var(--line); color:var(--ink); } #consent-neu .cn-ok{ border:0; background:var(--flaeche-akzent,var(--brand)); color:#fff; } #consent-neu .cn-ok:disabled{ opacity:.6; cursor:default; } @media (max-width:640px){ #consent-neu{ right:10px; left:10px; bottom:calc(10px + env(safe-area-inset-bottom, 0px)); max-width:none; } #consent-neu .cn-fuss button{ flex: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