/* ==========================================================================
   DAS BLATT DER KINDER (docs/PLAN_PDF_ABGABE.md §7) - Oberflaeche
   ==========================================================================
   Eine Vollbild-EBENE in der Anwendung, keine eigene Seite (§2 E9, §14
   Nr. 12): sonst laege das Blatt nach dem Oeffnen im Cache eines geteilten
   Tablets. Geladen von templates/index.html (Kind und Lehrkraft) und
   templates/pinnwand.html (Kind ueber die Pinnwand).

   FARBEN kommen aus dem Woerterbuch (design-tokens.css). Die Pinnwand laedt
   das Woerterbuch nicht, fuehrt aber dieselben Namen (--card, --ink,
   --muted, --line, --brand, --ok, --bad) - deshalb stehen hier nur diese.
   Die TINTE steht nicht hier: sie kommt aus STIFT_TINTE in stift.js, weil
   das Papier immer weiss ist und der Server die Farbnamen prueft.
   ========================================================================== */

.hb-ebene{position:fixed;inset:0;z-index:9000;display:flex;flex-direction:column;
  background:var(--paper);color:var(--ink);
  padding:env(safe-area-inset-top) env(safe-area-inset-right) 0 env(safe-area-inset-left);
  /* Der Handballen beim Schreiben markiert nichts (Befund Murat 24.09.2026,
     iPad mit Stift: „elin yanını yaslıyoruz … seçiliyor"): keine Auswahl,
     kein Lupen-/Kopiermenue, kein grauer Tipp-Blitz. Eingabefelder der
     Dialoge bleiben markierbar (Regel darunter). */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  -webkit-tap-highlight-color:transparent;}
.hb-ebene input,.hb-ebene textarea{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default;}
body.hb-offen{overflow:hidden;}

.hb-leiste{flex:0 0 auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 12px;background:var(--card);border-bottom:1px solid var(--line);}
.hb-titel{display:flex;flex-direction:column;min-width:0;flex:1 1 160px;}
.hb-titel b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hb-titel small{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.hb-gruppe{display:flex;align-items:center;gap:4px;}

.hb-knopf{display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;min-width:40px;padding:0 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);
  font:inherit;font-size:14px;font-weight:600;cursor:pointer;}
.hb-knopf svg{width:20px;height:20px;}
.hb-knopf:disabled{opacity:.45;cursor:default;}
.hb-knopf.an{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dk);}
.hb-knopf.haupt{background:var(--brand);border-color:var(--brand);color:var(--card);}
.hb-knopf.rot{background:var(--bad);border-color:var(--bad);color:var(--card);}
.hb-knopf.nur-icon{padding:0;}

.hb-farbe{width:32px;height:32px;border-radius:50%;border:3px solid var(--card);
  box-shadow:0 0 0 1px var(--line);cursor:pointer;padding:0;}
.hb-farbe.an{box-shadow:0 0 0 2px var(--ink);}

.hb-stand{font-size:13px;color:var(--muted);white-space:nowrap;padding:0 4px;}
.hb-stand.warnt{color:var(--bad);font-weight:700;}
.hb-stand.gut{color:var(--ok);}

/* DIE LEISTE (Kind v2.818.0, Lehrkraft v2.819.0 - Vorbild Apple Notes,
   Befund Murat 24.09.2026): drei Zonen. Links zurueck und WER (die Gruppe
   bzw. das Kind, das bewertet wird), in der Mitte die Werkzeuge als Symbole
   in einer Schale, rechts Stand und Handlungen. Die beiden Seitenzonen
   teilen sich den Rest gleich, damit die Werkzeuge in der Mitte stehen.
   Die Woerter der Symbole stehen im Tooltip. */
.hb-leiste.kind,.hb-leiste.lehrkraft{flex-wrap:nowrap;gap:8px;}
.hb-l-links,.hb-l-rechts{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:6px;}
.hb-l-rechts{justify-content:flex-end;}
/* DIE SCHALE OHNE SCHALE (v2.892.0, Ansage Murat 30.09.2026: „arka planını
   kaldıracaksın … beyaz … yere oturacak … seçildiğinde kutucuk şeklinde bir
   seçilme değil de … kokpitte sol taraftaki navigasyon menüsünde … tuş
   basılmış hissi"). Die Knoepfe stehen direkt auf der Flaeche, ohne Kasten
   dahinter; das gewaehlte Werkzeug liegt EINGEDRUECKT darin - dieselben zwei
   inneren Schatten wie ein Eintrag der Seitenleiste (--sb-tief/--sb-hoch,
   index.css). Auf Weiss braucht die helle Haelfte eine leicht getoente Mulde
   (--paper), sonst saehe man nur die dunkle (dieselbe Lehre wie bei den
   Knoepfen der Kopfzeile, index.css „WEICHE TIEFE AUCH IN DER KOPFZEILE").
   Ein feiner Strich (.sw-trenner) trennt die Gruppen. */
.hb-l-mitte,.sw-schale{flex:0 0 auto;display:flex;align-items:center;gap:2px;padding:0;border-radius:0;
  background:transparent;border:0;}
.hb-l-mitte:empty{display:none;}
.hb-leiste .hb-knopf.nur-icon,.sw-schale .hb-knopf.nur-icon{width:44px;height:44px;border-radius:12px;border-color:transparent;background:transparent;
  transition:box-shadow .16s ease,background-color .16s ease,color .16s ease;}
.hb-leiste .hb-knopf.nur-icon svg,.sw-schale .hb-knopf.nur-icon svg{width:22px;height:22px;}
/* Kein Doppeltipp-Zoom auf der Leiste: zweimal „Auswählen" fügt ein (v2.894.0). */
.sw-schale .hb-knopf{touch-action:manipulation;}
.hb-leiste .hb-knopf.nur-icon.an,.sw-schale .hb-knopf.nur-icon.an{background:var(--paper);border-color:transparent;
  box-shadow:inset 3px 3px 6px var(--sb-tief),inset -3px -3px 6px var(--sb-hoch);color:var(--brand-dk);}
.hb-leiste .hb-knopf.nur-icon.haupt,.sw-schale .hb-knopf.nur-icon.haupt{background:var(--brand);border-color:var(--brand);color:var(--card);}
.sw-schale .hb-knopf.nur-icon:active:not(:disabled){box-shadow:inset 2px 2px 5px var(--sb-tief),inset -2px -2px 5px var(--sb-hoch);}
.sw-schale .hb-knopf.nur-icon:disabled{opacity:.3;}
@media (hover:hover){
  .hb-leiste .hb-knopf.nur-icon:not(.an):not(.haupt):hover,.sw-schale .hb-knopf.nur-icon:not(.an):not(:disabled):hover{background:var(--paper);color:var(--brand-dk);}
}
.sw-trenner{flex:none;width:1px;height:24px;margin:0 6px;background:var(--line);}
/* Der Laser leuchtet rot, solange er gewaehlt ist - wie sein Punkt. */
.sw-schale .hb-knopf.sw-laser.an{color:var(--bad);}
/* Ohne Lucide steht der Titel als Wort im Knopf (hbKnopf) - dann darf er breiter sein. */
.hb-leiste .hb-knopf.nur-icon .hb-wort{font-size:12px;}
.hb-leiste .hb-knopf.nur-icon:has(.hb-wort){width:auto;padding:0 8px;}

/* Lehrkraft: die rechte Zone schrumpft nicht unter ihren Inhalt - eher wird
   der Name links gekuerzt. Handlungen mit Wort sind so hoch wie die Symbole. */
.hb-leiste.lehrkraft .hb-l-rechts{min-width:max-content;}
.hb-leiste.lehrkraft .hb-knopf{min-height:44px;border-radius:12px;}
.hb-leiste.lehrkraft .hb-titel{flex:0 1 auto;}
/* Rechts oben das naechste Kind (hbWeiterKnopf): gesperrt, bis die Noten
   eingetragen sind - dann in der Farbe der Hauptsache. */
.hb-weiter{max-width:220px;margin-left:4px;}
.hb-weiter-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb-weiter.gesperrt{color:var(--muted);background:var(--paper);cursor:not-allowed;}
/* Schmalere Schirme: erst verlieren die Nebenhandlungen ihr Wort, dann
   rutschen die Werkzeuge in eine zweite Reihe - Name und „weiter" bleiben oben. */
@media (max-width:1180px){
  .hb-leiste.lehrkraft .hb-knopf.nebenwort{width:44px;padding:0;border-color:transparent;background:transparent;}
  .hb-leiste.lehrkraft .hb-knopf.nebenwort .hb-wort{display:none;}
}
@media (max-width:980px){
  .hb-leiste.lehrkraft{flex-wrap:wrap;row-gap:3px;}
  .hb-leiste.lehrkraft .hb-l-rechts{flex:0 0 auto;}
  /* Der Umbruch: ein unsichtbares Element ueber die volle Breite zwischen
     den Zonen oben und der Schale darunter. */
  .hb-leiste.lehrkraft::after{content:"";order:2;flex-basis:100%;height:0;}
  .hb-leiste.lehrkraft .hb-l-mitte{order:3;margin:0 auto;}
}
/* In der Leiste der Kinder nur die Bilder der Gruppe - der Name steht im Tooltip. */
.hb-leiste.kind .hb-mitglieder{min-width:0;overflow:hidden;gap:4px;}
.hb-leiste.kind .hb-mitglied.mit-av{position:relative;padding:2px;gap:2px;}
/* Fertig: ein kleines Abzeichen auf dem Bild statt eines Hakens daneben. */
.hb-leiste.kind .hb-mitglied > svg{position:absolute;right:-3px;bottom:-3px;width:14px;height:14px;
  box-sizing:border-box;padding:2px;border-radius:50%;background:var(--ok);color:var(--card);stroke-width:4;}
.hb-leiste.kind .hb-mname{display:none;}

/* Der Stift zeigt, womit er schreibt: das Symbol in der Tinte (inline aus
   STIFT_TINTE, stift.js), darunter ein Strich in der gewaehlten Breite. Der
   Textmarker (v2.892.0) ebenso: darunter ein Balken in seiner Farbe. */
.hb-stiftknopf,.sw-markerknopf{position:relative;}
.hb-leiste.kind .hb-stiftknopf svg,.sw-schale .hb-stiftknopf svg,.sw-schale .sw-markerknopf svg{margin-bottom:7px;}
.sw-marker-farbe{height:5px;opacity:.75;}
.hb-stift-farbe{position:absolute;left:50%;bottom:6px;width:20px;border-radius:4px;transform:translateX(-50%);}

/* Das Stiftmenue (hbStiftMenueZeichnen): eine kleine Karte unter dem Stift,
   oben die Breite, darunter die Farbe. Es liegt auf der Ebene, nicht in der
   Leiste; die Lage setzt das Skript. */
.hb-stiftmenue{position:absolute;z-index:3;display:flex;flex-direction:column;gap:8px;padding:10px;
  border-radius:16px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);}
.hb-sm-reihe{display:flex;align-items:center;justify-content:center;gap:6px;}
.hb-sm-breite{display:inline-flex;align-items:center;justify-content:center;width:44px;height:36px;padding:0;
  border-radius:10px;border:1px solid transparent;background:transparent;cursor:pointer;}
.hb-sm-breite i{display:block;width:26px;border-radius:4px;}
.hb-sm-breite.an{background:var(--brand-soft);border-color:var(--brand);}
/* DAS MARKERMENUE (schreib-leiste.js swMarkerMenueHtml, v2.892.0): drei
   Groessen als durchscheinende Balken, darunter die drei Faecher. Die
   Palette - hier und im Stiftmenue des Hefts - oeffnet die Farbwahl des
   Geraets (v2.893.0).
   DAS FARBFELD (swFarbfeld, v2.896.1): ein echtes <input type="color">
   liegt unsichtbar UEBER der Palette und dem gewaehlten Fach - der Finger
   trifft das Feld selbst; so oeffnet auch das iPad sein Farbfenster (per
   Skript geoeffnet tat es das nicht). opacity:0 statt display:none, sonst
   ist es weder antippbar noch mit der Tastatur erreichbar. */
.sw-markermenue .sw-mm-breite i{width:28px;}
.hb-stiftmenue .hb-knopf.sw-palette{width:36px;height:36px;border-radius:10px;border-color:transparent;background:transparent;}
@media (hover:hover){ .hb-stiftmenue .hb-knopf.sw-palette:hover{background:var(--brand-soft);color:var(--brand-dk);} }
.sw-mm-fach.an{box-shadow:0 0 0 2px var(--ink);}
.sw-palette,.sw-mm-fach{position:relative;}
.sw-farbfeld{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;opacity:0;cursor:pointer;}
.sw-palette:has(.sw-farbfeld:focus-visible),.sw-mm-fach:has(.sw-farbfeld:focus-visible){outline:2px solid var(--brand);outline-offset:2px;}
/* DIE SCHALE (schreib-leiste.js, v2.867.0): dieselbe Schale wie in der
   Mitte der Blatt-Leiste - auch im Kopf des SchlauHefts. Das Papiermenue
   ist ein Stiftmenue mit drei Reihen: Art, Grund, Linien. */
.sw-papiermenue .hb-knopf.nur-icon{width:44px;height:40px;border-radius:10px;border-color:transparent;background:transparent;}
.sw-papiermenue .hb-knopf.nur-icon.an{background:var(--brand-soft);border-color:var(--brand);color:var(--brand-dk);}
.sw-papier-titel{font-size:12px;font-weight:700;color:var(--muted);padding:2px 2px 0;}
.sw-papiermenue .hb-farbe:disabled{opacity:.35;cursor:default;}
/* Der Abstand (v2.872.0): je Richtung ein Zeichen, −, der Wert, +. */
.sw-abstand-reihen{display:flex;flex-direction:column;gap:2px;}
.sw-abstand{display:flex;align-items:center;gap:4px;color:var(--muted);}
.sw-abstand > svg{width:18px;height:18px;flex:none;margin:0 4px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;}
.sw-papiermenue .sw-abstand .hb-knopf.nur-icon.sw-klein{width:36px;height:32px;}
.sw-papiermenue .sw-abstand .hb-knopf:disabled{opacity:.35;cursor:default;}
.sw-abstand-wert{min-width:48px;text-align:center;font-size:13px;font-weight:750;color:var(--ink);
  font-variant-numeric:tabular-nums;}

/* Der Stand beim Kind: ein Symbol, bei der Warnung mit Zahl. Der Satz steht
   im Tooltip und - fuer das Vorlesen - unsichtbar im Text (`.hb-vh`). */
.hb-leiste.kind .hb-stand{display:inline-flex;align-items:center;gap:3px;padding:0 4px;}
.hb-leiste.kind .hb-stand svg{width:20px;height:20px;}
.hb-stand.laeuft svg{animation:hb-dreh 1s linear infinite;}
@keyframes hb-dreh{to{transform:rotate(360deg);}}
@media (prefers-reduced-motion:reduce){ .hb-stand.laeuft svg{animation:none;} }
.hb-vh{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;}

.hb-meldung{flex:0 0 auto;padding:8px 14px;font-size:14px;font-weight:600;
  background:var(--brand-soft);color:var(--brand-dk);border-bottom:1px solid var(--line);}
.hb-meldung.fehler{background:var(--bad-soft);color:var(--bad);}
.hb-meldung[hidden]{display:none;}

.hb-mitglieder{display:flex;gap:6px;align-items:center;}
.hb-mitglied{display:inline-flex;align-items:center;gap:4px;font-size:13px;padding:2px 8px;
  border-radius:999px;background:var(--paper);border:1px solid var(--line);}
.hb-mitglied.weg{opacity:.45;}
.hb-mitglied.fertig{border-color:var(--ok);color:var(--ok);}
/* Gruppe (B11): Avatar vor dem Namen, der Haken dahinter. Wer gerade nicht
   da ist, steht blasser (`.weg`). */
.hb-mitglied.mit-av{padding:2px 8px 2px 2px;}
.hb-mitglied svg{width:15px;height:15px;}
.hb-mitglied .sl-av-kreis,.hb-av{flex:none;}
.hb-av{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--brand-soft);color:var(--brand-dk);font-size:12px;font-weight:700;line-height:1;}
/* Wo jemand aus der Gruppe zuletzt geschrieben hat: die Marke sitzt ueber
   der Stelle und faengt keinen Zeiger - darunter wird weiter geschrieben. */
.hb-da{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:4px;
  transform:translate(-50%,calc(-100% - 6px));padding:2px 8px 2px 2px;border-radius:999px;
  background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);
  font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;pointer-events:none;}

.hb-flaeche{flex:1 1 auto;overflow:auto;position:relative;-webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;}
.hb-seiten{display:flex;flex-direction:column;align-items:center;gap:16px;padding:16px;
  transform-origin:0 0;}
.hb-seite{position:relative;background:var(--card);box-shadow:var(--shadow);}
.hb-seite canvas{position:absolute;inset:0;width:100%;height:100%;display:block;}
.hb-seite .hb-tinte{touch-action:none;cursor:crosshair;}
.hb-seite.lesen .hb-tinte{cursor:default;}
.hb-laedt{padding:40px;color:var(--muted);text-align:center;}

.hb-frage{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;
  background:rgba(15,23,42,.35);padding:16px;}
.hb-frage > div{background:var(--card);border-radius:14px;padding:18px;max-width:420px;width:100%;
  box-shadow:var(--shadow);}
.hb-frage p{margin:0 0 14px;font-size:15px;line-height:1.45;}
.hb-frage .hb-frage-knoepfe{display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;}

/* Der Stempel (B6): die eigene Note des Kindes auf Seite 1. Rot, weil er von
   der Lehrkraft kommt - dieselbe Regel wie die Korrektur (E4). */
.hb-stempel{position:absolute;right:4%;top:2.5%;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;min-width:64px;padding:6px 12px;border-radius:12px;
  border:2px solid var(--bad);color:var(--bad);background:var(--card);pointer-events:none;
  transform:rotate(-4deg);}
.hb-stempel.unten{top:auto;bottom:2.5%;}
.hb-stempel small{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.hb-stempel b{font-size:28px;line-height:1;}

/* Textnotiz (B8, §7a): eine Marke an der Stelle, die die Lehrkraft angetippt
   hat - der Anker ist die obere linke Ecke; am Rand rueckt sie hinein
   (`hbMarkeEinpassen`). Rot umrandet wie alles von der Lehrkraft (E4);
   aufgeklappt zeigt sie den Text. Ein Entwurf hat einen gestrichelten Rand. */
.hb-notiz{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;
  width:max-content;max-width:min(280px,70%);padding:4px 9px;border-radius:10px;border:2px solid var(--bad);
  background:var(--card);color:var(--bad);font:inherit;font-size:13px;font-weight:700;
  text-align:left;line-height:1.3;box-shadow:var(--shadow);}
.hb-notiz.entwurf{border-style:dashed;}
.hb-notiz.ziehbar{touch-action:none;}
.hb-notiz.offen{z-index:2;}
/* Der Kopf ist der Knopf (auf-/zuklappen, bei der Lehrkraft bearbeiten);
   der aufgeklappte Inhalt - Text oder Spieler - gehoert nicht dazu (B9). */
.hb-notiz-kopf{display:inline-flex;align-items:center;gap:5px;min-width:0;padding:0;margin:0;border:0;
  background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;}
.hb-notiz.ziehbar .hb-notiz-kopf{cursor:grab;}
.hb-notiz-kopf svg{width:16px;height:16px;flex:0 0 auto;}
.hb-notiz-inhalt{display:block;}
.hb-notiz audio{display:block;width:min(240px,62vw);height:36px;margin-top:4px;}
.hb-notiz small{font-size:11px;font-weight:600;color:var(--muted);}
.hb-notiz-text{font-weight:400;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;}
.hb-notizmodus .hb-seite .hb-tinte{cursor:copy;}

/* Kommentare (B8): eine Karte ueber Seite 1 - an die Gruppe, dazu je Kind. */
.hb-rueckmeldung{width:min(100%,720px);display:flex;flex-direction:column;gap:8px;padding:12px 14px;
  border-radius:12px;background:var(--card);border-left:4px solid var(--bad);box-shadow:var(--shadow);}
.hb-rueckmeldung.bearbeitbar{cursor:pointer;}
.hb-kommentar small{font-size:12px;font-weight:700;color:var(--bad);}
.hb-kommentar p{margin:2px 0 0;font-size:15px;line-height:1.45;white-space:pre-wrap;overflow-wrap:anywhere;}
.hb-kommentar.entwurf p{color:var(--muted);}

/* Die Dialoge der Lehrkraft: Textnotiz und Kommentar. */
/* Kommentarvorschlag (v2.821.0): eine Reihe „Vorschlag für Note 1–6". */
.hb-vorschlag{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;}
.hb-vorschlag > span{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--muted);}
.hb-vorschlag > span svg{width:16px;height:16px;color:var(--brand);}
.hb-vorschlag-stand{font-size:13px;color:var(--muted);}
.hb-frage > div.hb-dialog{max-width:520px;}
.hb-feld{display:flex;flex-direction:column;gap:4px;margin:0 0 10px;}
.hb-feld > span{font-size:13px;font-weight:700;color:var(--muted);}
.hb-feld input,.hb-feld textarea{font:inherit;font-size:15px;padding:8px 10px;border-radius:10px;
  border:1px solid var(--line);background:var(--card);color:var(--ink);width:100%;box-sizing:border-box;}
.hb-feld textarea{resize:vertical;}
.hb-dialog-satz{font-size:13px;color:var(--muted);}
.hb-dialog-fehler{color:var(--bad);font-weight:600;font-size:14px;}
.hb-dialog-fehler[hidden]{display:none;}
/* Sprachnotiz aufnehmen (B9): Knopf, Uhr, darunter der Spieler zum Vorhoeren. */
.hb-ton-zeile{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.hb-ton-zeit{font-size:14px;color:var(--muted);font-variant-numeric:tabular-nums;}
.hb-ton-hoeren{margin-top:8px;}
.hb-ton-hoeren audio{display:block;width:100%;}

/* Noten eintragen (§0 Nr. 9): Namen links, 1–6 rechts. */
.hb-frage > div.hb-noten{max-width:560px;}
.hb-noten-zeile{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:6px 0;border-bottom:1px solid var(--line);}
.hb-noten-zeile > span{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.hb-noten-reihe{display:flex;gap:4px;flex-wrap:wrap;}
.hb-note{min-width:38px;padding:0;}
.hb-noten .hb-frage-knoepfe{margin-top:14px;}
button.hb-mitglied{cursor:pointer;font:inherit;font-size:13px;}

/* Telefon (§7: Zweitgeraet, darf nicht kaputt sein): Beschriftungen fallen
   weg, die Leiste der Kinder rueckt enger - sie bleibt EINE Reihe. Die
   Farben stehen seit v2.818.0 ohnehin im Stiftmenue. Nur im schmalen Bereich. */
@media (max-width:640px){
  .hb-leiste{gap:6px;padding:6px 8px;}
  .hb-leiste > .hb-titel{flex-basis:100%;order:-1;}
  .hb-leiste.lehrkraft .hb-l-links{flex-basis:100%;}
  .hb-leiste.lehrkraft .hb-l-rechts{flex:1 1 100%;min-width:0;flex-wrap:wrap;justify-content:flex-start;row-gap:4px;}
  .hb-weiter{max-width:150px;}
  .hb-leiste.kind{gap:4px;padding:6px;}
  .hb-leiste.kind .hb-knopf{width:40px;height:40px;min-width:40px;min-height:40px;}
  .hb-l-links,.hb-l-rechts{gap:2px;}
  .hb-leiste.kind .hb-mitglieder{gap:0;}
  .hb-leiste.kind .hb-mitglied + .hb-mitglied{margin-left:-16px;}
  .hb-knopf .hb-wort{display:none;}
  .hb-knopf.haupt .hb-wort,.hb-knopf.rot .hb-wort{display:inline;}
  .hb-seiten{padding:8px;gap:10px;}
}