/* portal.musterschule.at · Übersicht */
.gruss{padding:10px 2px 4px}
.gruss h1{font-size:clamp(30px,7vw,46px);color:var(--tinte)}
.gruss h1 span{color:var(--blau)}
.gruss .datum{margin-top:4px;color:var(--leise);font-size:15px}
.gruss .wer{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.gruss .anmelden{margin-top:16px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.gruss .anmelden p{font-size:15px;color:var(--leise);max-width:34em}
.motto{display:flex;gap:14px;font-weight:700;font-size:15px;margin-top:10px;letter-spacing:.02em}
.motto span:nth-child(1){color:var(--leisten)}.motto span:nth-child(2){color:#96660b}.motto span:nth-child(3){color:var(--blau)}

/* Favoriten: wie ein Home-Bildschirm */
.favoriten{display:grid;grid-template-columns:repeat(auto-fill,minmax(84px,1fr));gap:10px}
.fav{display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 4px 10px;border-radius:16px;background:#fff;border:1px solid var(--linie);box-shadow:var(--schatten);text-decoration:none;color:var(--tinte);font-size:13px;font-weight:700;text-align:center}
.fav img{width:54px;height:54px}
.fav:hover{border-color:#9db3d2}

/* App-Liste */
.apps{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:720px){.apps{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.apps{grid-template-columns:1fr 1fr 1fr}}
.app{position:relative;display:grid;grid-template-columns:62px 1fr auto;gap:12px;align-items:start;padding:14px 12px 14px 14px;background:#fff;border:1px solid var(--linie);border-radius:16px;box-shadow:var(--schatten);transition:border-color .15s,transform .15s}
.app:hover{border-color:#9db3d2;transform:translateY(-1px)}
.app-link{position:absolute;inset:0;border-radius:16px;z-index:1}
.app-link:focus-visible{outline-offset:-3px}
.app img{width:62px;height:62px}
.app h3{font-size:17.5px;color:var(--blau-dunkel);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.app p{font-size:14.5px;color:var(--leise);margin-top:3px}
.app .marken{display:flex;gap:5px;flex-wrap:wrap;margin-top:7px}
.app .extra{position:relative;z-index:2;display:inline-flex;align-items:center;gap:4px;margin-top:7px;font-size:13.5px;font-weight:700;text-decoration:none}
.stern{position:relative;z-index:2;border:0;background:none;width:40px;height:40px;border-radius:10px;cursor:pointer;color:#b4bccb;font-size:22px;display:grid;place-items:center}
.stern:hover{background:#f3f5f9;color:#e9b325}
.stern[aria-pressed=true]{color:#e9b325}
.app.gesperrt img{filter:grayscale(.35);opacity:.8}
.neu{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:var(--lachen);color:#3a2a00;padding:1px 7px;border-radius:6px}
.legende{margin-top:12px;font-size:13px;display:flex;gap:6px;flex-wrap:wrap}
.installieren{margin-top:30px}
.installieren p{font-size:15px;color:var(--leise);margin-bottom:10px}
.konto-knopf{max-width:52vw}
.konto-knopf span{overflow:hidden;text-overflow:ellipsis}
@media(max-width:420px){.marke img{width:62px}.marke b{font-size:17px}.marke small{font-size:9.5px;letter-spacing:.08em}.konto-knopf span{display:none}}

.gruss-zeile{display:flex;align-items:center;gap:14px}
/* STB-Bereitschaft auf einen Blick */
.stb-kurz{display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 14px;border:1px solid var(--linie);border-radius:14px;background:#fff;box-shadow:var(--schatten);text-decoration:none;color:var(--tinte);max-width:560px}
.stb-kurz:hover{border-color:#9db3d2}
.stb-kurz.achtung{border-color:#e2c26c;background:#fffaf0}
.stb-kurz img{flex:none}
.stb-kurz .stb-text{display:flex;flex-direction:column;flex:1;min-width:0}
.stb-kurz small{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leisten)}
.stb-kurz b{font-size:17px;color:var(--blau-dunkel)}
.stb-kurz .stb-text>span{font-size:13.5px;color:var(--leise)}
@media(max-width:480px){.stb-kurz{flex-wrap:wrap}.stb-kurz .chip{margin-left:52px}}
.stb-kurz .stb-chips{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.stb-kurz.markt{border-color:#c78fb7;background:linear-gradient(135deg,#fff,#f4ecf2)}
@media(max-width:480px){.stb-kurz .stb-chips{flex-direction:row;flex-wrap:wrap;margin-left:52px;align-items:center}.stb-kurz .stb-text{flex:1 1 calc(100% - 64px)}}
/* Eigenes Foto antippen → ändern */
.foto-knopf{position:relative;flex:none;border:0;background:none;padding:0;border-radius:50%;cursor:pointer;line-height:0}
.foto-knopf>.ti{position:absolute;right:-2px;bottom:-2px;width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--blau);color:#fff;font-size:14px;box-shadow:0 0 0 2px #fff}
.foto-knopf:hover .ava,.foto-knopf:focus-visible .ava{box-shadow:0 0 0 3px var(--lachen)}
.foto-gross{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.foto-gross p{margin:0;font-size:15px}
.foto-text{font-size:13.5px;margin:0}
.foto-schnitt{position:relative;width:260px;height:260px;margin:0 auto;border-radius:16px;overflow:hidden;background:#eef1f6}
.foto-schnitt canvas{display:block;touch-action:none;cursor:grab}
.foto-schnitt canvas:active{cursor:grabbing}
.foto-schnitt:after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at center,transparent 0 129px,#2b304088 130px);box-shadow:inset 0 0 0 1px #2b304022}
.foto-zoom{display:flex;align-items:center;gap:10px;max-width:300px;margin:0 auto;width:100%;color:var(--leise);font-size:18px}
.foto-zoom input{flex:1;accent-color:var(--blau)}
.foto-blatt .blatt-fuss{flex-wrap:wrap}

.foto-blatt .blatt-fuss{gap:8px}.foto-blatt .blatt-fuss .knopf{padding-inline:12px}
/* Feedback-Karte auf der Startseite */
.feedback-karte{margin-top:30px}
.feedback-karte p{font-size:15px;color:var(--leise);margin:0 0 10px}
.feedback-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.bio-auswahl{width:min(760px,calc(100% - 28px));max-height:90dvh;overflow:auto;border:1px solid var(--linie);border-radius:18px;padding:24px;color:var(--tinte);background:#f6f7fa;box-shadow:0 20px 80px #17243c44}
.bio-auswahl::backdrop{background:#17243c88;backdrop-filter:blur(3px)}
.bio-auswahl-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.bio-auswahl h2{font-size:24px;color:var(--blau-dunkel)}
.bio-versionen{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:20px 0}
.bio-version{display:flex;flex-direction:column;gap:12px;border:1px solid var(--linie-stark);border-radius:14px;padding:20px;background:white;text-decoration:none;color:var(--tinte)}
.bio-version-neu{border:2px solid var(--blau)}
.bio-version:hover{box-shadow:var(--schatten)}
.bio-version h3{font-size:22px;color:var(--blau-dunkel)}
.bio-version small{font-size:12px;color:var(--leise);margin-top:auto}
.bio-version b{color:var(--blau);font-size:15px}.bio-stand-hinweis{font-size:12px;color:var(--leise)}
@media(max-width:540px){.bio-versionen{grid-template-columns:1fr}.bio-auswahl{padding:18px}.bio-version{padding:16px}}
/* STB-Karte und „Heute“ nebeneinander (06.10.2026) – STB schlanker, Heute als Kachel daneben */
.gruss-karten{display:flex;gap:10px;flex-wrap:wrap;align-items:stretch;margin-top:12px;max-width:860px}
.gruss-karten[hidden],.portal-kartenfeld[hidden],.portal-karten-menue[hidden],.portal-karten-hinweis[hidden]{display:none}
.portal-kartenfeld{display:flex;position:relative;flex:1 1 230px;min-width:0}
.portal-kartenfeld--stb{flex-basis:330px}
.portal-kartenfeld>.stb-kurz,.portal-kartenfeld>.heute-kachel{padding-right:40px!important;min-width:0}
.portal-karte-aus{position:absolute;right:5px;top:5px;width:29px;height:29px;display:grid;place-items:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--leise);cursor:pointer;font-size:17px}
.portal-karte-aus:hover,.portal-karte-aus:focus-visible{background:var(--blau-hell);color:var(--blau-dunkel)}
.portal-karten-hinweis{margin:8px 0 0}
.portal-karten-hinweis button{border:0;padding:4px 0;background:transparent;color:var(--leise);font:inherit;font-size:12px;cursor:pointer;text-align:left}
.portal-karten-menue{margin:24px 0 0;color:var(--leise);font-size:13px}
.portal-karten-menue summary{cursor:pointer;padding:8px 0;width:fit-content}
.portal-karten-menue summary .ti{margin-right:4px}
.portal-karten-auswahl{padding:4px 0 10px;display:flex;gap:8px;flex-wrap:wrap}
.portal-karten-auswahl p{flex-basis:100%;margin:0 0 3px}
.gruss-karten .stb-kurz{margin-top:0;flex:1 1 330px;max-width:none;padding:8px 12px;gap:10px}
.gruss-karten .stb-kurz img{width:34px;height:34px}
.gruss-karten .stb-kurz b{font-size:15.5px}
.gruss-karten .stb-kurz .stb-text>span{font-size:12.5px}
.heute-kachel{flex:1 1 230px;display:flex;align-items:center;gap:12px;padding:8px 12px;border:1px solid var(--linie);border-radius:14px;background:linear-gradient(135deg,#fff,var(--blau-hell));box-shadow:var(--schatten);color:var(--tinte);font:inherit;text-align:left;cursor:pointer}
.heute-kachel:hover,.heute-kachel:focus-visible{border-color:#9db3d2}
.heute-kachel.achtung{background:linear-gradient(135deg,#fff,var(--lachen-hell));border-color:#e2c26c}
.heute-datum{flex:none;width:46px;border-radius:11px;overflow:hidden;text-align:center;background:#fff;border:1px solid var(--linie-stark);line-height:1}
.heute-datum small{display:block;background:var(--leisten);color:#fff;font-size:11px;font-weight:700;padding:3px 0;letter-spacing:.06em}
.heute-datum b{display:block;font-size:21px;color:var(--blau-dunkel);padding:4px 0 5px}
.heute-text{display:flex;flex-direction:column;flex:1;min-width:0}
.heute-text small{font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--leisten)}
.heute-text b{font-size:15.5px;color:var(--blau-dunkel)}
.heute-text>span{font-size:12.5px;color:var(--leise);overflow-wrap:anywhere}
/* Schulkalender-Zähler auf der Termine-Kachel */
.tm-zahl{display:inline-block;vertical-align:2px;margin-left:4px;padding:1px 8px;border-radius:999px;background:var(--lachen);color:#3d2a00;font-size:12px;font-weight:700;letter-spacing:.02em}
/* Der Tag */
dialog.heute{width:min(680px,100vw);max-width:100vw;max-height:92vh;max-height:min(92dvh,900px);padding:0;border:0;border-radius:20px;background:var(--grund, #f5f6f9);box-shadow:0 20px 60px rgba(20,30,50,.3)}
dialog.heute[open]{display:flex;flex-direction:column}
dialog.heute::backdrop{background:rgba(20,28,45,.45)}
.heute-kopf{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;padding:14px 16px 12px;background:#fff;border-bottom:1px solid var(--linie)}
.heute-kopf h2{margin:0;font-size:22px;color:var(--tinte)}
.heute-kopf h2 span{display:block;font-size:13.5px;font-weight:600;color:var(--leise)}
.heute-nav{display:flex;gap:4px;align-items:center;flex-wrap:wrap}
.heute-nav [data-anpassen][aria-pressed=true]{background:var(--blau);color:#fff;border-color:var(--blau)}
/* iPad/Safari: im nicht bildschirmhohen Fenster rechnet Safari flex:1 (Basis 0) als Höhe 0 → Inhalt unsichtbar.
   Darum Basis auto (Inhaltshöhe) + min-height:0 zum Scrollen, und die Abschnitte schrumpfen nie. */
.heute-inhalt{flex:1 1 auto;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;padding:12px 14px 18px;display:flex;flex-direction:column;gap:10px}
.heute-inhalt>*{flex:none}
.heute-ab{background:#fff;border:1px solid var(--linie);border-radius:16px;padding:12px 14px}
.heute-ab h3{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:15px;color:var(--blau-dunkel)}
.heute-ab h3>.ti{width:28px;height:28px;border-radius:9px;display:grid;place-items:center;font-size:17px;background:var(--blau-hell);color:var(--blau)}
.heute-ab.ich h3>.ti{background:var(--leisten-hell);color:var(--leisten)}
.heute-ab.tests h3>.ti{background:var(--lachen-hell);color:#8a6200}
.heute-ab.abwesend h3>.ti{background:var(--gruen-hell);color:var(--gruen)}
.heute-ab.stb h3>.ti{background:#eef0f4;color:var(--leise)}
.heute-mehr{display:inline-flex;align-items:center;gap:3px;margin-left:auto;font-size:12.5px;font-weight:600;color:var(--blau);text-decoration:none;white-space:nowrap}
.heute-plan,.heute-liste,.heute-klassen{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.heute-plan li,.heute-liste li{display:flex;gap:10px;align-items:center;padding:6px 8px;border-radius:10px;background:#f7f8fb}
.heute-liste li.meine,.heute-plan li{background:var(--blau-hell)}
.heute-plan li.aufsicht{background:var(--lachen-hell)}
.heute-plan li.stb{background:var(--leisten-hell)}
.heute-plan li.statt{background:#fff4dc}
.heute-plan li.entfallen{background:#f3f3f5}
.heute-plan li.entfallen b{text-decoration:line-through;color:var(--leise)}
.heute-zeit{flex:none;min-width:70px;font-size:12.5px;font-weight:700;color:var(--blau-dunkel);font-variant-numeric:tabular-nums}
.heute-was{flex:1;min-width:0;display:flex;flex-direction:column}
.heute-was b{font-size:14.5px;line-height:1.3;overflow-wrap:anywhere}
.heute-was b .chip{font-size:11px;padding:1px 7px;vertical-align:1px}
.heute-was small{font-size:12.5px;color:var(--leise)}
.heute-klassen li{display:flex;gap:10px;align-items:baseline;padding:6px 8px;border-radius:10px;background:#f7f8fb;font-size:13.5px}
.heute-klassen li b{flex:none;min-width:36px;text-align:center;padding:2px 6px;border-radius:8px;background:#fff;border:1px solid var(--linie-stark);color:var(--blau-dunkel)}
.heute-klassen li.meine{background:var(--lachen-hell)}
.heute-klassen li.meine b{border-color:#e2c26c}
.heute-klassen small{color:var(--leise)}
.heute-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.heute-leer{margin:0;font-size:13.5px;color:var(--leise)}
.heute-frei{margin:0;padding:10px 14px;border-radius:14px;background:var(--gruen-hell);color:#2f5a16;font-weight:600}
.heute-anpassen{display:flex;flex-direction:column;gap:10px}
.heute-anpassen fieldset{margin:0;border:1px solid var(--linie);border-radius:14px;background:#fff;padding:10px 14px;display:flex;flex-direction:column;gap:6px}
.heute-anpassen legend{font-weight:700;font-size:13px;color:var(--blau-dunkel);padding:0 4px}
.heute-anpassen label{display:flex;align-items:center;gap:8px;font-size:14px;cursor:pointer}
.heute-anpassen input{width:17px;height:17px;margin:0;accent-color:var(--blau)}
.heute-anpassen p{margin:0;font-size:12.5px}
.heute-klassenwahl{display:flex;flex-wrap:wrap;gap:6px}
.heute-klassenwahl label{gap:0}
.heute-klassenwahl input{position:absolute;opacity:0;pointer-events:none}
.heute-klassenwahl span{display:inline-block;min-width:40px;text-align:center;padding:5px 8px;border-radius:9px;border:1px solid var(--linie-stark);background:#fff;font-weight:700;font-size:13px}
.heute-klassenwahl label.meine span{border-color:var(--blau)}
.heute-klassenwahl input:checked+span{background:#eef0f4;color:var(--leise);text-decoration:line-through}
.heute-klassenwahl input:focus-visible+span{outline:2px solid var(--blau);outline-offset:1px}
.heute-anpassen-fuss{display:flex;justify-content:flex-end;gap:8px}
@media(max-width:560px){
  dialog.heute{width:100vw;height:100dvh;max-height:100dvh;border-radius:0}
  .heute-kopf{padding-top:max(14px,env(safe-area-inset-top))}
  .heute-nav [data-anpassen] span{display:none}
  .heute-inhalt{padding-bottom:max(18px,env(safe-area-inset-bottom))}
}
.gruss-karten:empty{display:none}
.heute-hinweis{margin:0;padding:8px 12px;border-radius:12px;background:var(--rot-hell);color:#8a2f2a;font-size:13px}