/* fairInstitut Lernapp – Hilfe-Baustein (Schalter, Menü, Antippen, Touren).
   Farben kommen ausschließlich aus den Tokens von interaktion.css. Alle Knöpfe
   tragen die bestehenden Klassen btn bzw. btn ghost, damit das zentrale
   Buttonsystem greift; hier steht nur Geometrie und Lage.
   Diese Datei wird NACH interaktion.css geladen. Wo interaktion.css eine
   Buttonregel setzt (Mindestmaße), gewinnt hier die höhere Auswahlschärfe. */

:root{
  --hilfe-schleier-farbe:rgba(23,47,65,.55);
  --hilfe-ebene:9000;
}
html[data-theme="dark"]{
  --hilfe-schleier-farbe:rgba(0,0,0,.62);
}

/* Platzhalter in der Kopfzeile der Schülerseiten. */
.hilfe-halter{display:inline-flex;align-items:center;flex:none}
#hilfe-schalter{white-space:nowrap}
#hilfe-schalter[hidden]{display:none}

/* ---------- Antipp-Punkte ---------- */
#hilfe-punkte{position:fixed;inset:0;z-index:calc(var(--hilfe-ebene) + 10);pointer-events:none}
#hilfe-punkte[hidden]{display:none}
/* 24 px sichtbar, 44 px Trefferfläche über das unsichtbare ::before. */
#hilfe-punkte button.hilfe-punkt{
  position:absolute;
  width:24px;height:24px;
  min-width:24px;min-height:24px;
  padding:0;
  border-radius:50%;
  font-size:14px;
  font-weight:700;
  line-height:1;
  justify-content:center;
  pointer-events:auto;
}
/* LOW-3: kein border-radius hier, sonst zählen nur die runden 24 px als Trefferfläche
   und die Ecken des 44x44-Quadrats bleiben tot (Leitlinie Regel 8, 44 px Ziele). */
#hilfe-punkte button.hilfe-punkt::before{
  content:"";
  position:absolute;
  left:-10px;top:-10px;
  width:44px;height:44px;
}

/* ---------- Schleier mit Aussparung ---------- */
#hilfe-schleier{position:fixed;inset:0;z-index:calc(var(--hilfe-ebene) + 20);pointer-events:none}
#hilfe-schleier[hidden]{display:none}
.hilfe-schleier-teil{position:absolute;background:var(--hilfe-schleier-farbe);pointer-events:auto}

/* ---------- Fenster um das Zielelement ---------- */
#hilfe-fenster{
  position:fixed;
  z-index:calc(var(--hilfe-ebene) + 30);
  pointer-events:none;
  border-radius:10px;
  box-shadow:0 0 0 3px var(--fi-color-gold-500);
}
#hilfe-fenster[hidden]{display:none}

/* ---------- Sprechblase ---------- */
#hilfe-blase{
  position:fixed;
  z-index:calc(var(--hilfe-ebene) + 40);
  box-sizing:border-box;
  width:min(340px, calc(100vw - 24px));
  background:var(--fi-color-surface);
  color:var(--fi-color-text);
  border:1px solid var(--fi-color-border);
  border-radius:12px;
  box-shadow:var(--fi-shadow-control-hover);
  padding:14px 16px;
}
#hilfe-blase[hidden]{display:none}
#hilfe-blase:focus-visible{outline:var(--fi-focus-width) solid var(--fi-focus-color);outline-offset:2px}
.hilfe-blase-schritt{font-size:12.5px;color:var(--fi-color-text-muted);margin:0 0 6px}
.hilfe-blase-titel{font-size:16px;font-weight:700;margin:0 0 6px}
.hilfe-blase-text{font-size:14.5px;line-height:1.45;margin:0 0 10px}
.hilfe-blase-hinweis{font-size:13px;color:var(--fi-color-text-muted);margin:0 0 10px}
.hilfe-blase-hinweis[hidden]{display:none}
.hilfe-blase-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.hilfe-blase-knoepfe .btn[hidden]{display:none}

/* Schmale Geräte: die Blase liegt unten am Rand. */
#hilfe-blase.hilfe-blase-unten{
  left:8px;
  right:8px;
  top:auto;
  bottom:8px;
  width:auto;
}

/* ---------- Menü ---------- */
#hilfe-menu{
  box-sizing:border-box;
  width:min(460px, calc(100vw - 24px));
  max-height:min(80vh, 640px);
  overflow:auto;
  border:1px solid var(--fi-color-border);
  border-radius:12px;
  background:var(--fi-color-surface);
  color:var(--fi-color-text);
  padding:16px;
}
#hilfe-menu::backdrop{background:var(--hilfe-schleier-farbe)}
.hilfe-menu-kopf{display:flex;align-items:center;gap:12px;margin:0 0 12px}
.hilfe-menu-kopf h2{font-size:18px;margin:0;flex:1 1 auto}
.hilfe-reiter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 14px}
.hilfe-tafel{margin:0 0 12px}
.hilfe-tafel[hidden]{display:none}
.hilfe-grund{font-size:14.5px;line-height:1.45;margin:0 0 12px}
.hilfe-grund[hidden]{display:none}
.hilfe-eintrag{border-top:1px solid var(--fi-color-border);padding:12px 0}
.hilfe-eintrag:first-child{border-top:0;padding-top:0}
.hilfe-eintrag h3{font-size:15px;margin:0 0 4px}
.hilfe-eintrag p{font-size:14px;line-height:1.45;margin:0 0 8px}
.hilfe-eintrag .muted,.hilfe-menu .hilfe-leer{color:var(--fi-color-text-muted)}
.hilfe-menu-fuss{border-top:1px solid var(--fi-color-border);padding-top:12px}

/* ---------- Assistent ---------- */
.hilfe-frage-label{display:block;font-size:14px;font-weight:700;margin:0 0 6px}
.hilfe-frage-zeile{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.hilfe-frage-zeile .hilfe-frage-feld{
  flex:1 1 200px;
  min-width:0;
  min-height:var(--fi-control-height);
  box-sizing:border-box;
  padding:var(--fi-control-padding-y) 12px;
  border:1px solid var(--fi-color-border);
  border-radius:var(--fi-control-radius);
  background:var(--fi-color-surface);
  color:var(--fi-color-text);
  font-size:15px;
}
.hilfe-antwort{border-top:1px solid var(--fi-color-border);padding-top:12px}
.hilfe-antwort[hidden]{display:none}
.hilfe-antwort-text{font-size:14.5px;line-height:1.45;margin:0 0 8px;white-space:pre-wrap}
.hilfe-antwort-offline{font-size:13px;color:var(--fi-color-text-muted);margin:0 0 8px}
.hilfe-antwort-offline[hidden]{display:none}
.hilfe-antwort-knoepfe{display:flex;flex-wrap:wrap;gap:8px}
.hilfe-antwort-knoepfe .btn[hidden]{display:none}
.hilfe-antwort-dank{font-size:13.5px;color:var(--fi-color-text-muted);margin:10px 0 0}
.hilfe-antwort-dank[hidden]{display:none}
.hilfe-stand{font-size:12.5px}

/* ---------- Einstiegsfenster ---------- */
#hilfe-einstieg{
  box-sizing:border-box;
  width:min(420px, calc(100vw - 24px));
  border:1px solid var(--fi-color-border);
  border-radius:12px;
  background:var(--fi-color-surface);
  color:var(--fi-color-text);
  padding:20px;
}
#hilfe-einstieg::backdrop{background:var(--hilfe-schleier-farbe)}
#hilfe-einstieg h2{font-size:18px;margin:0 0 8px}
.hilfe-einstieg-text{font-size:15px;line-height:1.45;margin:0 0 16px}
.hilfe-einstieg-knoepfe{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- Anerkennung beim Gruppenabschluss (Ruling R16) ----------
   Ein Satz, unten am Rand, verschwindet von selbst. Kein Konfetti, kein Bild, keine
   Farbe außerhalb der Tokens: die Anerkennung gilt der Arbeit, nicht dem Ergebnis. */
#hilfe-anerkennung{
  position:fixed;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:calc(var(--hilfe-ebene) + 50);
  box-sizing:border-box;
  width:max-content;
  max-width:min(420px, calc(100vw - 24px));
  margin:0;
  padding:12px 16px;
  border:1px solid var(--fi-color-border);
  border-radius:12px;
  background:var(--fi-color-surface);
  color:var(--fi-color-text);
  box-shadow:var(--fi-shadow-control-hover);
  font-size:14.5px;
  line-height:1.45;
}

/* ---------- Entdecker-Karte (entdecken.html) ---------- */
.entdecken-liste{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin:0;padding:0;list-style:none}
.entdecken-kachel{
  display:flex;align-items:center;gap:14px;
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  padding:14px 16px;
  border:1px solid var(--fi-color-border);
  border-radius:14px;
  background:var(--fi-color-surface);
  color:var(--fi-color-text);
  box-shadow:var(--fi-shadow-control);
  text-decoration:none;
}
/* Mouseover (Ruling Tom 07.09.2026): der Hebeschatten ist entfallen, den Ring legt interaktion.css. */
.entdecken-kachel:focus-visible{outline:var(--fi-focus-width) solid var(--fi-focus-color);outline-offset:var(--fi-focus-gap)}
.entdecken-kachel h2{font-size:16px;margin:0 0 3px;color:inherit}
.entdecken-kachel p{margin:0;font-size:13px;color:var(--fi-color-text-muted)}
.entdecken-kachel .entdecken-text{min-width:0}
/* Fortschrittsring: die Füllung kommt weiter aus der eigenen Eigenschaft --hilfe-anteil
   (0 bis 100). Die BESCHRIFTUNG ist seit Ruling R12 ein Bruch („2 von 8“) statt einer
   Prozentzahl: Leitlinie Schülerweg Regel 7 verbietet Prozentwerte unter fünfzig als
   Zahl, und ein Bruch sagt zugleich, wie viel noch kommt. */
.entdecken-ring{
  position:relative;flex:none;
  width:64px;height:64px;border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:conic-gradient(var(--fi-color-gold-500) calc(var(--hilfe-anteil,0) * 1%), var(--fi-color-surface-muted) 0);
}
.entdecken-ring::before{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--fi-color-surface)}
.entdecken-ring span{position:relative;font-size:12.5px;font-weight:700;color:var(--fi-color-text);line-height:1.2}
.entdecken-ring .entdecken-ring-wort{font-size:10.5px;font-weight:600;color:var(--fi-color-text-muted)}
.entdecken-leer{font-size:15px;color:var(--fi-color-text-muted)}
/* Zweiter Satz in der Kachel: Starthinweis einer Gruppe mit start_url (R20) und der
   Satz nach einer beendeten Tour (LOW-2). Beide brauchen Luft zur Dauerzeile. */
.entdecken-kachel .entdecken-hinweis{margin-top:5px}
/* MEDIUM-1 (R21): abgeschaltete Hilfe – nur der Grund im Klartext, keine Kacheln. */
.entdecken-aus{margin:0 0 18px;display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.entdecken-aus[hidden]{display:none}
.entdecken-aus p{margin:0;font-size:15px;color:var(--fi-color-text)}
/* Fortschrittsring gesamt (Ruling R16): dieselbe Kachelform wie die Gruppen, aber kein
   Verweis. Steht über der Liste und fasst alle Gruppen der Rolle zusammen. */
.entdecken-gesamt{
  display:flex;align-items:center;gap:14px;
  box-sizing:border-box;
  width:100%;
  min-height:44px;
  margin:0 0 18px;
  padding:14px 16px;
  border:1px solid var(--fi-color-border);
  border-radius:14px;
  background:var(--fi-color-surface-muted);
  color:var(--fi-color-text);
}
.entdecken-gesamt[hidden]{display:none}
.entdecken-gesamt h2{font-size:16px;margin:0 0 3px;color:inherit}
.entdecken-gesamt p{margin:0;font-size:13px;color:var(--fi-color-text-muted)}

@media (max-width:720px){
  .hilfe-reiter .btn{flex:1 1 44%}
  .entdecken-liste{grid-template-columns:1fr}
}