/* ==========================================================================
   LERNTEMPODUETT - DIE HUELLE (.bsh-*)  ·  docs/PLAN_BUSSTOP.md
   ==========================================================================
   Die Ebene um die Buehne und EINE Leiste: bei der Lehrkraft OBEN (die
   Buehne reicht bis zum unteren Rand - am Beamer steht unten nichts im Weg),
   beim Kind unten, wo der Daumen ist (Murat 13.10.2026). Alles
   Bunte steht IM Rahmen (templates/spiele/busstop/index.html, eigene
   Aesthetik); diese Datei ist Werkzeug und benutzt deshalb nur das
   Woerterbuch (design-tokens.css) - keine feste Farbe, keine eigene Welt.

   DAS KIND bekommt groessere Flaechen (.bsh-kind): fuer Finger gebaut, ein
   Knopf, ein Satz (DESIGN_SYSTEM.md §2).

   Die Ebene liegt UNTER dem Blatt der Kinder (.hb-ebene, z-index 9000): das
   Blatt oeffnet sich aus dem Lerntempoduett heraus und liegt dann darueber.

   MIT WEM: static/js/busstop-huelle.js, ha-blatt.css (z-index).
   ========================================================================== */

.bsh-ebene{position:fixed;inset:0;z-index:8900;display:grid;grid-template-rows:auto minmax(0,1fr);
  background:var(--paper);color:var(--ink);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  -webkit-tap-highlight-color:transparent;}
body.bsh-offen{overflow:hidden;}

.bsh-buehne{position:relative;min-height:0;}
.bsh-rahmen{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.bsh-hinweis{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);margin:0;max-width:92%;
  padding:8px 16px;border-radius:var(--r-card);background:var(--card);color:var(--ink);
  border:1px solid var(--line);box-shadow:var(--e-2);font-size:14px;font-weight:600;text-align:center;}
.bsh-hinweis[hidden],.bsh-seite[hidden]{display:none;}

.bsh-leiste{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:56px;padding:8px 12px;
  background:var(--card);border-bottom:1px solid var(--line);}
/* Beim Kind steht die Leiste unten - die Reihenfolge setzt das CSS. */
.bsh-kind{grid-template-rows:minmax(0,1fr) auto;}
.bsh-kind .bsh-leiste{border-bottom:0;border-top:1px solid var(--line);}
.bsh-luft{flex:1 1 0;}
.bsh-text{flex:1 1 240px;min-width:0;display:flex;flex-direction:column;font-size:15px;line-height:1.35;color:var(--ink);}
.bsh-text b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsh-text small{font-size:13px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

.bsh-knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;
  padding:0 12px;border-radius:var(--r-control);border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;}
.bsh-knopf svg{width:20px;height:20px;flex:none;}
.bsh-knopf:disabled{opacity:.45;cursor:default;}
.bsh-knopf.bsh-haupt{background:var(--brand);border-color:var(--brand);color:var(--on-brand);}
.bsh-knopf.an{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dk);}
.bsh-knopf.bsh-rot{color:var(--bad-ink);border-color:var(--bad);}
/* „Verlassen" beim Kind: oben rechts über der Bühne, rot, mit Rückfrage. */
.bsh-knopf.bsh-raus{position:absolute;top:8px;right:8px;z-index:3;min-height:40px;min-width:40px;padding:0;
  background:var(--bad-soft);border-color:var(--bad);color:var(--bad-ink);box-shadow:var(--e-2);}

.bsh-wahl{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 8px;
  border:1px solid var(--line);border-radius:var(--r-control);color:var(--ink);}
.bsh-wahl svg{width:20px;height:20px;flex:none;}
.bsh-wahl select{border:0;background:none;font:inherit;font-size:14px;font-weight:600;color:inherit;min-height:40px;
  width:auto;padding:0 4px;}
.bsh-angebot{display:inline-flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px;}

/* ---- Das Kind: der Name des Blatts, ein Satz, ein Knopf - fuer Finger --- */
.bsh-kind .bsh-leiste{min-height:72px;padding:12px 16px;gap:12px;}
.bsh-kind .bsh-text{font-size:18px;}
.bsh-kind .bsh-text small{font-size:14px;}
.bsh-kind .bsh-knopf{min-height:52px;padding:0 16px;font-size:16px;font-weight:700;}
.bsh-kind .bsh-knopf svg{width:24px;height:24px;}

/* ---- Die Kinderliste der Lehrkraft -------------------------------------- */
.bsh-seite{grid-row:2;grid-column:1;justify-self:end;z-index:4;width:min(400px,100%);overflow:auto;
  background:var(--card);border-left:1px solid var(--line);box-shadow:var(--e-3);}
.bsh-leiste{grid-row:1;grid-column:1;}
.bsh-buehne{grid-row:2;grid-column:1;}
.bsh-kind .bsh-buehne{grid-row:1;}
.bsh-kind .bsh-leiste{grid-row:2;}
.bsh-seite-zeile{padding:8px 16px 0;}
.bsh-seite-zeile .bsh-knopf{width:100%;}
.bsh-nichtda .bsh-wer{opacity:.6;}
/* ---- Das Menü „Mehr" der Lehrkraft --------------------------------------- */
.bsh-menue{grid-row:2;grid-column:1;justify-self:end;align-self:start;z-index:5;margin:8px 12px 0 0;width:min(320px,calc(100% - 24px));
  display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:var(--r-card);
  background:var(--card);border:1px solid var(--line);box-shadow:var(--e-3);}
.bsh-menue[hidden]{display:none;}
.bsh-menue-titel{margin:4px 0 0;font-size:12px;font-weight:700;color:var(--muted);}
.bsh-menue-reihe{display:flex;flex-wrap:wrap;gap:8px;}
.bsh-menue .bsh-knopf{justify-content:flex-start;}
.bsh-menue .bsh-knopf span{display:inline;}
/* ---- Was sich beim Kind über die Bühne legt: Park (Spiele), Abstimmung --- */
.bsh-oben{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;background:var(--paper);}
.bsh-oben[hidden]{display:none;}
.bsh-oben-kopf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px 8px 16px;
  background:var(--card);border-bottom:1px solid var(--line);font-size:17px;}
.bsh-oben-koerper{flex:1 1 auto;min-height:0;overflow:auto;position:relative;}
.bsh-spielrahmen,.bsh-stimmrahmen{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.bsh-laedt{margin:0;padding:48px 16px;text-align:center;color:var(--muted);}
.bsh-kacheln{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;padding:16px;}
.bsh-kachel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:112px;padding:16px;text-align:left;
  border-radius:var(--r-card);border:1px solid var(--line);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;}
.bsh-kachel i{font-style:normal;font-size:32px;line-height:1;}
.bsh-kachel b{font-size:17px;}
.bsh-kachel small{font-size:13px;color:var(--muted);}
.bsh-seite-kopf{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;
  padding:12px 16px;background:var(--card);border-bottom:1px solid var(--line);font-size:16px;}
.bsh-liste{list-style:none;margin:0;padding:8px;}
.bsh-liste li{display:flex;align-items:center;gap:8px;padding:8px;}
.bsh-liste li+li{border-top:1px solid var(--line);}
.bsh-wer{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.bsh-wer b{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsh-wer small{color:var(--muted);font-size:12px;}
.bsh-fehlt .bsh-wer{opacity:.55;}
.bsh-liste .bsh-knopf{min-height:40px;min-width:40px;padding:0 8px;font-size:13px;}
.bsh-liste .bsh-knopf span{display:none;}
.bsh-abgaben{padding:12px 16px 0;}
.bsh-abgaben .bsh-liste{padding:8px 0 0;}
.bsh-abgabenliste small{color:var(--muted);font-size:13px;}

/* ---- Die Einladung im Arbeitsplatz des Kindes --------------------------- */
.bsh-einladung{display:flex;align-items:center;gap:12px;margin:0 0 16px;padding:12px 16px;
  border-radius:var(--r-card);background:var(--brand-soft);border:1px solid var(--line);color:var(--ink);}
.bsh-einladung-bild{display:grid;place-items:center;width:48px;height:48px;flex:none;border-radius:var(--r-card);
  background:var(--card);color:var(--brand-dk);}
.bsh-einladung-bild svg{width:24px;height:24px;}
.bsh-einladung-text{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;}
.bsh-einladung-text b{font-size:17px;}
.bsh-einladung-text small{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsh-einladung .bsh-knopf{min-height:48px;padding:0 16px;font-size:16px;}

/* ---- Das Paket vorbereiten (.bsp-*, static/js/busstop-paket.js) --------
   Die ganze Seite: oben die Reiter, links das Formular des offenen Reiters,
   rechts die Vorschau des Blatts, unten Speichern und Starten. */
.bsp-ebene{grid-template-rows:auto minmax(0,1fr) auto;}
.bsp-kopf{grid-row:1;display:flex;align-items:center;gap:12px 16px;flex-wrap:wrap;padding:8px 16px;
  background:var(--card);border-bottom:1px solid var(--line);font-size:17px;}
.bsp-reiter{flex:1 1 auto;display:flex;justify-content:center;gap:4px;flex-wrap:wrap;}
.bsp-tab{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:0;border-radius:var(--r-control);
  background:none;color:var(--muted);font:inherit;font-size:15px;font-weight:600;cursor:pointer;white-space:nowrap;}
.bsp-tab svg{width:20px;height:20px;flex:none;}
.bsp-tab.an{background:var(--brand-soft);color:var(--brand-dk);}
.bsp-tab.bsp-ausgeschaltet span{text-decoration:line-through;}
.bsp-koerper{grid-row:2;min-height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,40%);gap:24px;
  padding:24px;overflow:hidden;}
.bsp-spalte{min-height:0;overflow:auto;display:flex;flex-direction:column;gap:12px;padding:0 4px 24px 0;}
.bsp-vorschau{min-height:0;overflow:auto;display:flex;flex-direction:column;align-items:center;gap:8px;}
.bsp-vorschau.bsp-ohne{justify-content:center;}
.bsp-vorschau-titel{margin:0;font-size:13px;font-weight:700;color:var(--muted);}
.bsp-papier{width:100%;max-width:560px;aspect-ratio:595/842;display:grid;place-items:center;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-control);box-shadow:var(--e-2);overflow:hidden;}
.bsp-papier img{display:block;width:100%;height:100%;object-fit:contain;}
.bsp-papier img[hidden],.bsp-papier span[hidden]{display:none;}
.bsp-papier span{padding:16px;font-size:14px;color:var(--muted);text-align:center;}
.bsp-fuss{grid-row:3;border-bottom:0;border-top:1px solid var(--line);}
.bsp-titel{margin:12px 0 0;font-size:15px;font-weight:700;color:var(--muted);}
.bsp-karte{display:flex;flex-direction:column;gap:12px;padding:16px;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-card);}
.bsp-karte header{display:flex;align-items:center;gap:12px;}
.bsp-nr{flex:none;display:grid;place-items:center;width:32px;height:32px;border-radius:var(--r-control);
  background:var(--brand-soft);color:var(--brand-dk);font-weight:700;}
.bsp-karte label{display:flex;flex-direction:column;gap:4px;font-size:13px;font-weight:600;color:var(--muted);}
.bsp-ebene .bsp-feld{width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r-control);
  background:var(--card);color:var(--ink);font:inherit;font-size:15px;font-weight:400;}
.bsp-ebene .bsp-feld:disabled{opacity:.45;}
.bsp-ebene textarea.bsp-feld{resize:vertical;line-height:1.4;}
.bsp-kopfkarte{display:grid;grid-template-columns:2fr 1fr;gap:12px 16px;}
.bsp-zeiten{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;}
.bsp-zeiten>label,.bsp-phase{flex:0 0 150px;display:flex;flex-direction:column;gap:4px;}
.bsp-summe{padding:8px 0;font-size:15px;font-weight:700;color:var(--ink);}
.bsp-karte label.bsp-schalter{flex-direction:row;align-items:center;gap:8px;font-size:15px;color:var(--ink);cursor:pointer;}
.bsp-schalter input{width:20px;height:20px;accent-color:var(--brand);}
.bsp-hinweis{margin:0;font-size:13px;color:var(--muted);}
/* Eine Auswahl aus Kacheln: gewählt ist die GEFÜLLTE - kein Rahmen in Markenfarbe. */
.bsp-wahl{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px;}
.bsp-kachel{display:flex;flex-direction:column;align-items:flex-start;gap:4px;min-height:64px;padding:12px;text-align:left;
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;}
.bsp-kachel svg{width:24px;height:24px;flex:none;color:var(--muted);}
.bsp-kachel b{font-size:14px;}
.bsp-kachel small{font-size:12px;color:var(--muted);line-height:1.3;}
.bsp-kachel.an{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-dk);}
.bsp-kachel.an svg{color:var(--brand-dk);}
.bsp-farbtupfer{display:block;width:24px;height:24px;border-radius:50%;}
.bsp-nummern{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.bsp-nummer{display:inline-flex;align-items:center;gap:8px;min-height:44px;max-width:260px;padding:0 12px 0 8px;
  border:1px solid var(--line);border-radius:var(--r-control);background:var(--card);color:var(--ink);font:inherit;cursor:pointer;}
.bsp-nummer b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:var(--r-control);
  background:var(--paper);font-size:14px;}
.bsp-nummer span{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bsp-nummer.an{background:var(--brand-soft);border-color:var(--brand-soft);color:var(--brand-dk);}
.bsp-nummer.an b{background:var(--card);}
.bsp-blatt{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;}
.bsp-blatt label{flex:1 1 200px;}
.bsp-blatt label.bsp-seiten{flex:0 1 200px;}
.bsp-blatt label.bsp-aus{display:none;}
.bsp-meldung{font-size:14px;color:var(--muted);}
.bsp-meldung.bsp-fehler{color:var(--bad-ink);}
.bsp-laedt{grid-column:1 / -1;color:var(--muted);text-align:center;padding:48px 16px;}
/* Die Kachel in „Lernspiele": das Symbol kommt zur Laufzeit aus Lucide. */
.ls-tile-ico[data-bs-ic] svg{width:26px;height:26px;}

@media (max-width:900px){
  .bsp-koerper{grid-template-columns:1fr;overflow:auto;}
  .bsp-spalte,.bsp-vorschau{overflow:visible;padding-bottom:0;}
  .bsp-papier{max-width:420px;}
}
@media (max-width:640px){
  .bsp-kopfkarte{grid-template-columns:1fr;}
  .bsp-koerper{padding:12px;}
  .bsp-tab span{display:none;}
  .bsp-tab.an span{display:inline;}
  .bsh-leiste{padding:8px;}
  .bsh-knopf span{display:none;}
  .bsh-knopf.bsh-haupt span,.bsh-kind .bsh-knopf span{display:inline;}
  .bsh-kind .bsh-text{flex-basis:100%;font-size:15px;}
  .bsh-angebot{flex-basis:100%;}
}