/* =========================================================================
   handbuch.css – Benutzerhandbuch SynQaiPro (/handbuch)
   Gleiche Brand-Tokens und derselbe Look wie FAQ und Tutorials.

   Global statt scoped (.razor.css): Der Kapitelinhalt kommt als MarkupString
   in die Seite, und an MarkupString-Inhalte haengt Blazor das Isolations-
   Attribut nicht an. Scoped Styles wuerden die generierten Klassen (.cal,
   .tbl, .shot, .steps …) deshalb nie erreichen.
   ========================================================================= */

/* ---------- Lokale Design-Tokens (nur innerhalb der Handbuch-Seite) ---------- */
.hb {
    --h-orange:        #FF8C2A;
    --h-orange-bright: #FFB366;
    /* Derselbe Akzent als RGB-Tripel. Noetig fuer die Stellen, die den Ton
       mit Transparenz brauchen (rgba) — ohne dieses Token muessten sie den
       Farbwert fest verdrahten und wuerden bei MuSéa und MergeQaiPro orange
       bleiben, waehrend der Rest der Seite umschaltet. */
    --h-orange-rgb:    255, 140, 42;
    --h-mint:          #4ADFAF;
    --h-bg-dark:       #0B0D10;
    --h-bg-card:       #12141A;
    --h-bg-elev:       #1a1d24;
    --h-text:          #E8E6E1;
    --h-text-sub:      #9AA0A8;
    --h-border:        rgba(255, 255, 255, 0.08);
    --h-border-strong: rgba(255, 255, 255, 0.18);
    --h-font:          'DM Sans', "Inter", system-ui, sans-serif;
    --h-mono:          'JetBrains Mono', ui-monospace, Consolas, monospace;

    /* Hinweiskaesten: vier klar unterscheidbare Farben, keine davon so
       kraeftig wie das Marken-Orange der Ueberschriften. */
    --h-tip:   #4ADFAF;
    --h-warn:  #E0A45A;
    --h-info:  #6EA8FE;
    --h-eval:  #A371F7;

    background: var(--h-bg-dark);
    color: var(--h-text);
    font-family: var(--h-font);
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
}

/* =========================================================================
   Kopfbereich
   ========================================================================= */

/* Grosser Einstieg – nur auf /handbuch selbst. */
.hb-hero {
    position: relative;
    overflow: hidden;
    padding: 5rem 2rem 3rem;
    text-align: center;
}

.hb-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(var(--h-orange-rgb), 0.10), transparent 60%),
        radial-gradient(40rem 24rem at 80% 20%, rgba(74, 223, 175, 0.07), transparent 60%);
    pointer-events: none;
}

.hb-hero__inner {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
}

.hb-tagline {
    font-family: var(--h-mono);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--h-orange);
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 1.75rem;
}

/* Produkt-Umschalter – gleiche Pille wie in FAQ und Tutorials. */
.hb-product-switch {
    display: inline-flex;
    gap: 4px;
    background: var(--h-bg-elev);
    border: 1px solid var(--h-border-strong);
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 1.8rem;
}

.hb-product-switch__btn {
    display: inline-flex;
    align-items: center;
    padding: 0.35rem 1.1rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.3px;
    color: var(--h-text-sub);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.hb-product-switch__btn:hover:not(.is-active) {
    color: var(--h-text);
    background: rgba(255, 255, 255, 0.06);
    text-decoration: none;
}

.hb-product-switch__btn.is-active {
    background: var(--h-orange);
    color: #0B0D10;
    box-shadow: 0 2px 12px rgba(255, 140, 42, 0.35);
}

.hb-product-switch__btn--musea.is-active {
    background: #8B7BE8;
    color: #0B0D10;
    box-shadow: 0 2px 12px rgba(139, 123, 232, 0.4);
}

.hb-product-switch__btn--mergeqai.is-active {
    background: #2FA8C4;
    color: #0B0D10;
    box-shadow: 0 2px 12px rgba(47, 168, 196, 0.4);
}

.hb-hero__title {
    font-size: clamp(2.2rem, 5.5vw, 4.2rem);
    font-weight: 200;
    letter-spacing: -1px;
    line-height: 1.15;
    color: var(--h-text);
    margin: 0;
}

.hb-hero__title strong {
    font-weight: 600;
    color: var(--h-orange);
}

.hb-hero__sub {
    margin: 1.5rem auto 0;
    max-width: 620px;
    font-size: 1.05rem;
    color: var(--h-text-sub);
}

.hb-hero__logo {
    height: 1.1em;
    width: auto;
    vertical-align: -0.15em;
    margin: 0 0.1em;
}

.hb-hero__logo--musea { height: 1.35em; vertical-align: -0.3em; }

/* MergeQaiPro fuehrt keine Bildmarke — der Schriftzug steht als Wortmarke
   und uebernimmt den Akzent der jeweiligen Produktlinie. */
.hb-hero__wordmark {
    font-weight: 600;
    color: var(--h-orange);
    white-space: nowrap;
}

/* =========================================================================
   MuSéa-Variante (.hb--musea): violettes Akzent-Schema.
   Die Tokens werden umdefiniert, damit saemtliche Orange-Akzente der Seite
   mitziehen, ohne jede Regel zu verdoppeln.

   ========================================================================= */
.hb--musea {
    --h-orange:        #8B7BE8;
    --h-orange-bright: #B6A9F7;
    --h-orange-rgb:    139, 123, 232;
}

.hb--musea .hb-hero::before {
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(139, 123, 232, 0.12), transparent 60%),
        radial-gradient(40rem 24rem at 15% 20%, rgba(74, 223, 175, 0.07), transparent 60%);
}

/* =========================================================================
   MergeQaiPro-Variante (.hb--mergeqai): tuerkises Akzent-Schema.
   Dasselbe Prinzip wie bei MuSéa — nur die Tokens werden umdefiniert, damit
   saemtliche Orange-Akzente der Seite mitziehen, ohne eine einzige Regel zu
   verdoppeln. Das Tuerkis greift die Farbe auf, mit der das Programm selbst
   verschobene Bloecke markiert.
   ========================================================================= */
.hb--mergeqai {
    --h-orange:        #2FA8C4;
    --h-orange-bright: #6FCFE4;
    --h-orange-rgb:    47, 168, 196;
}

.hb--mergeqai .hb-hero::before {
    background:
        radial-gradient(60rem 30rem at 50% -10%, rgba(47, 168, 196, 0.12), transparent 60%),
        radial-gradient(40rem 24rem at 80% 20%, rgba(74, 223, 175, 0.07), transparent 60%);
}

.hb-stats {
    margin-top: 2rem;
    font-family: var(--h-mono);
    font-size: 0.82rem;
    color: var(--h-text-sub);
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}

.hb-stats strong {
    color: var(--h-text);
    font-weight: 600;
}

.hb-stats__sep { opacity: 0.4; }

.hb-stats__lang {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--h-mint);
}

/* Schlanke Zeile auf den Kapitelseiten – der grosse Hero wuerde bei jedem
   Kapitelwechsel erst einmal weggescrollt werden wollen. */
.hb-topbar {
    border-bottom: 1px solid var(--h-border);
    padding: 1.5rem 2rem 1rem;
}

.hb-topbar__inner {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: var(--h-mono);
    font-size: 0.82rem;
    flex-wrap: wrap;
}

.hb-topbar__back {
    color: var(--h-orange);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.15s ease;
}

.hb-topbar__back:hover { color: var(--h-orange-bright); }
.hb-topbar__sep { color: var(--h-text-sub); opacity: 0.5; }
.hb-topbar__here { color: var(--h-text-sub); }

/* =========================================================================
   Zweispaltiges Grundgeruest
   ========================================================================= */
.hb-body {
    max-width: 1280px;
    margin: 0 auto;
    padding: 2rem 2rem 6rem;
    display: grid;
    /* minmax(0,…) ist Pflicht: Ohne die 0 als Minimum weitet eine breite
       Tabelle die Spalte auf und schiebt die Seite waagerecht auf. */
    grid-template-columns: 272px minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

/* ---------- Kapitelverzeichnis ---------- */
.hb-nav {
    position: sticky;
    top: calc(var(--header-h, 4rem) + 1rem);
    max-height: calc(100vh - var(--header-h, 4rem) - 3rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: var(--h-bg-card);
    padding: 0.75rem;
}

/* Ab Tablet-Breite dient das <details> nur noch als Behaelter: keine
   Zusammenfassung, Liste immer sichtbar. Die zweite Regel faengt den Fall ab,
   dass jemand die Liste auf dem Telefon zuklappt und das Fenster danach
   aufzieht — sonst staende dort eine leere Leiste. */
.hb-nav__toggle { display: none; }
.hb-nav:not([open]) > .hb-nav__panel { display: block; }

.hb-nav__list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hb-nav__item {
    display: flex;
    gap: 0.6rem;
    align-items: baseline;
    padding: 0.42rem 0.6rem;
    border-radius: 6px;
    color: var(--h-text-sub);
    text-decoration: none;
    font-size: 0.88rem;
    line-height: 1.45;
    transition: background 0.15s ease, color 0.15s ease;
}

.hb-nav__item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--h-text);
}

.hb-nav__item.is-active {
    background: rgba(var(--h-orange-rgb), 0.10);
    color: var(--h-orange);
    font-weight: 500;
}

.hb-nav__nr {
    flex: 0 0 1.6em;
    font-family: var(--h-mono);
    font-size: 0.78em;
    opacity: 0.75;
    font-variant-numeric: tabular-nums;
}

.hb-nav__titel { min-width: 0; }

/* ---------- Inhaltsspalte ---------- */
.hb-content {
    min-width: 0;
    max-width: 900px;
}

.hb-content__title {
    font-size: clamp(1.8rem, 3.5vw, 2.6rem);
    font-weight: 300;
    letter-spacing: -0.5px;
    line-height: 1.2;
    margin: 0 0 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--h-border);
    color: var(--h-text);
}

/* =========================================================================
   Generierter Kapitelinhalt (.hb-doc)
   Ab hier greifen die Klassen aus _generator.py.
   ========================================================================= */

.hb-doc { font-size: 1rem; }

.hb-doc h2 {
    font-size: 1.45rem;
    font-weight: 500;
    color: var(--h-text);
    margin: 3rem 0 0.9rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--h-border);
    scroll-margin-top: calc(var(--header-h, 4rem) + 1rem);
}

.hb-doc h2:first-child { margin-top: 0; }

.hb-doc h3 {
    font-size: 1.08rem;
    font-weight: 600;
    color: var(--h-orange);
    margin: 2rem 0 0.5rem;
    scroll-margin-top: calc(var(--header-h, 4rem) + 1rem);
}

.hb-doc p { margin: 0.75em 0; }

.hb-doc a {
    color: var(--h-mint);
    text-decoration: none;
    border-bottom: 1px solid rgba(74, 223, 175, 0.3);
    transition: border-color 0.15s ease;
}

.hb-doc a:hover { border-bottom-color: var(--h-mint); }

.hb-doc strong { color: var(--h-text); font-weight: 600; }
.hb-doc em { color: var(--h-text); font-style: italic; }

.hb-doc ul, .hb-doc ol { margin: 0.75em 0; padding-left: 1.4em; }
.hb-doc li { margin: 0.3em 0; }

.hb-doc code {
    font-family: var(--h-mono);
    font-size: 0.86em;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    padding: 0.1em 0.4em;
    color: var(--h-text);
}

.hb-doc kbd {
    font-family: var(--h-font);
    font-size: 0.82em;
    background: var(--h-bg-elev);
    border: 1px solid var(--h-border-strong);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 0.08em 0.5em;
    color: var(--h-text);
    white-space: nowrap;
}

/* Namen von Schaltflaechen und Feldern. Kommt sehr oft vor — deshalb bewusst
   ruhig gehalten, sonst flackert der Fliesstext. */
.hb-doc .ui {
    display: inline-block;
    font-family: var(--h-mono);
    font-size: 0.84em;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--h-border);
    border-radius: 5px;
    padding: 0.05em 0.45em;
    color: var(--h-text);
    white-space: nowrap;
}

/* ---------- Schritt-fuer-Schritt-Listen ---------- */
.hb-doc ol.steps {
    counter-reset: s;
    list-style: none;
    padding-left: 0;
    margin: 1em 0;
}

.hb-doc ol.steps li {
    position: relative;
    padding: 0.35rem 0.5rem 0.35rem 2.9rem;
    margin: 0.55rem 0;
}

.hb-doc ol.steps li::before {
    counter-increment: s;
    content: counter(s);
    position: absolute;
    left: 0;
    top: 0.25rem;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: rgba(var(--h-orange-rgb), 0.14);
    border: 1px solid rgba(var(--h-orange-rgb), 0.35);
    color: var(--h-orange);
    font-family: var(--h-mono);
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- Tabellen ---------- */
/* Der Rahmen kommt aus dem Generator (.tbl-scroll). Vierspaltige Tabellen
   sprengen sonst jedes Telefon-Display. */
.hb-doc .tbl-scroll {
    overflow-x: auto;
    margin: 1.1em 0;
    border: 1px solid var(--h-border);
    border-radius: 8px;
    -webkit-overflow-scrolling: touch;
}

.hb-doc table.tbl {
    border-collapse: collapse;
    width: 100%;
    margin: 0;
    font-size: 0.9rem;
    background: var(--h-bg-card);
}

.hb-doc table.tbl th,
.hb-doc table.tbl td {
    border-bottom: 1px solid var(--h-border);
    border-right: 1px solid var(--h-border);
    padding: 0.6rem 0.8rem;
    text-align: left;
    vertical-align: top;
}

.hb-doc table.tbl th:last-child,
.hb-doc table.tbl td:last-child { border-right: none; }
.hb-doc table.tbl tbody tr:last-child td { border-bottom: none; }

.hb-doc table.tbl th {
    background: var(--h-bg-elev);
    color: var(--h-text);
    font-weight: 600;
    white-space: nowrap;
}

.hb-doc table.tbl tbody tr:nth-child(even) {
    background: rgba(255, 255, 255, 0.015);
}

/* ---------- Hinweiskaesten ---------- */
.hb-doc .cal {
    border-radius: 10px;
    padding: 0.9rem 1.15rem;
    margin: 1.25rem 0;
    border: 1px solid var(--h-border);
    border-left-width: 3px;
    background: var(--h-bg-card);
}

.hb-doc .cal-h {
    font-weight: 600;
    color: var(--h-text);
    margin-bottom: 0.15rem;
}

.hb-doc .cal-b { color: var(--h-text-sub); }
.hb-doc .cal-b p:first-child { margin-top: 0; }
.hb-doc .cal-b p:last-child { margin-bottom: 0; }

.hb-doc .cal-tip  { border-left-color: var(--h-tip); }
.hb-doc .cal-warn { border-left-color: var(--h-warn); }
.hb-doc .cal-info { border-left-color: var(--h-info); }
.hb-doc .cal-eval { border-left-color: var(--h-eval); }

.hb-doc .cal-tip  .cal-h { color: var(--h-tip); }
.hb-doc .cal-warn .cal-h { color: var(--h-warn); }
.hb-doc .cal-info .cal-h { color: var(--h-info); }
.hb-doc .cal-eval .cal-h { color: var(--h-eval); }

/* ---------- Screenshots ---------- */
.hb-doc figure.shot { margin: 1.5rem 0; }

.hb-doc .shot-img {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: var(--h-bg-card);
    cursor: zoom-in;
    transition: border-color 0.15s ease;
}

.hb-doc .shot-img:hover { border-color: var(--h-border-strong); }

/* Aufnahmen einzelner Dialogfenster laufen schmaler und mittig — ueber die
   volle Spaltenbreite gezogen wirken sie zu wuchtig. Die Hoehenbegrenzung
   faengt hochformatige Aufnahmen ab (aufgeklappte Kontextmenues), bei denen
   eine Breitenangabe allein nichts bringt. */
.hb-doc figure.shot.narrow { max-width: 62%; margin-left: auto; margin-right: auto; }
.hb-doc figure.shot.narrow .shot-img { max-height: 520px; width: auto; }

.hb-doc .shot-cap2 {
    margin: 0.55rem 0.15rem 0;
    font-size: 0.83rem;
    color: var(--h-text-sub);
    font-style: italic;
}

/* ---------- Glossar ---------- */
.hb-doc dl.gloss { margin: 1rem 0; }
.hb-doc dl.gloss dt { font-weight: 600; color: var(--h-orange); margin-top: 1rem; }
.hb-doc dl.gloss dd { margin: 0.15rem 0 0; color: var(--h-text-sub); }

/* ---------- Einleitung: Aufmacher und Werkzeug-Kacheln ---------- */
.hb-doc .hero {
    border: 1px solid var(--h-border);
    border-left: 3px solid var(--h-orange);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(var(--h-orange-rgb), 0.06), var(--h-bg-card));
    padding: 1.4rem 1.6rem;
    margin: 1rem 0;
}

.hb-doc .claim {
    display: inline-block;
    font-family: var(--h-mono);
    font-weight: 500;
    letter-spacing: 2px;
    color: var(--h-orange);
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.hb-doc .feat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 0.75rem;
    margin: 1.25rem 0;
}

.hb-doc .feat {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    gap: 0.15rem 0.7rem;
    padding: 0.85rem 1rem;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: var(--h-bg-card);
    text-decoration: none;
    color: var(--h-text);
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hb-doc .feat:hover {
    border-color: rgba(var(--h-orange-rgb), 0.35);
    background: var(--h-bg-elev);
}

.hb-doc .feat .fi { grid-row: 1 / span 2; font-size: 1.4rem; line-height: 1.2; }
.hb-doc .feat .ft { font-weight: 600; color: var(--h-text); }
.hb-doc .feat .fk { font-family: var(--h-mono); font-size: 0.72rem; color: var(--h-text-sub); font-weight: 400; }
.hb-doc .feat .fd { font-size: 0.86rem; color: var(--h-text-sub); }

/* =========================================================================
   Blaetterleiste
   ========================================================================= */
.hb-pager {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 4rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--h-border);
}

.hb-pager__spacer { flex: 1; }

.hb-pager__link {
    flex: 0 1 48%;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
    padding: 0.85rem 1.1rem;
    border: 1px solid var(--h-border);
    border-radius: 10px;
    background: var(--h-bg-card);
    text-decoration: none;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.hb-pager__link:hover {
    border-color: rgba(var(--h-orange-rgb), 0.35);
    background: var(--h-bg-elev);
}

.hb-pager__link--next { text-align: right; margin-left: auto; }

.hb-pager__dir {
    font-family: var(--h-mono);
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--h-orange);
}

.hb-pager__titel { color: var(--h-text); font-size: 0.95rem; }

/* =========================================================================
   Unbekanntes Kapitel
   ========================================================================= */
.hb-missing { padding: 2rem 0 4rem; }
.hb-missing h1 { font-size: 1.8rem; font-weight: 300; margin: 0 0 0.75rem; }
.hb-missing p { color: var(--h-text-sub); margin-bottom: 1.5rem; }

.hb-btn {
    display: inline-block;
    padding: 0.7rem 1.4rem;
    border-radius: 8px;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.hb-btn--primary {
    background: var(--h-orange);
    color: #0B0D10;
    font-weight: 600;
    border: 1px solid var(--h-orange);
}

.hb-btn--primary:hover { background: var(--h-orange-bright); border-color: var(--h-orange-bright); }

/* =========================================================================
   Vergroesserungsansicht (handbuch-zoom.js)
   ========================================================================= */
.hb-zoom {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(5, 6, 8, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.hb-zoom[hidden] { display: none; }

.hb-zoom__inner {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hb-zoom__img {
    max-width: 100%;
    max-height: calc(100vh - 4rem);
    width: auto;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}

.hb-zoom__close {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(18, 20, 26, 0.9);
    color: #E8E6E1;
    font-size: 1.1rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s ease;
}

.hb-zoom__close:hover { background: rgba(40, 44, 54, 0.95); }

/* Hintergrund still stellen, solange ein Bild offen ist. */
html.hb-zoom--offen { overflow: hidden; }

/* =========================================================================
   Schmalere Schirme
   ========================================================================= */

/* Ab hier verliert die stehende Leiste ihren Platz: Inhalt und Verzeichnis
   untereinander, das Verzeichnis wird aufklappbar. */
@media (max-width: 1024px) {
    .hb-body {
        grid-template-columns: minmax(0, 1fr);
        gap: 1.5rem;
        padding: 1.5rem 1.5rem 4rem;
    }

    .hb-nav {
        position: static;
        max-height: none;
        overflow: visible;
        padding: 0;
    }

    .hb-nav__toggle {
        display: flex;
        align-items: center;
        gap: 0.6rem;
        padding: 0.85rem 1rem;
        cursor: pointer;
        font-family: var(--h-mono);
        font-size: 0.82rem;
        text-transform: uppercase;
        letter-spacing: 2px;
        color: var(--h-orange);
        list-style: none;
    }

    .hb-nav__toggle::-webkit-details-marker { display: none; }

    .hb-nav__chevron {
        margin-left: auto;
        transition: transform 0.2s ease;
    }

    .hb-nav[open] .hb-nav__chevron { transform: rotate(180deg); }

    .hb-nav__panel {
        padding: 0 0.75rem 0.75rem;
        border-top: 1px solid var(--h-border);
        /* Das Verzeichnis startet offen (siehe Handbuch.razor). Ohne
           Hoehenbegrenzung schoeben 19 Kapitel den eigentlichen Inhalt weit
           nach unten — so bleibt es ein kompakter, scrollbarer Block. */
        max-height: 45vh;
        overflow-y: auto;
        overscroll-behavior: contain;
    }

    /* Zwei Spalten, damit 19 Kapitel nicht die halbe Seite fuellen. */
    .hb-nav__list {
        padding-top: 0.5rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: 0.1rem 1rem;
    }
}

@media (max-width: 860px) {
    .hb-hero { padding: 3.5rem 1.5rem 2.5rem; }
    .hb-topbar { padding: 1.25rem 1.5rem 0.85rem; }

    /* Schmale Aufnahmen duerfen jetzt die volle Breite nutzen — bei 62 %
       waeren sie auf einem Tablet kaum noch zu entziffern. */
    .hb-doc figure.shot.narrow { max-width: 100%; }
    .hb-doc figure.shot.narrow .shot-img { max-height: none; width: 100%; }
}

@media (max-width: 640px) {
    .hb-body { padding: 1.25rem 1rem 3rem; }
    .hb-hero { padding: 3rem 1.25rem 2rem; }
    .hb-hero__sub { font-size: 0.98rem; }
    .hb-topbar { padding: 1rem 1.25rem 0.75rem; }

    .hb-doc { font-size: 0.96rem; }
    .hb-doc h2 { font-size: 1.25rem; margin-top: 2.25rem; }
    .hb-doc h3 { font-size: 1rem; }

    /* Tabellen bleiben lesbar, statt auf Briefmarkengroesse zu schrumpfen —
       gescrollt wird waagerecht im Rahmen. */
    .hb-doc table.tbl { font-size: 0.84rem; }
    .hb-doc table.tbl th,
    .hb-doc table.tbl td { padding: 0.5rem 0.6rem; }

    .hb-pager { flex-direction: column; }
    .hb-pager__link { flex: 1 1 auto; }
    .hb-pager__link--next { text-align: left; margin-left: 0; }

    .hb-zoom { padding: 0.75rem; }
    .hb-zoom__close { top: 0.75rem; right: 0.75rem; }


    .hb-product-switch { margin-bottom: 1.4rem; }
    .hb-product-switch__btn { padding: 0.35rem 0.9rem; font-size: 0.78rem; }
}

@media (max-width: 480px) {
    .hb-nav__list { grid-template-columns: minmax(0, 1fr); }
    .hb-doc ol.steps li { padding-left: 2.5rem; }
    .hb-stats { font-size: 0.75rem; }
}

@media (prefers-reduced-motion: reduce) {
    .hb-nav__item,
    .hb-nav__chevron,
    .hb-pager__link,
    .hb-product-switch__btn,
    .hb-doc .feat,
    .hb-doc .shot-img,
    .hb-btn { transition: none; }

}