/*
 * NhPanel – Kundenportal (Konto-Shell + Harmonisierung)
 * Baut auf den bestehenden Nexthosting-Tokens auf (--nh-account-*, booking/nexthosting-account-style.twig).
 * Alles ist unter .nh-shell-page gekapselt: ohne Shell ändert diese Datei nichts.
 */

:root {
    --nh-ink: var(--nh-account-ink, #0b1224);
    --nh-text: #334155;
    --nh-muted: #5b6b82;             /* 5.3:1 auf Weiß (statt #94a3b8 = 2.6:1) */
    --nh-line: rgba(15, 23, 42, .09);
    --nh-surface: #ffffff;
    --nh-surface-2: #f7f8fd;
    --nh-primary: var(--nh-account-primary, #5143d9);
    --nh-primary-ink: #3b2fb8;       /* Text auf hellem Violett-Tint, 7:1 */
    --nh-primary-tint: rgba(81, 67, 217, .09);
    --nh-primary-tint-2: rgba(81, 67, 217, .05);
    --nh-danger-ink: #b42318;
    --nh-danger-tint: #fdecea;
    --nh-warning-ink: #8a4b00;
    --nh-warning-tint: #fff4dc;
    --nh-success-ink: #06734f;
    --nh-success-tint: #e6f6ef;
    --nh-radius: 16px;
    --nh-radius-sm: 10px;
    --nh-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .06);
    --nh-focus: 0 0 0 3px rgba(81, 67, 217, .35);
    --nh-header-offset: 104px;
}

/* ---------- Shell-Raster ---------- */

.nh-shell-page .nh-shell {
    padding: 28px 0 72px;
}

.nh-shell-page .nh-shell-inner {
    width: min(100% - 48px, 1320px);
    margin-inline: auto;
    display: grid;
    grid-template-columns: 264px minmax(0, 1fr);
    grid-template-areas: "aside main";
    gap: 32px;
    align-items: start;
}

.nh-shell-page .nh-shell-aside { grid-area: aside; }
.nh-shell-page .nh-shell-main { grid-area: main; min-width: 0; }
.nh-shell-page .nh-shell-main:focus { outline: none; }

/* Container aus Hostware-Markup innerhalb der Shell neutralisieren */
.nh-shell-page .nh-shell .hw-container {
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
}

/* ---------- Seitenleiste ---------- */

@media (min-width: 992px) {
    .nh-shell-page .nh-shell-aside {
        position: sticky;
        top: var(--nh-header-offset);
    }

    .nh-shell-page .nh-shell-aside-body {
        display: block !important;
        width: 100%;
    }

    .nh-shell-page .nh-shell-toggle { display: none; }
}

.nh-shell-page .nh-nav {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 12px;
    background: var(--nh-surface);
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
    box-shadow: var(--nh-shadow);
}

.nh-shell-page .nh-nav-section + .nh-nav-section {
    padding-top: 12px;
    border-top: 1px solid var(--nh-line);
}

.nh-shell-page .nh-nav-heading {
    display: block;
    padding: 2px 10px 6px;
    color: var(--nh-muted);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.nh-shell-page .nh-nav-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-shell-page .nh-nav-link {
    display: flex;
    align-items: center;
    gap: 11px;
    min-height: 40px;
    padding: 8px 10px;
    border-radius: var(--nh-radius-sm);
    color: var(--nh-text);
    font-size: .94rem;
    font-weight: 500;
    line-height: 1.25;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.nh-shell-page .nh-nav-icon {
    flex: 0 0 18px;
    width: 18px;
    color: #6b7a90;
    text-align: center;
    transition: color .15s ease;
}

.nh-shell-page .nh-nav-label { flex: 1 1 auto; min-width: 0; }

.nh-shell-page .nh-nav-link:hover {
    background: var(--nh-primary-tint-2);
    color: var(--nh-ink);
}

.nh-shell-page .nh-nav-link:hover .nh-nav-icon { color: var(--nh-primary); }

.nh-shell-page .nh-nav-link.is-active {
    background: var(--nh-primary-tint);
    color: var(--nh-primary-ink);
    font-weight: 650;
}

.nh-shell-page .nh-nav-link.is-active .nh-nav-icon { color: var(--nh-primary); }

.nh-shell-page .nh-nav-meta {
    color: var(--nh-muted);
    font-size: .8rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.nh-shell-page .nh-nav-ext {
    color: var(--nh-muted);
    font-size: .72rem;
}

.nh-shell-page .nh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 7px;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    background: var(--nh-surface-2);
    color: var(--nh-text);
}

.nh-shell-page .nh-badge--danger { background: var(--nh-danger-tint); color: var(--nh-danger-ink); }
.nh-shell-page .nh-badge--warning { background: var(--nh-warning-tint); color: var(--nh-warning-ink); }
.nh-shell-page .nh-badge--primary { background: var(--nh-primary-tint); color: var(--nh-primary-ink); }

.nh-shell-page .nh-nav-footer {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px 4px;
    border-top: 1px solid var(--nh-line);
}

.nh-shell-page .nh-nav-identity { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.nh-shell-page .nh-nav-identity-name { color: var(--nh-ink); font-weight: 650; font-size: .92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-shell-page .nh-nav-identity-meta { color: var(--nh-muted); font-size: .8rem; }
.nh-shell-page .nh-nav-identity-meta strong { color: var(--nh-text); font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.nh-shell-page .nh-nav-logout {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    min-height: 36px;
    padding: 6px 10px;
    margin-left: -10px;
    border-radius: var(--nh-radius-sm);
    color: var(--nh-muted);
    font-size: .88rem;
    font-weight: 500;
    text-decoration: none;
}

.nh-shell-page .nh-nav-logout:hover { background: var(--nh-danger-tint); color: var(--nh-danger-ink); }

/* ---------- Mobil: Menü-Knopf + Schublade ---------- */

.nh-shell-page .nh-shell-toggle {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    min-height: 48px;
    padding: 10px 14px;
    border: 1px solid var(--nh-line);
    border-radius: 14px;
    background: var(--nh-surface);
    box-shadow: var(--nh-shadow);
    color: var(--nh-ink);
    font-weight: 600;
    text-align: left;
}

.nh-shell-page .nh-shell-toggle-current {
    margin-left: auto;
    max-width: 55%;
    overflow: hidden;
    color: var(--nh-muted);
    font-weight: 500;
    font-size: .9rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 991.98px) {
    .nh-shell-page .nh-shell { padding-top: 16px; }

    .nh-shell-page .nh-shell-inner {
        width: min(100% - 28px, 1320px);
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "toggle" "main";
        gap: 18px;
    }

    .nh-shell-page .nh-shell-toggle { grid-area: toggle; }

    .nh-shell-page .nh-shell-aside {
        --bs-offcanvas-width: min(88vw, 320px);
        background: var(--nh-surface-2);
    }

    .nh-shell-page .nh-shell-aside-header {
        border-bottom: 1px solid var(--nh-line);
        font-weight: 650;
    }

    .nh-shell-page .nh-shell-aside-body { padding: 14px; }
    .nh-shell-page .nh-nav { box-shadow: none; }
    .nh-shell-page .nh-nav-link { min-height: 46px; font-size: 1rem; }
}

@media (max-width: 575.98px) {
    .nh-shell-page .nh-shell-inner { width: min(100% - 22px, 1320px); }
}

/* ---------- Seitenkopf (ersetzt den 150-px-Hero innerhalb der Shell) ---------- */

.nh-shell-page .nh-shell .hw-header-section { padding: 0 0 18px; }

.nh-shell-page .nh-shell .hw-page-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px 18px;
    min-height: 0;
    padding: 0;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    animation: none;
}

.nh-shell-page .nh-shell .hw-page-header::before,
.nh-shell-page .nh-shell .hw-page-header::after { display: none; }

.nh-shell-page .nh-shell .hw-page-title { flex: 1 1 280px; min-width: 0; }

.nh-shell-page .nh-shell .hw-page-title h1,
.nh-shell-page .nh-shell .hw-page-title h2 {
    margin: 0;
    color: var(--nh-ink);
    font-size: 1.625rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.nh-shell-page .nh-shell .hw-page-title h1 small,
.nh-shell-page .nh-shell .hw-page-title h2 small {
    margin-left: 6px;
    color: var(--nh-muted);
    font-size: .95rem;
    font-weight: 500;
    letter-spacing: 0;
}

.nh-shell-page .nh-shell .hw-subtitle {
    margin: 6px 0 0;
    color: var(--nh-muted);
    font-size: .95rem;
}

.nh-shell-page .nh-shell .hw-page-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.nh-shell-page .nh-shell .hw-back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    border: 1px solid var(--nh-line);
    border-radius: 12px;
    background: var(--nh-surface);
    color: var(--nh-text);
    text-decoration: none;
    transform: none;
}

.nh-shell-page .nh-shell .hw-back-btn:hover { color: var(--nh-primary); border-color: rgba(81, 67, 217, .3); }

@media (max-width: 575.98px) {
    .nh-shell-page .nh-shell .hw-page-title h1,
    .nh-shell-page .nh-shell .hw-page-title h2 { font-size: 1.375rem; }
}

/* ---------- Unter-Reiter (Kontobereiche) ---------- */

.nh-shell-page .nh-subnav { margin: 0 0 18px; }

.nh-shell-page .nh-subnav-list {
    display: flex;
    gap: 6px;
    margin: 0;
    padding: 0 0 2px;
    overflow-x: auto;
    list-style: none;
    scrollbar-width: thin;
}

.nh-shell-page .nh-subnav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px;
    border: 1px solid var(--nh-line);
    border-radius: 999px;
    background: var(--nh-surface);
    color: var(--nh-text);
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
}

.nh-shell-page .nh-subnav-link i { color: #6b7a90; }
.nh-shell-page .nh-subnav-link:hover { border-color: rgba(81, 67, 217, .28); color: var(--nh-ink); }
.nh-shell-page .nh-subnav-link.is-active { border-color: transparent; background: var(--nh-primary-tint); color: var(--nh-primary-ink); font-weight: 650; }
.nh-shell-page .nh-subnav-link.is-active i { color: var(--nh-primary); }

/* ---------- Inhalt ---------- */

.nh-shell-page .nh-shell-alerts:empty { display: none; }
.nh-shell-page .nh-shell-alerts .alert { margin-bottom: 16px; }

/* Tabellen: horizontales Scrollen statt Überlauf */
.nh-shell-page .nh-shell-content .nh-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Mobile Tabellen: Booking blendet den Tabellenkopf aus – Spaltennamen je Zelle wieder anzeigen */
@media (max-width: 575.98px) {
    .nh-shell-page .table tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: 2px;
        color: var(--nh-muted);
        font-size: .75rem;
        font-weight: 650;
        letter-spacing: .02em;
    }

    .nh-shell-page .table tbody td[data-label=""]::before { display: none; }
}

/* ---------- Fokus & Browser-Oberflächen ---------- */

.nh-shell-page a:focus-visible,
.nh-shell-page button:focus-visible,
.nh-shell-page .btn:focus-visible,
.nh-shell-page [tabindex]:focus-visible {
    outline: 2px solid var(--nh-primary);
    outline-offset: 2px;
    box-shadow: none;
}

.nh-shell-page ::selection { background: rgba(81, 67, 217, .18); color: var(--nh-ink); }

.nh-shell-page .nh-shell-content .table td,
.nh-shell-page .nh-shell-content .table th { font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
    .nh-shell-page .nh-nav-link,
    .nh-shell-page .nh-nav-icon { transition: none; }
}

/* ---------- Dashboard ---------- */

.nh-shell-page .nh-dash-section { margin-bottom: 24px; }

.nh-shell-page .nh-dash-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.nh-shell-page .nh-dash-title {
    margin: 0;
    color: var(--nh-ink);
    font-size: 1.08rem;
    font-weight: 700;
    letter-spacing: -.01em;
}

.nh-shell-page .nh-dash-more {
    color: var(--nh-primary-ink);
    font-size: .9rem;
    font-weight: 600;
    text-decoration: none;
}

.nh-shell-page .nh-dash-more:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Handlungsbedarf */
.nh-shell-page .nh-todo-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.nh-shell-page .nh-todo,
.nh-shell-page .nh-todo-empty {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: var(--nh-surface);
    border: 1px solid var(--nh-line);
    border-radius: 14px;
}

.nh-shell-page .nh-todo-icon {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--nh-surface-2);
    color: var(--nh-text);
}

.nh-shell-page .nh-todo--danger .nh-todo-icon { background: var(--nh-danger-tint); color: var(--nh-danger-ink); }
.nh-shell-page .nh-todo--warning .nh-todo-icon { background: var(--nh-warning-tint); color: var(--nh-warning-ink); }
.nh-shell-page .nh-todo--primary .nh-todo-icon { background: var(--nh-primary-tint); color: var(--nh-primary-ink); }
.nh-shell-page .nh-todo--danger { border-color: rgba(180, 35, 24, .22); }

.nh-shell-page .nh-todo-body { flex: 1 1 auto; min-width: 0; }
.nh-shell-page .nh-todo-title { margin: 0; color: var(--nh-ink); font-weight: 650; line-height: 1.3; }
.nh-shell-page .nh-todo-text { margin: 2px 0 0; color: var(--nh-muted); font-size: .9rem; overflow-wrap: anywhere; }
.nh-shell-page .nh-todo-text strong { color: var(--nh-ink); font-variant-numeric: tabular-nums; }
.nh-shell-page .nh-todo .btn { flex: 0 0 auto; white-space: nowrap; }

.nh-shell-page .nh-todo-empty i { font-size: 1.4rem; color: var(--nh-success-ink); }

@media (max-width: 575.98px) {
    .nh-shell-page .nh-todo { flex-wrap: wrap; }
    .nh-shell-page .nh-todo .btn { width: 100%; margin-left: 50px; width: calc(100% - 50px); }
}

/* Auf einen Blick */
.nh-shell-page .nh-glance {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    margin: 0;
    background: var(--nh-surface);
    border: 1px solid var(--nh-line);
    border-radius: 14px;
    overflow: hidden;
}

.nh-shell-page .nh-glance-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 14px 18px;
    border-left: 1px solid var(--nh-line);
}

.nh-shell-page .nh-glance-item:first-child { border-left: 0; }
.nh-shell-page .nh-glance dt { color: var(--nh-muted); font-size: .82rem; font-weight: 600; }
.nh-shell-page .nh-glance dd { margin: 0; font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.nh-shell-page .nh-glance dd a { color: var(--nh-ink); text-decoration: none; }
.nh-shell-page .nh-glance dd a:hover { color: var(--nh-primary-ink); }

@media (max-width: 575.98px) {
    .nh-shell-page .nh-glance { grid-template-columns: 1fr 1fr; }
    .nh-shell-page .nh-glance-item:nth-child(odd) { border-left: 0; }
    .nh-shell-page .nh-glance-item:nth-child(n+3) { border-top: 1px solid var(--nh-line); }
}

/* Zwei Spalten: Dienste | Support */
.nh-shell-page .nh-dash-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

@media (max-width: 1199.98px) {
    .nh-shell-page .nh-dash-grid { grid-template-columns: minmax(0, 1fr); }
}

.nh-shell-page .nh-panel {
    margin-bottom: 0;
    padding: 18px;
    background: var(--nh-surface);
    border: 1px solid var(--nh-line);
    border-radius: var(--nh-radius);
}

.nh-shell-page .nh-list { margin: 0 0 8px; padding: 0; list-style: none; }

.nh-shell-page .nh-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 0;
    border-top: 1px solid var(--nh-line);
}

.nh-shell-page .nh-list-item:first-child { border-top: 0; padding-top: 4px; }
.nh-shell-page .nh-list-main { display: flex; flex-direction: column; min-width: 0; }
.nh-shell-page .nh-list-title { color: var(--nh-ink); font-weight: 600; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nh-shell-page .nh-list-title:hover { color: var(--nh-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.nh-shell-page .nh-list-meta { color: var(--nh-muted); font-size: .84rem; }

.nh-shell-page .nh-status {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 650;
    white-space: nowrap;
    background: var(--nh-surface-2);
    color: var(--nh-text);
}

.nh-shell-page .nh-status::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .8; }
.nh-shell-page .nh-status--success { background: var(--nh-success-tint); color: var(--nh-success-ink); }
.nh-shell-page .nh-status--warning { background: var(--nh-warning-tint); color: var(--nh-warning-ink); }
.nh-shell-page .nh-status--danger { background: var(--nh-danger-tint); color: var(--nh-danger-ink); }
.nh-shell-page .nh-status--primary { background: var(--nh-primary-tint); color: var(--nh-primary-ink); }
.nh-shell-page .nh-status--muted { color: var(--nh-muted); }

.nh-shell-page .nh-empty { padding: 8px 0 4px; color: var(--nh-muted); }
.nh-shell-page .nh-muted { color: var(--nh-muted); }

.nh-shell-page .nh-pin {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--nh-line);
}

.nh-shell-page .nh-pin-label { display: block; color: var(--nh-muted); font-size: .82rem; font-weight: 600; }
.nh-shell-page .nh-pin-value { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .08em; }
.nh-shell-page .nh-pin-renew { padding: 6px 0; color: var(--nh-primary-ink); font-weight: 600; }

/* ---------- Seitenleiste v2: sechs Bereiche ---------- */

.nh-shell-page .nh-nav { gap: 10px; padding: 10px; }
.nh-shell-page .nh-nav > .nh-nav-list { gap: 2px; }
.nh-shell-page .nh-nav .nh-nav-link { min-height: 44px; font-size: .96rem; }

.nh-shell-page .nh-nav-links {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
}

.nh-shell-page .nh-nav-links a {
    color: var(--nh-muted);
    font-size: .84rem;
    text-decoration: none;
}

.nh-shell-page .nh-nav-links a:hover { color: var(--nh-primary-ink); text-decoration: underline; text-underline-offset: 3px; }

.nh-shell-page .nh-subnav-link .nh-badge { height: 18px; min-width: 18px; padding: 0 6px; font-size: .7rem; }

/* Zurück-Pfeil nur auf Detailseiten – Bereichsseiten navigieren über Seitenleiste und Reiter */
.nh-shell-page .nh-shell-main:not(.nh-shell-main--detail) .hw-back-btn { display: none; }

/* ---------- Inhalt: Typografie & Komponenten vereinheitlichen ---------- */

.nh-shell-page .nh-shell-content h2,
.nh-shell-page .nh-shell-content .h2 {
    margin: 28px 0 12px;
    color: var(--nh-ink);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.01em;
}

.nh-shell-page .nh-shell-content > h2:first-child,
.nh-shell-page .nh-shell-content > :first-child h2:first-child { margin-top: 0; }

.nh-shell-page .nh-shell-content h3,
.nh-shell-page .nh-shell-content .h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.005em; }

.nh-shell-page .nh-shell-content h4,
.nh-shell-page .nh-shell-content .h4 { font-size: 1rem; font-weight: 700; }

.nh-shell-page .nh-shell-content .card-header h5,
.nh-shell-page .nh-shell-content .card-header h6,
.nh-shell-page .nh-shell-content .card-header .h5 {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.35;
}

/* Kartenköpfe dürfen umbrechen, statt Aktionen abzuschneiden (z. B. Zahlungsmandate) */
.nh-shell-page .nh-shell-content .card-header.d-flex { flex-wrap: wrap; gap: 10px; }
.nh-shell-page .nh-shell-content .card-header.d-flex > * { min-width: 0; }
.nh-shell-page .nh-shell-content .card-header .badge { margin-top: 4px; white-space: normal; text-align: left; }

/* Karten ruhiger: kein Schwebe-Effekt auf reinen Inhaltskarten */
.nh-shell-page .nh-shell-content .card { border-radius: var(--nh-radius) !important; }
.nh-shell-page .nh-shell-content .card:hover { box-shadow: var(--nh-shadow); border-color: var(--nh-line) !important; }

.nh-shell-page .nh-shell-content .card-header {
    padding: 14px 18px;
    background: var(--nh-surface) !important;
}

.nh-shell-page .nh-shell-content .card-body { padding: 18px; }

/* Tabellen dichter und ruhiger */
.nh-shell-page .nh-shell-content .table thead th {
    padding: 11px 16px;
    background: var(--nh-surface-2) !important;
    color: var(--nh-muted);
    font-size: .76rem;
    font-weight: 700;
    letter-spacing: .04em;
}

.nh-shell-page .nh-shell-content .table tbody td { padding: 12px 16px; }

/* Buttons: einheitliche Höhe, Primär ohne Verlauf-Wechsel beim Schweben */
.nh-shell-page .nh-shell-content .btn { border-radius: 10px; font-weight: 600; }
.nh-shell-page .nh-shell-content .btn-sm { border-radius: 8px; padding: 5px 11px; }

/* Hinweise ohne Riesen-Innenabstand */
.nh-shell-page .nh-shell-content .alert,
.nh-shell-page .nh-shell-alerts .alert { border-radius: 12px; padding: 12px 16px; }

/* Modals aus Kontoseiten */
.nh-shell-page .modal-title { font-size: 1.05rem; font-weight: 700; }

/* ---------- Korrekturen nach Sichtprüfung (mobil) ---------- */

/* Booking stellt den Kopf < 992 px auf flex-direction: column – dann wirkte flex-basis als Höhe (280 px Lücke) */
.nh-shell-page .nh-shell .hw-page-header { flex-direction: row; align-items: center; }
.nh-shell-page .nh-shell .hw-page-title { flex: 1 1 16rem; }

/* Reiter: wischbar ohne sichtbaren Scrollbalken, Randverlauf zeigt weitere Reiter an */
.nh-shell-page .nh-subnav { position: relative; }
.nh-shell-page .nh-subnav-list { scrollbar-width: none; -ms-overflow-style: none; scroll-padding-inline: 24px; }
.nh-shell-page .nh-subnav-list::-webkit-scrollbar { display: none; }
.nh-shell-page .nh-subnav.has-overflow-end::after,
.nh-shell-page .nh-subnav.has-overflow-start::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 2px;
    width: 32px;
    pointer-events: none;
}
.nh-shell-page .nh-subnav.has-overflow-end::after { right: 0; background: linear-gradient(90deg, rgba(247, 248, 253, 0), rgba(247, 248, 253, .95)); }
.nh-shell-page .nh-subnav.has-overflow-start::before { left: 0; z-index: 1; background: linear-gradient(270deg, rgba(247, 248, 253, 0), rgba(247, 248, 253, .95)); }

/* Mobil-Menüknopf nur unter 992 px (Grundregel oben stand nach der Media-Query und gewann) */
@media (min-width: 992px) {
    .nh-shell-page .nh-shell-toggle { display: none !important; }
}

/* Seitenleiste klebt unterhalb des tatsächlichen Seitenkopfs (Höhe misst panel.js) */
@media (min-width: 992px) {
    .nh-shell-page .nh-shell-aside { top: calc(var(--nh-header-offset) + 16px); transition: top .15s ease; }
}

/* Booking gibt jedem <section> 3,5rem/2,8rem Innenabstand (Landingpage-Vorlage) – in der Shell nicht */
.nh-shell-page .nh-shell section { padding-top: 0; padding-bottom: 0; }

/* ---------- Tabellen: nach verfügbarer Breite (Container-Query) ---------- */

.nh-shell-page .nh-table-wrap {
    container-type: inline-size;
    container-name: nhtable;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@container nhtable (max-width: 680px) {
    .nh-shell-page .nh-stackable thead { display: none; }

    .nh-shell-page .nh-stackable,
    .nh-shell-page .nh-stackable tbody,
    .nh-shell-page .nh-stackable tr,
    .nh-shell-page .nh-stackable td { display: block; width: 100%; }

    .nh-shell-page .nh-stackable tbody tr {
        padding: 12px 16px;
        border-top: 1px solid var(--nh-line);
    }

    .nh-shell-page .nh-stackable tbody tr:first-child { border-top: 0; }

    .nh-shell-page .nh-stackable tbody td {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 16px;
        padding: 4px 0 !important;
        border: 0 !important;
        white-space: normal;
        text-align: right;
    }

    .nh-shell-page .nh-stackable tbody td[data-label]::before {
        content: attr(data-label);
        display: block;
        flex: 0 0 auto;
        margin: 0;
        color: var(--nh-muted);
        font-size: .8rem;
        font-weight: 600;
        letter-spacing: 0;
        text-align: left;
    }

    .nh-shell-page .nh-stackable tbody td[data-label=""] { justify-content: flex-start; text-align: left; }
    .nh-shell-page .nh-stackable tbody td[data-label=""]::before { display: none; }

    /* Letzte Spalte = Aktionen: linksbündig, Buttons dürfen umbrechen */
    .nh-shell-page .nh-stackable tbody td:last-child:not(:first-child) {
        justify-content: flex-start;
        flex-wrap: wrap;
        gap: 6px;
        padding-top: 10px !important;
    }
}

/*
 * Tabellen-Karten schmal – Korrektur (UX-Runde, Track u):
 * booking (nexthosting-account-style) setzt unter 576 px "main.nh-account-page .table tbody td { display: block }" mit
 * höherer Spezifität -> die Regel oben griff auf Handys nie: jede Beschriftung stand über ihrem Wert, der Wert rechtsbündig
 * (sehr lange Karten). Jetzt je Zeile ein zweispaltiges Raster: erste Zelle (Titel) und letzte Zelle (Aktionen) über die
 * volle Breite, alle übrigen Felder paarweise nebeneinander, Beschriftung klein über dem Wert, alles linksbündig.
 * Zellinhalte bleiben zusammen (kein Flex/Grid IN der Zelle, das Titel + Zusatzzeile auseinanderriss).
 */
@container nhtable (max-width: 680px) {
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 10px 16px;
        padding: 14px 16px;
    }

    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td {
        display: block;
        width: auto;
        min-width: 0;
        padding: 0 !important;
        text-align: left;
    }

    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td[data-label]::before {
        display: block;
        margin: 0 0 2px;
        font-size: .75rem;
    }

    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td[data-label=""]::before { display: none; }

    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td:first-child,
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td:last-child,
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td[colspan] { grid-column: 1 / -1; }

    /* Titelzelle ohne Beschriftung (steht für sich), Aktionen mit etwas Abstand */
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td:first-child:not(:only-child)::before { display: none; }

    /* Enthält eine Zeile eine als Titel markierte Zelle (td.nh-td-title), wird DIESE zum Kartentitel (z. B. Produktliste:
       Status steht dort in Spalte 1) – die erste Zelle ist dann ein normales Feld mit Beschriftung. */
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody tr:has(> td.nh-td-title) > td:first-child:not(.nh-td-title) { grid-column: auto; }
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody tr:has(> td.nh-td-title) > td:first-child:not(.nh-td-title)::before { display: block; }
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td.nh-td-title { order: -1; grid-column: 1 / -1; }
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td.nh-td-title::before { display: none; }
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td:last-child:not(:first-child) { padding-top: 2px !important; }
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td:last-child[data-label="Aktionen"]::before { display: none; }

    /* Lange Status-Badges und "kurze" Spalten (.nh-nowrap) in der halben Spalte umbrechen statt überlaufen */
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td .badge { max-width: 100%; white-space: normal; text-align: left; }
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td.nh-nowrap { white-space: normal; }
}

/* Leer-/Hinweiszeilen über alle Spalten (colspan): umbrechen und volle Breite – die Aktionsspalten-Regel
   (td:last-child = nowrap, 1 %) traf auch sie; mobil lief z. B. "Für Ihr Kundenkonto wurden noch keine …" aus dem Bild */
.nh-shell-page .nh-shell-content .table td[colspan]:last-child { white-space: normal; width: auto; }

/* Seitenkopf-Aktionen: Hostware-Gruppen (d-flex ohne Umbruch, z. B. Sitzungen: Auswahl + Knopf) liefen mobil
   über den Rand (Seite 666 px breit bei 375 px) – Gruppen dürfen umbrechen und schrumpfen */
.nh-shell-page .nh-shell .hw-page-actions { min-width: 0; max-width: 100%; }
.nh-shell-page .nh-shell .hw-page-actions > .d-flex { flex-wrap: wrap; min-width: 0; max-width: 100%; }
.nh-shell-page .nh-shell .hw-page-actions .form-select { max-width: 100%; }

/* Booking erzwingt nowrap in allen Tabellenzellen -> Tabellen breiter als die Spalte (seitliches Scrollen).
   In der Shell dürfen Textspalten umbrechen; Zahlen, Status und Aktionen bleiben einzeilig. */
.nh-shell-page .nh-shell-content .table td,
.nh-shell-page .nh-shell-content .table th { white-space: normal; }
.nh-shell-page .nh-shell-content .table th { white-space: nowrap; }
.nh-shell-page .nh-shell-content .table td .badge,
.nh-shell-page .nh-shell-content .table td .btn,
.nh-shell-page .nh-shell-content .table td .hw-status { white-space: nowrap; }
.nh-shell-page .nh-shell-content .table td:last-child { white-space: nowrap; width: 1%; }
.nh-shell-page .nh-shell-content .table td:last-child .btn + .btn,
.nh-shell-page .nh-shell-content .table td:last-child form + .btn { margin-left: 4px; }

/* ---------- Seitenwechsel ruhiger (überschreibt den globalen Übergang aus meta.twig nur auf Kontoseiten) ---------- */
/* Vorher: ganze Seite blendet aus und gleitet 16 px von unten ein -> wirkt wie "Herumspringen". */
:root::view-transition-old(root) { animation: nhPanelVtOut .12s ease-out both; }
:root::view-transition-new(root) { animation: nhPanelVtIn .16s ease-out both; }
@keyframes nhPanelVtOut { to { opacity: 0; } }
@keyframes nhPanelVtIn { from { opacity: 0; } }

/* Seitenleiste und Seitenkopf bleiben beim Wechsel stehen */
.nh-shell-page .nh-shell-aside { view-transition-name: nh-panel-aside; }
:root::view-transition-group(nh-panel-aside) { animation-duration: 0s; }

@media (prefers-reduced-motion: reduce) {
    :root::view-transition-old(root),
    :root::view-transition-new(root) { animation: none; }
}

/* custom_css (Admin-Textarea) blendet bei JEDEM Laden den ganzen body 0,32 s von opacity 0 ein und legt beim
   Verlassen ein Abdunkel-Overlay darüber – zusammen mit zwei View-Transition-Regeln drei Effekte übereinander.
   Auf Kontoseiten bleibt nur der kurze Fade oben; Inhalte sind sofort sichtbar. */
html.nh-page-ready body { animation: none !important; opacity: 1 !important; }
html.nh-is-leaving::after { display: none !important; }

/* Kurze Spalten (per panel.js erkannt) einzeilig; Textspalten brechen nur an Wortgrenzen */
.nh-shell-page .nh-shell-content .table td.nh-nowrap { white-space: nowrap; }
.nh-shell-page .nh-shell-content .table td { overflow-wrap: normal; word-break: normal; hyphens: manual; }
.nh-shell-page .nh-shell-content .table td small,
.nh-shell-page .nh-shell-content .table td .text-muted { display: inline-block; }

/* Tabellenzellen: Titel + gedämpfte Zusatzzeile */
.nh-shell-page .nh-cell-title { display: block; color: var(--nh-ink); font-weight: 650; line-height: 1.35; text-decoration: none; }
.nh-shell-page a.nh-cell-title:hover { color: var(--nh-primary-ink); text-decoration: underline; text-underline-offset: 3px; }
.nh-shell-page .nh-cell-meta { display: block; margin-top: 2px; color: var(--nh-muted); font-size: .84rem; line-height: 1.35; }
.nh-shell-page .nh-shell-content .table td .nh-status { white-space: nowrap; }

/* Hostware setzt teils d-flex direkt auf <td> (z. B. Domain-Kontakte) – das hebt das Tabellenzellen-Verhalten auf
   und quetschte die Aktions-Buttons zusammen. Zelle bleibt Zelle, Buttons stehen nebeneinander. */
@container nhtable (min-width: 681px) {
    .nh-shell-page .nh-shell-content .table td.d-flex { display: table-cell !important; }
}
.nh-shell-page .nh-shell-content .table td.d-flex > .btn,
.nh-shell-page .nh-shell-content .table td.d-flex > form { display: inline-flex; margin: 2px 4px 2px 0; vertical-align: middle; }
.nh-shell-page .nh-shell-content .table td:last-child .btn { white-space: nowrap; }

/* ---------- Korrekturen aus den Bereichs-Reviews (Track u, 30.09.) ---------- */

/* Tabellen-Karten schmal: Aktionsspalten-Regel (td:last-child 1 % + nowrap) galt auch in der Kartenansicht und
   quetschte Aktionsknöpfe auf wenige Pixel – in der Karte volle Breite, normaler Umbruch */
@container nhtable (max-width: 680px) {
    main.nh-shell-page .nh-shell-content table.nh-stackable tbody td:last-child { width: auto; white-space: normal; }
}

/* Bootstrap-.row im Inhalt: -15 px Außenabstand, der Rahmen hat mobil aber nur 11–14 px Rand -> Seite 4 px zu breit
   (nur durch overflow-x am body versteckt). Negativen Rand auf 11 px begrenzen; .g-0/.g-3 u. a. bleiben unverändert. */
@media (max-width: 991.98px) {
    .nh-shell-page .nh-shell-content .row {
        margin-left: max(-11px, calc(-.5 * var(--bs-gutter-x)));
        margin-right: max(-11px, calc(-.5 * var(--bs-gutter-x)));
    }
}

/* Kontrollkästchen/Schalter im ganzen Konto: booking-Rahmen hatte 1,3:1 Kontrast und keinen Fokusring
   (bisher nur Konto/Zugriff/API/Handles in panel-account.css – jetzt shell-weit, gleiche Werte) */
.nh-shell-page .nh-shell .form-check-input:not(:checked) { background-color: #fff; border-color: #7b8494; }
.nh-shell-page .nh-shell .form-switch .form-check-input:not(:checked) {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%237b8494'/%3e%3c/svg%3e");
}
.nh-shell-page .nh-shell .form-check-input:focus-visible { outline: 2px solid var(--nh-primary); outline-offset: 2px; }

/* ======================================================================
   Harmonisierung (Track u, 30.09., 2. Runde): ein Raster für alle Kontoseiten in der Shell
   Gemessen vorher (1440/375 px, Kunde 4; Werte in wt/out/panel-before-after.md):
   - Kopf-Aktionen 850er-Schrift, Radius 12, btn-sm 32 px neben 42 px; Inhaltsknöpfe 600/10 px; Primär 40 px (border 0),
     Outline 42 px; jeder Primärknopf mit 10/24-px-Schatten; farbige Aktionsknöpfe (Gameserver) grün/orange/rot/grau.
   - Karten: Schatten 0 10px 30px + halbtransparenter Grund, Dashboard-Flächen ohne Schatten; Kartenabstand 25,6 px,
     Abschnittsabstand 24 px; Modals Radius 22 px, Karten 16 px.
   - Tabellen: Zellen 16/24 px (hw.css !important) statt 12/16 px aus dieser Datei; Zeilen 57–75 px hoch.
   - Formulare: Felder 46 px / Radius 14, Knöpfe 42 px / Radius 10; Beschriftungen 16 px / 820; Hilfetexte 14 und 16 px.
   - Hinweise: Radius 18, Schatten, Verlaufsgrund; Untertitel #6c757d/.92rem aus storefront.css (4 Klassen) statt Token.
   Skala: Flächen 16 px (--nh-radius) · Bausteine in Flächen 12 px · Bedienelemente 10 px (--nh-radius-sm) · klein 8 px ·
   Pillen 999. Abstände: Abschnitte 24 px, Kartenkopf 14/18, Kartenkörper 18, Zellen 12/16, Kopfzeile 11/16.
   Booking setzt viele Werte mit !important (Karten-Rand/-Radius/-Grund, Primärknopf-Rand, Felder) – hier deshalb ebenso.
   ====================================================================== */

/* ---- Seitenkopf ---- */
main.nh-shell-page .nh-shell .hw-page-header .hw-page-title .hw-subtitle {
    max-width: 72ch;
    margin: 6px 0 0;
    color: var(--nh-muted);
    font-size: .95rem;
    line-height: 1.5;
}

.nh-shell-page .nh-shell .hw-back-btn { width: 42px; height: 42px; flex-basis: 42px; border-radius: var(--nh-radius-sm); color: var(--nh-text) !important; background: var(--nh-surface); box-shadow: none; }
.nh-shell-page .nh-shell .hw-back-btn:hover { color: var(--nh-primary) !important; background: var(--nh-surface); }

/* Kopf-Aktionen in EINER Größe (Hostware mischt btn und btn-sm im Kopf) */
.nh-shell-page .nh-shell .hw-page-actions .btn,
.nh-shell-page .nh-shell .hw-page-actions .btn.btn-sm {
    min-height: 42px;
    padding: 8px 16px;
    border-radius: var(--nh-radius-sm);
    font-size: 1rem;
}

/* ---- Knöpfe ---- */
.nh-shell-page .nh-shell .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 8px 16px;
    border-radius: var(--nh-radius-sm);
    font-weight: 600;
    line-height: 1.4;
    box-shadow: none !important;
    transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nh-shell-page .nh-shell .btn.btn-sm { min-height: 34px; padding: 5px 12px; border-radius: 8px; font-size: .84rem; }
.nh-shell-page .nh-shell .btn.btn-lg { min-height: 48px; }
.nh-shell-page .nh-shell .btn.btn-link { min-height: 0; padding: 0; border-radius: 4px; }
.nh-shell-page .nh-shell .btn.nh-link-btn,
.nh-shell-page .nh-shell .btn.nh-pd-rename { min-height: 0; }

/* Primär: Markenverlauf bleibt, aber ohne Schwebe-Schatten; volle Farbe nur für die Hauptaktion */
.nh-shell-page .nh-shell .btn-primary { border: 1px solid transparent !important; }

/* Farbige Aktionsknöpfe (Erfolg/Warnung/Gefahr/Sekundär, z. B. Gameserver starten/stoppen/neu installieren,
   Zeilenaktionen Bearbeiten/Entfernen) als ruhige Tönung – derselbe Ton wie die Status-Pillen.
   Ausnahme: der bestätigende Gefahr-Knopf im Modal-Fuß bleibt gefüllt (Löschen ist eine bewusste Entscheidung). */
.nh-shell-page .nh-shell-content .btn-success,
.nh-shell-page .nh-shell-content .btn-warning,
.nh-shell-page .nh-shell-content .btn-danger,
.nh-shell-page .nh-shell-content .btn-secondary,
.nh-shell-page .nh-shell-content .btn-info,
.nh-shell-page .nh-shell-content .btn-dark,
.nh-shell-page .nh-shell-content .btn-light {
    background-image: none !important;
    border: 1px solid transparent !important;
}

.nh-shell-page .nh-shell-content .btn-success { background-color: var(--nh-success-tint) !important; border-color: rgba(6, 115, 79, .22) !important; color: var(--nh-success-ink) !important; }
.nh-shell-page .nh-shell-content .btn-success:hover { background-color: rgba(6, 115, 79, .16) !important; }
.nh-shell-page .nh-shell-content .btn-warning { background-color: var(--nh-warning-tint) !important; border-color: rgba(138, 75, 0, .22) !important; color: var(--nh-warning-ink) !important; }
.nh-shell-page .nh-shell-content .btn-warning:hover { background-color: rgba(138, 75, 0, .16) !important; }
.nh-shell-page .nh-shell-content .btn-danger { background-color: var(--nh-danger-tint) !important; border-color: rgba(180, 35, 24, .22) !important; color: var(--nh-danger-ink) !important; }
.nh-shell-page .nh-shell-content .btn-danger:hover { background-color: rgba(180, 35, 24, .14) !important; }
.nh-shell-page .nh-shell-content .btn-secondary,
.nh-shell-page .nh-shell-content .btn-dark,
.nh-shell-page .nh-shell-content .btn-light { background-color: var(--nh-surface-2) !important; border-color: var(--nh-line) !important; color: var(--nh-text) !important; }
.nh-shell-page .nh-shell-content .btn-secondary:hover,
.nh-shell-page .nh-shell-content .btn-dark:hover,
.nh-shell-page .nh-shell-content .btn-light:hover { background-color: var(--nh-primary-tint-2) !important; color: var(--nh-ink) !important; }
.nh-shell-page .nh-shell-content .btn-info { background-color: var(--nh-primary-tint) !important; border-color: rgba(81, 67, 217, .22) !important; color: var(--nh-primary-ink) !important; }

/* Primärknöpfe in Tabellenzeilen: getönt statt gefüllt – eine Hauptaktion je Seite, nicht je Zeile */
.nh-shell-page .nh-shell-content .table td .btn-primary {
    background-image: none !important;
    background-color: var(--nh-primary-tint) !important;
    border-color: rgba(81, 67, 217, .22) !important;
    color: var(--nh-primary-ink) !important;
}
.nh-shell-page .nh-shell-content .table td .btn-primary:hover { background-color: rgba(81, 67, 217, .16) !important; }

/* Modal-Fuß: Abbrechen (Hostware: nackter .btn, grauer Text) als Rahmenknopf; Gefahr-Bestätigung gefüllt, flach */
.nh-shell-page .modal-footer .btn:not([class*="btn-"]) { border: 1px solid var(--nh-line); background: var(--nh-surface); color: var(--nh-text); }
.nh-shell-page .modal-footer .btn:not([class*="btn-"]):hover { border-color: rgba(81, 67, 217, .3); color: var(--nh-ink); }
.nh-shell-page .nh-shell-content .modal-footer .btn-danger,
.nh-shell-page .nh-shell-main .modal-footer .btn-danger { background-color: var(--nh-danger-ink) !important; border-color: var(--nh-danger-ink) !important; background-image: none !important; color: #fff !important; }
.nh-shell-page .nh-shell-main .modal-footer .btn-danger:hover { background-color: #9a1c12 !important; border-color: #9a1c12 !important; }

/* ---- Karten und Flächen ---- */
.nh-shell-page .nh-shell .card {
    background: var(--nh-surface) !important;
    border: 1px solid var(--nh-line) !important;
    border-radius: var(--nh-radius) !important;
    box-shadow: none;
}

.nh-shell-page .nh-shell .card:hover { border-color: var(--nh-line) !important; box-shadow: none; }

.nh-shell-page .nh-shell .card-header {
    padding: 14px 18px;
    background: var(--nh-surface) !important;
    border-bottom: 1px solid var(--nh-line) !important;
}

.nh-shell-page .nh-shell .card-header i { color: var(--nh-primary); }
.nh-shell-page .nh-shell .card-body { padding: 18px; }
.nh-shell-page .nh-shell .card-footer { padding: 14px 18px; background: var(--nh-surface-2); border-top: 1px solid var(--nh-line); }

/* Kennzahlen-Karten (hw-icon-card: API, Partnerprogramm): ohne Verlaufsstreifen und Riesen-Hintergrundsymbol,
   Zahl 1,5 rem / Beschriftung gedämpft – wie die Kennzahlen im Dashboard (.nh-glance) */
.nh-shell-page .nh-shell .hw-icon-card { min-height: 0; }
.nh-shell-page .nh-shell .hw-icon-card::before { display: none; }
.nh-shell-page .nh-shell .hw-icon-card .card-body { padding: 16px 18px; }
.nh-shell-page .nh-shell .hw-icon-card .card-body > i { display: none; }
.nh-shell-page .nh-shell .hw-icon-card h3,
.nh-shell-page .nh-shell .hw-icon-card h5 { margin: 0; color: var(--nh-ink); font-size: 1.5rem; font-weight: 700; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.nh-shell-page .nh-shell .hw-icon-card h6 { margin: 2px 0 0; color: var(--nh-muted); font-size: .85rem; font-weight: 600; }
@media (max-width: 767.98px) {
    .nh-shell-page .nh-shell-content .row > [class*="col-md-"] + [class*="col-md-"] > .hw-icon-card { margin-top: 12px; }
}

/* Ein Abschnittsabstand: 24 px (Booking: mb-4 = 25,6 px, Dashboard 24 px) */
.nh-shell-page .nh-shell-content .mb-4 { margin-bottom: 24px !important; }
.nh-shell-page .nh-shell-content .card.mb-3 { margin-bottom: 16px !important; }

/* Dashboard-Flächen: <section> bekam über die Landingpage-Regel oben 0 px oben/unten (Abstand kam zufällig vom h2-Rand) */
.nh-shell-page .nh-shell section.nh-panel { padding: 18px; }
.nh-shell-page .nh-shell-content h2.nh-dash-title { margin: 0; }

/* Radien: Bausteine in Flächen 12 px, Flächen 16 px */
.nh-shell-page .nh-todo,
.nh-shell-page .nh-todo-empty { border-radius: 12px; }
.nh-shell-page .nh-glance { border-radius: var(--nh-radius); }
.nh-shell-page .nh-shell-toggle { border-radius: 12px; }

/* ---- Modals (Booking: main.nh-account-page .modal-content !important, und der <style>-Block steht im Inhalt,
   also NACH panel.css – gewinnen nur über höhere Spezifität) ---- */
main.nh-shell-page .nh-shell .modal-content {
    border: 1px solid var(--nh-line) !important;
    border-radius: var(--nh-radius) !important;
    background: var(--nh-surface) !important;
    box-shadow: 0 24px 64px rgba(15, 23, 42, .18);
}

.nh-shell-page .modal-header { padding: 16px 20px; border-bottom: 1px solid var(--nh-line); }
.nh-shell-page .modal-title { color: var(--nh-ink); font-size: 1.05rem; font-weight: 700; line-height: 1.35; }
.nh-shell-page .modal-body { padding: 20px; }
.nh-shell-page .modal-footer { gap: 8px; padding: 14px 20px; border-top: 1px solid var(--nh-line); background: var(--nh-surface-2); border-radius: 0 0 var(--nh-radius) var(--nh-radius); }
.nh-shell-page .modal-footer > * { margin: 0; }

/* ---- Tabellen ---- */
/* hw.css: "table thead th, table tbody td { padding: 1rem 1.5rem !important }" – hier deshalb ebenfalls !important */
.nh-shell-page .nh-shell-content .table thead th { padding: 11px 16px !important; }
.nh-shell-page .nh-shell-content .table tbody td { padding: 12px 16px !important; border-color: var(--nh-line) !important; }
.nh-shell-page .nh-shell-content .table tbody tr:hover { background: var(--nh-primary-tint-2); }
.nh-shell-page .nh-shell-content .table strong { color: var(--nh-ink); font-weight: 650; }
/* Bestelldetails hängen an ihrer Zeile (panel-billing-support.css) – eigenes Zellenmaß behalten */
.nh-shell-page .nh-shell-content .nh-orders-table tr.nh-order-detail > td { padding: 4px 16px 18px !important; }

/* Leere Tabellen (Hostware: tr.table-empty / td[colspan].text-center): ein ruhiger Leerzustand in der Karte */
.nh-shell-page .nh-shell-content .table tr.table-empty td,
.nh-shell-page .nh-shell-content .table tbody td[colspan].text-center {
    padding: 28px 16px !important;
    color: var(--nh-muted);
    text-align: center;
}

/* Blättern */
.nh-shell-page .nh-shell-content .pagination { margin: 0; gap: 4px; }
.nh-shell-page .nh-shell-content .pagination .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: 6px 12px;
    border-color: var(--nh-line);
    border-radius: var(--nh-radius-sm);
    color: var(--nh-primary-ink);
    font-weight: 600;
}
.nh-shell-page .nh-shell-content .pagination .page-item.disabled .page-link { color: var(--nh-muted); background: var(--nh-surface-2); }

/* ---- Formulare ---- */
.nh-shell-page .nh-shell-content label,
.nh-shell-page .nh-shell-content .form-label,
.nh-shell-page .modal label,
.nh-shell-page .modal .form-label {
    margin-bottom: 6px;
    color: var(--nh-text);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
}

.nh-shell-page .nh-shell-content .form-check-label,
.nh-shell-page .modal .form-check-label { margin-bottom: 0; font-size: 1rem; font-weight: 500; }

.nh-shell-page .nh-shell .form-control,
.nh-shell-page .nh-shell .form-select,
.nh-shell-page .nh-shell .custom-select,
.nh-shell-page .nh-shell select,
.nh-shell-page .nh-shell textarea {
    min-height: 42px;
    padding: 8px 14px;
    border: 1px solid rgba(15, 23, 42, .16) !important;
    border-radius: var(--nh-radius-sm) !important;
    background-color: var(--nh-surface) !important;
    color: var(--nh-ink);
    font-size: 1rem;
    box-shadow: none !important;
}

.nh-shell-page .nh-shell .form-select { padding-right: 36px; }
.nh-shell-page .nh-shell textarea.form-control { min-height: 120px; }
.nh-shell-page .nh-shell .form-control-sm,
.nh-shell-page .nh-shell .form-select-sm { min-height: 34px; padding: 5px 12px; font-size: .9rem; }

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

.nh-shell-page .nh-shell .form-control.is-invalid,
.nh-shell-page .nh-shell .form-select.is-invalid { border-color: var(--nh-danger-ink) !important; }
.nh-shell-page .nh-shell .invalid-feedback { color: var(--nh-danger-ink); font-size: .85rem; }
.nh-shell-page .nh-shell .form-control::placeholder { color: #8a94a6; }

/* Eingabegruppen: Bookings !important-Radius ließ Feld (14 px) und Knopf (0/10 px) auseinanderlaufen (API-Schlüssel) */
.nh-shell-page .nh-shell .input-group > .form-control:not(:last-child),
.nh-shell-page .nh-shell .input-group > .form-select:not(:last-child) { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.nh-shell-page .nh-shell .input-group > .form-control:not(:first-child),
.nh-shell-page .nh-shell .input-group > .form-select:not(:first-child) { border-top-left-radius: 0 !important; border-bottom-left-radius: 0 !important; }
.nh-shell-page .nh-shell .input-group > .btn { min-height: 42px; }
.nh-shell-page .nh-shell .input-group-text { border-color: rgba(15, 23, 42, .16); background: var(--nh-surface-2); color: var(--nh-muted); font-size: .9rem; }

/* Hilfetexte: eine Größe, ein Ton (vorher 14 px und 16 px, #64748b) */
.nh-shell-page .nh-shell-content .form-text,
.nh-shell-page .nh-shell-content small,
.nh-shell-page .nh-shell-content .small,
.nh-shell-page .modal .form-text,
.nh-shell-page .modal small { font-size: .85rem; line-height: 1.45; }
main.nh-shell-page .nh-shell .text-muted,
main.nh-shell-page .nh-shell small { color: var(--nh-muted) !important; }
.nh-shell-page .nh-shell-content .form-text { margin-top: 6px; }
.nh-shell-page .nh-shell-content .form-group { margin-bottom: 16px; }
.nh-shell-page .nh-shell-content form > .form-group:last-child { margin-bottom: 0; }

/* Gruppenüberschriften in Formularen (Hostware .hw-text-devider: 20 px, 3rem oben, Inline-Abstände) – shell-weit */
.nh-shell-page .nh-shell-content .hw-text-devider {
    margin: 26px 0 12px !important;
    color: var(--nh-ink);
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
}
.nh-shell-page .nh-shell-content .hw-text-devider::after { margin-top: 11px; border: 0; border-top: 1px solid var(--nh-line); }

/* ---- Hinweise: ein Stil, vier Töne ---- */
.nh-shell-page .nh-shell .alert {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid transparent;
    border-radius: 12px;
    background-image: none;
    box-shadow: none;
    color: var(--nh-text);
    font-size: .95rem;
    line-height: 1.5;
}

.nh-shell-page .nh-shell .alert > i { flex: 0 0 auto; margin: 3px 0 0; font-size: 1.05rem; }
.nh-shell-page .nh-shell .alert a:not(.btn) { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.nh-shell-page .nh-shell .alert-primary,
.nh-shell-page .nh-shell .alert-info { background-color: var(--nh-primary-tint); border-color: rgba(81, 67, 217, .2); color: var(--nh-primary-ink); }
.nh-shell-page .nh-shell .alert-success { background-color: var(--nh-success-tint); border-color: rgba(6, 115, 79, .2); color: var(--nh-success-ink); }
.nh-shell-page .nh-shell .alert-warning { background-color: var(--nh-warning-tint); border-color: rgba(138, 75, 0, .2); color: var(--nh-warning-ink); }
.nh-shell-page .nh-shell .alert-danger { background-color: var(--nh-danger-tint); border-color: rgba(180, 35, 24, .2); color: var(--nh-danger-ink); }
.nh-shell-page .nh-shell .alert-secondary,
.nh-shell-page .nh-shell .alert-light { background-color: var(--nh-surface-2); border-color: var(--nh-line); color: var(--nh-text); }

/* ---- Status-Pillen ohne text-bg- (z. B. Modul-Badges "badge bg-success") ---- */
.nh-shell-page .nh-shell-content .badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border: 0;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 650;
    line-height: 1.4;
    letter-spacing: 0;
    text-transform: none;
}
.nh-shell-page .nh-shell-content .badge.bg-success { background-color: var(--nh-success-tint) !important; color: var(--nh-success-ink) !important; }
.nh-shell-page .nh-shell-content .badge.bg-warning { background-color: var(--nh-warning-tint) !important; color: var(--nh-warning-ink) !important; }
.nh-shell-page .nh-shell-content .badge.bg-danger { background-color: var(--nh-danger-tint) !important; color: var(--nh-danger-ink) !important; }
.nh-shell-page .nh-shell-content .badge.bg-primary,
.nh-shell-page .nh-shell-content .badge.bg-info { background-color: var(--nh-primary-tint) !important; color: var(--nh-primary-ink) !important; }
.nh-shell-page .nh-shell-content .badge.bg-secondary,
.nh-shell-page .nh-shell-content .badge.bg-dark,
.nh-shell-page .nh-shell-content .badge.bg-light { background-color: var(--nh-surface-2) !important; color: var(--nh-muted) !important; }

/* ---- Reiter in Hostware-Inhalten (nav-tabs/nav-pills, Produktseiten-Liste) wie die Bereichs-Reiter (.nh-subnav) ---- */
.nh-shell-page .nh-shell-content .nav-tabs,
.nh-shell-page .nh-shell-content .nav-pills,
.nh-shell-page .nh-shell-content .hw-product-page-list .navbar-offcanvas-menu { gap: 6px; border-bottom: 0; }

.nh-shell-page .nh-shell-content .nav-tabs .nav-link,
.nh-shell-page .nh-shell-content .nav-pills .nav-link,
.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 7px 14px !important;
    border: 1px solid var(--nh-line) !important;
    border-radius: 999px !important;
    background: var(--nh-surface) !important;
    color: var(--nh-text) !important;
    font-size: .9rem;
    font-weight: 500;
    white-space: nowrap;
}
.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link > i { margin-right: 0 !important; color: #6b7a90; }
.nh-shell-page .nh-shell-content .nav-tabs .nav-link:hover,
.nh-shell-page .nh-shell-content .nav-pills .nav-link:hover,
.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link:hover { border-color: rgba(81, 67, 217, .28) !important; color: var(--nh-ink) !important; }
.nh-shell-page .nh-shell-content .nav-tabs .nav-link.active,
.nh-shell-page .nh-shell-content .nav-pills .nav-link.active,
.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link.active {
    border-color: transparent !important;
    background: var(--nh-primary-tint) !important;
    color: var(--nh-primary-ink) !important;
    font-weight: 650;
}
.nh-shell-page .nh-shell-content .hw-product-page-list a.nav-link.active > i { color: var(--nh-primary); }

/* ---- Listen-Navigation in Hostware-Inhalten (Domain-Seitenliste, Abteilungswahl im Ticket): wie die Seitenleiste ---- */
.nh-shell-page .nh-shell-content .list-group { border-radius: var(--nh-radius-sm); }
.nh-shell-page .nh-shell-content .list-group-item-action {
    min-height: 44px;
    padding: 10px 14px;
    border-color: var(--nh-line);
    color: var(--nh-text);
    font-weight: 500;
}
.nh-shell-page .nh-shell-content .list-group-item-action:hover { background: var(--nh-primary-tint-2); color: var(--nh-ink); }
.nh-shell-page .nh-shell-content .list-group-item-action.active {
    background: var(--nh-primary-tint) !important;
    border-color: var(--nh-line) !important;
    color: var(--nh-primary-ink) !important;
    font-weight: 650;
}
.nh-shell-page .nh-shell-content .list-group-item-action.active i { color: var(--nh-primary); }
.nh-shell-page .nh-shell-content .list-group-item-action i { color: #6b7a90; }

/* ---- Ladezustand (Hostware lädt Bereiche per AJAX, z. B. Ticket-Formular): gedämpft statt unverändert ---- */
.nh-shell-page .nh-shell-content .hw-ajax-area.is-loading { opacity: .55; pointer-events: none; }

@media (max-width: 991.98px) {
    .nh-shell-page .nh-shell .hw-back-btn { width: 44px; height: 44px; flex-basis: 44px; }
    .nh-shell-page .nh-shell .form-control,
    .nh-shell-page .nh-shell .form-select,
    main.nh-shell-page .nh-shell .hw-page-actions .form-select { min-height: 44px; }
    .nh-shell-page .nh-shell .input-group > .btn { min-height: 44px; }
}

@media (max-width: 575.98px) {
    /* Kopf-Aktion auch einzeln über die volle Breite (zwei Knöpfe waren es schon – panel-ux.css);
       Hostware wickelt Kopfknöpfe oft in <div> bzw. <div class="d-flex"> (API, Kontozugriff, Partnerprogramm) */
    .nh-shell-page .nh-shell .hw-page-actions > .btn { flex: 1 1 auto; justify-content: center; }
    .nh-shell-page .nh-shell .hw-page-actions > div { flex: 1 1 100%; }
    .nh-shell-page .nh-shell .hw-page-actions > div > .btn { width: 100%; justify-content: center; }
    .nh-shell-page .nh-shell .hw-page-actions > .d-flex { gap: 8px; }
    .nh-shell-page .nh-shell .hw-page-actions > .d-flex > .btn { flex: 1 1 100%; width: 100%; }

    /* API-Schlüssel: Feld und Knopf stehen mobil untereinander (panel-account.css) – dann alle Ecken rund */
    .nh-shell-page .nh-shell [data-nhpanel-route="storefront.account.api"] .input-group > .form-control:not(:last-child) { border-radius: var(--nh-radius-sm) !important; }

    /* Ticket-Ablauf (Hostware .hw-stepper, storefront.css: Schritte nowrap) lief 450 px breit aus dem 375-px-Bild –
       nur der aktive Schritt trägt seinen Text, Verbinder schrumpfen */
    .nh-shell-page .nh-shell-content .hw-stepper-bar { display: flex; align-items: center; gap: 6px; width: 100%; max-width: 100%; overflow: hidden; }
    .nh-shell-page .nh-shell-content .hw-stepper-step { flex: 0 1 auto; min-width: 0; }
    .nh-shell-page .nh-shell-content .hw-stepper-step:not(.hw-stepper-step--active) .hw-stepper-step-label { display: none; }
    .nh-shell-page .nh-shell-content .hw-stepper-step-label { white-space: normal; overflow-wrap: anywhere; }
    .nh-shell-page .nh-shell-content .hw-stepper-connector { flex: 1 1 12px; min-width: 12px; }
}

/* Dienste-Liste: Status und Knopf "Panel" (Gameserver) nebeneinander, rechtsbündig */
.nh-shell-page .nh-list-side { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.nh-shell-page .nh-list-action { margin: 0; }