/* ===== Sticky Header ===== */
header.site{position:sticky;top:0;z-index:var(--z-header);
  background:rgba(250,248,245,.92);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid #eee3d8}
.bar{max-width:var(--maxw);margin:0 auto;padding:10px 22px;display:flex;align-items:center;gap:14px;min-height:64px}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.logo{width:36px;height:36px;border-radius:11px;background:var(--maroon);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;
  overflow:hidden;position:relative;box-shadow:0 2px 8px rgba(104,24,38,.25);flex:none}
.logo img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;padding:5px}
.brand>div{min-width:0}
.brand .t1{font-weight:700;font-size:16px;letter-spacing:.2px;line-height:1.15;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brand .t1 span{color:var(--maroon)}
.brand .t2{font-size:12px;color:var(--ink-2);line-height:1.15}
.bar .spacer{flex:1}
#headCta{display:none;opacity:0;transform:translateY(-4px);transition:opacity var(--t),transform var(--t)}
#headCta.show{display:inline-flex;opacity:1;transform:none}
body.hasplan #headCta{display:none}
.statpill{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--ink-2);
  background:var(--card);border:1px solid var(--line);padding:7px 12px;border-radius:var(--r-pill);box-shadow:var(--shadow)}
.statpill b{color:var(--ink);font-weight:700}
.statpill .fire{color:var(--gold-ink)}
body:not(.hasplan) .statpill:not(.sp-login):not(.sp-logout),body:not(.hasplan) #resetBtn{display:none}
/* Anmelde-Bruecke (26.08.2026): sichtbar AUCH ohne Lernplan — wer schon zahlt, soll sich
   anmelden koennen, bevor er irgendwo ansteht, nicht erst nach dem ersten gesperrten
   Video. Optisch eine Aktion, kein Statuswert: CTA-Farbe statt Karten-Grau, damit er
   sich von Streak/Fokus abhebt. Versteckt wird er ueber [hidden] in app/chat.js. */
.sp-login{color:var(--cta-ink);background:var(--cta);border-color:var(--cta-edge);
  font-weight:600;text-decoration:none;cursor:pointer}
.sp-login:hover{background:var(--cta-hover)}
.sp-login:active{background:var(--cta-active)}
.sp-login[hidden]{display:none}
/* Abmelden (02.09.2026): bewusst OHNE CTA-Farbe — sich abzumelden ist nichts, wozu wir
   draengen; es muss nur auffindbar sein. Wie der Anmelde-Knopf auch ohne Lernplan
   sichtbar, sonst kaeme man auf der Startseite nie wieder heraus. */
.sp-logout{color:var(--ink-2);text-decoration:none;cursor:pointer}
.sp-logout:hover{background:var(--bg-2);color:var(--ink)}
.sp-logout[hidden]{display:none}
/* Zurück zu competenz4u.at (15.09.2026): eigene Klasse, NICHT statpill — Zeile 23 und die
   Handy-Regel unten würden ihn sonst ausblenden. Mit Lernplan (volle Leiste) und am Handy ist er
   ein runder Pfeil-Knopf, 36 px wie ↺; nur ohne Lernplan am Desktop steht der Name dabei. */
.kopf-web{display:flex;align-items:center;gap:6px;flex:none;white-space:nowrap;
  font-size:13px;font-weight:600;color:var(--ink-2);text-decoration:none;
  background:var(--card);border:1px solid var(--line);padding:7px 12px;
  border-radius:var(--r-pill);box-shadow:var(--shadow)}
.kopf-web:hover{background:var(--bg-2);color:var(--ink)}
body.hasplan .kopf-web{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;font-size:16px}
body.hasplan .kopf-web .kw-text{display:none}
/* Platz dafür, gemessen mit headless Edge (15.09.2026) über 320–1366 px: mit Lernplan war die
   Leiste zwischen 861 und rund 1050 px schon VOR dem Knopf bis zu 150 px zu voll (↺ zum Oval
   gequetscht, das Logo auf null) — html{overflow-x:clip} schneidet das still ab. Heute/Fokus fallen
   dort weg wie schon am Handy (Block unten), die Abstände werden enger. */
@media(max-width:1200px){.bar{gap:8px}}
@media(max-width:1100px){.statpill:not(.sp-login):not(.sp-logout):not(.sp-streak){display:none!important}}
@media(max-width:400px){
  .bar{gap:6px;padding-left:12px;padding-right:12px}
  .statpill{padding:7px 10px}
}

/* Abmelde-Hinweis (02.09.2026): eine Zeile, kein Dialog. Er unterbricht niemanden,
   steht aber genau dort, wo der Schueler nach dem Abmelden hinschaut. */
.abmnote{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  max-width:min(980px,92vw);margin:14px auto 0;padding:10px 14px;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-pill);
  box-shadow:var(--shadow);font-size:13.5px;color:var(--ink-2)}
.abmnote b{color:var(--ink)}
.abmnote-tun{font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:6px 12px;border-radius:var(--r-pill);
  background:var(--bg-2);border:1px solid var(--line);color:var(--ink)}
.abmnote-tun:hover{background:var(--maroon);border-color:var(--maroon);color:#fff}
.abmnote-zu{margin-left:auto;background:none;border:none;cursor:pointer;
  font-size:18px;line-height:1;color:var(--ink-2);padding:0 4px}
.abmnote-zu:hover{color:var(--ink)}
.abmnote[hidden]{display:none}
body.hasplan .brand .t2{display:none}
#resetBtn{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--card);color:var(--ink-2);font-size:16px;cursor:pointer;box-shadow:var(--shadow);transition:transform var(--t-slow),background var(--t-fast),color var(--t-fast)}
#resetBtn:hover{background:var(--maroon);color:#fff;border-color:var(--maroon);transform:rotate(-150deg)}

/* View-Segment */
.viewseg{display:flex;gap:3px;background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r-pill);padding:3px}
.viewseg button{border:none;background:transparent;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink-2);
  padding:6px 12px;border-radius:var(--r-pill);cursor:pointer;display:flex;align-items:center;gap:5px;transition:all var(--t-fast);position:relative;min-height:32px}
.viewseg button .vi{font-size:13px}
.viewseg button:hover{color:var(--ink)}
.viewseg button.on{background:var(--maroon);color:#fff;box-shadow:0 1px 4px rgba(104,24,38,.25)}
#freshDot{display:none;position:absolute;top:-1px;right:-1px;width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 2px var(--bg-2)}
#tabbar,#ctaBar{display:none}
@media(max-width:860px){
  .viewseg{display:none!important}
  #headCta{display:none!important}
  .brand .t2{display:none}
  .brand .t1{display:none} /* Dom 03.09.2026: nur das Logo, der Schriftzug war abgeschnitten */
  .kopf-web{width:36px;height:36px;padding:0;justify-content:center;border-radius:50%;font-size:16px}
  .kopf-web .kw-text{display:none}
  body:not(.hasplan) #heroCta{display:none}
  /* Anmelden/Abmelden sind KEINE Statistik-Pillen — sie tragen die Klasse nur fuers
     Aussehen (Zeile 23 nimmt sie oben schon aus). Ohne diesen Ausschluss war der
     Anmelde-Knopf auf JEDEM Handy unsichtbar und Abmelden gar nicht erreichbar —
     ausgerechnet auf dem Geraet, auf dem fast alle Schueler lernen, und ausgerechnet
     bei der Funktion, die ein fremdes Konto auf einem geteilten Geraet beendet.
     Gefunden in der Vor-Launch-Durchsicht 02.09.2026. */
  .statpill:not(.sp-login):not(.sp-logout){display:none!important}
  body.hasplan .statpill.sp-streak{display:flex!important}
  body.hasplan #tabbar{display:flex}
  body:not(.hasplan) #ctaBar{display:flex}
  #tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:6px 8px calc(6px + env(safe-area-inset-bottom))}
  #tabbar button{flex:1;min-height:48px;border:none;background:none;font-family:inherit;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
    font-size:10.5px;font-weight:600;color:var(--ink-2);border-radius:10px}
  #tabbar button .ti{font-size:17px;line-height:1}
  #tabbar button.on{color:var(--maroon);background:var(--tint-rose)}
  #ctaBar{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-tabbar);
    background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
    border-top:1px solid var(--line);padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
  #ctaBar .btn{width:100%;min-height:52px}
  body{padding-bottom:76px}
}
/* Unter 360 px (gemessen: 320 px fehlten mit Lernplan 41 px, schon vor dem Website-Knopf 59) fällt
   auch der Streak weg — sonst quetscht die Leiste das Logo unter den Pfeil-Knopf. Nach dem
   Handy-Block und spezifischer als dessen sp-streak-Regel, sonst gewänne jene. */
@media(max-width:359px){html body.hasplan .statpill.sp-streak{display:none!important}}
/* #app{padding-top:36px} (mobil) wohnt jetzt in app-plan.css — muss NACH der #app-Basisregel laden (Review-Fund Kaskaden-Flip) */