/* Handbuchseite. Baut auf /app.css auf (Tokens, .btn, .chip-btn, .hint) —
   diese Datei ergänzt nur, was die App-Oberfläche nicht kennt: eine
   scrollbare Seite statt einer starren App in einem Fenster. */

/* app.css sperrt Scrollen fürs App-Layout (html,body{height:100%},
   body{overflow:hidden}) — hier wird normal gescrollt. */
html{height:auto}
body{
  height:auto;min-height:100vh;overflow:visible;display:block;
}

:root{
  --hb-gelb:#fbbf24;      /* Glühbirnengelb — Suchtreffer, Hilfemodus-Bezug */
  --hb-spalte:250px;
  --hb-inhalt-breite:860px;
}

/* --------------------------------------------------------------- Kopf */
.hb-kopf{
  position:sticky;top:0;z-index:40;
  height:56px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;padding:0 20px;
  background:linear-gradient(180deg,#131a27,#0f1420);
  border-bottom:1px solid var(--line);
}
.hb-marke{display:flex;align-items:center;gap:10px;min-width:0}
.hb-logo-chip{
  width:30px;height:30px;flex:0 0 auto;border-radius:8px;background:#eef2f8;
  display:grid;place-items:center;box-shadow:0 2px 10px rgba(0,0,0,.35);
}
.hb-logo-bild{width:20px;height:20px}
.hb-marke-text{font-weight:700;font-size:14.5px;letter-spacing:.2px;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.hb-marke-trenn{color:var(--txt-mute);font-weight:400;margin:0 1px}
.hb-kopf-rechts{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.hb-sprache{display:flex;gap:6px}
.hb-sprache .chip-btn{padding:6px 11px;font-size:12px}

/* Hinweis, wenn eine Übersetzung fehlt und auf Deutsch zurückgefallen wurde. */
.hb-lade-hinweis{
  background:rgba(245,158,11,.12);border-bottom:1px solid var(--line);
  color:var(--warn);font-size:12.5px;padding:8px 20px;text-align:center;
}
.hb-lade-hinweis.hidden{display:none}

/* ------------------------------------------------------------ Layout */
.hb-layout{
  display:flex;align-items:flex-start;gap:32px;
  max-width:1180px;margin:0 auto;padding:26px 24px 90px;
}

/* -------------------------------------------------------- Linke Spalte */
.hb-seite{
  flex:0 0 var(--hb-spalte);width:var(--hb-spalte);
  position:sticky;top:76px;
  max-height:calc(100vh - 96px);overflow:auto;
  border:0;
}
.hb-seite-titel{
  cursor:default;list-style:none;font-size:11px;font-weight:700;
  text-transform:uppercase;letter-spacing:.6px;color:var(--txt-mute);
  padding:2px 2px 10px;
}
.hb-seite-titel::-webkit-details-marker{display:none}
.hb-seite-titel::marker{content:""}

.hb-suchbox{margin-bottom:18px}
.hb-such-feld{
  width:100%;background:var(--panel-2);border:1px solid var(--line);
  border-radius:var(--rs);padding:9px 11px;font-size:13px;
}
.hb-such-feld:focus{outline:none;border-color:var(--acc)}
.hb-suchbox .hint{margin-top:6px;margin-bottom:0}
.hb-trefferzahl{font-size:11.5px;color:var(--txt-mute);margin-top:8px;min-height:1px}
.hb-trefferzahl:empty{margin-top:0}

.hb-treffer-liste{
  list-style:none;display:flex;flex-direction:column;gap:3px;
  margin-top:8px;max-height:360px;overflow:auto;
}
.hb-treffer-liste:empty{margin-top:0}
.hb-treffer{
  padding:8px 9px;border-radius:8px;cursor:pointer;
  border:1px solid transparent;
}
.hb-treffer:hover,.hb-treffer.hb-aktiv{
  background:rgba(59,130,246,.12);border-color:var(--acc);
}
.hb-treffer-titel{font-size:12.5px;font-weight:600;color:var(--txt)}
.hb-treffer-gruppe{
  font-size:10px;color:var(--txt-mute);text-transform:uppercase;
  letter-spacing:.4px;margin:2px 0 3px;
}
.hb-treffer-ausschnitt{font-size:11.5px;color:var(--txt-dim);line-height:1.4}
.hb-treffer-ausschnitt mark, mark.hb-fund{
  background:rgba(251,191,36,.35);color:var(--txt);font-weight:600;
  border-radius:3px;padding:0 2px;
}

.hb-toc-gruppe{margin-bottom:16px}
.hb-toc-titel{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--txt-mute);padding:0 10px;margin-bottom:4px;
}
.hb-toc-list{list-style:none;display:flex;flex-direction:column}
.hb-toc-list a{
  display:block;padding:6px 10px;border-radius:8px;
  border-left:2px solid transparent;color:var(--txt-dim);
  font-size:.8rem;line-height:1.3;text-decoration:none;
}
.hb-toc-list a:hover{color:var(--txt);background:rgba(255,255,255,.04)}
.hb-toc-list a.active{
  background:rgba(59,130,246,.12);border-left-color:var(--acc);
  color:var(--acc-2);font-weight:600;
}

/* --------------------------------------------------------------- Inhalt */
.hb-inhalt{flex:1 1 auto;min-width:0;max-width:var(--hb-inhalt-breite)}
.hb-lade,.hb-fehler{color:var(--txt-dim);font-size:14px;padding:20px 0}
.hb-fehler{color:var(--err)}

.hb-hero{margin-bottom:22px}
.hb-hero h1{font-size:1.6rem;margin-bottom:6px}
.hb-hero-untertitel{color:var(--txt-dim);font-size:.92rem;max-width:640px}
.hb-hero-stand{color:var(--txt-mute);font-size:.75rem;margin-top:8px}

.hb-card{
  scroll-margin-top:90px;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px 22px;margin-bottom:18px;
}
.hb-card-kopf{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hb-card-kopf h2{font-size:1.15rem}
.hb-card-gruppe{
  font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--acc-2);background:rgba(59,130,246,.12);border-radius:20px;
  padding:2px 9px;
}
.hb-kurz{color:var(--txt-dim);font-size:.88rem;margin-bottom:12px}

.hb-text p{margin:.6em 0;font-size:.92rem;line-height:1.6}
.hb-text p:first-child{margin-top:0}
.hb-text ul,.hb-text ol{margin:.5em 0 .5em 1.3em}
.hb-text li{font-size:.92rem;line-height:1.55;margin:.2em 0}
.hb-text code,.hb-text kbd{
  font-family:var(--mono);font-size:.85em;background:var(--panel-2);
  border:1px solid var(--line);border-radius:4px;padding:1px 5px;
}
.hb-text a{color:var(--acc-2)}

.hb-bild{margin:.9rem 0}
.hb-shot{
  display:block;max-width:100%;height:auto;border:1px solid var(--line);
  border-radius:10px;box-shadow:0 6px 20px rgba(0,0,0,.35);margin:.2rem 0 .4rem;
  cursor:zoom-in;
}
.hb-shot-fehlt{
  display:flex;align-items:center;justify-content:center;min-height:120px;
  border:1px dashed var(--line);border-radius:10px;background:var(--panel-2);
  color:var(--txt-mute);font-size:.78rem;margin:.2rem 0 .4rem;text-align:center;
  padding:14px;
}
.hb-bild figcaption{color:var(--txt-mute);font-size:.78rem;text-align:center}

.hb-schritte{margin:.6rem 0 .6rem 1.4rem;display:flex;flex-direction:column;gap:6px}
.hb-schritte li{font-size:.92rem;line-height:1.5;padding-left:2px}

.hb-hinweis,.hb-warnung{
  border:1px solid var(--line);border-left:3px solid var(--acc);
  border-radius:var(--rs);padding:12px 14px;margin:.9rem 0;
  background:var(--panel-2);
}
.hb-hinweis-titel,.hb-warnung-titel{
  font-weight:700;font-size:.82rem;margin-bottom:4px;color:var(--acc-2);
}
.hb-warnung{border-left-color:var(--warn)}
.hb-warnung-titel{color:var(--warn)}
.hb-hinweis p,.hb-warnung p{font-size:.88rem;margin:.3em 0}
.hb-hinweis p:first-of-type,.hb-warnung p:first-of-type{margin-top:0}

.hb-tabelle{width:100%;border-collapse:collapse;margin:.9rem 0;font-size:.84rem}
.hb-tabelle th,.hb-tabelle td{
  border:1px solid var(--line);padding:6px 10px;text-align:left;
  vertical-align:top;
}
.hb-tabelle th{background:var(--panel-2);color:var(--txt-dim);font-weight:600}

.hb-elemente{
  margin-top:14px;border:1px dashed var(--line);border-radius:var(--rs);
  padding:9px 13px;background:var(--panel-2);
}
.hb-elemente summary{
  cursor:pointer;font-size:.78rem;color:var(--txt-dim);font-weight:600;
  display:flex;align-items:center;gap:6px;
}
.hb-elemente summary::before{content:"💡";font-size:.85em}
.hb-elemente ul{margin:9px 0 2px 18px;font-size:.8rem;color:var(--txt-dim);
  display:flex;flex-direction:column;gap:5px}
.hb-elemente code{
  background:var(--panel);padding:1px 5px;border-radius:4px;color:var(--acc-2);
  font-family:var(--mono);font-size:.85em;
}

.hb-siehe-auch{
  margin-top:1rem;padding-top:.6rem;border-top:1px dashed var(--line);
  font-size:.78rem;color:var(--txt-dim);
}
.hb-siehe-auch a{color:var(--acc-2);margin-right:10px;text-decoration:none}
.hb-siehe-auch a:hover{text-decoration:underline}

/* -------------------------------------------------------------- Vollbild */
.hb-overlay{
  position:fixed;inset:0;z-index:200;background:rgba(5,7,12,.88);
  display:flex;align-items:center;justify-content:center;padding:40px;
}
.hb-overlay.hidden{display:none}
.hb-overlay img{
  max-width:92vw;max-height:88vh;border-radius:10px;
  box-shadow:0 20px 60px rgba(0,0,0,.6);
}
.hb-overlay-schliessen{
  position:absolute;top:22px;right:26px;width:38px;height:38px;
  border-radius:50%;background:var(--panel-2);border:1px solid var(--line);
  color:var(--txt);font-size:20px;line-height:1;cursor:pointer;
}
.hb-overlay-schliessen:hover{background:#1d2636}

/* ---------------------------------------------------------- Nach oben */
.hb-oben{
  position:fixed;right:26px;bottom:26px;z-index:90;
  width:44px;height:44px;border-radius:50%;border:0;
  background:var(--acc);color:#fff;font-size:18px;cursor:pointer;
  box-shadow:0 8px 22px rgba(59,130,246,.45);
}
.hb-oben:hover{background:var(--acc-2)}
.hb-oben.hidden{display:none}

/* --------------------------------------------------------- Schmales Fenster */
@media (max-width:900px){
  .hb-layout{flex-direction:column;gap:16px;padding:18px 16px 70px}
  .hb-seite{
    /* flex:0 0 250px aus der Desktop-Regel würde in der Spaltenrichtung zur
       HÖHE — ein zugeklappter Aufklapper stand als leerer 250-px-Kasten da
       (gemessen 03.09.2026 bei 390 px Breite). */
    flex:0 0 auto;
    position:static;width:100%;max-height:none;overflow:visible;
    background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
    padding:12px 14px;
  }
  .hb-seite-titel{cursor:pointer;padding:2px}
  .hb-seite[open] .hb-seite-titel{margin-bottom:8px}
  /* Aufklapp-Pfeil, damit man sieht, dass der Kasten sich öffnen lässt. */
  .hb-seite-titel::after{content:"▸";margin-left:7px;font-size:12px}
  .hb-seite[open] .hb-seite-titel::after{content:"▾"}
  .hb-inhalt{max-width:100%}
}

/* -------------------------------------------------------------- Druck */
@media print{
  .hb-kopf,.hb-lade-hinweis,.hb-seite,.hb-overlay,.hb-oben{display:none !important}
  body{background:#fff;color:#000}
  .hb-layout{display:block;max-width:none;padding:0;margin:0}
  .hb-inhalt{max-width:none}
  .hb-card{
    background:#fff;border:1px solid #ccc;box-shadow:none;
    break-inside:avoid;page-break-inside:avoid;
  }
  .hb-card.hb-neue-gruppe{break-before:page;page-break-before:always}
  .hb-shot{box-shadow:none;max-width:100%}
  .hb-elemente{display:none}
}

/* Knöpfe in der Kopfzeile sind Links — ohne diese Zeile erben sie die
   Linkfarbe aus app.css und stehen blau auf blau (gemessen 03.09.2026). */
.hb-kopf a.btn,#hb-zur-app{color:var(--txt);text-decoration:none}
#hb-zur-app:hover{color:#fff}