/*
 * Oberfläche — Token- und Komponentenschicht (doc-M7 Commit a).
 *
 * Die einzige Stelle, an der Farben, Maße und Schrift stehen. Die Vorlage
 * `docs/design/Postly Abrechnung.dc.html` trägt dieselben Werte als
 * Inline-Styles; das ist Prototyp-Form und wird hier nicht dupliziert,
 * sondern einmal benannt. Weicht die Vorlage von `README.md` ab, gilt die
 * `.dc.html` — geprüft wurde jeder Wert gegen die Datei.
 *
 * Kein Build: es gibt kein npm, kein Vite, keine Pipeline. Diese Datei wird
 * so ausgeliefert, wie sie hier steht.
 */

/* --------------------------------------------------------------------------
 * Schriften, selbst gehostet
 *
 * Kein Google-Fonts-Link. Ein externer Abruf je Seitenaufruf verriete die
 * Nutzungszeiten eines Werkzeugs, das hinter einer Anmeldung liegt — und er
 * wäre der einzige Weg nach draußen, den diese Oberfläche sonst nicht hat.
 *
 * Beide Familien liefert Google als **variable Schrift**: eine Datei je
 * Familie und Subset deckt alle Schnitte ab (identische URL für 400…700).
 * Deshalb vier Dateien statt vierzehn und ein Gewichtsbereich statt je einer
 * Deklaration — 88 KB statt 287 KB.
 * ------------------------------------------------------------------------ */

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/SpaceGrotesk-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Space Grotesk';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/SpaceGrotesk-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                   U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
                   U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url('/fonts/JetBrainsMono-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                   U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                   U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
 * Tokens
 * ------------------------------------------------------------------------ */

:root {
    /* Flächen */
    --flaeche-seite: #0B0C0A;
    --flaeche-sidebar: #0D0F0B;
    --flaeche-karte: #0F110C;
    --flaeche-erhoeht: #121410;
    --flaeche-nav-hover: #171A13;
    --flaeche-avatar: #1D2216;

    /* Rahmen */
    --rahmen-stark: #1E211A;
    --rahmen-zeile: #16190F;
    --rahmen-feld: #23261F;
    --rahmen-sekundaer: #2A2E23;
    --rahmen-hover: #3A402F;
    --rahmen-badge-aktiv: #2E3524;

    /* Text */
    --text-primaer: #E8EBE3;
    --text-sekundaer: #A9B29C;
    --text-tertiaer: #8A9182;
    --text-schwach: #5D6455;

    /* Akzent */
    --akzent: #B4E01E;
    --akzent-hell: #C9EE4E;
    --akzent-link-hover: #DBF77E;
    --akzent-flaeche-10: rgba(180, 224, 30, 0.10);
    --akzent-flaeche-12: rgba(180, 224, 30, 0.12);
    --akzent-flaeche-16: rgba(180, 224, 30, 0.16);
    --akzent-punkt-hof: rgba(180, 224, 30, 0.14);
    --banner-flaeche: #121707;
    --banner-rahmen: #3E4A16;

    /* Warnung und Fehler */
    --warnung: #E6A417;
    --warnung-flaeche: #12110A;
    --warnung-rahmen: #2E2A14;
    --fehler: #E5533D;
    --fehler-flaeche: rgba(229, 83, 61, 0.10);
    --fehler-rahmen: #4A2A22;

    /* Overlays */
    --overlay-schublade: rgba(4, 5, 4, 0.62);
    --overlay-palette: rgba(4, 5, 4, 0.66);

    /* Schrift */
    --schrift-ui: 'Space Grotesk', system-ui, sans-serif;
    --schrift-mono: 'JetBrains Mono', ui-monospace, monospace;

    /* Typo-Skala */
    --groesse-seitentitel: 27px;
    --groesse-schubladentitel: 17px;
    --groesse-kartentitel: 14px;
    --groesse-body: 13.5px;
    --groesse-zelle: 13px;
    --groesse-mono-zelle: 12.5px;
    --groesse-meta: 12px;
    --groesse-klein: 11px;
    --groesse-spaltenkopf: 10.5px;
    --groesse-gruppenlabel: 10px;
    --groesse-kpi: 22px;

    /* Abstandsschritte */
    --abstand-2: 2px;
    --abstand-6: 6px;
    --abstand-8: 8px;
    --abstand-10: 10px;
    --abstand-12: 12px;
    --abstand-14: 14px;
    --abstand-16: 16px;
    --abstand-18: 18px;
    --abstand-20: 20px;
    --abstand-22: 22px;
    --abstand-26: 26px;
    --abstand-30: 30px;

    /* Radien */
    --radius-karte: 12px;
    --radius-palette: 14px;
    --radius-kachel: 10px;
    --radius-feld: 8px;
    --radius-chip: 4px;
    --radius-kbd: 4px;
    --radius-badge: 20px;

    /* Schatten */
    --schatten-schublade: -24px 0 60px rgba(0, 0, 0, 0.45);
    --schatten-palette: 0 30px 80px rgba(0, 0, 0, 0.55);

    /* Rahmenmaße */
    --breite-sidebar: 248px;
    --breite-drawer: min(280px, 86vw);
    --hoehe-topbar: 57px;
    --breite-inhalt: 1200px;
    --rand-inhalt: 32px;

    /*
     * Töne des Redesigns (docs/design/postly-redesign, `TONE` in app-v3).
     * Ein Ton ist nie die einzige Aussage: `x-status` trägt immer Symbol und
     * Text dazu. „ok“ ist absichtlich ruhig — der gesunde Zustand soll
     * sichtbar sein, aber nicht um Aufmerksamkeit konkurrieren.
     */
    --ton-ok-symbol: var(--akzent);
    --ton-ok-text: var(--text-tertiaer);
    --ton-ok-rahmen: var(--rahmen-sekundaer);
    --ton-ok-flaeche: transparent;
    --ton-warn-symbol: var(--warnung);
    --ton-warn-text: var(--warnung);
    --ton-warn-rahmen: rgba(230, 164, 23, 0.35);
    --ton-warn-flaeche: rgba(230, 164, 23, 0.08);
    --ton-error-symbol: var(--fehler);
    --ton-error-text: var(--fehler);
    --ton-error-rahmen: rgba(229, 83, 61, 0.5);
    --ton-error-flaeche: var(--fehler-flaeche);
    --ton-info-symbol: var(--text-sekundaer);
    --ton-info-text: var(--text-sekundaer);
    --ton-info-rahmen: var(--rahmen-sekundaer);
    --ton-info-flaeche: transparent;
    --ton-unknown-symbol: var(--text-tertiaer);
    --ton-unknown-text: var(--text-tertiaer);
    --ton-unknown-rahmen: var(--rahmen-hover);
    --ton-unknown-flaeche: transparent;
}

/* --------------------------------------------------------------------------
 * Basis
 * ------------------------------------------------------------------------ */

/*
 * `hidden` muss gewinnen. Diese Regel trägt die ganze interaktive Schicht.
 *
 * Palette, Schublade und Bestätigungsdialog werden ausschließlich über das
 * `hidden`-Attribut geschaltet — das Skript kennt keine eigene Sichtbarkeits-
 * klasse. Das Browser-Stylesheet setzt dafür `[hidden] { display: none }`,
 * aber **jede** Autorenregel mit `display` schlägt es, unabhängig von der
 * Spezifität: Autoren-CSS kommt in der Kaskade vor dem Browser-Stylesheet.
 *
 * `.palette { display: flex }` hat genau das getan. Die Palette stand damit
 * auf jeder Seite offen, `Esc` und das Öffnen der Schublade schlossen sie
 * nicht, und der Suchfilter konnte `.palette__eintrag` nicht ausblenden.
 * Dieselbe Falle lag auf `.bestaetigung__dialog--modal` und `.sprung`.
 *
 * Das `!important` ist hier kein Notnagel, sondern die Aussage: eine Regel,
 * die `hidden` überstimmt, ist immer ein Fehler. Wer es entfernt, macht die
 * Palette wieder dauerhaft sichtbar — `InteraktionTest` hält das fest.
 */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    background: var(--flaeche-seite);
    color: var(--text-primaer);
    font-family: var(--schrift-ui);
    font-size: var(--groesse-body);
    -webkit-font-smoothing: antialiased;
}

a {
    color: var(--akzent-hell);
    text-decoration: none;
}

a:hover {
    color: var(--akzent-link-hover);
    text-decoration: underline;
}

::selection {
    background: var(--akzent);
    color: var(--flaeche-seite);
}

input,
select,
textarea,
button {
    font-family: inherit;
}

input::placeholder,
textarea::placeholder {
    color: var(--text-schwach);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--akzent);
    outline: none;
}

input[type='checkbox'] {
    accent-color: var(--akzent);
    width: 15px;
    height: 15px;
}

/*
 * Tastaturbedienung bleibt sichtbar. Die Vorlage nimmt das Outline nur an
 * Eingabefeldern weg, wo der Akzentrahmen es ersetzt — überall sonst wäre
 * das ein Rückschritt und keine Gestaltung.
 */
:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

code,
.mono {
    font-family: var(--schrift-mono);
}

/* --------------------------------------------------------------------------
 * Rahmen-Layout
 * ------------------------------------------------------------------------ */

.rahmen {
    display: flex;
    min-height: 100vh;
    background: var(--flaeche-seite);
}

/*
 * Die Seitenleiste trägt `popover`: unter 768 px ist sie der Drawer (siehe
 * „Rahmen responsiv“ am Ende). Das Browser-Stylesheet gibt jedem `[popover]`
 * `position: fixed`, `inset: 0`, `margin: auto`, einen Rahmen und Canvas-
 * Farben — die Zeilen hier setzen das für die normale Seitenleiste zurück.
 * `display: flex` schlägt dabei das `display: none` für geschlossene
 * Popover, weil Autoren-CSS vor dem Browser-Stylesheet kommt.
 */
.sidebar {
    width: var(--breite-sidebar);
    flex: 0 0 var(--breite-sidebar);
    box-sizing: border-box;
    margin: 0;
    border: 0;
    border-right: 1px solid var(--rahmen-stark);
    padding: var(--abstand-22) var(--abstand-14);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-26);
    position: sticky;
    inset: 0 auto auto 0;
    height: 100vh;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--rahmen-hover) transparent;
    color: inherit;
    background: var(--flaeche-sidebar);
}

.marke {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    padding: 0 var(--abstand-8);
}

.marke__wort {
    font-size: var(--groesse-schubladentitel);
    font-weight: 700;
    letter-spacing: -0.2px;
}

.marke__tld {
    color: var(--text-tertiaer);
    font-weight: 500;
}

.nav {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-20);
}

.nav__gruppe {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

.nav__label {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-gruppenlabel);
    letter-spacing: 1.2px;
    color: var(--text-schwach);
    padding: 0 var(--abstand-10) var(--abstand-8);
}

.nav__eintrag {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    border: none;
    border-radius: var(--radius-feld);
    cursor: pointer;
    font-size: var(--groesse-body);
    font-family: inherit;
    padding: var(--abstand-8) var(--abstand-10);
    background: none;
    color: var(--text-sekundaer);
    font-weight: 400;
    text-decoration: none;
}

.nav__eintrag:hover {
    background: var(--flaeche-nav-hover);
    color: var(--text-primaer);
    text-decoration: none;
}

.nav__eintrag--aktiv {
    background: var(--akzent-flaeche-12);
    color: var(--akzent-link-hover);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--akzent);
}

/*
 * Ein Eintrag ohne parameterlose Route (Verbrauch, Tarife brauchen ein
 * Konto). Sichtbar, damit die Gruppe vollständig bleibt; nicht anklickbar,
 * weil ein erfundenes Ziel schlimmer wäre als ein sichtbar noch nicht
 * verdrahteter Eintrag. Wird in Commit c an die Kontoauswahl gehängt.
 */
.nav__eintrag--inaktiv {
    color: var(--text-schwach);
    cursor: not-allowed;
}

.nav__eintrag--inaktiv:hover {
    background: none;
    color: var(--text-schwach);
}

/*
 * Unterseiten-Wegweiser innerhalb der Abdeckung (Abdeckung · Automatik ·
 * Netzwerk-Exposition). Nur Darstellung; die Seite darunter bleibt dieselbe.
 */
.unteransicht {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-8);
    margin: 0 0 var(--abstand-16);
    font-size: var(--groesse-zelle);
}

.unteransicht a {
    color: var(--text-sekundaer);
    text-decoration: none;
}

.unteransicht a:hover {
    color: var(--text-primaer);
    text-decoration: underline;
}

.unteransicht a[aria-current="page"] {
    color: var(--akzent-link-hover);
    font-weight: 600;
}

.unteransicht__trenner {
    color: var(--text-schwach);
}

.sidebar__fuss {
    margin-top: auto;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-12);
}

.sprung {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-8);
    width: 100%;
    box-sizing: border-box;
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-feld);
    border-radius: var(--radius-feld);
    padding: 9px var(--abstand-10);
    color: var(--text-tertiaer);
    font-size: var(--groesse-zelle);
    cursor: pointer;
    text-align: left;
}

.sprung:hover {
    border-color: var(--rahmen-hover);
    color: var(--text-primaer);
}

.kbd {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    border: 1px solid var(--rahmen-sekundaer);
    border-radius: var(--radius-kbd);
    padding: 1px 5px;
}

.benutzer {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    border-top: 1px solid var(--rahmen-stark);
    padding-top: var(--abstand-12);
}

.benutzer__avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--flaeche-avatar);
    border: 1px solid var(--rahmen-badge-aktiv);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--groesse-klein);
    font-weight: 600;
    color: var(--akzent);
}

.benutzer__text {
    flex: 1;
    min-width: 0;
}

.benutzer__name {
    font-size: var(--groesse-meta);
    font-weight: 500;
}

.benutzer__zustand {
    font-size: var(--groesse-klein);
    color: var(--text-schwach);
}

.benutzer__abmelden {
    background: none;
    border: none;
    color: var(--text-schwach);
    font-size: var(--groesse-klein);
    cursor: pointer;
    padding: 4px;
}

.benutzer__abmelden:hover {
    color: var(--fehler);
}

.haupt {
    flex: 1;
    min-width: 0;
}

.topbar {
    position: sticky;
    top: 0;
    z-index: 5;
    min-height: var(--hoehe-topbar);
    box-sizing: border-box;
    border-bottom: 1px solid var(--rahmen-stark);
    background: rgba(11, 12, 10, 0.86);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    gap: var(--abstand-16);
    padding: 0 var(--rand-inhalt);
}

.krume {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-schwach);
    letter-spacing: 0.4px;
}

.krume__trenner {
    padding: 0 var(--abstand-6);
}

.krume__ziel {
    color: var(--text-tertiaer);
}

.topbar__rechts {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

.zeitraum {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-schwach);
}

.zeitraum__wert {
    color: var(--akzent-hell);
}

/* Laufende Release-Version in der Kopfzeile (neben dem Zeitraum). */
.release {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-schwach);
    text-decoration: none;
    white-space: nowrap;
}

.release__wert {
    color: var(--akzent-hell);
}

a.release:hover .release__wert {
    text-decoration: underline;
}

.release--entwicklung {
    color: var(--text-schwach);
    font-style: italic;
}

/* Lesetext der Release-Detailseite (aus Markdown erzeugt). */
.release-text {
    max-width: 76ch;
    line-height: 1.65;
    color: var(--text-sekundaer);
}

.release-text h2 {
    margin-top: var(--abstand-30);
    font-size: var(--groesse-kartentitel);
    color: var(--text-primaer);
}

.release-text p {
    margin: var(--abstand-10) 0;
}

.release-text ul {
    margin: var(--abstand-8) 0;
    padding-left: var(--abstand-20);
}

.release-text li {
    margin-bottom: var(--abstand-6);
}

.release-text code {
    font-family: var(--schrift-mono);
    color: var(--akzent-hell);
}

.inhalt {
    max-width: var(--breite-inhalt);
    margin: 0 auto;
    padding: var(--abstand-30) var(--rand-inhalt) 96px;
}

/* --------------------------------------------------------------------------
 * Komponenten
 * ------------------------------------------------------------------------ */

.karte {
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-karte);
}

.karte__kopf {
    padding: 13px var(--abstand-16);
    border-bottom: 1px solid var(--rahmen-zeile);
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

.karte__titel {
    margin: 0;
    font-size: var(--groesse-kartentitel);
    font-weight: 600;
}

.karte__koerper {
    padding: var(--abstand-16);
}

.karte--warnung {
    border-color: var(--warnung-rahmen);
}

.kachel {
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-kachel);
    padding: var(--abstand-14) var(--abstand-16);
}

.kachel__label {
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
    margin-bottom: var(--abstand-6);
}

.kachel__wert {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-kpi);
    font-weight: 600;
}

.kachel__nenner {
    color: var(--text-schwach);
    font-size: var(--groesse-kartentitel);
}

.kachel--warnung {
    border-color: var(--warnung-rahmen);
    background: var(--warnung-flaeche);
}

.kachel--warnung .kachel__label,
.kachel--warnung .kachel__wert {
    color: var(--warnung);
}

.badge {
    display: inline-block;
    font-size: var(--groesse-klein);
    border: 1px solid var(--rahmen-hover);
    color: var(--text-tertiaer);
    border-radius: var(--radius-badge);
    padding: var(--abstand-2) var(--abstand-8);
}

.badge--aktiv {
    border-color: var(--rahmen-badge-aktiv);
    background: var(--akzent-flaeche-10);
    color: var(--akzent-hell);
}

.badge--warnung {
    border-color: var(--warnung-rahmen);
    background: var(--warnung-flaeche);
    color: var(--warnung);
}

.badge--fehler {
    border-color: var(--fehler-rahmen);
    background: var(--fehler-flaeche);
    color: var(--fehler);
}

.chip {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    border: 1px solid var(--rahmen-sekundaer);
    border-radius: var(--radius-chip);
    padding: var(--abstand-2) var(--abstand-6);
    color: var(--text-primaer);
}

.chip--akzent {
    color: var(--akzent-hell);
}

/*
 * Hinweis (Tooltip).
 *
 * Die Vorlage hängt die Hilfetexte an `title`. Das ist für eine Tastatur
 * nicht erreichbar und für einen Screenreader unzuverlässig — deshalb hier
 * ein fokussierbarer Auslöser mit `aria-describedby` auf eine echte Blase.
 */
.hinweisblase {
    position: relative;
    display: inline-flex;
}

.hinweisblase__ausloeser {
    width: 15px;
    height: 15px;
    box-sizing: border-box;
    border-radius: 50%;
    border: 1px solid var(--rahmen-hover);
    background: none;
    color: var(--text-tertiaer);
    font-size: var(--groesse-gruppenlabel);
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: help;
    padding: 0;
}

.hinweisblase__text {
    position: absolute;
    bottom: calc(100% + var(--abstand-8));
    left: 0;
    z-index: 20;
    width: max-content;
    max-width: 320px;
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-hover);
    border-radius: var(--radius-feld);
    padding: var(--abstand-8) var(--abstand-10);
    font-size: var(--groesse-meta);
    line-height: 1.45;
    color: var(--text-sekundaer);
    box-shadow: var(--schatten-palette);
    visibility: hidden;
    opacity: 0;
}

.hinweisblase:hover .hinweisblase__text,
.hinweisblase__ausloeser:focus-visible + .hinweisblase__text {
    visibility: visible;
    opacity: 1;
    animation: dcFade 0.14s ease-out;
}

/* --------------------------------------------------------------------------
 * Knöpfe
 * ------------------------------------------------------------------------ */

.knopf {
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-feld);
    color: var(--text-primaer);
    border-radius: var(--radius-feld);
    padding: 9px var(--abstand-14);
    font-size: var(--groesse-zelle);
    cursor: pointer;
}

.knopf:hover {
    border-color: var(--rahmen-hover);
}

.knopf--primaer {
    background: var(--akzent);
    border-color: var(--akzent);
    color: var(--flaeche-seite);
    padding: 9px var(--abstand-16);
    font-weight: 600;
}

.knopf--primaer:hover {
    background: var(--akzent-hell);
    border-color: var(--akzent-hell);
}

/* --------------------------------------------------------------------------
 * Bestand aus der ungestylten Fassung
 *
 * Die Masken aus M1–M6 benutzen diese Klassen. Sie bekommen hier die neuen
 * Tokens, damit in Commit a keine Maske bricht; ihre eigentliche Gestaltung
 * folgt in b–d.
 * ------------------------------------------------------------------------ */

h1 {
    font-size: var(--groesse-seitentitel);
    font-weight: 600;
    letter-spacing: -0.5px;
    margin: 0 0 var(--abstand-6);
}

h2 {
    font-size: var(--groesse-kartentitel);
    font-weight: 600;
    margin: var(--abstand-26) 0 var(--abstand-8);
}

table {
    border-collapse: collapse;
    width: 100%;
}

th,
td {
    text-align: left;
    padding: 11px var(--abstand-16);
    border-bottom: 1px solid var(--rahmen-zeile);
    font-size: var(--groesse-zelle);
}

th {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-spaltenkopf);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-tertiaer);
    font-weight: 500;
}

td.zahl,
th.zahl {
    text-align: right;
    font-variant-numeric: tabular-nums;
    font-family: var(--schrift-mono);
}

tr.gesamt td {
    font-weight: 600;
    border-top: 2px solid var(--rahmen-hover);
    border-bottom: none;
}

.gedaempft {
    color: var(--text-tertiaer);
    font-size: var(--groesse-meta);
}

.fehlt {
    color: var(--fehler);
}

.navigation {
    display: flex;
    gap: var(--abstand-16);
    align-items: baseline;
    margin-bottom: var(--abstand-18);
}

/* --------------------------------------------------------------------------
 * Vertragsformular
 * ------------------------------------------------------------------------ */

.vertragsformular__karte {
    padding: var(--abstand-18);
}

.vertragsformular__raster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-16);
}

.vertragsformular__breit {
    grid-column: 1 / -1;
}

.vertragsformular__positionskopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--abstand-16);
    margin-top: var(--abstand-26);
}

.vertragsformular__positionskopf h2,
.vertragsformular__positionskopf p {
    margin: 0;
}

.vertragsformular__positionskopf p {
    margin-top: var(--abstand-6);
}

.vertragsformular__aktionen {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--abstand-18);
}

.positionen {
    margin-top: var(--abstand-10);
}

.positionen__tabelle {
    overflow-x: auto;
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-karte);
    background: var(--flaeche-karte);
}

.positionen th:nth-child(1) { width: 18%; }
.positionen th:nth-child(2) { width: 34%; }
.positionen th:nth-child(3) { width: 10%; }
.positionen th:nth-child(4) { width: 18%; }

.positionen td {
    padding: var(--abstand-8);
}

.positionen td.zahl {
    white-space: nowrap;
}

.positionen__entfernen {
    border: 0;
    background: transparent;
    color: var(--text-tertiaer);
    cursor: pointer;
    font-size: 20px;
    line-height: 1;
    padding: var(--abstand-6);
}

.positionen__entfernen:hover {
    color: var(--fehler);
}

.nur-screenreader {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@media (max-width: 760px) {
    .vertragsformular__raster {
        grid-template-columns: 1fr;
    }

    .vertragsformular__breit {
        grid-column: auto;
    }

    .vertragsformular__positionskopf {
        align-items: stretch;
        flex-direction: column;
    }
}

.balken {
    display: inline-block;
    width: 6rem;
    height: 0.5rem;
    background: var(--rahmen-stark);
    vertical-align: middle;
}

.balken > span {
    display: block;
    height: 100%;
    background: var(--akzent);
}

.hinweis {
    border-left: 3px solid var(--rahmen-stark);
    padding: var(--abstand-8) var(--abstand-12);
    margin: var(--abstand-18) 0;
}

/*
 * Sicherheitsrelevante Bestätigung (Active-Web-Freigabe): derselbe Hinweisblock,
 * aber mit Akzentrahmen und leichtem Akzentfeld, damit sie nicht als beiläufige
 * Checkbox zwischen den normalen Feldern untergeht.
 */
.hinweis--bestaetigung {
    border-left-color: var(--akzent);
    background: var(--akzent-flaeche-10);
}

.hinweis--bestaetigung p {
    margin: var(--abstand-6) 0 0;
}

/* --------------------------------------------------------------------------
 * Animationen
 * ------------------------------------------------------------------------ */

@keyframes dcSlideIn {
    from { transform: translateX(24px); opacity: 0; }
    to   { transform: translateX(0);    opacity: 1; }
}

@keyframes dcFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes dcPop {
    from { transform: translateY(-8px) scale(0.98); opacity: 0; }
    to   { transform: translateY(0)    scale(1);    opacity: 1; }
}

/* --------------------------------------------------------------------------
 * Schlichter Rahmen (vor der Anmeldung)
 * ------------------------------------------------------------------------ */

.schlicht {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--abstand-26);
    padding: var(--abstand-30);
    box-sizing: border-box;
}

.schlicht__marke {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

.schlicht__karte {
    width: 22rem;
    max-width: 100%;
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-karte);
    padding: var(--abstand-26);
}

.schlicht__karte h1 {
    font-size: var(--groesse-schubladentitel);
    margin-bottom: var(--abstand-16);
}

.schlicht__karte input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-feld);
    border-radius: var(--radius-feld);
    color: var(--text-primaer);
    padding: 9px var(--abstand-10);
    margin: var(--abstand-8) 0 var(--abstand-16);
}

/* --------------------------------------------------------------------------
 * Musterleiste
 *
 * Nur für das Prüfstück auf der Startseite. Entfällt mit Commit c, zusammen
 * mit der Leiste selbst.
 * ------------------------------------------------------------------------ */

.musterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-12);
    margin-bottom: var(--abstand-16);
}

.musterleiste > .karte {
    flex: 1 1 20rem;
}

.musterleiste > .kachel {
    flex: 1 1 12rem;
}

/* --------------------------------------------------------------------------
 * Listen-Screens (doc-M7 Commit b)
 * ------------------------------------------------------------------------ */

.seitenkopf {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: var(--abstand-20);
}

.seitenkopf__unterzeile {
    margin: 0;
    font-size: var(--groesse-zelle);
    color: var(--text-tertiaer);
}

.liste {
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-karte);
    overflow: hidden;
}

.liste table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--groesse-zelle);
}

.liste thead tr {
    background: var(--flaeche-erhoeht);
}

.liste th {
    text-align: left;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-spaltenkopf);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-tertiaer);
    font-weight: 500;
    padding: var(--abstand-10) var(--abstand-8);
    border-bottom: 1px solid var(--rahmen-stark);
}

.liste th:first-child,
.liste td:first-child {
    padding-left: var(--abstand-16);
}

.liste th:last-child,
.liste td:last-child {
    padding-right: var(--abstand-16);
}

.liste tbody tr {
    border-bottom: 1px solid var(--rahmen-zeile);
}

.liste tbody tr:hover {
    background: var(--flaeche-erhoeht);
}

.liste td {
    padding: 11px var(--abstand-8);
    border-bottom: none;
    font-size: var(--groesse-zelle);
}

.liste td.name {
    font-weight: 500;
}

.liste td.zahl,
.liste th.zahl {
    text-align: right;
    font-family: var(--schrift-mono);
    font-variant-numeric: tabular-nums;
}

.liste td.mono {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

/* DNS-Werte (DKIM-Schlüssel, SPF, TXT) haben oft keine Leerzeichen. `anywhere`
 * senkt die Mindestbreite der Zelle, damit die Tabelle im Inhalt bleibt, statt
 * über den Rand zu wachsen; der Wert bleibt vollständig lesbar. */
.liste td.dnswert {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* DNS-Prüfung: weil Werte beliebig umbrechen dürfen, verteilte das automatische
 * Layout die Breite nach Zufall der Inhalte. Die drei Wertspalten bekommen
 * deshalb einen festen Anteil, die Erklärung einen kleineren; Prüfung und
 * Status bleiben so schmal wie ihr Inhalt. Das Begründungsfeld folgt der
 * Zellbreite, statt mit seiner Standardbreite die Erklärung aufzuspannen. */
.dnspruefung col.dnspruefung__wert {
    width: 23%;
}

.dnspruefung col.dnspruefung__erklaerung {
    width: 18%;
}

.dnspruefung input {
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Server & Ressourcen: Belegung bricht nur zwischen den Angaben um, nie mitten
 * in „Web-Domains 3“. */
.belegung .belegung__teil {
    white-space: nowrap;
}

.liste td.matt {
    color: var(--text-tertiaer);
}

.liste td.leerwert {
    color: var(--text-schwach);
}

.liste td.ja {
    color: var(--akzent-hell);
}

.zahl--warnung {
    color: var(--warnung);
}

/*
 * Bearbeitbare Zelle.
 *
 * Der gepunktete Unterstrich ist der Hinweis, dass hier ein Weg liegt; der
 * Weg selbst ist die gebaute Bearbeiten-Route. Es gibt keinen zweiten
 * Schreibpfad an den Guards vorbei — `oberflaeche.js` navigiert, es schreibt
 * nicht.
 */
.liste td.bearbeitbar {
    border-bottom: 1px dotted var(--rahmen-sekundaer);
    cursor: pointer;
}

/*
 * Der Zustand aus dem Entwurf: die angefasste Zelle bekommt den Akzentrahmen,
 * bevor das Formular öffnet. Kurz sichtbar, und genau deshalb da — ein
 * Doppelklick, der ohne Quittung die Seite wechselt, fühlt sich wie ein
 * Fehlgriff an.
 */
.liste td.zelle-bearbeiten {
    background: var(--flaeche-seite);
    box-shadow: inset 0 0 0 1px var(--akzent);
    border-radius: 6px;
}

.filterzeile th {
    padding: 7px var(--abstand-8) var(--abstand-8);
    text-transform: none;
    letter-spacing: normal;
}

.filterzeile input,
.filterzeile select {
    width: 100%;
    box-sizing: border-box;
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-feld);
    border-radius: 6px;
    font-size: var(--groesse-meta);
    padding: 5px var(--abstand-8);
    outline: none;
}

.filterzeile input {
    color: var(--text-primaer);
}

.filterzeile select {
    color: var(--text-tertiaer);
    padding: 5px var(--abstand-6);
}

/*
 * Trennzeile.
 *
 * Deaktivierte Zeilen werden gezeigt, nicht versteckt — nur getrennt und
 * benannt (M3, `Kontenliste`). Im Entwurf gibt es dafür nur den Statusfilter;
 * eine Vorbelegung „aktiv" würde sie unsichtbar machen, ohne es zu sagen.
 */
.liste tr.trennzeile td {
    background: var(--flaeche-sidebar);
    border-top: 1px solid var(--rahmen-stark);
    border-bottom: 1px solid var(--rahmen-stark);
    color: var(--text-tertiaer);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-spaltenkopf);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    padding: var(--abstand-8) var(--abstand-16);
}

.liste tr.trennzeile:hover td {
    background: var(--flaeche-sidebar);
}

.leerhinweis {
    padding: var(--abstand-20) var(--abstand-16);
    color: var(--text-tertiaer);
    font-size: var(--groesse-zelle);
}

.zeilenwerkzeug {
    display: flex;
    gap: var(--abstand-10);
    justify-content: flex-end;
    align-items: center;
}

.zeilenwerkzeug form {
    display: inline;
}

.zeilenwerkzeug button {
    background: none;
    border: none;
    color: var(--text-schwach);
    font-size: var(--groesse-klein);
    cursor: pointer;
    padding: 0;
}

.zeilenwerkzeug button:hover {
    color: var(--fehler);
}

/* --------------------------------------------------------------------------
 * Start und Verbrauch (doc-M7 Commit c)
 * ------------------------------------------------------------------------ */

.knopfreihe {
    display: flex;
    gap: var(--abstand-8);
}

/* Aktionen im Seitenkopf (auch „JSON exportieren“): Beschriftung nie umbrechen;
   wird es eng, rückt die Reihe rechtsbündig in eine zweite Zeile. */
.seitenkopf .knopf {
    white-space: nowrap;
}

.seitenkopf .knopfreihe {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.kachelreihe {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--abstand-12);
    margin-bottom: var(--abstand-16);
}

.startraster {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: var(--abstand-16);
    align-items: start;
}

.startraster__breit {
    grid-column: 1 / -1;
}

.startverbrauch {
    overflow-x: auto;
}

.startverbrauch + h3 {
    margin-top: var(--abstand-20);
}

.beschreibungsliste {
    margin: 0;
    padding-left: var(--abstand-18);
}

.beschreibungsliste li + li {
    margin-top: var(--abstand-6);
}

.beschreibungsliste--unterliste {
    margin-top: .35rem;
    padding-left: 1.15rem;
}

.kundenverlaeufe {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-12);
}

.kundenverlauf {
    position: relative;
    border: 1px solid var(--rahmen-zeile);
    border-radius: var(--radius-feld);
    padding: var(--abstand-12);
    min-width: 0;
}

.kundenverlauf__kopf,
.kundenverlauf__kopf > div,
.kundenverlauf__werte {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
}

.kundenverlauf__kopf {
    justify-content: space-between;
    font-size: var(--groesse-klein);
}

.kundenverlauf__werte {
    color: var(--text-tertiaer);
    font-family: var(--schrift-mono);
}

.kundenverlauf__werte i {
    display: inline-block;
    width: 12px;
    height: 2px;
    margin-right: var(--abstand-6);
    vertical-align: middle;
}

.legende-web { background: var(--akzent-hell); }
.legende-mail { background: var(--warnung); }

.monatskurve {
    display: block;
    width: 100%;
    height: 88px;
    margin-top: var(--abstand-8);
}

.monatskurve polyline {
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.monatskurve__achse {
    stroke: var(--rahmen-zeile);
    stroke-width: 1;
}

.monatskurve__web { stroke: var(--akzent-hell); }
.monatskurve__mail { stroke: var(--warnung); }

.kundenverlauf__tage {
    position: absolute;
    right: var(--abstand-12);
    bottom: var(--abstand-8);
    color: var(--text-tertiaer);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
}

@media (max-width: 760px) {
    .kundenverlaeufe {
        grid-template-columns: 1fr;
    }

    .kundenverlauf__kopf {
        align-items: flex-start;
        flex-direction: column;
    }
}

.belegzeile,
.meldezeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    padding: var(--abstand-8) 0;
    border-bottom: 1px solid var(--rahmen-zeile);
    font-size: var(--groesse-zelle);
}

.belegzeile:last-child,
.meldezeile:last-child,
.protokollzeile:last-child {
    border-bottom: none;
}

.belegzeile__konto {
    flex: 1;
    min-width: 0;
}

.belegzeile__betrag {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.meldezeile__meta {
    flex: 1;
    min-width: 0;
    color: var(--text-tertiaer);
    font-size: var(--groesse-meta);
}

.protokollzeile {
    display: flex;
    align-items: baseline;
    gap: var(--abstand-10);
    padding: var(--abstand-6) 0;
    border-bottom: 1px solid var(--rahmen-zeile);
    font-size: var(--groesse-meta);
}

.protokollzeile__zeit {
    flex: 0 0 118px;
}

.protokollzeile__herkunft {
    flex: 0 0 220px;
    color: var(--text-tertiaer);
}

.protokollzeile__text {
    flex: 1;
    min-width: 0;
}

.matt {
    color: var(--text-tertiaer);
}

.warnwert {
    color: var(--warnung);
}

.akzentwert {
    color: var(--akzent-hell);
}

/* Diagramm */

.diagrammkarte {
    padding: var(--abstand-18) var(--abstand-20) var(--abstand-12);
    margin-bottom: var(--abstand-16);
}

.diagrammkarte__kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    margin-bottom: var(--abstand-12);
}

.diagrammkarte__kopf p {
    margin: var(--abstand-2) 0 0;
}

.eckwerte {
    display: flex;
    gap: var(--abstand-20);
}

.eckwert {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--abstand-2);
}

.eckwert__label {
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.raster line {
    stroke: #1B1E15;
    stroke-width: 1;
}

.achsentext text {
    fill: var(--text-schwach);
    font-family: var(--schrift-mono);
    font-size: 10px;
}

.achsentext--unten text {
    text-anchor: middle;
}

.achsentext text.laufender-monat {
    fill: var(--akzent-hell);
}

.inklusivlinie {
    stroke: var(--warnung);
    stroke-width: 1;
    stroke-dasharray: 4 5;
    opacity: 0.8;
}

.inklusivtext {
    fill: var(--warnung);
    font-family: var(--schrift-mono);
    font-size: 10px;
    text-anchor: end;
}

.balkenreihe rect {
    fill: var(--akzent);
    opacity: 0.9;
}

.weblinie {
    fill: none;
    stroke: var(--text-primaer);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.webmarker {
    fill: var(--flaeche-seite);
    stroke: var(--text-primaer);
    stroke-width: 2;
}

.liste tr.laufende-zeile {
    background: var(--flaeche-erhoeht);
}

/* --------------------------------------------------------------------------
 * Meldung
 *
 * Der Satz, den die Datenbank oder die Eingabeklasse zurückgegeben hat. Er
 * wird gezeigt, nicht ersetzt — deshalb hat diese Regel keine Variante für
 * „harmlos": eine abgelehnte Eingabe ist eine abgelehnte Eingabe.
 * ------------------------------------------------------------------------ */

.meldung {
    border-radius: var(--radius-feld);
    padding: var(--abstand-10) var(--abstand-12);
    font-size: var(--groesse-zelle);
    line-height: 1.5;
}

.meldung--fehler {
    color: var(--fehler);
    background: var(--fehler-flaeche);
    border: 1px solid var(--fehler-rahmen);
}

/* --------------------------------------------------------------------------
 * Formularfelder der Schublade
 * ------------------------------------------------------------------------ */

.feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-6);
}

.feld__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-6);
}

.feld__label {
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.feld__optional {
    color: var(--text-schwach);
}

.feld__eingabe {
    background: var(--flaeche-seite);
    border: 1px solid var(--rahmen-feld);
    border-radius: var(--radius-feld);
    color: var(--text-primaer);
    font-family: var(--schrift-ui);
    font-size: var(--groesse-body);
    padding: 9px 11px;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}

select.feld__eingabe {
    padding: 9px var(--abstand-10);
}

textarea.feld__eingabe {
    resize: vertical;
}

input[type="date"].feld__eingabe {
    color-scheme: dark;
}

.feld__eingabe--mono {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-zelle);
}

.feld__eingabe:focus {
    border-color: var(--akzent);
}

/*
 * Gesperrte Felder sichtbar zurücknehmen. Ohne diese Regel sähe ein
 * `disabled`-Feld wegen der Autorenfarben genauso aus wie ein bedienbares;
 * die view-only-Ansicht (ADR-0007) behauptet sonst eine Eingabe, die nicht
 * möglich ist.
 */
.feld__eingabe:disabled {
    color: var(--text-tertiaer);
    background: var(--flaeche-erhoeht);
    border-color: var(--rahmen-zeile);
    cursor: not-allowed;
}

/*
 * Formulargruppe: mehrere `.feld`-Blöcke mit ruhigem Abstand. Aufeinander
 * folgende Formulare trennt eine dünne Linie, damit sie nicht wie ein
 * einziger Block wirken.
 */
.formulargruppe {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-14);
    margin-top: var(--abstand-14);
}

.formulargruppe + .formulargruppe {
    border-top: 1px solid var(--rahmen-stark);
    padding-top: var(--abstand-16);
    margin-top: var(--abstand-16);
}

/*
 * Gruppenlabel innerhalb eines größeren Formulars (z. B. Active-Web-Freigabe).
 * Derselbe Mono-Blick wie die Bereichstitel der Startseite, damit ein langes
 * Formular in lesbare Abschnitte zerfällt.
 */
.formulargruppe__titel {
    margin: 0;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-gruppenlabel);
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.formulargruppe__aktionen {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-8);
}

.feldpaar {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--abstand-14);
}

.feldtrenner {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-12);
    border-top: 1px solid var(--rahmen-stark);
    padding-top: var(--abstand-16);
}

.haken {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    font-size: var(--groesse-body);
}

.haken input[type="checkbox"] {
    accent-color: var(--akzent);
    width: 15px;
    height: 15px;
    margin: 0;
}

/* --------------------------------------------------------------------------
 * Akzentkasten — die Ansage vor dem Show-once-Moment
 * ------------------------------------------------------------------------ */

.akzentkasten {
    display: flex;
    gap: 11px;
    border: 1px solid var(--banner-rahmen);
    background: var(--banner-flaeche);
    border-radius: var(--radius-kachel);
    padding: 13px var(--abstand-14);
}

.akzentkasten__balken {
    width: 3px;
    align-self: stretch;
    background: var(--akzent);
    border-radius: 2px;
}

.akzentkasten__text {
    font-size: var(--groesse-mono-zelle);
    color: var(--text-sekundaer);
    line-height: 1.5;
}

.akzentkasten__text strong {
    color: var(--text-primaer);
}

/* --------------------------------------------------------------------------
 * Schublade (Slide-over)
 * ------------------------------------------------------------------------ */

.schubladen-overlay {
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--overlay-schublade);
    animation: dcFade 0.16s ease-out;
}

.schublade {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 41;
    width: 460px;
    max-width: 92vw;
    background: var(--flaeche-karte);
    border-left: 1px solid var(--rahmen-feld);
    box-shadow: var(--schatten-schublade);
    animation: dcSlideIn 0.2s ease-out;
}

.schublade__formular {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.schublade__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-12);
    padding: var(--abstand-18) var(--abstand-22);
    border-bottom: 1px solid var(--rahmen-stark);
}

.schublade__titel {
    margin: 0;
    font-size: var(--groesse-schubladentitel);
    font-weight: 600;
}

.schublade__schliessen {
    background: none;
    border: 1px solid var(--rahmen-feld);
    border-radius: 7px;
    color: var(--text-tertiaer);
    width: 28px;
    height: 28px;
    cursor: pointer;
    font-size: var(--groesse-spaltenkopf);
    line-height: 1;
}

.schublade__schliessen:hover {
    color: var(--text-primaer);
    border-color: var(--rahmen-hover);
}

.schublade__koerper {
    flex: 1;
    overflow-y: auto;
    padding: var(--abstand-22);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-18);
}

.schublade__fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--abstand-10);
    padding: var(--abstand-16) var(--abstand-22);
    border-top: 1px solid var(--rahmen-stark);
    background: var(--flaeche-sidebar);
}

/* --------------------------------------------------------------------------
 * Command-Palette
 * ------------------------------------------------------------------------ */

.palette {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 14vh;
}

.palette__overlay {
    position: absolute;
    inset: 0;
    background: var(--overlay-palette);
    animation: dcFade 0.14s ease-out;
}

.palette__panel {
    position: relative;
    width: 560px;
    max-width: 92vw;
    background: var(--flaeche-karte);
    border: 1px solid var(--rahmen-sekundaer);
    border-radius: var(--radius-palette);
    box-shadow: var(--schatten-palette);
    overflow: hidden;
    animation: dcPop 0.16s ease-out;
}

.palette__kopf {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    padding: var(--abstand-14) var(--abstand-16);
    border-bottom: 1px solid var(--rahmen-stark);
}

.palette__prompt {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
    color: var(--akzent);
}

.palette__eingabe {
    flex: 1;
    background: none;
    border: none;
    outline: none;
    color: var(--text-primaer);
    font-family: var(--schrift-ui);
    font-size: 15px;
}

.palette__liste {
    padding: var(--abstand-8);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    max-height: 52vh;
    overflow-y: auto;
}

.palette__gruppe {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-gruppenlabel);
    letter-spacing: 1px;
    color: var(--text-schwach);
    padding: var(--abstand-8) var(--abstand-10) var(--abstand-6);
}

.palette__eintrag {
    display: flex;
    align-items: center;
    gap: var(--abstand-10);
    background: none;
    border: none;
    border-radius: var(--radius-feld);
    padding: 9px var(--abstand-10);
    color: var(--text-primaer);
    font-family: var(--schrift-ui);
    font-size: var(--groesse-body);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
}

.palette__eintrag:hover {
    background: var(--flaeche-nav-hover);
    text-decoration: none;
}

.palette__eintrag--gewaehlt {
    background: var(--akzent-flaeche-10);
}

.palette__eintrag--gewaehlt:hover {
    background: var(--akzent-flaeche-16);
}

.palette__kuerzel {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
    flex: 0 0 52px;
}

.palette__eintrag--gewaehlt .palette__kuerzel {
    color: var(--akzent);
}

.palette__leer {
    padding: var(--abstand-12) var(--abstand-10);
    color: var(--text-schwach);
    font-size: var(--groesse-zelle);
}

/* --------------------------------------------------------------------------
 * Token-Banner — der Show-once-Moment
 * ------------------------------------------------------------------------ */

.tokenbanner {
    display: flex;
    align-items: flex-start;
    gap: var(--abstand-12);
    border: 1px solid var(--banner-rahmen);
    background: var(--banner-flaeche);
    border-radius: var(--radius-kachel);
    padding: var(--abstand-14) var(--abstand-16);
    margin-bottom: var(--abstand-18);
}

.tokenbanner__balken {
    width: 3px;
    align-self: stretch;
    background: var(--akzent);
    border-radius: 2px;
}

.tokenbanner__inhalt {
    flex: 1;
    min-width: 0;
}

.tokenbanner__titel {
    font-size: var(--groesse-zelle);
    font-weight: 600;
    margin-bottom: 4px;
}

.tokenbanner__text {
    font-size: var(--groesse-mono-zelle);
    color: var(--text-sekundaer);
    margin-bottom: var(--abstand-10);
}

.tokenbanner__reihe {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
}

.tokenbanner__klartext {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-mono-zelle);
    background: var(--flaeche-seite);
    border: 1px solid var(--rahmen-badge-aktiv);
    border-radius: 7px;
    padding: 9px 11px;
    color: var(--akzent-hell);
}

.tokenbanner__ablage {
    margin: var(--abstand-12) 0 var(--abstand-6);
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.tokenbanner__befehl {
    margin: 0;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
    background: var(--flaeche-seite);
    border: 1px solid var(--rahmen-stark);
    border-radius: 7px;
    padding: var(--abstand-10) var(--abstand-12);
    color: var(--text-sekundaer);
    overflow-x: auto;
}

.neuvergeben {
    color: var(--akzent-hell);
}

/* --------------------------------------------------------------------------
 * Bestätigungsdialog
 *
 * Der Entwurf hat keinen und nennt das selbst eine Lücke („Token rotieren
 * sollte einen bekommen"). Ohne Skript steht der Kasten offen in der Zeile —
 * dann entfällt die Nachfrage, nicht die Warnung.
 * ------------------------------------------------------------------------ */

.bestaetigung__overlay {
    display: none;
}

.bestaetigung__dialog--modal {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bestaetigung__dialog--modal .bestaetigung__overlay {
    display: block;
    position: absolute;
    inset: 0;
    background: var(--overlay-palette);
    animation: dcFade 0.14s ease-out;
}

.bestaetigung__panel {
    position: relative;
    background: var(--flaeche-karte);
    border: 1px solid var(--rahmen-sekundaer);
    border-radius: var(--radius-karte);
    padding: var(--abstand-20) var(--abstand-22);
    max-width: 92vw;
}

.bestaetigung__dialog--modal .bestaetigung__panel {
    width: 440px;
    box-shadow: var(--schatten-palette);
    animation: dcPop 0.16s ease-out;
}

.bestaetigung__titel {
    margin: 0 0 var(--abstand-8);
    font-size: var(--groesse-kartentitel);
    font-weight: 600;
}

.bestaetigung__text {
    margin: 0 0 var(--abstand-18);
    font-size: var(--groesse-zelle);
    color: var(--text-sekundaer);
    line-height: 1.5;
}

.bestaetigung__fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--abstand-10);
}

.knopf--warnung {
    background: var(--warnung);
    border-color: var(--warnung);
    color: var(--flaeche-seite);
    padding: 9px var(--abstand-16);
    font-weight: 600;
}

.knopf--warnung:hover {
    filter: brightness(1.12);
    border-color: var(--warnung);
}

/* --------------------------------------------------------------------------
 * Redesign-Foundation (docs/design/postly-redesign)
 *
 * Gemeinsame Bausteine für die Seiten, die nacheinander umgebaut werden.
 * Nur Darstellung: welcher Datensatz welchen Ton bekommt, entscheidet eine
 * Leseklasse, nie diese Datei und nie das Blade.
 * ------------------------------------------------------------------------ */

/*
 * Ton-Klassen. Sie setzen nur lokale Eigenschaften; `x-status`,
 * `x-balken` und künftige Bausteine lesen dieselben vier Werte.
 */
.ton--ok {
    --ton-symbol: var(--ton-ok-symbol);
    --ton-text: var(--ton-ok-text);
    --ton-rahmen: var(--ton-ok-rahmen);
    --ton-flaeche: var(--ton-ok-flaeche);
}

.ton--warn {
    --ton-symbol: var(--ton-warn-symbol);
    --ton-text: var(--ton-warn-text);
    --ton-rahmen: var(--ton-warn-rahmen);
    --ton-flaeche: var(--ton-warn-flaeche);
}

.ton--error {
    --ton-symbol: var(--ton-error-symbol);
    --ton-text: var(--ton-error-text);
    --ton-rahmen: var(--ton-error-rahmen);
    --ton-flaeche: var(--ton-error-flaeche);
}

.ton--info {
    --ton-symbol: var(--ton-info-symbol);
    --ton-text: var(--ton-info-text);
    --ton-rahmen: var(--ton-info-rahmen);
    --ton-flaeche: var(--ton-info-flaeche);
}

.ton--unknown {
    --ton-symbol: var(--ton-unknown-symbol);
    --ton-text: var(--ton-unknown-text);
    --ton-rahmen: var(--ton-unknown-rahmen);
    --ton-flaeche: var(--ton-unknown-flaeche);
}

/* Status: Symbol + Text + Farbe, nie Farbe allein. */
.status {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    max-width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ton-rahmen);
    background: var(--ton-flaeche);
    color: var(--ton-text);
    border-radius: var(--radius-badge);
    padding: 1px var(--abstand-8);
    font-size: var(--groesse-klein);
    line-height: 1.5;
    white-space: nowrap;
    vertical-align: middle;
}

.status__symbol {
    color: var(--ton-symbol);
    font-family: var(--schrift-mono);
    font-weight: 600;
}

.status__text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* „Unbekannt“ unterscheidet sich zusätzlich in der Form, wie in der Referenz. */
.ton--unknown.status {
    border-style: dashed;
}

/*
 * Nutzungs-/Ressourcenbalken. Die Breite steht als SVG-Attribut, nicht als
 * Inline-Style; der Wert daneben ist immer Text.
 */
.nutzbalken {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    min-width: 0;
}

.nutzbalken__spur {
    display: block;
    flex: 1 1 auto;
    min-width: 48px;
    width: 100%;
    height: 6px;
}

.nutzbalken__grund {
    fill: var(--rahmen-stark);
}

.nutzbalken__fuellung {
    fill: var(--ton-symbol);
}

.nutzbalken__text {
    flex: 0 0 auto;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--ton-text);
    white-space: nowrap;
}

/* Seitenkopf-Komponente (Klassen `.seitenkopf*` bestehen seit doc-M7). */
.seitenkopf__text {
    min-width: 0;
}

/* KPI-Kachel: Unterzeile und Kachel als Verweis. */
.kachel__unterzeile {
    margin-top: var(--abstand-6);
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

a.kachel {
    display: block;
    color: inherit;
}

a.kachel:hover {
    border-color: var(--rahmen-hover);
    color: inherit;
    text-decoration: none;
}

/* Panel (`x-karte`) mit Unterzeile. */
.karte__kopftext {
    min-width: 0;
}

.karte__unterzeile {
    margin: var(--abstand-2) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

/* --------------------------------------------------------------------------
 * Startseite als Cockpit (Redesign)
 *
 * Kennzahlen, dann Handlungsbedarf als eine gewichtete Liste nach Bereich,
 * darunter Sekundäres. Die älteren Regeln für `.kachelreihe` und
 * `.startraster` weiter oben werden hier nur überschrieben.
 * ------------------------------------------------------------------------ */

.kachelreihe {
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
}

.startraster {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
}

.abschnittskopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-6) var(--abstand-12);
    margin-bottom: var(--abstand-10);
}

.abschnittskopf h2 {
    margin: 0;
    font-size: 15px;
}

.abschnittskopf__zusatz {
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.handlungsbedarf {
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-karte);
    padding: var(--abstand-16);
    margin-bottom: var(--abstand-16);
}

.handlungsbedarf__bereich + .handlungsbedarf__bereich {
    margin-top: var(--abstand-12);
    padding-top: var(--abstand-12);
    border-top: 1px solid var(--rahmen-zeile);
}

.handlungsbedarf__bereichstitel {
    margin: 0 0 var(--abstand-6);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-gruppenlabel);
    font-weight: 500;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--text-schwach);
}

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

.handlungsbedarf__eintrag {
    display: grid;
    grid-template-columns: 4.5rem minmax(0, 1fr) auto;
    align-items: start;
    gap: var(--abstand-12);
    padding: var(--abstand-8);
    border-radius: var(--radius-feld);
    color: inherit;
}

.handlungsbedarf__eintrag:hover {
    background: var(--flaeche-nav-hover);
    color: inherit;
    text-decoration: none;
}

.handlungsbedarf__eintrag .status {
    justify-self: start;
}

.handlungsbedarf__titel {
    display: block;
    font-weight: 600;
    color: var(--text-primaer);
}

.handlungsbedarf__detail {
    display: block;
    margin-top: var(--abstand-2);
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.handlungsbedarf__pfeil {
    color: var(--text-schwach);
}

.handlungsbedarf__eintrag:hover .handlungsbedarf__pfeil {
    color: var(--akzent);
}

.handlungsbedarf__ruhig {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-10);
    margin: 0;
}

.karte__verweis {
    margin-left: auto;
    font-size: var(--groesse-meta);
    white-space: nowrap;
}

.arbeitsweg {
    margin: 0;
    padding-left: var(--abstand-18);
}

.arbeitsweg li + li {
    margin-top: var(--abstand-6);
}

.aufklapper {
    border-top: 1px solid var(--rahmen-zeile);
    padding: var(--abstand-10) 0 0;
    margin-top: var(--abstand-10);
}

.aufklapper > summary {
    cursor: pointer;
    font-weight: 600;
    padding: var(--abstand-2) 0;
}

.aufklapper[open] > summary {
    margin-bottom: var(--abstand-8);
}

.karte__koerper > .aufklapper:first-child {
    border-top: 0;
    margin-top: 0;
    padding-top: 0;
}

.karte__kopf {
    flex-wrap: wrap;
}

.karte__kopftext {
    flex: 1 1 16rem;
}

@media (max-width: 767px) {
    .kachelreihe {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .startraster {
        grid-template-columns: minmax(0, 1fr);
    }

    .handlungsbedarf {
        padding: var(--abstand-12);
    }

    .handlungsbedarf__eintrag {
        grid-template-columns: 3.5rem minmax(0, 1fr);
        padding: var(--abstand-8) var(--abstand-2);
    }

    .handlungsbedarf__pfeil {
        display: none;
    }

    .belegzeile {
        flex-wrap: wrap;
    }
}

/* --------------------------------------------------------------------------
 * Server & Ressourcen (Redesign)
 *
 * Je Server eine Karte: Identität · Situation (Kapazität, Messung, Verlauf) ·
 * Ressourcen · technische Zuordnung, darunter die Details. Bis 1279 px zwei
 * Ebenen (Identität + Situation, Ressourcen + Zuordnung), unter 768 px steht
 * alles untereinander, die Situation direkt unter dem Namen.
 * ------------------------------------------------------------------------ */

.serverliste {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-12);
}

.server {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.7fr) minmax(0, 0.9fr);
    grid-template-areas: "kopf situation ressourcen domains" "details details details details";
    gap: var(--abstand-16) var(--abstand-22);
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-karte);
    padding: var(--abstand-16);
}

.server__kopf { grid-area: kopf; min-width: 0; }
.server__situation { grid-area: situation; min-width: 0; }
.server__ressourcen { grid-area: ressourcen; }
.server__domains { grid-area: domains; min-width: 0; }
.server__details { grid-area: details; }

.server__name {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.server__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-10);
    margin: var(--abstand-6) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
    overflow-wrap: anywhere;
}

.server__providerstatus {
    margin: var(--abstand-8) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

/* Situation: Kapazität (gefüllte Pille) + Grund, darunter Messung und Verlauf –
   drei Aussagen, drei Formen, nie zu einer Pille verschmolzen. */
.server__situation {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--abstand-6);
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.server__situation > p {
    margin: 0;
}

.server__grund {
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
}

.server__grund--befund {
    font-family: var(--schrift-mono);
    font-weight: 600;
    color: var(--text-primaer);
}

.server__ort {
    display: block;
    font-family: var(--schrift-mono);
    font-weight: 400;
    font-size: var(--groesse-klein);
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
}

.server__messung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-8);
}

.server__messtitel {
    color: var(--text-tertiaer);
    font-size: var(--groesse-klein);
}

.server__zeit {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

/* Ressourcen nebeneinander; die ausschlaggebende rückt nach vorn, wird breiter
   und kräftiger, die anderen treten zurück – Werte bleiben immer lesbar. */
.server__ressourcen {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--abstand-12) var(--abstand-18);
    min-width: 0;
}

.server__ressourcen > .ressource {
    flex: 1 1 9rem;
    min-width: 0;
}

.server__ressourcen > .ressource--netz {
    flex-basis: 100%;
}

.server__ressourcen > .ressource--ausschlaggebend {
    order: -1;
    flex: 2 1 16rem;
}

.ressource--ausschlaggebend .nutzbalken__spur {
    height: 9px;
}

.ressource--ausschlaggebend .nutzbalken__name,
.ressource--ausschlaggebend .nutzbalken__text {
    font-weight: 600;
    color: var(--ton-text);
}

.ressource--ausschlaggebend .nutzbalken__text {
    font-size: var(--groesse-meta);
}

.ressource--gedaempft .nutzbalken__spur {
    height: 4px;
    opacity: 0.55;
}

.ressource--gedaempft .nutzbalken__name,
.ressource--gedaempft .nutzbalken__text {
    color: var(--text-tertiaer);
}

.server__ohnedaten {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.ressource:not(.nutzbalken) {
    display: grid;
    gap: var(--abstand-2);
    min-width: 0;
}

.ressource__name,
.nutzbalken__name {
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.ressource__wert {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
}

/* Name links, Wert rechts; reicht der Platz nicht, rückt der Wert in die
   nächste Zeile statt über den Namen zu laufen. Die Spur steht immer darunter. */
.nutzbalken--gestapelt {
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-6) var(--abstand-8);
}

.nutzbalken--gestapelt .nutzbalken__name { flex: 1 0 auto; }
.nutzbalken--gestapelt .nutzbalken__text { flex-shrink: 1; min-width: 0; margin-left: auto; white-space: normal; text-align: right; }
.nutzbalken--gestapelt .nutzbalken__spur { flex: 1 0 100%; min-width: 0; order: 1; }

.server__domains {
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.server__belegung {
    margin: 0 0 var(--abstand-8);
}

.server__belegungstitel {
    display: block;
    margin-bottom: var(--abstand-2);
    color: var(--text-tertiaer);
    font-size: var(--groesse-klein);
}

.server__erklaerung {
    margin: 0;
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.server__details {
    border-top: 1px solid var(--rahmen-zeile);
    padding-top: var(--abstand-10);
    min-width: 0;
}

.server__details > summary {
    cursor: pointer;
    font-weight: 600;
    font-size: var(--groesse-zelle);
}

.server__details[open] > summary {
    margin-bottom: var(--abstand-10);
}

.server__details h5 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-8);
    margin: var(--abstand-16) 0 var(--abstand-8);
    font-size: var(--groesse-zelle);
}

.server__detailraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-16) var(--abstand-22);
    overflow-wrap: anywhere;
}

.server__detailraster h5 {
    margin-top: 0;
}

.tabellenrahmen {
    overflow-x: auto;
    margin: var(--abstand-8) 0;
}

.zeitraumwahl {
    margin: var(--abstand-8) 0;
}

.server__details > summary {
    flex-wrap: wrap;
}

.server__detailtitel {
    flex: none;
    white-space: nowrap;
}

.server__detailinhalt {
    font-weight: 400;
    color: var(--text-tertiaer);
}

.server__detailabschnitt + .server__detailabschnitt {
    border-top: 1px solid var(--rahmen-zeile);
    margin-top: var(--abstand-16);
}

.server__detailabschnitt > h5:first-child {
    margin-top: var(--abstand-12);
}

.server__domainraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 var(--abstand-22);
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
 * Kapazität (Server & Ressourcen)
 *
 * Kapazitätszustand als gefüllte Pille (Symbol + Text + Farbe) – getrennt von
 * der Messaktualität (Umriss-Pille) und der Verlaufsreife (neutral, grau).
 * Spalten: 1440 px nebeneinander, bis 1279 px 2 × 2, unter 768 px gestapelt.
 * ------------------------------------------------------------------------ */

.status--zustand {
    font-size: var(--groesse-meta);
    font-weight: 600;
    padding: 1px var(--abstand-10);
}

.status--zustand.ton--info {
    background: var(--flaeche-erhoeht);
    border-color: var(--rahmen-hover);
    --ton-text: var(--text-primaer);
}

.status--zustand.ton--ok {
    background: var(--akzent-punkt-hof);
    border-color: var(--banner-rahmen);
    --ton-text: var(--akzent-hell);
}

.kapazitaet {
    margin-bottom: var(--abstand-22);
}

.kapazitaet > .abschnittskopf {
    margin-bottom: var(--abstand-8);
}

.kapazitaet__spalten {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    background: var(--rahmen-stark);
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-kachel);
    overflow: hidden;
}

.kapazitaet__spalte {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-6);
    min-width: 0;
    padding: var(--abstand-12) var(--abstand-14);
    background: var(--flaeche-karte);
}

.kapazitaet__kopf {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--abstand-8);
    margin: 0;
    font-size: inherit;
}

.kapazitaet__anzahl {
    font-family: var(--schrift-mono);
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primaer);
}

.kapazitaet__erklaerung,
.kapazitaet__leer {
    margin: 0;
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.kapazitaet__leer {
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.kapazitaet__leer::before {
    content: "— ";
    color: var(--text-tertiaer);
}

.kapazitaet__liste {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.kapazitaet__eintrag {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    margin: 0 calc(-1 * var(--abstand-6));
    padding: var(--abstand-6);
    border-radius: var(--radius-chip);
    color: var(--text-sekundaer);
    min-width: 0;
}

.kapazitaet__eintrag:hover {
    background: var(--flaeche-nav-hover);
    text-decoration: none;
}

.kapazitaet__eintrag:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 0;
}

.kapazitaet__name {
    font-size: var(--groesse-zelle);
    font-weight: 600;
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.kapazitaet__grund {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.kapazitaet__ort {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
}

.kapazitaet__fuss {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-6);
    margin-top: var(--abstand-10);
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.kapazitaet__fuss > p {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-6) var(--abstand-12);
    margin: 0;
}

.kapazitaet__namen {
    overflow-wrap: anywhere;
}

.kapazitaet__reifetitel {
    font-weight: 600;
    color: var(--text-primaer);
}

/* Verlaufsreife: bewusst farblos – drei graue Segmente, Text immer daneben. */
.reife {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-6);
    max-width: 100%;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-sekundaer);
}

.reife__segmente {
    flex: none;
    width: 34px;
    height: 6px;
}

.reife__voll {
    fill: var(--text-sekundaer);
    stroke: var(--text-sekundaer);
    stroke-width: 1;
}

.reife__leer {
    fill: none;
    stroke: var(--text-schwach);
    stroke-width: 1;
}

.reife__text {
    overflow-wrap: anywhere;
}

/* Gruppen der Serverliste: Symbol + Text in Zustandsfarbe, Linie dahinter. */
.serverbereich > .abschnittskopf {
    margin-bottom: var(--abstand-8);
}

.servergruppe + .servergruppe {
    margin-top: var(--abstand-18);
}

.servergruppe__titel {
    display: flex;
    align-items: center;
    gap: var(--abstand-8);
    margin: 0 0 var(--abstand-8);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-spaltenkopf);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ton-text);
}

.servergruppe__titel.ton--info,
.servergruppe__titel.ton--ok {
    color: var(--text-sekundaer);
}

.servergruppe__symbol {
    color: var(--ton-symbol);
}

.servergruppe__titel::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rahmen-stark);
}

/* Ein Engpass darf nicht in einer ruhigen Karte untergehen. */
.server[data-kapazitaet="engpass"] {
    border-color: var(--ton-error-rahmen);
}

.server[data-kapazitaet="beobachten"] {
    border-color: var(--ton-warn-rahmen);
}

/* --------------------------------------------------------------------------
 * Anwendungen nach Server (INV-1.5)
 *
 * Je Deployment-Server eine Karte: verlinkter Servername, Zähler und die
 * Host-Ressourcen im Kopf, darunter eine kompakte Anwendungstabelle. Externe
 * und nicht zuordenbare Deployments stehen in eigenen Gruppen. Unter 768 px
 * wird die Tabelle zur gestapelten Liste, damit nichts horizontal überläuft.
 * ------------------------------------------------------------------------ */

.anwendungsbereich {
    margin-top: var(--abstand-18);
}

.anwendungsgruppe {
    border: 1px solid var(--rahmen-stark);
    background: var(--flaeche-karte);
    border-radius: var(--radius-karte);
    padding: var(--abstand-16);
}

.anwendungsgruppe + .anwendungsgruppe {
    margin-top: var(--abstand-16);
}

.anwendungsgruppe__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-6) var(--abstand-12);
    margin-bottom: var(--abstand-8);
}

.anwendungsgruppe__titel {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    overflow-wrap: anywhere;
}

.anwendungsgruppe__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-8);
    margin: 0;
}

.anwendungsgruppe__messung {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-8);
    margin: 0;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.anwendungsgruppe__messtitel {
    color: var(--text-tertiaer);
    font-size: var(--groesse-klein);
}

.anwendungsgruppe__zeit {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.anwendungsgruppe__quelle {
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.anwendungsgruppe__ressourcen {
    display: flex;
    flex-wrap: wrap;
    align-content: start;
    gap: var(--abstand-8) var(--abstand-18);
    margin: var(--abstand-10) 0 0;
    min-width: 0;
}

.anwendungsgruppe__ressourcen > .ressource {
    flex: 1 1 8rem;
    min-width: 0;
}

.anwendungsgruppe__ressourcen > .ressource--netz {
    flex-basis: 100%;
}

.anwendungsgruppe__leer {
    margin: 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.anwendungsgruppe__hinweis {
    margin: var(--abstand-8) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
    max-width: 72rem;
}

.anwendungsgruppe .tabellenrahmen {
    margin: var(--abstand-8) 0 0;
}

@media (max-width: 767px) {
    .anwendungstabelle,
    .anwendungstabelle thead,
    .anwendungstabelle tbody,
    .anwendungstabelle tr,
    .anwendungstabelle td {
        display: block;
        width: 100%;
    }

    .anwendungstabelle thead {
        display: none;
    }

    .anwendungstabelle tr {
        padding: var(--abstand-8);
        border: 1px solid var(--rahmen-zeile);
        border-radius: var(--radius-feld);
    }

    .anwendungstabelle tr + tr {
        margin-top: var(--abstand-8);
    }

    .anwendungstabelle td {
        display: grid;
        grid-template-columns: 6.5rem minmax(0, 1fr);
        gap: var(--abstand-6);
        padding: var(--abstand-6) 0;
        border: 0;
    }

    .anwendungstabelle td::before {
        content: attr(data-label);
        font-size: var(--groesse-meta);
        color: var(--text-tertiaer);
    }
}

/* Details: Befund zuerst, dann Verlaufsreife, dann Werte. */
.befundkasten {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-6) var(--abstand-12);
    margin: 0 0 var(--abstand-8);
    padding: var(--abstand-8) var(--abstand-12);
    border: 1px solid var(--ton-rahmen);
    background: var(--ton-flaeche);
    border-radius: var(--radius-feld);
}

.befundkasten__wert {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.reifehinweis {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-6) var(--abstand-12);
    margin: 0 0 var(--abstand-8);
    padding: var(--abstand-6) var(--abstand-12);
    border: 1px dashed var(--rahmen-hover);
    border-radius: var(--radius-feld);
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.zeile--betroffen td {
    background: var(--ton-flaeche);
    color: var(--ton-text);
    font-weight: 600;
}

.zeile__symbol {
    margin-right: var(--abstand-6);
    color: var(--ton-symbol);
}

/* Technische DNS-Namen: nach Zone gruppiert, lange Namen brechen um, die
   Tabelle scrollt höchstens in ihrem Rahmen – nie die Seite. */
.dnsnamen {
    margin-top: var(--abstand-6);
}

.dnstabelle {
    min-width: 34rem;
}

.dnstabelle td:first-child {
    overflow-wrap: anywhere;
    min-width: 12rem;
}

.dnstabelle__zone th {
    padding-top: var(--abstand-10);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primaer);
    background: var(--flaeche-erhoeht);
}

@media (max-width: 1279px) {
    .server {
        grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
        grid-template-areas: "kopf situation" "ressourcen domains" "details details";
    }

    .kapazitaet__spalten {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .server {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "kopf" "situation" "ressourcen" "domains" "details";
        gap: var(--abstand-12);
        padding: var(--abstand-12);
    }

    .server__detailraster,
    .server__domainraster {
        grid-template-columns: minmax(0, 1fr);
    }

    .kapazitaet__spalten {
        grid-template-columns: minmax(0, 1fr);
    }

    .kapazitaet__spalte {
        padding: var(--abstand-10) var(--abstand-12);
    }
}

/* --------------------------------------------------------------------------
 * Rahmen responsiv
 *
 * 1440 px: Rahmen wie gehabt. Bis 1279 px: schmalere Seitenleiste und
 * Ränder. Unter 768 px: Seitenleiste als Drawer (natives `popover`, Escape
 * und Klick daneben schließen ohne Skript), Kopfzeile bricht um.
 *
 * Ohne Popover-Unterstützung steht die Seitenleiste unter 768 px als Block
 * über dem Inhalt — erreichbar bleibt die Navigation in jedem Fall.
 * ------------------------------------------------------------------------ */

.menueknopf,
.sidebar__schliessen {
    display: none;
    align-items: center;
    gap: var(--abstand-6);
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-feld);
    border-radius: var(--radius-feld);
    color: var(--text-primaer);
    font-size: var(--groesse-zelle);
    cursor: pointer;
}

.menueknopf {
    padding: 6px var(--abstand-10);
}

.menueknopf:hover,
.sidebar__schliessen:hover {
    border-color: var(--rahmen-hover);
}

.sidebar__schliessen {
    margin-left: auto;
    width: 32px;
    height: 32px;
    justify-content: center;
    padding: 0;
    font-size: 18px;
    line-height: 1;
}

.benutzer__name,
.benutzer__zustand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.krume {
    min-width: 0;
    overflow-wrap: anywhere;
}

@media (max-width: 1279px) {
    :root {
        --breite-sidebar: 224px;
        --rand-inhalt: 24px;
    }

    .sidebar {
        padding: var(--abstand-18) var(--abstand-10);
    }
}

@media (max-width: 767px) {
    :root {
        --rand-inhalt: 16px;
    }

    .rahmen {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        flex: none;
        height: auto;
        position: static;
        border-right: 0;
        border-bottom: 1px solid var(--rahmen-stark);
    }

    .topbar {
        flex-wrap: wrap;
        row-gap: var(--abstand-8);
        column-gap: var(--abstand-12);
        padding-top: var(--abstand-10);
        padding-bottom: var(--abstand-10);
    }

    .topbar__rechts {
        flex-wrap: wrap;
    }

    .inhalt {
        padding: var(--abstand-20) var(--rand-inhalt) 64px;
    }

    .seitenkopf {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    @supports selector(:popover-open) {
        .menueknopf,
        .sidebar__schliessen {
            display: inline-flex;
        }

        .sidebar:not(:popover-open) {
            display: none;
        }

        .sidebar:popover-open {
            position: fixed;
            inset: 0 auto 0 0;
            width: var(--breite-drawer);
            height: 100dvh;
            border-right: 1px solid var(--rahmen-stark);
            border-bottom: 0;
            box-shadow: 24px 0 60px rgba(0, 0, 0, 0.45);
            animation: dcFade 0.14s ease-out;
        }

        /* `::backdrop` erbt in älteren Browsern keine Eigenschaften von
           :root — der Wert von --overlay-schublade steht deshalb direkt. */
        .sidebar::backdrop {
            background: rgba(4, 5, 4, 0.62);
        }
    }
}

/* --------------------------------------------------------------------------
 * Technische Domains und DNS & Mailserver (Redesign)
 *
 * Oben die Lage, dann Filter, dann je Domain eine kompakte Befundzeile mit
 * aufklappbaren Details. Ab 1024 px stehen Domain, Status, Befund,
 * Zuordnung/Quellen und Aktion nebeneinander; darunter rücken Befund und
 * Zuordnung in eine zweite Reihe, unter 768 px steht alles untereinander,
 * jeweils mit eigener Beschriftung. Zeilen ohne Befund treten zurück.
 * Technische Werte brechen um und werden nie abgeschnitten.
 * ------------------------------------------------------------------------ */

.lage {
    margin-bottom: var(--abstand-16);
}

.lage__zeile {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-6) var(--abstand-8);
    margin: 0;
    padding: 0;
    list-style: none;
}

.lage__eintrag {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-6);
    max-width: 100%;
    color: var(--text-sekundaer);
    font-size: var(--groesse-klein);
}

a.lage__eintrag,
.lage__alle {
    border-radius: var(--radius-badge);
}

a.lage__eintrag:hover .status {
    border-color: var(--rahmen-hover);
}

/* Aktiver Filter: Rahmen UND Text „aktiver Filter“, nie Farbe allein. */
.lage__eintrag--aktiv .status {
    outline: 1px solid var(--text-primaer);
    outline-offset: 1px;
}

.lage__eintrag--aktiv::after {
    content: "aktiver Filter";
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

/* „Alle“ ist eine Rücksetzung, kein Status: Metadaten-Stil. */
.lage__alle {
    display: inline-flex;
    align-items: center;
    gap: var(--abstand-6);
    padding: 1px var(--abstand-8);
    border: 1px solid var(--rahmen-sekundaer);
    color: var(--text-sekundaer);
    font-size: var(--groesse-klein);
    line-height: 1.5;
}

.lage__alle:hover {
    color: var(--text-primaer);
    border-color: var(--rahmen-hover);
    text-decoration: none;
}

.lage__quelle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-10);
    margin: var(--abstand-10) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
}

.lage__quelltitel {
    font-weight: 600;
    color: var(--text-primaer);
}

.lage__hinweis {
    margin: var(--abstand-8) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
    max-width: 72rem;
}

.lage__legende {
    margin-top: var(--abstand-8);
    padding-top: var(--abstand-8);
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.lage .status,
.befundzeile .status {
    white-space: normal;
}

/* Filterleiste (Formular) im dunklen Thema, Fokus als Akzentrahmen + Ring. */
.filterklappe {
    margin: 0 0 var(--abstand-16);
    padding-top: var(--abstand-8);
}

.filterklappe__zahl {
    font-weight: 400;
    color: var(--akzent-hell);
}

.filterleiste {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--abstand-8) var(--abstand-12);
}

.filterleiste__feld {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
    min-width: 0;
}

.filterleiste__feld input,
.filterleiste__feld select {
    max-width: 22rem;
    box-sizing: border-box;
    min-height: 32px;
    background: var(--flaeche-erhoeht);
    border: 1px solid var(--rahmen-feld);
    border-radius: 6px;
    color: var(--text-primaer);
    color-scheme: dark;
    font-size: var(--groesse-zelle);
    padding: 5px var(--abstand-8);
}

.filterleiste__feld input:hover,
.filterleiste__feld select:hover {
    border-color: var(--rahmen-hover);
}

.filterleiste__feld input:focus-visible,
.filterleiste__feld select:focus-visible {
    border-color: var(--akzent);
    outline: 2px solid var(--akzent);
    outline-offset: 1px;
}

.filterleiste__knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-8);
}

.befundfilter {
    margin: 0;
}

/* Befundliste */
.befundliste__kopf,
.befundzeile__primaer {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(8.5rem, 0.8fr) minmax(0, 2fr) minmax(0, 1fr) auto;
    gap: var(--abstand-8) var(--abstand-16);
    align-items: start;
}

.befundliste__kopf {
    padding: 0 var(--abstand-16) var(--abstand-6);
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.befundliste__gruppe {
    margin: var(--abstand-16) 0 var(--abstand-6);
    font-size: var(--groesse-meta);
    font-weight: 600;
    color: var(--text-sekundaer);
}

.befundliste__zeilen {
    margin: 0;
    padding: 0;
    list-style: none;
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-karte);
    background: var(--flaeche-karte);
}

.befundzeile {
    padding: var(--abstand-10) var(--abstand-16);
    min-width: 0;
}

.befundzeile + .befundzeile {
    border-top: 1px solid var(--rahmen-zeile);
}

.befundzeile--ruhig .befundzeile__name,
.befundzeile--ruhig .befundzeile__zuordnung {
    color: var(--text-sekundaer);
}

.befundzeile__primaer > div {
    min-width: 0;
    overflow-wrap: anywhere;
}

.befundzeile__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.befundzeile__name {
    font-weight: 500;
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.befundzeile__zusatz {
    display: block;
    font-size: var(--groesse-meta);
    color: var(--warnung);
}

.befundzeile__befundtexte {
    display: block;
    margin-top: var(--abstand-2);
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.befundzeile__aktion {
    white-space: nowrap;
    font-size: var(--groesse-zelle);
}

.quellen {
    display: flex;
    flex-direction: column;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.dnsbefund + .dnsbefund {
    margin-top: var(--abstand-6);
}

.dnsbefund__text,
.dnsbefund__bestaetigt {
    font-size: var(--groesse-meta);
}

.sollist {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 0 var(--abstand-8);
    margin: var(--abstand-2) 0 0;
    font-size: var(--groesse-meta);
}

.sollist__zeile {
    display: contents;
}

.sollist dt {
    color: var(--text-tertiaer);
}

.sollist dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
    word-break: break-word;
    color: var(--text-primaer);
}

.befundzeile__details {
    margin-top: var(--abstand-6);
    min-width: 0;
}

.befundzeile__details > summary {
    cursor: pointer;
    width: max-content;
    max-width: 100%;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.befundzeile__details > summary:hover {
    color: var(--text-primaer);
}

.befundzeile__detailraster {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--abstand-12) var(--abstand-22);
    margin-top: var(--abstand-10);
    padding: var(--abstand-12);
    border: 1px solid var(--rahmen-zeile);
    border-radius: var(--radius-feld);
    background: var(--flaeche-seite);
    overflow-wrap: anywhere;
}

.befundzeile__detailraster h3,
.befundzeile__detailraster h4 {
    margin: 0 0 var(--abstand-6);
    font-size: var(--groesse-zelle);
}

.befundzeile__breit {
    grid-column: 1 / -1;
}

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

.pruefliste__eintrag {
    display: grid;
    grid-template-columns: 4.5rem 9.5rem minmax(0, 1fr);
    gap: var(--abstand-2) var(--abstand-10);
    align-items: start;
    padding: var(--abstand-2) 0;
}

.pruefliste__eintrag + .pruefliste__eintrag {
    border-top: 1px solid var(--rahmen-zeile);
}

.pruefliste__wert,
.dnswerte {
    min-width: 0;
    font-size: var(--groesse-meta);
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Bereiche der Zeile; der Status bricht nie mitten im Wort um. */
.befundzeile__domain { grid-area: domain; }
.befundzeile__befund { grid-area: befund; }
.befundzeile__zuordnung { grid-area: zuordnung; }
.befundzeile__aktion { grid-area: aktion; }

.befundzeile__primaer > .befundzeile__status {
    grid-area: status;
    overflow-wrap: normal;
}

.befundliste__kopf,
.befundzeile__primaer {
    grid-template-areas: "domain status befund zuordnung aktion";
}

/* Bis 1279 px: Domain und Status oben, Befund und Zuordnung/Quellen darunter. */
@media (max-width: 1279px) {
    .befundliste__kopf {
        display: none;
    }

    .befundzeile__primaer {
        grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
        grid-template-areas: "domain status" "befund zuordnung" "befund aktion";
    }

    .befundzeile__label {
        position: static;
        width: auto;
        height: auto;
        clip: auto;
        display: block;
        font-size: var(--groesse-meta);
        color: var(--text-tertiaer);
    }

    .befundzeile__domain .befundzeile__label,
    .befundzeile__status .befundzeile__label {
        position: absolute;
        width: 1px;
        height: 1px;
        clip: rect(0 0 0 0);
    }
}

@media (max-width: 1023px) {
    .befundzeile__primaer {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "domain status" "befund befund" "zuordnung zuordnung" "aktion aktion";
    }

    .befundzeile__status {
        justify-self: end;
    }

    .quellen {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 0 var(--abstand-10);
    }
}

@media (max-width: 767px) {
    .befundzeile {
        padding: var(--abstand-10) var(--abstand-12);
    }

    .befundzeile__primaer {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "domain" "status" "befund" "zuordnung" "aktion";
    }

    .befundzeile__status {
        justify-self: start;
    }

    .befundzeile__detailraster {
        grid-template-columns: minmax(0, 1fr);
        padding: var(--abstand-10);
    }

    .pruefliste__eintrag {
        grid-template-columns: 4rem minmax(0, 1fr);
    }

    .pruefliste__wert {
        grid-column: 1 / -1;
    }

    .filterleiste__feld {
        flex: 1 1 10rem;
    }
}

/* Mail-Abgleich im Befund: Symbol + Text, ohne zweites Badge neben dem Status. */
.dnsbefund--mail {
    margin: 0;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.dnsbefund__art {
    font-family: var(--schrift-mono);
    color: var(--ton-warn-symbol);
}

.sollist__verweis {
    margin: var(--abstand-2) 0 0;
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}


.befundzeile__erklaerung {
    margin: 0 0 var(--abstand-6);
    font-size: var(--groesse-meta);
}

/* Bekannt statt offen: bestätigte Befunde und Befunde ignorierter Domains
 * bleiben lesbar, treten aber zurück (kein Handlungsbedarf). */
.dnsbefund--bestaetigt .dnsbefund__art {
    color: var(--text-tertiaer);
}

.dnsbefund__bestaetigt {
    display: block;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.befundzeile__zusatz--ruhig {
    color: var(--text-tertiaer);
}

/* --------------------------------------------------------------------------
 * Redesign-Konsistenz (Start, Server & Ressourcen, Technische Domains,
 * DNS & Mailserver)
 *
 * Ein Stil für alle aufklappbaren Details: Pfeil + Text, kompakt, lange
 * Titel brechen um, Fokus sichtbar. Metadaten (Chip) sind eckig, ohne
 * Symbol und ohne Statusfarbe – Status (x-status) bleibt die runde Pille
 * mit Symbol, Text und Farbe.
 * ------------------------------------------------------------------------ */

.aufklapper > summary,
.server__details > summary,
.befundzeile__details > summary {
    display: flex;
    align-items: baseline;
    gap: var(--abstand-6);
    width: fit-content;
    max-width: 100%;
    padding: var(--abstand-2) 0;
    list-style: none;
    cursor: pointer;
    font-size: var(--groesse-meta);
    font-weight: 600;
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
    border-radius: 4px;
}

.aufklapper > summary::-webkit-details-marker,
.server__details > summary::-webkit-details-marker,
.befundzeile__details > summary::-webkit-details-marker {
    display: none;
}

.aufklapper > summary::before,
.server__details > summary::before,
.befundzeile__details > summary::before {
    content: "▸";
    flex: none;
    font-family: var(--schrift-mono);
    color: var(--text-tertiaer);
    transition: transform 0.12s ease-out;
}

.aufklapper[open] > summary::before,
.server__details[open] > summary::before,
.befundzeile__details[open] > summary::before {
    transform: rotate(90deg);
}

.aufklapper > summary:hover,
.server__details > summary:hover,
.befundzeile__details > summary:hover {
    color: var(--text-primaer);
}

.aufklapper[open] > summary,
.server__details[open] > summary,
.befundzeile__details[open] > summary {
    margin-bottom: var(--abstand-8);
}

@media (prefers-reduced-motion: reduce) {
    .aufklapper > summary::before,
    .server__details > summary::before,
    .befundzeile__details > summary::before {
        transition: none;
    }
}

/* Metadaten/Label: Quelle, Typ, Herkunft, aktiv, extern, nicht verwendet. */
.chip {
    display: inline-block;
    border-radius: 4px;
    border-color: var(--rahmen-sekundaer);
    background: transparent;
    color: var(--text-sekundaer);
    line-height: 1.45;
    white-space: nowrap;
}

/* Abschnittskopf auch in Lageblöcken ohne eigene Karte. */
.lage > .abschnittskopf {
    margin-bottom: var(--abstand-8);
}

/* Mobil: Kopf und Lage verdichten, damit die Liste früher beginnt. */
@media (max-width: 767px) {
    .seitenkopf {
        gap: var(--abstand-10);
        margin-bottom: var(--abstand-14);
    }

    .seitenkopf h1 {
        font-size: 22px;
    }

    .seitenkopf__unterzeile {
        font-size: var(--groesse-meta);
    }

    .seitenkopf .knopfreihe {
        justify-content: flex-start;
        gap: var(--abstand-6);
    }

    .seitenkopf .knopf {
        padding: 6px var(--abstand-10);
        font-size: var(--groesse-meta);
    }

    .lage {
        margin-bottom: var(--abstand-12);
    }

    .lage__eintrag--aktiv::after {
        content: "aktiv";
    }

    .filterleiste__feld {
        flex: 1 1 9rem;
    }

    .filterleiste__feld input,
    .filterleiste__feld select {
        max-width: none;
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
 * Verträge und Verbrauch (Redesign)
 *
 * Beide nutzen Lage und Befundliste der Technik-Seiten. Ein Vertrag ist eine
 * Befundzeile: Kunde/Vertrag, Status, Nutzung gegen Grenze, Preis bzw.
 * Leistungen, Aktion. Verträge ohne Handlungsbedarf treten zurück.
 * ------------------------------------------------------------------------ */

.vertragszeile__typ,
.vertragszeile__leistungen,
.vertragszeile__gesamt {
    display: block;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.vertragszeile__typ .chip {
    margin-left: var(--abstand-2);
}

.vertragszeile__leistungen {
    color: var(--text-tertiaer);
}

.nutzzeile {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-8);
    margin: 0;
    font-size: var(--groesse-meta);
}

.nutzzeile + .nutzzeile {
    margin-top: var(--abstand-6);
}

.nutzzeile__wert {
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

/* Verträge mit Handlungsbedarf in der Lage: Name als Sprungziel, Gründe als Text. */
.nutzungsbedarf {
    margin: var(--abstand-10) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--groesse-meta);
}

.nutzungsbedarf__eintrag {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-10);
    padding: var(--abstand-2) 0;
    overflow-wrap: anywhere;
}

.nutzungsbedarf__gruende {
    display: flex;
    flex-wrap: wrap;
    gap: 0 var(--abstand-10);
    color: var(--text-sekundaer);
}

.befundzeile--vertrag:target {
    outline: 1px solid var(--akzent);
    outline-offset: -1px;
}

/* Verbrauch: Nutzung je Art als Balken (Wert + Grenze als Text), Status nur bei Hinweis. */
.nutzart {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    min-width: 0;
}

.nutzart + .nutzart {
    margin-top: var(--abstand-8);
}

.nutzart .nutzbalken {
    width: 100%;
}

.nutzart .status {
    align-self: flex-start;
}

.nutzart__ohne {
    margin: 0;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
    overflow-wrap: anywhere;
}

.nutzart__name {
    font-weight: 600;
    color: var(--text-primaer);
}

/* Messung je Domain → Summe je Vertrag → Grenze des Vertrags. */
.nutzungsmodell {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-6);
    margin: var(--abstand-10) 0 0;
    padding: 0;
    list-style: none;
    font-size: var(--groesse-meta);
    color: var(--text-sekundaer);
}

.nutzungsmodell li + li::before {
    content: "→";
    margin-right: var(--abstand-6);
    font-family: var(--schrift-mono);
    color: var(--text-tertiaer);
}

.nutzungsmodell strong {
    color: var(--text-primaer);
    font-weight: 600;
}

/* Beitrag je Domain: exakte Werte als Tabelle, scrollt im eigenen Rahmen. */
.beitraege {
    max-width: 100%;
    overflow-x: auto;
}

.beitraege__tabelle {
    width: 100%;
    font-size: var(--groesse-meta);
}

.beitraege__tabelle th,
.beitraege__tabelle td {
    padding: var(--abstand-2) var(--abstand-8) var(--abstand-2) 0;
    vertical-align: baseline;
}

.beitraege__domain {
    overflow-wrap: anywhere;
    word-break: break-word;
    min-width: 10rem;
}

.beitraege__tabelle tfoot th,
.beitraege__tabelle tfoot td {
    border-top: 1px solid var(--rahmen-sekundaer);
    color: var(--text-primaer);
}

.legacyverlauf {
    margin-top: var(--abstand-22);
}

.legacyverlauf > .abschnittskopf .chip {
    margin-left: var(--abstand-6);
}

.legacyverlauf__text {
    margin: 0 0 var(--abstand-8);
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
    max-width: 72rem;
}

.lage__gruende {
    margin-top: var(--abstand-6);
}

/* Vertrags- und Nutzungszeilen: Statusspalte breit genug für „offener Nutzungshinweis“. */
@media (min-width: 1280px) {
    .befundliste__kopf--vertrag,
    .befundzeile--vertrag > .befundzeile__primaer,
    .befundzeile--nutzung > .befundzeile__primaer {
        grid-template-columns: minmax(0, 1.4fr) minmax(12.5rem, 0.8fr) minmax(0, 2fr) minmax(0, 0.9fr) auto;
    }
}

/* Beitragstabelle: Werte, Zeitpunkte und Status brechen nicht; nur die Domain
 * bricht um. Reicht die Breite nicht, scrollt die Tabelle im eigenen Rahmen. */
.beitraege__tabelle th,
.beitraege__tabelle td,
.befundzeile .beitraege__tabelle .status {
    white-space: nowrap;
}

.beitraege__tabelle .beitraege__domain {
    white-space: normal;
}

.beitraege__tabelle th + th,
.beitraege__tabelle td + td {
    padding-left: var(--abstand-10);
}

/* --------------------------------------------------------------------------
 * DNS-Ziele
 *
 * Zwei Übersichten in einem Kasten (Zielverteilung, Namen je Server),
 * Filter, dann das Inventar nach Zone mit aufklappbaren Records. Spalten
 * richten sich nach der tatsächlich verfügbaren Breite (auto-fit bzw.
 * Container-Abfrage), nicht nach festen Viewport-Stufen. Balken sind SVG
 * mit der Breite als Attribut und tragen keine Aussage allein; Zeichen,
 * Text und Zahl stehen immer daneben. Extern ist neutral (Ton info).
 * ------------------------------------------------------------------------ */

.dnsuebersicht {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 21rem), 1fr));
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-feld);
    background: var(--flaeche-karte);
    overflow: hidden;
}

.dnsuebersicht__spalte {
    min-width: 0;
    padding: var(--abstand-10) var(--abstand-16) var(--abstand-12);
    display: flex;
    flex-direction: column;
    gap: var(--abstand-6);
    /* Trennlinie links und oben; die äußere schneidet overflow ab. */
    box-shadow: -1px 0 0 var(--rahmen-stark), 0 -1px 0 var(--rahmen-stark);
}

.dnsuebersicht__kopf,
.dnsuebersicht__spalte > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-10);
}

.dnsuebersicht__kopf h3,
.dnsuebersicht__titel {
    margin: 0;
    font-size: var(--groesse-zelle);
    font-weight: 600;
    color: var(--text-primaer);
}

.dnsuebersicht__spalte > summary {
    cursor: pointer;
}

.dnsuebersicht__spalte[open] > summary {
    margin-bottom: var(--abstand-2);
}

.dnsuebersicht__zusatz,
.dnsuebersicht__hinweis {
    font-size: var(--groesse-klein);
    font-weight: 400;
    color: var(--text-tertiaer);
}

.dnsuebersicht__hinweis {
    margin: var(--abstand-2) 0 0;
}

.dnsbalkenliste {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Name | Balken | Zahl | Zusatz; der Balken schrumpft zuerst. */
.dnsbalken {
    display: grid;
    grid-template-columns: minmax(8.5rem, max-content) minmax(2.5rem, 1fr) 2.5rem 3.6rem;
    align-items: center;
    gap: var(--abstand-2) var(--abstand-12);
    padding: 3px var(--abstand-6);
    margin: 0 calc(-1 * var(--abstand-6));
    border: 1px solid transparent;
    border-radius: var(--radius-chip);
    color: var(--text-sekundaer);
    font-size: var(--groesse-meta);
    text-decoration: none;
}

.dnsbalken:hover {
    background: var(--flaeche-nav-hover);
    text-decoration: none;
}

.dnsbalken:focus-visible,
.dnsbalken__teil:focus-visible,
.dnsranking__oeffnen:focus-visible,
.dnszone__ziel:focus-visible {
    outline-offset: -2px;
}

.dnsbalken__name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ton-text);
}

.dnsbalken--server {
    grid-template-columns: minmax(8.5rem, 13rem) minmax(2.5rem, 1fr) 2.5rem 3.6rem;
}

.dnsbalken--server .dnsbalken__name {
    color: var(--text-primaer);
    /* Servernamen brechen um statt abgeschnitten zu werden. */
    white-space: normal;
    overflow-wrap: anywhere;
}

.dnsbalken__symbol {
    display: inline-block;
    width: 1.1em;
    color: var(--ton-symbol);
    font-family: var(--schrift-mono);
    font-weight: 600;
}

.dnsbalken__spur {
    display: block;
    width: 100%;
    height: 6px;
}

.dnsbalken__grund {
    fill: var(--rahmen-stark);
}

.dnsbalken__fuellung {
    fill: var(--ton-symbol);
}

/* Neutrales Extern: gedämpfter Balken statt Akzent oder Warnfarbe. */
.dnsbalken.ton--info .dnsbalken__fuellung {
    fill: var(--text-schwach);
}

.dnsbalken__zahl {
    font-family: var(--schrift-mono);
    color: var(--text-primaer);
    text-align: right;
}

.dnsbalken__anteil {
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
    text-align: right;
    white-space: nowrap;
}

/* Aktiver Filter: Rahmen und Screenreader-Text, nie Farbe allein. */
.dnsbalken--aktiv {
    border-color: var(--banner-rahmen);
    background: var(--banner-flaeche);
}

.dnsbalken__teile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-12);
    margin: 0 0 var(--abstand-2);
    padding: 0 0 0 1.4em;
    list-style: none;
    font-size: var(--groesse-klein);
}

.dnsbalken__teil {
    color: var(--text-tertiaer);
    border-radius: var(--radius-chip);
}

.dnsbalken__teil:hover {
    color: var(--text-primaer);
}

.dnsbalken__teil--aktiv {
    color: var(--text-primaer);
    text-decoration: underline;
}

.dnsranking__zeile {
    display: flex;
    align-items: center;
    gap: var(--abstand-6);
}

.dnsranking__zeile > .dnsbalken {
    flex: 1 1 auto;
    min-width: 0;
}

.dnsranking__zeile--gedaempft .dnsbalken__name,
.dnsranking__zeile--gedaempft .dnsbalken__zahl {
    color: var(--text-tertiaer);
}

.dnsranking__zeile--gedaempft .dnsbalken__fuellung {
    fill: var(--rahmen-hover);
}

.dnsranking__oeffnen {
    flex: 0 0 auto;
    padding: 2px var(--abstand-6);
    border-radius: var(--radius-chip);
    color: var(--text-tertiaer);
    font-size: var(--groesse-meta);
}

.dnsranking__oeffnen:hover {
    color: var(--akzent-hell);
    text-decoration: none;
}

.dnsranking__mehr > summary {
    cursor: pointer;
    padding: var(--abstand-2) 0;
    font-size: var(--groesse-klein);
    color: var(--text-sekundaer);
}

/* Auswahlfelder wachsen nicht mit dem längsten Server- oder Zonennamen, damit
 * die Filterleiste auf Desktopbreite einzeilig bleibt; der gewählte Wert
 * steht vollständig im Filterstand darunter. */
.dnsfilterklappe .filterleiste__feld select {
    max-width: 13rem;
}

.dnsfilterklappe .filterleiste__feld input {
    width: 12rem;
}

/* Filterstand: gesetzte Filter lösbar, Treffer, Weg zum Server. */
.dnsfilterstand {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--abstand-6) var(--abstand-12);
    margin: 0 0 var(--abstand-16);
    padding: var(--abstand-8) var(--abstand-10);
    border: 1px solid var(--banner-rahmen);
    border-radius: var(--radius-feld);
    background: var(--banner-flaeche);
    font-size: var(--groesse-meta);
}

.dnsfilterstand__titel,
.dnsfilterstand__treffer {
    color: var(--text-sekundaer);
}

.dnsfilterstand__chip {
    display: inline-flex;
    gap: var(--abstand-6);
    align-items: center;
    max-width: 100%;
    padding: 1px 7px;
    border: 1px solid var(--banner-rahmen);
    border-radius: var(--radius-chip);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-klein);
    color: var(--akzent-hell);
    overflow-wrap: anywhere;
}

.dnsfilterstand__server {
    margin-left: auto;
}

/* Inventar nach Zone. */
.dnsinventar {
    container-type: inline-size;
    display: flex;
    flex-direction: column;
    gap: var(--abstand-8);
}

.dnsinventar > .abschnittskopf {
    margin-bottom: 0;
}

.dnsinventar__kopf,
.dnsname > details > summary {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1.3fr) minmax(0, 0.9fr) 4.5rem;
    gap: var(--abstand-6) var(--abstand-16);
}

.dnsinventar__kopf {
    padding: 0 var(--abstand-14);
    font-family: var(--schrift-mono);
    font-size: var(--groesse-gruppenlabel);
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--text-schwach);
}

.dnszone {
    border: 1px solid var(--rahmen-stark);
    border-radius: var(--radius-feld);
    background: var(--flaeche-karte);
    overflow: hidden;
}

.dnszone > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-12);
    padding: var(--abstand-10) var(--abstand-14);
    cursor: pointer;
}

.dnszone > summary:hover {
    background: var(--flaeche-erhoeht);
}

.dnszone > summary:focus-visible,
.dnsname > details > summary:focus-visible {
    outline-offset: -2px;
}

.dnszone__name {
    font-family: var(--schrift-mono);
    font-size: var(--groesse-zelle);
    font-weight: 600;
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.dnszone__anzahl {
    font-size: var(--groesse-meta);
    color: var(--text-tertiaer);
}

.dnszone__teile {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-2) var(--abstand-10);
    font-size: var(--groesse-meta);
}

.dnszone__teil {
    color: var(--ton-text);
}

.dnszone__teilsymbol {
    color: var(--ton-symbol);
    font-family: var(--schrift-mono);
    font-weight: 600;
}

.dnszone__quelle {
    margin-left: auto;
    color: var(--text-tertiaer);
}

.dnszone__ziele {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--abstand-2) var(--abstand-14);
    margin: 0;
    padding: var(--abstand-6) var(--abstand-14) var(--abstand-6) calc(var(--abstand-14) + 1.1em);
    border-top: 1px solid var(--rahmen-zeile);
    font-size: var(--groesse-meta);
}

.dnszone__zieletitel {
    color: var(--text-tertiaer);
}

.dnszone__ziel {
    font-family: var(--schrift-mono);
    border-radius: var(--radius-chip);
}

.dnszone__zielzahl {
    color: var(--text-sekundaer);
}

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

.dnsname {
    border-top: 1px solid var(--rahmen-zeile);
}

.dnsname > details > summary {
    align-items: start;
    padding: var(--abstand-8) var(--abstand-14);
    cursor: pointer;
    list-style: none;
}

.dnsname > details > summary::-webkit-details-marker {
    display: none;
}

.dnsname > details > summary:hover {
    background: var(--flaeche-erhoeht);
}

.dnsname__name,
.dnsname__zielwert,
.dnsname__via {
    font-family: var(--schrift-mono);
    overflow-wrap: break-word;
    word-break: normal;
    min-width: 0;
}

.dnsname__name {
    font-size: var(--groesse-mono-zelle);
    line-height: 1.45;
}

.dnsname__kopf {
    color: var(--text-primaer);
}

.dnsname__rest {
    color: var(--text-schwach);
}

.dnsname__apex {
    margin-left: var(--abstand-8);
    color: var(--text-tertiaer);
    font-size: var(--groesse-gruppenlabel);
}

.dnsname__weg {
    display: flex;
    gap: var(--abstand-8);
    align-items: baseline;
    min-width: 0;
}

.dnsname__typ {
    flex: 0 0 auto;
    min-width: 3.2em;
    text-align: center;
    color: var(--text-sekundaer);
}

.dnsname__ziel {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    min-width: 0;
    font-size: var(--groesse-meta);
    line-height: 1.4;
}

.dnsname__zielwert {
    color: var(--text-primaer);
}

.dnsname__via {
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.dnsname__zuordnung {
    display: flex;
    flex-wrap: wrap;
    gap: var(--abstand-6) var(--abstand-8);
    align-items: center;
    min-width: 0;
}

.dnsname__server {
    font-size: var(--groesse-meta);
    font-weight: 500;
    color: var(--akzent-hell);
    overflow-wrap: anywhere;
}

.dnsname__mehr {
    justify-self: end;
    font-size: var(--groesse-klein);
    font-weight: 600;
    color: var(--text-tertiaer);
    white-space: nowrap;
}

.dnsname__mehr::before {
    content: "▸ ";
    font-size: var(--groesse-gruppenlabel);
}

.dnsname > details[open] .dnsname__mehr {
    color: var(--text-primaer);
}

.dnsname > details[open] .dnsname__mehr::before {
    content: "▾ ";
}

.dnsname__details {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
    gap: var(--abstand-16) var(--abstand-30);
    margin: 0 var(--abstand-14) var(--abstand-12);
    padding: var(--abstand-12) var(--abstand-14);
    border: 1px solid var(--rahmen-feld);
    border-radius: var(--radius-chip);
    background: var(--flaeche-seite);
}

.dnsname__details h4 {
    margin: 0 0 var(--abstand-8);
    font-size: var(--groesse-meta);
    color: var(--text-primaer);
}

.dnspfad,
.dnsname__eintrag {
    min-width: 0;
}

.dnspfad__schritte {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: var(--schrift-mono);
    font-size: var(--groesse-meta);
}

.dnspfad__schritt {
    display: flex;
    flex-direction: column;
    gap: var(--abstand-2);
}

.dnspfad__kante {
    padding-left: 1.5rem;
    font-size: var(--groesse-gruppenlabel);
    letter-spacing: .06em;
    line-height: 1.3;
    color: var(--text-schwach);
}

.dnspfad__wert {
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.dnspfad__ende {
    color: var(--ton-text);
    overflow-wrap: anywhere;
}

.dnspfad__ende.ton--ok {
    color: var(--akzent-hell);
}

.dnspfad__erklaerung {
    margin: var(--abstand-8) 0 0;
    max-width: 30rem;
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.dnsname__daten {
    display: grid;
    grid-template-columns: minmax(6rem, max-content) minmax(0, 1fr);
    gap: var(--abstand-2) var(--abstand-14);
    margin: 0 0 var(--abstand-8);
    font-size: var(--groesse-klein);
}

.dnsname__daten dt {
    color: var(--text-tertiaer);
}

.dnsname__daten dd {
    margin: 0;
    color: var(--text-primaer);
    overflow-wrap: anywhere;
}

.dnsname__serverlink {
    display: inline-block;
    font-size: var(--groesse-meta);
}

.dnsinventar__grenze {
    display: flex;
    gap: var(--abstand-10);
    align-items: baseline;
    margin: var(--abstand-6) 0 0;
    padding: var(--abstand-10) var(--abstand-12);
    border: 1px dashed var(--rahmen-sekundaer);
    border-radius: var(--radius-chip);
    font-size: var(--groesse-klein);
    color: var(--text-tertiaer);
}

.dnsinventar__grenzzeichen {
    font-family: var(--schrift-mono);
}

/* Schmaler Inhalt: jede Record-Zeile untereinander, Name zuerst. */
@container (max-width: 44rem) {
    .dnsinventar__kopf {
        display: none;
    }

    .dnsname > details > summary {
        grid-template-columns: minmax(0, 1fr) auto;
        gap: var(--abstand-6) var(--abstand-10);
        padding: var(--abstand-8) var(--abstand-10);
    }

    .dnsname__name { grid-column: 1; grid-row: 1; }
    .dnsname__mehr { grid-column: 2; grid-row: 1; }
    .dnsname__zuordnung { grid-column: 1 / -1; grid-row: 2; }
    .dnsname__weg { grid-column: 1 / -1; grid-row: 3; }

    .dnszone > summary,
    .dnszone__ziele {
        padding-left: var(--abstand-10);
        padding-right: var(--abstand-10);
    }

    .dnsname__details {
        margin: 0 var(--abstand-10) var(--abstand-10);
        padding: var(--abstand-10);
    }
}

/* Schmaler Bildschirm: Übersicht als kompakte Liste, Balken unter dem Namen. */
@media (max-width: 767px) {
    .dnsuebersicht__spalte {
        padding: var(--abstand-10) var(--abstand-12);
    }

    .dnsbalken {
        grid-template-columns: minmax(0, 1fr) auto auto;
        gap: var(--abstand-2) var(--abstand-10);
    }

    .dnsbalken__spur {
        grid-column: 1 / -1;
        grid-row: 2;
    }

    .dnsfilterstand__server {
        margin-left: 0;
    }
}