/* ══ UI-BASIS ═════════════════════════════════════════════════════════════════════════════════
   Aus Netbits.Flow übernommen (docs/oberflaeche.md, Abschnitt 9 „UI-Basis"; Entscheidung vom
   01.10.2026: Kopie statt gemeinsamem Paket, ADR-0089 Nachtrag „Eingabefenster").

   DIESE DATEI IST EINE ABSCHRIFT. Namen und Werte stehen wie in Flows app.css, damit ein späterer
   Wechsel auf ein gemeinsames Paket ohne Umbenennen geht – und damit ein Vergleich der beiden
   Fassungen zeigt, wo sie auseinandergelaufen sind. Was nur World braucht, steht am Ende im
   Block „World-Eigenes".
   ═════════════════════════════════════════════════════════════════════════════════════════ */

/* ── Hausschriften ───────────────────────────────────────────────────────────────────────────
   Zwei Schriften mit zwei Aufgaben: JetBrains Mono zum BEDIENEN (Navigation, Knöpfe, Namen,
   Zahlen), IBM Plex Sans zum LESEN (Beschreibungen, Hinweise, Fließtext). Mitgeliefert unter
   fonts/, nicht von Google geholt – ohne Internet fiele ein externer Abruf still auf die
   Systemschrift zurück. Nur latin und latin-ext, Schnitte 400/500/600. SIL OFL 1.1, siehe
   fonts/OFL-*.txt. */

@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-400-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;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-400-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: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-500-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: 500;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-500-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: 600;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-600-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: 600;
    font-display: swap;
    src: url('../fonts/jetbrains-mono-600-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-400-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-400-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-500-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-500-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-600-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: 'IBM Plex Sans';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../fonts/ibm-plex-sans-600-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;
}

/* Shell-Design nach dem Architektur-Mockup (netbits-world/architecture/mockups/netbits-flow.html).
   Die CSS-Variablen schalten über die dark/light-Klasse am html-Element um (ThemeService);
   MudBlazor-Komponenten laufen parallel über das MudTheme mit denselben Tokens. */

html.dark {
  color-scheme: dark;
  --bg: #131318; --bg2: #0e0e12;
  --surf: #1c1c24; --surf2: #23232e; --surf3: #2b2b38;
  --line: rgba(255,255,255,.075); --line2: rgba(255,255,255,.14);
  --t1: rgba(255,255,255,.93); --t2: rgba(255,255,255,.60); --t3: rgba(255,255,255,.36);
  --pri: #8b7cff; --pri-w: rgba(139,124,255,.16); --pri-t: #b3a8ff;
  --ok: #5ddb92; --bad: #ff7b72;
  --veil: rgba(0,0,0,.55);
}

html.light {
  color-scheme: light;
  --bg: #f3f3f7; --bg2: #e9e9f0;
  --surf: #fff; --surf2: #f6f6fa; --surf3: #eeeef4;
  --line: rgba(0,0,0,.08); --line2: rgba(0,0,0,.14);
  --t1: rgba(0,0,0,.88); --t2: rgba(0,0,0,.56); --t3: rgba(0,0,0,.36);
  --pri: #594AE2; --pri-w: rgba(89,74,226,.10); --pri-t: #4a3cc4;
  --ok: #28a35c; --bad: #d13b30;
  --veil: rgba(20,20,30,.34);
}

:root {
    --nb-schriftart-bedienen: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
    --nb-schriftart-lesen: "IBM Plex Sans", "Segoe UI", Roboto, -apple-system, sans-serif;
    --nb-schriftart-code: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;
}

/* ── Farben, Zustände, Maße, Schriftgrößen ──────────────────────────────────────────────────── */
:root {
    /* ── Kategorien: Farbe transportiert Bedeutung, nie Dekoration ────────────────────────── */
    --nb-kat-ausloeser: #E0A458;
    --nb-kat-verarbeitung: #6EA8FE;
    --nb-kat-logik: #B18CF5;
    --nb-kat-ausgabe: #5CC8B0;
    --nb-kat-aktion: #B18CF5;
    --nb-kat-ki: #6EA8FE;
    --nb-kat-fehler: #F07178;
    --nb-kat-neutral: var(--mud-palette-text-secondary);

    /* Wie kräftig die Fläche einer Kategorie unter ihrer Farbe liegt. */
    --nb-kat-flaeche: 16%;

    /* ── Zustände ─────────────────────────────────────────────────────────────────────────── */
    --nb-aktiv: #2C2A44;
    --nb-gewaehlt: #26243A;
    --nb-hover: #24242E;

    /* ── Maße: 4er-Raster ─────────────────────────────────────────────────────────────────── */
    --nb-abstand-fenster: 20px;
    --nb-abstand-eintraege: 4px;
    --nb-abstand-gruppen: 20px;

    --nb-radius-knopf: 8px;
    --nb-radius-eintrag: 10px;
    --nb-radius-marke: 12px;
    --nb-radius-fenster: 14px;

    /* ── Schriftgrößen ────────────────────────────────────────────────────────────────────── */
    --nb-schrift-detailtitel: 20px;
    --nb-schrift-fenstertitel: 18px;
    --nb-schrift-eintrag: 15px;
    --nb-schrift-text: 15px;
    --nb-schrift-bedienung: 14px;
    --nb-schrift-beiwerk: 13px;
    --nb-schrift-gruppenlabel: 12px;

    /* ── Breiten aus dem Fenster-Aufbau ───────────────────────────────────────────────────── */
    --nb-breite-seitenleiste: 210px;
    --nb-breite-detail: 320px;
}

/* Im Hellen sind die Zustandsflächen dieselbe Idee, nur andersherum: eine Spur der Akzentfarbe
   auf hellem Grund statt auf dunklem. */
.mud-theme-light {
    --nb-aktiv: color-mix(in srgb, var(--mud-palette-primary) 14%, transparent);
    --nb-gewaehlt: color-mix(in srgb, var(--mud-palette-primary) 10%, transparent);
    --nb-hover: color-mix(in srgb, var(--mud-palette-text-primary) 5%, transparent);
}

body {
    font-family: var(--nb-schriftart-bedienen);
}

/* ── Die Leseflächen: EINE Regel, EINE Liste ─────────────────────────────────────────────────
   Grundeinstellung am body ist „bedienen" (Mono). Alles, was man LIEST, steht hier – und nur
   hier. Wer eine neue Lesefläche baut, hängt ihren Selektor an oder gibt ihr .nb-lesen. */
.nb-lesen,
.nb-lesen .mud-typography,
.nb-lesen .mud-simple-table table td,
.nb-lesen .mud-simple-table table th,
.nb-lesen li,
.nb-fensterraster .einzelheit .beschreibung,
.nb-fensterraster .leer,
.mud-alert-message,
.mud-input-helper-text {
    font-family: var(--nb-schriftart-lesen);
}

.nb-lesen code {
    font-family: var(--nb-schriftart-code);
}

/* ── Modale Fenster: deutlich vom Hintergrund abgehoben ─────────────────────────────────────
   Primärfarbener Rahmen mit weichem Leuchten – für MudDialog (Rückfragen) wie für das
   Eingabefenster unten. */
.mud-dialog {
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--nb-radius-fenster);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent),
        0 24px 64px rgba(0, 0, 0, .55);
}

/* ── Das Fensterraster ──────────────────────────────────────────────────────────────────────
   DIE HUELLE JEDES ARBEITSFENSTERS, aus der UI-Basis (oben): Seitenleiste 210, Inhalt flexibel,
   Detail 320. Zuerst gab es sie nur bei der Bausteinwahl; beim zweiten Fenster derselben Art
   wäre eine Abschrift entstanden, und Abschriften laufen auseinander (mj, 29.09.2026: „das
   möchte ich überall").

   FESTE HOEHE, NICHT MITWACHSEND. Ein Fenster, das sich nach seinem Inhalt richtet, springt bei
   jedem Filter in eine andere Größe - man klickt eine Zeile an und der Knopf darunter ist
   woanders. Gescrollt wird INNERHALB der Spalten, jede für sich.

   Alle Farben und Maße kommen aus Variablen: Eine feste Farbe hier nähme dem Farb-Designer die
   Stelle, an der er sie ändern könnte. */
.nb-fensterraster {
    display: grid;
    grid-template-columns: var(--nb-breite-seitenleiste) minmax(0, 1fr) var(--nb-breite-detail);
    gap: 0;

    height: 50vh;
    min-height: 380px;
    margin: -.5rem -1rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Jede Spalte scrollt für sich - nicht das Fenster als Ganzes. */
.nb-fensterraster > * { overflow-y: auto; padding: var(--nb-abstand-fenster); }

.nb-fensterraster .filter {
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
    border-right: 1px solid var(--mud-palette-lines-default);
}

/* Spalte in Flussrichtung, damit der Primär-Knopf unten stehen bleiben kann (UI-Basis, Punkt 5). */
.nb-fensterraster .einzelheit {
    display: flex;
    flex-direction: column;
    background: color-mix(in srgb, var(--mud-palette-background) 35%, var(--mud-palette-surface));
    border-left: 1px solid var(--mud-palette-lines-default);
}

.nb-fensterraster .gruppentitel {
    font-family: var(--nb-schriftart-bedienen);
    margin: var(--nb-abstand-gruppen) 0 .35rem;
    color: var(--mud-palette-text-disabled);
    font-size: var(--nb-schrift-gruppenlabel);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.nb-fensterraster .gruppentitel:first-child { margin-top: 0; }

/* ── Die Filterzeilen der linken Spalte ───────────────────────────────────────────────────────
   Gehören zur Hülle, nicht zu einem einzelnen Fenster: Eine Zeile mit Name und Zahl sieht in
   jedem dieser Fenster gleich aus, und zwei Fassungen davon wären zwei Arten, dasselbe zu tun.

   JUSTIFY-CONTENT AUSDRÜCKLICH: Ein <button> ist im Browser-Stilblatt mittig ausgerichtet, und
   das gilt auch, wenn man ihn zu einem Flex-Kasten macht. Ohne diese Zeile stand der Inhalt
   jeder Zeile woanders - je nach Textlänge (mj, 27.09.2026). */
.nb-fensterraster .filterzeile {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: .5rem;
    width: 100%;
    padding: .45rem .6rem;
    margin-bottom: var(--nb-abstand-eintraege);
    border: none;
    border-radius: var(--nb-radius-knopf);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font: inherit;
    font-size: var(--nb-schrift-bedienung);
    text-align: left;
    cursor: pointer;
}

.nb-fensterraster .filterzeile:hover { background: var(--nb-hover); }

.nb-fensterraster .filterzeile.an {
    background: var(--nb-aktiv);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.nb-fensterraster .filterzeile .name { flex: 1 1 auto; min-width: 0; }

/* Die Zahl sagt, dass es dort etwas gibt - ohne dass man klicken muss. */
.nb-fensterraster .filterzeile .zahl {
    flex: 0 0 auto;
    color: var(--mud-palette-text-disabled);
    font-size: var(--nb-schrift-beiwerk);
    font-weight: 400;
}

/* ── Der Detailbereich und die Leermeldung ────────────────────────────────────────────────────
   Ebenfalls Hülle: Überschrift, erklärender Absatz, Leerhinweis und genau EIN Primär-Knopf
   unten rechts. */
.nb-fensterraster .leer { padding: 1rem .25rem; }

.nb-fensterraster .einzelheit .detailtitel {
    font-family: var(--nb-schriftart-bedienen);
    font-size: var(--nb-schrift-detailtitel);
    font-weight: 600;
    line-height: 1.3;
}

.nb-fensterraster .einzelheit .beschreibung {
    font-size: var(--nb-schrift-text);
    line-height: 1.55;
    color: var(--mud-palette-text-secondary);
}

/* Genau ein Primär-Knopf je Fenster, und er steht dort, wo die Wahl beschrieben wird (UI-Basis,
   Punkt 5): unten im Detailbereich. */
.nb-fensterraster .einzelheit .primaer {
    height: 44px;
    border-radius: var(--nb-radius-knopf);
    text-transform: none;
    font-size: var(--nb-schrift-bedienung);
    font-weight: 600;
}

/* ══ World-Eigenes ═══════════════════════════════════════════════════════════════════════════ */

/* ── Das Eingabefenster ──────────────────────────────────────────────────────────────────────
   Anlegen und Bearbeiten im modalen Fenster (ADR-0089, Nachtrag 01.10.2026) – gestaltet wie
   Flows Dialoge: Kopf mit Linie, Inhalt, Fuß mit Linie und genau einem Primär-Knopf.

   DREI GRÖSSEN statt freier Breiten. Siebzehn Seiten mit je eigener Pixelbreite sähen aus wie
   siebzehn verschiedene Fenster.

   GROSS HAT EINE FESTE HÖHE, wie in Flow: Ein Fenster, das mit seinem Inhalt wächst, springt bei
   jeder hinzugefügten Zeile, und der Knopf darunter ist woanders. Gescrollt wird innen. */
.nb-fensterschleier {
    position: fixed;
    inset: 0;
    z-index: 1180;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(0, 0, 0, .5);
    animation: nb-einblenden .16s ease-out;
}

.nb-eingabefenster {
    --nb-fensterbreite: 820px;
    position: relative;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    width: min(var(--nb-fensterbreite), 96vw);
    max-height: 88vh;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-primary);
    border-radius: var(--nb-radius-fenster);
    box-shadow:
        0 0 18px color-mix(in srgb, var(--mud-palette-primary) 45%, transparent),
        0 24px 64px rgba(0, 0, 0, .55);
    outline: none;
    animation: nb-auftauchen .18s cubic-bezier(.25, .8, .3, 1);
}

.nb-eingabefenster.klein { --nb-fensterbreite: 520px; }
.nb-eingabefenster.mittel { --nb-fensterbreite: 820px; }
.nb-eingabefenster.gross { width: 70vw; height: 82vh; }

@media (max-width: 1100px) {
    .nb-eingabefenster.gross { width: 96vw; }
}

.nb-eingabefenster > .kopf {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding: 14px 16px 14px 24px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.nb-eingabefenster > .kopf .titel {
    flex: 1 1 auto;
    margin: 0;
    font-size: var(--nb-schrift-fenstertitel);
    font-weight: 600;
    line-height: 1.3;
}

.nb-eingabefenster > .kopf .schliessen {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: var(--nb-radius-knopf);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    cursor: pointer;
}

.nb-eingabefenster > .kopf .schliessen:hover {
    background: var(--nb-hover);
    color: var(--mud-palette-text-primary);
}

.nb-eingabefenster > .inhalt {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--nb-abstand-fenster) 24px;
}

.nb-eingabefenster > .fuss {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    flex: 0 0 auto;
    padding: 12px 24px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Mit Raster füllt das Raster das Fenster, und jede Spalte scrollt für sich – nicht der Inhalt
   als Ganzes. */
.nb-eingabefenster.mit-raster > .inhalt {
    display: flex;
    overflow: hidden;
    padding: 0;
}

.nb-eingabefenster .nb-fensterraster {
    flex: 1 1 auto;
    height: auto;
    min-height: 0;
    margin: 0;
    border-top: none;
}

/* Ein Formular im Raster: links die Stammdaten, rechts die Listen (Ports, Komponenten). Die
   linke Spalte ist breiter als Flows Filterleiste – darin stehen Eingabefelder, keine Zeilen. */
.nb-fensterraster.formular {
    grid-template-columns: var(--nb-breite-formular) 6px minmax(0, 1fr);
}

.nb-fensterraster.formular.dreispaltig {
    grid-template-columns: var(--nb-breite-formular) 6px minmax(0, 1fr) 6px var(--nb-breite-detail);
}

/* Der Griff zwischen den Spalten (wie in Flows Knoteneinstellungen): schmal, aber greifbar, und er
   trägt die Trennlinie, damit sie nicht zweimal dasteht. Die Breite merkt sich das Fenster nicht –
   beim nächsten Öffnen gilt wieder die Vorgabe. */
.nb-fensterraster.formular > .griff {
    padding: 0;
    overflow: visible;
    cursor: col-resize;
    background: linear-gradient(
        to right, transparent 2px, var(--mud-palette-lines-default) 2px 3px, transparent 3px);
}

.nb-fensterraster.formular > .griff:hover {
    background: linear-gradient(
        to right, transparent 1px, var(--mud-palette-primary) 1px 4px, transparent 4px);
}

.nb-fensterraster.formular > .stammdaten {
    background: color-mix(in srgb, var(--mud-palette-background) 55%, var(--mud-palette-surface));
}

.nb-fensterraster.formular > .seitenteil {
    background: color-mix(in srgb, var(--mud-palette-background) 35%, var(--mud-palette-surface));
    border-left: 1px solid var(--mud-palette-lines-default);
}

@media (max-width: 900px) {
    .nb-fensterraster.formular,
    .nb-fensterraster.formular.dreispaltig { grid-template-columns: minmax(0, 1fr); overflow-y: auto; }
    .nb-fensterraster.formular > * { overflow: visible; border: none; }
    .nb-fensterraster.formular > .griff { display: none; }
}

:root {
    /* Um die Hälfte breiter als zuerst (Abnahme mj, 01.10.2026): Die Auswahlfelder der
       Komponenten schnitten ihre Einträge ab. Auf kleinen Bildschirmen weniger, damit rechts
       Platz für eine Zeile je Port bleibt – und wer mehr will, zieht am Griff. */
    --nb-breite-formular: clamp(300px, 25vw, 450px);
}

@keyframes nb-einblenden { from { opacity: 0; } to { opacity: 1; } }
@keyframes nb-auftauchen { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
    .nb-fensterschleier, .nb-eingabefenster { animation: none; }
}

/* ── Die Port-Tabelle ────────────────────────────────────────────────────────────────────────
   Eine Zeile je Port. Die Felder sind dicht gesetzt, aber nicht abgeschnitten: Die Tabelle
   scrollt waagrecht, bevor eine Beschriftung verschwindet. */
.nb-porttabelle { overflow-x: auto; }
.nb-porttabelle table { width: 100%; min-width: 720px; border-collapse: collapse; table-layout: fixed; }
.nb-porttabelle col.name { width: 19%; }
.nb-porttabelle col.anschluss { width: 13%; }
.nb-porttabelle col.geschwindigkeit { width: 11%; }
.nb-porttabelle col.poe { width: 14%; }
.nb-porttabelle col.seite { width: 11%; }
.nb-porttabelle col.schalter { width: 44px; }
/* Vorlage: zwei Spalten mehr (Außen, Chip-Port) – die übrigen geben dafür etwas ab, damit die
   Tabelle in der rechten Spalte des großen Fensters ohne Querscrollen Platz hat. */
.nb-porttabelle table.mit-chip col.name { width: 13%; }
.nb-porttabelle table.mit-chip col.anschluss { width: 11%; }
.nb-porttabelle table.mit-chip col.geschwindigkeit { width: 9%; }
.nb-porttabelle table.mit-chip col.poe { width: 11.5%; }
.nb-porttabelle table.mit-chip col.seite { width: 10%; }
.nb-porttabelle table.mit-chip col.aussen { width: 56px; }
.nb-porttabelle table.mit-chip col.chip { width: 10%; }
.nb-porttabelle th { overflow: hidden; text-overflow: ellipsis; }
.nb-porttabelle th {
    padding: 0 6px 6px;
    text-align: left;
    color: var(--mud-palette-text-disabled);
    font-size: var(--nb-schrift-gruppenlabel);
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    white-space: nowrap;
}
.nb-porttabelle td { padding: 2px 4px; vertical-align: middle; }
.nb-porttabelle td.eng { text-align: center; }
.nb-porttabelle tr.nb-port:hover td { background: var(--nb-hover); }
.nb-porttabelle .mud-input-control { margin-top: 0; }
.nb-porttabelle .eng { white-space: nowrap; }
.nb-portliste .knoepfe { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* Aufgeklappte Auswahl der Port-Tabelle: so breit wie ihr längster Eintrag, nie umgebrochen. */
.nb-port-auswahl { min-width: max-content; }
.nb-port-auswahl .mud-list-item-text,
.nb-port-auswahl .mud-typography { white-space: nowrap; }

/* Ports in einer Listenzeile: eine Zeile je Porttyp, keine davon bricht um. */
.nb-portgruppen > div { white-space: nowrap; }

/* Durchsuchbare Mehrfachauswahl: die gewählten Einträge als Chips unter dem Suchfeld. */
.nb-suchmehrfach-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.nb-suchmehrfach-chips .mud-chip { max-width: 100%; margin: 0; }
.nb-suchmehrfach-chips .mud-chip-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nb-portliste .knoepfe .mud-button-label { white-space: nowrap; }

/* ── Die Bänder eines WLAN-Moduls ────────────────────────────────────────────────────────────
   Eine Karte je Band; im Kopf, was World daraus berechnet. Die Felder in einem Raster, das bei
   schmaler Spalte von drei auf zwei Spalten zurückgeht. */
.nb-wlanband .titel { font-size: var(--nb-schrift-eintrag); font-weight: 600; }
.nb-wlanband .eirp { color: var(--mud-palette-text-secondary); font-size: var(--nb-schrift-beiwerk); }
.nb-wlanband .raster {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 4px 14px;
}
.nb-wlanband .raster .breit { grid-column: span 2; }