/* ============================================================
   RgWeb – Häfner Hunting
   Corporate Design: Weiß, Schwarz, dunkles Braun, Gold/Bronze
   ============================================================ */

:root {
    --hh-ink: #1c1712;
    --hh-ink-soft: #4a4238;
    --hh-muted: #857a69;
    --hh-bg: #f6f3ec;
    --hh-panel: #ffffff;
    --hh-line: #e6dfd0;
    --hh-brown: #5a4632;
    --hh-brown-dark: #3a2e20;
    --hh-gold: #a87e2f;
    --hh-gold-strong: #8a6423;
    --hh-gold-soft: #c9a45c;
    --hh-sidebar: #171310;
    --hh-sidebar-ink: #d8d0c2;
    --hh-danger: #a33a2a;
    --hh-success: #4c6b3c;
    /* Fokusmarkierung: gedecktes Gold auf hellem Grund (rund 3,7:1), helles Gold auf dem
       dunklen Grund der Seitenleiste (rund 8:1). Eine einzige Farbe reicht nicht – auf dem
       jeweils anderen Grund verschwände sie. */
    --hh-focus: var(--hh-gold);
    --hh-focus-invert: var(--hh-gold-soft);
    --hh-radius: 10px;
    --hh-shadow: 0 1px 2px rgba(28, 23, 18, .06), 0 8px 24px rgba(28, 23, 18, .05);
    --hh-font-display: Georgia, 'Times New Roman', serif;
    --hh-font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    font-family: var(--hh-font-body);
    background: var(--hh-bg);
    color: var(--hh-ink);
    font-size: 15px;
    line-height: 1.5;
}

h1, h2, h3 {
    font-family: var(--hh-font-display);
    font-weight: 600;
    color: var(--hh-ink);
    margin: 0 0 .5rem;
}

h1 { font-size: 1.7rem; letter-spacing: .02em; }
h2 { font-size: 1.25rem; }
h3 { font-size: 1.05rem; }

a { color: var(--hh-gold-strong); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------- Sichtbarer Fokus ----------
   Wer mit der Tabulatortaste arbeitet, muss sehen, wo er steht. Bisher zeigten nur
   Eingabefelder einen Fokus – Verweise, Schaltflächen und Navigationseinträge nicht.
   :focus-visible statt :focus: Der Browser markiert damit nur die Tastaturbedienung, ein
   Mausklick auf eine Schaltfläche hinterlässt keinen Rahmen. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 2px solid var(--hh-focus);
    outline-offset: 2px;
}

/* Ziel des Sprunglinks im MainLayout. Der Fokus landet hier auf Zuruf; ein Rahmen um den
   gesamten Inhaltsbereich sähe nach einem Fehler aus, deshalb bleibt er aus. Der Abstand
   nach oben hält den Sprung unterhalb der feststehenden Kopfleiste. */
.hh-content { scroll-margin-top: 4.5rem; }
.hh-content:focus, .hh-content:focus-visible { outline: none; }

/* ---------- Sprunglink ----------
   Nur sichtbar, solange er den Fokus trägt; sonst steht er außerhalb des Bildes, bleibt aber
   das erste anspringbare Element der Seite. */

.hh-skip-link {
    position: fixed;
    top: .6rem;
    left: .6rem;
    z-index: 1100;
    padding: .55rem 1.1rem;
    border-radius: 8px;
    background: var(--hh-ink);
    color: #f5efe2;
    font-size: .92rem;
    font-weight: 600;
    box-shadow: 0 6px 18px rgba(28, 23, 18, .35);
    transform: translateY(-300%);
    transition: transform .15s ease;
}

.hh-skip-link:focus { transform: translateY(0); }

.hh-skip-link:hover,
.hh-skip-link:focus { text-decoration: none; }

.hh-skip-link:focus-visible {
    outline: 2px solid var(--hh-focus-invert);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    .hh-skip-link { transition: none; }
}

/* ---------- Seitenkopf ---------- */

.hh-page-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.hh-page-header .hh-kicker {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--hh-gold);
    margin-bottom: .25rem;
}

.hh-page-header p { margin: .25rem 0 0; color: var(--hh-muted); }

/* ---------- Karten ---------- */

.hh-card {
    background: var(--hh-panel);
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow);
    padding: 1.25rem 1.4rem;
}

.hh-card + .hh-card { margin-top: 1rem; }

.hh-card-title {
    font-family: var(--hh-font-display);
    font-size: 1.05rem;
    margin: 0 0 .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--hh-line);
}

/* Kartenkopf mit Titel links und einem weiterführenden Verweis rechts. Die Trennlinie zieht
   der Kopf über die volle Breite – der Titel darin führt deshalb keine eigene. */
.hh-card-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    margin-bottom: .75rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--hh-line);
}

.hh-card-head .hh-card-title {
    margin: 0;
    padding-bottom: 0;
    border-bottom: 0;
}

/* ---------- KPI-Kacheln ---------- */

.hh-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.hh-kpi {
    background: var(--hh-panel);
    border: 1px solid var(--hh-line);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow);
    padding: 1rem 1.2rem;
    border-top: 3px solid var(--hh-gold);
}

/* Beschriftung der Kachel – sie benennt die Kennzahl und ist damit ihr wichtigster Text.
   --hh-ink-soft statt --hh-muted: bei .72rem gilt die AA-Grenze von 4,5:1, und --hh-muted
   erreicht auf dem weißen Grund nur 4,2:1 (keine neue Farbe, nur der dunklere Ton). */
.hh-kpi .hh-kpi-label {
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--hh-ink-soft);
}

.hh-kpi .hh-kpi-value {
    font-family: var(--hh-font-display);
    font-size: 1.8rem;
    line-height: 1.2;
    margin-top: .15rem;
}

.hh-kpi.hh-kpi-alert { border-top-color: var(--hh-danger); }
.hh-kpi.hh-kpi-alert .hh-kpi-value { color: var(--hh-danger); }

/* Kachel, die zugleich ein Verweis ist. Als echtes <a> ist sie mit der Tastatur erreichbar und
   lässt sich in einem neuen Reiter öffnen; die Schattierung beim Überfahren tritt an die Stelle
   der Unterstreichung. Die Randfarbe bleibt unberührt, sonst verlöre die Warnkachel ihren
   roten Kopfstrich. */
.hh-kpi-link {
    display: block;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease;
}

.hh-kpi-link:hover,
.hh-kpi-link:focus-visible {
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(28, 23, 18, .08), 0 12px 28px rgba(28, 23, 18, .10);
}

/* ---------- Tabellen ---------- */

.hh-table-wrap { overflow-x: auto; }

table.hh-table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}

table.hh-table th {
    text-align: left;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hh-muted);
    padding: .55rem .75rem;
    border-bottom: 2px solid var(--hh-line);
    white-space: nowrap;
}

table.hh-table td {
    padding: .6rem .75rem;
    border-bottom: 1px solid var(--hh-line);
    vertical-align: middle;
}

table.hh-table tbody tr:hover { background: #faf7f0; }
table.hh-table td.hh-num, table.hh-table th.hh-num { text-align: right; white-space: nowrap; }

/* Zeile, die als Ganzes zu einem Datensatz führt. Der Verweis in der Zeile bleibt der
   eigentliche Bedienweg – nur so ist der Datensatz auch mit der Tastatur erreichbar; die
   Klasse sorgt lediglich dafür, dass die Zeile anklickbar aussieht. :focus-within hebt die
   Zeile auch dann hervor, wenn ihr Verweis über die Tabulatortaste erreicht wurde. */
.hh-row-link { cursor: pointer; }

.hh-row-link:hover,
.hh-row-link:focus-within,
table.hh-table tbody tr.hh-row-link:hover,
table.hh-table tbody tr.hh-row-link:focus-within { background: #f3ebda; }

/* In Ruhe trägt der Verweis die Textfarbe und keine Unterstreichung – sonst wäre eine Liste
   mit hundert Zeilen ein Streifenmuster. Beim Überfahren und beim Anwandern mit der Tastatur
   zeigt er dann, dass er ein Verweis ist. */
.hh-row-link a,
a.hh-row-link,
.hh-cell-link { color: inherit; text-decoration: none; }

.hh-cell-link { font-weight: 600; }

.hh-row-link a:hover,
a.hh-row-link:hover,
.hh-cell-link:hover,
.hh-cell-link:focus-visible { color: var(--hh-gold-strong); text-decoration: underline; }

a.hh-row-link { display: block; }

/* ---------- Badges ---------- */

.hh-badge {
    display: inline-block;
    padding: .15rem .6rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .04em;
    background: #efe9db;
    color: var(--hh-brown);
}

.hh-badge.gold { background: #f3e8d2; color: var(--hh-gold-strong); }
.hh-badge.green { background: #e4ecdd; color: var(--hh-success); }
.hh-badge.red { background: #f4ddd8; color: var(--hh-danger); }
.hh-badge.dark { background: var(--hh-brown-dark); color: #f0e9dc; }

/* ---------- Buttons ---------- */

.hh-btn {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem 1.05rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-family: var(--hh-font-body);
    font-size: .9rem;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none !important;
    transition: background .15s ease, border-color .15s ease;
}

.hh-btn-primary {
    background: var(--hh-gold);
    color: #fff;
}
.hh-btn-primary:hover { background: var(--hh-gold-strong); }

.hh-btn-dark {
    background: var(--hh-ink);
    color: #f0e9dc;
}
.hh-btn-dark:hover { background: var(--hh-brown-dark); }

.hh-btn-ghost {
    background: transparent;
    color: var(--hh-ink-soft);
    border-color: var(--hh-line);
}
.hh-btn-ghost:hover { border-color: var(--hh-gold); color: var(--hh-gold-strong); }

.hh-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Zusätzliche Schaltfläche in einer Tabellenzeile (z. B. „Bearbeiten“): kleiner als eine
   Schaltfläche im Seitenkopf, damit sie die Zeilenhöhe nicht auseinanderzieht. Sie steht
   bewusst NACH .hh-btn – beide Regeln wiegen gleich schwer, die spätere gewinnt. */
.hh-row-action {
    padding: .28rem .7rem;
    font-size: .82rem;
}

/* Zeile mit Schaltflächen und Verweisen – etwa über einer Tabelle oder am Fuß einer Karte.
   Sie bricht um, damit auf schmalen Bildschirmen keine Schaltfläche aus dem Bild rutscht. */
.hh-quick-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem;
}

/* ---------- Formulare ---------- */

.hh-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .9rem 1.1rem;
}

.hh-field label {
    display: block;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--hh-muted);
    margin-bottom: .25rem;
}

.hh-field input,
.hh-field select,
.hh-field textarea {
    width: 100%;
    padding: .5rem .65rem;
    border: 1px solid var(--hh-line);
    border-radius: 8px;
    background: #fff;
    color: var(--hh-ink);
    font-family: var(--hh-font-body);
    font-size: .92rem;
}

/* Eingabefelder zeigen den Fokus auch bei Mausbedienung – dort ist der Rahmen ein Hinweis
   darauf, wohin die Tastatur schreibt, und nicht nur eine Wegmarke. Die Farbe ist dieselbe
   wie bei allen übrigen Fokusmarkierungen; das gedeckte Gold hebt sich vom weißen Feld
   deutlicher ab als das helle. */
.hh-field input:focus,
.hh-field select:focus,
.hh-field textarea:focus {
    outline: 2px solid var(--hh-focus);
    outline-offset: 0;
    border-color: var(--hh-gold);
}

/* ---------- Schalter (z. B. Kleinunternehmerregelung) ---------- */

.hh-switch {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    cursor: pointer;
    user-select: none;
    position: relative;
}

/* Das Kontrollkästchen liegt unsichtbar hinter dem Schalter – aber NICHT auf „display: none“:
   Ein ausgeblendetes Feld nimmt an der Tabulatorreihenfolge nicht teil, der Schalter ließe sich
   dann ausschließlich mit der Maus bedienen. So bleibt er mit der Leertaste schaltbar und sagt
   seinen Zustand an. */
.hh-switch input {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: 0;
    padding: 0;
    border: 0;
    opacity: 0;
}

/* Der eigene Rahmen des unsichtbaren Feldes wäre nicht zu sehen – zeigen muss den Fokus
   die sichtbare Bahn des Schalters. */
.hh-switch input:focus,
.hh-switch input:focus-visible { outline: none; }

.hh-switch input:focus-visible + .hh-switch-track {
    outline: 2px solid var(--hh-focus);
    outline-offset: 3px;
}

.hh-switch .hh-switch-track {
    width: 46px;
    height: 24px;
    border-radius: 999px;
    background: #d6cdba;
    position: relative;
    transition: background .15s ease;
    flex: none;
}

.hh-switch .hh-switch-track::after {
    content: "";
    position: absolute;
    top: 3px; left: 3px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #fff;
    transition: left .15s ease;
}

.hh-switch input:checked + .hh-switch-track { background: var(--hh-gold); }
.hh-switch input:checked + .hh-switch-track::after { left: 25px; }

/* ---------- Hinweise ---------- */

.hh-note {
    border-left: 3px solid var(--hh-gold);
    background: #faf5ea;
    padding: .7rem 1rem;
    border-radius: 0 8px 8px 0;
    font-size: .9rem;
    color: var(--hh-ink-soft);
    margin: .75rem 0;
}

.hh-note.warn { border-left-color: var(--hh-danger); background: #f9efec; }

.hh-empty {
    color: var(--hh-muted);
    text-align: center;
    padding: 1.5rem 0;
    font-style: italic;
}

/* Leerer Zustand mit Ausweg: Er sagt nicht nur, dass nichts da ist, sondern nennt den
   nächsten Handgriff und bietet ihn als Schaltfläche an. */
.hh-empty-state {
    text-align: center;
    color: var(--hh-ink-soft);
    padding: 1.75rem .5rem 1.5rem;
}

.hh-empty-state p {
    margin: 0 auto;
    max-width: 52ch;
}

.hh-empty-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    margin-top: 1.1rem;
}

/* ---------- Marke ---------- */

/* Wortbildmarke (Bogen, Büffelschädel, Schriftzug) – für helle Flächen. */
.hh-logo {
    display: block;
    width: 220px;
    max-width: 100%;
    height: auto;
}

/* Bildmarke ohne Schriftzug – für Kacheln, Kopfzeilen und kleine Größen. */
.hh-logo-mark {
    display: block;
    width: 44px;
    height: auto;
    flex: none;
}

/* ---------- Anmeldung ---------- */

.hh-login {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem 1rem;
    background: var(--hh-sidebar);
    background-image: radial-gradient(circle at 50% -10%, rgba(168, 126, 47, .22), transparent 62%);
}

.hh-login-card {
    width: 100%;
    max-width: 400px;
    padding: 2rem;
}

.hh-login-brand {
    text-align: center;
    margin-bottom: 1.6rem;
}

.hh-login-logo {
    display: block;
    width: min(290px, 92%);
    height: auto;
    margin: 0 auto 1rem;
}

.hh-login-kicker {
    font-size: .68rem;
    font-weight: 600;
    letter-spacing: .26em;
    text-transform: uppercase;
    color: var(--hh-muted);
}

/* ---------- Blazor-Fehlerleiste ---------- */

#blazor-error-ui {
    color-scheme: light only;
    background: var(--hh-brown-dark);
    color: #f0e9dc;
    bottom: 0;
    box-shadow: 0 -1px 4px rgba(0, 0, 0, .3);
    display: none;
    left: 0;
    padding: .6rem 1.25rem .7rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: .75rem;
    top: .5rem;
}

.blazor-error-boundary {
    background: var(--hh-danger);
    padding: 1rem;
    color: #fff;
    border-radius: var(--hh-radius);
}

.blazor-error-boundary::after { content: "Es ist ein Fehler aufgetreten." }

/* ---------- Navigation 2026-09 – Dashboard ---------- */

/* Kurzhinweis unter der Zahl einer Aufgabenkachel: sagt, was zu tun ist bzw. was gezählt wird.
   Farbe --hh-ink-soft und nicht --hh-muted: Auf dem weißen Grund der Kachel erreicht --hh-muted
   nur 4,2:1 und bleibt damit unter der Grenze von 4,5:1 für normal großen Text (WCAG AA) –
   gerade der handlungsleitende Hinweis wäre der am schlechtesten lesbare Text der Kachel.
   --hh-ink-soft erreicht 9,9:1; eine neue Farbe kommt nicht hinzu. Gedämpft wirkt er über
   Schriftgröße und Stellung, nicht über zu wenig Kontrast. */
.hh-kpi .hh-kpi-hint {
    font-size: .8rem;
    color: var(--hh-ink-soft);
    margin-top: .25rem;
}

/* „Was ansteht“: eine Liste ohne Aufzählungszeichen – Anzahl als Badge, Klartext, rechts der
   Verweis „Weiter →“. Die Reihenfolge im DOM ist die Lesereihenfolge und damit die
   Tabulatorreihenfolge: erst die Zeile, dann ihre Einzelfälle. */
.hh-todo {
    list-style: none;
    margin: 0;
    padding: 0;
}

.hh-todo-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: baseline;
    gap: .35rem .75rem;
    padding: .6rem 0;
    border-bottom: 1px solid var(--hh-line);
}

.hh-todo-row:last-child { border-bottom: 0; }

.hh-todo-row .hh-badge { min-width: 2.2rem; text-align: center; }

/* Zusatz in einer Zeile („davon 3 über das Gültig-bis-Datum hinaus“) – wie beim Kurzhinweis der
   Kachel --hh-ink-soft statt --hh-muted (4,2:1 auf Weiß, unter der AA-Grenze). */
.hh-todo-addendum { color: var(--hh-ink-soft); }

.hh-todo-next {
    font-weight: 600;
    white-space: nowrap;
}

/* Einzelfälle unter einer Zeile: gedämpft, kleiner, in der Textspalte eingerückt. */
.hh-todo-items {
    grid-column: 2 / -1;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: .88rem;
    color: var(--hh-ink-soft);
}

.hh-todo-items li { padding: .12rem 0; }

/* Der Verweis trägt die Textfarbe der Liste (sonst wäre die Zeile ein Farbstreifen), muss aber
   in Ruhe erkennbar bleiben: In derselben Zeile steht ein nicht verlinkter Zusatz, und ohne
   Auszeichnung wären beide pixelgleich – ein Verweis nur an der Mausbewegung erkennbar (WCAG
   1.4.1, Technik F73). Deshalb die Unterstreichung in der Textfarbe; Farbe allein reicht nicht. */
.hh-todo-items a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: .15em;
}

.hh-todo-items a:hover,
.hh-todo-items a:focus-visible { color: var(--hh-gold-strong); }

/* Mehrere Verweise rechts im Kartenkopf („Alle Reisen“, „Kalender“). */
.hh-card-links {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 1rem;
}

@media (max-width: 600px) {
    .hh-todo-row { grid-template-columns: auto 1fr; }
    .hh-todo-next { grid-column: 2; }
}

/* ---------- Navigation 2026-09 – Reiterleisten und Sammelseiten ---------- */

/* Reiterleiste eines Bereichs (SectionNav), direkt unter dem Seitenkopf: eine Pillenreihe wie die
   Sprungleiste des Handbuchs (.hh-help-jump). Der aktive Reiter trägt den dunklen Grund der Marke –
   dieselben Werte wie .hh-badge.dark, es kommt keine neue Farbe hinzu. Die Reiter sind echte
   Verweise; der Fokusrahmen ist derselbe wie überall auf hellem Grund. */
.hh-section-tabs { margin: -.25rem 0 1.25rem; }

.hh-section-tabs ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
}

.hh-section-tabs a {
    display: inline-block;
    padding: .3rem .8rem;
    border: 1px solid var(--hh-line);
    border-radius: 999px;
    background: var(--hh-panel);
    font-size: .82rem;
    font-weight: 600;
    color: var(--hh-brown);
    text-decoration: none;
}

.hh-section-tabs a:hover {
    border-color: var(--hh-gold);
    color: var(--hh-gold-strong);
    text-decoration: none;
}

.hh-section-tabs a.active {
    background: var(--hh-brown-dark);
    border-color: var(--hh-brown-dark);
    color: #f0e9dc;
}

.hh-section-tabs a:focus-visible {
    outline: 2px solid var(--hh-focus);
    outline-offset: 2px;
}

/* Seitenleiste: Der Zählerkreis des aktuellen Ablaufschritts wechselt auf Gold. Die Regel steht
   hier und nicht in NavMenu.razor.css, weil sie :has() braucht (die Isolation soll den Selektor
   nicht umschreiben müssen) und ohne Scope auskommt; ohne :has() bleibt der Kreis dunkel – die
   Hervorhebung des Verweises selbst genügt. Höhere Spezifität als die Grundregel der isolierten
   Datei, deshalb gewinnt sie unabhängig von der Ladereihenfolge. */
.hh-nav-steps li:has(> .hh-nav-link.active)::before {
    background: var(--hh-gold);
    color: var(--hh-sidebar);
}

/* Sammelseiten (Stammdaten, Administration): Kachelgruppen mit h2-Zwischenüberschrift. */
.hh-hub-group + .hh-hub-group { margin-top: 1.75rem; }

.hh-hub-group-title {
    font-size: 1.1rem;
    margin: 0 0 .75rem;
    padding-bottom: .4rem;
    border-bottom: 1px solid var(--hh-line);
}

/* auto-fill statt auto-fit: Leere Spuren bleiben stehen, damit eine Gruppe mit zwei Kacheln
   dieselbe Kachelbreite hat wie eine mit fünf – sonst wären zwei Kacheln halbseitenbreit. */
.hh-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

/* Kachel als echter Verweis – gestaltet wie eine KPI-Kachel (Panel, Linie, goldener Kopfstrich)
   mit der Schattierung von .hh-kpi-link beim Überfahren und beim Anwandern mit der Tastatur. */
.hh-hub-tile {
    display: block;
    background: var(--hh-panel);
    border: 1px solid var(--hh-line);
    border-top: 3px solid var(--hh-gold);
    border-radius: var(--hh-radius);
    box-shadow: var(--hh-shadow);
    padding: 1rem 1.2rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow .15s ease;
}

.hh-hub-tile:hover,
.hh-hub-tile:focus-visible {
    text-decoration: none;
    box-shadow: 0 2px 4px rgba(28, 23, 18, .08), 0 12px 28px rgba(28, 23, 18, .10);
}

.hh-hub-tile h3 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
}

.hh-hub-tile:hover h3,
.hh-hub-tile:focus-visible h3 { color: var(--hh-gold-strong); }

.hh-hub-tile p {
    margin: 0;
    font-size: .88rem;
    line-height: 1.45;
    color: var(--hh-ink-soft);
}

/* ---------- Anleitung 2026-09 ----------
   Die Seite /anleitung ist eine durchgehende Handlungsanweisung: nummerierte Schritte von der
   leeren Installation bis zur bezahlten Rechnung. Sie ist bewusst lang und wird oft ausgedruckt –
   deshalb gehören hier zwei Dinge zusammen: eine ruhige Bildschirmgestaltung aus vorhandenen
   Bausteinen (hh-card, hh-note, hh-btn) und eine eigene Druckansicht weiter unten.
   Neue Farben kommen nicht hinzu; alles läuft über die --hh-*-Tokens. */

/* Sprungleiste der fünf Teile – dieselbe Pillenreihe wie im Handbuch (.hh-help-jump) und in den
   Reiterleisten (.hh-section-tabs), nur mit der Teilnummer im Kreis davor. */
.hh-guide-jump {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: 1.5rem;
}

.hh-guide-jump a {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .35rem .9rem .35rem .4rem;
    border: 1px solid var(--hh-line);
    border-radius: 999px;
    background: var(--hh-panel);
    font-size: .85rem;
    font-weight: 600;
    color: var(--hh-brown);
    text-decoration: none;
}

.hh-guide-jump a:hover {
    border-color: var(--hh-gold);
    color: var(--hh-gold-strong);
    text-decoration: none;
}

.hh-guide-jump a:focus-visible {
    outline: 2px solid var(--hh-focus);
    outline-offset: 2px;
}

/* Teilnummer im Kreis – dieselben Werte wie .hh-help-step .hh-help-num im Handbuch. */
.hh-guide-jump .hh-guide-part {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--hh-brown-dark);
    color: #f0e9dc;
    font-family: var(--hh-font-display);
    font-size: .8rem;
}

.hh-guide-jump .hh-guide-range {
    color: var(--hh-muted);
    font-weight: 400;
}

/* Der Hinweis auf die Druckansicht über dem Stapel. Auf Papier ist er sinnlos und steht deshalb
   unten in der Druckansicht auf „ausgeblendet“. */
.hh-guide-hint { margin: 0 0 1.25rem; }

/* Der Stapel: Teilköpfe und Schrittkarten in einer Spalte. Die Breite ist bewusst begrenzt –
   über 70 Zeichen je Zeile liest niemand eine Anleitung zu Ende. */
.hh-guide-stack {
    display: grid;
    gap: 1rem;
    max-width: 62rem;
}

/* Kopf eines Teils: dunkler Balken mit Teilnummer, Titel und einem Satz zur Absicht. Er ist
   Sprungziel (tabindex="-1"), deshalb ohne Fokusrahmen – ein Rahmen um einen ganzen Balken sähe
   nach einem Fehler aus. */
.hh-guide-part-head {
    margin-top: 1.25rem;
    padding: 1rem 1.3rem;
    border-radius: var(--hh-radius);
    background: var(--hh-brown-dark);
    color: #f0e9dc;
    scroll-margin-top: 4.5rem;
}

.hh-guide-part-head:first-child { margin-top: 0; }
.hh-guide-part-head:focus { outline: none; }

.hh-guide-part-head h2 {
    margin: 0;
    color: #fdfbf6;
    font-size: 1.3rem;
}

.hh-guide-part-head .hh-guide-part-kicker {
    display: block;
    margin-bottom: .15rem;
    font-family: var(--hh-font-body);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hh-gold-soft);
}

.hh-guide-part-head p {
    margin: .45rem 0 0;
    font-size: .9rem;
    line-height: 1.5;
    color: #ded5c5;
}

/* Eine Schrittkarte. Sprungziel für die Querverweise („gebraucht in Schritt 57“). */
.hh-guide-step { scroll-margin-top: 4.5rem; }
.hh-guide-step:focus { outline: none; }

.hh-guide-step .hh-card-title {
    display: flex;
    align-items: baseline;
    gap: .6rem;
}

/* Die durchlaufende Schrittnummer. Sie ist der Merkpunkt („ich war bei 34“) und steht deshalb
   auch im Ausdruck vor dem Titel. */
.hh-guide-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: #f3e8d2;
    color: var(--hh-gold-strong);
    font-family: var(--hh-font-display);
    font-size: .95rem;
    line-height: 1;
}

.hh-guide-step h3 {
    margin: 1rem 0 .3rem;
    font-size: .98rem;
    color: var(--hh-brown-dark);
}

.hh-guide-step ol,
.hh-guide-step ul {
    margin: .4rem 0 0;
    padding-left: 1.35rem;
}

.hh-guide-step li { margin-bottom: .35rem; }

.hh-guide-step ol li::marker {
    font-weight: 700;
    color: var(--hh-gold-strong);
}

.hh-guide-step p + p { margin-top: .5rem; }

.hh-guide-step code {
    font-size: .85em;
    padding: .05rem .3rem;
    border-radius: 4px;
    background: #f3efe6;
}

/* „Vorher nötig:“ / „Kann warten:“ – die Einordnung eines Anlage-Schritts in die Kette der
   Stammdaten (Teil 2), über dem „Wo:“. Dieselbe gedämpfte Stimme wie der Weg, aber ohne dessen
   Trennlinie: Die Linie unter „Wo:“ schließt den ganzen Vorspann der Karte ab. */
.hh-guide-placement {
    margin: 0 0 .35rem;
    font-size: .88rem;
    color: var(--hh-ink-soft);
}

/* „Wo:“ – der Weg durch die Navigation. Gedämpft, aber lesbar: --hh-ink-soft erreicht auf
   weißem Grund 9,9:1, --hh-muted wäre bei dieser Größe zu blass. */
.hh-guide-where {
    margin: 0 0 .6rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--hh-line);
    font-size: .88rem;
    color: var(--hh-ink-soft);
}

/* „Sie sehen jetzt:“ – der Prüfpunkt. Grüner Streifen links, damit das Auge ihn ohne Lesen
   findet; dieselbe Bauform wie .hh-note, nur ohne Kasten. */
.hh-guide-check {
    margin: .9rem 0 0;
    padding: .5rem .8rem;
    border-left: 3px solid var(--hh-success);
    border-radius: 0 6px 6px 0;
    background: #f2f6ee;
    font-size: .92rem;
}

/* „Gebraucht in …“ – der Verweis einer Anlage aus Teil 1 oder 2 auf den Schritt des Vorgangs,
   der sie braucht. */
.hh-guide-needed {
    margin: .9rem 0 0;
    font-size: .88rem;
    color: var(--hh-ink-soft);
}

.hh-guide-step .hh-note { margin-top: .9rem; }

/* Randfälle in einer Klappe. NUR für Randfälle – ein Schritt des Hauptwegs gehört nie hinein,
   weil eine geschlossene Klappe im Ausdruck unsichtbar wäre (siehe Druckansicht unten). */
.hh-guide-step details {
    margin-top: .9rem;
    border: 1px solid var(--hh-line);
    border-radius: 8px;
    background: #fbf9f4;
}

.hh-guide-step summary {
    padding: .5rem .8rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--hh-brown);
    cursor: pointer;
}

.hh-guide-step details > div {
    padding: 0 .8rem .7rem;
    font-size: .92rem;
}

/* Prüfliste in Teil 5: Kästchen als Zeichen, kein Formular. Bewusst kein Ankreuzfeld – die Seite
   ist statisch gerendert, ein Häkchen wäre nach dem nächsten Laden wieder weg und würde ein
   Gedächtnis vortäuschen, das es nicht gibt. Angehakt wird auf dem Ausdruck. */
.hh-guide-checklist {
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
}

.hh-guide-checklist li {
    display: grid;
    grid-template-columns: 1.4rem 1fr;
    gap: .5rem;
    margin: 0;
    padding: .4rem 0;
    border-bottom: 1px solid var(--hh-line);
    font-size: .92rem;
}

.hh-guide-checklist li:last-child { border-bottom: 0; }

.hh-guide-checklist li::before {
    content: "\2610";
    color: var(--hh-gold-strong);
    font-size: 1.1rem;
    line-height: 1.2;
}

/* Der Hinweis auf /anleitung oben im Handbuch: goldener Rand statt neuer Farbe. */
.hh-guide-callout { border-left: 4px solid var(--hh-gold); }
.hh-guide-callout .hh-btn { margin-top: .8rem; }

/* ---------- Kundenportal 2026-09 ----------
   Gemeinsame Regeln der drei Portalseiten (Angebot, Präparationsauftrag, Rechnung). Sie stehen
   hier und nicht dreimal im Stilblock der jeweiligen Seite: Was auf allen dreien gleich aussehen
   soll, darf nicht an drei Stellen gepflegt werden. Ausschließlich vorhandene --hh-*-Tokens. */

/* Zeile mit dem Verweis „Als PDF herunterladen“ unter dem Belegkopf. Sie steht bewusst weit
   oben: Der Kunde soll den Beleg speichern und ausdrucken können, ohne erst die ganze Seite
   durchzuscrollen. */
.hh-portal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 0 0 1rem;
}

/* Verbuchte Zahlungseingänge. Bewusst eine Liste und keine Tabelle: Die Zeilen kommen fertig
   formatiert aus dem Dokumentmodell („Anzahlung vom 15.01.2026: -2.000,00 €“) – sie in Spalten zu
   zerlegen hieße, die Schreibweise ein zweites Mal festzulegen. */
.hh-portal-payments {
    list-style: none;
    margin: .5rem 0 0;
    padding: 0;
}

.hh-portal-payments li {
    padding: .45rem 0;
    border-bottom: 1px solid var(--hh-line);
    font-size: .92rem;
    color: var(--hh-ink-soft);
}

.hh-portal-payments li:last-child { border-bottom: 0; }

/* Der noch offene Betrag – die Frage, wegen der der Kunde sonst anruft. Deshalb als eigener,
   hervorgehobener Block und nicht als weitere Zeile im Summenblock. */
.hh-portal-open {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .35rem 1rem;
    margin-top: .9rem;
    padding: .8rem 1rem;
    border: 1px solid var(--hh-gold-soft);
    border-radius: var(--hh-radius);
    background: #faf5ea;
}

/* --hh-ink-soft statt --hh-muted: Bei .74rem (rund 11,8 px) gilt die AA-Grenze von 4,5:1, und
   --hh-muted erreicht auf dem cremefarbenen Grund dieses Blocks nur 3,9:1 – die Beschriftung der
   wichtigsten Zahl der Seite wäre damit ihr am schlechtesten lesbarer Text. Dasselbe Muster wie
   bei .hh-kpi-label, .hh-kpi-hint und .hh-todo-addendum; keine neue Farbe. */
.hh-portal-open span {
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--hh-ink-soft);
}

.hh-portal-open strong {
    font-family: var(--hh-font-display);
    font-size: 1.35rem;
    color: var(--hh-gold-strong);
    white-space: nowrap;
}

/* ---------- Anleitung 2026-09 · Druckansicht ----------
   Die Anleitung wird ausgedruckt und neben die Tastatur gelegt. Gedruckt wird deshalb nur der
   Inhalt: Sprunglink, Seitenleiste, Kopfzeile, Sprungleiste und Reiterleiste bleiben weg.

   WARUM !important: .hh-sidebar, .hh-topbar, .hh-shell, .hh-main und .hh-content stehen in den
   isolierten Dateien NavMenu.razor.css und MainLayout.razor.css. Die CSS-Isolation hängt dort ein
   Attribut an den Selektor ([b-…]); deren Regeln sind damit höher spezifisch als eine Klasse aus
   app.css – ohne !important gewänne „display: flex“ und die Navigation stünde im Ausdruck. */
@media print {
    .hh-skip-link,
    .hh-sidebar,
    .hh-nav-toggle,
    .hh-topbar { display: none !important; }

    .hh-shell { display: block !important; min-height: 0 !important; }
    .hh-main { display: block !important; }

    .hh-content {
        padding: 0 !important;
        max-width: none !important;
    }

    html, body {
        background: #ffffff !important;
        font-size: 10.5pt;
    }

    /* Sprungleiste, Reiterleiste, der Hinweis auf das Drucken und der Verweis auf das PDF sind
       Bedienelemente bzw. gelten nur am Bildschirm – auf Papier ohne Wirkung. */
    .hh-guide-jump,
    .hh-guide-hint,
    .hh-guide-download,
    .hh-section-tabs { display: none !important; }

    .hh-guide-stack { max-width: none; }

    /* Eine Schrittkarte gehört auf eine Seite: Ein Prüfpunkt auf der Rückseite seiner Klickfolge
       ist beim Abarbeiten wertlos. Der Teilkopf bleibt bei seiner ersten Karte. */
    .hh-guide-step,
    .hh-guide-part-head,
    .hh-guide-check,
    .hh-guide-step .hh-note,
    .hh-guide-checklist li { break-inside: avoid; }

    .hh-guide-part-head { break-after: avoid; }

    .hh-guide-step .hh-card-title,
    .hh-guide-step h3 { break-after: avoid; }

    .hh-guide-step {
        box-shadow: none;
        border: 1px solid #cfc7b8;
    }

    /* Der dunkle Teilbalken würde eine halbe Patrone Toner kosten – auf Papier ein Rahmen. */
    .hh-guide-part-head {
        background: #ffffff !important;
        border: 2px solid #3a2e20;
    }

    .hh-guide-part-head h2 { color: #1c1712 !important; }
    .hh-guide-part-head p { color: #4a4238 !important; }
    .hh-guide-part-head .hh-guide-part-kicker { color: #5a4632 !important; }

    .hh-guide-num {
        background: #ffffff !important;
        border: 1px solid #cfc7b8;
    }

    /* Randfälle in Klappen aufklappen. Zwei Regeln, weil die Browser den verborgenen Teil
       unterschiedlich verstecken: älter über den Anzeigemodus der Kinder, neuer über
       ::details-content mit content-visibility. Bleibt eine Klappe trotzdem zu, fehlt im Ausdruck
       nur ein Randfall – genau deshalb steht dort nie ein Schritt des Hauptwegs. */
    .hh-guide-step details > div { display: block !important; }
    .hh-guide-step details::details-content { content-visibility: visible !important; }

    /* Ziel eines Verweises als Klartext dahinter – auf Papier ist ein Verweis sonst eine
       Sackgasse. Nur INNERHALB der Anleitung, und nur für Verweise auf andere Seiten: Die
       Sprungmarken der Anleitung selbst (anleitung#schritt-57) tragen die Schrittnummer schon
       im Verweistext, eine Adresse dahinter blähte den Satz nur auf. */
    .hh-guide-step a[href]:not([href*="#"])::after {
        content: " (" attr(href) ")";
        font-size: .85em;
        color: #4a4238;
        word-break: break-all;
    }
}

/* ============================================================
   Einrichtung 2026-09 · Hinweise an leeren Auswahlfeldern
   ============================================================
   Ein leeres Auswahlfeld sagt, was fehlt und wo es entsteht (Komponente EmptyChoiceHint). Der
   Hinweis steht unter dem Feld, in der Schrift eines Feldhinweises, und nicht als Kasten über
   allem – er erscheint nur, wenn die Quelle des Feldes tatsächlich leer ist.
   .hh-field-hint stammt aus dem Präparationsauftrag (dort noch als seitenlokale Regel) und gilt
   damit auf allen Seiten; Farbe --hh-ink-soft statt --hh-muted, weil --hh-muted auf Weiß nur
   4,2:1 erreicht (AA verlangt 4,5:1) – dasselbe Muster wie bei .hh-kpi-hint. */

.hh-field-hint {
    display: block;
    margin-top: .3rem;
    font-size: .78rem;
    line-height: 1.4;
    color: var(--hh-ink-soft);
}

/* Der Verweis im Hinweis trägt neben der Farbe eine Unterstreichung: In einem Satz aus
   gedämpftem Text ist ein nur farbiger Verweis mit dem Rest der Zeile zu verwechseln
   (WCAG 1.4.1). */
.hh-empty-choice a {
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .15em;
}

/* „Liste neu laden“: eine kleine Schaltfläche in der Zeile des Hinweises – bewusst kleiner als
   .hh-btn, damit sie das Formularraster nicht auseinanderzieht. */
.hh-empty-choice-reload {
    display: inline-block;
    margin-left: .35rem;
    padding: .08rem .5rem;
    border: 1px solid var(--hh-line);
    border-radius: 6px;
    background: var(--hh-panel);
    color: var(--hh-ink-soft);
    font-family: var(--hh-font-body);
    font-size: .74rem;
    font-weight: 600;
    line-height: 1.4;
    cursor: pointer;
    vertical-align: baseline;
}

.hh-empty-choice-reload:hover { border-color: var(--hh-gold); color: var(--hh-gold-strong); }