/* ==========================================================================
   NET42 Kundenportal – Erscheinungsbild
   Wird nach huraga.css geladen (layout_default + layout_public).
   Aufbau: 1 Farben/Variablen · 2 Seite & Kopfbereich · 3 Menü · 4 Karten
           5 Buttons · 6 Formulare · 7 Tabellen · 8 Reiter/Badges/Hinweise
           9 Fußbereich · 10 Anmeldeseiten
   Das Markengrün (#1BA51D) gehört dem Logo. Für Schrift und Buttons gilt
   das dunklere Grün (#147A17, Kontrast 5,5:1 auf Weiß), damit alles lesbar ist.
   ========================================================================== */

/* 1 · Farben und Variablen ------------------------------------------------ */
:root {
    --n42-brand: #1BA51D;
    --n42-accent: #147A17;
    --n42-accent-hover: #0F6A14;
    --n42-accent-active: #0B5A10;
    --n42-accent-soft: #E7F3E8;
    --n42-page: #F4F6F5;
    --n42-surface: #FFFFFF;
    --n42-border: #E1E6E3;
    --n42-muted: #5B6560;
    --n42-radius: 12px;
    --n42-radius-sm: 8px;
    --n42-shadow: 0 1px 2px rgba(16, 24, 20, .05), 0 1px 3px rgba(16, 24, 20, .04);

    --bs-primary: #147A17;
    --bs-primary-rgb: 20, 122, 23;
    --bs-link-color: #147A17;
    --bs-link-color-rgb: 20, 122, 23;
    --bs-link-hover-color: #0F6A14;
    --bs-link-hover-color-rgb: 15, 106, 20;
    --bs-border-color: var(--n42-border);
    --bs-border-radius: var(--n42-radius-sm);
    --bs-secondary-color: var(--n42-muted);
}

[data-bs-theme="dark"] {
    --n42-accent: #4EC351;
    --n42-accent-hover: #6FD172;
    --n42-accent-active: #8BDD8D;
    --n42-accent-soft: rgba(78, 195, 81, .14);
    --n42-page: #121517;
    --n42-surface: #1B1F23;
    --n42-border: #2A3036;
    --n42-muted: #A3ACA7;
    --n42-shadow: 0 1px 2px rgba(0, 0, 0, .35);

    --bs-primary: #4EC351;
    --bs-primary-rgb: 78, 195, 81;
    --bs-link-color: #4EC351;
    --bs-link-color-rgb: 78, 195, 81;
    --bs-link-hover-color: #6FD172;
    --bs-link-hover-color-rgb: 111, 209, 114;
    --bs-body-bg: #1B1F23;
    --bs-tertiary-bg: #22272C;
    --bs-secondary-color: var(--n42-muted);
}

/* 2 · Seite und Kopfbereich ------------------------------------------------ */
body {
    background: var(--n42-page);
}

a {
    text-underline-offset: .2em;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.list-group-item):not(.page-link) {
    text-decoration: none;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand):not(.list-group-item):not(.page-link):hover {
    text-decoration: underline;
}

.navbar {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    background: transparent;
    border-bottom: 1px solid var(--n42-border) !important;
}

.navbar .form-select,
.navbar .ts-control {
    background-color: var(--n42-surface);
}

.breadcrumb {
    --bs-breadcrumb-divider-color: var(--n42-muted);
    font-size: .875rem;
    margin-bottom: 1rem;
}

.breadcrumb-item.active {
    color: var(--n42-muted);
}

.client-dropdown .dropdown-menu {
    border-radius: var(--n42-radius-sm);
    border-color: var(--n42-border);
    box-shadow: 0 8px 24px rgba(16, 24, 20, .12);
}

/* 3 · Menü (Seitenleiste) ------------------------------------------------- */
#sidebarMenu .nav {
    gap: .125rem;
}

#sidebarMenu .offcanvas-item {
    border: 0 !important;
    border-radius: var(--n42-radius-sm);
    background: transparent;
    position: relative;
}

#sidebarMenu .offcanvas-item:hover {
    background: rgba(var(--bs-primary-rgb), .07);
}

#sidebarMenu .offcanvas-item.active {
    background: var(--n42-accent-soft);
}

#sidebarMenu .offcanvas-item.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: .5rem;
    bottom: .5rem;
    width: 3px;
    border-radius: 3px;
    background: var(--n42-brand);
}

#sidebarMenu .offcanvas-item > a {
    color: var(--bs-body-color);
    padding: .55rem .85rem;
    font-size: .95rem;
}

#sidebarMenu .offcanvas-item > a .icon {
    color: var(--n42-muted);
    flex: 0 0 auto;
}

#sidebarMenu .offcanvas-item.active > a,
#sidebarMenu .offcanvas-item > a:hover {
    color: var(--n42-accent) !important;
}

#sidebarMenu .offcanvas-item.active > a .icon,
#sidebarMenu .offcanvas-item > a:hover .icon {
    color: var(--n42-accent);
}

.n42-menu-label {
    list-style: none;
    padding: 1.1rem .85rem .35rem;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--n42-muted);
}

.n42-menu-meta {
    margin-left: auto;
    font-size: .8rem;
    font-weight: 600;
    color: var(--n42-muted);
    white-space: nowrap;
}

/* 4 · Karten ---------------------------------------------------------------- */
.card {
    --bs-card-border-color: var(--n42-border);
    --bs-card-border-radius: var(--n42-radius);
    --bs-card-inner-border-radius: calc(var(--n42-radius) - 1px);
    --bs-card-bg: var(--n42-surface);
    box-shadow: var(--n42-shadow);
}

.card-header {
    background: transparent;
    border-bottom: 1px solid var(--n42-border);
    padding: 1rem 1.25rem;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5 {
    font-weight: 600;
    margin-bottom: 0;
}

.card-header h1 {
    font-size: 1.25rem;
}

.card-body {
    padding: 1.25rem;
}

.card-footer {
    background: transparent;
    border-top: 1px solid var(--n42-border);
}

.list-group {
    --bs-list-group-border-color: var(--n42-border);
}

/* 5 · Buttons ---------------------------------------------------------------- */
.btn {
    --bs-btn-border-radius: var(--n42-radius-sm);
    font-weight: 500;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: #147A17;
    --bs-btn-border-color: #147A17;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0F6A14;
    --bs-btn-hover-border-color: #0F6A14;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0B5A10;
    --bs-btn-active-border-color: #0B5A10;
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #147A17;
    --bs-btn-disabled-border-color: #147A17;
    --bs-btn-focus-shadow-rgb: 20, 122, 23;
}

.btn-outline-primary {
    --bs-btn-color: var(--n42-accent);
    --bs-btn-border-color: var(--n42-accent);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #147A17;
    --bs-btn-hover-border-color: #147A17;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0F6A14;
    --bs-btn-active-border-color: #0F6A14;
    --bs-btn-disabled-color: var(--n42-accent);
    --bs-btn-disabled-border-color: var(--n42-accent);
    --bs-btn-focus-shadow-rgb: 20, 122, 23;
}

.btn-success {
    --bs-btn-bg: #147A17;
    --bs-btn-border-color: #147A17;
    --bs-btn-hover-bg: #0F6A14;
    --bs-btn-hover-border-color: #0F6A14;
    --bs-btn-active-bg: #0B5A10;
    --bs-btn-active-border-color: #0B5A10;
}

.btn-dark {
    --bs-btn-bg: #2A3036;
    --bs-btn-border-color: #2A3036;
    --bs-btn-hover-bg: #1B1F23;
    --bs-btn-hover-border-color: #1B1F23;
}

[data-bs-theme="dark"] .btn-dark {
    --bs-btn-bg: #3A424A;
    --bs-btn-border-color: #3A424A;
    --bs-btn-hover-bg: #4A545D;
    --bs-btn-hover-border-color: #4A545D;
}

/* 6 · Formulare --------------------------------------------------------------- */
.form-control,
.form-select {
    border-radius: var(--n42-radius-sm);
    border-color: #CBD3CF;
    background-color: var(--n42-surface);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    border-color: #3A424A;
    background-color: #14181B;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--n42-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.form-check-input:checked {
    background-color: #147A17;
    border-color: #147A17;
}

.form-check-input:focus {
    border-color: var(--n42-accent);
    box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .2);
}

.form-label {
    font-weight: 500;
    margin-bottom: .35rem;
}

.form-text {
    color: var(--n42-muted);
}

/* 7 · Tabellen ---------------------------------------------------------------- */
.table {
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--n42-border);
}

.table > :not(caption) > * > * {
    padding: .8rem .75rem;
}

.card-body table > thead > tr > th {
    border-bottom-width: 1px;
    letter-spacing: .04em;
}

.table-hover > tbody > tr:hover > * {
    --bs-table-bg-state: rgba(var(--bs-primary-rgb), .05);
}

/* 8 · Reiter, Badges, Hinweise ------------------------------------------------ */
.nav-tabs {
    --bs-nav-tabs-border-color: var(--n42-border);
    --bs-nav-tabs-border-radius: var(--n42-radius-sm);
    --bs-nav-tabs-link-active-border-color: var(--n42-border) var(--n42-border) var(--n42-surface);
    --bs-nav-tabs-link-active-bg: var(--n42-surface);
}

.nav-tabs .nav-link {
    padding: .65rem 1rem;
}

.badge {
    font-weight: 600;
    letter-spacing: .01em;
}

.alert {
    border-radius: var(--n42-radius-sm);
}

/* Das Theme zwingt Hinweise in eine zentrierte Spalte. Wo Inhalt und Link
   nebeneinander stehen sollen (d-flex), gilt wieder eine Zeile. */
.alert.d-flex {
    flex-direction: row !important;
}

.alert-info .alert-link {
    color: var(--n42-accent);
}

.list-group-item-action {
    color: var(--bs-body-color);
}

/* Warnhinweise: Im Huraga-Theme steht oranger Text auf orangem Grund
   und ist kaum lesbar. */
.alert-warning {
    color: #664d03 !important;
}

[data-bs-theme="dark"] .alert-warning {
    color: #ffda6a !important;
}

.modal-content {
    border-radius: var(--n42-radius);
    border-color: var(--n42-border);
}

/* 9 · Fußbereich -------------------------------------------------------------- */
#footer {
    border-top: 1px solid var(--n42-border);
    padding-top: 1.25rem;
    margin-top: 2rem !important;
}

#footer a {
    color: var(--n42-muted);
}

#footer a:hover {
    color: var(--n42-accent);
}

/* 10 · Anmelde- und Registrierungsseiten ---------------------------------------- */
.page-login .card,
.page-signup .card,
.page-password-reset .card {
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(16, 24, 20, .08);
}

.page-login .card-body,
.page-signup .card-body,
.page-password-reset .card-body {
    padding: 1.75rem;
}

.page-login .card h5,
.page-signup .card h5,
.page-password-reset .card h5 {
    font-size: 1.25rem;
    font-weight: 600;
    margin: .25rem 0 1.5rem !important;
}

/* Die Standardbreite der Anmeldekarte lässt deutsche Beschriftungen umbrechen. */
.page-login .row > [class*="col-"],
.page-password-reset .row > [class*="col-"],
.page-signup .row > [class*="col-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 440px;
}

.page-signup .row > [class*="col-"] {
    max-width: 560px;
}

.n42-auth-forgot {
    text-align: right;
    margin: -.5rem 0 1rem;
    font-size: .875rem;
}

.n42-auth-alt {
    text-align: center;
    margin: 0;
    color: var(--n42-muted);
}

.n42-public-footer {
    text-align: center;
    margin: 1.5rem 0 2rem;
    color: var(--n42-muted);
}

.n42-public-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .25rem .75rem;
    margin-top: .25rem;
}

.n42-public-links a {
    color: var(--n42-muted);
}

.n42-public-links a:hover {
    color: var(--n42-accent);
}


@media (min-width: 576px) {
    .n42-public-footer {
        margin-inline: -6rem;
    }
}

/* 11 · Dashboard ---------------------------------------------------------------- */
:root {
    --n42-warn: #8A5300;
    --n42-warn-soft: #FFF4D6;
    --n42-warn-border: #F0D590;
}

[data-bs-theme="dark"] {
    --n42-warn: #F2C14E;
    --n42-warn-soft: rgba(242, 193, 78, .12);
    --n42-warn-border: rgba(242, 193, 78, .35);
}

.n42-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.n42-hero h1 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: .15rem;
}

.n42-hero p {
    color: var(--n42-muted);
}

.n42-stat {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    height: 100%;
    padding: 1rem 1.25rem;
    background: var(--n42-surface);
    border: 1px solid var(--n42-border);
    border-radius: var(--n42-radius);
    box-shadow: var(--n42-shadow);
    color: var(--bs-body-color);
    text-decoration: none !important;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.n42-stat:hover {
    border-color: var(--n42-accent);
    color: var(--bs-body-color);
}

.n42-stat-label {
    font-size: .8rem;
    font-weight: 500;
    color: var(--n42-muted);
}

.n42-stat-value {
    font-size: clamp(1.25rem, 4.6vw, 1.6rem);
    font-weight: 600;
    line-height: 1.2;
}

.n42-stat-warn {
    background: var(--n42-warn-soft);
    border-color: var(--n42-warn-border);
}

.n42-stat-warn .n42-stat-value,
.n42-stat-warn .n42-stat-label {
    color: var(--n42-warn);
}

.n42-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .5rem 1rem;
}

.n42-row-main {
    min-width: 0;
    overflow-wrap: anywhere;
}

.n42-row-side {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.n42-grid-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.n42-grid-main {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 1rem;
    align-items: start;
}

@media (min-width: 992px) {
    .n42-grid-stats {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

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

/* 11 · Bestellstrecke: Markenfarbe statt Standard-Blau ------------------------ */
:root {
    --bs-primary-bg-subtle: #E7F3E8;
    --bs-primary-border-subtle: #B9DDBB;
    --bs-primary-text-emphasis: #0F5A13;
}

[data-bs-theme="dark"] {
    --bs-primary-bg-subtle: rgba(78, 195, 81, .16);
    --bs-primary-border-subtle: #2E6B30;
    --bs-primary-text-emphasis: #8BDD8D;
}

.nav-pills {
    --bs-nav-pills-link-active-bg: var(--bs-primary);
    --bs-nav-pills-link-active-color: #fff;
}

[data-bs-theme="dark"] .nav-pills {
    --bs-nav-pills-link-active-color: #10150f;
}

.accordion {
    --bs-accordion-btn-focus-border-color: var(--bs-primary);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25);
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%230F5A13'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

[data-bs-theme="dark"] .accordion {
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238BDD8D'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

/* 12 · Bestellstrecke -------------------------------------------------------- */
.n42-order-head { margin-bottom: 1.25rem; }
.n42-order-head h1 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .25rem; }
.n42-order-lead { color: var(--n42-muted); margin: 0; max-width: 46rem; }

.n42-order .accordion { --bs-accordion-border-width: 0; --bs-accordion-bg: transparent; border: 0; }
.n42-order .accordion-item { border: 0; background: transparent; }
.n42-order .accordion-header { display: none; }
.n42-order .accordion-body { padding: 0; }
.n42-order .card-body { padding: 0 !important; }

.n42-steps { list-style: none; display: flex; gap: .5rem; padding: 0; margin: 0 0 1.5rem; flex-wrap: wrap; }
.n42-step { display: flex; align-items: center; gap: .5rem; color: var(--n42-muted); font-size: .9rem; padding: .35rem .75rem .35rem .35rem; border-radius: 999px; background: var(--n42-surface); border: 1px solid var(--n42-border); }
.n42-step-no { display: inline-flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--n42-page); font-weight: 600; font-size: .8rem; border: 1px solid var(--n42-border); }
.n42-step.is-done .n42-step-no { background: var(--n42-accent-soft); color: var(--n42-accent); border-color: transparent; }
.n42-step.is-current { color: var(--n42-accent); border-color: var(--n42-accent); font-weight: 600; }
.n42-step.is-current .n42-step-no { background: var(--n42-accent); color: #fff; border-color: var(--n42-accent); }
[data-bs-theme="dark"] .n42-step.is-current .n42-step-no { color: #10150f; }

.n42-section-title { font-size: 1.0625rem; font-weight: 600; margin: 0 0 1rem; }
.n42-cat-title { font-size: .8125rem; font-weight: 600; color: var(--n42-muted); text-transform: uppercase; letter-spacing: .04em; margin: 1.25rem 0 .5rem; }
.n42-cat-desc { color: var(--n42-muted); margin-bottom: .75rem; }

.n42-products { display: grid; grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1rem; }
.n42-product { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius); box-shadow: var(--n42-shadow); color: inherit; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.n42-product:hover { border-color: var(--n42-accent); box-shadow: 0 4px 14px rgba(16, 24, 20, .10); transform: translateY(-1px); color: inherit; }
.n42-product-title { font-size: 1.0625rem; font-weight: 600; }
.n42-product-text { color: var(--n42-muted); font-size: .875rem; }
.n42-product-price { margin-top: .25rem; }
.n42-product-price strong { font-size: 1.0625rem; }
.n42-product-cta { margin-top: auto; padding-top: .5rem; color: var(--n42-accent); font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; }

.n42-order-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: start; }
@media (min-width: 992px) { .n42-order-grid { grid-template-columns: minmax(0, 1fr) 22rem; } }
.n42-order-main { background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius); padding: 1.5rem; box-shadow: var(--n42-shadow); min-width: 0; }

.n42-product-name { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
.n42-product-desc, .n42-product-desc p { font-size: .9375rem; font-weight: 400; color: var(--bs-body-color); }
.n42-product-desc p:last-child { margin-bottom: 0; }
.n42-order-main h4, .n42-block-title { font-size: 1rem; font-weight: 600; margin: 1.75rem 0 .75rem; padding-top: 1.25rem; border-top: 1px solid var(--n42-border); }
.n42-order-main h4 strong { font-weight: 600; }
.n42-order-main hr { display: none; }

.n42-periods { display: flex; flex-direction: column; gap: .5rem; }
.n42-period { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .75rem; row-gap: .15rem; padding: .6rem .9rem; border: 1px solid var(--n42-border); border-radius: var(--n42-radius-sm); cursor: pointer; background: var(--n42-surface); transition: border-color .15s, background .15s; }
.n42-period:hover { border-color: var(--n42-accent); }
.n42-period.is-selected { border-color: var(--n42-accent); background: var(--n42-accent-soft); box-shadow: 0 0 0 1px var(--n42-accent) inset; }
.n42-period-input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.n42-period-title { font-weight: 600; font-size: .9375rem; }
.n42-period-price { font-size: .9375rem; text-align: right; }
.n42-period-price strong { font-size: .9375rem; font-weight: 600; }
.n42-period-total { color: var(--n42-muted); font-size: .8125rem; }
.n42-period-badge { grid-column: 2; grid-row: 2; justify-self: end; font-size: .75rem; font-weight: 600; color: var(--n42-accent); background: var(--n42-accent-soft); border: 1px solid var(--n42-accent); border-radius: 999px; padding: 0 .5rem; white-space: nowrap; }
.n42-period.is-selected .n42-period-badge { background: var(--n42-surface); }
.n42-period:focus-within { outline: 2px solid var(--n42-accent); outline-offset: 2px; }
.n42-fixed-price { font-size: 1.15rem; font-weight: 600; }
.n42-fixed-price span { font-size: .9rem; font-weight: 400; color: var(--n42-muted); }

.n42-summary { background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius); padding: 1.25rem; box-shadow: var(--n42-shadow); }
@media (min-width: 992px) { .n42-summary { position: sticky; top: 1rem; } }
.n42-summary-title { font-size: 1.0625rem; font-weight: 600; margin: 0 0 1rem; }
.n42-sum-row { display: flex; justify-content: space-between; gap: 1rem; padding: .35rem 0; }
.n42-sum-sub { color: var(--n42-muted); font-size: .9rem; padding-bottom: .35rem; }
.n42-sum-grand { border-top: 1px solid var(--n42-border); margin-top: .5rem; padding-top: .75rem; font-size: 1.0625rem; }
.n42-sum-note { color: var(--n42-muted); font-size: .82rem; margin: .75rem 0; }
.n42-summary-btn { width: 100%; padding: .7rem 1rem; font-weight: 600; margin-top: .5rem; }
.n42-summary-back { display: block; text-align: center; margin-top: .85rem; font-size: .9rem; }

.n42-cart-items { list-style: none; padding: 0; margin: 0; }
.n42-cart-item { display: flex; align-items: flex-start; gap: 1rem; padding: .9rem 0; border-bottom: 1px solid var(--n42-border); }
.n42-cart-item:first-child { padding-top: 0; }
.n42-cart-info { flex: 1; display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.n42-cart-meta { color: var(--n42-muted); font-size: .88rem; }
.n42-cart-price { text-align: right; display: flex; flex-direction: column; }
.n42-cart-net { color: var(--n42-muted); font-size: .78rem; }
.n42-cart-remove { color: var(--n42-muted); padding: .25rem; border-radius: 6px; cursor: pointer; line-height: 1; }
.n42-cart-remove:hover { color: #B42318; background: rgba(180, 35, 24, .08); }
.n42-promo { margin-top: 1rem; }
.n42-promo-row { display: flex; gap: .5rem; max-width: 22rem; margin-top: .5rem; }
.n42-pay-title { font-weight: 600; margin: 1rem 0 .5rem; }
.n42-gateways { display: flex; flex-wrap: wrap; gap: .5rem; }
.n42-tos { margin: 1rem 0 .25rem; font-size: .88rem; }
.n42-order.card { background: transparent; box-shadow: none; border: 0; }
.n42-order #register .accordion-body { background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius); padding: 1.5rem; box-shadow: var(--n42-shadow); max-width: 40rem; }
.n42-order #register .accordion-body::before { content: "Anmelden oder Konto erstellen"; display: block; font-size: 1.25rem; font-weight: 600; margin-bottom: 1rem; }

/* 13 · Dienst-Seiten ---------------------------------------------------------- */
.n42-date { font-variant-numeric: tabular-nums; }
.n42-date.is-warn { color: #8A5A00; font-weight: 600; }
[data-bs-theme="dark"] .n42-date.is-warn { color: #F5C451; }
.n42-ref { color: var(--n42-muted); font-size: .78rem; margin-left: .25rem; }
.n42-note { padding: .75rem 1rem; }
.badge.n42-badge-soft { background: var(--n42-accent-soft) !important; color: var(--n42-accent) !important; font-weight: 600; }



/* 14 · Typografie-Skala, einheitliche Farben und Tabellenlinien ------------------
   Eine Skala fuer das ganze Portal: Seitentitel 1.25rem, Abschnittstitel 1.0625rem,
   Fliesstext .9375rem, Beschriftungen .8125rem. Gewichte nur 400, 500, 600. */
:root {
    --n42-fs-page: 1.25rem;
    --n42-fs-section: 1.0625rem;
    --n42-fs-small: .8125rem;
    --n42-border-soft: #EBEFED;
}

[data-bs-theme="dark"] {
    --n42-border-soft: rgba(255, 255, 255, .07);
}

body {
    font-size: .9375rem;
}

h1, .h1, h1.h4 {
    font-size: var(--n42-fs-page);
    font-weight: 600;
}

h2, h3, h4, h5, h6,
.h2, .h3, .h4, .h5, .h6 {
    font-size: var(--n42-fs-section);
    font-weight: 600;
}

.small, small {
    font-size: var(--n42-fs-small);
}

.text-muted,
.card-header .small,
.card-header .text-muted {
    color: var(--n42-muted) !important;
}

strong, b, th {
    color: inherit;
}

.btn {
    font-size: .875rem;
}

.btn-sm {
    font-size: var(--n42-fs-small);
}

.btn-outline-secondary {
    --bs-btn-color: var(--n42-muted);
    --bs-btn-border-color: #B9C1BC;
    --bs-btn-hover-bg: var(--n42-muted);
    --bs-btn-hover-border-color: var(--n42-muted);
    --bs-btn-hover-color: #fff;
}

.badge.bg-success {
    background-color: var(--n42-accent) !important;
}

/* Rechnungsueberschrift: kein duenner Titel mehr */
h4.fw-light {
    font-size: var(--n42-fs-section);
    font-weight: 600 !important;
}

.badge {
    font-size: .75rem;
}

/* Tabellen: Text in Textfarbe (nicht reines Schwarz), feine senkrechte Linien */
.table {
    --bs-table-color: var(--bs-body-color);
    color: var(--bs-body-color);
}

.table:not(.table-borderless) > :not(caption) > * > * + * {
    border-left: 1px solid var(--n42-border-soft);
}


/* 15 · Bestellstrecke: kompakter ------------------------------------------------ */
.n42-steps { gap: .35rem; margin-bottom: 1.25rem; }
.n42-step { font-size: .8125rem; padding: .25rem .65rem .25rem .25rem; }
.n42-step-no { width: 1.4rem; height: 1.4rem; font-size: .75rem; }
.n42-product { padding: 1rem 1.1rem; gap: .35rem; }
.n42-product-text { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.n42-product-price { margin-top: .1rem; font-size: .875rem; }
.n42-product-price strong { font-size: .9375rem; }
.n42-product-cta { padding-top: .25rem; font-size: .875rem; }
.n42-product-name { font-size: 1.125rem; }
.n42-product-desc ul { margin-bottom: 0; padding-left: 1.1rem; }
.n42-period-title { font-size: .875rem; }
.n42-summary-title { font-size: 1rem; }

/* 16 · Lesbare Beschriftungen: Bootstrap-Grau war zu hell --------------------------- */
.text-secondary { color: var(--n42-muted) !important; }

/* 17 · Startseite fuer Besucher ohne Anmeldung ----------------------------------- */
.n42-welcome { max-width: 32rem; margin: 3rem auto 2rem; text-align: center; }
.n42-welcome-card { background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius); box-shadow: var(--n42-shadow); padding: 2rem 1.75rem; }
.n42-welcome h1 { font-size: 1.5rem; font-weight: 600; margin: 0 0 .5rem; }
.n42-welcome-lead { color: var(--n42-muted); margin: 0 0 1.5rem; }
.n42-welcome-actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.n42-welcome-note { color: var(--n42-muted); font-size: .8125rem; margin: 1.25rem 0 0; }
.n42-welcome-help { margin: 1.25rem 0 0; color: var(--n42-muted); font-size: .875rem; }
.n42-welcome-services { margin-top: 1rem; text-align: left; background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius-sm); }
.n42-welcome-services summary { cursor: pointer; padding: .7rem .9rem; font-weight: 600; font-size: .9375rem; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.n42-welcome-services summary::-webkit-details-marker { display: none; }
.n42-welcome-services summary::after { content: ""; width: .5rem; height: .5rem; border-right: 2px solid var(--n42-muted); border-bottom: 2px solid var(--n42-muted); transform: rotate(45deg); margin-right: .25rem; transition: transform .15s; }
.n42-welcome-services[open] summary::after { transform: rotate(-135deg); }
.n42-welcome-services ul { list-style: none; margin: 0; padding: 0 .9rem .7rem; }
.n42-welcome-services li { padding: .35rem 0; border-top: 1px solid var(--n42-border-soft); font-size: .9375rem; }

/* 18 · Logo mit Wolke: Groessen -------------------------------------------------- */
.navbar-brand img { height: 88px; width: auto; }
#footer img { height: 3.6em !important; width: auto; }
.page-login a > img,
.page-signup a > img,
.page-password-reset a > img { height: 120px; width: auto; }

/* 19 · Handy: breite Tabellen und Kopfzeilen -------------------------------------- */
@media (max-width: 767.98px) {
    .table :is(th, td) { padding-left: .4rem; padding-right: .4rem; }
    .table .badge { white-space: normal; text-align: left; }

    /* Kopfzeilen mit Titel und Buttons duerfen umbrechen statt sich zu ueberlappen */
    .card-header.d-flex,
    .card-header > .d-flex { flex-wrap: wrap; gap: .5rem; }

    /* Dienste-Liste: Adresse, Monatspreis und naechste Abrechnung stehen im Dienst-Detail */
    table.table:not(:has(> tfoot)):has(> thead > tr > th:nth-child(6)) :is(th, td):nth-child(2),
    table.table:not(:has(> tfoot)):has(> thead > tr > th:nth-child(6)) :is(th, td):nth-child(4),
    table.table:not(:has(> tfoot)):has(> thead > tr > th:nth-child(6)) :is(th, td):nth-child(5) {
        display: none;
    }

    /* Benutzerliste: Rollen ausblenden, Rest passt dann auf den Schirm (Aktionen-Menue bleibt unbeschnitten) */
    table.table:has(> tbody > tr.user-row) :is(th, td):nth-child(3) { display: none; }
    table.table:has(> tbody > tr.user-row) :is(th, td):nth-child(2) { overflow-wrap: anywhere; }
    table.table:has(> tbody > tr.user-row) th:first-child { width: 2rem !important; }

    /* Gesamtuebersicht (Tabelle mit Summenzeile): seitlich wischen statt ueber den Rand */
    .card-body:has(> table.table > tfoot) { overflow-x: auto; }

    /* Beschriftungsspalte der Detailtabellen nicht ueberbreit */
    .table td[style*="16rem"] { width: 40% !important; }
}

/* 20 · Dienste-Zeile im Dashboard: Status und Aktion klar trennen ------------------- */
.n42-row-side { gap: .5rem; }
.n42-row-side .btn { margin-left: .75rem; }

/* 21 · Hinweis fuer Besucher ohne Anmeldung in der Bestellung ------------------------ */
.n42-order-login { max-width: 32rem; margin: 2rem auto; text-align: center; background: var(--n42-surface); border: 1px solid var(--n42-border); border-radius: var(--n42-radius); box-shadow: var(--n42-shadow); padding: 2rem 1.75rem; }
.n42-order-login h2 { font-size: 1.25rem; font-weight: 600; margin: 0 0 .5rem; }
.n42-order-login p { color: var(--n42-muted); margin: 0 0 1.5rem; }
.n42-order-login .actions { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }

/* 22 · Feinschliff: Abstand unter dem Kopfbereich, Status im Dunkelmodus gedämpft */
header + .container { padding-top: 1.75rem; }
[data-bs-theme="dark"] .badge.bg-success {
    background-color: rgba(78, 195, 81, .16) !important;
    color: #8BDD8D !important;
    border: 1px solid rgba(78, 195, 81, .35);
}