/* ==========================================================================
   vitabene – Layout (Seitenleiste, Marke, Login)
   Präfix vb- für alle eigenen Klassen.
   ========================================================================== */

html, body {
    margin: 0;
    height: 100%;
    background: var(--oo-color-background);
    color: var(--oo-color-text);
    font-family: var(--oo-font-family);
}

/* Elemente, die nur per Code den Fokus bekommen (Überschriften, Dialoge, Seitenleiste), ohne Fokusrahmen */
[tabindex="-1"]:focus {
    outline: none;
}

.vb-layout {
    height: 100dvh;
}

/* ── Seitenleiste ─────────────────────────────────────────────────────────── */

.vb-seitenleiste {
    height: 100%;
    padding: var(--oo-space-4) var(--oo-space-3);
    box-sizing: border-box;
}

.vb-seitenleiste__suche {
    margin: var(--oo-space-4) 0;
}

.vb-seitenleiste__unten {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-2);
}

.vb-seitenleiste__benutzerzeile {
    display: flex;
    align-items: center;
    gap: var(--oo-space-1);
}

.vb-seitenleiste__benutzermenue {
    flex: 1;
    min-width: 0;
}

.vb-etikett {
    align-self: flex-start;
}

.vb-benutzer {
    display: flex;
    align-items: center;
    gap: var(--oo-space-2);
    padding: var(--oo-space-2);
    border-radius: var(--oo-radius-md);
    cursor: pointer;
}

.vb-benutzer:hover {
    background: var(--oo-surface-2);
}

.vb-benutzer__name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Marke (Logo) ─────────────────────────────────────────────────────────── */

.vb-marke {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--oo-space-1);
    text-decoration: none;
    padding: 0 var(--oo-space-2);
}

.vb-marke__logo {
    display: block;
    height: 2.75rem;
    width: auto;
}

.vb-marke__zusatz {
    font-size: var(--oo-font-size-xxs);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--oo-primary);
    border-top: 2px solid var(--vb-farbe-marke);
    padding-top: var(--oo-space-1);
}

.vb-marke--gross {
    align-items: center;
}

.vb-marke--gross .vb-marke__logo {
    height: 5rem;
}

/* ── Inhalt ───────────────────────────────────────────────────────────────── */

/* Hauptbereich: nie breiter als 100rem (zentriert), am Desktop nie schmaler als 65rem (Fenster ab 1280 px passt ohne Scrollen, auch mit senkrechter Scrollleiste) –
   darunter scrollt die ganze Seite, nicht jede Tabelle für sich. Listen sind auf diese Breite ausgelegt. */
.vb-inhalt {
    padding: var(--oo-space-6);
    box-sizing: border-box;
    min-height: 100%;
    max-width: 100rem;
    margin-inline: auto;
}

@media (min-width: 48.01rem) {
    .vb-inhalt {
        min-width: 65rem;
    }
}

@media (max-width: 48rem) {
    .vb-inhalt {
        padding: var(--oo-space-4);
    }
}

/* PageHeader bringt keinen Abstand nach unten mit – am Handy lägen umgebrochene Knöpfe sonst direkt auf dem Inhalt */
.vb-inhalt > .oo-page-header {
    margin-bottom: var(--oo-space-3);
}

.vb-laden {
    padding: var(--oo-space-6);
    color: var(--oo-color-text-subtle);
}

/* ── Login ────────────────────────────────────────────────────────────────── */

.vb-login-layout {
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background:
        linear-gradient(160deg, var(--oo-primary), var(--oo-primary-darker));
    padding: var(--oo-space-4);
    box-sizing: border-box;
}

.vb-login__karte {
    width: min(24rem, 100%);
    background: var(--oo-color-surface);
    border: var(--oo-border-width) solid var(--oo-color-border);
    border-top: var(--oo-space-1) solid var(--vb-farbe-marke);
    border-radius: var(--oo-radius-xl);
    box-shadow: var(--oo-shadow-lg);
    padding: var(--oo-space-8) var(--oo-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-4);
}

.vb-login__untertitel {
    margin: 0;
    text-align: center;
    font-family: var(--vb-schrift-ueberschrift);
    font-size: var(--oo-font-size-xl);
    color: var(--oo-primary);
}

.vb-login__formular {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-3);
}

.vb-login__feld {
    display: flex;
    flex-direction: column;
    gap: var(--oo-space-1);
    font-size: 0.9rem;
    color: var(--oo-color-text-subtle);
}

.vb-login__feld input {
    font: inherit;
    font-size: 1rem;
    padding: var(--oo-space-2) var(--oo-space-3);
    border: var(--oo-border-width) solid var(--oo-color-border-strong);
    border-radius: var(--oo-radius-md);
    background: var(--oo-color-surface);
    color: var(--oo-color-text);
}

.vb-login__feld input:focus {
    outline: 2px solid var(--vb-farbe-marke);
    outline-offset: 1px;
}

.vb-login__knopf {
    font: inherit;
    font-weight: 600;
    margin-top: var(--oo-space-2);
    padding: var(--oo-space-2) var(--oo-space-4);
    border: none;
    border-radius: var(--oo-radius-md);
    background: var(--oo-primary);
    color: var(--oo-primary-on);
    cursor: pointer;
}

.vb-login__knopf:hover {
    background: var(--oo-primary-dark);
}