/* /Components/Layout/MainLayout.razor.rz.scp.css */
.hh-shell[b-zjerax6z4h] {
    display: flex;
    min-height: 100vh;
}

.hh-main[b-zjerax6z4h] {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.hh-topbar[b-zjerax6z4h] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 1rem;
    padding: .75rem 1.75rem;
    background: rgba(255, 255, 255, .75);
    border-bottom: 1px solid var(--hh-line);
    backdrop-filter: blur(6px);
    position: sticky;
    top: 0;
    z-index: 10;
}

.hh-topbar-actions[b-zjerax6z4h] {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.hh-content[b-zjerax6z4h] {
    padding: 1.75rem;
    max-width: 1280px;
    width: 100%;
}

@media (max-width: 900px) {
    .hh-shell[b-zjerax6z4h] { flex-direction: column; }
    .hh-content[b-zjerax6z4h] { padding: 1rem; }
    .hh-topbar[b-zjerax6z4h] { padding: .6rem 1rem; justify-content: flex-start; overflow-x: auto; }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
/* Auf breiten Bildschirmen steht die Navigation ohnehin offen – der Schalter hat dort keine
   Aufgabe und bleibt aus der Tabulatorreihenfolge heraus. Auf schmalen Bildschirmen wird er
   unsichtbar, aber NICHT „display: none“: Ein ausgeblendetes Feld ist mit der Tastatur nicht
   erreichbar, die Navigation ließe sich dann nur noch mit der Maus öffnen. */
.hh-nav-toggle[b-ksvrdgj81l] { display: none; }

.hh-sidebar[b-ksvrdgj81l] {
    width: 250px;
    flex: none;
    background: var(--hh-sidebar);
    color: var(--hh-sidebar-ink);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: sticky;
    top: 0;
    max-height: 100vh;
    overflow-y: auto;
}

.hh-brand[b-ksvrdgj81l] {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.15rem 1.15rem 1rem;
    border-bottom: 1px solid rgba(201, 164, 92, .25);
}

/* Breite folgt dem Seitenverhältnis der Bildmarke (605 × 541), damit sie nicht verzerrt. */
.hh-brand-icon[b-ksvrdgj81l] { height: 42px; width: auto; flex: none; }

.hh-brand-text[b-ksvrdgj81l] { display: flex; flex-direction: column; line-height: 1.15; }

.hh-brand-name[b-ksvrdgj81l] {
    font-family: var(--hh-font-display);
    font-size: 1.25rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #f2ece0;
}

.hh-brand-sub[b-ksvrdgj81l] {
    font-size: .68rem;
    letter-spacing: .38em;
    text-transform: uppercase;
    color: var(--hh-gold-soft);
}

.hh-nav-burger[b-ksvrdgj81l] {
    display: none;
    margin-left: auto;
    font-size: 1.3rem;
    line-height: 1;
    padding: .2rem .3rem;
    border-radius: 6px;
    color: var(--hh-gold-soft);
    cursor: pointer;
}

.hh-nav[b-ksvrdgj81l] {
    display: flex;
    flex-direction: column;
    padding: 1rem .75rem 1.25rem;
    gap: .1rem;
    flex: 1;
}

/* Gruppenüberschrift: als <h2> ausgezeichnet, damit die Gliederung auch ohne Blick erfassbar
   ist. Schriftart, Größe und Abstände müssen deshalb gegen die allgemeinen Überschriftenregeln
   aus app.css gesetzt werden. */
.hh-nav-group[b-ksvrdgj81l] {
    font-family: var(--hh-font-body);
    font-size: .64rem;
    font-weight: 600;
    letter-spacing: .24em;
    text-transform: uppercase;
    /* Vorher .45 – das ergab auf dem dunklen Grund nur rund 3,4:1 und war bei dieser
       Schriftgröße kaum lesbar. */
    color: rgba(216, 208, 194, .65);
    margin: 1rem .5rem .35rem;
}

.hh-nav-group:first-child[b-ksvrdgj81l] { margin-top: 0; }

.hh-nav-list[b-ksvrdgj81l] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: .1rem;
}

[b-ksvrdgj81l] .hh-nav-link {
    display: block;
    padding: .5rem .75rem;
    border-radius: 8px;
    color: var(--hh-sidebar-ink);
    text-decoration: none;
    font-size: .92rem;
    border-left: 2px solid transparent;
}

[b-ksvrdgj81l] .hh-nav-link:hover {
    background: rgba(201, 164, 92, .12);
    color: #fff;
    text-decoration: none;
}

[b-ksvrdgj81l] .hh-nav-link.active {
    background: rgba(201, 164, 92, .16);
    color: var(--hh-gold-soft);
    border-left-color: var(--hh-gold);
}

/* Auf dem dunklen Grund der Seitenleiste ist das helle Gold der Markierung deutlich besser
   zu erkennen als das gedeckte Gold der übrigen Oberfläche. Die Schriftfarbe bleibt
   unangetastet, damit der aktuelle Eintrag auch mit Fokus als solcher erkennbar bleibt. */
[b-ksvrdgj81l] .hh-nav-link:focus-visible {
    outline: 2px solid var(--hh-focus-invert);
    outline-offset: 2px;
    background: rgba(201, 164, 92, .12);
}

/* ---------- Navigation 2026-09 ---------- */

/* Zweite Zeile unter einem Eintrag: nennt gedämpft die Reiter, die hinter dem Schritt liegen
   („Kalender · Checklisten · Präparation“). Sie steht innerhalb des Verweises und wird von
   Vorlesehilfen als Teil seines Namens gelesen – gewollt: Wer „Kalender“ sucht, hört ihn beim
   Eintrag „Reisen“. Farbe wie die Gruppenüberschrift. */
[b-ksvrdgj81l] .hh-nav-note {
    display: block;
    margin-top: .1rem;
    font-size: .72rem;
    line-height: 1.3;
    color: rgba(216, 208, 194, .65);
}

/* Schrittnummern des Ablaufs: ein CSS-Zähler, rein visuell – im DOM steht kein Text, die Liste
   bleibt semantisch eine gewöhnliche Liste unter ihrer h2-Gruppenüberschrift. Der leere
   Alternativtext („/ ""“) hält die Nummer aus der Vorleseausgabe heraus; ein Browser, der diese
   Schreibweise nicht kennt, behält die Zeile davor. Gestaltet wie der Kreis .hh-help-num des
   Handbuchs: dunkles Braun mit heller Goldschrift. */
.hh-nav-steps[b-ksvrdgj81l] { counter-reset: step; }

.hh-nav-steps[b-ksvrdgj81l]  li {
    display: flex;
    align-items: flex-start;
    gap: .55rem;
}

.hh-nav-steps[b-ksvrdgj81l]  li::before {
    counter-increment: step;
    content: counter(step);
    content: counter(step) / "";
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.35rem;
    height: 1.35rem;
    margin-top: .5rem;
    border-radius: 50%;
    background: var(--hh-brown-dark);
    color: var(--hh-gold-soft);
    font-family: var(--hh-font-display);
    font-size: .78rem;
    line-height: 1;
}

/* Der Kreis des aktuellen Schritts wechselt auf Gold – Regel in app.css (Block „Navigation
   2026-09“), weil sie :has() braucht und ohne Scope auskommt. */

.hh-nav-steps[b-ksvrdgj81l]  .hh-nav-link {
    flex: 1;
    min-width: 0;
}

@media (max-width: 900px) {
    .hh-sidebar[b-ksvrdgj81l] {
        width: 100%;
        min-height: 0;
        position: relative;
        max-height: none;
    }

    .hh-nav-burger[b-ksvrdgj81l] { display: block; }

    .hh-nav[b-ksvrdgj81l] { display: none; }

    .hh-nav-toggle:checked ~ .hh-sidebar .hh-nav[b-ksvrdgj81l] { display: flex; }

    /* Unsichtbar, aber vorhanden: Der Schalter behält seinen Platz in der
       Tabulatorreihenfolge und liegt direkt vor der Seitenleiste. */
    .hh-nav-toggle[b-ksvrdgj81l] {
        display: block;
        position: absolute;
        width: 1px;
        height: 1px;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
    }

    /* Der Fokus liegt auf dem unsichtbaren Kontrollkästchen – zeigen muss ihn der sichtbare
       Griff, sonst wandert man mit der Tastatur ins Leere. */
    .hh-nav-toggle:focus-visible ~ .hh-sidebar .hh-nav-burger[b-ksvrdgj81l] {
        outline: 2px solid var(--hh-focus-invert);
        outline-offset: 3px;
    }

    .hh-nav-toggle:checked ~ .hh-sidebar .hh-nav-burger[b-ksvrdgj81l] {
        background: rgba(201, 164, 92, .18);
        color: #fff;
    }
}
/* /Components/Layout/ReconnectModal.razor.rz.scp.css */
.components-reconnect-first-attempt-visible[b-x7ratsdi38],
.components-reconnect-repeated-attempt-visible[b-x7ratsdi38],
.components-reconnect-failed-visible[b-x7ratsdi38],
.components-pause-visible[b-x7ratsdi38],
.components-resume-failed-visible[b-x7ratsdi38],
.components-rejoining-animation[b-x7ratsdi38] {
    display: none;
}

#components-reconnect-modal.components-reconnect-show .components-reconnect-first-attempt-visible[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-show .components-rejoining-animation[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-paused .components-pause-visible[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-resume-failed .components-resume-failed-visible[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-retrying[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-retrying .components-reconnect-repeated-attempt-visible[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-retrying .components-rejoining-animation[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-failed[b-x7ratsdi38],
#components-reconnect-modal.components-reconnect-failed .components-reconnect-failed-visible[b-x7ratsdi38] {
    display: block;
}


#components-reconnect-modal[b-x7ratsdi38] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-x7ratsdi38 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-x7ratsdi38 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-x7ratsdi38 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-x7ratsdi38]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-x7ratsdi38 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-x7ratsdi38 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-x7ratsdi38 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-x7ratsdi38 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-x7ratsdi38] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-x7ratsdi38] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-x7ratsdi38] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-x7ratsdi38] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-x7ratsdi38] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-x7ratsdi38] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-x7ratsdi38] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-x7ratsdi38 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-x7ratsdi38] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-x7ratsdi38 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}