/* ==========================================================================
   Parler.connect 3.9 – Ergänzungen (zuletzt geladen, hell und dunkel)
   ========================================================================== */

/* Klausurenplan-Import: Abstände und deutliche Häkchen */
.klausur-import-intro { margin-bottom: 18px; }
.klausur-import-intro .alert { display: flex; gap: 10px; align-items: flex-start; }
.klausur-import-tools { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 18px; }
.klausur-import-form .form-grid { margin-bottom: 14px; }
.klausur-import-form .form-actions, .klausur-import-verwerfen .form-actions { margin-top: 18px; }
.klausur-import-verwerfen { margin-top: 8px; }
.klausur-import-row { margin: 0 0 18px; padding: 14px 16px 16px; border: 1px solid var(--border); border-radius: 10px; }
.klausur-import-row.has-vorschlag { border-left: 4px solid var(--success); }
.klausur-import-row legend { font-weight: 700; padding: 0 6px; }
.klausur-original { margin: 10px 0 4px; font-size: .9rem; color: var(--text-muted); }
.klausur-kursliste { display: grid; gap: 6px; margin-top: 14px; }
.klausur-kurs, .klausur-eintragen { position: relative; display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--border-strong); border-radius: 8px; cursor: pointer; background: var(--surface); }
.klausur-eintragen { display: inline-flex; font-weight: 700; margin: 4px 0 2px; }
.klausur-kurs:hover, .klausur-eintragen:hover { border-color: var(--parler-tinte); }
.klausur-kurs input, .klausur-eintragen input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.klausur-kurs-box { flex: none; width: 22px; height: 22px; border: 2px solid var(--blau-3); border-radius: 5px; display: inline-grid; place-items: center; background: #fff; }
.klausur-kurs-box .icon { width: 15px; height: 15px; stroke-width: 3; color: #fff; opacity: 0; }
.klausur-kurs:has(input:checked), .klausur-eintragen:has(input:checked) { background: var(--parler-feder); border-color: var(--parler-tinte); }
:is(.klausur-kurs, .klausur-eintragen) input:checked + .klausur-kurs-box { background: var(--parler-tinte); border-color: var(--parler-tinte); }
:is(.klausur-kurs, .klausur-eintragen) input:checked + .klausur-kurs-box .icon { opacity: 1; }
:is(.klausur-kurs, .klausur-eintragen) input:focus-visible + .klausur-kurs-box { outline: 2px solid var(--parler-kupfer); outline-offset: 2px; }
.klausur-kurs-name { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.page-actions .btn + .btn { margin-left: 0; }

@media screen {
  html[data-theme=dark] .klausur-kurs-box, html[data-theme=dark] .chip-box { background: var(--surface-2); border-color: var(--feld-rand); }
  html[data-theme=dark] :is(.klausur-kurs, .klausur-eintragen) input:checked + .klausur-kurs-box,
  html[data-theme=dark] .chip-check input:checked + .chip-box,
  html[data-theme=dark] .picker-item[aria-pressed="true"] .chip-box { background: #b1cbfa; border-color: #b1cbfa; }
  html[data-theme=dark] :is(.klausur-kurs-box, .chip-box) .icon { color: #142441; }
}

/* Schwarzes Brett auf der Startseite: jeder Aushang als eigene Kachel */
.brett-card { grid-column: 1 / -1; }
.brett-kacheln { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.brett-kachel { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; border: 1px solid var(--border); border-top: 3px solid var(--blau-4); border-radius: 10px; background: var(--parler-papier); min-width: 0; }
.brett-kachel.is-wichtig { border-top-color: var(--parler-kupfer); }
.brett-kachel h3 { margin: 0; font-size: 1.12rem; line-height: 1.25; overflow-wrap: anywhere; }
.brett-text { font-size: .93rem; overflow-wrap: anywhere; }
.brett-text p { margin: 0 0 .5em; }
.brett-text.is-lang { max-height: 14.5em; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.brett-kachel .aushang-attachments { margin: 0; font-size: .86rem; }
.brett-kachel .aushang-attachments li { padding: 4px 0; }
.brett-meta { margin: auto 0 0; font-size: .78rem; color: var(--text-muted); }
@media screen { html[data-theme=dark] .brett-kachel { background: var(--surface-2); } }

/* Geführte Erstanmeldung: Schrittanzeige */
.einrichtung-schritte { margin: 0 0 18px; }
.einrichtung-schritte ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; }
.einrichtung-schritte li { display: inline-flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .88rem; }
.einrichtung-schritte .es-nr { width: 26px; height: 26px; border-radius: 50%; display: inline-grid; place-items: center; border: 2px solid var(--border-strong); font-weight: 700; font-size: .8rem; background: var(--surface); }
.einrichtung-schritte .es-nr .icon { width: 14px; height: 14px; stroke-width: 3; }
.einrichtung-schritte li.is-done .es-nr { background: var(--success-bg); border-color: var(--success); color: var(--success); }
.einrichtung-schritte li.is-current { color: var(--text); font-weight: 700; }
.einrichtung-schritte li.is-current .es-nr { background: var(--parler-tinte); border-color: var(--parler-tinte); color: #fff; }
.einrichtung-fenster { max-width: 640px; }
@media screen { html[data-theme=dark] .einrichtung-schritte li.is-current .es-nr { color: var(--on-accent); } }

/* Eltern: weitere Kinder und Kinderwechsel */
.weitere-kinder p { margin: 0; }
.weitere-kinder .mb-1 { margin-bottom: 10px; }
.weitere-kinder .mt-1 { margin-top: 10px; }
.child-switch { position: relative; display: inline-flex; align-items: center; gap: 6px; }
.child-switch.has-news select { border-color: #e2554a; }
.child-news { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: #c62828; color: #fff; font-weight: 800; font-size: .85rem; line-height: 1; box-shadow: 0 0 0 2px var(--parler-tinte); }
.kindwechsel-hinweis { position: fixed; margin: 0; }

/* Klassenbuch: Inhalt links, Anwesenheit (Übersicht) und Vermerke rechts; Anwesenheit im eigenen Fenster */
.kb-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 20px; align-items: start; }
.kb-col > .card, .kb-col > form > .card { margin-bottom: 20px; }
@media (max-width: 1000px) { .kb-layout { grid-template-columns: 1fr; } }
.att-summary p { margin: 0 0 8px; }
.att-summary-zahl strong { font-size: 1.6rem; font-family: var(--font-titel); }
dialog.att-dialog { width: min(1040px, 96vw); }
.att-dialog .modal-body { max-height: min(70vh, calc(100dvh - 180px)); }
.att-dialog .modal-foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--border); }
.att-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.attendance-dialog { grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); }
.attendance-dialog .att-item { align-items: center; }
.att-person { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.attendance-dialog .att-item .att-name { white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; }
.att-meta { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: .76rem; color: var(--text-muted); }
.att-meta .help { margin: 0; font-size: .76rem; }
.att-frueher .icon { width: .95em; height: .95em; }
.att-stand { font-weight: 700; }
.att-stand-ok { color: var(--success); }
.att-stand-warn { color: var(--danger); }

@media screen {
  /* Darkmode: Anwesenheitsknöpfe, Häkchen und Profilsymbole mit ausreichendem Kontrast */
  html[data-theme=dark] .seg { border-color: var(--feld-rand); }
  html[data-theme=dark] .seg label { background: var(--surface-2); color: var(--text); border-color: var(--border); }
  html[data-theme=dark] .seg input:checked + label { background: #b1cbfa; color: #142441; }
  html[data-theme=dark] .seg input.st-fehlt:checked + label { background: #ff9d92; color: #2a0d0b; }
  html[data-theme=dark] .seg input.st-spaet:checked + label { background: #f0b996; color: #2b1407; }
  html[data-theme=dark] .att-item { background: var(--surface-2); border-color: var(--border); }
  html[data-theme=dark] .att-item.is-absent { background: #4b2c35; border-color: #b4646f; }
  html[data-theme=dark] .att-item.is-late { background: #4c352e; border-color: #b07a5c; }
  html[data-theme=dark] .att-item.is-excused { background: #273b59; border-color: #6f8fc0; }
  html[data-theme=dark] .att-stand-warn { color: #ffb9b0; }
  html[data-theme=dark] input[type=checkbox], html[data-theme=dark] input[type=radio] { accent-color: #b1cbfa; }
  html[data-theme=dark] .check input[type=checkbox] { outline: 1px solid var(--feld-rand); outline-offset: 0; border-radius: 3px; }
  html[data-theme=dark] .avatar, html[data-theme=dark] .chat-item .avatar, html[data-theme=dark] .chat-item.active .avatar,
  html[data-theme=dark] .member-list .avatar, html[data-theme=dark] .avatar[style] { background: #2f4a72 !important; color: #f2f6fd !important; border: 1px solid #6f8fc0; }
  html[data-theme=dark] .chat-item.is-group .avatar { background: #5a3d33 !important; color: #ffe2d4 !important; border-color: #b07a5c; }
}

/* Postfach: Kategorien und Regeln in zwei Reitern */
.mail-organisation > summary { cursor: pointer; padding: 14px 18px; font-weight: 700; }
.mo-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 14px; }
.mo-tabs [role=tab] { display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border: 0; border-bottom: 3px solid transparent; background: none; color: var(--text-muted); font: inherit; font-weight: 700; cursor: pointer; }
.mo-tabs [role=tab][aria-selected=true] { color: var(--text); border-bottom-color: var(--parler-kupfer); }
.mo-erklaerung { background: var(--parler-feder); border-left: 3px solid var(--blau-3); padding: 10px 14px; border-radius: 6px; }
.mo-tabelle { margin: 12px 0 6px; }
.mo-unter { font-size: 1rem; margin: 18px 0 8px; }

/* Tour 3.9: Fenster bleibt im sichtbaren Bereich (Vollbild, Brave, Mobil); Knöpfe immer erreichbar */
.portal-tour{display:flex;flex-direction:column;padding:0;overflow:hidden;max-width:calc(100vw - 24px);box-sizing:border-box}
.portal-tour:not([open]){display:none}
.portal-tour .tour-body{padding:20px 22px 8px;overflow:auto;min-height:0;flex:1 1 auto}
.portal-tour .tour-body h2{font-size:1.15rem}
.portal-tour .tour-actions{flex:0 0 auto;margin:0;padding:12px 22px 16px;border-top:1px solid var(--border,#c7c2bb);background:var(--surface,#faf8f5);justify-content:flex-end}
.portal-tour .tour-actions .btn:first-child{margin-right:auto}
@media (max-width:480px){.portal-tour .tour-actions .btn{flex:1 1 auto}}

/* Work together 3.9: Teilnehmerkreis, Whiteboard-Text, Brainstorming */
.work-kreis{border:0;padding:0;margin:0 0 16px;display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.work-kreis legend{font-weight:600;margin-bottom:8px}
.work-kreis-option{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--border);border-radius:12px;padding:12px 14px;cursor:pointer}
.work-kreis-option:has(input:checked){border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.work-kreis-option span{display:flex;flex-direction:column;gap:2px}.work-kreis-option small{color:var(--muted)}
.work-new .form-actions{margin-top:16px}
.work-whiteboard{position:relative}
.work-whiteboard text{font-family:'Parler-Text',Georgia,serif}
.work-whiteboard.is-text svg{cursor:text}
.work-size{display:inline-flex;align-items:center;gap:6px}.work-size span{font-size:.85rem;color:var(--muted)}
.work-text-hint{flex-basis:100%}
.work-text-editor{position:absolute;z-index:3;margin:0;padding:0;border:0;outline:1.5px dashed #a87654;outline-offset:3px;border-radius:2px;background:rgba(255,255,255,.85);resize:none;overflow:hidden;white-space:pre;min-height:0;box-shadow:none}
.work-brainstorming{display:flex;flex-direction:column;gap:16px}
.work-phase{margin:0;font-weight:600}
.work-phase-switch{display:inline-flex;gap:6px}
.work-phase-switch .btn[aria-pressed="true"]{pointer-events:none}
.work-idea-form{display:flex;gap:10px;align-items:stretch}.work-idea-form textarea{flex:1;min-height:56px;resize:vertical}
.work-idea-wall.is-sammeln{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.work-idea-wall.is-clustern{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,1fr);gap:14px;overflow-x:auto;padding-bottom:8px}
.work-idea{position:relative;background:var(--idee,#f6f1e9);color:#292b30;border-radius:12px;padding:12px 30px 12px 14px;box-shadow:0 1px 3px #0002;font-family:'Parler-Text',Georgia,serif;font-size:1.02rem;line-height:1.4}
.work-idea p{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.work-idea small{display:block;margin-top:6px;font-size:.75rem;color:#5d5348}
.work-idea.is-own{outline:2px solid #a87654}
.work-idea[draggable="true"]{cursor:grab}.work-idea.is-dragging{opacity:.5}
.work-idea>.btn-ghost{position:absolute;top:4px;right:4px;padding:2px 8px;color:#292b30}
.work-idea-move{margin-top:8px;width:100%;font-size:.8rem;padding:4px 6px;background:#fffc;color:#292b30;border-color:#0002}
.work-cluster{background:var(--surface-2,#f1ece5);border:1px solid var(--border);border-top:6px solid var(--idee);border-radius:14px;padding:10px;min-height:180px;display:flex;flex-direction:column;gap:10px}
.work-cluster.is-open{border-top-color:var(--border)}
.work-cluster.is-over{outline:2px dashed var(--primary);outline-offset:2px}
.work-cluster header{display:flex;align-items:center;gap:6px}.work-cluster h3{margin:0;font-size:1rem;flex:1}
.work-cluster-body{display:flex;flex-direction:column;gap:8px}
@media (max-width:700px){.work-idea-form{flex-direction:column}.work-idea-wall.is-clustern{grid-auto-flow:row;grid-auto-columns:auto}}

/* Games Corner 3.9 */
.gc-kopf{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 18px}
.gc-kopf>div{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:2px}
.gc-kopf .help{grid-column:1/-1;margin:0}
.gc-zahl{font-family:'Parler-Titel',Georgia,serif;font-size:1.6rem;font-weight:700;color:var(--primary)}
.gc-kopf small{color:var(--muted)}
.gc-spiele{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.gc-spiel{display:flex;flex-direction:column;gap:10px;border:1px solid var(--border);border-radius:14px;padding:16px;background:var(--surface)}
.gc-spiel-icon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:#a8765422;color:#a87654}
.gc-spiel-icon .icon{width:22px;height:22px}
.gc-spiel h3{margin:0;font-size:1.05rem}.gc-spiel p{margin:2px 0}
.gc-spiel-text{flex:1}
.gc-spiel-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.gc-spiel-fuss small{color:var(--muted);flex:1 1 100%}
.gc-spiel-fuss .btn{margin-left:auto}
.gc-sterne{display:inline-flex;gap:2px;font-size:1.15rem;line-height:1}
.gc-sterne span{color:var(--border,#c7c2bb)}.gc-sterne span.is-on{color:#d4a017}
.gc-sterne-gross{font-size:3rem;justify-content:center;display:flex}
.gc-orden-badge{display:inline-block;border-radius:999px;padding:3px 10px;font-size:.8rem;font-weight:600;border:1px solid var(--border)}
.gc-orden-badge.is-bronze{background:#cd7f3233;color:#8a4b14;border-color:#cd7f32}
.gc-orden-badge.is-silber{background:#b8bec633;color:#4a5260;border-color:#9aa1ab}
.gc-orden-badge.is-gold{background:#e6b80033;color:#7a5a00;border-color:#d4a017}
.gc-orden-badge.is-leer{color:var(--muted)}
.gc-laufbahn{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.gc-laufbahn li{display:grid;grid-template-columns:120px 1fr auto;align-items:center;gap:12px;padding:10px 14px;border:1px solid var(--border);border-radius:12px}
.gc-laufbahn li.is-aktuell{border-color:var(--primary);box-shadow:0 0 0 1px var(--primary)}
.gc-laufbahn li.is-spaeter{opacity:.55}
.gc-orden-liste{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.gc-orden{display:flex;gap:10px;align-items:center;border:1px solid var(--border);border-radius:12px;padding:10px 12px}
.gc-orden span:last-child{display:flex;flex-direction:column}.gc-orden small{color:var(--muted)}
.gc-orden-symbol{font-size:1.6rem;line-height:1}
.gc-orden.is-bronze .gc-orden-symbol{color:#cd7f32}.gc-orden.is-silber .gc-orden-symbol{color:#9aa1ab}.gc-orden.is-gold .gc-orden-symbol{color:#d4a017}.gc-orden.is-abzeichen .gc-orden-symbol{color:#a87654}
.gc-bestenliste{list-style:none;padding:0;margin:16px 0 0;display:grid;gap:6px}
.gc-bestenliste li{display:grid;grid-template-columns:40px 1fr auto;gap:10px;align-items:center;padding:8px 12px;border:1px solid var(--border);border-radius:10px}
.gc-bestenliste li.is-ich{border-color:var(--primary)}
.gc-platz{font-weight:700;color:var(--primary)}
.gc-dialog{width:min(620px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:1px solid var(--border);border-radius:18px;padding:0;background:var(--surface,#faf8f5);color:var(--text)}
.gc-dialog::backdrop{background:rgba(20,25,30,.45)}
.gc-dialog-kopf{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
.gc-dialog-kopf h2{margin:0;font-size:1.2rem}
#gc-inhalt{padding:18px;overflow:auto}
.gc-status{display:flex;flex-wrap:wrap;align-items:center;gap:12px;font-size:.9rem;color:var(--muted);margin-bottom:14px}
.gc-leben span{color:var(--border,#c7c2bb);font-size:1.1rem}.gc-leben span.is-on{color:#c0392b}
.gc-serie.is-heiss{color:#a87654;font-weight:700}
.gc-fortschritt{flex:1 1 100%;height:6px;border-radius:6px;background:var(--border);overflow:hidden}
.gc-fortschritt span{display:block;height:100%;background:var(--primary);transition:width .3s}
.gc-frage{font-family:'Parler-Text',Georgia,serif;font-size:1.35rem;line-height:1.45;margin:0 0 14px}
.gc-bild-wrap svg{width:100%;max-width:340px;display:block;margin:0 auto 12px}
.gc-bild text{font-family:'Parler-Labels',Arial,sans-serif;font-size:15px;fill:#183458}
.gc-antwort{display:flex;gap:10px;flex-wrap:wrap}
.gc-eingabe{flex:1;min-width:140px;font-size:1.2rem;padding:10px 12px}
.gc-optionen{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;width:100%}
.gc-option{font-size:1.05rem;padding:12px}
.gc-option.is-richtig{background:#2e7d32;color:#fff;border-color:#2e7d32}
.gc-option.is-falsch{background:#c0392b;color:#fff;border-color:#c0392b}
.gc-rueckmeldung{margin-top:16px;padding:12px 14px;border-radius:12px;border:1px solid}
.gc-rueckmeldung.is-richtig{border-color:#2e7d32;background:#2e7d3218}
.gc-rueckmeldung.is-falsch{border-color:#c0392b;background:#c0392b14}
.gc-rueckmeldung p{margin:6px 0}.gc-rueckmeldung .btn{margin-top:8px}
.gc-ende{text-align:center}.gc-ende .form-actions{justify-content:center;margin-top:16px}
.gc-neu{font-weight:700;color:#a87654}
[data-theme="dark"] .gc-orden-badge.is-bronze,[data-theme="dark"] .gc-orden-badge.is-silber,[data-theme="dark"] .gc-orden-badge.is-gold{color:#f3e9dc}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .gc-orden-badge.is-bronze,:root:not([data-theme="light"]) .gc-orden-badge.is-silber,:root:not([data-theme="light"]) .gc-orden-badge.is-gold{color:#f3e9dc}}
@media (max-width:600px){.gc-kopf{grid-template-columns:1fr 1fr}.gc-laufbahn li{grid-template-columns:1fr auto}.gc-laufbahn li>span:nth-child(2){grid-row:2}}
.gc-optionen .btn.gc-option.is-richtig,.gc-optionen .btn.gc-option.is-richtig:disabled{background:#2e7d32;color:#fff;border-color:#2e7d32;opacity:1}
.gc-optionen .btn.gc-option.is-falsch,.gc-optionen .btn.gc-option.is-falsch:disabled{background:#c0392b;color:#fff;border-color:#c0392b;opacity:1}
.gc-rueckmeldung strong{display:block}

/* Games Corner 3.9: Mathe-Expedition als eingebettete Spielfläche */
.gc-frame-wrap{margin:0 -4px}
.gc-frame{display:block;width:100%;min-height:600px;height:900px;border:0;border-radius:16px;background:transparent}