/*
 * NhPanel – Kundenportal: Tiefe und erkennbare Bedienelemente (Track u, 03.10.)
 * Rückmeldung: "zu weiß – die Knöpfe gehen unter". Seite, Karten, Reiter, Knöpfe und Felder hatten dieselbe Helligkeit
 * (Seite #f6f8ff-Verlauf, Kartenrand rgba(15,23,42,.09) = 1,2:1, Feldrand 1,4:1, Reiter = weiße Pillen mit Hauchrand).
 *
 * Kein neues Design: dieselben Marken-Tokens (Primär #5143d9, DM Sans, Radien 16/12/10/8), nur Flächen-Hierarchie und
 * Kontrast. Seite = kühles Hellgrau, Karten = Weiß mit echtem Rand + kleinem Schatten, Bedienelemente mit Rand >= 3:1
 * (WCAG 1.4.11), Reiter als Segment-Steuerung. Werte und Messung: wt/out/panel-contrast/contrast.py.
 *
 * Eigene Datei statt panel.css-Änderung: wird als letzte des panel-*.css-Bündels geladen (alphabetisch nach panel-ux.css),
 * alles unter main.nh-shell-page -> ohne Shell (Rückfallweg) ändert sich nichts. Datei entfernen = vorheriger Stand.
 * Gegenspieler: booking nexthosting-account-style (<style> im Inhalt, also NACH dieser Datei: main.nh-account-page …,
 * viele !important) und booking/css/nh-custom.css (.btn-primary:hover:not(…) !important) – deshalb main.nh-shell-page
 * vorn und, wo die Gegenseite !important setzt, ebenso.
 */

/* ---------- Tokens (nur in der Shell) ---------- */
main.nh-shell-page {
    --nh-page: #eef0f6;              /* Seitengrund: kühles Hellgrau-Lavendel, Karte hebt sich ab */
    --nh-line: #d5dbe8;              /* Kartenrand, Abschnittslinien (vorher rgba(15,23,42,.09) = #e8e9ec auf Weiß) */
    --nh-line-soft: #e1e5ee;         /* Zeilen-Trenner in Tabellen/Listen */
    --nh-control-line: #7b8597;      /* Rand von Knöpfen/Icon-Knöpfen: 3,7:1 auf Weiß, 3,3:1 auf der Seite */
    --nh-field: #8792a6;             /* Feldrand wie Anmeldeseiten (auth.css): 3,1:1 auf Weiß */
    --nh-field-hover: #5b6b82;
    --nh-surface-2: #f3f5f9;         /* Tabellenkopf, Kartenfuß, neutrale Pillen */
    --nh-surface-3: #e3e7f0;         /* Spur der Segment-Reiter */
    --nh-label: #1e293b;             /* Beschriftungen (= Grundtext der Website) */
    --nh-placeholder: #6b778c;       /* 4,5:1 auf Weiß (vorher #8a94a6 = 3,1:1) */
    --nh-primary-hover: #4133b8;
    --nh-shadow: 0 1px 2px rgba(15, 23, 42, .06), 0 2px 8px rgba(15, 23, 42, .045);
    --nh-shadow-raised: 0 1px 2px rgba(15, 23, 42, .12), 0 1px 1px rgba(15, 23, 42, .04);
    --nh-focus: 0 0 0 3px rgba(81, 67, 217, .28);
}

/* ---------- 1. Flächen: Seite | Karte ---------- */

/* booking: radial-/linear-Verlauf #fbfdff -> #f6f8ff -> #fff (unten wieder weiß) */
main.nh-account-page.nh-shell-page { background: var(--nh-page); }

/* Karten und kartenartige Flächen: weißer Grund, Rand, kleiner Schatten (auch im Schwebezustand gleich – nh-custom
   setzt .card:hover { box-shadow … !important }) */
main.nh-shell-page .nh-shell .card,
main.nh-shell-page .nh-shell .card:hover {
    border-color: var(--nh-line) !important;
    box-shadow: var(--nh-shadow) !important;
}

main.nh-shell-page .nh-shell .card .card { box-shadow: none !important; }   /* verschachtelte Karte: nur Rand */

main.nh-shell-page .nh-nav,
main.nh-shell-page .nh-todo,
main.nh-shell-page .nh-todo-empty,
main.nh-shell-page .nh-glance,
main.nh-shell-page .nh-shell section.nh-panel,
main.nh-shell-page .nh-shell-toggle {
    border-color: var(--nh-line);
    box-shadow: var(--nh-shadow);
}

/* Offcanvas-Seitenleiste (mobil): Grund wie die Seite, Karte darin wie am Desktop */
@media (max-width: 991.98px) {
    main.nh-shell-page .nh-shell-aside { background: var(--nh-page); }
    main.nh-shell-page .nh-nav { box-shadow: var(--nh-shadow); }
}

/* Abschnitte in Karten: sichtbare Trenner */
main.nh-shell-page .nh-shell .card-header { border-bottom-color: var(--nh-line) !important; }
main.nh-shell-page .nh-shell .card-footer { border-top-color: var(--nh-line); }
main.nh-shell-page .nh-shell-content .hw-text-devider::after { border-top-color: var(--nh-line); }

/* ---------- 2. Reiter: EIN Muster – Segment-Steuerung ----------
   Spur (getöntes Feld mit Rand) hält die Reiter; inaktiv = Tinte auf der Spur (8,4:1) mit Schwebe-Fläche,
   aktiv = weißes, angehobenes Segment + Primär-Text + fett (Zustand ohne Farbe erkennbar: Fläche, Schatten, Gewicht).
   Gilt für .nh-subnav (Bereichs- und Domain-Reiter) und Hostware nav-tabs/nav-pills/Produktseiten-Liste. */

main.nh-shell-page .nh-subnav-list,
main.nh-shell-page .nh-shell-content .nav-tabs,
main.nh-shell-page .nh-shell-content .nav-pills {
    display: flex;
    gap: 2px;
    width: fit-content;
    max-width: 100%;
    padding: 4px;
    border: 1px solid var(--nh-line);
    border-radius: 12px;
    background: var(--nh-surface-3);
}

/* Bereichs-Reiter: eine Zeile, wischbar (panel.js zeigt den Überlauf-Verlauf); Hostware-Reiter brechen um
   (kein Überlauf-Hinweis vorhanden), Außenabstände aus dem Hostware-Markup (mb-3 …) bleiben */
main.nh-shell-page .nh-subnav-list { flex-wrap: nowrap; margin: 0; overflow-x: auto; scrollbar-width: none; }
main.nh-shell-page .nh-shell-content .nav-tabs,
main.nh-shell-page .nh-shell-content .nav-pills { flex-wrap: wrap; }

main.nh-shell-page .nh-subnav-list > li { flex: 0 0 auto; }

main.nh-shell-page .nh-subnav-link,
main.nh-shell-page .nh-shell-content .nav-tabs .nav-link,
main.nh-shell-page .nh-shell-content .nav-pills .nav-link {
    min-height: 36px;
    margin: 0;
    padding: 6px 14px !important;
    border: 1px solid transparent !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--nh-text) !important;
    font-size: .92rem;
    font-weight: 500;
    box-shadow: none;
    transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}

main.nh-shell-page .nh-subnav-link:hover,
main.nh-shell-page .nh-shell-content .nav-tabs .nav-link:hover,
main.nh-shell-page .nh-shell-content .nav-pills .nav-link:hover {
    background: rgba(15, 23, 42, .06) !important;
    color: var(--nh-ink) !important;
}

main.nh-shell-page .nh-subnav-link.is-active,
main.nh-shell-page .nh-shell-content .nav-tabs .nav-link.active,
main.nh-shell-page .nh-shell-content .nav-pills .nav-link.active {
    border-color: var(--nh-line) !important;
    background: var(--nh-surface) !important;
    color: var(--nh-primary-ink) !important;
    font-weight: 700;
    box-shadow: var(--nh-shadow-raised);
}

main.nh-shell-page .nh-subnav-link:focus-visible,
main.nh-shell-page .nh-shell-content .nav-tabs .nav-link:focus-visible,
main.nh-shell-page .nh-shell-content .nav-pills .nav-link:focus-visible {
    outline: 2px solid var(--nh-primary);
    outline-offset: -2px;
}

main.nh-shell-page .nh-subnav-link .nh-badge { background: var(--nh-surface); }
main.nh-shell-page .nh-subnav-link .nh-badge--danger { background: var(--nh-danger-tint); }
main.nh-shell-page .nh-subnav-link .nh-badge--primary { background: var(--nh-primary-tint); }

/* Überlauf-Hinweis (panel.js setzt has-overflow-*): Verlauf in der Spur-Farbe, innerhalb des Randes */
main.nh-shell-page .nh-subnav { width: fit-content; max-width: 100%; }
main.nh-shell-page .nh-subnav.has-overflow-end::after,
main.nh-shell-page .nh-subnav.has-overflow-start::before { top: 1px; bottom: 1px; width: 36px; z-index: 1; }
main.nh-shell-page .nh-subnav.has-overflow-end::after {
    right: 1px;
    border-radius: 0 11px 11px 0;
    background: linear-gradient(90deg, rgba(227, 231, 240, 0), var(--nh-surface-3) 70%);
}
main.nh-shell-page .nh-subnav.has-overflow-start::before {
    left: 1px;
    border-radius: 11px 0 0 11px;
    background: linear-gradient(270deg, rgba(227, 231, 240, 0), var(--nh-surface-3) 70%);
}

/* Produktseiten-Liste (Hostware .hw-product-page-list, ab 1200 px als Zeile; darunter Offcanvas-Liste) */
@media (min-width: 1200px) {
    main.nh-shell-page .nh-shell-content .hw-product-page-list .navbar-offcanvas-menu {
        gap: 2px;
        padding: 4px;
        border: 1px solid var(--nh-line);
        border-radius: 12px;
        background: var(--nh-surface-3);
    }

    main.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link {
        min-height: 36px;
        border-color: transparent !important;
        border-radius: 8px !important;
        background: transparent !important;
        color: var(--nh-text) !important;
        font-weight: 500;
    }

    main.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link:hover { background: rgba(15, 23, 42, .06) !important; color: var(--nh-ink) !important; }

    main.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link.active {
        border-color: var(--nh-line) !important;
        background: var(--nh-surface) !important;
        color: var(--nh-primary-ink) !important;
        font-weight: 700;
        box-shadow: var(--nh-shadow-raised);
    }
}

main.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link > i { color: var(--nh-muted); }
main.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link.active > i { color: var(--nh-primary); }

/* ---------- Seitenleiste: aktiver Eintrag so klar wie der aktive Reiter ---------- */
main.nh-shell-page .nh-nav-link { position: relative; color: var(--nh-text); }
main.nh-shell-page .nh-nav-link:hover { background: var(--nh-surface-2); }
main.nh-shell-page .nh-nav-link.is-active {
    background: var(--nh-primary-tint);
    color: var(--nh-primary-ink);
    font-weight: 700;
}
/* Markierung links (Zustand nicht nur über Farbtönung erkennbar) – auch im mobilen Kontomenü und in Listen-Navigation */
main.nh-shell-page .nh-nav-link.is-active::before,
main.nh-shell-page .nh-nav-sublink.is-active::before,
main.nh-shell-page .nh-shell-content .list-group-item-action.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    bottom: 9px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--nh-primary);
}
main.nh-shell-page .nh-nav-icon { color: var(--nh-muted); }
main.nh-shell-page .nh-nav-section + .nh-nav-section,
main.nh-shell-page .nh-nav-footer { border-top-color: var(--nh-line); }

/* Listen-Navigation im Inhalt (Domain-Seitenliste, Abteilungswahl): gleicher aktiver Zustand */
main.nh-shell-page .nh-shell-content .list-group-item-action.active { font-weight: 700; }

/* ---------- 3. Knöpfe ---------- */

/* Primär: volle Markenfarbe statt Violett-Verlauf, kein Schwebe-Schatten (booking/nh-custom setzen beides mit !important) */
main.nh-shell-page .nh-shell .btn-primary,
main.nh-shell-page .modal .btn-primary {
    border: 1px solid var(--nh-primary) !important;
    background: var(--nh-primary) !important;
    color: #fff !important;
    filter: none !important;
}

main.nh-shell-page .nh-shell .btn-primary:hover:not(:disabled):not(.disabled),
main.nh-shell-page .nh-shell .btn-primary:active,
main.nh-shell-page .modal .btn-primary:hover:not(:disabled):not(.disabled) {
    border-color: var(--nh-primary-hover) !important;
    background: var(--nh-primary-hover) !important;
    box-shadow: none !important;
}

/* Sekundär/Umriss (Hostware btn-outline-*, btn-secondary/-light/-dark, nackter .btn im Modal-Fuß): weiß, Rand 3,7:1, Tinte */
main.nh-shell-page .nh-shell .btn-outline-primary,
main.nh-shell-page .nh-shell .btn-outline-secondary,
main.nh-shell-page .nh-shell .btn-outline-dark,
main.nh-shell-page .nh-shell .btn-outline-info,
main.nh-shell-page .nh-shell-content .btn-secondary,
main.nh-shell-page .nh-shell-content .btn-light,
main.nh-shell-page .nh-shell-content .btn-dark,
main.nh-shell-page .modal-footer .btn:not([class*="btn-"]) {
    border: 1px solid var(--nh-control-line) !important;
    background: var(--nh-surface) !important;
    background-image: none !important;
    color: var(--nh-ink) !important;
}

main.nh-shell-page .nh-shell .btn-outline-primary i,
main.nh-shell-page .nh-shell .btn-outline-secondary i { color: var(--nh-primary); }

main.nh-shell-page .nh-shell .btn-outline-primary:hover:not(:disabled):not(.disabled),
main.nh-shell-page .nh-shell .btn-outline-secondary:hover:not(:disabled):not(.disabled),
main.nh-shell-page .nh-shell .btn-outline-dark:hover:not(:disabled):not(.disabled),
main.nh-shell-page .nh-shell .btn-outline-info:hover:not(:disabled):not(.disabled),
main.nh-shell-page .nh-shell-content .btn-secondary:hover:not(:disabled),
main.nh-shell-page .nh-shell-content .btn-light:hover:not(:disabled),
main.nh-shell-page .nh-shell-content .btn-dark:hover:not(:disabled),
main.nh-shell-page .modal-footer .btn:not([class*="btn-"]):hover {
    border-color: var(--nh-primary) !important;
    background: var(--nh-primary-tint-2) !important;
    color: var(--nh-primary-ink) !important;
}

/* Getönte Aktionsknöpfe (panel.css: Erfolg/Warnung/Gefahr/Info und Primär in Tabellenzeilen) behalten ihre Tönung,
   bekommen aber einen Rand >= 3:1 in ihrem Ton */
main.nh-shell-page .nh-shell-content .btn-success { border-color: rgba(6, 115, 79, .72) !important; }
main.nh-shell-page .nh-shell-content .btn-warning { border-color: rgba(138, 75, 0, .68) !important; }
main.nh-shell-page .nh-shell-content .btn-danger { border-color: rgba(180, 35, 24, .64) !important; }
main.nh-shell-page .nh-shell-content .btn-info,
main.nh-shell-page .nh-shell-content .table td .btn-primary { border-color: rgba(81, 67, 217, .68) !important; }

/* Umriss in Statusfarben (z. B. Gameserver-Steuerung): Rand und Text im dunklen Ton */
main.nh-shell-page .nh-shell .btn-outline-success { border-color: rgba(6, 115, 79, .72) !important; background: var(--nh-surface) !important; color: var(--nh-success-ink) !important; }
main.nh-shell-page .nh-shell .btn-outline-warning { border-color: rgba(138, 75, 0, .68) !important; background: var(--nh-surface) !important; color: var(--nh-warning-ink) !important; }
main.nh-shell-page .nh-shell .btn-outline-danger { border-color: rgba(180, 35, 24, .64) !important; background: var(--nh-surface) !important; color: var(--nh-danger-ink) !important; }
main.nh-shell-page .nh-shell .btn-outline-success:hover:not(:disabled) { background: var(--nh-success-tint) !important; }
main.nh-shell-page .nh-shell .btn-outline-warning:hover:not(:disabled) { background: var(--nh-warning-tint) !important; }
main.nh-shell-page .nh-shell .btn-outline-danger:hover:not(:disabled) { background: var(--nh-danger-tint) !important; color: var(--nh-danger-ink) !important; }

/* „Vertrag kündigen“ im Vertragskopf (Hostware: btn-outline-secondary): als Gefahr-Aktion in Rot, damit er nicht untergeht */
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancel-service"],
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancellation-discount"] {
    border-color: rgba(180, 35, 24, .64) !important;
    background: var(--nh-danger-tint) !important;
    color: var(--nh-danger-ink) !important;
    font-weight: 600;
}
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancel-service"] i,
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancellation-discount"] i { color: var(--nh-danger-ink) !important; }
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancel-service"]:hover:not(:disabled),
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancellation-discount"]:hover:not(:disabled) {
    border-color: var(--nh-danger-ink) !important;
    background: var(--nh-danger-ink) !important;
    color: #fff !important;
}
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancel-service"]:hover:not(:disabled) i,
main.nh-shell-page .nh-shell .hw-page-header .btn[data-bs-target="#cancellation-discount"]:hover:not(:disabled) i { color: #fff !important; }

/* Tertiär: Link-Knöpfe und Textaktionen unterstrichen in Primär-Tinte
   (Ausnahme "Vertrag kündigen" .nh-pd-cancel: bleibt bewusst gedämpft, panel-product.css) */
main.nh-shell-page .nh-shell .btn-link:not(.nh-pd-cancel),
main.nh-shell-page .nh-link-btn,
main.nh-shell-page .nh-pin-renew {
    color: var(--nh-primary-ink) !important;
    text-decoration: underline;
    text-decoration-color: rgba(59, 47, 184, .45);
    text-underline-offset: 3px;
}
main.nh-shell-page .nh-shell .btn-link:not(.nh-pd-cancel):hover,
main.nh-shell-page .nh-link-btn:hover,
main.nh-shell-page .nh-pin-renew:hover { text-decoration-color: currentColor; }
main.nh-shell-page .nh-link-btn.is-done { color: var(--nh-success-ink) !important; }

/* Icon-Knöpfe (DNS-Zeilen), Zurück-Pfeil, Blättern: Rand eines Bedienelements */
main.nh-shell-page .nh-icon-btn,
main.nh-shell-page .nh-shell .hw-back-btn,
main.nh-shell-page .nh-shell-content .pagination .page-link { border-color: var(--nh-control-line); }
main.nh-shell-page .nh-shell .hw-back-btn { border: 1px solid var(--nh-control-line) !important; }
main.nh-shell-page .nh-icon-btn { color: var(--nh-text); }
main.nh-shell-page .nh-icon-btn:hover,
main.nh-shell-page .nh-shell .hw-back-btn:hover { border-color: var(--nh-primary) !important; }
main.nh-shell-page .nh-icon-btn--danger:hover { border-color: var(--nh-danger-ink) !important; }
main.nh-shell-page .nh-shell-content .pagination .page-item.active .page-link { border-color: var(--nh-primary); background: var(--nh-primary); color: #fff; }

/* Deaktivierte Knöpfe: erkennbar blass, kein Zeiger */
main.nh-shell-page .nh-shell .btn:disabled,
main.nh-shell-page .nh-shell .btn.disabled { opacity: .5; cursor: not-allowed; }

/* ---------- 4. Formularfelder ---------- */

main.nh-shell-page .nh-shell .form-control,
main.nh-shell-page .nh-shell .form-select,
main.nh-shell-page .nh-shell .custom-select,
main.nh-shell-page .nh-shell select,
main.nh-shell-page .nh-shell textarea,
main.nh-shell-page .modal .form-control,
main.nh-shell-page .modal .form-select { border-color: var(--nh-field) !important; }

/* nh-custom: .form-control:hover:not(:disabled):not([readonly]) { border-color … !important } (0,4,0) */
main.nh-shell-page .nh-shell .form-control:hover:not(:focus):not(:disabled):not([readonly]),
main.nh-shell-page .nh-shell .form-select:hover:not(:focus):not(:disabled),
main.nh-shell-page .modal .form-control:hover:not(:focus):not(:disabled):not([readonly]),
main.nh-shell-page .modal .form-select:hover:not(:focus):not(:disabled) { border-color: var(--nh-field-hover) !important; }

main.nh-shell-page .nh-shell .form-control:focus,
main.nh-shell-page .nh-shell .form-select:focus,
main.nh-shell-page .nh-shell select:focus,
main.nh-shell-page .nh-shell textarea:focus,
main.nh-shell-page .modal .form-control:focus,
main.nh-shell-page .modal .form-select:focus {
    border-color: var(--nh-primary) !important;
    box-shadow: var(--nh-focus) !important;
    outline: 0;
}

/* Felder direkt auf der Seitenfläche (Kopf-Auswahl, DNS-Filter): dunklerer Rand, damit auch dort 3:1 */
main.nh-shell-page .nh-shell .hw-page-actions .form-select,
main.nh-shell-page .nh-shell .hw-page-actions .form-control,
main.nh-shell-page .nh-dns-filter .form-control { border-color: var(--nh-control-line) !important; }

main.nh-shell-page .nh-shell .form-control::placeholder,
main.nh-shell-page .modal .form-control::placeholder { color: var(--nh-placeholder); opacity: 1; }

/* Deaktiviert: booking/panel.css setzen jedes Feld auf Weiß (!important) – deaktiviert sah aus wie bearbeitbar */
main.nh-shell-page .nh-shell .form-control:disabled,
main.nh-shell-page .nh-shell .form-select:disabled,
main.nh-shell-page .nh-shell select:disabled,
main.nh-shell-page .nh-shell textarea:disabled,
main.nh-shell-page .modal .form-control:disabled,
main.nh-shell-page .modal .form-select:disabled {
    border-color: var(--nh-line) !important;
    border-style: dashed !important;
    background-color: var(--nh-surface-2) !important;
    color: var(--nh-muted);
    cursor: not-allowed;
    opacity: 1;
}

main.nh-shell-page .nh-shell-content label,
main.nh-shell-page .nh-shell-content .form-label,
main.nh-shell-page .modal label,
main.nh-shell-page .modal .form-label { color: var(--nh-label); }

main.nh-shell-page .nh-shell .input-group-text { border-color: var(--nh-field); }

/* Kontrollkästchen/Optionsfelder: 22 px, Rand 4,5:1 (wie Anmeldeseiten) */
main.nh-shell-page .nh-shell .form-check-input:not([role="switch"]),
main.nh-shell-page .modal .form-check-input:not([role="switch"]) {
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border: 1px solid var(--nh-placeholder);
    flex-shrink: 0;
}
main.nh-shell-page .nh-shell .form-check-input[type="checkbox"]:not([role="switch"]),
main.nh-shell-page .modal .form-check-input[type="checkbox"]:not([role="switch"]) { border-radius: 6px; }
main.nh-shell-page .nh-shell .form-check:has(> .form-check-input:not([role="switch"])),
main.nh-shell-page .modal .form-check:has(> .form-check-input:not([role="switch"])) { padding-left: 2rem; }
main.nh-shell-page .nh-shell .form-check:has(> .form-check-input:not([role="switch"])) > .form-check-input,
main.nh-shell-page .modal .form-check:has(> .form-check-input:not([role="switch"])) > .form-check-input { margin-left: -2rem; }
main.nh-shell-page .nh-shell .form-check-input:not(:checked) { border-color: var(--nh-placeholder); }
main.nh-shell-page .nh-shell .form-check-input:checked,
main.nh-shell-page .modal .form-check-input:checked { border-color: var(--nh-primary); background-color: var(--nh-primary); }
main.nh-shell-page .nh-shell .form-check-input:focus { box-shadow: var(--nh-focus); border-color: var(--nh-primary); }
main.nh-shell-page .nh-shell .form-check-input:disabled { opacity: .45; }

/* ---------- 5. Weitere Zustände ---------- */

/* Tabellen: Kopfzeile getönt mit Linie, Zeilen-Trenner sichtbar */
main.nh-shell-page .nh-shell-content .table thead th {
    border-bottom: 1px solid var(--nh-line) !important;
    background: var(--nh-surface-2) !important;
}
main.nh-shell-page .nh-shell-content .table tbody td { border-color: var(--nh-line-soft) !important; }
main.nh-shell-page .nh-shell-content .table tbody tr:hover { background: var(--nh-primary-tint-2); }

/* Listen in Flächen (Dashboard, Einstellungen) */
main.nh-shell-page .nh-list-item { border-top-color: var(--nh-line-soft); }

/* Neutrale Pillen/Badges: auf Weiß sonst unsichtbar – Rand + dunklerer Text */
main.nh-shell-page .nh-badge,
main.nh-shell-page .nh-status:not([class*="nh-status--"]),
main.nh-shell-page .nh-status--muted,
main.nh-shell-page .nh-shell-content .badge.bg-secondary,
main.nh-shell-page .nh-shell-content .badge.bg-dark,
main.nh-shell-page .nh-shell-content .badge.bg-light,
main.nh-shell-page .nh-shell-content .badge.text-bg-light {
    box-shadow: inset 0 0 0 1px var(--nh-line);
    color: #475569 !important;
}
main.nh-shell-page .nh-badge--danger,
main.nh-shell-page .nh-badge--warning,
main.nh-shell-page .nh-badge--primary { box-shadow: none; }
main.nh-shell-page .nh-badge--danger { color: var(--nh-danger-ink) !important; }
main.nh-shell-page .nh-badge--warning { color: var(--nh-warning-ink) !important; }
main.nh-shell-page .nh-badge--primary { color: var(--nh-primary-ink) !important; }

/* Hinweise: Rand eine Stufe kräftiger */
main.nh-shell-page .nh-shell .alert-primary,
main.nh-shell-page .nh-shell .alert-info { border-color: rgba(81, 67, 217, .3); }
main.nh-shell-page .nh-shell .alert-success { border-color: rgba(6, 115, 79, .3); }
main.nh-shell-page .nh-shell .alert-warning { border-color: rgba(138, 75, 0, .3); }
main.nh-shell-page .nh-shell .alert-danger { border-color: rgba(180, 35, 24, .3); }
main.nh-shell-page .nh-shell .alert-secondary,
main.nh-shell-page .nh-shell .alert-light { border-color: var(--nh-line); }

/* Modals: Kopf/Fuß-Linien */
main.nh-shell-page .modal-header,
main.nh-shell-page .modal-footer { border-color: var(--nh-line); }

/* Fokus: sichtbar auf jedem Bedienelement (booking nimmt Knöpfen den Umriss: .btn:focus-visible { outline: none }) */
main.nh-shell-page .nh-shell a:focus-visible,
main.nh-shell-page .nh-shell button:focus-visible,
main.nh-shell-page .nh-shell .btn:focus-visible,
main.nh-shell-page .nh-shell summary:focus-visible,
main.nh-shell-page .nh-shell [tabindex]:not([tabindex="-1"]):focus-visible,
main.nh-shell-page .modal .btn:focus-visible {
    outline: 2px solid var(--nh-primary) !important;
    outline-offset: 2px;
    box-shadow: none !important;
}

@media (max-width: 991.98px) {
    main.nh-shell-page .nh-subnav-link,
    main.nh-shell-page .nh-shell-content .nav-tabs .nav-link,
    main.nh-shell-page .nh-shell-content .nav-pills .nav-link { min-height: 44px; }

    /* Mobiles Kontomenü (panel-ux.css .nh-nav-sublink): aktiver Unterpunkt wie in der Seitenleiste */
    main.nh-shell-page .nh-nav-sublink.is-active {
        background: var(--nh-primary-tint);
        font-weight: 700;
    }
    main.nh-shell-page .nh-nav-sublink { position: relative; }

    /* Speichern-Knopf unter Profil/Kontakt-Formular (panel-account.css: 42 px mit ID-Spezifität) – mobil 44 px wie alle */
    main.nh-shell-page [data-nhpanel-route] #authRegisterForm > .btn.btn-block,
    main.nh-shell-page [data-nhpanel-route^="storefront.account.domain.handles"] .card-body > form > .btn.btn-block { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
    main.nh-shell-page .nh-subnav-link,
    main.nh-shell-page .nh-shell-content .nav-tabs .nav-link,
    main.nh-shell-page .nh-shell-content .nav-pills .nav-link { transition: none; }
}

/* ---------- Nichts abschneiden (Prüfung 03.10.2026 mit 390 / 1100 / 1440 px) ---------- */

/* Produktliste: lange Status-Badges ("Kündigungsvormerkung zum …") dürfen umbrechen – sonst hält die Statusspalte
   ihre volle Breite und schiebt "Ansehen" zwischen 1025 und 1150 px über den Kartenrand */
main.nh-shell-page .nh-shell-content table.nh-stackable td:first-child .badge { white-space: normal; text-align: left; }

/* Modulseiten (z. B. VPS-Netzwerk): Kopfzeile aus Titel und Zeitraum-Umschalter bricht schmal um, statt rechts abgeschnitten zu werden */
@media (max-width: 575.98px) {
    main.nh-shell-page .module-content .card-body > .d-flex.justify-content-between { flex-wrap: wrap; gap: 8px; }
    main.nh-shell-page .module-content .card-body > .d-flex.justify-content-between > .btn-group { width: 100%; }
    main.nh-shell-page .module-content .card-body > .d-flex.justify-content-between > .btn-group > .btn { flex: 1 1 auto; padding-left: 4px; padding-right: 4px; letter-spacing: 0; }
}