@charset "UTF-8";
:root {
            --o2-blue-bg: #0f58a3;
            --o2-cyan: #00b0f0;
            --o2-cyan-soft: #e6f4fc;
            --o2-brand-blue: #0019a5;
            --o2-brand-blue-deep: #001073;
            --o2-dark-blue: #1a1c2e;
            --o2-light-blue: #e1f5fe;
            --telekom-magenta: #e20074;
            --telekom-magenta-dark: #b0005a;
            --telekom-magenta-soft: #fff0f7;
            --ayyildiz-red: #d71920;
            --ayyildiz-red-dark: #a90f16;
            --ayyildiz-red-soft: #fff1f1;
            --congstar-black: #292929;
            --congstar-orange: #e84a0c;
            --congstar-orange-soft: #fff3ed;
            --tool-primary: #173a5e;
            --tool-primary-dark: #102b46;
            --tool-accent: #0f8f8a;
            --tool-accent-soft: #e8f6f5;
            --tool-ink: #172b3a;
            --page-bg: #eef1f8;
            --surface: #ffffff;
            --surface-alt: #f5f7fb;
            --text-dark: #3a4256;
            --border-color: #dbe0ea;
            --color-free: #1e7e34;
            --color-alert: #ff9800;
            --fs-header: 0.95rem;
            --fs-title: 0.65rem;
            --fs-value: 1.25rem;
            --fs-sub: 0.75rem;
            --fs-feature: 0.8rem;
            --fs-price: 1.4rem;
            --fs-badge: 0.75rem;
            --fs-provi: 0.68rem;
            --text-muted: #64748b;
            --text-secondary: #475569;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
            font-family: 'Segoe UI', system-ui, -apple-system, 'Helvetica Neue', Helvetica, Arial, sans-serif;
        }

        [hidden] {
            display: none !important;
        }

        .tab-content[data-dashboard-disabled="true"] {
            display: none !important;
        }

        body {
            background: linear-gradient(180deg, #ffffff 0%, var(--page-bg) 320px, var(--page-bg) 100%);
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            padding: 30px 20px;
            color: var(--tool-ink);
            overflow-x: hidden;
        }

        body.kunde-mode-active .haendler-only {
            display: none !important;
        }

        /* Kundenmodus: Provisions- und EK-Elemente immer ausblenden,
           auch wenn sie kein .haendler-only tragen (Sicherheitsnetz) */
        body.kunde-mode-active .cart-provi-chip,
        body.kunde-mode-active .badge-button,
        body.kunde-mode-active .provision-text,
        body.kunde-mode-active .card-provision,
        body.kunde-mode-active .card-provi-info,
        body.kunde-mode-active .provi-sum-code-box,
        body.kunde-mode-active .haendler-code,
        body.kunde-mode-active .hw-cart-provi,
        body.kunde-mode-active .hw-cart-distribution,
        body.print-kunde-mode .cart-provi-chip,
        body.print-kunde-mode .badge-button,
        body.print-kunde-mode .provision-text,
        body.print-kunde-mode .card-provision,
        body.print-kunde-mode .card-provi-info,
        body.print-kunde-mode .provi-sum-code-box,
        body.print-kunde-mode .hw-cart-provi,
        body.print-kunde-mode .hw-cart-distribution {
            display: none !important;
        }

        body.compare-tray-visible {
            padding-bottom: calc(30px + var(--compare-tray-height, 112px));
        }

        .bubble {
            position: absolute;
            border-radius: 50%;
            background: radial-gradient(circle at 30% 30%, rgba(0, 176, 240, 0.10), rgba(0, 25, 165, 0.04));
            pointer-events: none;
            z-index: 0;
        }
        .bubble-1 { width: 300px; height: 300px; top: -60px; left: -60px; }
        .bubble-2 { width: 440px; height: 440px; bottom: -140px; right: -80px; }

        header {
            width: 100%;
            max-width: 1760px;
            margin-inline: auto;
            margin-bottom: 14px;
            z-index: 10;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 10px;
        }

        .header-top-row {
            display: flex;
            width: 100%;
            gap: 10px;
            align-items: center;
            flex-wrap: wrap;
        }

        .header-workspace-actions,
        .header-operator-actions,
        .header-management-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .header-workspace-actions {
            min-width: 0;
            flex: 0 0 auto;
            flex-wrap: nowrap;
        }

        .header-operator-actions { flex: 0 0 auto; }

        .header-management-actions {
            flex: 0 0 auto;
            margin-left: auto;
            padding-left: 12px;
            border-left: 1px solid #d7e3ec;
        }

        .header-management-button {
            min-width: 132px;
            height: 44px;
            padding: 5px 11px 5px 7px;
            display: inline-grid;
            grid-template-columns: 32px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            border: 1px solid #c6d6e3;
            border-radius: 12px;
            color: #183c5c;
            background: #fff;
            box-shadow: 0 3px 10px rgba(18, 53, 82, .08);
            text-align: left;
            text-decoration: none;
            cursor: pointer;
            transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
        }

        .header-management-button > span:first-child {
            width: 32px;
            height: 32px;
            display: grid;
            place-items: center;
            border-radius: 9px;
            color: #fff;
            background: linear-gradient(145deg, #173f63, #087da8);
            font-size: 15px;
            font-weight: 950;
        }

        .header-management-button > span:last-child {
            min-width: 0;
            display: grid;
            line-height: 1.05;
        }

        .header-management-button small {
            color: #72869a;
            font-size: 8px;
            font-weight: 900;
            letter-spacing: .08em;
            text-transform: uppercase;
        }

        .header-management-button strong {
            margin-top: 4px;
            font-size: 11px;
            white-space: nowrap;
        }

        .header-management-button:hover {
            border-color: #7abbd4;
            box-shadow: 0 7px 16px rgba(18, 83, 119, .14);
            transform: translateY(-1px);
        }

        @media (max-width: 1540px) {
            .header-workspace-actions {
                order: initial;
                flex: 0 0 auto;
                padding: 0;
            }

            .header-operator-actions { margin-left: 0; }
            .header-management-actions { margin-left: auto; }
        }

        @media (max-width: 1350px) and (min-width: 641px) {
            .app-brand { width: 42px; margin-right: 0; }
            .app-brand-name { display: none; }
            .header-shop-stack { width: 310px; flex-basis: 310px; }
        }

        .app-brand {
            display: inline-flex;
            height: 42px;
            flex: 0 0 auto;
            align-items: center;
            gap: 9px;
            margin-right: 4px;
            color: var(--tool-primary-dark);
            white-space: nowrap;
        }

        .app-brand-link {
            text-decoration: none;
            border-radius: 12px;
        }

        .app-brand-link:focus-visible {
            outline: 3px solid rgba(0, 169, 232, .24);
            outline-offset: 4px;
        }

        .app-brand-mark {
            position: relative;
            display: grid;
            width: 38px;
            height: 38px;
            place-items: center;
            overflow: hidden;
            border-radius: 11px;
            background: linear-gradient(145deg, var(--tool-primary-dark), var(--tool-primary));
            color: #ffffff;
            box-shadow: inset 0 -3px 0 var(--tool-accent), 0 4px 10px rgba(23, 58, 94, 0.2);
        }

        .app-brand-mark strong {
            margin: -2px 5px 0 0;
            font-size: 1.22rem;
            font-weight: 950;
            line-height: 1;
        }

        .app-brand-mark i {
            position: absolute;
            right: 5px;
            bottom: 5px;
            color: #72e5df;
            font-size: 0.78rem;
            font-style: normal;
            font-weight: 950;
            line-height: 1;
        }

        .app-brand-name {
            font-size: 1.02rem;
            font-weight: 900;
            letter-spacing: -0.2px;
        }

        .header-filter-row {
            display: grid;
            grid-template-columns: auto minmax(0, 1fr);
            width: 100%;
            min-height: 70px;
            align-items: stretch;
            gap: 18px;
            padding: 10px 12px;
            border: 1px solid var(--border-color);
            border-top: 3px solid var(--o2-brand-blue);
            border-radius: 14px;
            background: linear-gradient(105deg, #ffffff 0%, #ffffff 68%, #f8fbff 100%);
            box-shadow: 0 4px 16px rgba(0, 17, 44, 0.07);
            box-sizing: border-box;
        }

        .header-filter-row .provider-filter {
            display: grid;
            grid-template-columns: repeat(4, max-content);
            grid-template-rows: 50px;
            align-content: stretch;
            align-items: stretch;
            column-gap: 7px;
            row-gap: 7px;
            margin-left: 0;
            padding-right: 18px;
            border-right: 1px solid #dde6ef;
        }

        .header-filter-row .provider-filter-check {
            min-height: 50px;
            align-self: stretch;
            justify-content: center;
            padding: 7px 12px 7px 9px;
        }

        .header-filter-row .tariff-range-filter {
            width: 100%;
            min-width: 0;
            margin: 0;
        }

        @media (max-width: 1150px) {
            .header-filter-row {
                grid-template-columns: 1fr;
            }

            .header-filter-row .provider-filter {
                border-right: 0;
                padding-right: 0;
            }
        }

        @media (max-width: 900px) {
            .header-filter-row {
                grid-template-columns: 1fr;
            }

        }

        .header-tool-btn.active {
            background: var(--o2-brand-blue);
            border-color: var(--o2-brand-blue);
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 25, 165, 0.25);
        }

        .info-badge {
            background: rgba(255, 255, 255, 0.15);
            padding: 8px 16px;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: 500;
            border: 1px solid rgba(255, 255, 255, 0.25);
        }

        /* O2 APP-DASHBOARD BUTTONS */
        .print-tab-btn {
            background: var(--surface);
            color: var(--o2-brand-blue);
            border: 1px solid var(--border-color);
            border-radius: 20px;
            padding: 8px 16px;
            font-size: 0.85rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            box-shadow: 0 1px 3px rgba(0, 17, 44, 0.06);
        }

        .print-tab-btn:hover {
            background: var(--o2-cyan-soft);
            border-color: var(--o2-cyan);
            color: var(--o2-brand-blue);
        }

        .compact-btn {
            padding: 8px 12px !important;
            font-size: 0.85rem !important;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
        }

        /* Händler-/Kunden-Umschalter: klarer Zustand auf hellem Header */
        #mode-toggle-btn {
            background: var(--o2-brand-blue) !important;
            border-color: var(--o2-brand-blue) !important;
            color: #ffffff !important;
            margin-left: 0;
        }

        #mode-toggle-btn:hover {
            background: var(--o2-brand-blue-deep) !important;
        }

        body.kunde-mode-active #mode-toggle-btn {
            background: var(--surface) !important;
            border-color: var(--o2-brand-blue) !important;
            color: var(--o2-brand-blue) !important;
        }

        /* PERFEKTES, HOCHAUFLÖSENDES O2-TOOLTIP SYSTEM (Überlagerungssicher) */
        [data-tooltip] {
            position: relative;
        }

        [data-tooltip]:hover {
            z-index: 99999998;
        }

        /* Tooltip-Box */
        [data-tooltip]::after {
            content: attr(data-tooltip);
            position: absolute;
            top: calc(100% + 10px);
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -6px);
            background: #001838;
            color: #ffffff;
            padding: 8px 12px;
            border-radius: 8px;
            font-size: 0.75rem;
            font-weight: 600;
            white-space: normal;
            max-width: min(320px, calc(100vw - 32px));
            min-width: 160px;
            text-align: center;
            line-height: 1.25;
            opacity: 0;
            pointer-events: none;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            z-index: 99999999 !important;
            border: 1px solid rgba(255, 255, 255, 0.2);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
        }

        /* Tooltip-Pfeilspitze */
        [data-tooltip]::before {
            content: "";
            position: absolute;
            top: calc(100% + 1px);
            bottom: auto;
            left: 50%;
            transform: translate(-50%, -6px);
            border-width: 6px;
            border-style: solid;
            border-color: transparent transparent #001838 transparent;
            opacity: 0;
            transition: transform 0.15s ease-out, opacity 0.15s ease-out;
            z-index: 99999999 !important;
            pointer-events: none;
        }

        [data-tooltip]:hover::after,
        [data-tooltip]:hover::before {
            opacity: 1;
            transform: translate(-50%, 0);
        }

        body[data-input="touch"] [data-tooltip]::after,
        body[data-input="touch"] [data-tooltip]::before,
        body[data-pointer="touch"] [data-tooltip]::after,
        body[data-pointer="touch"] [data-tooltip]::before {
            display: none !important;
        }

        body.tooltip-layer-active [data-tooltip]:not(.hardware-price-update-badge)::after,
        body.tooltip-layer-active [data-tooltip]:not(.hardware-price-update-badge)::before {
            display: none !important;
        }

        .app-tooltip-layer {
            position: fixed;
            z-index: 2147483647;
            max-width: min(340px, calc(100vw - 24px));
            padding: 9px 12px;
            border-radius: 8px;
            border: 1px solid rgba(255, 255, 255, 0.18);
            background: #001838;
            color: #ffffff;
            box-shadow: 0 14px 32px rgba(0, 17, 44, 0.34);
            font-size: 0.75rem;
            font-weight: 700;
            line-height: 1.3;
            text-align: center;
            pointer-events: none;
        }

        /* Gesamte Navigation als eine ruhige Karte statt einzelner schwebender Boxen */
        .tab-container-nested {
            display: flex;
            flex-direction: column;
            gap: 0;
            z-index: 10;
            width: 100%;
            background: var(--surface);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            padding: 2px 14px;
            box-shadow: 0 2px 10px rgba(0, 17, 44, 0.06);
        }

        .tab-row {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 3px 0;
        }

        .tab-row + .tab-row {
            border-top: 1px solid #eef2f7;
        }

        .tab-row-label {
            font-size: 0.72rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--text-muted);
            min-width: 165px;
            text-align: left;
        }

        .tab-navigation, .tab-navigation-home {
            display: flex;
            background: #f1f5f9;
            padding: 2px 4px;
            border-radius: 20px;
            border: 1px solid transparent;
        }

        .tab-btn {
            background: transparent;
            border: none;
            color: var(--text-dark);
            padding: 4px 14px;
            font-size: 0.9rem;
            font-weight: bold;
            border-radius: 14px;
            cursor: pointer;
            transition: all 0.25s ease;
            white-space: nowrap;
        }

        .tab-btn:hover {
            background: var(--o2-cyan-soft);
            color: var(--o2-brand-blue);
        }

        .tab-btn.active {
            background: var(--o2-brand-blue);
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(0, 25, 165, 0.25);
        }

        /* Einheitliches Tab-Verhalten, CI-Farbe je Netzbetreiber:
           inaktiv = Markenfarbe als Text, Hover = softe Markenfläche, aktiv = volle Markenfarbe */
        .tab-btn.telekom-tab-btn {
            background: transparent;
            color: var(--telekom-magenta);
        }

        .tab-btn.telekom-tab-btn:hover {
            background: var(--telekom-magenta-soft);
            color: var(--telekom-magenta);
        }

        .tab-btn.telekom-tab-btn.active {
            background: var(--telekom-magenta);
            color: #ffffff;
            box-shadow: 0 4px 10px rgba(226, 0, 116, 0.24);
        }

        .sub-section-title.telekom-section-title {
            color: var(--telekom-magenta);
            border-left-color: var(--telekom-magenta);
        }

        @media (max-width: 1100px) {
            .tab-row {
                flex-direction: column;
                align-items: flex-start;
                gap: 4px;
            }
            .tab-row-label {
                text-align: left;
                min-width: auto;
            }
        }

        .app-layout {
            display: flex;
            width: 100%;
            max-width: 1760px;
            margin-inline: auto;
            gap: 24px;
            z-index: 10;
            flex-grow: 1;
        }

        .main-content {
            flex: 1;
            min-width: 0;
        }

        body.tool-tab-active .main-content {
            width: 100%;
        }

        .sidebar-cart {
            width: clamp(360px, 27vw, 460px);
            flex-shrink: 0;
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-top: 4px solid var(--o2-brand-blue);
            border-radius: 12px;
            padding: 24px;
            color: var(--o2-dark-blue);
            align-self: flex-start;
            position: sticky;
            top: 20px;
            height: auto;
            min-height: calc(100vh - 40px);
            max-height: none;
            overflow: visible;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            display: flex;
            flex-direction: column;
        }

        body.tool-tab-active .sidebar-cart {
            display: none;
        }

        @media (max-width: 1100px) {
            .app-layout {
                flex-direction: column;
            }
            .sidebar-cart {
                width: 100%;
                height: auto;
                position: static;
                max-height: none;
                overflow-y: auto;
            }
        }

        .sub-section-title {
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--o2-brand-blue);
            margin: 20px 0 12px 0;
            border-left: 4px solid var(--o2-cyan);
            padding-left: 10px;
            text-align: left;
            width: 100%;
        }

        .tab-content {
            display: none;
            width: 100%;
        }

        .tab-content.active {
            display: block;
        }

        .cards-grid {
            display: grid;
            grid-template-columns: repeat(7, minmax(130px, 1fr));
            gap: 10px;
            width: 100%;
            margin-bottom: 25px;
            transition: all 0.3s ease;
        }

        .cards-grid.six-cols {
            grid-template-columns: repeat(6, minmax(130px, 1fr));
        }

        .cards-grid.five-cols {
            grid-template-columns: repeat(5, minmax(130px, 1fr));
        }

        .cards-grid.three-cols {
            grid-template-columns: repeat(3, minmax(170px, 300px));
            justify-content: start;
        }

        .cards-grid.four-cols {
            grid-template-columns: repeat(4, minmax(140px, 250px));
            justify-content: start;
        }

        @media (max-width: 1500px) {
            .cards-grid, .cards-grid.six-cols, .cards-grid.five-cols, .cards-grid.three-cols, .cards-grid.four-cols {
                grid-template-columns: repeat(4, 1fr);
            }
        }

        @media (max-width: 1000px) {
            .cards-grid, .cards-grid.six-cols, .cards-grid.five-cols, .cards-grid.three-cols, .cards-grid.four-cols {
                grid-template-columns: repeat(3, 1fr);
            }
        }

        @media (max-width: 768px) {
            .cards-grid, .cards-grid.six-cols, .cards-grid.five-cols, .cards-grid.three-cols, .cards-grid.four-cols {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        @media (max-width: 480px) {
            .cards-grid, .cards-grid.six-cols, .cards-grid.five-cols, .cards-grid.three-cols, .cards-grid.four-cols {
                grid-template-columns: 1fr;
            }
        }

        .card {
            background: white;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            overflow: hidden;
            display: flex;
            flex-direction: column;
            box-shadow: 0 6px 16px rgba(0, 17, 44, 0.08);
            transition: all 0.2s ease, opacity 0.3s ease, transform 0.2s ease;
            cursor: default;
            position: relative;
        }

        .card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 26px rgba(0, 25, 165, 0.14);
        }

        .card.minimized-hidden {
            display: none !important;
        }

        .card.selected {
            outline: 4px solid var(--o2-cyan);
            outline-offset: -4px;
            box-shadow: 0 0 20px rgba(0, 176, 240, 0.4);
        }

        .telekom-card {
            border-color: #e6b5ce;
        }

        .telekom-card:hover {
            box-shadow: 0 12px 26px rgba(226, 0, 116, 0.16);
        }

        .telekom-card.selected {
            outline-color: var(--telekom-magenta);
            box-shadow: 0 0 20px rgba(226, 0, 116, 0.28);
        }

        .telekom-card .card-header {
            background: var(--telekom-magenta);
        }

        .telekom-card-brand {
            display: block;
            margin-bottom: 4px;
            font-size: 0.62rem;
            font-weight: 800;
            text-transform: uppercase;
        }

        .telekom-card .section-value,
        .telekom-card .speed-value-unified,
        .telekom-card .price-text,
        .telekom-card .dual-price-row strong,
        .telekom-card .card-options-hint-text,
        .telekom-card .card-options-hint-summary {
            color: var(--telekom-magenta);
        }

        .telekom-card .fiveg-badge,
        .telekom-card .badge-button {
            background: var(--telekom-magenta);
        }

        .telekom-card .price-box,
        .telekom-card .dual-price-box {
            border-color: var(--telekom-magenta);
        }

        .telekom-card .add-to-cart-btn {
            border-color: var(--telekom-magenta);
            color: var(--telekom-magenta);
        }

        .telekom-card .add-to-cart-btn:hover,
        .telekom-card .add-to-cart-btn.in-cart {
            border-color: var(--telekom-magenta);
            background: var(--telekom-magenta);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(226, 0, 116, 0.24);
        }

        .telekom-card .add-to-cart-btn.in-cart .add-to-cart-count {
            color: var(--telekom-magenta);
        }

        .telekom-card .card-back-name,
        .telekom-card .card-options-hint-text,
        .telekom-card .card-options-hint-summary {
            color: var(--telekom-magenta);
        }

        .telekom-card .card-options-hint {
            border-color: #f2bad7;
            background: var(--telekom-magenta-soft);
        }

        .telekom-card .card-back-close {
            background: var(--telekom-magenta);
        }

        .telekom-card {
            min-width: 0;
        }

        .telekom-card .card-title,
        .telekom-card .section-value,
        .telekom-card .section-sub,
        .telekom-card .features li,
        .telekom-card .ap-text {
            overflow-wrap: anywhere;
        }

        .telekom-card .features {
            height: auto;
            min-height: 80px;
        }


        .telekom-unlimited-combo-badge {
            align-self: stretch;
            margin: 0 0 10px;
            padding: 8px 10px;
            border: 1px solid var(--telekom-magenta);
            border-radius: 6px;
            background: var(--telekom-magenta-soft);
            color: var(--telekom-magenta);
            font-size: 0.78rem;
            font-weight: 900;
            text-align: center;
        }

        .telekom-unlimited-combo-badge[hidden] {
            display: none;
        }

        .telekom-filter-bundle-badge {
            align-self: stretch;
            margin: 0 0 10px;
            padding: 7px 9px;
            border: 1px solid #f0a8ce;
            border-radius: 7px;
            background: linear-gradient(135deg, #fff5fa, #fce7f3);
            color: var(--telekom-magenta);
            font-size: 0.66rem;
            font-weight: 850;
            line-height: 1.3;
            text-align: center;
        }

        .telekom-filter-bundle-badge[hidden] {
            display: none;
        }

        .telekom-global-benefit-badge {
            align-self: stretch;
            margin: 0 0 10px;
            padding: 7px 9px;
            border: 1px solid #ef9ac6;
            border-radius: 7px;
            background: linear-gradient(135deg, #fff7fb, #fce7f3);
            color: var(--telekom-magenta);
            font-size: 0.68rem;
            font-weight: 850;
            line-height: 1.3;
            text-align: center;
        }

        .telekom-global-benefit-badge[hidden] {
            display: none;
        }


        /* "In den Warenkorb"-Button auf jeder Kachel (Online-Shop-Prinzip) */
        .add-to-cart-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 7px;
            width: calc(100% - 24px);
            margin: 0 12px 8px;
            border: 1px solid var(--o2-brand-blue);
            border-radius: 8px;
            background: #ffffff;
            color: var(--o2-brand-blue);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 850;
            padding: 9px 10px;
            transition: all 0.18s ease;
            box-shadow: 0 2px 8px rgba(0, 25, 165, 0.10);
        }

        .add-to-cart-btn:hover {
            background: var(--o2-cyan-soft);
            border-color: var(--o2-cyan);
            transform: translateY(-1px);
            box-shadow: 0 6px 14px rgba(0, 176, 240, 0.22);
        }

        .add-to-cart-btn.in-cart {
            background: var(--o2-brand-blue);
            border-color: var(--o2-brand-blue);
            color: #ffffff;
            box-shadow: 0 4px 12px rgba(0, 25, 165, 0.22);
        }

        .add-to-cart-btn.in-cart:hover {
            background: var(--o2-brand-blue-deep);
            border-color: var(--o2-brand-blue-deep);
        }

        .add-to-cart-btn.quantity-bump {
            animation: quantityPop 0.28s ease-out;
        }

        .add-to-cart-icon {
            font-size: 0.9rem;
            line-height: 1;
        }

        .add-to-cart-count {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 26px;
            height: 20px;
            padding: 0 7px;
            border-radius: 999px;
            background: var(--o2-brand-blue);
            color: #ffffff;
            font-size: 0.72rem;
            font-weight: 900;
            line-height: 1;
        }

        .add-to-cart-btn.in-cart .add-to-cart-count {
            background: #ffffff;
            color: var(--o2-brand-blue);
        }

        .add-to-cart-count[hidden] {
            display: none;
        }

        @keyframes quantityPop {
            0% { transform: scale(1); }
            45% { transform: scale(1.14); }
            100% { transform: scale(1); }
        }

        .card-minimize-btn {
            position: absolute;
            top: 6px;
            right: 6px;
            background: rgba(255, 255, 255, 0.25);
            border: none;
            color: white;
            font-size: 0.85rem;
            font-weight: bold;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
            z-index: 10;
        }

        .card-maximize-btn {
            position: absolute;
            top: 6px;
            right: 32px;
            background: rgba(255, 255, 255, 0.25);
            border: none;
            color: white;
            font-size: 0.85rem;
            font-weight: bold;
            width: 20px;
            height: 20px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.2s;
            z-index: 10;
        }

        .card-minimize-btn:hover, .card-maximize-btn:hover {
            background: rgba(255, 255, 255, 0.5);
        }

        .card.maximized-fullscreen {
            position: fixed !important;
            top: 50% !important;
            left: 50% !important;
            transform: translate(-50%, -50%) scale(1.15) !important;
            z-index: 99999 !important;
            box-shadow: 0 0 0 100vw rgba(0, 0, 0, 0.85), 0 30px 60px rgba(0,0,0,0.5) !important;
            max-height: 90vh !important;
            width: 90vw !important;
            max-width: 450px !important;
            overflow-y: auto !important;
            cursor: default !important;
            margin: 0 !important;
        }

        .card.maximized-fullscreen .card-maximize-btn {
            background: rgba(255, 255, 255, 0.8);
            color: black;
        }

        .card.maximized-fullscreen:hover {
            transform: translate(-50%, -50%) scale(1.15) !important;
        }

        @media (max-width: 768px) {
            .card.maximized-fullscreen {
                transform: translate(-50%, -50%) scale(1.02) !important;
                width: 95vw !important;
            }
            .card.maximized-fullscreen:hover {
                transform: translate(-50%, -50%) scale(1.02) !important;
            }
        }

        .alternative-badge {
            position: absolute;
            top: 8px;
            left: 8px;
            background-color: var(--color-alert);
            color: white;
            font-size: 0.65rem;
            font-weight: bold;
            padding: 3px 8px;
            border-radius: 10px;
            z-index: 6;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            animation: pulse 1.8s infinite;
        }

        @keyframes pulse {
            0% { transform: scale(1); }
            50% { transform: scale(1.05); }
            100% { transform: scale(1); }
        }

        .card.disabled {
            opacity: 0.45;
            pointer-events: none;
            filter: grayscale(40%);
        }

        /* Nicht buchbare Tarif-Platzhalter belegen in Mobilfunk-Kategorien keinen Platz. */
        #tab-standard .card.disabled,
        #tab-young .card.disabled,
        #tab-plus .card.disabled,
        #tab-kombi .card.disabled,
        #tab-blue .card.disabled,
        #tab-high-value .card.disabled,
        #tab-telekom .card.disabled,
        #tab-ayyildiz .card.disabled {
            display: none !important;
        }

        .card-header {
            background-color: var(--o2-cyan);
            color: white;
            padding: 10px 28px 10px 10px;
            text-align: center;
            font-weight: bold;
            font-size: var(--fs-header);
            min-height: 75px;
            height: auto;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
            gap: 6px;
            line-height: 1.25;
        }

        .card-title {
            width: 100%;
            min-height: 36px;
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;
        }

        .card-body {
            padding: 15px 12px;
            display: flex;
            flex-direction: column;
            align-items: center;
            flex-grow: 1;
            color: var(--text-dark);
            text-align: center;
        }

        .section-title {
            font-size: var(--fs-title);
            font-weight: bold;
            color: var(--text-muted);
            margin-bottom: 4px;
            letter-spacing: 0.8px;
            text-transform: uppercase;
        }

        .section-value {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--o2-brand-blue);
            height: 30px;
            line-height: 30px;
            margin-bottom: 2px;
            letter-spacing: -0.3px;
        }

        .speed-block {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            gap: 2px;
            height: 44px;
            margin-bottom: 2px;
        }

        .speed-prefix-top {
            font-size: 0.65rem;
            font-weight: bold;
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
            line-height: 1.1;
        }

        .speed-row-unified {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 5px;
            line-height: 1.2;
        }

        .speed-value-unified {
            font-size: 1.3rem;
            font-weight: 900;
            color: var(--o2-brand-blue);
        }

        .fiveg-badge {
            background-color: var(--o2-cyan);
            color: white;
            font-size: 0.65rem;
            font-weight: 900;
            padding: 1px 5px;
            border-radius: 5px;
            display: inline-block;
            vertical-align: middle;
            line-height: 1.1;
            box-shadow: 0 1px 2px rgba(0,0,0,0.1);
        }

        .section-sub {
            font-size: var(--fs-sub);
            color: #0076a8;
            margin-bottom: 8px;
            min-height: 38px;
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
        }

        .divider {
            width: 100%;
            height: 1px;
            background-color: #f1f5f9;
            margin: 8px 0 12px 0;
            border: none;
        }

        .features {
            list-style: none;
            width: 100%;
            text-align: left;
            padding-left: 5px;
            margin-bottom: 15px;
            height: 50px;
        }

        .features li {
            font-size: var(--fs-feature);
            font-weight: 600;
            color: var(--text-secondary);
            margin-bottom: 6px;
            display: flex;
            align-items: center;
        }

        .features li::before {
            content: "✓";
            color: #0076a8;
            font-weight: bold;
            margin-right: 5px;
        }

        .features li.feature-negative::before {
            content: "✗";
            color: #94a3b8;
        }

        .features li.feature-negative {
            color: var(--text-muted);
        }

        /* Tarif-Optionen als Toggle-Switches (AP frei / Speed-Option) */
        .blue-options {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            margin-top: 8px;
            padding-top: 8px;
            border-top: 1px solid #e8eef6;
            /* Reserviert Platz für 2 Optionen, damit Preise über die Kacheln
               hinweg auf gleicher Höhe bleiben (auch bei nur 1 Option). */
            min-height: 114px;
            justify-content: flex-start;
        }

        .blue-options-title {
            font-size: 0.58rem;
            font-weight: 900;
            color: var(--text-muted);
            letter-spacing: 0.8px;
            text-transform: uppercase;
            text-align: left;
            margin-bottom: 1px;
        }

        .blue-option-toggle {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 6px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
            text-align: left;
            cursor: pointer;
            transition: all 0.18s ease;
        }

        .blue-option-toggle:hover {
            border-color: var(--o2-cyan);
            background: #f0faff;
        }

        .blue-option-toggle:has(input:checked) {
            border-color: var(--o2-cyan);
            background: #e8f8ff;
            box-shadow: 0 0 0 1px rgba(0, 176, 240, 0.25);
        }

        .blue-option-toggle input[type="checkbox"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .option-switch {
            position: relative;
            flex-shrink: 0;
            width: 30px;
            height: 17px;
            border-radius: 999px;
            background: #cbd5e1;
            transition: background 0.18s ease;
        }

        .option-switch::after {
            content: "";
            position: absolute;
            top: 2px;
            left: 2px;
            width: 13px;
            height: 13px;
            border-radius: 50%;
            background: #ffffff;
            box-shadow: 0 1px 3px rgba(0, 17, 44, 0.3);
            transition: transform 0.18s ease;
        }

        .blue-option-toggle input:checked ~ .option-switch {
            background: var(--o2-cyan);
        }

        .blue-option-toggle input:checked ~ .option-switch::after {
            transform: translateX(13px);
        }

        .option-text {
            min-width: 0;
        }

        .option-text strong {
            display: block;
            font-size: 0.68rem;
            font-weight: 850;
            color: var(--o2-dark-blue);
            line-height: 1.2;
        }

        .blue-option-toggle:has(input:checked) .option-text strong {
            color: var(--o2-brand-blue);
        }

        .option-text em {
            display: block;
            font-size: 0.6rem;
            font-style: normal;
            font-weight: 650;
            color: var(--text-muted);
            line-height: 1.25;
            margin-top: 1px;
        }

        /* Zubuchoptionen (o2 TV, o2 Online Schutz) als Dropdowns */
        .addon-options {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            margin-top: 10px;
            padding-top: 10px;
            border-top: 1px solid #f1f5f9;
        }

        .addon-options-title {
            font-size: 0.58rem;
            font-weight: 900;
            color: var(--text-muted);
            letter-spacing: 0.8px;
            text-transform: uppercase;
            text-align: left;
        }

        .addon-option {
            display: flex;
            flex-direction: column;
            gap: 3px;
            text-align: left;
            cursor: pointer;
        }

        .addon-option-label {
            font-size: 0.62rem;
            font-weight: 800;
            color: var(--o2-brand-blue);
            letter-spacing: 0.2px;
        }

        .addon-select {
            width: 100%;
            border: 1px solid #d7deea;
            border-radius: 8px;
            background: #f8fafc;
            color: var(--o2-dark-blue);
            font-size: 0.72rem;
            font-weight: 700;
            padding: 7px 9px;
            cursor: pointer;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
            appearance: none;
            -webkit-appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236b7280' d='M6 8.5 1.5 4h9z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 9px center;
            padding-right: 26px;
        }

        .addon-select:focus {
            outline: none;
            border-color: var(--o2-cyan);
            box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.15);
        }

        .addon-select.has-selection {
            border-color: var(--o2-cyan);
            background-color: #eefaff;
        }

        .addon-select-hidden {
            position: absolute;
            width: 1px;
            height: 1px;
            opacity: 0;
            pointer-events: none;
        }

        .addon-package-option {
            gap: 8px;
            cursor: default;
        }

        .addon-package-list {
            display: grid;
            gap: 8px;
        }

        .addon-package-card {
            width: 100%;
            border: 1px solid #cfe1f5;
            border-radius: 10px;
            background: #ffffff;
            color: #00112c;
            padding: 9px 10px;
            text-align: left;
            cursor: pointer;
            transition: border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
        }

        .addon-package-card:hover {
            border-color: var(--o2-brand-blue);
            box-shadow: 0 6px 16px rgba(0, 25, 165, 0.1);
        }

        .addon-package-card.active {
            border-color: var(--o2-brand-blue);
            background: #eef6ff;
            box-shadow: inset 3px 0 0 var(--o2-brand-blue), 0 7px 18px rgba(0, 25, 165, 0.12);
        }

        .addon-package-head {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 8px;
        }

        .addon-package-name {
            display: block;
            color: var(--o2-brand-blue);
            font-weight: 900;
            font-size: 0.78rem;
            line-height: 1.15;
        }

        .addon-package-head em {
            display: block;
            margin-top: 2px;
            color: #475569;
            font-size: 0.64rem;
            font-style: normal;
            font-weight: 750;
            line-height: 1.25;
        }

        .addon-package-price {
            flex: 0 0 auto;
            color: #00112c;
            font-size: 0.76rem;
            font-weight: 950;
            white-space: nowrap;
        }

        .addon-package-logos {
            display: flex;
            align-items: center;
            gap: 6px;
            margin-top: 7px;
        }

        .addon-package-logo {
            height: 20px;
            max-width: 72px;
            object-fit: contain;
            border-radius: 4px;
            background: #001b5a;
        }

        .addon-package-features {
            list-style: none;
            display: grid;
            gap: 4px;
            margin: 8px 0 0;
            padding: 0;
            color: #334155;
            font-size: 0.64rem;
            font-weight: 650;
            line-height: 1.22;
        }

        .addon-package-features li {
            position: relative;
            padding-left: 14px;
        }

        .addon-package-features li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--o2-brand-blue);
            font-weight: 950;
        }

        /* Add-on-Zeilen im Warenkorb */
        .cart-item-row.addon-row {
            font-size: 0.8rem;
            color: var(--o2-brand-blue);
        }

        .cart-item-row.addon-row span {
            font-weight: 700;
        }

        .dual-price-box {
            background: linear-gradient(135deg, #f0fbff, #e3f6fe);
            border: 2px solid var(--o2-cyan);
            border-radius: 12px;
            padding: 6px 12px;
            width: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 3px;
            margin-top: 10px;
            margin-bottom: 8px;
            height: 56px;
        }

        .dual-price-row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 0.72rem;
            font-weight: bold;
            color: var(--text-muted);
        }

        .dual-price-row strong {
            font-size: 1.15rem;
            color: var(--o2-brand-blue);
            font-weight: 800;
        }

        .price-box {
            border: 2px solid var(--o2-cyan);
            border-radius: 12px;
            padding: 8px 10px;
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
            margin-top: 10px;
            margin-bottom: 8px;
            height: 50px;
            background: linear-gradient(135deg, #f0fbff, #e3f6fe);
        }

        body[data-layout="desktop"] .tab-content .card-body > .price-box,
        body[data-layout="desktop"] .tab-content .card-body > .dual-price-box,
        body[data-layout="tablet"] .tab-content .card-body > .price-box,
        body[data-layout="tablet"] .tab-content .card-body > .dual-price-box {
            margin-top: auto;
        }

        .price-text {
            font-size: 1.5rem;
            font-weight: 900;
            color: var(--o2-brand-blue);
            white-space: nowrap;
            letter-spacing: -0.3px;
        }

        .price-text span {
            font-size: 0.7rem;
            font-weight: normal;
            vertical-align: middle;
            margin-left: 1px;
        }

        .ap-text {
            font-size: var(--fs-provi);
            margin-bottom: 8px;
            min-height: 34px;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            line-height: 1.2;
            text-align: center;
            transition: all 0.2s ease;
        }

        .ap-free-label-standard {
            display: inline;
        }

        .ap-free-label-kunde {
            display: none;
        }

        .ap-free .haendler-code,
        .ap-free .advisor-help-code {
            display: block;
            margin-top: 8px;
        }

        body.kunde-mode-active .ap-free-label-standard {
            display: none !important;
        }

        body.kunde-mode-active .ap-free-label-kunde {
            display: inline !important;
            font-size: 0.85rem !important;
            font-weight: 800 !important;
            color: var(--color-free) !important;
        }

        .ap-charge { color: #777777; }
        .ap-free { color: var(--color-free); font-weight: bold; }

        .telekom-ap-unknown {
            border-color: #e2e8f0 !important;
            background: #f8fafc !important;
            color: #64748b !important;
        }

        .telekom-promotion-options {
            width: 100%;
        }

        .telekom-promotion-title {
            color: #262626;
            font-size: 0.82rem;
            font-weight: 900;
            text-align: left;
        }

        .telekom-promotion-description {
            margin: 3px 0 9px;
            color: #64748b;
            font-size: 0.68rem;
            line-height: 1.35;
            text-align: left;
        }

        .telekom-promotion-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 7px;
        }

        .telekom-promotion-choice {
            display: grid;
            grid-template-columns: 18px minmax(0, 1fr);
            align-items: center;
            gap: 8px;
            min-height: 48px;
            border: 1px solid #d8dee8;
            border-radius: 7px;
            background: #ffffff;
            padding: 8px;
            cursor: pointer;
            text-align: left;
        }

        .telekom-promotion-choice:has(input:checked) {
            border-color: var(--telekom-magenta);
            background: var(--telekom-magenta-soft);
            box-shadow: 0 0 0 2px rgba(226, 0, 116, 0.1);
        }

        .telekom-promotion-radio {
            width: 17px;
            height: 17px;
            accent-color: var(--telekom-magenta);
        }

        .telekom-magentaeins-choice {
            display: grid;
            grid-template-columns: 20px minmax(0, 1fr);
            align-items: start;
            gap: 9px;
            margin-top: 10px;
            padding: 10px;
            border: 1px solid #d8dee8;
            border-radius: 7px;
            background: #fff;
            cursor: pointer;
            text-align: left;
        }

        .telekom-magentaeins-choice:has(input:checked) {
            border-color: var(--telekom-magenta);
            background: var(--telekom-magenta-soft);
        }

        .telekom-magentaeins-toggle {
            width: 18px;
            height: 18px;
            accent-color: var(--telekom-magenta);
        }

        .telekom-magentaeins-choice small {
            display: block;
            margin-top: 4px;
            color: #475569;
            font-size: 0.64rem;
            line-height: 1.3;
        }

        .telekom-promotion-choice-text {
            min-width: 0;
        }

        .telekom-promotion-choice-text strong,
        .telekom-promotion-choice-text em {
            display: block;
        }

        .telekom-promotion-choice-text strong {
            color: #262626;
            font-size: 0.74rem;
        }

        .telekom-promotion-choice-text em {
            margin-top: 2px;
            color: var(--telekom-magenta);
            font-size: 0.66rem;
            font-style: normal;
            font-weight: 800;
        }

        .telekom-promotion-choice small {
            grid-column: 2;
            color: #64748b;
            font-size: 0.6rem;
            font-weight: 750;
            line-height: 1.25;
            white-space: normal;
        }

        .card-body > .ap-text {
            width: 100%;
            min-height: auto;
            margin: 0 0 9px;
            padding: 6px 8px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
            color: var(--text-secondary);
            font-size: 0.68rem;
            font-weight: 750;
            line-height: 1.25;
        }

        .card-body > .ap-free {
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: var(--color-free);
        }

        .card-options-group {
            width: 100%;
            margin-top: 2px;
            margin-bottom: 10px;
        }

        /* --- Kachel-Rückseite: Optionen hinter einer Dreh-Animation --- */
        .cards-grid {
            perspective: 1800px;
        }

        .card.card-flip-anim {
            transform: rotateY(90deg) !important;
            transition: transform 0.22s ease-in !important;
            pointer-events: none;
        }

        /* Vorderseiten-Zusammenfassung: nur sichtbar, wenn Optionen aktiv sind */
        .card-options-hint {
            display: none;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px;
            width: 100%;
            margin: 8px 0 10px;
            padding: 8px 10px;
            border: 1px solid #bae6fd;
            border-radius: 10px;
            background: #f0f9ff;
            cursor: pointer;
            font-size: 0.7rem;
            text-align: left;
        }

        .card-options-hint.has-selection {
            display: flex;
        }

        .card-options-hint-text {
            font-weight: 800;
            color: var(--o2-brand-blue);
        }

        .card-options-hint-summary {
            flex-basis: 100%;
            color: var(--o2-brand-blue);
            font-weight: 700;
            font-size: 0.62rem;
        }

        @media (hover: none), (pointer: coarse) {
            .card.has-back:not(.card-show-back):not(.disabled):hover::after {
                display: none;
            }
        }

        body[data-input="touch"] .card:not(.has-back):hover::after,
        body[data-pointer="touch"] .card:not(.has-back):hover::after {
            display: none;
        }

        .card.has-back:not(.card-show-back):not(.disabled)::after {
            content: none;
            display: none;
        }

        .card.has-back:not(.card-show-back):not(.disabled):hover::after {
            content: none;
            display: none;
        }

        .card.has-back:not(.card-show-back):not(.disabled) .card-body::after,
        .card.has-back:not(.card-show-back):not(.disabled):hover .card-body::after {
            content: none;
            display: none;
        }

        .card.has-back .card-options-hint {
            display: none;
        }

        .card.has-back .card-options-hint.has-selection {
            display: flex;
            width: 100%;
            max-width: 100%;
            border-radius: 10px;
        }

        .card-options-hint-summary:empty {
            display: none;
        }

        .card-back {
            display: none;
        }

        .card.card-show-back > :not(.card-back) {
            display: none !important;
        }

        .card.card-show-back .card-back {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 14px 12px;
            min-height: 240px;
            height: 100%;
        }

        .card-back-header {
            display: flex;
            flex-direction: column;
            gap: 2px;
            padding-bottom: 8px;
            border-bottom: 1px solid var(--border-color);
        }

        .card-back-title {
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.8px;
            text-transform: uppercase;
            color: var(--text-muted);
        }

        .card-back-name {
            font-size: 0.85rem;
            color: var(--o2-brand-blue);
        }

        .card-back .card-options-group {
            margin: 0;
        }

        .card-back-close {
            margin-top: auto;
            padding: 10px;
            border-radius: 8px;
            border: none;
            background: var(--o2-brand-blue);
            color: #ffffff;
            font-weight: 800;
            font-size: 0.75rem;
            cursor: pointer;
        }

        body.print-tab-mode .card-options-hint,
        body.print-cart-mode .card-options-hint {
            display: none !important;
        }

        /* --- Versicherungs-Tab --- */
        .insurance-input-panel {
            background: #ffffff;
            border: 1px solid var(--border-color);
            border-radius: 16px;
            box-shadow: 0 6px 16px rgba(0, 17, 44, 0.08);
            padding: 18px 20px;
            margin-bottom: 20px;
            max-width: 720px;
        }

        .insurance-price-group {
            margin-top: 12px;
        }

        .insurance-price-group label {
            display: block;
            font-size: 0.7rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: 0.6px;
            color: var(--text-muted);
            margin-bottom: 6px;
        }

        .insurance-price-group input {
            width: 100%;
            border: 2px solid var(--o2-cyan);
            border-radius: 10px;
            padding: 10px 14px;
            font-size: 1.3rem;
            font-weight: 800;
            color: var(--o2-brand-blue);
            background: linear-gradient(135deg, #f0fbff, #e3f6fe);
        }

        .insurance-price-group input:focus {
            outline: 2px solid var(--o2-brand-blue);
        }

        .insurance-device-grid {
            display: grid;
            grid-template-columns: repeat(3, minmax(180px, 1fr));
            gap: 10px;
            margin-top: 14px;
        }

        .insurance-device-row {
            display: grid;
            gap: 7px;
            padding: 12px;
            border: 1px solid var(--border-color);
            border-radius: 12px;
            background: var(--surface-alt);
        }

        .insurance-device-row > label:first-child {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 8px;
            color: var(--tool-ink);
        }

        .insurance-device-row > label:first-child span {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 700;
        }

        .insurance-device-row > input {
            width: 100%;
            min-width: 0;
            padding: 10px 11px;
            border: 2px solid #8fa7bf;
            border-radius: 9px;
            background: #ffffff;
            color: var(--tool-primary);
            font-size: 1rem;
            font-weight: 850;
        }

        .insurance-device-row > input:focus {
            border-color: var(--tool-accent);
            outline: 2px solid rgba(15, 143, 138, 0.18);
        }

        .insurance-premium-choice {
            display: flex;
            align-items: center;
            gap: 7px;
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 800;
        }

        .insurance-premium-choice input {
            width: 17px;
            height: 17px;
            accent-color: var(--tool-accent);
        }

        .insurance-wg-info,
        .insurance-wg-summary {
            display: grid;
            gap: 4px;
            margin-top: 12px;
            padding: 11px 13px;
            border-radius: 11px;
            background: #eef8f7;
            color: var(--tool-ink);
            font-size: 0.76rem;
            line-height: 1.4;
        }

        .insurance-wg-summary {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            background: #ffffff;
            border: 1px solid #b8d8d5;
        }

        .insurance-wg-summary[hidden] {
            display: none;
        }

        .insurance-wg-summary span {
            display: grid;
            gap: 2px;
        }

        .insurance-wg-summary small {
            color: var(--text-muted);
            font-weight: 700;
        }

        @media (max-width: 900px) {
            .insurance-device-grid {
                grid-template-columns: 1fr;
            }

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

        .insurance-limit-note {
            grid-column: 1 / -1;
            background: #fff7ed;
            border: 1px solid #fed7aa;
            border-radius: 10px;
            color: #c2410c;
            font-size: 0.75rem;
            font-weight: 700;
            padding: 10px 14px;
        }

        .insurance-card .features li {
            text-align: left;
        }

        .insurance-card .card-content-group-title,
        .insurance-card .card-info-group-title {
            margin-bottom: 7px;
            color: var(--text-primary);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.045em;
            text-align: left;
            text-transform: uppercase;
        }

        .insurance-card .card-info-group {
            margin-top: 12px;
            padding: 10px 11px;
            border: 1px solid #dbe4ee;
            border-radius: 9px;
            background: #f7f9fc;
        }

        .insurance-card .card-info-list {
            display: grid;
            gap: 5px;
        }

        .insurance-card .card-info-item {
            position: relative;
            padding-left: 15px;
            color: var(--text-secondary);
            font-size: 0.72rem;
            line-height: 1.35;
            text-align: left;
        }

        .insurance-card .card-info-item::before {
            content: "i";
            position: absolute;
            left: 0;
            top: 0;
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 900;
        }

        .insurance-filter-bar {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px;
            margin-top: 16px;
            padding-top: 14px;
            border-top: 1px solid var(--border-color);
        }

        .insurance-provider-filters,
        .insurance-theft-filters {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }

        .insurance-theft-filters {
            justify-content: center;
        }

        @media (max-width: 900px) {
            .insurance-theft-filters {
                width: 100%;
                justify-content: flex-start;
            }

            .insurance-theft-filters .insurance-filter-btn {
                flex: 1 1 auto;
                justify-content: center;
            }
        }

        .insurance-filter-btn {
            display: inline-flex;
            align-items: center;
            gap: 7px;
            border: 1px solid var(--border-color);
            border-radius: 999px;
            background: #ffffff;
            color: var(--text-muted);
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 850;
            padding: 8px 11px;
            transition: all 0.18s ease;
        }

        .insurance-filter-btn.active {
            background: var(--o2-brand-blue);
            border-color: var(--o2-brand-blue);
            color: #ffffff;
        }

        .insurance-dot {
            width: 9px;
            height: 9px;
            border-radius: 999px;
            display: inline-block;
        }

        .insurance-dot-o2 { background: var(--o2-cyan); }
        .insurance-dot-wg { background: #6366f1; }
        .insurance-dot-assona { background: #f97316; }
        .insurance-dot-schutzgarant { background: #eab308; }

        .insurance-theft-toggle {
            display: inline-flex;
            align-items: center;
            gap: 9px;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.82rem;
            font-weight: 850;
            user-select: none;
        }

        .insurance-theft-toggle input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .insurance-switch {
            width: 42px;
            height: 24px;
            border-radius: 999px;
            background: #cbd5e1;
            padding: 3px;
            transition: background 0.18s ease;
        }

        .insurance-switch::before {
            content: "";
            display: block;
            width: 18px;
            height: 18px;
            border-radius: 999px;
            background: #ffffff;
            box-shadow: 0 2px 5px rgba(0, 17, 44, 0.25);
            transition: transform 0.18s ease;
        }

        .insurance-theft-toggle input:checked + .insurance-switch {
            background: #16a34a;
        }

        .insurance-theft-toggle input:checked + .insurance-switch::before {
            transform: translateX(18px);
        }

        #insurance-grid {
            grid-template-columns: repeat(auto-fit, minmax(220px, 280px));
            justify-content: start;
            align-items: stretch;
        }

        .insurance-card,
        .insurance-card .card-body {
            min-width: 0;
        }

        .insurance-card .card-body {
            align-items: stretch;
        }

        .insurance-card .section-value,
        .insurance-card .section-sub,
        .insurance-card .price-text,
        .insurance-card .ap-text,
        .insurance-card .features li {
            overflow-wrap: anywhere;
            hyphens: auto;
        }

        .insurance-card .insurance-device-value {
            color: var(--text-muted);
            font-weight: 750;
        }

        .insurance-card .features {
            flex: 1;
        }

        .insurance-filtered {
            display: none !important;
        }

        .card-bottom-info {
            width: calc(100% - 24px);
            box-sizing: border-box;
            min-height: 58px;
            margin: 8px 12px 12px;
            padding-top: 8px;
            border-top: 1px dashed var(--border-color);
        }

        .card-code-info {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
        }

        .card-code-info .ap-text {
            margin-bottom: 0;
            min-height: auto;
        }

        .card-code-info .badge-button {
            margin-bottom: 0;
        }

        .card-code-info .provision-text {
            height: auto;
        }

        .card-advisor-help {
            display: flex;
            flex-direction: column;
            gap: 4px;
            min-height: 40px;
            width: 100%;
        }

        .advisor-help-code {
            min-height: 18px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: #52708a;
            font-size: var(--fs-provi);
            font-weight: 750;
            line-height: 1.3;
            text-align: center;
        }

        .advisor-help-code .copy-code-btn {
            color: #6e8aa0;
        }

        .card-provi-info {
            margin-top: 6px;
            padding-top: 6px;
            border-top: 1px dotted #dbe4ee;
        }

        .card-provi-info .provision-text {
            height: auto;
        }

        .card-provi-info .badge-button {
            margin-bottom: 0;
        }

        /* Provisionscode-Block (Badge + RV-Nr.) – immer am Kachelboden, nur Händler */
        .card-provision {
            width: 100%;
            margin-top: 12px;
            padding-top: 10px;
            border-top: 1px dashed var(--border-color);
        }

        .badge-button {
            background-color: var(--o2-brand-blue);
            color: white;
            border: none;
            border-radius: 20px;
            padding: 6px 12px;
            font-size: var(--fs-badge);
            font-weight: bold;
            width: 100%;
            height: 32px;
            text-align: center;
            margin-bottom: 6px;
            transition: all 0.2s ease;
        }

        .badge-button.highlight-provi {
            border: 1px solid rgba(0, 176, 240, 0.6) !important;
            animation: soft-glow 2s infinite ease-in-out;
        }

        @keyframes soft-glow {
            0% { box-shadow: 0 0 3px rgba(0, 176, 240, 0.3); }
            50% { box-shadow: 0 0 14px rgba(0, 176, 240, 0.85); }
            100% { box-shadow: 0 0 3px rgba(0, 176, 240, 0.3); }
        }

        .provision-text {
            font-size: var(--fs-provi);
            color: #94a3b8;
            font-weight: 500;
            height: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
        }

        /* Copy-Button neben RV-Nr. und Händler-Codes */
        .copy-code-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            padding: 2px;
            border: none;
            background: transparent;
            color: #94a3b8;
            cursor: pointer;
            border-radius: 4px;
            vertical-align: middle;
            line-height: 0;
        }

        .copy-code-btn:hover {
            color: #0066cc;
            background: rgba(0, 102, 204, 0.08);
        }

        .copy-code-btn.copied {
            color: #16a34a;
        }

        .copy-code-btn.copied::after {
            content: '✓';
            font-size: 10px;
            margin-left: 2px;
            line-height: 1;
        }

        @media print {
            .copy-code-btn {
                display: none !important;
            }
        }

        .restore-tray {
            display: none;
            align-items: center;
            flex-wrap: wrap;
            gap: 8px;
            background: var(--surface);
            padding: 10px 15px;
            border-radius: 12px;
            margin-top: 15px;
            width: 100%;
            border: 1px solid var(--border-color);
            box-shadow: 0 1px 3px rgba(0, 17, 44, 0.05);
            z-index: 10;
        }

        .restore-tray-title {
            font-size: 0.8rem;
            color: var(--text-muted);
            margin-right: 5px;
            font-weight: bold;
        }

        .restore-tag {
            background: var(--surface-alt);
            border: 1px solid var(--border-color);
            color: var(--o2-brand-blue);
            border-radius: 20px;
            padding: 4px 12px;
            font-size: 0.75rem;
            font-weight: bold;
            cursor: pointer;
            transition: all 0.2s;
        }

        .restore-tag:hover {
            background: var(--o2-brand-blue);
            color: white;
            border-color: var(--o2-brand-blue);
        }

        .restore-all-btn {
            background: var(--o2-cyan);
            border: none;
            color: white;
            border-radius: 20px;
            padding: 5px 12px;
            font-size: 0.75rem;
            font-weight: bold;
            cursor: pointer;
            margin-left: auto;
        }

        .cart-title {
            border-bottom: 1px solid #d2d8de;
            padding-bottom: 10px;
            margin-bottom: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--o2-dark-blue);
            gap: 12px;
        }

        .cart-title strong {
            display: block;
            font-size: 1.35rem;
            font-weight: 850;
            letter-spacing: 0;
            line-height: 1.15;
        }

        .cart-kicker {
            display: block;
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 850;
            letter-spacing: 0.7px;
            margin-bottom: 3px;
            text-transform: uppercase;
        }

        .cart-items {
            flex-grow: 1;
            min-height: 0;
            overflow-y: visible;
            margin-bottom: 15px;
            padding-right: 4px;
            scrollbar-width: thin;
            scrollbar-color: var(--o2-cyan) #edf4fb;
        }

        .cart-items::-webkit-scrollbar {
            width: 10px;
        }

        .cart-items::-webkit-scrollbar-track {
            background: #edf4fb;
            border-radius: 999px;
        }

        .cart-items::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, var(--o2-cyan), var(--o2-brand-blue));
            border: 2px solid #edf4fb;
            border-radius: 999px;
        }

        .cart-items::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #00c0ff, var(--o2-brand-blue-deep));
        }

        .empty-cart-msg {
            color: #5c6c7d;
            font-size: 0.85rem;
            text-align: center;
            padding: 30px 10px;
            line-height: 1.4;
        }

        .app-toast {
            position: fixed;
            left: 50%;
            bottom: 28px;
            transform: translateX(-50%) translateY(12px);
            background: #1f2937;
            color: #fff;
            padding: 12px 20px;
            border-radius: 8px;
            font-size: 0.9rem;
            font-weight: 600;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
            z-index: 9999;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.2s ease, transform 0.2s ease;
            text-align: center;
            max-width: 90vw;
        }

        .app-toast.visible {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .sim-limit-notice {
            display: none;
            margin-bottom: 10px;
            border: 1px solid #f59e0b;
            border-radius: 8px;
            background: #fff7ed;
            color: #9a3412;
            font-size: 0.8rem;
            font-weight: 700;
            line-height: 1.35;
            padding: 9px 10px;
            text-align: left;
        }

        .sim-limit-notice.visible {
            display: block;
        }

        .cart-item {
            background: #ffffff;
            border-radius: 8px;
            padding: 12px;
            margin-bottom: 10px;
            border: 1px solid #d9e3ef;
            border-left: 4px solid var(--o2-brand-blue);
            box-shadow: 0 2px 8px rgba(0, 25, 165, 0.06);
        }

        .cart-item-header {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 10px;
            margin-bottom: 6px;
        }

        .cart-item-title-block {
            display: grid;
            grid-template-columns: auto 1fr;
            align-items: start;
            gap: 8px;
            min-width: 0;
        }

        .cart-item-position {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            border-radius: 7px;
            background: var(--o2-brand-blue);
            color: white;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
        }

        .cart-item-title {
            font-weight: 900;
            font-size: 1rem;
            color: #00112c;
            text-align: left;
            line-height: 1.18;
            min-width: 0;
        }

        .cart-item-quantity-label {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 28px;
            height: 22px;
            margin-right: 6px;
            border-radius: 999px;
            border: 1px solid rgba(0, 25, 165, 0.22);
            background: var(--o2-cyan-soft);
            color: var(--o2-brand-blue);
            font-size: 0.78rem;
            font-weight: 900;
            line-height: 1;
        }

        .cart-item-actions {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 4px;
            margin-left: 8px;
            flex-shrink: 0;
        }

        .cart-qty-btn {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            border: 1px solid #b7c4d3;
            background: white;
            color: var(--o2-brand-blue);
            font-size: 0.95rem;
            font-weight: 800;
            line-height: 1;
            cursor: pointer;
        }

        .cart-qty-btn:hover:not(:disabled) {
            border-color: var(--o2-brand-blue);
            background: #e1f5fe;
        }

        .cart-qty-btn:disabled {
            opacity: 0.4;
            cursor: not-allowed;
        }

        .cart-qty-count {
            min-width: 18px;
            color: var(--o2-dark-blue);
            font-size: 0.82rem;
            font-weight: 800;
            text-align: center;
        }

        .cart-item-remove {
            background: transparent;
            border: none;
            color: #ff5252;
            font-size: 1.2rem;
            font-weight: bold;
            cursor: pointer;
            padding: 0 4px;
            line-height: 1;
        }

        .cart-item-subtitle {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            font-size: 0.72rem;
            color: var(--text-muted);
            text-align: left;
            margin-bottom: 9px;
            padding-left: 32px;
            font-weight: 750;
        }

        .cart-item-type {
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            color: var(--o2-brand-blue);
            font-size: 0.62rem;
            font-weight: 850;
            padding: 2px 7px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .cart-price-table {
            background: #f8fafc;
            border: 1px solid #dbe4ee;
            border-radius: 8px;
            padding: 6px;
            margin-bottom: 8px;
        }

        .cart-item-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 10px;
            font-size: 0.78rem;
            line-height: 1.25;
            color: var(--text-secondary);
            padding: 5px 6px;
            border-radius: 6px;
        }

        .cart-item-row span {
            min-width: 0;
            line-height: 1.25;
        }

        .cart-item-row strong {
            text-align: right;
            color: #00112c;
            font-size: 0.82rem;
            font-weight: 850;
            white-space: nowrap;
        }

        .cart-price-table .cart-item-row:not(.addon-row):not(:last-child) {
            background: #eef7ff;
            color: var(--o2-brand-blue);
            font-weight: 850;
        }

        .cart-price-table .cart-item-row:not(.addon-row):not(:last-child) span {
            font-weight: 900;
        }

        .cart-price-table .cart-item-row:not(.addon-row):not(:last-child) strong {
            color: var(--o2-brand-blue);
            font-size: 0.96rem;
            font-weight: 950;
        }

        .cart-price-editable {
            cursor: text;
            border-radius: 6px;
            padding: 3px 5px;
            margin: -3px -5px;
            transition: background 140ms ease, box-shadow 140ms ease, color 140ms ease;
        }

        .cart-price-editable:hover,
        .cart-price-editable:focus-visible {
            outline: none;
            background: #dff6ff;
            box-shadow: 0 0 0 2px rgba(0, 169, 224, 0.18);
        }

        .cart-price-editable.is-editing {
            background: #ffffff;
            box-shadow: 0 0 0 2px rgba(0, 169, 224, 0.24);
        }

        .cart-discount-editor {
            display: inline-flex;
            align-items: center;
            justify-content: flex-end;
            gap: 3px;
            min-width: 0;
            color: var(--o2-brand-blue);
            font-size: 0.82rem;
            font-weight: 950;
        }

        .cart-discount-editor-prefix {
            color: #dc2626;
            font-size: 0.9rem;
            font-weight: 950;
        }

        .cart-discount-editor-suffix {
            color: var(--text-muted);
            font-size: 0.76rem;
            font-weight: 900;
        }

        .cart-discount-input {
            width: 64px;
            min-width: 0;
            border: 1px solid #71c8ea;
            border-radius: 6px;
            background: #f5fcff;
            color: var(--o2-brand-blue);
            font: inherit;
            font-size: 0.84rem;
            line-height: 1.25;
            padding: 4px 5px;
            text-align: right;
            outline: none;
        }

        .cart-discount-input:focus {
            border-color: var(--o2-brand-blue);
            box-shadow: 0 0 0 2px rgba(0, 169, 224, 0.18);
            background: #ffffff;
        }

        .cart-item-row.addon-row {
            background: #ffffff;
            border: 1px solid #dbeafe;
            color: #075985;
        }

        .cart-item-row.addon-row span {
            font-weight: 800;
        }

        .cart-item-row.addon-row span::before {
            content: "Option";
            display: inline-flex;
            align-items: center;
            margin-right: 6px;
            padding: 1px 6px;
            border-radius: 999px;
            background: var(--o2-cyan-soft);
            color: var(--o2-brand-blue);
            font-size: 0.6rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .cart-item-row.addon-row strong {
            color: #0369a1;
        }

        .cart-price-table .cart-item-row:last-child {
            color: var(--text-muted);
            font-size: 0.74rem;
        }

        .cart-price-table .cart-item-row:last-child span {
            font-weight: 800;
        }

        .cart-price-table .cart-item-row:last-child strong {
            color: #334155;
            font-size: 0.78rem;
        }

        .cart-item-footer-info {
            margin-top: 6px;
            border-top: 1px dotted #cbd5e1;
            padding-top: 6px;
            font-size: 0.62rem;
            color: #94a3b8;
            font-weight: 800;
            text-align: right;
            letter-spacing: 0.3px;
        }

        .cart-provi-chip {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            padding: 3px 8px;
            border-radius: 999px;
            border: 1px solid currentColor;
            background: #f8fafc;
            font-size: 0.68rem;
            font-weight: 900;
            line-height: 1;
            letter-spacing: 0.2px;
        }

        .cart-provi-positive {
            color: #15803d !important;
            background: #ecfdf3;
        }

        .cart-provi-negative {
            color: #dc2626 !important;
            background: #fff1f2;
        }

        .cart-provi-neutral {
            color: #64748b !important;
            background: #f8fafc;
        }

        .cart-provi-sign {
            font-size: 0.82rem;
            line-height: 1;
        }

        .cart-provi-code {
            font-variant-numeric: tabular-nums;
        }

        .cart-provi-qty {
            color: inherit;
            opacity: 0.82;
        }

        .router-selector-container {
            width: 100%;
            margin: 10px 0 12px;
            padding: 10px;
            border: 1px solid #cfe1f5;
            border-radius: 10px;
            background: linear-gradient(180deg, #ffffff 0%, #f4f9fd 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7), 0 2px 8px rgba(0, 25, 165, 0.06);
        }

        .router-selector-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
            margin-bottom: 8px;
        }

        .router-selector-head span {
            color: var(--o2-brand-blue);
            font-size: 0.68rem;
            font-weight: 950;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .router-selector-head strong {
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 850;
        }

        .router-select-wrap {
            position: relative;
            margin-bottom: 8px;
        }

        .router-select-wrap::after {
            content: "";
            position: absolute;
            right: 12px;
            top: 50%;
            width: 8px;
            height: 8px;
            border-right: 2px solid var(--o2-brand-blue);
            border-bottom: 2px solid var(--o2-brand-blue);
            transform: translateY(-65%) rotate(45deg);
            pointer-events: none;
        }

        .router-select {
            width: 100%;
            appearance: none;
            border: 1px solid #b9d4ef;
            border-radius: 8px;
            background: #ffffff;
            color: #00112c;
            cursor: pointer;
            font-size: 0.78rem;
            font-weight: 850;
            line-height: 1.25;
            padding: 9px 34px 9px 10px;
            box-shadow: 0 1px 3px rgba(0, 17, 44, 0.08);
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

        .router-select:hover {
            border-color: var(--o2-cyan);
            background: #f8fcff;
        }

        .router-select:focus {
            outline: none;
            border-color: var(--o2-brand-blue);
            box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.18);
        }

        .cart-router-preview,
        .router-preview {
            display: none;
            align-items: center;
            gap: 9px;
            margin-top: 8px;
            border: 1px solid #dbe4ee;
            border-radius: 8px;
            background: #ffffff;
            padding: 7px 8px;
            text-align: left;
            position: relative;
        }

        .cart-router-preview {
            display: flex;
        }

        .cart-product-preview {
            display: flex;
            align-items: center;
            gap: 10px;
            min-height: 76px;
            margin: 8px 0;
            border: 1px solid #dbe4ee;
            border-radius: 8px;
            background: #f8fbff;
            padding: 8px 10px;
            color: var(--o2-brand-blue);
            font-size: 0.74rem;
            font-weight: 850;
        }

        .cart-product-preview img {
            width: 72px;
            height: 72px;
            object-fit: contain;
            flex: 0 0 auto;
        }

        .cart-product-preview.is-sim img {
            width: 62px;
            height: 62px;
        }

/* Provider-neutral application shell. Provider CI remains scoped to tariff cards and badges. */
.header-tool-btn.active,
.print-tab-btn.active,
.tab-btn.active:not(.telekom-tab-btn) {
    background: var(--tool-primary) !important;
    border-color: var(--tool-primary) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(23, 58, 94, 0.22) !important;
}

.print-tab-btn,
.tab-btn:not(.telekom-tab-btn) {
    color: var(--tool-primary);
}

.print-tab-btn:hover,
.tab-btn:not(.telekom-tab-btn):hover {
    border-color: var(--tool-accent);
    background: var(--tool-accent-soft);
    color: var(--tool-primary-dark);
}

.sidebar-cart,
.hardware-form-container,
.hardware-cart-panel,
.insurance-input-panel {
    border-top-color: var(--tool-primary);
}

.sidebar-cart {
    color: var(--tool-ink);
}

.sub-section-title:not(.telekom-section-title):not(.ayyildiz-section-title),
.hardware-form-head h3,
.hardware-mode-note strong,
.hardware-preset-head strong {
    color: var(--tool-primary);
}

.sub-section-title:not(.telekom-section-title):not(.ayyildiz-section-title),
.freie-ware-note {
    border-left-color: var(--tool-accent);
}

.hardware-brand-filter-btn {
    color: var(--tool-primary);
}

.hardware-brand-filter-btn:hover {
    border-color: var(--tool-accent);
}

.hardware-brand-filter-btn.active {
    border-color: var(--tool-primary);
    background: var(--tool-primary);
    color: #ffffff;
}

.cart-item {
    border-left-color: var(--tool-primary);
    box-shadow: 0 2px 8px rgba(23, 58, 94, 0.07);
}

.cart-wg-discount-info {
    display: grid;
    gap: 5px;
    margin-bottom: 10px;
    padding: 11px 12px;
    border: 1px solid #b7e4c7;
    border-radius: 9px;
    background: #f0fdf4;
    color: #14532d;
    font-size: 0.9rem;
    line-height: 1.45;
}

.cart-wg-discount-info strong {
    font-size: 0.82rem;
}

.cart-wg-discount-info small {
    color: #386947;
    font-size: 0.72rem;
}

.cart-item:not(.is-o2):not(.is-telekom) .cart-item-position,
.cart-qty-btn:hover:not(:disabled),
.cart-print-btn,
.cart-clear-btn:hover {
    border-color: var(--tool-primary);
}

.cart-item:not(.is-o2):not(.is-telekom) .cart-item-position,
.cart-print-btn {
    background: var(--tool-primary);
}

.cart-item.is-o2 .cart-item-position,
.cart-item.is-telekom .cart-item-position {
    background: var(--tool-primary);
}

.cart-qty-btn,
.cart-total strong,
.cart-phase-row strong {
    color: var(--tool-primary);
}

.print-position-monthly strong,
.print-total-row strong,
.cart-print-summary strong {
    color: var(--tool-primary);
}

.print-total-block,
.cart-print-summary {
    border-top-color: var(--tool-primary);
}

.cart-print-brand {
    border-bottom-color: var(--tool-primary);
}

/* Neutraler Angebotsdruck: keine Netzbetreiber-Schriftzüge oben rechts */
.cart-print-brand-logos {
    display: none !important;
}

@media print {
    body.print-cart-mode .cart-print-brand,
    body.print-cart-mode .print-total-block,
    body.print-cart-mode .cart-print-summary {
        border-color: var(--tool-primary) !important;
    }

    body.print-cart-mode .print-position-monthly strong,
    body.print-cart-mode .print-total-row strong,
    body.print-cart-mode .cart-print-summary strong {
        color: var(--tool-primary) !important;
    }

    body.print-cart-mode .print-position-unlimited {
        color: var(--tool-primary) !important;
    }
}

/* ============================================================
   MOBILE 2026: eigenständige, ruhige Smartphone-Oberfläche
   ============================================================ */

.mobile-command-center {
    display: none;
}

body[data-layout="smartphone"] {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    padding: 8px 8px calc(88px + env(safe-area-inset-bottom, 0px));
    background: #f2f6fb;
}

body[data-layout="smartphone"] header {
    display: block;
    width: 100%;
    margin: 0 0 10px;
}

body[data-layout="smartphone"] .header-top-row,
body[data-layout="smartphone"] .tab-container-nested {
    display: none !important;
}

body[data-layout="smartphone"] .mobile-command-center {
    position: relative;
    z-index: 120;
    display: grid;
    gap: 8px;
    width: 100%;
    padding: 11px;
    border: 1px solid #d9e4ef;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.96);
    box-shadow: 0 8px 24px rgba(0, 17, 44, 0.10);
}

.mobile-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mobile-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    color: #00112c;
}

.mobile-brand-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex: 0 0 38px;
    border-radius: 12px;
    background: var(--o2-brand-blue);
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 950;
    letter-spacing: -1px;
}

.mobile-brand strong,
.mobile-brand small {
    display: block;
}

.mobile-brand strong {
    font-size: 1rem;
    line-height: 1.05;
}

.mobile-brand small {
    margin-top: 3px;
    color: #64748b;
    font-size: 0.68rem;
    font-weight: 700;
}

.mobile-mode-btn {
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #b7c8da;
    border-radius: 999px;
    background: #eef5ff;
    color: var(--o2-brand-blue);
    font-size: 0.76rem;
    font-weight: 900;
}

.mobile-mode-btn.is-customer {
    border-color: #93c5fd;
    background: #dbeafe;
}

.mobile-section-picker {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    min-height: 48px;
    padding: 5px 8px 5px 13px;
    border-radius: 13px;
    background: #00112c;
    color: #ffffff;
}

.mobile-section-picker > span {
    font-size: 0.66rem;
    font-weight: 900;
    letter-spacing: 0.8px;
    text-transform: uppercase;
}

body[data-layout="smartphone"] .mobile-section-picker select {
    width: 100%;
    min-width: 0;
    height: 38px;
    padding: 0 10px;
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 9px;
    outline: none;
    background: #ffffff;
    color: #00112c;
    font-size: 16px;
    font-weight: 850;
}

.mobile-quick-actions {
    display: grid;
    grid-template-columns: 0.8fr 1.35fr 1fr;
    gap: 6px;
}

.mobile-quick-actions > button,
.mobile-quick-actions > a,
.mobile-provider-menu > summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-width: 0;
    min-height: 40px;
    padding: 7px 8px;
    border: 1px solid #d5e0eb;
    border-radius: 10px;
    background: #f8fafc;
    color: #17324f;
    font-size: 0.7rem;
    font-weight: 850;
    text-decoration: none;
    white-space: nowrap;
}

.mobile-provider-menu {
    position: relative;
}

.mobile-provider-menu > summary {
    height: 100%;
    cursor: pointer;
    list-style: none;
}

.mobile-provider-menu > summary::-webkit-details-marker {
    display: none;
}

.mobile-provider-popover {
    position: absolute;
    top: calc(100% + 7px);
    right: 0;
    z-index: 150;
    display: grid;
    gap: 7px;
    width: 180px;
    padding: 9px;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    background: #ffffff;
    box-shadow: 0 14px 34px rgba(0,17,44,0.22);
}

.mobile-provider-popover button {
    min-height: 40px;
    border: 1px solid #d7e0ea;
    border-radius: 9px;
    background: #f8fafc;
    color: #475569;
    font-weight: 850;
}

.mobile-provider-popover button.is-active {
    border-color: var(--o2-brand-blue);
    background: var(--o2-cyan-soft);
    color: var(--o2-brand-blue);
}

.mobile-provider-popover button[data-mobile-provider="telekom"].is-active {
    border-color: var(--telekom-magenta);
    background: var(--telekom-magenta-soft);
    color: var(--telekom-magenta);
}

.mobile-provider-popover button[data-mobile-provider="ayyildiz"].is-active {
    border-color: var(--ayyildiz-red);
    background: var(--ayyildiz-red-soft);
    color: var(--ayyildiz-red);
}

body[data-layout="smartphone"] .app-layout,
body[data-layout="smartphone"] .main-content,
body[data-layout="smartphone"] .tab-content,
body[data-layout="smartphone"] .cards-grid,
body[data-layout="smartphone"] .card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

body[data-layout="smartphone"] .sub-section-title {
    margin: 14px 2px 10px;
    padding: 8px 10px;
    border-left-width: 4px;
    border-radius: 0 9px 9px 0;
    background: #ffffff;
    font-size: 0.92rem;
    line-height: 1.25;
}

/* Tarifkarten: Kennzahlen zuerst, Aktionen nebeneinander, weniger Leerraum. */
body[data-layout="smartphone"] .card {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    border-radius: 15px;
    box-shadow: 0 5px 16px rgba(0, 17, 44, 0.09);
}

body[data-layout="smartphone"] .card > .card-header,
body[data-layout="smartphone"] .card > .card-body,
body[data-layout="smartphone"] .card > .card-back,
body[data-layout="smartphone"] .card > .card-bottom-info {
    grid-column: 1 / -1;
}

body[data-layout="smartphone"] .card-header {
    min-height: 64px;
    padding: 9px 42px 9px 12px;
    font-size: 0.92rem;
    line-height: 1.18;
}

body[data-layout="smartphone"] .card-title {
    min-height: 30px;
}

body[data-layout="smartphone"] .card-maximize-btn {
    display: none;
}

body[data-layout="smartphone"] .card-minimize-btn {
    top: 12px;
    right: 10px;
    width: 30px;
    height: 30px;
    font-size: 1rem;
}

body[data-layout="smartphone"] .card-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: center;
    gap: 4px 10px;
    padding: 12px;
    text-align: left;
}

body[data-layout="smartphone"] .card-body > * {
    grid-column: 1 / -1;
    min-width: 0;
}

body[data-layout="smartphone"] .card-body > .section-title {
    grid-column: 1;
    grid-row: 1;
    align-self: end;
    margin: 0;
    text-align: center;
}

body[data-layout="smartphone"] .card-body > .section-value {
    grid-column: 1;
    grid-row: 2;
    height: auto;
    margin: 0;
    font-size: 1.45rem;
    line-height: 1.1;
    text-align: center;
}

body[data-layout="smartphone"] .card-body > .section-sub {
    grid-column: 1;
    grid-row: 3;
    min-height: 28px;
    margin: 0;
    font-size: 0.68rem;
    line-height: 1.2;
}

body[data-layout="smartphone"] .card-body > .speed-block {
    grid-column: 2;
    grid-row: 1 / 4;
    height: auto;
    min-height: 66px;
    margin: 0;
    padding-left: 9px;
    border-left: 1px solid #e2e8f0;
}

body[data-layout="smartphone"] .speed-value-unified {
    font-size: 1.08rem;
}

body[data-layout="smartphone"] .card-body > .divider {
    display: none;
}

body[data-layout="smartphone"] .features {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 12px;
    height: auto;
    min-height: 0;
    margin: 8px 0 3px;
    padding: 8px 0 0;
    border-top: 1px solid #eef2f7;
}

body[data-layout="smartphone"] .features li {
    flex: 1 1 42%;
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.25;
}

body[data-layout="smartphone"] .price-box,
body[data-layout="smartphone"] .dual-price-box {
    height: auto;
    min-height: 48px;
    margin: 6px 0 3px;
    border-radius: 10px;
}

body[data-layout="smartphone"] .price-text {
    font-size: 1.35rem;
}

body[data-layout="smartphone"] .card-body > .ap-text {
    margin: 2px 0 0;
    padding: 5px 7px;
}

body[data-layout="smartphone"] .add-to-cart-btn,
body[data-layout="smartphone"] .compare-card-btn {
    width: auto;
    min-width: 0;
    min-height: 44px;
    margin: 0 4px 8px 10px;
    padding: 8px 6px;
    font-size: 0.72rem;
}

body[data-layout="smartphone"] .compare-card-btn {
    margin: 0 10px 8px 4px;
}

body[data-layout="smartphone"] .card-bottom-info {
    width: auto;
    min-height: 58px;
    box-sizing: border-box;
    margin: 0 10px 10px;
    padding-top: 6px;
}

body[data-layout="smartphone"] .card-code-info {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 5px 8px;
}

body[data-layout="smartphone"] .card-provi-info {
    margin: 0;
    padding: 0;
    border: 0;
}

/* Hardware wird zur gut scannbaren Produktliste. */
body[data-layout="smartphone"] .hardware-form-container,
body[data-layout="smartphone"] .hardware-cart-panel,
body[data-layout="smartphone"] .insurance-input-panel,
body[data-layout="smartphone"] .tool-panel {
    padding: 14px;
    border-radius: 13px;
}

body[data-layout="smartphone"] .hardware-form {
    gap: 13px;
}

body[data-layout="smartphone"] .hardware-preset-panel {
    padding: 10px;
}

body[data-layout="smartphone"] .hardware-preset-grid {
    grid-template-columns: 1fr;
    gap: 8px;
}

body[data-layout="smartphone"] .hardware-preset-card,
body[data-layout="smartphone"] .hardware-preset-card-wide {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    grid-template-rows: repeat(5, auto);
    column-gap: 11px;
    min-height: 116px;
    padding: 10px;
}

body[data-layout="smartphone"] .hardware-preset-card img,
body[data-layout="smartphone"] .hardware-preset-card-wide img,
body[data-layout="smartphone"] .hardware-preset-card .hw-tile-placeholder {
    grid-column: 1;
    grid-row: 1 / 6;
    width: 78px;
    height: 94px;
    margin: 0;
}

body[data-layout="smartphone"] .hardware-preset-card > :not(img):not(.hw-tile-placeholder) {
    grid-column: 2;
    min-width: 0;
}

body[data-layout="smartphone"] .hardware-preset-card strong {
    padding-right: 0;
    font-size: 0.9rem;
}

body[data-layout="smartphone"] .hardware-brand-filter-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
}

/* Vergleich: kompakte Aktionsleiste statt großer zweiter Karte. */
body[data-layout="smartphone"] .compare-tray {
    right: 8px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    left: 8px;
}

body[data-layout="smartphone"] .compare-tray-inner {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 8px 12px;
    padding: 9px 10px;
    border-top-width: 3px;
    border-radius: 13px;
}

body[data-layout="smartphone"] .compare-chip-list {
    display: none;
}

body[data-layout="smartphone"] .compare-tray-title span {
    font-size: 0.56rem;
}

body[data-layout="smartphone"] .compare-tray-title strong {
    font-size: 0.8rem;
}

body[data-layout="smartphone"] .compare-tray-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px;
}

body[data-layout="smartphone"] .compare-tray-actions > * {
    min-height: 40px;
    margin: 0;
    padding: 7px 9px;
    font-size: 0.7rem;
}

body[data-layout="smartphone"] .comparison-header {
    gap: 10px;
    padding: 12px;
}

body[data-layout="smartphone"] .comparison-header h2 {
    font-size: 1.15rem;
}

body[data-layout="smartphone"] .comparison-note {
    padding: 8px 12px;
    font-size: 0.64rem;
}

/* Warenkorb-Sheet und feste Summenleiste auf kleine Displays abstimmen. */
body[data-layout="smartphone"] #mobile-cart-bar {
    left: 8px;
    right: 8px;
    bottom: calc(8px + env(safe-area-inset-bottom, 0px));
    gap: 8px;
    min-height: 56px;
    padding: 9px 13px;
    border-radius: 15px;
}

body[data-layout="smartphone"] .sidebar-cart {
    max-height: 88vh;
    max-height: 88dvh;
    padding: 12px 12px calc(16px + env(safe-area-inset-bottom, 0px));
}

body[data-layout="smartphone"].mobile-cart-open {
    overflow: hidden;
}

body[data-layout="smartphone"] .cart-title {
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 7px 0 10px;
    background: #ffffff;
}

body[data-layout="smartphone"] .tool-shell,
body[data-layout="smartphone"] .tool-two-col,
body[data-layout="smartphone"] .tool-form-grid,
body[data-layout="smartphone"] .tool-form-grid.three {
    gap: 12px;
}

body[data-layout="smartphone"] .tool-bank-shell .tool-panel,
body[data-layout="smartphone"] .tool-hotline-input,
body[data-layout="smartphone"] .tool-receipt-panel,
body[data-layout="smartphone"] .tool-whatsapp-panel,
body[data-layout="smartphone"] .tool-zettel-shell .tool-panel {
    padding: 14px;
}

body[data-layout="smartphone"] .tool-whatsapp-panel textarea {
    min-height: 280px;
}

@media (max-width: 370px) {
    .mobile-brand small {
        display: none;
    }

    .mobile-quick-actions > button,
    .mobile-quick-actions > a,
    .mobile-provider-menu > summary {
        font-size: 0.64rem;
        padding-inline: 5px;
    }

    #mobile-cart-bar .mcb-open {
        font-size: 0.7rem;
    }
}

        .cart-product-preview.is-home img {
            border-radius: 6px;
            object-fit: cover;
            object-position: center 34%;
        }

        .cart-item.is-telekom .cart-item-type {
            border-color: #cbd5e1;
            color: var(--text-secondary);
        }

        .cart-item.is-telekom .telekom-promo-price-row {
            background: var(--tool-accent-soft) !important;
            color: var(--tool-primary) !important;
        }

        .cart-price-unknown {
            color: #64748b;
            font-weight: 750;
        }

        .cart-router-label {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            margin-top: 8px;
            border: 1px solid #dbe4ee;
            border-radius: 8px;
            background: #f8fbff;
            padding: 9px 10px;
            color: #334155;
            font-size: 0.74rem;
        }

        .cart-router-label span {
            color: #64748b;
            font-weight: 750;
        }

        .cart-router-label strong {
            color: #00112c;
            font-size: 0.8rem;
            font-weight: 850;
            text-align: right;
        }

        .router-preview {
            min-height: 70px;
            margin-top: 0;
            border-color: #cfe1f5;
            background: #ffffff;
            box-shadow: 0 1px 5px rgba(0, 25, 165, 0.07);
        }

        .router-preview.is-empty {
            border-style: dashed;
            background: #f8fafc;
            color: var(--text-muted);
        }

        .router-image-frame {
            width: 62px;
            min-width: 62px;
            height: 52px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 8px;
            background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%);
            border: 1px solid #dbeafe;
        }

        .router-image-frame-empty {
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .router-preview-content {
            min-width: 0;
            text-align: left;
        }

        .router-preview-kicker {
            display: block;
            color: var(--text-muted);
            font-size: 0.58rem;
            font-weight: 900;
            letter-spacing: 0.4px;
            line-height: 1.15;
            margin-bottom: 2px;
            text-transform: uppercase;
        }

        @media (min-width: 1101px) {
            .cart-title {
                padding-bottom: 8px;
                margin-bottom: 9px;
            }

            .cart-items {
                margin-bottom: 10px;
            }

            .cart-item {
                padding: 9px 10px;
                margin-bottom: 7px;
            }

            .cart-item-header {
                gap: 8px;
                margin-bottom: 4px;
            }

            .cart-item-position {
                width: 22px;
                height: 22px;
                font-size: 0.64rem;
            }

            .cart-item-title {
                font-size: 0.94rem;
                line-height: 1.16;
            }

            .cart-item-quantity-label {
                min-width: 24px;
                height: 20px;
                margin-right: 4px;
                font-size: 0.72rem;
            }

            .cart-item-subtitle {
                margin-bottom: 6px;
                padding-left: 30px;
                font-size: 0.7rem;
            }

            .cart-price-table {
                padding: 5px;
                margin-bottom: 5px;
            }

            .cart-item-row {
                font-size: 0.78rem;
                padding: 4px 6px;
            }

            .cart-price-table .cart-item-row:not(.addon-row):not(:last-child) strong {
                font-size: 0.9rem;
            }

            .cart-item-row.addon-row span::before {
                font-size: 0.56rem;
                padding: 1px 5px;
            }

            .cart-item-footer-info {
                margin-top: 4px;
                padding-top: 4px;
            }

            .cart-router-preview {
                margin-top: 5px;
                padding: 5px 7px;
            }

            .cart-router-preview img {
                width: 46px;
                max-height: 34px;
            }

            .cart-product-preview {
                min-height: 68px;
                margin: 6px 0;
                padding: 6px 8px;
            }

            .cart-product-preview img {
                width: 62px;
                height: 62px;
            }

            .cart-product-preview.is-sim img {
                width: 54px;
                height: 54px;
            }

            .cart-totals {
                padding: 12px;
            }

            .total-row {
                margin-bottom: 6px;
                font-size: 0.9rem;
            }
        }

        .router-preview.visible {
            display: flex;
        }

        .cart-router-preview img,
        .router-preview img {
            width: 58px;
            max-height: 42px;
            object-fit: contain;
            flex-shrink: 0;
        }

        .router-preview > img {
            width: 62px;
            min-width: 62px;
            height: 52px;
            max-height: 52px;
            padding: 5px;
            border: 1px solid #dbeafe;
            border-radius: 8px;
            background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%);
        }

        .router-preview > div:not(.router-hover-card):not(.router-image-frame):not(.router-preview-content) {
            min-width: 0;
            text-align: left;
        }

        .cart-router-preview span,
        .router-preview span {
            display: block;
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 750;
            line-height: 1.25;
        }

        .router-preview strong {
            display: block;
            color: var(--o2-brand-blue);
            font-size: 0.8rem;
            line-height: 1.2;
            margin-bottom: 3px;
        }

        .router-preview > div:not(.router-hover-card):not(.router-image-frame) > span:last-child,
        .router-preview-content > span:last-child {
            display: inline-flex;
            width: fit-content;
            max-width: 100%;
            padding: 3px 7px;
            border-radius: 999px;
            background: var(--o2-cyan-soft);
            color: var(--o2-brand-blue);
            font-size: 0.62rem;
            font-weight: 850;
            line-height: 1.2;
        }

        .router-hover-card {
            display: none;
            position: fixed;
            left: 12px;
            top: 12px;
            bottom: auto;
            z-index: 1200;
            width: min(380px, calc(100vw - 24px));
            max-height: calc(100vh - 24px);
            overflow-x: hidden;
            overflow-y: auto;
            border: 1px solid #b9d4ef;
            border-radius: 14px;
            background: #ffffff;
            box-shadow: 0 14px 34px rgba(0, 17, 44, 0.22);
            color: #00112c;
            padding: 16px;
        }

        .router-preview:hover .router-hover-card,
        .cart-router-preview:hover .router-hover-card,
        .router-preview:focus-within .router-hover-card,
        .cart-router-preview:focus-within .router-hover-card,
        .router-hover-card.is-positioning {
            display: block;
        }

        .card:has(.router-preview:hover),
        .card:has(.router-preview:focus-within) {
            z-index: 1100;
            overflow: visible;
            transform: none;
        }

        .router-hover-card img {
            display: block;
            width: 100%;
            height: 190px;
            max-height: 190px;
            padding: 8px;
            object-fit: contain;
            margin-bottom: 12px;
            border-radius: 10px;
            background: linear-gradient(180deg, #f8fcff 0%, #eef7ff 100%);
        }

        .router-hover-card strong {
            display: block;
            color: var(--o2-brand-blue);
            font-size: 1rem;
            line-height: 1.2;
            margin-bottom: 10px;
        }

        .router-hover-card ul {
            margin: 0;
            padding-left: 19px;
        }

        .router-hover-card li {
            color: #334155;
            font-size: 0.82rem;
            font-weight: 700;
            line-height: 1.4;
            margin-bottom: 6px;
        }

        @media (max-width: 520px) {
            .router-hover-card {
                width: calc(100vw - 20px);
                max-height: calc(100vh - 20px);
                padding: 13px;
            }

            .router-hover-card img {
                height: 155px;
                max-height: 155px;
            }
        }

        .cart-print-compact {
            display: none;
        }

        .cart-print-section-title {
            color: #00112c;
            font-size: 0.7rem;
            font-weight: 900;
            letter-spacing: 0;
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        .print-position-list {
            display: flex;
            flex-direction: column;
            gap: 8px;
            color: #00112c;
        }

        .print-position-row {
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid #e2e8f0;
            padding: 6px 2px;
        }

        .print-position-row:last-child {
            border-bottom: none;
        }

        .print-position-icon {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            min-width: 34px;
        }

        .cart-my-handy-duration-choice {
            display: inline-flex;
            align-items: center;
            padding: 2px;
            border: 1px solid #9ccff0;
            border-radius: 999px;
            background: #eef8ff;
            cursor: pointer;
        }

        .cart-my-handy-duration-option {
            min-height: 28px;
            padding: 4px 10px;
            border: 0;
            border-radius: 999px;
            background: transparent;
            color: var(--o2-brand-blue);
            cursor: pointer;
            font-size: 0.68rem;
            font-weight: 800;
        }

        .cart-my-handy-duration-option.is-alternate:hover {
            background: #dff6ff;
        }

        .cart-my-handy-duration-option.is-active {
            background: var(--o2-brand-blue);
            color: #ffffff;
            cursor: pointer;
            opacity: 1;
        }

        .print-position-icon img {
            width: 32px;
            height: 32px;
            object-fit: contain;
        }

        .print-position-product {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 34px;
            min-width: 34px;
        }

        .print-position-product img {
            width: 100%;
            height: 34px;
            object-fit: contain;
        }

        .print-position-product.is-home img {
            border-radius: 4px;
            object-fit: cover;
            object-position: center 34%;
        }

        .print-position-main {
            flex: 1;
            min-width: 0;
        }

        .print-position-name-line {
            display: flex;
            align-items: baseline;
            gap: 6px;
            flex-wrap: wrap;
        }

        .print-position-name {
            color: #00112c;
            font-size: 0.74rem;
        }

        .print-position-qty {
            color: #64748b;
            font-size: 0.62rem;
            font-weight: 700;
        }

        .print-position-detail-line {
            color: #64748b;
            font-size: 0.6rem;
            line-height: 1.35;
            margin-top: 2px;
        }

        .print-list-head {
            display: flex;
            align-items: baseline;
            justify-content: center;
            gap: 10px;
        }

        .print-head-label {
            flex: 1;
        }

        .print-head-col {
            width: 76px;
            min-width: 76px;
            color: #64748b;
            font-size: 0.58rem;
            font-weight: 850;
            letter-spacing: 0.03em;
            text-align: right;
            text-transform: uppercase;
        }

        .print-position-monthly,
        .print-position-onetime-cell {
            width: 76px;
            min-width: 76px;
            flex-shrink: 0;
            text-align: right;
        }

        .print-position-monthly strong,
        .print-position-onetime-cell strong {
            display: block;
            color: var(--o2-brand-blue);
            font-size: 0.72rem;
            line-height: 1.25;
        }

        .print-position-price-period + .print-position-price-period {
            margin-top: 4px;
        }

        .print-position-price-period-label {
            display: block;
            color: #334155;
            font-size: 0.58rem;
            font-weight: 850;
            line-height: 1.2;
        }

        .print-position-onetime-cell strong {
            color: #00112c;
        }

        .print-position-monthly strong.is-empty {
            color: #94a3b8;
            font-weight: 400;
        }

        .print-position-monthly strong.is-free,
        .print-position-onetime-cell strong.is-free,
        .print-position-price-sub.is-free {
            color: #15803d;
        }

        .print-position-price-sub {
            display: block;
            color: #64748b;
            font-size: 0.56rem;
            font-weight: 700;
            line-height: 1.25;
        }

        .print-position-discount {
            display: block;
            margin-top: 4px;
            color: #15803d;
            font-size: 0.53rem;
            font-weight: 900;
            line-height: 1.2;
        }

        .print-total-block {
            margin-top: 10px;
            border-top: 2px solid var(--o2-brand-blue);
            padding-top: 6px;
        }

        .print-phase-total-list[hidden] {
            display: none !important;
        }

        .print-total-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 2px 0;
        }

        .print-total-row[hidden] {
            display: none !important;
        }

        .print-total-row span {
            color: #475569;
            font-size: 0.66rem;
            font-weight: 700;
        }

        .print-total-row strong {
            color: var(--o2-brand-blue);
            font-size: 0.74rem;
        }

        .print-total-row strong.has-periods {
            display: grid;
            gap: 2px;
            text-align: right;
            line-height: 1.25;
        }

        .print-total-row strong.has-periods > span {
            color: inherit;
            font-size: inherit;
            font-weight: inherit;
        }

        .print-total-row strong.has-periods > span.is-saving { color: #07854f; }
        .print-total-row strong.has-periods > span.is-more { color: #a45a00; }
        .print-total-row strong.has-periods > span.is-same { color: #34566f; }

        .print-timeline {
            display: flex;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            overflow: hidden;
        }

        .print-timeline-segment {
            padding: 7px 8px;
            text-align: center;
            background: #f4f7fa;
        }

        .print-timeline-segment:not(:last-child) {
            border-right: 1px solid #cbd5e1;
        }

        .print-timeline-segment:first-child {
            background: #e6f1fb;
        }

        .print-timeline-range {
            display: block;
            font-size: 0.64rem;
            font-weight: 900;
            color: var(--o2-brand-blue);
        }

        .print-timeline-price {
            display: block;
            font-size: 0.66rem;
            color: #00112c;
            margin-top: 1px;
        }

        .print-timeline-price-alt {
            font-size: 0.6rem;
            color: #64748b;
            font-weight: 400;
        }

        .print-timeline-note {
            display: block;
            font-size: 0.56rem;
            color: #64748b;
            margin-top: 1px;
        }

        .cart-print-cost-overview {
            margin-top: 18px;
        }

        .cart-totals {
            background: linear-gradient(180deg, #f8fafc 0%, #eef4f9 100%);
            border-radius: 8px;
            padding: 15px;
            border: 1px solid #d7e2ee;
            border-top: 3px solid var(--o2-brand-blue);
            color: var(--o2-dark-blue);
            flex-shrink: 0;
        }

        .total-row {
            display: flex;
            justify-content: space-between;
            gap: 10px;
            margin-bottom: 8px;
            font-size: 0.95rem;
            font-weight: 500;
        }

        .total-row[hidden] {
            display: none;
        }

        .total-row strong {
            color: #00112c;
            text-align: right;
        }

        .total-row.onetime-row {
            border-top: 1px solid #cbd5e1;
            padding-top: 8px;
            margin-top: 5px;
            margin-bottom: 0;
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 850;
            letter-spacing: 0.25px;
            text-transform: uppercase;
        }

        .provi-sum-code-box {
            margin-top: 12px;
            padding-top: 8px;
            border-top: 1px dotted #cbd5e1;
            font-size: 0.72rem;
            color: #778899;
            text-align: center;
            font-weight: bold;
            letter-spacing: 0.5px;
        }

        .provi-sum-code-box .cart-provi-chip {
            font-size: 0.78rem;
            padding: 5px 11px;
        }

        .clear-cart-btn {
            background: transparent;
            color: #ff5252;
            border: 1px solid #ff5252;
            border-radius: 15px;
            padding: 4px 10px;
            font-size: 0.75rem;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.2s;
        }

        .clear-cart-btn:hover {
            background: #ff5252;
            color: white;
        }

        .cart-action-row {
            display: grid;
            grid-template-columns: 1fr;
            gap: 8px;
            margin-top: 10px;
        }

        .cart-action-row .print-cart-action-btn {
            width: 100%;
            justify-content: center;
            background-color: var(--o2-cyan);
            border-color: var(--o2-cyan);
            color: #00112c;
        }

        .cart-action-row .print-cart-action-btn.secondary {
            background-color: #ffffff;
            border-color: var(--o2-brand-blue);
            color: var(--o2-brand-blue);
        }

        .verfuegbarkeit-btn {
            background: var(--surface) !important;
            color: var(--o2-brand-blue) !important;
            border: 1px solid var(--border-color) !important;
            border-radius: 20px;
            font-size: 0.85rem;
            font-weight: bold;
            padding: 8px 16px;
            display: flex;
            align-items: center;
            gap: 6px;
            text-decoration: none;
            transition: all 0.2s;
            box-shadow: 0 1px 3px rgba(0, 17, 44, 0.06);
        }

        .verfuegbarkeit-btn:hover {
            background: var(--o2-cyan-soft) !important;
            border-color: var(--o2-cyan) !important;
            color: var(--o2-brand-blue) !important;
        }

        .header-tools-menu { position: relative; flex: 0 0 auto; }
        .header-tools-menu > summary { min-height: 36px; padding: 7px 12px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--border-color); border-radius: 20px; color: var(--o2-brand-blue); background: var(--surface); box-shadow: 0 1px 3px rgba(0,17,44,.06); font-size: .85rem; font-weight: 850; list-style: none; cursor: pointer; user-select: none; }
        .header-tools-menu > summary::-webkit-details-marker { display: none; }
        .header-tools-menu > summary > span { color: #087da8; }
        .header-tools-menu > summary > i { color: #718397; font-size: 11px; font-style: normal; transition: transform .16s ease; }
        .header-tools-menu[open] > summary { border-color: #79bed7; background: #eef9fd; box-shadow: 0 0 0 3px rgba(0,169,232,.10); }
        .header-tools-menu[open] > summary > i { transform: rotate(180deg); }
        .header-tools-popover { position: absolute; z-index: 1005; top: calc(100% + 8px); right: 0; width: 270px; padding: 7px; display: grid; gap: 4px; border: 1px solid #c9d9e5; border-radius: 14px; background: rgba(255,255,255,.99); box-shadow: 0 18px 45px rgba(8,29,52,.22); }
        .header-tools-popover::before { content: ''; position: absolute; right: 24px; top: -6px; width: 10px; height: 10px; border-left: 1px solid #c9d9e5; border-top: 1px solid #c9d9e5; background: #fff; transform: rotate(45deg); }
        .header-tools-popover :is(button, a) { position: relative; z-index: 1; min-height: 48px; padding: 7px 9px; display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 9px; border: 0; border-radius: 10px; color: #173f63; background: transparent; text-align: left; text-decoration: none; cursor: pointer; }
        .header-tools-popover :is(button, a):hover, .header-tools-popover :is(button, a).active { background: #eef8fd; }
        .header-tools-popover :is(button, a) > span:first-child { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 9px; color: #087da8; background: #e8f7fc; font-size: 14px; font-weight: 950; }
        .header-tools-popover :is(button, a) > span:last-child { min-width: 0; display: grid; gap: 2px; }
        .header-tools-popover :is(button, a) strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
        .header-tools-popover :is(button, a) small { color: #718598; font-size: 9px; }

        body[data-input="touch"],
        body[data-pointer="touch"] {
            touch-action: manipulation;
        }

        body[data-pointer="touch"] .card:hover,
        body[data-input="touch"] .card:hover {
            transform: none;
        }

        body[data-input="touch"] .print-tab-btn,
        body[data-input="touch"] .tab-btn,
        body[data-pointer="touch"] .print-tab-btn,
        body[data-pointer="touch"] .tab-btn {
            min-height: 44px;
            padding: 11px 16px;
        }

        body[data-input="touch"] .add-to-cart-btn,
        body[data-pointer="touch"] .add-to-cart-btn {
            min-height: 44px;
            font-size: 0.85rem;
        }

        body[data-input="touch"] .cart-qty-btn,
        body[data-pointer="touch"] .cart-qty-btn {
            width: 34px;
            height: 34px;
            font-size: 1.1rem;
        }

        body[data-layout="tablet"] {
            justify-content: flex-start;
            padding: 20px 16px;
        }

        body[data-layout="tablet"] header {
            align-items: flex-start;
            gap: 14px;
            margin-bottom: 18px;
        }

        body[data-layout="tablet"] .tab-container-nested,
        body[data-layout="smartphone"] .tab-container-nested {
            width: 100%;
        }

        body[data-layout="tablet"] .tab-row,
        body[data-layout="smartphone"] .tab-row {
            flex-direction: column;
            align-items: stretch;
            gap: 6px;
        }

        body[data-layout="tablet"] .tab-row-label,
        body[data-layout="smartphone"] .tab-row-label {
            text-align: left;
            min-width: auto;
        }

        body[data-layout="tablet"] .tab-navigation,
        body[data-layout="tablet"] .tab-navigation-home,
        body[data-layout="smartphone"] .tab-navigation,
        body[data-layout="smartphone"] .tab-navigation-home {
            max-width: 100%;
            overflow-x: auto;
            overscroll-behavior-x: contain;
            border-radius: 16px;
            scrollbar-width: thin;
        }

        body[data-layout="tablet"] .app-layout,
        body[data-layout="smartphone"] .app-layout {
            flex-direction: column;
        }

        body[data-layout="tablet"] .cards-grid,
        body[data-layout="tablet"] .cards-grid.six-cols,
        body[data-layout="tablet"] .cards-grid.five-cols,
        body[data-layout="tablet"] .cards-grid.three-cols,
        body[data-layout="tablet"] .cards-grid.four-cols {
            grid-template-columns: repeat(3, minmax(180px, 1fr));
            gap: 14px;
        }

        @media (orientation: portrait) {
            body[data-layout="tablet"] .cards-grid,
            body[data-layout="tablet"] .cards-grid.six-cols,
            body[data-layout="tablet"] .cards-grid.five-cols,
            body[data-layout="tablet"] .cards-grid.three-cols,
            body[data-layout="tablet"] .cards-grid.four-cols {
                grid-template-columns: repeat(2, minmax(180px, 1fr));
            }
        }

        body[data-layout="tablet"] .sidebar-cart {
            width: 100%;
            position: static;
            z-index: 50;
            min-height: 0;
            max-height: none;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0, 17, 44, 0.18);
        }

        body[data-layout="smartphone"] {
            justify-content: flex-start;
            padding: 12px 10px;
        }

        body.compare-tray-visible[data-layout="tablet"] {
            padding-bottom: calc(20px + var(--compare-tray-height, 112px));
        }

        body.compare-tray-visible[data-layout="smartphone"] {
            padding-bottom: calc(12px + var(--compare-tray-height, 160px));
        }

        body[data-layout="smartphone"] header {
            flex-direction: column;
            align-items: stretch;
            gap: 12px;
            margin-bottom: 14px;
        }

        body[data-layout="smartphone"] .info-badge {
            width: 100%;
            border-radius: 12px;
            text-align: center;
        }

        body[data-layout="smartphone"] .print-tab-btn {
            width: 100%;
            justify-content: center;
        }

        body[data-layout="smartphone"] .tab-btn {
            padding: 12px 14px;
            font-size: 0.9rem;
        }

        body[data-layout="smartphone"] .cards-grid,
        body[data-layout="smartphone"] .cards-grid.six-cols,
        body[data-layout="smartphone"] .cards-grid.five-cols,
        body[data-layout="smartphone"] .cards-grid.three-cols,
        body[data-layout="smartphone"] .cards-grid.four-cols {
            grid-template-columns: 1fr;
            gap: 14px;
        }

        body[data-layout="smartphone"] .card-header {
            min-height: 82px;
        }

        body[data-layout="smartphone"] .sidebar-cart {
            width: 100%;
            position: static;
            z-index: 60;
            max-height: none;
            padding: 14px;
            border-radius: 14px;
            box-shadow: 0 8px 24px rgba(0, 17, 44, 0.2);
        }

        body[data-layout="smartphone"] .cart-items {
            max-height: none;
            overflow-y: auto;
        }

        /* TARIFVERGLEICH */
        .compare-card-btn {
            width: calc(100% - 24px);
            margin: 0 12px 12px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #f8fafc;
            color: var(--o2-brand-blue);
            cursor: pointer;
            font-size: 0.72rem;
            font-weight: 850;
            letter-spacing: 0;
            padding: 8px 10px;
            transition: all 0.18s ease;
        }

        .compare-card-btn:hover {
            background: #eaf6ff;
            border-color: var(--o2-cyan);
            transform: translateY(-1px);
        }

        .card.compare-selected .compare-card-btn {
            background: #00112c;
            border-color: var(--o2-cyan);
            color: #ffffff;
        }

        .card.compare-selected {
            box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.35), 0 10px 20px rgba(0,0,0,0.2);
        }

        .compare-tray {
            position: fixed;
            z-index: 900;
            right: 16px;
            bottom: 16px;
            left: 16px;
            display: flex;
            justify-content: center;
            pointer-events: none;
        }

        .compare-tray[hidden] {
            display: none !important;
        }

        .compare-tray-inner {
            width: min(100%, 1600px);
            display: grid;
            grid-template-columns: auto minmax(0, 1fr) auto;
            align-items: center;
            gap: 14px;
            padding: 12px 14px;
            border: 1px solid #cbd5e1;
            border-top: 4px solid var(--o2-brand-blue);
            border-radius: 12px;
            background: #ffffff;
            color: var(--o2-dark-blue);
            box-shadow: 0 18px 45px rgba(0, 17, 44, 0.28);
            pointer-events: auto;
        }

        .compare-tray-title span {
            display: block;
            color: var(--text-muted);
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.5px;
            margin-bottom: 3px;
            text-transform: uppercase;
        }

        .compare-tray-title strong {
            color: #00112c;
            font-size: 0.95rem;
            line-height: 1.15;
        }

        .compare-chip-list {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            min-width: 0;
        }

        .compare-chip {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: 220px;
            border: 1px solid #d7e2ee;
            border-radius: 999px;
            background: #f8fafc;
            color: var(--o2-brand-blue);
            cursor: pointer;
            font-size: 0.76rem;
            font-weight: 800;
            padding: 6px 8px 6px 11px;
        }

        .compare-chip span {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .compare-chip strong {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: #e2e8f0;
            color: #475569;
            line-height: 1;
        }

        .compare-tray-actions {
            display: flex;
            align-items: center;
            gap: 8px;
        }

        .compare-tray-btn {
            background: var(--o2-cyan);
            border-color: var(--o2-cyan);
            color: #00112c;
            white-space: nowrap;
        }

        .compare-clear-btn {
            white-space: nowrap;
        }

        .comparison-modal {
            position: fixed;
            inset: 0;
            z-index: 1000;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 24px;
            background: rgba(0, 17, 44, 0.78);
            color: var(--o2-dark-blue);
            box-sizing: border-box;
        }

        .comparison-modal[hidden] {
            display: none !important;
        }

        body.comparison-open {
            overflow: hidden;
        }

        .comparison-dialog {
            width: 100%;
            max-width: 1280px;
            min-width: 0;
            max-height: 92vh;
            max-height: 92dvh;
            display: flex;
            flex-direction: column;
            overflow: hidden;
            border: 1px solid #cbd5e1;
            border-top: 4px solid var(--o2-brand-blue);
            border-radius: 12px;
            background: #ffffff;
            box-shadow: 0 30px 90px rgba(0, 17, 44, 0.42);
            box-sizing: border-box;
        }

        .comparison-header {
            display: flex;
            align-items: flex-start;
            justify-content: space-between;
            gap: 16px;
            padding: 18px 20px 14px;
            border-bottom: 1px solid #dbe4ee;
        }

        .comparison-kicker {
            display: block;
            color: var(--o2-brand-blue);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.7px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        .comparison-header h2 {
            color: #00112c;
            font-size: 1.35rem;
            line-height: 1.15;
            margin: 0;
        }

        .comparison-header-actions {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-end;
            gap: 8px;
        }

        .comparison-print-btn {
            background: var(--o2-cyan);
            border-color: var(--o2-cyan);
            color: #00112c;
        }

        .comparison-print-btn:disabled {
            cursor: not-allowed;
            opacity: 0.55;
        }

        .comparison-empty {
            margin: 14px 20px 0;
            border: 1px solid #cfe4fb;
            border-radius: 8px;
            background: #f0f7ff;
            color: #25405f;
            font-size: 0.86rem;
            font-weight: 750;
            line-height: 1.35;
            padding: 10px 12px;
        }

        .comparison-scroll {
            flex: 1 1 auto;
            min-height: 0;
            min-width: 0;
            overflow: auto;
            padding: 16px 20px 20px;
            -webkit-overflow-scrolling: touch;
        }

        .comparison-scroll[hidden] {
            display: none !important;
        }

        .comparison-table {
            width: 100%;
            min-width: 760px;
            border-collapse: separate;
            border-spacing: 0;
            color: #00112c;
            table-layout: fixed;
        }

        .comparison-table th,
        .comparison-table td {
            border-right: 1px solid #dbe4ee;
            border-bottom: 1px solid #dbe4ee;
            padding: 10px 11px;
            text-align: left;
            vertical-align: top;
        }

        .comparison-table thead th {
            position: sticky;
            top: 0;
            z-index: 2;
            background: #edf3f9;
            color: #00112c;
        }

        .comparison-table thead th:first-child,
        .comparison-table tbody th {
            width: 150px;
            background: #f8fafc;
            color: var(--text-muted);
            font-size: 0.72rem;
            font-weight: 900;
            letter-spacing: 0.15px;
            text-transform: uppercase;
        }

        .comparison-table thead th:first-child {
            border-top-left-radius: 8px;
        }

        .comparison-table thead th:last-child {
            border-top-right-radius: 8px;
        }

        .comparison-table thead th strong {
            display: block;
            color: var(--o2-brand-blue);
            font-size: 0.92rem;
            line-height: 1.18;
            margin: 4px 0 3px;
        }

        .comparison-table thead th span {
            display: block;
            color: #64748b;
            font-size: 0.66rem;
            font-weight: 800;
            line-height: 1.25;
        }

        .comparison-column-label {
            color: #00112c !important;
            font-size: 0.62rem !important;
            letter-spacing: 0.5px;
            text-transform: uppercase;
        }

        .comparison-best-badge {
            display: inline-flex !important;
            width: fit-content;
            margin-top: 6px;
            border-radius: 999px;
            background: #dcfce7;
            color: #166534 !important;
            font-size: 0.58rem !important;
            font-weight: 900 !important;
            padding: 3px 7px;
        }

        .comparison-value strong {
            display: block;
            color: #00112c;
            font-size: 0.95rem;
            line-height: 1.2;
            margin-bottom: 4px;
        }

        .comparison-delta,
        .comparison-subvalue {
            display: inline-flex;
            align-items: center;
            width: fit-content;
            border-radius: 999px;
            font-size: 0.66rem;
            font-weight: 850;
            line-height: 1.2;
            margin: 2px 4px 0 0;
            padding: 3px 7px;
        }

        .comparison-subvalue {
            border-radius: 6px;
            background: #f1f5f9;
            color: #475569;
        }

        .comparison-delta.neutral {
            background: #e2e8f0;
            color: #475569;
        }

        .comparison-delta.price-up,
        .comparison-delta.worse {
            background: #fff7ed;
            color: #9a3412;
        }

        .comparison-delta.price-down,
        .comparison-delta.better {
            background: #dcfce7;
            color: #166534;
        }

        .comparison-feature-list {
            margin: 0;
            padding-left: 16px;
        }

        .comparison-feature-list li {
            color: #334155;
            font-size: 0.74rem;
            font-weight: 700;
            line-height: 1.3;
            margin-bottom: 4px;
        }

        .comparison-action-row td {
            background: #f8fafc;
        }

        .comparison-takeover-btn {
            width: 100%;
            min-height: 34px;
            border: 1px solid var(--comparison-accent, var(--o2-cyan));
            border-radius: 8px;
            background: var(--comparison-accent, var(--o2-cyan));
            color: var(--comparison-on-accent, #00112c);
            cursor: pointer;
            font-size: 0.72rem;
            font-weight: 900;
            padding: 8px 10px;
        }

        .comparison-takeover-btn:hover {
            filter: brightness(0.96);
            transform: translateY(-1px);
        }

        .comparison-note {
            border-top: 1px solid #dbe4ee;
            color: #64748b;
            font-size: 0.68rem;
            font-weight: 700;
            line-height: 1.35;
            padding: 10px 20px 14px;
        }

        .comparison-board {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 14px;
            justify-content: center;
            align-items: stretch;
            width: 100%;
            min-width: 560px;
            max-width: 100%;
            margin: 0 auto;
            box-sizing: border-box;
        }

        .comparison-board[data-compare-count="1"] {
            grid-template-columns: minmax(0, 1fr);
            min-width: 280px;
            max-width: 420px;
        }

        .comparison-board[data-compare-count="3"] {
            grid-template-columns: repeat(3, minmax(0, 1fr));
            min-width: 840px;
        }

        .comparison-board[data-compare-count="4"] {
            grid-template-columns: repeat(4, minmax(0, 1fr));
            min-width: 1120px;
        }

        .comparison-advice-card {
            --comparison-primary: var(--o2-brand-blue);
            --comparison-accent: var(--o2-cyan);
            --comparison-header: var(--o2-cyan);
            --comparison-on-accent: #00112c;
            --comparison-soft: #eefaff;
            --comparison-border: #a9dff1;
            --comparison-shadow: rgba(0, 25, 165, 0.12);
            display: grid;
            grid-template-rows: 92px 1fr;
            min-width: 0;
            width: 100%;
            overflow: hidden;
            border: 1px solid var(--comparison-border);
            border-radius: 16px;
            background: #ffffff;
            box-shadow: 0 8px 20px var(--comparison-shadow);
        }

        .comparison-advice-card.comparison-provider-telekom {
            --comparison-primary: var(--telekom-magenta);
            --comparison-accent: var(--telekom-magenta);
            --comparison-header: var(--telekom-magenta);
            --comparison-on-accent: #ffffff;
            --comparison-soft: var(--telekom-magenta-soft);
            --comparison-border: #e6b5ce;
            --comparison-shadow: rgba(226, 0, 116, 0.14);
        }

        .comparison-advice-card.comparison-provider-ayyildiz {
            --comparison-primary: var(--ayyildiz-red);
            --comparison-accent: var(--ayyildiz-red);
            --comparison-header: var(--ayyildiz-red);
            --comparison-on-accent: #ffffff;
            --comparison-soft: var(--ayyildiz-red-soft);
            --comparison-border: #efb7ba;
            --comparison-shadow: rgba(215, 25, 32, 0.14);
        }

        .comparison-advice-card.comparison-provider-congstar {
            --comparison-primary: var(--congstar-black);
            --comparison-accent: var(--congstar-orange);
            --comparison-header: var(--congstar-black);
            --comparison-on-accent: #ffffff;
            --comparison-soft: var(--congstar-orange-soft);
            --comparison-border: #cfcfcf;
            --comparison-shadow: rgba(41, 41, 41, 0.14);
        }

        .comparison-card-header {
            position: relative;
            min-height: 92px;
            display: flex;
            flex-direction: column;
            justify-content: center;
            gap: 4px;
            padding: 13px 14px;
            background: var(--comparison-header);
            color: #ffffff;
            text-align: center;
        }

        .comparison-card-remove-btn {
            position: absolute;
            top: 8px;
            right: 8px;
            min-height: 26px;
            padding: 4px 8px;
            border: 1px solid rgba(255, 255, 255, 0.72);
            border-radius: 999px;
            background: rgba(255, 255, 255, 0.16);
            color: #ffffff;
            cursor: pointer;
            font: inherit;
            font-size: 0.58rem;
            font-weight: 900;
            line-height: 1;
        }

        .comparison-card-remove-btn:hover,
        .comparison-card-remove-btn:focus-visible {
            background: #ffffff;
            color: var(--comparison-primary);
            outline: none;
        }

        .comparison-card-header span {
            font-size: 0.62rem;
            font-weight: 900;
            letter-spacing: 0.65px;
            text-transform: uppercase;
        }

        .comparison-card-header strong {
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.14;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .comparison-card-header em {
            font-size: 0.7rem;
            font-style: normal;
            font-weight: 750;
            line-height: 1.2;
            opacity: 0.92;
        }

        /* Flexibles Spalten-Layout: Zeilenhöhen über min-height synchron,
           zusätzliche Zeilen (Zubuchoptionen, Router) brechen das Raster nicht. */
        .comparison-card-body {
            display: flex;
            flex-direction: column;
            gap: 11px;
            padding: 14px;
            color: var(--text-dark);
        }

        .comparison-main-metrics {
            min-height: 88px;
        }

        .comparison-price-panel {
            min-height: 100px;
        }

        .comparison-fee-panel {
            min-height: 64px;
        }

        .comparison-highlights {
            min-height: 110px;
        }

        .comparison-card-body .comparison-takeover-btn {
            align-self: end;
            margin-top: auto;
        }

        .comparison-main-metrics {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 8px;
        }

        .comparison-metric,
        .comparison-fee-panel,
        .comparison-technology-line,
        .comparison-router-line {
            border: 1px solid var(--comparison-border);
            border-radius: 8px;
            background: var(--comparison-soft);
            padding: 9px 10px;
            text-align: center;
        }

        .comparison-section {
            min-width: 0;
        }

        .comparison-metric span,
        .comparison-price-panel span,
        .comparison-fee-panel span,
        .comparison-highlights span,
        .comparison-technology-line span,
        .comparison-router-line span {
            display: block;
            color: var(--text-muted);
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.45px;
            margin-bottom: 4px;
            text-transform: uppercase;
        }

        .comparison-metric strong {
            display: block;
            color: var(--comparison-primary);
            font-size: 1.02rem;
            font-weight: 950;
            line-height: 1.08;
            overflow-wrap: anywhere;
        }

        .comparison-metric em,
        .comparison-fee-panel em,
        .comparison-router-line em {
            display: block;
            color: #64748b;
            font-size: 0.64rem;
            font-style: normal;
            font-weight: 750;
            line-height: 1.22;
            margin-top: 4px;
        }

        .comparison-price-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--comparison-accent);
            border-radius: 10px;
            background: #ffffff;
            padding: 10px;
            text-align: center;
        }

        .comparison-price-panel strong {
            display: inline-block;
            color: var(--comparison-primary);
            font-size: 1.55rem;
            font-weight: 950;
            line-height: 1;
        }

        .comparison-price-panel span:not(:first-child) {
            display: inline-block;
            color: #00112c;
            font-size: 0.72rem;
            font-weight: 800;
            margin-left: 4px;
            text-transform: none;
        }

        .comparison-price-panel .comparison-price-followup {
            display: block;
            margin-top: 7px;
            font-size: 1.05rem;
        }

        /* Bestwert-Markierungen im Vergleich */
        .comparison-best-chip {
            display: inline-block;
            margin-top: 5px;
            background: var(--comparison-accent);
            color: var(--comparison-on-accent);
            font-size: 0.56rem;
            font-weight: 900;
            font-style: normal;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            padding: 2px 8px;
            border-radius: 999px;
        }

        .comparison-metric.is-best {
            border-color: var(--comparison-accent);
            background: var(--comparison-soft);
        }

        .comparison-price-panel.is-best {
            border-color: var(--comparison-accent);
            background: #ffffff;
        }

        .comparison-fee-panel strong,
        .comparison-technology-line strong,
        .comparison-router-line strong {
            display: block;
            min-width: 0;
            color: #00112c;
            font-size: 0.9rem;
            font-weight: 900;
            line-height: 1.15;
            overflow-wrap: anywhere;
            word-break: break-word;
        }

        .comparison-highlights {
            overflow: hidden;
            border-top: 1px solid #dbe4ee;
            border-bottom: 1px solid #dbe4ee;
            padding: 10px 0;
        }

        .comparison-highlights ul {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        .comparison-highlights li {
            position: relative;
            color: #334155;
            font-size: 0.74rem;
            font-weight: 750;
            line-height: 1.25;
            margin-bottom: 5px;
            padding-left: 17px;
        }

        .comparison-highlights li::before {
            content: "✓";
            position: absolute;
            left: 0;
            top: 0;
            color: var(--comparison-accent);
            font-weight: 950;
        }

        .comparison-technology-line,
        .comparison-router-line {
            text-align: left;
        }

        .comparison-router-line-spacer {
            border-color: transparent;
            background: transparent;
            pointer-events: none;
        }

        .comparison-advice-card .comparison-takeover-btn {
            align-self: stretch;
        }

        @media (max-width: 900px) {
            .comparison-board,
            .comparison-board[data-compare-count="1"],
            .comparison-board[data-compare-count="2"],
            .comparison-board[data-compare-count="3"],
            .comparison-board[data-compare-count="4"] {
                grid-template-columns: minmax(0, 1fr);
                width: 100%;
                min-width: 0;
            }

            .comparison-advice-card,
            .comparison-board[data-compare-count="1"] .comparison-advice-card,
            .comparison-board[data-compare-count="3"] .comparison-advice-card,
            .comparison-board[data-compare-count="4"] .comparison-advice-card {
                width: 100%;
            }

            .compare-tray-inner {
                display: flex;
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }

            .compare-tray-actions {
                display: grid;
                grid-template-columns: minmax(0, 1fr) auto;
                align-items: stretch;
                justify-content: stretch;
                width: 100%;
            }

            .compare-tray-actions > * {
                min-height: 42px;
                justify-content: center;
            }

            .compare-tray-actions .compare-clear-btn {
                display: inline-flex;
                align-items: center;
                width: auto;
            }

            .comparison-modal {
                padding: 12px;
            }

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

            .comparison-header-actions {
                justify-content: stretch;
            }

            .comparison-header-actions > * {
                flex: 1;
                justify-content: center;
            }
        }

        .tab-row-hardware {
            padding-top: 10px;
            border-top: 1px solid rgba(255, 255, 255, 0.16);
        }

        /* HARDWARE TAB */
        .hardware-layout {
            display: grid;
            grid-template-columns: minmax(0, 1fr);
            gap: 20px;
            align-items: start;
            width: 100%;
        }

        @media (max-width: 1100px) {
            .hardware-layout {
                grid-template-columns: 1fr;
            }
        }

        .hardware-form-container,
        .hardware-cart-panel {
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-top: 4px solid var(--o2-brand-blue);
            border-radius: 12px;
            padding: 22px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            color: var(--text-dark);
        }

        .hardware-form-head {
            margin-bottom: 18px;
            padding-bottom: 12px;
            border-bottom: 1px solid #e2e8f0;
            text-align: left;
        }

        .hardware-form-kicker {
            display: block;
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 900;
            letter-spacing: 0.8px;
            margin-bottom: 3px;
            text-transform: uppercase;
        }

        .hardware-form-head h3 {
            color: var(--o2-brand-blue);
            font-size: 1.15rem;
            font-weight: 850;
            line-height: 1.2;
            margin: 0;
        }

        .hardware-form {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }


        .hardware-mode-note {
            display: flex;
            flex-direction: column;
            gap: 4px;
            padding: 13px 14px;
            border: 1px solid #dbe7f3;
            border-radius: 10px;
            background: #f8fafc;
            color: var(--text-secondary);
        }

        .hardware-mode-note strong {
            color: var(--o2-brand-blue);
            font-size: 0.92rem;
            font-weight: 900;
        }

        .hardware-mode-note span {
            color: var(--text-muted);
            font-size: 0.82rem;
            font-weight: 650;
            line-height: 1.35;
        }

        .freie-ware-note {
            border-left: 4px solid var(--o2-cyan);
        }
        .hardware-preset-panel {
            display: flex;
            flex-direction: column;
            gap: 12px;
            padding: 14px;
            border: 1px solid #dbe7f3;
            border-radius: 12px;
            background: linear-gradient(180deg, #f8fbff 0%, #eef7ff 100%);
            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
        }

        .hardware-preset-head {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
        }

        .hardware-preset-head strong {
            display: block;
            color: var(--o2-brand-blue);
            font-size: 0.98rem;
            font-weight: 900;
        }

        .hardware-brand-filter {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 10px 0 12px;
            border-bottom: 1px solid #dbe7f3;
        }

        .hardware-brand-filter-label {
            flex: 0 0 auto;
            color: var(--text-muted);
            font-size: 0.7rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .hardware-brand-filter-options {
            display: flex;
            flex-wrap: wrap;
            gap: 7px;
            min-width: 0;
        }

        .hardware-catalog-search {
            width: clamp(190px, 22vw, 300px);
            min-height: 36px;
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 0 11px;
            border: 1px solid #cbd9e7;
            border-radius: 9px;
            background: #f8fbfe;
            color: #6b8195;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

        .hardware-catalog-search:focus-within {
            border-color: var(--o2-cyan);
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(0, 170, 230, 0.13);
        }

        .hardware-catalog-search svg {
            width: 17px;
            height: 17px;
            flex: 0 0 auto;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
        }

        .hardware-catalog-search input {
            width: 100%;
            min-width: 0;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--text-primary);
            font: inherit;
            font-size: 0.78rem;
            font-weight: 750;
        }

        .hardware-catalog-sort {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            gap: 7px;
            min-height: 36px;
            padding: 0 8px 0 10px;
            border: 1px solid #cbd9e7;
            border-radius: 9px;
            background: #f8fbfe;
            color: #60778d;
        }

        .hardware-catalog-sort span {
            font-size: 0.65rem;
            font-weight: 900;
            letter-spacing: 0.35px;
            text-transform: uppercase;
        }

        .hardware-catalog-sort select {
            min-width: 140px;
            border: 0;
            outline: 0;
            background: transparent;
            color: var(--o2-brand-blue);
            cursor: pointer;
            font: inherit;
            font-size: 0.73rem;
            font-weight: 850;
        }

        .hardware-catalog-search input::placeholder {
            color: #7890a5;
            opacity: 1;
        }

        .hardware-price-filter {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            gap: 7px;
            min-height: 36px;
            min-width: 224px;
            padding: 0 9px 0 10px;
            border: 1px solid #cbd9e7;
            border-radius: 9px;
            background: #f8fbfe;
            color: #60778d;
            transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

        .hardware-price-filter:focus-within,
        .hardware-price-filter.is-active {
            border-color: var(--o2-cyan);
            background: #ffffff;
            box-shadow: 0 0 0 3px rgba(0, 170, 230, 0.13);
        }

        .hardware-price-filter > span {
            white-space: nowrap;
            font-size: 0.65rem;
            font-weight: 900;
            letter-spacing: 0.35px;
            text-transform: uppercase;
        }

        .hardware-price-filter input {
            width: 72px;
            flex: 0 0 72px;
            height: 28px;
            min-width: 0;
            padding: 0 7px;
            border: 1px solid #cbd9e7;
            border-radius: 7px;
            outline: 0;
            background: #ffffff;
            color: var(--o2-brand-blue);
            font: inherit;
            font-size: 0.73rem;
            font-weight: 850;
            text-align: left;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .hardware-price-filter input:focus {
            border-color: var(--o2-cyan);
            box-shadow: 0 0 0 2px rgba(0, 170, 230, 0.13);
        }

        .hardware-price-filter input::placeholder {
            color: #7890a5;
            opacity: 1;
            font-size: 0.67rem;
            font-weight: 750;
        }

        .hardware-price-filter input[aria-invalid="true"] {
            color: #c13d52;
        }

        .hardware-price-filter b {
            white-space: nowrap;
            color: #60778d;
            font-size: 0.65rem;
            font-weight: 900;
            letter-spacing: 0.25px;
        }

        .hardware-rate-term-choice {
            flex: 0 0 auto;
            display: inline-flex;
            align-items: center;
            gap: 0;
            min-height: 26px;
            padding: 2px;
            border: 1px solid #b7d9ed;
            border-radius: 999px;
            background: #edf8ff;
        }

        .hardware-rate-term-choice .cart-my-handy-duration-option {
            min-width: 46px;
            min-height: 22px;
            padding: 3px 6px;
            font-size: 0.6rem;
            line-height: 1;
            white-space: nowrap;
        }

        .hardware-rate-term-choice .cart-my-handy-duration-option:focus-visible {
            position: relative;
            z-index: 1;
            outline: 2px solid var(--o2-cyan);
            outline-offset: 1px;
        }

        .hardware-brand-filter-btn {
            min-height: 34px;
            border: 1px solid #cbd5e1;
            border-radius: 6px;
            background: #ffffff;
            color: var(--o2-brand-blue);
            cursor: pointer;
            font: inherit;
            font-size: 0.78rem;
            font-weight: 850;
            padding: 7px 12px;
            transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
        }

        .hardware-brand-filter-btn:hover {
            border-color: var(--o2-cyan);
            box-shadow: 0 3px 10px rgba(0, 80, 170, 0.12);
        }

        .hardware-brand-filter-btn:focus-visible {
            outline: 3px solid rgba(0, 170, 230, 0.3);
            outline-offset: 2px;
        }

        .hardware-brand-filter-btn.active {
            border-color: var(--o2-brand-blue);
            background: var(--o2-brand-blue);
            color: #ffffff;
        }

        .hardware-preset-card.hardware-brand-filtered {
            display: none !important;
        }

        .hardware-preset-clear {
            border: 1px solid #cbd5e1;
            border-radius: 999px;
            background: #ffffff;
            color: var(--text-secondary);
            cursor: pointer;
            font-size: 0.76rem;
            font-weight: 850;
            padding: 7px 11px;
            transition: all 0.18s ease;
            white-space: nowrap;
        }

        .hardware-preset-clear:hover {
            border-color: var(--o2-cyan);
            color: var(--o2-brand-blue);
            box-shadow: 0 4px 12px rgba(0, 80, 170, 0.12);
        }

        .hardware-preset-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 10px;
        }

        .hardware-preset-card {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 4px;
            min-height: 104px;
            padding: 13px 14px;
            border: 1px solid #d7e2ef;
            border-radius: 10px;
            background: #ffffff;
            color: var(--text-dark);
            cursor: pointer;
            text-align: left;
            transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
        }

        .hardware-preset-card:hover,
        .hardware-preset-card.flipped {
            border-color: var(--o2-cyan);
            background: #fafdff;
            box-shadow: 0 8px 18px rgba(0, 80, 170, 0.14);
            transform: translateY(-1px);
        }

        /* Warenkorb-Button unten rechts auf Vorder- und Rückseite */
        .hw-tile-cart-btn {
            position: absolute;
            right: 8px;
            bottom: 8px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            border: 1px solid var(--o2-brand-blue);
            background: #ffffff;
            color: var(--o2-brand-blue);
            cursor: pointer;
            display: grid;
            place-items: center;
            box-shadow: 0 2px 8px rgba(0, 25, 165, 0.10);
            transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
            z-index: 3;
        }

        .hw-tile-cart-btn svg {
            width: 18px;
            height: 18px;
            display: block;
        }

        .hw-tile-cart-btn:hover {
            transform: scale(1.08);
            background: var(--o2-cyan-soft);
            border-color: var(--o2-cyan);
            box-shadow: 0 6px 14px rgba(0, 176, 240, 0.22);
        }

        /* Kachel-Rückseite: manuelle Eingabe von Bezeichnung, EK und VK */
        .hw-tile-back {
            display: none;
        }

        .hardware-preset-card.flipped > :not(.hw-tile-back) {
            display: none;
        }

        .hardware-preset-card.flipped .hw-tile-back {
            display: flex;
            flex-direction: column;
            gap: 8px;
            width: 100%;
            padding-bottom: 40px;
        }

        .hw-tile-back-title {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .hw-tile-back-field {
            display: flex;
            flex-direction: column;
            gap: 3px;
            color: var(--text-muted);
            font-size: 0.66rem;
            font-weight: 800;
            letter-spacing: 0.4px;
            text-transform: uppercase;
        }

        .hw-tile-back-field input,
        .hw-tile-back-field select {
            width: 100%;
            padding: 7px 9px;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #ffffff;
            color: var(--text-dark);
            font-size: 0.85rem;
            font-weight: 700;
        }

        .hw-tile-back-field input:focus,
        .hw-tile-back-field select:focus {
            outline: none;
            border-color: var(--o2-cyan);
            box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.15);
        }

        /* Ratenübersicht auf der My-Handy-Kachelvorderseite */
        .hw-tile-rates {
            display: flex;
            flex-direction: column;
            gap: 6px;
            width: 100%;
            margin-top: 8px;
        }

        .hw-color-picker {
            position: absolute;
            top: 16px;
            right: 13px;
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            justify-content: center;
            gap: 7px;
            width: 104px;
            margin: 0;
            padding: 0 0 20px;
            border: 0;
            z-index: 2;
        }

        .hw-color-picker legend {
            width: 100%;
            margin-bottom: 2px;
            color: var(--text-muted);
            font-size: 0.6rem;
            font-weight: 900;
            letter-spacing: 0.5px;
            text-align: center;
            text-transform: uppercase;
        }

        .hw-color-option {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 24px;
            height: 24px;
            padding: 3px;
            border: 0;
            border-radius: 50%;
            background: transparent;
            cursor: pointer;
        }

        .hw-color-option input {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .hw-color-swatch {
            width: 18px;
            height: 18px;
            flex: 0 0 18px;
            border: 1px solid rgba(0, 17, 44, 0.22);
            border-radius: 50%;
            background: var(--hw-color);
            box-shadow: inset 0 0 0 2px #ffffff;
        }

        .hardware-preset-card .hw-color-option em {
            display: none;
            margin: 0;
            padding: 0;
            background: none;
            color: #40566d;
            font-size: 0.62rem;
            font-style: normal;
            font-weight: 800;
        }

        .hw-color-option:has(input:checked) {
            background: transparent;
            box-shadow: none;
        }

        .hw-color-option:has(input:checked) .hw-color-swatch {
            box-shadow: inset 0 0 0 2px #ffffff, 0 0 0 2px #ffffff, 0 0 0 4px var(--o2-cyan);
        }

        .hardware-preset-card .hw-color-option:has(input:checked) em {
            position: absolute;
            top: 48px;
            right: 0;
            left: 0;
            display: block;
            color: var(--o2-brand-blue);
            line-height: 1.1;
            text-align: center;
            white-space: nowrap;
        }

        .hardware-preset-card.has-color-picker > img.hw-tile-photo {
            width: calc(100% - 108px);
            height: 130px;
            align-self: flex-start;
        }

        .hw-tile-rate-row {
            display: grid;
            grid-template-columns: 1fr;
            align-items: stretch;
            gap: 6px;
            padding: 9px 11px;
            border: 1px solid #d7deea;
            border-radius: 8px;
            background: #f8fafc;
        }

        /* Platz für den Warenkorb-Button unterhalb der Laufzeit-Optionen */
        .hardware-preset-card:has(.hw-tile-rates) {
            padding-bottom: 52px;
        }

        /* Laufzeit-Zeilen als direkt wählbare Option */
        .hw-tile-rate-option {
            cursor: pointer;
            transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
        }

        .hw-tile-rate-option:hover {
            border-color: var(--o2-cyan);
        }

        .hw-tile-rate-option.selected {
            border-color: var(--o2-cyan);
            background: #eefaff;
            box-shadow: 0 0 0 1px var(--o2-cyan);
        }

        .hw-tile-rate-option.selected .hw-tile-rate-term {
            border-color: var(--o2-brand-blue);
            background: var(--o2-brand-blue);
            color: #ffffff;
        }

        .hw-tile-rate-term {
            justify-self: start;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid #d7deea;
            background: #ffffff;
            color: var(--text-secondary);
            cursor: pointer;
            font-family: inherit;
            font-size: 0.62rem;
            font-weight: 700;
            letter-spacing: 0.4px;
            text-transform: uppercase;
            white-space: nowrap;
        }

        .hw-tile-rate-term:hover,
        .hw-tile-rate-term:focus-visible {
            border-color: var(--o2-cyan);
            outline: none;
            box-shadow: 0 0 0 3px rgba(0, 170, 230, 0.16);
        }

        .hw-tile-rate-price {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            justify-content: flex-end;
            gap: 1px;
            color: #00112c;
            white-space: nowrap;
        }

        .hw-tile-rate-values {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(170px, 1fr);
            align-items: end;
            gap: 14px;
            width: 100%;
        }

        .hw-tile-rate-upfront {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 1px;
            color: #38526c;
            white-space: nowrap;
            justify-self: start;
        }

        .hw-tile-rate-price {
            justify-self: stretch;
            box-sizing: border-box;
            width: 100%;
            min-width: 0;
            padding-left: 16px;
            border-left: 1px solid #d7e6ef;
            text-align: right;
        }

        .hw-tile-rate-price small,
        .hw-tile-rate-price strong {
            display: inline-block;
            width: auto;
            margin: 0;
            text-align: right;
        }

        .hw-tile-rate-upfront small,
        .hw-tile-rate-price small {
            color: #667d92;
            font-size: 0.58rem;
            font-weight: 850;
            letter-spacing: 0.04em;
            text-transform: uppercase;
        }

        .hw-tile-rate-upfront strong {
            font-size: 0.78rem;
            font-weight: 850;
        }

        .hw-tile-rate-price strong {
            color: var(--o2-brand-blue);
            font-size: 1.08rem;
            font-weight: 950;
            line-height: 1.05;
        }

        .hw-tile-rate-sub {
            display: block;
            padding-top: 5px;
            border-top: 1px dashed #c9d9e6;
            color: var(--text-muted);
            font-size: 0.64rem;
            font-weight: 700;
            text-align: right;
            white-space: nowrap;
        }

        .hw-tile-rate-option:not(.selected) {
            display: none;
        }

        .my-handy-global-duration {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 14px;
            padding: 10px 12px;
            border: 1px solid #b9dff5;
            border-radius: 11px;
            background: #ffffff;
        }

        .my-handy-global-duration > div:first-child {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }

        .my-handy-global-duration > div:first-child > strong {
            color: var(--o2-brand-blue);
            font-size: 0.84rem;
        }

        .hw-tile-back-field[hidden] {
            display: none !important;
        }

        .hw-rate-consistency-warning {
            display: grid;
            gap: 3px;
            width: 100%;
            margin-top: 2px;
            padding: 8px 9px;
            border: 1px solid #f59e0b;
            border-radius: 8px;
            background: #fffbeb;
            color: #7c2d12;
            font-size: 0.68rem;
            line-height: 1.35;
            text-align: left;
        }

        .hw-rate-consistency-warning strong {
            color: #9a3412;
            font-size: 0.72rem;
        }

        .hardware-preset-card.has-rate-warning {
            border-color: #f59e0b;
        }

        .hw-tile-back-total {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 8px;
            padding: 6px 9px;
            border-radius: 8px;
            background: #eef7ff;
            color: var(--text-secondary);
            font-size: 0.72rem;
            font-weight: 700;
        }

        .hw-tile-back-total strong {
            font-size: 0.88rem;
            font-weight: 850;
            color: #00112c;
        }

        /* Eingebettete Zusatz-Tools (Überweisungshilfe, Hotline-Guide, Zettel) */
        .tool-frame {
            display: none;
        }

        .tool-shell {
            display: grid;
            grid-template-columns: 1fr;
            gap: 16px;
            width: 100%;
        }

        .tool-bank-shell { max-width: 760px; }
        .tool-hotline-shell { max-width: 1120px; }
        .tool-zettel-shell { max-width: 940px; }

        .tool-panel {
            background: #ffffff;
            border: 1px solid #cbd5e1;
            border-top: 4px solid var(--o2-brand-blue);
            border-radius: 12px;
            padding: 22px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
            color: var(--o2-dark-blue);
        }

        .tool-panel-head { margin-bottom: 14px; }

        .tool-panel-head h3 {
            color: #00112c;
            font-size: 1.2rem;
            font-weight: 900;
            line-height: 1.18;
            margin: 2px 0 0;
        }

        .tool-muted {
            color: var(--text-muted);
            font-size: 0.9rem;
            font-weight: 600;
            line-height: 1.45;
            margin: -4px 0 18px;
        }

        .tool-form-grid {
            display: grid;
            grid-template-columns: repeat(2, minmax(180px, 1fr));
            gap: 14px;
            margin-bottom: 16px;
        }

        .tool-form-grid.three {
            grid-template-columns: repeat(3, minmax(170px, 1fr));
        }

        .tool-panel .form-group {
            display: flex;
            flex-direction: column;
            gap: 7px;
        }

        .tool-panel label {
            color: var(--text-secondary);
            font-size: 0.78rem;
            font-weight: 900;
        }

        .tool-panel input,
        .tool-panel select,
        .tool-panel textarea {
            width: 100%;
            border: 1px solid #cbd5e1;
            border-radius: 8px;
            background: #ffffff;
            color: #00112c;
            font-size: 0.95rem;
            font-weight: 700;
            padding: 11px 12px;
            outline: none;
            transition: border-color 0.18s ease, box-shadow 0.18s ease;
        }

        .tool-panel input:focus,
        .tool-panel select:focus,
        .tool-panel textarea:focus {
            border-color: var(--o2-cyan);
            box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.15);
        }

        .tool-primary-btn {
            justify-content: center;
            width: fit-content;
            min-width: 180px;
            background: var(--o2-brand-blue);
            border-color: var(--o2-brand-blue);
            color: #ffffff;
        }

        .tool-primary-btn:hover {
            background: var(--o2-brand-blue-deep);
            border-color: var(--o2-brand-blue-deep);
            color: #ffffff;
        }

        .tool-action-row {
            display: flex;
            gap: 10px;
            flex-wrap: wrap;
            align-items: center;
            margin-top: 16px;
        }

        .tool-detail-list {
            display: grid;
            gap: 10px;
        }

        .tool-detail-row {
            display: grid;
            grid-template-columns: 160px minmax(0, 1fr);
            gap: 12px;
            align-items: center;
            padding: 11px 12px;
            border: 1px solid #e2e8f0;
            border-radius: 8px;
            background: #f8fafc;
        }

        .tool-detail-row span {
            color: var(--text-muted);
            font-size: 0.78rem;
            font-weight: 900;
        }

        .tool-detail-row strong {
            color: #00112c;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 0.95rem;
            font-weight: 900;
            word-break: break-word;
        }

        .tool-two-col {
            display: grid;
            grid-template-columns: minmax(280px, 420px) minmax(320px, 1fr);
            gap: 16px;
            align-items: start;
        }

        .tool-receipt-panel {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .tool-receipt-panel .tool-panel-head { width: 100%; }

        .tool-receipt {
            width: 80mm;
            max-width: 100%;
            background: #ffffff;
            color: #000000;
            padding: 10mm 5mm;
            border: 1px solid #e2e8f0;
            border-radius: 4px;
            box-shadow: 0 10px 18px rgba(15, 23, 42, 0.12);
            font-family: 'Courier New', Consolas, monospace;
            line-height: 1.28;
        }

        .receipt-title,
        .receipt-sub,
        .receipt-separator,
        .receipt-footer { text-align: center; }

        .receipt-title {
            font-size: 1.35rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .receipt-sub {
            font-size: 0.95rem;
            font-weight: 900;
            margin-top: 2px;
        }

        .receipt-separator {
            font-size: 0.78rem;
            margin: 6px 0 16px;
        }

        .receipt-step {
            border-bottom: 1px dashed #000;
            padding: 11px 0;
        }

        .receipt-step.no-border { border-bottom: none; }

        .receipt-step span,
        .receipt-step small {
            display: block;
            font-size: 0.78rem;
            font-style: italic;
            font-weight: 700;
        }

        .receipt-step strong {
            display: block;
            margin-top: 6px;
            font-size: 1.28rem;
            font-weight: 900;
            letter-spacing: 1px;
            overflow-wrap: anywhere;
        }

        .receipt-step em {
            display: inline-block;
            margin-top: 6px;
            padding: 6px 9px;
            border: 2px solid #000000;
            background: #f2f2f2;
            color: #000000;
            font-style: normal;
            font-size: 1rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .receipt-step .receipt-answer-large {
            font-size: 1.35rem;
            padding-inline: 18px;
        }

        .receipt-footer {
            margin-top: 22px;
            padding-top: 12px;
            border-top: 1px solid #000;
            font-size: 0.72rem;
        }

        .receipt-footer span,
        .receipt-footer strong { display: block; }

        .tool-whatsapp-panel {
            min-height: 100%;
            display: flex;
            flex-direction: column;
        }

        .tool-whatsapp-panel textarea {
            min-height: 420px;
            flex: 1;
            margin-top: 12px;
            background: #f0fdf4;
            border-color: #bbf7d0;
            color: #0f172a;
            font-family: 'Courier New', Consolas, monospace;
            font-size: 0.82rem;
            line-height: 1.45;
            resize: vertical;
        }

        .zettel-list {
            display: grid;
            justify-content: start;
            gap: 10px;
        }

        .zettel {
            position: relative;
            width: 58mm;
            max-width: 100%;
            padding: 12px 34px 12px 12px;
            border: 1px solid #dbe0ea;
            border-radius: 8px;
            background: #ffffff;
            box-shadow: 0 2px 8px rgba(0, 17, 44, 0.08);
            color: #00112c;
            font-family: 'Courier New', Consolas, monospace;
            text-align: center;
        }

        .zettel-service {
            color: var(--o2-brand-blue);
            font-size: 1rem;
            font-weight: 900;
            margin-bottom: 6px;
        }

        .zettel-value {
            color: #00112c;
            font-size: 0.88rem;
            font-weight: 800;
            margin-top: 4px;
            overflow-wrap: anywhere;
        }

        .zettel-remove {
            position: absolute;
            top: 6px;
            right: 6px;
            width: 22px;
            height: 22px;
            border: none;
            border-radius: 999px;
            background: #f1f5f9;
            color: #64748b;
            cursor: pointer;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1;
        }

        .zettel-remove:hover {
            background: #ffebee;
            color: #d32f2f;
        }

        .zettel-note {
            width: 58mm;
            max-width: 100%;
            padding: 8px;
            border: 1px dashed #94a3b8;
            border-radius: 8px;
            background: #f8fafc;
            color: #334155;
            font-size: 0.78rem;
            font-weight: 800;
            text-align: center;
        }

        @media (max-width: 900px) {
            .tool-form-grid,
            .tool-form-grid.three,
            .tool-two-col {
                grid-template-columns: 1fr;
            }

            .tool-primary-btn {
                width: 100%;
            }
        }

        /* Tool-spezifische Oberflächen: Originalcharakter behalten, o2 nur als Akzent */
        #tab-tool-bank,
        #tab-tool-hotline,
        #tab-tool-zettel {
            --tool-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
        }

        .tool-bank-shell {
            margin-inline: auto;
        }

        .tool-bank-shell .tool-panel {
            border-top: 0;
            border-radius: 14px;
            padding: 28px;
            box-shadow: var(--tool-shadow);
        }

        .tool-bank-shell .tool-panel:first-child {
            text-align: center;
        }

        .tool-bank-shell .tool-panel-head h3 {
            color: var(--o2-brand-blue);
            font-size: 1.55rem;
        }

        .tool-bank-shell .tool-muted {
            max-width: 560px;
            margin: 0 auto 22px;
            color: #5f6f86;
        }

        .tool-bank-shell .tool-form-grid {
            text-align: left;
        }

        .tool-bank-shell .tool-primary-btn {
            margin-inline: auto;
            min-width: 260px;
            padding-block: 12px;
            border-radius: 10px;
        }

        .tool-result-panel {
            text-align: left;
        }

        .tool-detail-row {
            grid-template-columns: 150px minmax(0, 1fr);
            background: #f7f9fc;
            line-height: 1.35;
        }

        .tool-detail-row strong {
            background: #eef2f7;
            border-radius: 7px;
            padding: 8px 10px;
        }

        .tool-hotline-input {
            border-top: 0;
            border-radius: 14px;
            box-shadow: var(--tool-shadow);
        }

        .tool-hotline-input .tool-panel-head h3,
        .tool-whatsapp-panel .tool-panel-head h3,
        .tool-receipt-panel .tool-panel-head h3 {
            color: #0f172a;
        }

        .tool-hotline-shell .tool-form-grid {
            margin-bottom: 0;
        }

        .tool-receipt-panel,
        .tool-whatsapp-panel {
            border-top: 0;
            border-radius: 14px;
            box-shadow: var(--tool-shadow);
        }

        .tool-receipt-panel {
            background: #ffffff;
        }

        .tool-receipt {
            position: relative;
            border: none;
            border-radius: 2px;
            box-shadow: 0 12px 22px rgba(0, 0, 0, 0.14);
            min-height: 120mm;
        }

        .tool-receipt::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: -5px;
            left: 0;
            height: 10px;
            background:
                linear-gradient(-45deg, #ffffff 5px, transparent 0),
                linear-gradient(45deg, #ffffff 5px, transparent 0);
            background-size: 10px 10px;
        }

        .receipt-step span {
            white-space: pre-line;
        }

        .tool-whatsapp-panel {
            background: #ffffff;
        }

        .tool-whatsapp-panel textarea {
            min-height: 500px;
            border-radius: 10px;
            background: #f0fdf4;
            border: 1px solid #bbf7d0;
            box-shadow: inset 0 1px 4px rgba(15, 23, 42, 0.06);
        }

        .tool-zettel-shell {
            grid-template-columns: minmax(320px, 440px) minmax(360px, 520px);
            align-items: start;
            justify-content: start;
            max-width: 1000px;
        }

        .tool-zettel-shell .tool-panel {
            border-top: 0;
            border-radius: 14px;
            box-shadow: var(--tool-shadow);
        }

        .tool-zettel-shell .tool-panel-head h3 {
            color: #0f172a;
        }

        .tool-zettel-shell .tool-form-grid.three {
            grid-template-columns: 1fr;
            gap: 12px;
            margin-bottom: 14px;
        }

        .tool-zettel-shell .tool-panel input,
        .tool-zettel-shell .tool-panel select {
            min-height: 50px;
            font-size: 0.95rem;
        }

        .tool-zettel-shell .tool-action-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            margin-top: 18px;
        }

        .tool-zettel-shell .tool-action-row .print-tab-btn {
            width: 100%;
            min-width: 0;
            justify-content: center;
            border-radius: 999px;
        }

        .zettel-list {
            justify-content: center;
            min-height: 180px;
            padding: 10px;
            border-radius: 12px;
            background: #f8fafc;
            border: 1px dashed #cbd5e1;
        }

        .zettel {
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(15, 23, 42, 0.12);
        }

        .zettel-note {
            background: rgba(15, 23, 42, 0.04);
        }

        .tool-zettel-shell .zettel-list {
            position: relative;
            display: block;
            width: 80mm;
            max-width: 100%;
            min-height: 120mm;
            margin: 0 auto;
            padding: 10mm 5mm;
            border: none;
            border-radius: 2px;
            background: #ffffff;
            color: #000000;
            box-shadow: 0 12px 22px rgba(0, 0, 0, 0.14);
            font-family: 'Courier New', Consolas, monospace;
            line-height: 1.28;
        }

        .tool-zettel-shell .zettel-list.tool-receipt {
            width: 80mm;
            min-height: 120mm;
            padding: 10mm 5mm;
        }

        .tool-zettel-shell .zettel-list::after {
            content: "";
            position: absolute;
            right: 0;
            bottom: -5px;
            left: 0;
            height: 10px;
            background:
                linear-gradient(-45deg, #ffffff 5px, transparent 0),
                linear-gradient(45deg, #ffffff 5px, transparent 0);
            background-size: 10px 10px;
        }

        .zettel-receipt-head {
            text-align: center;
            margin-bottom: 0;
        }

        .zettel-receipt-title {
            font-size: 1.28rem;
            font-weight: 900;
            text-transform: uppercase;
        }

        .zettel-receipt-sub {
            font-size: 0.86rem;
            font-weight: 900;
            margin-top: 2px;
        }

        .zettel-receipt-separator {
            font-size: 0.78rem;
            margin-top: 6px;
        }

        .zettel-empty {
            padding: 28px 0;
            border-top: 1px dashed #000000;
            border-bottom: 1px dashed #000000;
            color: #000000;
            font-size: 0.82rem;
            font-weight: 700;
            text-align: center;
        }

        .tool-zettel-shell .zettel {
            position: relative;
            width: 100%;
            max-width: none;
            padding: 12px 0;
            border-radius: 0;
            background: transparent;
            box-shadow: none;
            color: #000000;
            text-align: left;
        }

        .tool-zettel-shell .zettel-service {
            display: block;
            color: #000000;
            font-size: 0.82rem;
            font-style: italic;
            font-weight: 700;
            text-align: left;
            text-transform: uppercase;
            margin: 0 28px 8px 0;
            overflow-wrap: anywhere;
        }

        .zettel-line {
            margin-top: 8px;
        }

        .zettel-line span {
            display: block;
            font-size: 0.78rem;
            font-style: italic;
            font-weight: 700;
        }

        .zettel-line strong {
            display: inline-block;
            margin-top: 3px;
            padding: 6px 10px;
            border: 2px solid #000000;
            background: #f2f2f2;
            color: #000000;
            font-size: 1rem;
            font-weight: 900;
            line-height: 1.18;
            overflow-wrap: anywhere;
            max-width: 100%;
        }

        .tool-zettel-shell .zettel-remove {
            top: 8px;
            right: 0;
            background: #ffffff;
            border: 1px solid #000000;
            color: #000000;
            font-family: 'Courier New', Consolas, monospace;
        }

        .tool-zettel-shell .zettel-note {
            width: 100%;
            max-width: none;
            margin-top: 22px;
            padding: 12px 0 0;
            border: none;
            border-top: 1px solid #000000;
            border-radius: 0;
            background: transparent;
            color: #000000;
            font-size: 0.75rem;
            font-weight: 900;
            text-align: center;
            text-transform: uppercase;
        }

        @media (max-width: 1000px) {
            .tool-zettel-shell {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 560px) {
            .tool-zettel-shell .tool-action-row {
                grid-template-columns: 1fr;
            }

            #mode-toggle-btn {
                margin-left: 0;
            }
        }

        .hw-tile-placeholder {
            width: 100%;
            height: 98px;
            color: #94a3b8;
            align-self: center;
            margin-bottom: 4px;
        }

        .hardware-preset-brand {
            color: var(--text-muted);
            font-size: 0.68rem;
            font-weight: 900;
            letter-spacing: 0.6px;
            text-transform: uppercase;
        }

        .hardware-preset-card strong {
            color: var(--o2-brand-blue);
            font-size: 0.98rem;
            font-weight: 900;
            line-height: 1.15;
            padding-right: 22px;
        }

        .hardware-preset-card span:not(.hardware-preset-brand) {
            color: var(--text-secondary);
            font-size: 0.8rem;
            font-weight: 800;
        }

        .hardware-preset-card img {
            width: 100%;
            height: 98px;
            object-fit: contain;
            align-self: center;
            margin-bottom: 4px;
        }

        .hardware-preset-card-wide {
            grid-column: 1 / -1;
            display: grid;
            grid-template-columns: 126px minmax(0, 1fr);
            grid-template-rows: auto auto auto auto;
            column-gap: 14px;
            min-height: 136px;
        }

        .hardware-preset-card-wide img {
            grid-row: 1 / 5;
            height: 112px;
            margin: 0;
        }

        .hardware-preset-card-wide .hardware-preset-brand,
        .hardware-preset-card-wide strong,
        .hardware-preset-card-wide span:not(.hardware-preset-brand),
        .hardware-preset-card-wide em {
            grid-column: 2;
        }

        .hardware-preset-card em {
            margin-top: auto;
            color: #00112c;
            font-size: 0.78rem;
            font-style: normal;
            font-weight: 900;
            padding: 5px 8px;
            border-radius: 999px;
            background: #dff7ff;
        }

        .service-tile-icon {
            border-radius: 18px;
            object-fit: contain;
        }

        .form-row-2 {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 20px;
        }

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

        .freie-ware-row {
            grid-template-columns: repeat(4, minmax(0, 1fr));
        }

        body.kunde-mode-active .freie-ware-row {
            grid-template-columns: repeat(3, minmax(0, 1fr));
        }

        .form-row-2.hw-duration-hidden {
            grid-template-columns: 1fr;
        }

        /* Zahlungsart als Segment-Schalter */
        .hw-payment-type-toggle {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 4px;
            padding: 4px;
            border-radius: 10px;
            background: #eef2f7;
            border: 1px solid #e2e8f0;
        }

        .hw-pay-option {
            position: relative;
            cursor: pointer;
        }

        .hw-pay-option input[type="radio"] {
            position: absolute;
            opacity: 0;
            pointer-events: none;
        }

        .hw-pay-option span {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 0.88rem;
            font-weight: 800;
            color: var(--text-muted);
            transition: all 0.18s ease;
        }

        .hw-pay-option:hover span {
            color: var(--o2-brand-blue);
        }

        .hw-pay-option input:checked + span {
            background: #ffffff;
            color: var(--o2-brand-blue);
            box-shadow: 0 2px 8px rgba(0, 17, 44, 0.12);
        }

        .hw-submit-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 13px 16px;
            border: 1px solid var(--o2-cyan);
            border-radius: 10px;
            background: var(--o2-cyan);
            color: #00112c;
            cursor: pointer;
            font-size: 0.98rem;
            font-weight: 850;
            transition: all 0.18s ease;
            box-shadow: 0 4px 14px rgba(0, 176, 240, 0.3);
        }

        .hw-submit-btn:hover {
            background: #00c0ff;
            border-color: #00c0ff;
            transform: translateY(-1px);
            box-shadow: 0 8px 18px rgba(0, 176, 240, 0.45);
        }

        @media (max-width: 600px) {
            .form-row-2,
            .my-handy-row,
            .freie-ware-row,
            body.kunde-mode-active .freie-ware-row,
            .hardware-preset-grid {
                grid-template-columns: 1fr;
            }

            .hardware-brand-filter {
                align-items: flex-start;
                flex-direction: column;
                gap: 7px;
            }

            .hardware-brand-filter-options {
                width: 100%;
            }

            .hardware-brand-filter-btn {
                flex: 1 1 auto;
            }

            .hardware-preset-card-wide {
                display: flex;
                grid-column: auto;
            }

            .hardware-preset-card-wide img {
                grid-row: auto;
                height: 120px;
            }
        }
        
        .form-group {
            display: flex;
            flex-direction: column;
            gap: 8px;
            text-align: left;
        }

        .form-group[hidden] {
            display: none;
        }
        
        .form-group label {
            font-size: 0.8rem;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            font-weight: bold;
            color: var(--text-muted);
        }
        
        .form-group input, .form-group select {
            width: 100%;
            background: #f8fafc;
            border: 2px solid #e2e8f0;
            padding: 12px 16px;
            border-radius: 8px;
            font-size: 1rem;
            font-weight: bold;
            color: var(--o2-dark-blue);
            outline: none;
            transition: all 0.2s;
        }
        
        .form-group input:focus, .form-group select:focus {
            background: #ffffff;
            border-color: var(--o2-cyan);
            box-shadow: 0 0 0 3px rgba(0, 176, 240, 0.15);
        }
        
        .form-summary {
            background: linear-gradient(135deg, var(--o2-cyan), #6ee7ff);
            color: #00112c;
            padding: 16px 24px;
            border-radius: 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 1.1rem;
            box-shadow: 0 8px 18px rgba(0, 35, 77, 0.15);
            margin-top: 10px;
            border: none;
        }
        
        .form-summary span {
            font-weight: 800;
        }

        .form-summary strong {
            font-size: 1.6rem;
            font-weight: 900;
            color: #00112c;
        }

        .hardware-cart-list {
            display: grid;
            grid-template-columns: 1fr;
            gap: 12px;
            max-width: 100%;
        }
        
        .hw-cart-thumb {
            width: 56px;
            height: 56px;
            object-fit: contain;
            flex: 0 0 auto;
            border-radius: 8px;
            background: #f8fafc;
            border: 1px solid #e2e8f0;
        }

        .hw-cart-item {
            background: #ffffff;
            border-radius: 12px;
            padding: 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            color: var(--text-dark);
            border: 1px solid #cbd5e1;
            border-left: 5px solid var(--o2-brand-blue);
            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
        }
        
        .hw-cart-item-details strong {
            display: block;
            font-size: 1.1rem;
            color: var(--o2-brand-blue);
            margin-bottom: 6px;
        }
        
        .hw-cart-distribution,
        .hw-cart-provi {
            display: inline-flex;
            width: fit-content;
            margin-top: 5px;
            padding: 3px 7px;
            border-radius: 999px;
            background: #eef7ff;
            color: var(--o2-brand-blue) !important;
            font-size: 0.72rem !important;
            font-weight: 900 !important;
        }

        .hw-cart-provi.cart-provi-positive {
            color: #15803d !important;
            background: #ecfdf3 !important;
        }

        .hw-cart-provi.cart-provi-negative {
            color: #dc2626 !important;
            background: #fff1f2 !important;
        }

        .hw-cart-provi.cart-provi-neutral {
            color: #64748b !important;
            background: #f8fafc !important;
        }

        .hw-cart-item-details span {
            font-size: 0.85rem;
            color: var(--text-muted);
            font-weight: 600;
        }

        .cart-free-ware-upfront-edit,
        .hw-cart-upfront-field {
            display: inline-flex;
            align-items: center;
            gap: 5px;
        }

        .cart-free-ware-upfront-input,
        .hw-cart-upfront-input {
            width: 82px;
            min-width: 0;
            padding: 5px 8px;
            border: 1px solid #b9c6d6;
            border-radius: 7px;
            background: #fff;
            color: #101828;
            font: inherit;
            font-weight: 800;
            text-align: right;
        }

        .cart-free-ware-upfront-input:focus,
        .hw-cart-upfront-input:focus {
            border-color: #0050aa;
            outline: 2px solid rgba(0, 80, 170, 0.16);
            outline-offset: 1px;
        }

        .hw-cart-upfront-edit {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 10px;
            margin-top: 6px;
            color: #344054;
            font-size: 0.78rem;
            font-weight: 700;
        }
        
        .hw-cart-item-remove {
            background: #f1f5f9;
            color: #64748b;
            border: none;
            width: 32px;
            height: 32px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            font-size: 1.2rem;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .hw-cart-item-remove:hover {
            background: #ffebee;
            color: #d32f2f;
        }

        /* Druckspezifische Header- und Footer-Komponenten (Warenkorb-Ausdruck) */
        .cart-print-header, .cart-print-footer {
            display: none;
        }

        .cart-print-brand {
            display: block;
            margin-bottom: 18px;
        }

        .cart-print-hero {
            position: relative;
            min-height: 96px;
            padding: 20px 24px;
            display: flex;
            align-items: center;
            overflow: hidden;
            color: #102f4d;
            background: linear-gradient(120deg, #fff 0%, #f2f9fc 68%, #e7f5fa 100%);
            border: 1px solid #bfd8e6;
            border-top: 5px solid #087da8;
            border-radius: 14px 14px 5px 5px;
            box-shadow: 0 6px 16px rgba(9, 45, 77, .08);
            -webkit-print-color-adjust: exact;
            print-color-adjust: exact;
        }

        .cart-print-shop-logo {
            position: relative;
            z-index: 2;
            width: 168px;
            height: 64px;
            margin-left: auto;
            padding: 7px 9px;
            flex: 0 0 168px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 1px solid rgba(191, 216, 230, .82);
            border-radius: 10px;
            background: rgba(255,255,255,.78);
        }

        .cart-print-shop-logo:has(img[hidden]) { display: none; }
        .cart-print-shop-logo img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; object-position: center; }

        .cart-print-hero::after {
            position: absolute;
            right: -38px;
            top: -76px;
            width: 175px;
            height: 175px;
            border: 28px solid rgba(8, 125, 168, .06);
            border-radius: 50%;
            content: '';
        }

        .cart-print-title-copy {
            position: relative;
            z-index: 1;
            min-width: 0;
        }

        .cart-print-brand h1 {
            margin: 0;
            color: #102f4d;
            font-size: 1.55rem;
            line-height: 1.08;
            letter-spacing: -.03em;
            text-transform: none;
        }

        .cart-print-title-copy p {
            margin: 6px 0 0;
            color: #5f7689;
            font-size: .72rem;
            font-weight: 650;
        }

        .cart-print-meta-item > span {
            font-size: .58rem;
            font-weight: 900;
            letter-spacing: .1em;
            text-transform: uppercase;
        }

        .cart-print-meta {
            margin-top: -1px;
            padding: 13px 17px 12px;
            display: grid;
            grid-template-columns: minmax(0, 1fr) auto;
            gap: 24px;
            border: 1px solid #d4e4ee;
            border-top: 0;
            border-radius: 0 0 14px 14px;
            background: linear-gradient(105deg, #f6fbfe, #fff);
        }

        .cart-print-meta:has(.cart-print-advisor-photo:not([hidden])) {
            grid-template-columns: 72px minmax(0, 1fr) auto;
            gap: 18px;
        }

        .cart-print-advisor-photo {
            width: 72px;
            height: 72px;
            overflow: hidden;
            border: 1px solid #c7dce8;
            border-radius: 16px;
            background: #edf7fb;
            box-shadow: 0 4px 12px rgba(17,52,82,.1);
        }

        .cart-print-advisor-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }

        .cart-print-meta-item {
            min-width: 0;
            display: grid;
            gap: 3px;
        }

        .cart-print-meta-item > span { color: #087da8; }
        .cart-print-meta-item > strong { color: #102f4d; font-size: .82rem; }
        .cart-print-meta-item > small { color: #63798d; font-size: .63rem; font-weight: 650; }
        .cart-print-date { min-width: 166px; padding-left: 20px; border-left: 1px solid #d9e7ef; }

        .cart-print-document-id {
            display: none;
            margin-top: 7mm;
            color: #94a3b1;
            font-size: 6.5pt;
            letter-spacing: .04em;
            text-align: right;
        }

        .cart-phase-list {
            margin-bottom: 10px;
            border-bottom: 1px solid #cbd5e1;
            padding-bottom: 8px;
        }

        .cart-phase-list[hidden] {
            display: none !important;
        }

        .cart-phase-row {
            display: flex;
            align-items: baseline;
            justify-content: space-between;
            gap: 12px;
            padding: 5px 0;
        }

        .cart-phase-row span {
            color: #475569;
            font-size: 0.82rem;
            font-weight: 750;
        }

        .cart-phase-row strong {
            color: #00112c;
            font-size: 1rem;
            text-align: right;
        }

        .cart-print-brand-logos {
            display: flex;
            align-items: center;
            justify-content: flex-end;
            gap: 5mm;
        }

        .cart-print-brand-word {
            display: block;
            flex: 0 0 auto;
            font-weight: 950;
            line-height: 1;
            white-space: nowrap;
        }

        .cart-print-brand-word-o2 {
            color: var(--o2-brand-blue);
            font-size: 2rem;
        }

        .cart-print-brand-word-telekom {
            color: var(--telekom-magenta);
            font-size: 1.35rem;
        }

        .cart-print-brand-word[hidden] {
            display: none !important;
        }

        /* Neutraler Angebotsdruck: keine Netzbetreiber-Schriftzüge oben rechts */
        .cart-print-brand-logos {
            display: none !important;
        }

        .telekom-unlimited-row strong,
        .print-position-unlimited {
            color: var(--tool-primary);
            font-weight: 900;
        }

        .print-position-unlimited {
            display: inline-block;
            margin-top: 1mm;
            font-size: 0.72rem;
        }

        .cart-print-footer {
            margin-top: 24px;
            padding-top: 14px;
            border-top: 1px solid #cbd5e1;
            color: #475569;
            font-size: 0.66rem;
            line-height: 1.45;
            text-align: justify;
            page-break-inside: avoid;
            break-inside: avoid;
        }

        .cart-print-footer strong {
            display: block;
            color: #00112c;
            font-size: 0.72rem;
            margin-bottom: 6px;
            text-transform: uppercase;
        }

        @page {
            size: A4 portrait;
            margin: 12mm 13mm;
        }

        @media print {
            html,
            body {
                width: 100% !important;
                min-width: 0 !important;
                background: #ffffff !important;
                color: #00112c !important;
                font-size: 10pt !important;
                padding: 0 !important;
                margin: 0 !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            .bubble, header, .info-badge, .tab-navigation, .print-tab-btn, .verfuegbarkeit-btn, .restore-tray, .router-selector-container, .addon-options, [data-tooltip]::after, [data-tooltip]::before {
                display: none !important;
            }

            body.print-tab-mode .sidebar-cart {
                display: none !important;
            }

            body.print-tab-mode .main-content {
                width: 100% !important;
            }

            .card.disabled, .card.hidden-card, .alternative-badge, .card-minimize-btn, .card-maximize-btn, .add-to-cart-btn, .compare-card-btn {
                display: none !important;
            }

            body.print-tab-mode .cards-grid {
                display: grid !important;
                grid-template-columns: repeat(6, 1fr) !important;
                gap: 5px !important;
                width: 100% !important;
            }

            body.print-tab-mode .card {
                box-shadow: none !important;
                border: 1px solid #cbd5e1 !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }

            body.print-tab-mode .card-header {
                background-color: var(--o2-cyan) !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            body.print-tab-mode .price-box {
                border: 1px solid var(--o2-cyan) !important;
            }

            body.print-tab-mode .badge-button {
                background-color: var(--o2-brand-blue) !important;
                border: none !important;
                box-shadow: none !important;
                animation: none !important;
                font-weight: bold !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            body.print-kunde-mode .haendler-only,
            body.print-kunde-mode .haendler-code,
            body.print-kunde-mode .advisor-help-code,
            body.print-tab-mode .advisor-help-code,
            body.print-kunde-mode .alternative-badge {
                display: none !important;
            }

            body.print-kunde-mode .ap-free-label-standard {
                display: none !important;
            }

            body.print-kunde-mode .ap-free-label-kunde {
                display: inline !important;
                font-size: 0.85rem !important;
                font-weight: bold !important;
            }

            body.print-cart-mode .main-content {
                display: none !important;
            }

            body.print-cart-mode .app-layout {
                display: block !important;
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
            }

            body.print-cart-mode .sidebar-cart {
                width: 100% !important;
                max-width: none !important;
                border: none !important;
                box-shadow: none !important;
                position: static !important;
                max-height: none !important;
                overflow: visible !important;
                padding: 0 !important;
            }

            body.print-cart-mode .cart-title {
                display: none !important;
            }

            body.print-cart-mode .cart-items {
                display: none !important;
            }

            body.print-cart-mode .cart-print-compact {
                display: block !important;
                margin: 0 0 5mm !important;
            }

            body.print-cart-mode .cart-print-compact.is-empty {
                display: none !important;
            }

            body.print-cart-mode .cart-item {
                border: 1px solid #d2d8de !important;
                background: #ffffff !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
                break-inside: avoid;
                page-break-inside: avoid;
            }

            body.print-cart-mode .cart-totals {
                display: none !important;
            }

            body.print-cart-mode .clear-cart-btn,
            body.print-cart-mode .sim-limit-notice,
            body.print-cart-mode .cart-item-actions,
            body.print-cart-mode .cart-item-remove,
            body.print-cart-mode .print-cart-action-btn,
            body.print-cart-mode .router-hover-card,
            body.print-cart-mode .cart-item-footer-info,
            body.print-cart-mode .provi-sum-code-box {
                display: none !important;
            }

            body.print-cart-mode .cart-print-header {
                display: block !important;
            }

            body.print-cart-mode .cart-print-brand {
                display: block !important;
                margin-bottom: 4mm !important;
            }

            body.print-cart-mode .cart-print-brand h1 {
                font-size: 18pt !important;
                line-height: 1.08 !important;
            }

            body.print-cart-mode .cart-print-hero {
                min-height: 24mm !important;
                padding: 3.8mm 5mm !important;
                display: flex !important;
                border-top-width: 1.2mm !important;
                border-radius: 3mm 3mm 1.5mm 1.5mm !important;
            }

            body.print-cart-mode .cart-print-shop-logo {
                width: 42mm !important;
                height: 16mm !important;
                padding: 1.4mm 1.8mm !important;
                flex-basis: 42mm !important;
                border-radius: 2mm !important;
                background: rgba(255,255,255,.72) !important;
            }

            body.print-cart-mode .cart-print-title-copy p { font-size: 8pt !important; }
            body.print-cart-mode .cart-print-meta-item > span { font-size: 6.5pt !important; }
            body.print-cart-mode .cart-print-meta-item > strong { font-size: 9pt !important; }
            body.print-cart-mode .cart-print-meta { margin-top: -.2mm !important; padding: 2.6mm 4mm !important; }
            body.print-cart-mode .cart-print-meta:has(.cart-print-advisor-photo:not([hidden])) {
                grid-template-columns: 20mm minmax(0, 1fr) auto !important;
                gap: 4mm !important;
            }
            body.print-cart-mode .cart-print-advisor-photo {
                width: 20mm !important;
                height: 20mm !important;
                border-radius: 3mm !important;
            }
            body.print-cart-mode .cart-print-meta-item > small { font-size: 7pt !important; }
            body.print-cart-mode .cart-print-date {
                min-width: 45mm !important;
                padding-left: 5mm !important;
            }

            body.print-cart-mode .cart-print-footer {
                display: block !important;
                margin-top: 6mm !important;
                padding-top: 3mm !important;
                font-size: 8.5pt !important;
                line-height: 1.5 !important;
                text-align: left !important;
            }

            body.print-cart-mode .cart-print-footer strong {
                font-size: 9.5pt !important;
                margin-bottom: 1.5mm !important;
            }

            body.print-cart-mode .cart-print-document-id {
                display: block !important;
            }

            body.print-cart-mode .cart-print-section-title {
                border-bottom: 1pt solid #cbd5e1 !important;
                font-size: 11pt !important;
                margin-bottom: 0 !important;
                padding-bottom: 1.5mm !important;
            }

            body.print-cart-mode .print-head-col {
                width: 35mm !important;
                min-width: 35mm !important;
                font-size: 8.5pt !important;
            }

            body.print-cart-mode .print-position-list {
                gap: 0 !important;
            }

            body.print-cart-mode .print-position-row {
                align-items: center !important;
                border: none !important;
                border-bottom: 0.5pt solid #dbe4ee !important;
                border-radius: 0 !important;
                gap: 4mm !important;
                min-height: 31mm !important;
                padding: 3.5mm 1.5mm !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }

            body.print-cart-mode .print-position-row:last-child {
                border-bottom: 0.5pt solid #dbe4ee !important;
            }

            body.print-tab-mode .telekom-card .card-header,
            body.print-tab-mode .telekom-card .badge-button {
                background-color: var(--telekom-magenta) !important;
            }

            body.print-tab-mode .telekom-card .price-box,
            body.print-tab-mode .telekom-card .dual-price-box {
                border-color: var(--telekom-magenta) !important;
            }

            body.print-cart-mode .print-position-product {
                align-self: center !important;
                width: 26mm !important;
                min-width: 26mm !important;
                min-height: 24mm !important;
            }

            body.print-cart-mode .print-position-main {
                display: flex !important;
                flex: 1 1 auto !important;
                flex-direction: column !important;
                justify-content: center !important;
                min-width: 0 !important;
                padding: 0 !important;
            }

            body.print-cart-mode .print-position-product img {
                width: 24mm !important;
                height: 24mm !important;
                max-width: 100% !important;
                max-height: none !important;
                object-fit: contain !important;
            }

            body.print-cart-mode .print-position-product.is-sim img {
                width: 22mm !important;
                height: 22mm !important;
            }

            body.print-cart-mode .print-position-product.is-home img {
                width: 24mm !important;
                height: 24mm !important;
                border-radius: 1.5mm !important;
                object-fit: cover !important;
                object-position: center 34% !important;
            }

            body.print-cart-mode .print-position-icon {
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                width: 26mm !important;
                min-width: 26mm !important;
                min-height: 24mm !important;
            }

            body.print-cart-mode .print-position-icon img {
                width: 22mm !important;
                height: 22mm !important;
                object-fit: contain !important;
            }

            body.print-cart-mode .print-position-name-line {
                align-items: baseline !important;
                gap: 2mm !important;
            }

            body.print-cart-mode .print-position-name {
                font-size: 14pt !important;
                line-height: 1.25 !important;
            }

            body.print-cart-mode .print-position-qty {
                font-size: 10pt !important;
            }

            body.print-cart-mode .print-position-detail-line {
                color: #475569 !important;
                font-size: 9.5pt !important;
                line-height: 1.4 !important;
                margin-top: 1.2mm !important;
            }

            body.print-cart-mode .print-position-monthly,
            body.print-cart-mode .print-position-onetime-cell {
                width: 35mm !important;
                min-width: 35mm !important;
            }

            body.print-cart-mode .print-position-monthly strong,
            body.print-cart-mode .print-position-onetime-cell strong {
                font-size: 15pt !important;
                line-height: 1.25 !important;
            }

            body.print-cart-mode .print-position-price-period + .print-position-price-period {
                margin-top: 2mm !important;
            }

            body.print-cart-mode .print-position-price-period-label {
                color: #334155 !important;
                font-size: 8.5pt !important;
                font-weight: 850 !important;
                line-height: 1.2 !important;
                margin-bottom: 0.4mm !important;
            }

            body.print-cart-mode .print-position-price-sub {
                color: #475569 !important;
                font-size: 9pt !important;
                font-weight: 700 !important;
                line-height: 1.3 !important;
                margin-top: 0.8mm !important;
            }

            body.print-cart-mode .print-position-discount {
                color: #15803d !important;
                font-size: 8.5pt !important;
                font-weight: 900 !important;
                line-height: 1.2 !important;
                margin-top: 1mm !important;
            }

            body.print-cart-mode .print-total-block {
                width: 105mm !important;
                margin: 4mm 0 0 auto !important;
                border-top: 1.5pt solid var(--o2-brand-blue) !important;
                background: #eef8fd !important;
                border-radius: 0 0 1.5mm 1.5mm !important;
                padding: 2mm 2.5mm !important;
                break-inside: avoid;
                page-break-inside: avoid;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            body.print-cart-mode .print-total-row {
                gap: 5mm !important;
                padding: 0.8mm 0 !important;
            }

            body.print-cart-mode .print-total-row span {
                font-size: 10pt !important;
            }

            body.print-cart-mode .print-total-row strong {
                font-size: 14pt !important;
            }

            body.print-cart-mode .print-phase-total-row span {
                color: #334155 !important;
                font-weight: 800 !important;
            }
        }

        @media print {
            body.print-compare-mode .app-layout,
            body.print-compare-mode .compare-tray,
            body.print-compare-mode .comparison-header-actions,
            body.print-compare-mode .comparison-card-remove-btn,
            body.print-compare-mode .comparison-takeover-btn {
                display: none !important;
            }

            body.print-compare-mode .comparison-modal {
                display: block !important;
                position: static !important;
                inset: auto !important;
                width: 100% !important;
                min-height: auto !important;
                padding: 0 !important;
                background: #ffffff !important;
                color: #00112c !important;
            }

            body.print-compare-mode .comparison-dialog {
                width: 100% !important;
                max-width: 100% !important;
                margin: 0 auto !important;
                max-height: none !important;
                overflow: visible !important;
                border: none !important;
                border-radius: 0 !important;
                box-shadow: none !important;
            }

            body.print-compare-mode .comparison-header {
                display: flex !important;
                padding: 0 0 8px !important;
                border-bottom: 3px solid var(--o2-brand-blue) !important;
            }

            body.print-compare-mode .comparison-kicker {
                color: var(--o2-brand-blue) !important;
                font-size: 0.62rem !important;
            }

            body.print-compare-mode .comparison-header h2 {
                color: #00112c !important;
                font-size: 1.1rem !important;
            }

            body.print-compare-mode .comparison-empty {
                display: none !important;
            }

            body.print-compare-mode .comparison-scroll {
                display: block !important;
                width: 100% !important;
                overflow: visible !important;
                padding: 10px 0 0 !important;
                box-sizing: border-box !important;
            }

            body.print-compare-mode .comparison-board {
                display: grid !important;
                grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
                gap: 3mm !important;
                width: 100% !important;
                max-width: 100% !important;
                justify-content: center !important;
                margin: 0 auto !important;
                box-sizing: border-box !important;
            }

            body.print-compare-mode .comparison-board[data-compare-count="1"] {
                grid-template-columns: minmax(0, 1fr) !important;
                min-width: 0 !important;
                max-width: 110mm !important;
            }

            body.print-compare-mode .comparison-board[data-compare-count="3"] {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                min-width: 0 !important;
            }

            body.print-compare-mode .comparison-board[data-compare-count="4"] {
                grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
                min-width: 0 !important;
            }

            body.print-compare-mode .comparison-advice-card {
                min-width: 0 !important;
                border: 1px solid var(--comparison-border) !important;
                border-radius: 7px !important;
                box-shadow: none !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }

            body.print-compare-mode .comparison-card-header {
                min-height: 92px !important;
                padding: 13px 14px !important;
                background: var(--comparison-header) !important;
                -webkit-print-color-adjust: exact;
                print-color-adjust: exact;
            }

            body.print-compare-mode .comparison-card-header span,
            body.print-compare-mode .comparison-card-header em,
            body.print-compare-mode .comparison-metric span,
            body.print-compare-mode .comparison-price-panel span,
            body.print-compare-mode .comparison-fee-panel span,
            body.print-compare-mode .comparison-highlights span,
            body.print-compare-mode .comparison-technology-line span,
            body.print-compare-mode .comparison-router-line span,
            body.print-compare-mode .comparison-note {
                font-size: 0.6rem !important;
                line-height: 1.2 !important;
            }

            body.print-compare-mode .comparison-card-header strong {
                font-size: 1rem !important;
                line-height: 1.14 !important;
            }

            body.print-compare-mode .comparison-card-header em {
                font-size: 0.7rem !important;
                line-height: 1.2 !important;
            }

            body.print-compare-mode .comparison-card-body {
                display: flex !important;
                flex-direction: column !important;
                gap: 11px !important;
                padding: 14px !important;
            }

            body.print-compare-mode .comparison-main-metrics {
                gap: 8px !important;
            }

            body.print-compare-mode .comparison-metric,
            body.print-compare-mode .comparison-fee-panel,
            body.print-compare-mode .comparison-technology-line,
            body.print-compare-mode .comparison-router-line {
                padding: 9px 10px !important;
            }

            body.print-compare-mode .comparison-metric strong,
            body.print-compare-mode .comparison-fee-panel strong,
            body.print-compare-mode .comparison-technology-line strong,
            body.print-compare-mode .comparison-router-line strong {
                font-size: 0.9rem !important;
                line-height: 1.15 !important;
            }

            body.print-compare-mode .comparison-metric strong {
                font-size: 1.02rem !important;
                line-height: 1.08 !important;
            }

            body.print-compare-mode .comparison-price-panel {
                padding: 10px !important;
            }

            body.print-compare-mode .comparison-price-panel strong {
                font-size: 1.55rem !important;
                line-height: 1 !important;
            }

            body.print-compare-mode .comparison-price-panel span:not(:first-child) {
                font-size: 0.72rem !important;
                line-height: 1.2 !important;
            }

            body.print-compare-mode .comparison-price-panel .comparison-price-followup {
                font-size: 1.05rem !important;
                margin-top: 7px !important;
            }

            body.print-compare-mode .comparison-highlights {
                padding: 10px 0 !important;
            }

            body.print-compare-mode .comparison-highlights li,
            body.print-compare-mode .comparison-metric em,
            body.print-compare-mode .comparison-fee-panel em,
            body.print-compare-mode .comparison-router-line em {
                font-size: 0.64rem !important;
                line-height: 1.22 !important;
                margin-bottom: 5px !important;
            }

            body.print-compare-mode .comparison-highlights li {
                font-size: 0.74rem !important;
                line-height: 1.25 !important;
            }

            body.print-compare-mode .comparison-note {
                padding: 8px 0 0 !important;
                border-top: 1px solid #cbd5e1 !important;
            }
        }

        @media print {
            body.print-tool-mode {
                background: #ffffff !important;
                padding: 0 !important;
                margin: 0 !important;
            }

            body.print-tool-mode * {
                visibility: hidden !important;
            }

            body.print-tool-mode .tool-print-target,
            body.print-tool-mode .tool-print-target * {
                visibility: visible !important;
            }

            body.print-tool-mode .tool-print-target {
                position: absolute !important;
                inset: 0 auto auto 0 !important;
                width: 100% !important;
                max-width: none !important;
                margin: 0 !important;
                padding: 0 !important;
                border: none !important;
                box-shadow: none !important;
                background: #ffffff !important;
                color: #000000 !important;
            }

            body.print-tool-mode .tool-print-target .zettel-remove {
                display: none !important;
            }

            body.print-tool-mode .tool-print-target .zettel,
            body.print-tool-mode .tool-print-target .zettel-note {
                box-shadow: none !important;
                break-inside: avoid;
                page-break-inside: avoid;
            }

            body.print-tool-mode #hl-receipt.tool-print-target {
                width: 80mm !important;
                padding: 0 !important;
                font-family: 'Courier New', Consolas, monospace !important;
            }

            body.print-tool-mode #hl-receipt.tool-print-target::after {
                display: none !important;
            }

            body.print-tool-mode #bank-print-area.tool-print-target {
                padding: 15px !important;
                font-size: 11pt !important;
                line-height: 1.6 !important;
            }

            body.print-tool-mode #zt-liste.tool-print-target {
                display: block !important;
                width: 80mm !important;
                padding: 0 !important;
                background: #ffffff !important;
                border: none !important;
            }

            body.print-tool-mode #zt-liste.tool-print-target::after {
                display: none !important;
            }
        }

/* Final color contract: neutral application chrome, provider CI only in provider components. */
.hardware-form-container,
.hardware-cart-panel,
.insurance-input-panel,
.tool-panel {
    border-top-color: var(--tool-primary) !important;
    color: var(--tool-ink);
}

.hardware-form-head h3,
.hardware-mode-note strong,
.hardware-preset-head strong,
.tool-panel-head h3,
.tool-bank-shell .tool-panel-head h3 {
    color: var(--tool-primary) !important;
}

.hardware-brand-filter-btn {
    color: var(--tool-primary) !important;
}

.hardware-brand-filter-btn:hover {
    border-color: var(--tool-accent) !important;
}

.hardware-brand-filter-btn.active {
    border-color: var(--tool-primary) !important;
    background: var(--tool-primary) !important;
    color: #ffffff !important;
}

/* My Handy: einheitliches Karten- und Bedienraster */
#my-handy-panel .hardware-preset-panel {
    gap: 12px;
    padding: 14px;
    border-color: #d5e3f0;
    border-radius: 14px;
    background: #f5f9fd;
    box-shadow: none;
}

/* Freie Ware folgt derselben klaren Struktur wie My Handy. */
body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-panel {
    gap: 12px;
    padding: 14px;
    border-color: #d5e3f0;
    border-radius: 14px;
    background: #f5f9fd;
    box-shadow: none;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-brand-filter {
    min-height: 54px;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid #d5e3f0;
    border-radius: 11px;
    background: #ffffff;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-brand-filter-label {
    min-width: 56px;
    font-size: 0.66rem;
    letter-spacing: 0.45px;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-brand-filter-options {
    gap: 6px;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-brand-filter-options,
#my-handy-panel .hardware-brand-filter-options {
    flex: 1 1 auto;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-brand-filter-btn {
    min-height: 32px;
    padding: 6px 11px;
    border-color: #cbd9e7;
    border-radius: 8px;
    font-size: 0.73rem;
    box-shadow: none;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
    gap: 12px;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card {
    min-height: 286px;
    height: 100%;
    gap: 3px;
    padding: 14px 14px 54px;
    overflow: hidden;
    border-color: #d3e0ed;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 40, 90, 0.03);
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card:not(.flipped)::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    height: 150px;
    border: 1px solid #e8f0f7;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
    pointer-events: none;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card > img.hw-tile-photo,
body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card > .hw-tile-placeholder {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 136px;
    margin: 0 0 10px;
    object-fit: contain;
    object-position: center;
    align-self: center;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card.has-color-picker > img.hw-tile-photo {
    width: calc(100% - 116px);
    align-self: flex-start;
}

body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card:hover,
body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-card.flipped {
    border-color: #7ecfec;
    box-shadow: 0 7px 18px rgba(0, 80, 170, 0.1);
    transform: translateY(-1px);
}

#my-handy-panel .hardware-preset-head {
    min-height: 32px;
    padding: 0 2px;
}

#my-handy-panel .my-handy-global-duration,
#my-handy-panel .hardware-brand-filter {
    min-height: 54px;
    padding: 9px 11px;
    border: 1px solid #d5e3f0;
    border-radius: 11px;
    background: #ffffff;
}

.tab-window-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    width: max-content;
    margin: 0 0 8px auto;
    padding: 3px;
    border: 1px solid #d5e3f0;
    border-radius: 9px;
    background: #ffffff;
    box-shadow: 0 2px 8px rgba(8, 58, 99, 0.06);
}

.tab-window-controls button {
    display: inline-grid;
    width: 38px;
    height: 30px;
    place-items: center;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 7px;
    background: transparent;
    color: #31516f;
    cursor: pointer;
    transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

.tab-window-controls button:hover:not(:disabled),
.tab-window-controls button:focus-visible {
    border-color: #9fdaf0;
    background: #eaf8ff;
    color: var(--o2-brand-blue);
}

.tab-window-controls button:disabled {
    color: #a5b4c3;
    cursor: default;
    opacity: 0.52;
}

.tab-window-controls svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.5;
}

body.tab-workspace-maximized {
    overflow: hidden !important;
}

body.tab-workspace-maximized > header,
body.tab-workspace-maximized > .bubble,
body.tab-workspace-maximized .sidebar-cart {
    display: none !important;
}

body.tab-workspace-maximized .app-layout {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.tab-workspace-maximized .main-content {
    width: 100% !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.tab-workspace-maximized .main-content > .tab-content {
    display: none !important;
}

body.tab-workspace-maximized .main-content > .tab-content.is-workspace-maximized {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: block !important;
    width: 100%;
    height: 100vh;
    padding: 12px;
    overflow: auto;
    background: #eef4fa;
}

body.tab-workspace-maximized .tab-content.is-workspace-maximized .hardware-layout,
body.tab-workspace-maximized .tab-content.is-workspace-maximized .hardware-form-container,
body.tab-workspace-maximized .tab-content.is-workspace-maximized .hardware-preset-panel {
    width: 100%;
    max-width: none;
    margin: 0;
}

body.tab-workspace-maximized .tab-content.is-workspace-maximized .hardware-form-container {
    min-height: calc(100vh - 24px);
    padding: 12px;
    border-radius: 14px;
}

body.tab-workspace-maximized .tab-content.is-workspace-maximized > .tab-window-controls {
    position: sticky;
    top: 0;
    z-index: 9010;
}

@media print {
    .tab-window-controls {
        display: none !important;
    }
}

#my-handy-panel .my-handy-global-duration > div:first-child {
    gap: 1px;
}

#my-handy-panel .my-handy-global-duration > div:first-child > strong {
    color: var(--o2-brand-blue);
    font-size: 0.8rem;
    line-height: 1.2;
}

#my-handy-panel .my-handy-duration-help {
    color: var(--text-muted);
    font-size: 0.66rem;
    font-weight: 700;
}

#my-handy-panel .hardware-brand-filter {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr) minmax(312px, 1.15fr) minmax(210px, 0.82fr);
    grid-template-areas:
        "brand-label brand-options brand-options brand-options"
        ". catalog-search price-filter catalog-sort";
    align-items: center;
    gap: 8px 10px;
}

#my-handy-panel .hardware-brand-filter-label {
    grid-area: brand-label;
}

#my-handy-panel .hardware-brand-filter-options {
    grid-area: brand-options;
}

#my-handy-panel .hardware-catalog-search {
    grid-area: catalog-search;
    width: 100%;
    margin-left: 0;
}

#my-handy-panel .hardware-price-filter {
    grid-area: price-filter;
    width: 100%;
    min-width: 0;
}

#my-handy-panel .hardware-catalog-sort {
    grid-area: catalog-sort;
    width: 100%;
}

#my-handy-panel .hardware-catalog-sort select {
    min-width: 0;
    flex: 1 1 auto;
}

#my-handy-panel .hardware-price-filter {
    min-height: 36px;
    padding: 0 9px 0 10px;
    border: 1px solid #d5e3f0;
    border-radius: 11px;
    background: #ffffff;
}

#my-handy-panel .hardware-brand-filter-label {
    min-width: 56px;
    font-size: 0.66rem;
    letter-spacing: 0.45px;
}

#my-handy-panel .hardware-brand-filter-options {
    gap: 6px;
}

#my-handy-panel .hardware-brand-filter-btn {
    min-height: 32px;
    padding: 6px 11px;
    border-color: #cbd9e7;
    border-radius: 8px;
    font-size: 0.73rem;
    box-shadow: none;
}

@media (max-width: 980px) {
    .hardware-brand-filter {
        flex-wrap: wrap;
    }

    #my-handy-panel .hardware-brand-filter {
        grid-template-columns: 56px minmax(0, 1fr);
        grid-template-areas:
            "brand-label brand-options"
            ". catalog-search"
            ". price-filter"
            ". catalog-sort";
    }

    .hardware-catalog-search {
        width: 100%;
        margin-left: 68px;
    }

    .hardware-price-filter {
        margin-left: 68px;
    }

    #my-handy-panel .hardware-catalog-search,
    #my-handy-panel .hardware-price-filter,
    #my-handy-panel .hardware-catalog-sort {
        margin-left: 0;
    }
}

#my-handy-panel .cart-my-handy-duration-choice {
    min-height: 36px;
    padding: 3px;
    border-color: #b7d9ed;
    background: #edf8ff;
}

#my-handy-panel .cart-my-handy-duration-option {
    min-width: 86px;
    min-height: 28px;
    padding: 4px 12px;
    font-size: 0.69rem;
}

#my-handy-panel .hardware-rate-term-choice.cart-my-handy-duration-choice {
    min-height: 26px;
    padding: 2px;
}

#my-handy-panel .hardware-rate-term-choice .cart-my-handy-duration-option {
    min-width: 46px;
    min-height: 22px;
    padding: 3px 6px;
    font-size: 0.6rem;
}

#my-handy-panel .hardware-preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    align-items: stretch;
    gap: 12px;
}

#my-handy-panel .hardware-preset-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 106px;
    grid-template-rows: 150px auto auto auto minmax(96px, 1fr);
    column-gap: 10px;
    row-gap: 3px;
    align-items: start;
    min-height: 348px;
    height: 100%;
    padding: 14px 14px 54px;
    overflow: hidden;
    border-color: #d3e0ed;
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(0, 40, 90, 0.03);
}

#my-handy-panel .hardware-preset-card:not(.flipped)::before {
    content: "";
    position: absolute;
    top: 12px;
    right: 12px;
    left: 12px;
    height: 150px;
    border: 1px solid #e8f0f7;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 100%);
    pointer-events: none;
}

#my-handy-panel .hardware-preset-card:hover,
#my-handy-panel .hardware-preset-card.flipped {
    border-color: #7ecfec;
    box-shadow: 0 7px 18px rgba(0, 80, 170, 0.1);
    transform: translateY(-1px);
}

#my-handy-panel .hardware-preset-card > img.hw-tile-photo,
#my-handy-panel .hardware-preset-card > .hw-tile-placeholder,
#my-handy-panel .hardware-preset-card.has-color-picker > img.hw-tile-photo {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 144px;
    margin: 0 0 10px;
    object-fit: contain;
    object-position: center;
    align-self: center;
}

#my-handy-panel .hardware-preset-card.has-color-picker > img.hw-tile-photo {
    width: 100%;
    align-self: center;
}

#my-handy-panel .hardware-preset-card:not(.has-color-picker) > img.hw-tile-photo,
#my-handy-panel .hardware-preset-card:not(.has-color-picker) > .hw-tile-placeholder {
    grid-column: 1 / -1;
}

/* Einheitliche Smartphone-Abbildung in My Handy und Freie Ware. */
#my-handy-panel .hardware-preset-card.hw-smartphone-card > img.hw-tile-photo,
#custom-hardware-panel .hardware-preset-card.hw-smartphone-card > img.hw-tile-photo {
    width: 100%;
    height: 136px;
    margin: 0 0 10px;
    object-fit: contain;
    object-position: center;
    align-self: center;
    transform: none;
}

#my-handy-panel .hardware-preset-card.hw-smartphone-card.has-color-picker > img.hw-tile-photo {
    width: 100%;
    align-self: center;
}

#custom-hardware-panel .hardware-preset-card.hw-smartphone-card.has-color-picker > img.hw-tile-photo {
    width: calc(100% - 116px);
    align-self: flex-start;
}

.hardware-preset-card > img.hw-tile-photo {
    cursor: pointer;
}

/* Große Produktansicht per Klick mit Farbwechsel. */
.hw-product-viewer {
    position: fixed;
    inset: 0;
    z-index: 5000;
    display: grid;
    place-items: center;
    padding: 18px;
    background: rgba(0, 17, 44, 0.46);
    backdrop-filter: blur(3px);
    border: 1px solid #cbddeb;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.16s ease, visibility 0s linear 0.16s;
}

.hw-product-viewer.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition-delay: 0s;
}

.hw-product-viewer-panel {
    position: relative;
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr) 52px;
    grid-template-rows: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 8px 12px;
    width: min(680px, calc(100vw - 36px));
    height: min(760px, calc(100vh - 36px));
    padding: 18px;
    overflow: hidden;
    border: 1px solid #cbddeb;
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 24px 70px rgba(0, 17, 44, 0.34);
    transform: translateY(8px) scale(0.98);
    transition: width 0.18s ease, transform 0.16s ease;
}

.hw-product-viewer-panel.is-overview {
    width: min(1100px, calc(100vw - 36px));
}

.hw-product-viewer.is-visible .hw-product-viewer-panel {
    transform: translateY(0) scale(1);
}

.hw-product-viewer-media {
    grid-column: 2;
    grid-row: 1;
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 10px;
    border-radius: 13px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
    cursor: zoom-out;
}

.hw-product-viewer-media img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: contain;
}

.hw-product-viewer-overview {
    grid-column: 1 / -1;
    grid-row: 1;
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 12px;
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 12px 64px;
    overflow: auto;
    border-radius: 13px;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f7fb 100%);
}

.hw-product-viewer-overview[hidden],
.hw-product-viewer-media[hidden] {
    display: none !important;
}

.hw-product-viewer-overview-item {
    display: flex;
    flex: 0 1 calc(33.333% - 10px);
    flex-direction: column;
    min-width: 170px;
    max-width: 300px;
    height: 100%;
    min-height: 0;
    padding: 10px;
    overflow: hidden;
    border: 1px solid #d2e0ec;
    border-radius: 12px;
    background: #ffffff;
    color: var(--o2-brand-blue);
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}

.hw-product-viewer-overview[data-count="4"] .hw-product-viewer-overview-item {
    flex-basis: calc(50% - 8px);
    height: calc(50% - 6px);
}

.hw-product-viewer-overview[data-count="5"] .hw-product-viewer-overview-item,
.hw-product-viewer-overview[data-count="6"] .hw-product-viewer-overview-item {
    height: calc(50% - 6px);
}

.hw-product-viewer-overview-item:hover,
.hw-product-viewer-overview-item:focus-visible,
.hw-product-viewer-overview-item.is-selected {
    border-color: var(--o2-cyan);
    outline: none;
    box-shadow: 0 7px 20px rgba(0, 80, 170, 0.13);
}

.hw-product-viewer-overview-item:hover {
    transform: translateY(-2px);
}

.hw-product-viewer-overview-item > img {
    display: block;
    flex: 1 1 auto;
    width: 100%;
    min-height: 0;
    object-fit: contain;
}

.hw-product-viewer-overview-caption {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 30px;
    padding-top: 6px;
    font-size: 0.75rem;
}

.hw-product-viewer-overview-swatch {
    width: 17px;
    height: 17px;
    flex: 0 0 17px;
    border: 1px solid rgba(0, 17, 44, 0.2);
    border-radius: 50%;
    background: var(--hw-color);
    box-shadow: inset 0 0 0 2px #ffffff;
}

.hw-product-viewer-name {
    grid-column: 1 / -1;
    grid-row: 2;
    padding-top: 3px;
    color: var(--o2-brand-blue);
    font-size: 0.9rem;
    font-weight: 900;
    line-height: 1.25;
    text-align: center;
}

.hw-product-viewer-color {
    grid-column: 1 / -1;
    grid-row: 3;
    color: var(--text-muted);
    font-size: 0.75rem;
    font-weight: 800;
    text-align: center;
}

.hw-product-viewer-nav,
.hw-product-viewer-close {
    display: inline-grid;
    place-items: center;
    border: 1px solid #b8d4e7;
    background: #ffffff;
    color: var(--o2-brand-blue);
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 40, 110, 0.12);
}

.hw-product-viewer-nav[hidden] {
    display: none !important;
}

.hw-product-viewer-nav {
    grid-row: 1;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 2rem;
    line-height: 1;
}

.hw-product-viewer-prev {
    grid-column: 1;
}

.hw-product-viewer-next {
    grid-column: 3;
}

.hw-product-viewer-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    font-size: 1.45rem;
}

.hw-product-viewer-nav:hover,
.hw-product-viewer-close:hover,
.hw-product-viewer-nav:focus-visible,
.hw-product-viewer-close:focus-visible {
    border-color: var(--o2-cyan);
    background: #eefaff;
    outline: none;
}

body[data-layout="smartphone"] .hw-product-viewer {
    display: none !important;
}

#my-handy-panel .hardware-preset-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 14px;
    font-size: 0.66rem;
    line-height: 1.2;
}

#my-handy-panel .hardware-price-update-badge {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    align-self: flex-end;
    flex: 0 0 auto;
    margin-bottom: 2px;
    min-height: 20px;
    padding: 4px 8px;
    border: 1px solid #b7e4ce;
    border-radius: 999px;
    color: #12613f;
    background: rgba(239, 251, 245, .96);
    box-shadow: 0 3px 8px rgba(18, 97, 63, .1);
    font-size: .62rem;
    font-style: normal;
    font-weight: 950;
    letter-spacing: .02em;
    line-height: 1;
    white-space: nowrap;
    cursor: help;
}

#my-handy-panel .hardware-price-update-badge[data-tooltip]::after {
    top: auto;
    right: 0;
    bottom: calc(100% + 10px);
    left: auto;
    min-width: 235px;
    padding: 9px 12px;
    border: 1px solid #9fd4e8;
    border-radius: 10px;
    color: #173a5e;
    background: linear-gradient(145deg, #ffffff 0%, #eaf8fd 100%);
    box-shadow: 0 10px 24px rgba(23, 58, 94, .18);
    font-size: .68rem;
    font-weight: 850;
    line-height: 1.35;
    text-align: left;
    white-space: pre-line;
    transform: translateY(6px);
}

#my-handy-panel .hardware-price-update-badge[data-tooltip]::before {
    top: auto;
    right: 16px;
    bottom: calc(100% + 1px);
    left: auto;
    border-color: #9fd4e8 transparent transparent transparent;
    transform: translateY(6px);
}

#my-handy-panel .hardware-price-update-badge[data-tooltip]:hover::after,
#my-handy-panel .hardware-price-update-badge[data-tooltip]:focus-visible::after {
    opacity: 1;
    transform: translateY(0);
}

#my-handy-panel .hardware-price-update-badge[data-tooltip]:hover::before,
#my-handy-panel .hardware-price-update-badge[data-tooltip]:focus-visible::before {
    opacity: 1;
    transform: translateY(0);
}

#my-handy-panel .hw-title-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    min-width: 0;
}

#my-handy-panel .hw-title-row > strong {
    min-width: 0;
    padding-right: 0;
}

#my-handy-panel .hardware-preset-card-wide .hw-title-row {
    grid-column: 2;
    grid-row: 3;
}

#my-handy-panel .hardware-price-update-badge i {
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: #24a866;
    box-shadow: 0 0 0 3px rgba(36, 168, 102, .12);
}

#my-handy-panel .hardware-preset-card > strong {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 20px;
    padding-right: 24px;
    font-size: 0.96rem;
    line-height: 1.2;
}

#my-handy-panel .hardware-preset-card > span:not(.hardware-preset-brand) {
    min-height: 18px;
    font-size: 0.77rem;
    line-height: 1.25;
}

#my-handy-panel .hw-storage-picker {
    grid-column: 1 / -1;
    grid-row: 4;
    position: relative;
    z-index: 2;
    min-width: 0;
    margin: 4px 0 1px;
    padding: 0;
    border: 0;
}

#my-handy-panel .hw-storage-picker legend {
    margin-bottom: 5px;
    color: #61758b;
    font-size: 0.6rem;
    font-weight: 900;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

#my-handy-panel .hw-storage-options {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

#my-handy-panel .hw-storage-option {
    min-width: 58px;
    min-height: 28px;
    padding: 4px 9px;
    border: 1px solid #bdd2e3;
    border-radius: 8px;
    color: #24425f;
    background: #ffffff;
    font: inherit;
    font-size: 0.68rem;
    font-weight: 900;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}

#my-handy-panel .hw-storage-option:hover,
#my-handy-panel .hw-storage-option:focus-visible {
    border-color: var(--o2-cyan);
    outline: none;
}

#my-handy-panel .hw-storage-option.is-selected {
    border-color: #173fbc;
    color: #ffffff;
    background: #173fbc;
    box-shadow: 0 2px 7px rgba(23, 63, 188, 0.2);
}

#my-handy-panel .hw-color-picker {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    width: 100%;
    gap: 9px;
    padding: 10px 0 24px;
}

#my-handy-panel .hw-color-picker legend {
    margin-bottom: 5px;
    font-size: 0.61rem;
    letter-spacing: 0.55px;
}

#my-handy-panel .hw-color-option {
    width: 28px;
    height: 28px;
    padding: 4px;
}

#my-handy-panel .hw-color-swatch {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

#my-handy-panel .hardware-preset-card .hw-color-option:has(input:checked) em {
    top: 68px;
    font-size: 0.61rem;
    line-height: 1.2;
}

#my-handy-panel .hw-color-picker.is-multi-row {
    padding-bottom: 23px;
}

#my-handy-panel .hardware-preset-card .hw-color-picker.is-multi-row .hw-color-option:has(input:checked) em {
    top: 105px;
}

#my-handy-panel .hw-tile-rates {
    grid-column: 1 / -1;
    grid-row: 5;
    align-self: end;
    margin-top: 3px;
    padding-top: 10px;
}

#my-handy-panel .hw-tile-rate-row {
    min-height: 94px;
    padding: 10px 6px 10px 11px;
    border-color: #b9deef;
    border-radius: 10px;
    background: #f1faff;
}

#my-handy-panel .hw-tile-rate-option.selected {
    border-color: var(--o2-cyan);
    background: #eefaff;
    box-shadow: none;
}

#my-handy-panel .hw-tile-rate-term {
    padding: 3px 10px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 0.68rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    letter-spacing: 0.1px;
}

#my-handy-panel .hw-tile-rate-price {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-end !important;
    justify-content: flex-end !important;
    gap: 1px !important;
    min-height: 0;
    font-size: inherit;
}

#my-handy-panel .hw-tile-rate-price small,
#my-handy-panel .hw-tile-rate-price strong {
    position: static !important;
    width: auto !important;
    margin: 0 !important;
    padding-right: 0 !important;
    text-align: right !important;
}

#my-handy-panel .hw-tile-rate-upfront strong {
    padding-right: 0;
}

#my-handy-panel .hw-tile-rate-sub {
    margin-top: 3px;
    padding-top: 5px;
    font-size: 0.66rem;
}

#my-handy-panel .hw-tile-cart-btn {
    right: 10px;
    bottom: 10px;
    width: 38px;
    height: 38px;
    border-color: #2444c8;
    box-shadow: 0 3px 9px rgba(0, 25, 165, 0.09);
}

#my-handy-panel .hardware-preset-card.flipped {
    min-height: 348px;
    overflow: visible;
}

#my-handy-panel .hardware-preset-card.flipped .hw-tile-back {
    gap: 10px;
}

/* Beratungsfokus: Die Originalkachel bleibt voll funktionsfähig. Dadurch
   verwenden Speicher, Farbe, Laufzeit und Warenkorb weiterhin denselben Zustand. */
body.hardware-consultation-focus-open {
    overflow: hidden;
}

.hw-consultation-spotlight {
    position: fixed;
    inset: 0;
    z-index: 12000;
    opacity: 0;
    transition: opacity 0.22s ease;
}

.hw-consultation-spotlight.is-visible {
    opacity: 1;
}

.hw-consultation-spotlight-backdrop {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: rgba(5, 24, 48, 0.34);
    backdrop-filter: blur(9px) saturate(0.78);
    -webkit-backdrop-filter: blur(9px) saturate(0.78);
    cursor: zoom-out;
}

.hw-consultation-spotlight-stage {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    padding: 38px;
    pointer-events: none;
}

.hw-consultation-spotlight-hint {
    position: absolute;
    top: 18px;
    left: 50%;
    padding: 7px 13px;
    border: 1px solid rgba(255, 255, 255, 0.38);
    border-radius: 999px;
    background: rgba(0, 25, 80, 0.74);
    color: #ffffff;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1px;
    transform: translateX(-50%);
    box-shadow: 0 5px 18px rgba(0, 17, 44, 0.18);
    white-space: nowrap;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) 158px !important;
    grid-template-rows: 286px auto auto auto auto auto !important;
    column-gap: 18px !important;
    row-gap: 5px !important;
    align-items: start !important;
    width: clamp(430px, 40vw, 520px) !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: calc(100vh - 54px);
    padding: 22px !important;
    overflow: auto !important;
    border: 2px solid var(--o2-cyan) !important;
    border-radius: 17px !important;
    background: #ffffff !important;
    box-shadow: 0 28px 80px rgba(0, 17, 44, 0.38) !important;
    cursor: default;
    opacity: 0;
    pointer-events: auto;
    transform: translateY(22px) scale(0.88) !important;
    transform-origin: center;
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.2, 0.82, 0.25, 1) !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight::before {
    top: 14px !important;
    right: 14px !important;
    left: 14px !important;
    height: 307px !important;
    border-color: #dcebf5 !important;
    border-radius: 13px !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f2f8fc 100%) !important;
}

.hw-consultation-spotlight.is-visible .hardware-preset-card.is-consultation-spotlight {
    opacity: 1;
    transform: translateY(0) scale(1) !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > img.hw-tile-photo,
.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > .hw-tile-placeholder {
    grid-column: 1;
    grid-row: 1;
    width: 100% !important;
    height: 278px !important;
    margin: 0 !important;
    align-self: center !important;
    object-position: center !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > .hw-tile-placeholder {
    max-width: 230px;
    justify-self: center;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-color-picker {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    justify-self: stretch;
    width: 100% !important;
    margin: 0 !important;
    padding: 14px 0 54px !important;
    gap: 15px !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-color-picker legend {
    margin-bottom: 10px;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-color-option {
    width: 42px !important;
    height: 42px !important;
    padding: 5px !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-color-swatch {
    width: 30px !important;
    height: 30px !important;
    flex-basis: 30px !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-color-option:has(input:checked) em {
    top: 90px !important;
    font-size: 0.9rem !important;
    line-height: 1.25;
    font-weight: 900;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-color-picker.is-multi-row .hw-color-option:has(input:checked) em {
    top: 137px !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > .hardware-preset-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 0 !important;
    margin-top: 8px;
    font-size: 0.78rem !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > strong {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 0 !important;
    padding-right: 0 !important;
    font-size: 1.3rem !important;
    line-height: 1.16 !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > span:not(.hardware-preset-brand) {
    grid-column: 1 / -1;
    min-height: 0 !important;
    font-size: 0.9rem !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-storage-picker {
    grid-column: 1 / -1;
    grid-row: 4;
    width: 100%;
    margin: 5px 0 4px !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-storage-picker legend {
    margin-bottom: 7px;
    font-size: 0.66rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-storage-option {
    min-width: 76px;
    min-height: 36px;
    font-size: 0.8rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rates {
    grid-column: 1 / -1;
    grid-row: 5;
    width: 100%;
    margin: 4px 0 0 !important;
    padding: 0 !important;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-row {
    min-height: 116px;
    gap: 8px;
    padding: 13px 8px 13px 16px;
    border-radius: 13px;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-term {
    padding: 5px 13px;
    font-size: 0.78rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-upfront small,
.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-price small {
    font-size: 0.68rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-upfront strong {
    font-size: 1rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-price strong {
    font-size: 1.65rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-price {
    min-height: 0;
    padding-left: 22px;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-values {
    grid-template-columns: minmax(0, 1fr) 250px;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-rate-sub {
    font-size: 0.8rem;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-cart-btn {
    position: static;
    grid-column: 1 / -1;
    grid-row: 6;
    justify-self: end;
    width: auto;
    min-width: 168px;
    height: 44px;
    margin-top: 7px;
    padding: 0 17px;
    border-radius: 11px;
    display: inline-flex;
    gap: 9px;
    font-weight: 900;
}

.hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight .hw-tile-cart-btn::after {
    content: "In den Warenkorb";
    font-size: 0.8rem;
}

@media (max-width: 620px) {
    .hw-consultation-spotlight-stage {
        padding: 46px 12px 14px;
    }

    .hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight {
        grid-template-columns: minmax(0, 1fr) 132px !important;
        grid-template-rows: 248px auto auto auto auto auto !important;
        column-gap: 14px !important;
        width: min(100%, 560px) !important;
        max-height: calc(100vh - 58px);
        padding: 20px !important;
    }

    .hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight::before {
        height: 264px !important;
    }

    .hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > img.hw-tile-photo,
    .hw-consultation-spotlight .hardware-preset-card.is-consultation-spotlight > .hw-tile-placeholder {
        height: 240px !important;
    }
}

.tool-panel input:focus,
.tool-panel select:focus,
.tool-panel textarea:focus {
    border-color: var(--tool-accent) !important;
    box-shadow: 0 0 0 3px rgba(15, 143, 138, 0.16) !important;
}

.tool-primary-btn {
    background: var(--tool-primary) !important;
    border-color: var(--tool-primary) !important;
    color: #ffffff !important;
}

.tool-primary-btn:hover {
    background: var(--tool-primary-dark) !important;
    border-color: var(--tool-primary-dark) !important;
}

.freie-ware-note {
    border-left-color: var(--tool-accent) !important;
}

/* Gemeinsame Tarif- und Netzbetreiber-Filterleiste */
.tariff-range-filter {
    display: grid;
    grid-template-columns: 190px 210px max-content max-content max-content;
    justify-content: end;
    align-items: center;
    grid-template-rows: 52px;
    column-gap: 12px;
    row-gap: 7px;
    min-width: 0;
    min-height: 0;
    padding: 0;
    border: 0;
    background: transparent;
}

.tariff-filter-secondary {
    grid-column: auto;
    display: flex;
    min-width: 0;
    min-height: 52px;
    align-items: center;
    gap: 0;
    padding: 0;
    border: 0;
}

.tariff-filter-secondary-label {
    display: none;
}

.tariff-group-toggle {
    display: inline-flex;
    min-height: 27px;
    align-items: center;
    justify-content: center;
    padding: 0 10px;
    border: 1px solid #d4e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #52677f;
    cursor: pointer;
    font-size: 0.65rem;
    font-weight: 850;
    transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease;
}

.tariff-group-toggle input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.tariff-group-toggle:hover,
.tariff-group-toggle:focus-within {
    border-color: var(--o2-cyan);
    background: var(--o2-cyan-soft);
    color: var(--o2-brand-blue);
}

.tariff-group-toggle.is-active {
    border-color: var(--o2-brand-blue);
    background: var(--o2-brand-blue);
    color: #ffffff;
    box-shadow: inset 0 -2px 0 var(--o2-cyan), 0 3px 8px rgba(0, 51, 160, 0.16);
}

.tariff-filter-secondary .tariff-range-filter-reset {
    width: auto;
    height: 52px;
    min-height: 52px;
    margin-left: 0;
    padding: 0 13px;
    border-radius: 8px;
}

.filter-tab-groups {
    display: flex;
    width: fit-content;
    max-width: calc(100% - 48px);
    min-height: 44px;
    align-items: center;
    gap: 8px;
    margin: -2px 24px 10px;
    padding: 7px 9px;
    border: 1px solid #dbe7f1;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff, #f5faff);
    box-shadow: 0 4px 12px rgba(0, 51, 160, 0.06);
    box-sizing: border-box;
}

.filter-tab-groups-label {
    margin-right: 3px;
    color: #52677f;
    font-size: 0.62rem;
    font-weight: 900;
    letter-spacing: 0.45px;
    text-transform: uppercase;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .filter-tab-groups {
        width: calc(100% - 8px);
        max-width: none;
        flex-wrap: wrap;
        margin: -2px 4px 10px;
    }

    .filter-tab-groups-label {
        flex-basis: 100%;
    }
}

body.kunde-mode-active .tariff-range-filter {
    display: grid !important;
}

.tariff-filter-control {
    display: grid;
    grid-template-columns: 40px minmax(0, 1fr) 30px;
    width: 100%;
    height: 52px;
    min-width: 0;
    max-width: none;
    align-items: center;
    gap: 7px;
    padding: 4px;
    border: 1px solid #d6e0eb;
    border-radius: 12px;
    background: linear-gradient(135deg, #ffffff 0%, #f7fbff 100%);
    box-sizing: border-box;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transition: border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease, transform 0.16s ease;
}

.tariff-filter-control:hover,
.tariff-filter-control:focus-within {
    border-color: var(--o2-brand-blue);
    box-shadow: 0 0 0 3px rgba(0, 169, 224, 0.12), 0 4px 12px rgba(0, 25, 165, 0.08);
}

.tariff-filter-control.is-active {
    border-color: var(--o2-brand-blue);
    background: linear-gradient(135deg, #ffffff 0%, #ecfaff 100%);
    box-shadow: 0 0 0 2px rgba(0, 169, 224, 0.1), 0 4px 12px rgba(0, 25, 165, 0.08);
}

.tariff-filter-symbol {
    display: flex;
    width: 40px;
    height: 42px;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: linear-gradient(145deg, #e9f7ff, #dff2ff);
    color: var(--o2-brand-blue);
    font-size: 0.92rem;
    font-weight: 950;
    line-height: 1;
}

.tariff-filter-symbol.is-data {
    font-size: 0.59rem;
    letter-spacing: 0.2px;
}

.tariff-filter-control.is-active .tariff-filter-symbol {
    background: linear-gradient(145deg, var(--o2-brand-blue), #0047c7);
    color: #ffffff;
}

.tariff-filter-field {
    display: flex;
    min-width: 0;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    cursor: text;
}

.tariff-filter-control[data-tariff-filter-control="price"] .tariff-filter-field,
.tariff-filter-control[data-tariff-filter-control="gb"] .tariff-filter-field,
.tariff-filter-control[data-tariff-filter-control="gb"] .tariff-range-filter-value {
    height: 42px;
}

.tariff-filter-control[data-tariff-filter-control="price"] .tariff-range-filter-value input,
.tariff-filter-control[data-tariff-filter-control="gb"] .tariff-range-filter-value input {
    font-size: 1.02rem;
    line-height: 1;
}

.tariff-filter-control[data-tariff-filter-control="gb"].is-unlimited .tariff-range-filter-value > span {
    display: none;
}

#tab-ayyildiz .ayyildiz-upgrade-card {
    order: 2;
}

.tariff-filter-control-label {
    color: #6b7f96;
    font-size: 0.57rem;
    font-weight: 850;
    letter-spacing: 0.55px;
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
}

.tariff-filter-control.is-active .tariff-filter-control-label {
    color: var(--o2-brand-blue);
}

.tariff-range-filter-value {
    display: flex;
    width: 100%;
    height: 21px;
    align-items: center;
    gap: 5px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: #475569;
    font-size: 0.84rem;
    font-weight: 850;
}

.tariff-range-filter-value:focus-within {
    box-shadow: none;
}

.tariff-range-filter-value input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: #00112c;
    font: inherit;
    font-size: 0.86rem;
    font-weight: 950;
    text-align: left;
}

.tariff-range-filter-value > span:not(.tariff-stepper-buttons) {
    color: #6b7f96;
    font-size: 0.62rem;
    font-weight: 850;
    white-space: nowrap;
}

.tariff-range-filter-value input[type="number"] {
    appearance: textfield;
    -moz-appearance: textfield;
}

.tariff-range-filter-value input[type="number"]::-webkit-inner-spin-button,
.tariff-range-filter-value input[type="number"]::-webkit-outer-spin-button {
    margin: 0;
    -webkit-appearance: none;
}

.tariff-stepper-buttons {
    display: flex;
    width: 30px;
    height: 42px;
    flex: 0 0 30px;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #d9e4ee;
    border-radius: 8px;
    background: rgba(246, 250, 254, 0.9);
}

.tariff-stepper-buttons button {
    display: grid;
    flex: 1 1 50%;
    min-height: 0;
    place-items: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: #52677f;
    cursor: pointer;
    font-size: 0.5rem;
    line-height: 1;
}

.tariff-stepper-buttons button + button {
    border-top: 1px solid #d7e0ea;
}

.tariff-stepper-buttons button:hover,
.tariff-stepper-buttons button:focus-visible {
    outline: 0;
    background: #e4f6ff;
    color: var(--o2-brand-blue);
}

.tariff-stepper-buttons button:disabled,
.tariff-stepper-buttons button:disabled:hover,
.tariff-stepper-buttons button:disabled:focus-visible {
    cursor: default;
    opacity: 0.38;
    background: transparent;
    color: #8292a6;
}

.tariff-filter-result {
    display: inline-flex;
    min-width: 94px;
    height: 52px;
    min-height: 52px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 0 10px;
    border: 1px solid #dbe4ee;
    border-radius: 8px;
    background: #ffffff;
    color: #52677f;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tariff-unlimited-quick {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    min-height: 52px;
    padding: 0 13px;
    border: 1px solid #b9dff1;
    border-radius: 8px;
    background: #f4fbff;
    color: var(--o2-brand-blue);
    cursor: pointer;
    font-size: 0.7rem;
    font-weight: 900;
    white-space: nowrap;
    transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.tariff-unlimited-quick span {
    font-size: 1.05rem;
    line-height: 1;
}

.tariff-unlimited-quick:hover,
.tariff-unlimited-quick:focus-visible {
    border-color: var(--o2-cyan);
    background: var(--o2-cyan-soft);
    box-shadow: 0 5px 12px rgba(0, 51, 160, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.tariff-unlimited-quick.is-active {
    border-color: var(--o2-brand-blue);
    background: linear-gradient(135deg, #0019a5, #0033a0);
    color: #ffffff;
    box-shadow: inset 0 -3px 0 var(--o2-cyan), 0 5px 12px rgba(0, 51, 160, 0.2);
}

.tariff-filter-result:hover:not(:disabled),
.tariff-filter-result:focus-visible {
    border-color: var(--o2-cyan);
    background: #e8f8ff;
    color: var(--o2-brand-blue);
    box-shadow: 0 5px 12px rgba(0, 51, 160, 0.14);
    transform: translateY(-1px);
    outline: none;
}

.tariff-filter-result:disabled {
    cursor: default;
    opacity: 0.5;
}

.tariff-filter-result::before {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #8aa0b8;
    content: "";
    flex: 0 0 auto;
}

.tariff-range-filter.is-active .tariff-filter-result {
    border-color: #a9dbea;
    background: var(--o2-cyan-soft);
    color: var(--o2-brand-blue);
}

.tariff-range-filter.is-active .tariff-filter-result::before {
    background: var(--o2-cyan);
}

.tariff-range-filter-reset {
    height: 52px;
    min-height: 52px;
    padding: 8px 13px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: #64748b;
    cursor: pointer;
    font: inherit;
    font-size: 0.7rem;
    font-weight: 850;
    line-height: 1;
}

.tariff-range-filter-reset:disabled {
    cursor: default;
    opacity: 0.45;
}

.tariff-range-filter-reset:hover,
.tariff-range-filter-reset:focus-visible {
    border-color: var(--o2-brand-blue);
    color: var(--o2-brand-blue);
    outline: none;
}

.card.tariff-range-filtered {
    display: none !important;
}

@media (max-width: 900px) {
    .tariff-range-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto;
    }

    .tariff-filter-result {
        justify-self: start;
    }

    .tariff-range-filter-reset {
        justify-self: end;
    }

    .tariff-filter-secondary {
        justify-self: end;
        padding: 0;
    }
}

.provider-filter {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: 14px;
    padding: 0;
    border: none;
    background: transparent;
}

@media (max-width: 1100px) {
    .provider-filter {
        margin-left: 0;
        flex-wrap: wrap;
    }
}

/* Netzbetreiber-Filter als echte Checkboxen: Häkchen raus = Anbieter ausgeblendet */
.provider-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    min-height: 30px;
    padding: 4px 11px 4px 9px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    color: var(--text-muted);
    cursor: pointer;
    font-weight: 850;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.provider-filter-check input {
    width: 17px;
    height: 17px;
    margin: 0;
    cursor: pointer;
    accent-color: var(--o2-brand-blue);
}

.provider-filter-check.is-telekom input {
    accent-color: var(--telekom-magenta);
}

.provider-filter-check.is-ayyildiz input {
    accent-color: var(--ayyildiz-red);
}

.provider-filter-check.is-congstar input {
    accent-color: var(--congstar-orange);
}

.provider-filter-check.is-active {
    border-color: var(--o2-brand-blue);
    background: var(--o2-cyan-soft);
    color: var(--o2-brand-blue);
}

.provider-filter-check.is-telekom.is-active {
    border-color: var(--telekom-magenta);
    background: var(--telekom-magenta-soft);
    color: var(--telekom-magenta);
}

.provider-filter-check.is-ayyildiz.is-active {
    border-color: var(--ayyildiz-red);
    background: var(--ayyildiz-red-soft);
    color: var(--ayyildiz-red);
}

.provider-filter-check:not(.is-active) {
    opacity: 0.65;
}

.provider-filter-btn.is-ayyildiz.is-active,
.tab-btn.ayyildiz-tab-btn.active {
    border-color: var(--ayyildiz-red) !important;
    background: var(--ayyildiz-red) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(215, 25, 32, 0.24);
}

.tab-btn.ayyildiz-tab-btn:hover:not(.active) {
    background: var(--ayyildiz-red-soft);
    color: var(--ayyildiz-red);
}

.tab-btn.ayyildiz-tab-btn,
.ayyildiz-section-title {
    color: var(--ayyildiz-red);
}

.sub-section-title.ayyildiz-section-title {
    color: var(--ayyildiz-red);
    border-left-color: var(--ayyildiz-red);
}

.ayyildiz-card {
    border-color: #efb7ba;
    min-width: 0;
}

/* Parität zu .telekom-card: gleiche Detail-Stylings in AY-YILDIZ-CI */
.ayyildiz-card:hover {
    box-shadow: 0 12px 26px rgba(215, 25, 32, 0.16);
}

.ayyildiz-card.selected {
    outline-color: var(--ayyildiz-red);
    box-shadow: 0 0 20px rgba(215, 25, 32, 0.28);
}

.ayyildiz-card .speed-value-unified,
.ayyildiz-card .dual-price-row strong,
.ayyildiz-card .card-back-name {
    color: var(--ayyildiz-red);
}

.ayyildiz-card .dual-price-box {
    border-color: var(--ayyildiz-red);
}

.ayyildiz-card .card-options-hint {
    border-color: #efb7ba;
    background: var(--ayyildiz-red-soft);
}

.ayyildiz-card .add-to-cart-btn:hover,
.ayyildiz-card .add-to-cart-btn.in-cart {
    border-color: var(--ayyildiz-red);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(215, 25, 32, 0.24);
}

.ayyildiz-card .add-to-cart-btn.in-cart .add-to-cart-count {
    color: var(--ayyildiz-red);
}

.ayyildiz-card .card-title,
.ayyildiz-card .section-value,
.ayyildiz-card .section-sub,
.ayyildiz-card .features li,
.ayyildiz-card .ap-text {
    overflow-wrap: anywhere;
}

.ayyildiz-card .card-header,
.ayyildiz-card .fiveg-badge,
.ayyildiz-card .badge-button,
.ayyildiz-card .add-to-cart-btn:hover,
.ayyildiz-card .add-to-cart-btn.in-cart,
.ayyildiz-card .card-back-close {
    background: var(--ayyildiz-red);
}

.ayyildiz-card .section-value,
.ayyildiz-card .price-text,
.ayyildiz-card .card-options-hint-text,
.ayyildiz-card .card-options-hint-summary {
    color: var(--ayyildiz-red);
}

.ayyildiz-card .price-box,
.ayyildiz-card .add-to-cart-btn {
    border-color: var(--ayyildiz-red);
}

.ayyildiz-card .add-to-cart-btn {
    color: var(--ayyildiz-red);
}

.ayyildiz-card .features {
    height: auto;
    min-height: 80px;
}

.ayyildiz-card-brand {
    display: block;
    margin-bottom: 4px;
    font-size: 0.62rem;
    font-weight: 800;
}

.price-unknown-box {
    min-height: 52px;
}

.price-unknown-text {
    color: var(--text-secondary);
    font-size: 0.74rem;
    font-weight: 850;
    line-height: 1.25;
}

.ayyildiz-options,
.ayyildiz-hardware-options {
    display: grid;
    gap: 7px;
    width: 100%;
}

.ayyildiz-option-choice {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr);
    gap: 8px;
    align-items: center;
    padding: 8px;
    border: 1px solid #d8dee8;
    border-radius: 7px;
    background: #ffffff;
    cursor: pointer;
    text-align: left;
}

.ayyildiz-option-choice:has(input:checked) {
    border-color: var(--ayyildiz-red);
    background: var(--ayyildiz-red-soft);
}

.ayyildiz-option-choice input,
.ayyildiz-card input[type="checkbox"] {
    accent-color: var(--ayyildiz-red);
}

.ayyildiz-option-choice span strong,
.ayyildiz-option-choice span em {
    display: block;
}

.ayyildiz-option-choice span strong {
    font-size: 0.74rem;
}

.ayyildiz-option-choice span em {
    margin-top: 2px;
    color: var(--ayyildiz-red);
    font-size: 0.64rem;
    font-style: normal;
    font-weight: 800;
}

.ayyildiz-benefit-options {
    position: relative;
    border: 1px solid #d4e4f3;
    border-radius: 14px;
    padding: 11px;
    background: #f8fbfe;
}

.ayyildiz-benefit-hint {
    display: block;
    color: #6b8198;
    font-size: 0.64rem;
    font-weight: 800;
}

.cart-item.is-ayyildiz .cart-item-position {
    background: var(--tool-primary);
}

.cart-print-brand-word-ayyildiz {
    color: var(--ayyildiz-red);
    font-size: 1.2rem;
}

/* ============================================================
   SMARTPHONE: Warenkorb-Leiste unten + Warenkorb als Bottom-Sheet
   ============================================================ */

#mobile-cart-bar,
#mobile-cart-backdrop,
#mobile-cart-close {
    display: none;
}

body[data-layout="smartphone"] {
    /* Platz für die fixe Warenkorb-Leiste + Android-Gestenleiste */
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
}

body[data-layout="smartphone"] #mobile-cart-bar {
    position: fixed;
    left: 10px;
    right: 10px;
    bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    z-index: 960;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border: none;
    border-radius: 16px;
    background: var(--o2-brand-blue);
    color: #ffffff;
    font-weight: 800;
    text-align: left;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(0, 17, 44, 0.35);
}

body[data-layout="smartphone"] #mobile-cart-bar.mcb-pulse {
    animation: mcb-pulse 0.45s ease;
}

@keyframes mcb-pulse {
    0% { transform: scale(1); }
    35% { transform: scale(1.03); background: var(--o2-brand-blue-deep); }
    100% { transform: scale(1); }
}

#mobile-cart-bar .mcb-icon {
    position: relative;
    font-size: 1.25rem;
    line-height: 1;
}

#mobile-cart-bar .mcb-icon b {
    position: absolute;
    top: -7px;
    right: -11px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: var(--o2-cyan);
    color: #00112c;
    font-size: 0.68rem;
    font-weight: 900;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#mobile-cart-bar .mcb-totals {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
    margin-left: 8px;
}

#mobile-cart-bar .mcb-totals strong {
    font-size: 0.95rem;
    line-height: 1.15;
    white-space: nowrap;
}

#mobile-cart-bar .mcb-totals small {
    font-size: 0.68rem;
    font-weight: 700;
    opacity: 0.85;
    white-space: nowrap;
}

#mobile-cart-bar .mcb-open {
    font-size: 0.78rem;
    font-weight: 900;
    white-space: nowrap;
}

#mobile-cart-bar.mcb-empty .mcb-totals small {
    display: none;
}

body[data-layout="smartphone"] #mobile-cart-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 965;
    background: rgba(0, 17, 44, 0.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

body[data-layout="smartphone"].mobile-cart-open #mobile-cart-backdrop {
    opacity: 1;
    pointer-events: auto;
}

/* Warenkorb als Bottom-Sheet: standardmäßig unten herausgeschoben */
body[data-layout="smartphone"] .sidebar-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: auto;
    width: 100%;
    margin: 0;
    /* dvh = tatsächlich sichtbare Höhe (mobile Browserleisten rausgerechnet);
       vh-Zeile als Fallback für ältere Browser */
    max-height: 82vh;
    max-height: 82dvh;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    border-radius: 18px 18px 0 0;
    border-top: 4px solid var(--o2-cyan);
    z-index: 970;
    transform: translateY(105%);
    transition: transform 0.28s ease;
    box-shadow: 0 -10px 34px rgba(0, 17, 44, 0.35);
}

body[data-layout="smartphone"].mobile-cart-open .sidebar-cart {
    transform: translateY(0);
}

body[data-layout="smartphone"] #mobile-cart-close {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 9px 12px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    background: #f1f5f9;
    color: var(--o2-brand-blue);
    font-weight: 850;
    font-size: 0.82rem;
    cursor: pointer;
}

/* Vergleichs-Leiste über der Warenkorb-Leiste halten */
body[data-layout="smartphone"] .compare-tray {
    bottom: calc(78px + env(safe-area-inset-bottom, 0px));
}

body.compare-tray-visible[data-layout="smartphone"] {
    padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px) + var(--compare-tray-height, 160px));
}

/* Kompakte Kopfzeile: Buttons als 2-Spalten-Raster statt gestapelt */
body[data-layout="smartphone"] .header-top-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

body[data-layout="smartphone"] .header-top-row .provider-filter,
body[data-layout="smartphone"] #mode-toggle-btn {
    grid-column: 1 / -1;
}

body[data-layout="smartphone"] .header-top-row .provider-filter {
    justify-content: center;
    margin-left: 0;
    padding: 4px 0 0;
}

body[data-layout="smartphone"] #mode-toggle-btn {
    margin-left: 0;
}

/* Tool-Tabs (Überweisungshilfe etc.): kein Warenkorb, keine Leiste */
body.tool-tab-active #mobile-cart-bar,
body.tool-tab-active #mobile-cart-backdrop {
    display: none !important;
}

/* Smartphone: Touch-Ziele, Eingaben und Modale */
body[data-layout="smartphone"] .add-to-cart-btn,
body[data-layout="smartphone"] .restore-all-btn,
body[data-layout="smartphone"] .compare-card-btn,
body[data-layout="smartphone"] .hw-tile-cart-btn {
    min-height: 44px;
}

body[data-layout="smartphone"] .cart-item .qty-btn,
body[data-layout="smartphone"] .cart-item button {
    min-width: 34px;
    min-height: 34px;
}

/* 16px verhindert Auto-Zoom beim Fokussieren von Eingabefeldern */
body[data-layout="smartphone"] input,
body[data-layout="smartphone"] select,
body[data-layout="smartphone"] textarea {
    font-size: 16px;
}

body[data-layout="smartphone"] .comparison-modal {
    padding: 8px;
    align-items: flex-end;
}

body[data-layout="smartphone"] .comparison-dialog {
    max-height: 88vh;
    max-height: 88dvh;
    border-radius: 14px 14px 0 0;
}

body[data-layout="smartphone"] .comparison-scroll {
    -webkit-overflow-scrolling: touch;
}

/* Kein horizontaler Seiten-Überlauf: alles bleibt in der Viewport-Breite */
body[data-layout="smartphone"] .main-content,
body[data-layout="smartphone"] .tab-content,
body[data-layout="smartphone"] .hardware-layout,
body[data-layout="smartphone"] .tool-shell {
    max-width: 100%;
    min-width: 0;
}

body[data-layout="smartphone"] .tool-receipt {
    max-width: 100%;
    overflow-x: hidden;
}

/* Druck: Leiste/Backdrop nie mitdrucken, Warenkorb-Sheet für Druck freigeben */
@media print {
    #mobile-cart-bar,
    #mobile-cart-backdrop,
    #mobile-cart-close {
        display: none !important;
    }

    body[data-layout="smartphone"] .sidebar-cart {
        position: static !important;
        transform: none !important;
        max-height: none !important;
        overflow: visible !important;
        box-shadow: none !important;
        border-radius: 0 !important;
    }
}

.provider-filter-check.is-congstar.is-active {
    border-color: var(--congstar-black);
    background: var(--congstar-orange-soft);
    color: var(--congstar-black);
}

.tab-btn.congstar-tab-btn,
.congstar-section-title {
    color: var(--congstar-black) !important;
}

.tab-btn.congstar-tab-btn:hover:not(.active) {
    border-color: var(--congstar-orange) !important;
    background: var(--congstar-orange-soft) !important;
    color: var(--congstar-black) !important;
}

.tab-btn.congstar-tab-btn.active {
    border-color: var(--congstar-black) !important;
    background: var(--congstar-black) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 var(--congstar-orange), 0 4px 10px rgba(41, 41, 41, 0.22) !important;
}

.sub-section-title.congstar-section-title {
    border-left-color: var(--congstar-orange);
}

.congstar-card {
    min-width: 0;
    border-color: #cfcfcf;
}

.congstar-card:hover {
    box-shadow: 0 12px 26px rgba(41, 41, 41, 0.16);
}

.congstar-card.selected {
    outline-color: var(--congstar-orange);
    box-shadow: 0 0 20px rgba(232, 74, 12, 0.24);
}

.congstar-card .card-header,
.congstar-card .card-back-close {
    background: var(--congstar-black);
}

.congstar-card-brand {
    display: block;
    margin-bottom: 4px;
    color: #ffffff;
    font-size: 0.62rem;
    font-weight: 850;
    text-transform: lowercase;
}

.congstar-card .section-value,
.congstar-card .speed-value-unified,
.congstar-card .price-text,
.congstar-card .card-options-hint-text,
.congstar-card .card-options-hint-summary,
.congstar-card .card-back-name {
    color: var(--congstar-black);
}

.congstar-card .fiveg-badge,
.congstar-card .badge-button,
.congstar-card .add-to-cart-btn:hover,
.congstar-card .add-to-cart-btn.in-cart {
    background: var(--congstar-orange);
}

.congstar-card .price-box,
.congstar-card .add-to-cart-btn {
    border-color: var(--congstar-orange);
}

.congstar-card .add-to-cart-btn {
    color: var(--congstar-black);
}

.congstar-card .add-to-cart-btn:hover,
.congstar-card .add-to-cart-btn.in-cart {
    color: #ffffff;
}

.congstar-card .add-to-cart-btn.in-cart .add-to-cart-count {
    color: var(--congstar-orange);
}

.congstar-card .features li::before {
    color: var(--congstar-orange);
}

.congstar-card .card-options-hint {
    border-color: #f0b49b;
    background: var(--congstar-orange-soft);
}

.congstar-card .features {
    height: auto;
    min-height: 80px;
}

.congstar-card .blue-option-toggle:hover,
.congstar-card .blue-option-toggle:has(input:checked) {
    border-color: var(--congstar-orange);
    background: var(--congstar-orange-soft);
    box-shadow: 0 0 0 1px rgba(232, 74, 12, 0.18);
}

.congstar-card .blue-option-toggle input:checked ~ .option-switch {
    background: var(--congstar-orange);
}

.congstar-card .blue-option-toggle:has(input:checked) .option-text strong {
    color: var(--congstar-black);
}

.cart-item.is-congstar .cart-item-position,
.cart-item.is-congstar .cart-item-type {
    color: var(--congstar-black);
}

/* Letzte Smartphone-Korrekturen nach den älteren Mobilregeln. */
body[data-layout="smartphone"] .bubble {
    display: none;
}

body[data-layout="smartphone"] .card-header {
    min-height: 64px;
}

body[data-layout="smartphone"] .hw-tile-rate-row {
    grid-template-columns: 1fr;
    gap: 3px 6px;
    padding: 6px 7px;
}

body[data-layout="smartphone"] .hw-tile-rate-sub {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2px;
}

body[data-layout="smartphone"] .hw-tile-rate-sub span {
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Mobile Warenkorb: echtes Vollbild-Sheet mit eindeutigem Scrollbereich. */
body[data-layout="smartphone"] .sidebar-cart {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-height: 100vh;
    max-height: 100dvh;
    padding: calc(12px + env(safe-area-inset-top, 0px)) 12px calc(12px + env(safe-area-inset-bottom, 0px));
    overflow: hidden;
    overscroll-behavior: none;
    border-radius: 0;
    transform: translate3d(0, 102%, 0);
}

body[data-layout="smartphone"].mobile-cart-open .sidebar-cart {
    transform: translate3d(0, 0, 0);
}

body[data-layout="smartphone"] #mobile-cart-close {
    position: absolute;
    top: calc(12px + env(safe-area-inset-top, 0px));
    right: 12px;
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    width: auto;
    min-width: 92px;
    min-height: 38px;
    margin: 0;
    padding: 6px 10px;
    border-color: #cbd5e1;
    background: #f1f5f9;
}

body[data-layout="smartphone"] #mobile-cart-close span:first-child {
    font-size: 1.15rem;
    line-height: 1;
}

body[data-layout="smartphone"] #mobile-cart-close span:last-child {
    font-size: 0.75rem;
}

body[data-layout="smartphone"] .cart-title {
    position: relative;
    top: auto;
    flex: 0 0 auto;
    min-height: 48px;
    margin: 0 0 9px;
    padding: 2px 108px 9px 2px;
}

body[data-layout="smartphone"] .cart-title strong {
    font-size: 1.16rem;
}

body[data-layout="smartphone"] .cart-items {
    flex: 1 1 auto;
    min-height: 0;
    max-height: none;
    margin: 0 0 9px;
    padding: 1px 5px 12px 1px;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
}

body[data-layout="smartphone"] .cart-items:focus {
    outline: 2px solid transparent;
    outline-offset: -2px;
}

body[data-layout="smartphone"] .cart-items:focus-visible {
    outline-color: var(--o2-cyan);
}

body[data-layout="smartphone"] .cart-totals {
    position: relative;
    bottom: auto;
    flex: 0 0 auto;
    padding: 10px 11px;
    box-shadow: 0 -5px 15px rgba(0, 17, 44, 0.08);
}

body[data-layout="smartphone"] .cart-totals .total-row {
    margin-bottom: 5px;
    font-size: 0.84rem;
}

body[data-layout="smartphone"] .cart-totals .onetime-row {
    padding-top: 6px;
}

body[data-layout="smartphone"] .cart-totals .provi-sum-code-box {
    margin-top: 7px;
    padding-top: 5px;
}

body[data-layout="smartphone"] .cart-totals .cart-action-row {
    margin-top: 7px;
}

body[data-layout="smartphone"] .cart-totals .print-cart-action-btn {
    min-height: 42px;
    padding-block: 8px;
}

/* o2 Mobilfunk-CI: nur Provider-Tabs und Tarifkarten, nicht Hardware/Service/Schutz. */
.tab-btn[data-provider="o2"] {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: #0033a0 !important;
    box-shadow: none !important;
}

.tab-btn[data-provider="o2"]:hover:not(.active) {
    border-color: #8dd8f8 !important;
    background: #eaf8fe !important;
    color: #001f78 !important;
}

.tab-btn[data-provider="o2"].active {
    border-color: #0033a0 !important;
    background: linear-gradient(135deg, #0019a5 0%, #0033a0 68%, #0066cc 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 #00b7f1, 0 5px 12px rgba(0, 51, 160, 0.22) !important;
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .card {
    border-color: #b8d9ee;
    box-shadow: 0 5px 16px rgba(0, 51, 160, 0.08);
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .card:hover {
    border-color: #00a9e8;
    box-shadow: 0 10px 24px rgba(0, 51, 160, 0.15);
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .card.selected {
    border-color: #0033a0;
    box-shadow: 0 0 0 2px rgba(0, 183, 241, 0.28), 0 10px 24px rgba(0, 51, 160, 0.16);
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .card-header,
:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .card-back-close {
    background: linear-gradient(135deg, #0019a5 0%, #0033a0 70%, #0076ce 100%);
    color: #ffffff;
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) :is(.section-value, .speed-value-unified, .price-text, .card-back-name) {
    color: #0033a0;
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) :is(.price-box, .add-to-cart-btn) {
    border-color: #00a9e8;
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .price-box {
    background: linear-gradient(135deg, #f4fbff, #e8f7fd);
}

:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .add-to-cart-btn:hover,
:is(#tab-standard, #tab-young, #tab-plus, #tab-kombi, #tab-blue, #tab-high-value) .add-to-cart-btn.in-cart {
    border-color: #0033a0;
    background: #0033a0;
    color: #ffffff;
}

.congstar-young-title {
    margin-top: 24px;
}

.congstar-tier-title {
    margin-top: 24px;
}

.congstar-card .congstar-porting-toggle {
    accent-color: #e85b00;
}

/* o2 Internet Zuhause nutzt dieselbe Kartenfamilie wie o2 Mobilfunk. */
:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) .card {
    border-color: #b8d9ee;
    box-shadow: 0 5px 16px rgba(0, 51, 160, 0.08);
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) .card:hover {
    border-color: #00a9e8;
    box-shadow: 0 10px 24px rgba(0, 51, 160, 0.15);
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) .card.selected {
    border-color: #0033a0;
    box-shadow: 0 0 0 2px rgba(0, 183, 241, 0.28), 0 10px 24px rgba(0, 51, 160, 0.16);
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) :is(.card-header, .card-back-close) {
    background: linear-gradient(135deg, #0019a5 0%, #0033a0 70%, #0076ce 100%);
    color: #ffffff;
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) :is(.section-value, .speed-value-unified, .price-text, .card-back-name) {
    color: #0033a0;
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) :is(.price-box, .add-to-cart-btn) {
    border-color: #00a9e8;
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) .price-box {
    background: linear-gradient(135deg, #f4fbff, #e8f7fd);
}

:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) .add-to-cart-btn:hover,
:is(#tab-zuhause-kombi-cable-yes, #tab-zuhause-kombi-cable-no, #tab-zuhause-cable-yes, #tab-zuhause-cable-no) .add-to-cart-btn.in-cart {
    border-color: #0033a0;
    background: #0033a0;
    color: #ffffff;
}

/* Einheitliches Kartenraster: variable AP- und Options-Texte verschieben nie
   wieder Preis und Aktionen innerhalb einer Desktop-/Tablet-Zeile. */
body[data-layout="desktop"] .tab-content .card-body > .ap-text,
body[data-layout="tablet"] .tab-content .card-body > .ap-text {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px;
    margin-bottom: 9px;
}

body[data-layout="desktop"] .tab-content .card.has-back .card-options-hint,
body[data-layout="tablet"] .tab-content .card.has-back .card-options-hint {
    display: flex;
    box-sizing: border-box;
    height: 58px;
    min-height: 58px;
    margin: 0 0 10px;
    visibility: hidden;
    pointer-events: none;
}

body[data-layout="desktop"] .tab-content .card.has-back .card-options-hint.has-selection,
body[data-layout="tablet"] .tab-content .card.has-back .card-options-hint.has-selection {
    visibility: visible;
    pointer-events: auto;
}

body[data-layout="desktop"] .tab-content .card-body > :is(.price-box, .dual-price-box),
body[data-layout="tablet"] .tab-content .card-body > :is(.price-box, .dual-price-box) {
    box-sizing: border-box;
    flex: 0 0 auto;
}

body[data-layout="desktop"] .tab-content .card > .add-to-cart-btn,
body[data-layout="tablet"] .tab-content .card > .add-to-cart-btn {
    box-sizing: border-box;
    min-height: 56px;
    flex: 0 0 56px;
}

/* Telekom und AY YILDIZ folgen derselben modernen Tab-Systematik wie o2/congstar. */
.tab-btn.telekom-tab-btn,
.tab-btn.ayyildiz-tab-btn {
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
}

.tab-btn.telekom-tab-btn {
    color: var(--telekom-magenta) !important;
}

.tab-btn.telekom-tab-btn:hover:not(.active) {
    border-color: #ef9ac6 !important;
    background: var(--telekom-magenta-soft) !important;
    color: var(--telekom-magenta) !important;
}

.tab-btn.telekom-tab-btn.active {
    border-color: var(--telekom-magenta) !important;
    background: linear-gradient(135deg, #b5005c 0%, #e20074 72%, #f03b95 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 #ff8fc8, 0 5px 12px rgba(226, 0, 116, 0.24) !important;
}

.tab-btn.ayyildiz-tab-btn {
    color: var(--ayyildiz-red) !important;
}

.tab-btn.ayyildiz-tab-btn:hover:not(.active) {
    border-color: #ef9da1 !important;
    background: var(--ayyildiz-red-soft) !important;
    color: var(--ayyildiz-red) !important;
}

.tab-btn.ayyildiz-tab-btn.active {
    border-color: var(--ayyildiz-red) !important;
    background: linear-gradient(135deg, #b70f17 0%, #d71920 70%, #eb4147 100%) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 #ff979b, 0 5px 12px rgba(215, 25, 32, 0.24) !important;
}

/* Dynamischer Ergebnis-Tab: echte CI-Kacheln, beliebig viele Ergebnisse. */
.filter-results-summary {
    margin: -2px 0 16px 24px;
    color: #52677f;
    font-size: 0.76rem;
    font-weight: 750;
    line-height: 1.35;
}

.filter-results-grid {
    grid-template-columns: repeat(6, minmax(130px, 1fr));
    align-items: stretch;
}

.filter-results-empty {
    margin: 0 24px 18px;
    padding: 14px;
    border: 1px solid #cfe4fb;
    border-radius: 10px;
    background: #f0f7ff;
    color: #25405f;
    font-size: 0.86rem;
    font-weight: 750;
    text-align: center;
}

.filter-result-card {
    min-width: 0;
    cursor: default;
    transform: none !important;
}

.filter-result-card .card-body > :is(.price-box, .dual-price-box) {
    margin-top: auto;
}

.filter-result-card .card-body > .ap-text {
    box-sizing: border-box;
    height: 54px;
    min-height: 54px;
}

.filter-result-provider-o2 {
    border-color: #b8d9ee;
    box-shadow: 0 5px 16px rgba(0, 51, 160, 0.08);
}

.filter-result-provider-o2 .card-header {
    background: linear-gradient(135deg, #0019a5 0%, #0033a0 70%, #0076ce 100%);
    color: #ffffff;
}

.filter-result-provider-o2 :is(.section-value, .speed-value-unified, .price-text) {
    color: #0033a0;
}

.filter-result-provider-o2 .price-box {
    border-color: #00a9e8;
    background: linear-gradient(135deg, #f4fbff, #e8f7fd);
}

.tab-btn.filter-results-tab-btn {
    border: 1px solid transparent !important;
    background: transparent !important;
    color: var(--tool-primary) !important;
    box-shadow: none !important;
}

.tab-btn.filter-results-tab-btn:hover:not(.active) {
    border-color: var(--tool-accent) !important;
    background: var(--tool-accent-soft) !important;
    color: var(--tool-primary-dark) !important;
}

.tab-btn.filter-results-tab-btn.active {
    border-color: var(--tool-primary) !important;
    background: linear-gradient(135deg, var(--tool-primary-dark), var(--tool-primary)) !important;
    color: #ffffff !important;
    box-shadow: inset 0 -3px 0 var(--tool-accent), 0 5px 12px rgba(23, 58, 94, 0.22) !important;
}

/* Desktop/Tablet: Kategorien kompakt halten, auch auf Touch- und Hybridgeräten. */
body:not([data-layout="smartphone"]) .tab-container-nested {
    padding-block: 1px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row {
    min-height: 0;
    padding-block: 2px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-navigation {
    display: grid;
    grid-auto-flow: column;
    gap: 5px;
    min-height: 0;
    padding-block: 2px;
}

body[data-layout="desktop"] .tab-container-nested .tab-navigation {
    flex: 0 1 auto;
    width: max-content;
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body[data-layout="desktop"] .tab-container-nested .tab-navigation::-webkit-scrollbar {
    display: none;
}

body[data-layout="desktop"] .tab-container-nested .tab-navigation {
    grid-auto-columns: 128px;
}

body[data-layout="tablet"] .tab-container-nested .tab-navigation {
    grid-auto-columns: 128px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row-o2 .tab-navigation {
    grid-auto-columns: max-content;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    flex: none;
    min-height: 34px;
    padding: 5px 8px;
    line-height: 1.05;
    text-align: center;
}

body[data-layout="desktop"] .tab-container-nested .tab-row:first-child .tab-btn {
    padding-inline: 5px;
    font-size: 0.84rem;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row-o2 .tab-btn {
    width: auto;
    min-width: 112px;
    padding-inline: 11px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row-o2 .family-renewal-nav-btn {
    min-width: 176px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row:nth-child(2) .tab-btn {
    padding-inline: 3px;
    font-size: 0.82rem;
    letter-spacing: -0.1px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn:not(.active) {
    border: 1px solid #cbd5e1 !important;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn:hover:not(.active) {
    border-color: currentColor !important;
}

.tab-container-nested .tab-btn.internet-mode-hidden {
    display: none !important;
}

.tab-container-nested .tab-btn.provider-benefit-hidden,
.filter-tab-groups .tariff-group-toggle.provider-benefit-hidden {
    display: none !important;
}

.provider-filter-item {
    display: grid;
    grid-template-rows: 34px 20px;
    min-height: 57px;
    width: 122px;
    min-width: 122px;
    align-content: start;
    gap: 3px;
    padding: 0;
    border: 0;
    background: transparent;
    box-sizing: border-box;
}

.provider-filter-item .provider-filter-check {
    grid-row: 1;
    width: 100%;
    height: 34px;
    align-self: start;
    justify-content: flex-start;
}

.provider-benefit-toggle {
    display: inline-flex;
    width: 100%;
    min-height: 20px;
    align-items: center;
    justify-content: flex-start;
    gap: 5px;
    padding: 2px 6px;
    border: 1px solid #d6e0eb;
    border-radius: 999px;
    background: #ffffff;
    color: #52677f;
    cursor: pointer;
    font-size: 0.6rem;
    line-height: 1;
    white-space: nowrap;
}

.provider-benefit-toggle > span {
    position: relative;
    width: 22px;
    height: 12px;
    flex: 0 0 22px;
    border-radius: 999px;
    background: #cbd5e1;
    transition: background 0.16s ease;
}

.provider-benefit-toggle > span::after {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.24);
    content: "";
    transition: transform 0.16s ease;
}

.provider-benefit-toggle.is-active {
    border-color: #8dd8f8;
    background: #eaf8fe;
    color: var(--o2-brand-blue);
}

.provider-benefit-toggle.is-active > span {
    background: var(--o2-brand-blue);
}

.provider-benefit-toggle.is-active > span::after {
    transform: translateX(10px);
}

.provider-benefit-toggle.is-telekom.is-active {
    border-color: #ef9ac6;
    background: var(--telekom-magenta-soft);
    color: var(--telekom-magenta);
}

.provider-benefit-toggle.is-telekom.is-active > span {
    background: var(--telekom-magenta);
}

/* MagentaEINS wird zentral im Anbieterfilter gesteuert. */
.telekom-magentaeins-choice {
    display: none !important;
}

body:not([data-layout="smartphone"]) .header-filter-row .provider-filter {
    grid-template-rows: auto;
    align-items: stretch;
}

body:not([data-layout="smartphone"]) .header-filter-row .provider-filter-check {
    min-height: 34px;
    padding: 4px 10px;
    border-width: 1px;
    border-style: solid;
}

body[data-layout="smartphone"] .provider-filter-item {
    width: auto;
    min-width: 0;
}

/* Desktop/Tablet: globale Tariffilter in derselben kompakten Höhe. */
body:not([data-layout="smartphone"]) .header-filter-row {
    min-height: 0;
    align-items: center;
    padding: 5px 10px;
}

body:not([data-layout="smartphone"]) .header-filter-row .provider-filter {
    grid-template-rows: auto;
    align-items: stretch;
}

body:not([data-layout="smartphone"]) .header-filter-row .provider-filter-check {
    min-height: 34px;
    padding-block: 4px;
}

body:not([data-layout="smartphone"]) .tariff-range-filter {
    grid-template-rows: 44px;
}

body:not([data-layout="smartphone"]) .tariff-filter-control {
    height: 44px;
}

body:not([data-layout="smartphone"]) .tariff-filter-symbol {
    height: 34px;
}

body:not([data-layout="smartphone"]) .tariff-filter-control[data-tariff-filter-control="price"] .tariff-filter-field,
body:not([data-layout="smartphone"]) .tariff-filter-control[data-tariff-filter-control="gb"] .tariff-filter-field,
body:not([data-layout="smartphone"]) .tariff-filter-control[data-tariff-filter-control="gb"] .tariff-range-filter-value {
    height: 34px;
}

body:not([data-layout="smartphone"]) .tariff-stepper-buttons {
    height: 34px;
}

body:not([data-layout="smartphone"]) :is(.tariff-unlimited-quick, .tariff-filter-result, .tariff-range-filter-reset),
body:not([data-layout="smartphone"]) .tariff-filter-secondary .tariff-range-filter-reset {
    height: 44px;
    min-height: 44px;
}

body:not([data-layout="smartphone"]) .tariff-filter-secondary {
    min-height: 44px;
}

@media (max-width: 1500px) {
    .filter-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1000px) {
    .filter-results-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   Einheitliches Bedienraster: Anbieter, Schnellfilter und Hauptnavigation
   -------------------------------------------------------------------------- */
body:not([data-layout="smartphone"]) .header-filter-row {
    min-height: 68px;
    align-items: center;
    padding: 7px 10px;
    border-radius: 14px;
}

body:not([data-layout="smartphone"]) .header-filter-row .provider-filter {
    grid-template-columns: repeat(4, 124px);
    grid-template-rows: 54px;
    align-items: start;
    gap: 7px;
    padding-right: 16px;
}

body:not([data-layout="smartphone"]) .provider-filter-item {
    display: grid;
    grid-template-rows: 30px 18px;
    width: 124px;
    min-width: 124px;
    min-height: 54px;
    align-content: start;
    gap: 0;
    padding: 2px 6px 3px;
    border: 1px solid #cbd8e6;
    border-radius: 10px;
    background: #ffffff;
    box-sizing: border-box;
}

body:not([data-layout="smartphone"]) .provider-filter-item.is-o2 {
    border-color: #9dc8e3;
    background: #f5fbff;
}

body:not([data-layout="smartphone"]) .provider-filter-item.is-telekom {
    border-color: #efacd0;
    background: #fff7fb;
}

body:not([data-layout="smartphone"]) .provider-filter-item.is-congstar {
    border-color: #c9c2be;
    background: #fff9f6;
}

body:not([data-layout="smartphone"]) .provider-filter-item.is-ayyildiz {
    border-color: #efa4a8;
    background: #fff7f7;
}

body:not([data-layout="smartphone"]) .provider-filter-item:has(.provider-filter-check:not(.is-active)) {
    border-color: #d8e0e9;
    background: #f8fafc;
}

body:not([data-layout="smartphone"]) .provider-filter-item .provider-filter-check {
    grid-row: 1;
    width: 100%;
    height: 30px;
    min-height: 30px;
    align-self: start;
    justify-content: flex-start;
    gap: 6px;
    padding: 0;
    border: 0 !important;
    border-radius: 0;
    background: transparent !important;
    box-shadow: none !important;
    font-size: 0.82rem;
    font-weight: 800;
    line-height: 1;
    white-space: nowrap;
}

body:not([data-layout="smartphone"]) .provider-filter-item .provider-filter-check input {
    width: 16px;
    height: 16px;
    flex: 0 0 16px;
}

body:not([data-layout="smartphone"]) .provider-filter-item .provider-filter-check > span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body:not([data-layout="smartphone"]) .provider-filter-item .provider-benefit-toggle {
    width: max-content;
    max-width: 100%;
    min-height: 19px;
    align-items: center;
    justify-content: flex-start;
    gap: 4px;
    padding: 1px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    font-size: 0.64rem;
    line-height: 1.2;
}

body:not([data-layout="smartphone"]) .provider-filter-item .provider-benefit-toggle.is-active,
body:not([data-layout="smartphone"]) .provider-filter-item .provider-benefit-toggle.is-telekom.is-active {
    border-color: transparent;
    background: transparent;
}

body:not([data-layout="smartphone"]) .provider-benefit-toggle strong {
    overflow: visible;
    font-weight: 750;
    line-height: 1.25;
    white-space: nowrap;
}

.internet-technology-title {
    margin-top: 12px !important;
    margin-bottom: 10px !important;
    font-size: 1rem !important;
}

.internet-cable-title {
    margin-top: 6px !important;
}

body:not([data-layout="smartphone"]) .header-filter-row .tariff-range-filter {
    grid-template-columns: 180px 200px 100px 92px 100px;
    grid-template-rows: 44px;
    justify-content: start;
    column-gap: 8px;
    padding-left: 16px;
}

body:not([data-layout="smartphone"]) .tariff-filter-control {
    grid-template-columns: 36px minmax(0, 1fr) 28px;
    height: 44px;
    gap: 6px;
    border-radius: 10px;
}

body:not([data-layout="smartphone"]) .tariff-filter-symbol {
    width: 36px;
    height: 34px;
    border-radius: 8px;
}

body:not([data-layout="smartphone"]) .tariff-filter-control[data-tariff-filter-control="price"] .tariff-range-filter-value input,
body:not([data-layout="smartphone"]) .tariff-filter-control[data-tariff-filter-control="gb"] .tariff-range-filter-value input {
    font-size: 0.92rem;
    font-weight: 850;
}

body:not([data-layout="smartphone"]) .tariff-stepper-buttons {
    width: 28px;
    height: 34px;
    flex-basis: 28px;
    border-radius: 7px;
}

body:not([data-layout="smartphone"]) :is(.tariff-unlimited-quick, .tariff-filter-result, .tariff-range-filter-reset),
body:not([data-layout="smartphone"]) .tariff-filter-secondary .tariff-range-filter-reset {
    height: 44px;
    min-height: 44px;
    border-radius: 10px;
    font-size: 0.68rem;
    font-weight: 800;
}

body:not([data-layout="smartphone"]) .tab-container-nested {
    padding: 4px 12px 5px;
    border: 1px solid #dbe4ee;
    border-radius: 14px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row[hidden] {
    display: none !important;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-row {
    min-height: 0;
    padding-block: 1px;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-navigation {
    grid-auto-columns: 120px;
    gap: 7px;
    padding: 3px 1px 6px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn,
body[data-layout="desktop"] .tab-container-nested .tab-row:first-child .tab-btn,
body:not([data-layout="smartphone"]) .tab-container-nested .tab-row:nth-child(2) .tab-btn {
    min-height: 34px;
    padding: 5px 7px;
    border-radius: 10px !important;
    font-size: 0.78rem;
    font-weight: 750;
    line-height: 1.1;
    letter-spacing: 0;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn:not(.active) {
    border: 1px solid #d4dee9 !important;
    background: #ffffff !important;
    box-shadow: 0 2px 5px rgba(15, 35, 58, 0.06);
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn:hover:not(.active) {
    border-color: #9fc3dd !important;
    background: #f4faff !important;
    color: var(--tool-primary-dark) !important;
    box-shadow: 0 3px 8px rgba(15, 35, 58, 0.1);
    transform: translateY(-1px);
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn.telekom-tab-btn:hover:not(.active) {
    border-color: #ef9ac6 !important;
    background: var(--telekom-magenta-soft) !important;
    color: var(--telekom-magenta) !important;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn.congstar-tab-btn:hover:not(.active) {
    border-color: #a9a09b !important;
    background: var(--congstar-orange-soft) !important;
    color: var(--congstar-black) !important;
}

body:not([data-layout="smartphone"]) .tab-container-nested .tab-btn.ayyildiz-tab-btn:hover:not(.active) {
    border-color: #ef9da1 !important;
    background: var(--ayyildiz-red-soft) !important;
    color: var(--ayyildiz-red) !important;
}

.tab-container-nested .tab-btn:focus:not(:focus-visible) {
    outline: 0;
}

.tab-container-nested .tab-btn:focus-visible {
    outline: 2px solid var(--tool-accent);
    outline-offset: 2px;
}

@media (max-width: 1150px) {
    body:not([data-layout="smartphone"]) .header-filter-row .tariff-range-filter {
        padding-left: 0;
    }
}

/* Karten behalten auf unterschiedlichen Desktopbreiten eine ruhige Lesebreite,
   statt unmittelbar oberhalb eines Breakpoints auf zu viele schmale Spalten zu springen. */
body[data-layout="desktop"] :is(
    .cards-grid,
    .cards-grid.six-cols,
    .cards-grid.five-cols,
    .cards-grid.four-cols,
    .cards-grid.three-cols,
    .filter-results-grid
) {
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    align-items: stretch;
}

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

@media (max-width: 480px) {
    .filter-results-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .filter-results-summary {
        margin: -2px 4px 12px;
    }
}
/* Geschützter Shop-Zugang */
html.auth-pending, html.auth-pending body, body.auth-login-open { overflow: hidden; }
html.auth-pending body > *:not(#auth-login-modal) { visibility: hidden; }
.auth-login-modal[hidden] { display: none !important; }
.auth-login-modal { position: fixed; inset: 0; z-index: 13000; display: grid; place-items: center; padding: 22px; }
.auth-login-backdrop { position: absolute; inset: 0; background: radial-gradient(circle at 18% 0%, rgba(21, 112, 166, .82), rgba(7, 30, 52, .94) 60%, rgba(4, 18, 32, .98)); backdrop-filter: blur(14px); }
.auth-login-dialog { position: relative; width: min(430px, 100%); padding: clamp(26px, 5vw, 42px); border: 1px solid rgba(255,255,255,.72); border-radius: 26px; color: #173b5d; background: rgba(255,255,255,.98); box-shadow: 0 34px 110px rgba(0, 18, 36, .48); }
.auth-login-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 30px; color: #173f63; font-size: 15px; }
.auth-login-brand .app-brand-mark { width: 36px; height: 36px; }
.auth-login-kicker { display: block; margin-bottom: 8px; color: #007eb8; font-size: 11px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.auth-login-dialog h1 { margin: 0 0 8px; color: #102f4d; font-size: clamp(27px, 5vw, 36px); letter-spacing: -.04em; }
.auth-login-dialog > p { margin: 0 0 24px; color: #61768a; line-height: 1.5; }
#auth-login-form { display: grid; gap: 12px; }
.auth-login-field { display: grid; gap: 7px; color: #42627b; font-size: 11px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.auth-login-field input { width: 100%; min-height: 50px; padding: 0 14px; border: 1px solid #bcd0df; border-radius: 13px; color: #123555; background: #f8fbfd; font: inherit; font-size: 16px; letter-spacing: .04em; outline: none; box-sizing: border-box; }
.auth-login-field input:focus { border-color: #0785bd; box-shadow: 0 0 0 4px rgba(0, 154, 217, .14); background: #fff; }
.auth-login-submit { min-height: 50px; border: 1px solid #123f66; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #173f63, #075f97); box-shadow: 0 8px 20px rgba(16, 63, 99, .20); font: inherit; font-weight: 950; cursor: pointer; }
.auth-login-submit:hover { background: linear-gradient(135deg, #102f4c, #087aaa); }
.auth-login-submit:disabled { opacity: .64; cursor: wait; }
.auth-login-message { margin: 0 !important; padding: 10px 12px; border: 1px solid #efcaca; border-radius: 10px; color: #9c3535 !important; background: #fff4f4; font-size: 12px; line-height: 1.4; }
.auth-login-message[data-tone="info"] { border-color: #b9d9e9; color: #1d668b !important; background: #effaff; }
.auth-login-hint { display: block; margin-top: 17px; color: #7890a1; font-size: 11px; line-height: 1.45; }
.auth-logout-button { min-height: 36px; padding: 0 11px; flex: 0 0 auto; border: 1px solid #c6d7e4; border-radius: 10px; color: #45657d; background: #fff; font-size: 11px; font-weight: 900; cursor: pointer; }
.auth-logout-button:hover { border-color: #0785bd; color: #075f83; background: #f1fbff; }
.header-top-row > .auth-logout-button { margin-left: auto; }
body.auth-advisor .header-management-actions,
body.auth-advisor #mode-toggle-btn,
body.auth-advisor #mobile-mode-btn { display: none !important; }
.mobile-auth-logout { width: 36px; padding: 0; display: grid; place-items: center; font-size: 16px; line-height: 1; }
.mobile-brand-row .mobile-auth-logout { margin-left: auto; }

/* Mehrshop-Auswahl */
.shop-selector-modal[hidden] { display: none !important; }
.shop-selector-modal { position: fixed; inset: 0; z-index: 12000; display: grid; place-items: center; padding: 22px; }
.shop-selector-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: radial-gradient(circle at 20% 0%, rgba(17, 90, 145, .74), rgba(7, 28, 49, .88) 58%, rgba(5, 20, 36, .94)); backdrop-filter: blur(12px); }
.shop-selector-dialog { position: relative; width: min(620px, 100%); max-height: calc(100dvh - 44px); overflow: auto; padding: clamp(24px, 4vw, 38px); border: 1px solid rgba(255,255,255,.68); border-radius: 24px; color: #153a5d; background: rgba(255,255,255,.98); box-shadow: 0 32px 100px rgba(0, 19, 36, .42); }
.shop-selector-brand { display: inline-flex; align-items: center; gap: 9px; margin-bottom: 24px; color: #173f63; }
.shop-selector-brand .app-brand-mark { width: 34px; height: 34px; }
.shop-selector-kicker { display: block; margin-bottom: 7px; color: #007eb8; font-size: 11px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.shop-selector-dialog h1 { margin: 0 0 8px; color: #102f4d; font-size: clamp(25px, 4vw, 36px); letter-spacing: -.035em; }
.shop-selector-dialog > p { margin: 0 0 22px; color: #61768a; line-height: 1.5; }
.shop-selector-list { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.shop-selector-list label { position: relative; min-height: 70px; padding: 11px 38px 11px 11px; display: grid; grid-template-columns: 42px minmax(0, 1fr); grid-template-rows: 1fr auto; align-items: center; column-gap: 11px; border: 1px solid #cddce8; border-radius: 14px; background: #f9fcfe; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease, box-shadow .16s ease; }
.shop-selector-list label:hover { border-color: #7fb7d7; background: #f1f9fd; transform: translateY(-1px); }
.shop-selector-list label:has(input:checked) { border-color: #007fbd; background: #edf9ff; box-shadow: 0 0 0 3px rgba(0, 154, 217, .13); }
.shop-selector-list input { position: absolute; opacity: 0; pointer-events: none; }
.shop-avatar, .shop-switch-avatar { display: grid; place-items: center; border-radius: 12px; color: #fff; background: linear-gradient(145deg, #163f64, #007eb8); font-weight: 950; letter-spacing: -.03em; }
.shop-avatar { width: 42px; height: 42px; grid-row: 1 / span 2; }
.shop-selector-list strong { min-width: 0; overflow: hidden; color: #173b5d; text-overflow: ellipsis; white-space: nowrap; }
.shop-selector-list small { color: #007aaa; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.shop-selector-list label > i { position: absolute; right: 12px; top: 50%; width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid #c8d8e5; border-radius: 50%; color: transparent; font-style: normal; transform: translateY(-50%); }
.shop-selector-list label:has(input:checked) > i { color: #fff; border-color: #007fbd; background: #007fbd; }
.shop-remember { margin: 18px 0; display: flex; align-items: center; gap: 9px; color: #4f677c; font-size: 13px; font-weight: 750; cursor: pointer; }
.shop-remember input { width: 18px; height: 18px; accent-color: #087bb6; }
.shop-selector-confirm { width: 100%; min-height: 48px; border: 1px solid #123f66; border-radius: 13px; color: #fff; background: linear-gradient(135deg, #173f63, #075f97); box-shadow: 0 8px 20px rgba(16, 63, 99, .20); font-weight: 900; cursor: pointer; }
.shop-selector-confirm:disabled { opacity: .42; cursor: not-allowed; box-shadow: none; }
html.shop-selection-pending, html.shop-selection-pending body, body.shop-selector-open { overflow: hidden; }
.shop-switch-button { min-width: 156px; height: 42px; padding: 4px 10px 4px 5px; display: inline-grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 8px; border: 1px solid #c9d8e5; border-radius: 12px; color: #173b5d; background: #fff; box-shadow: 0 3px 9px rgba(22, 59, 92, .08); text-align: left; cursor: pointer; }
.header-shop-stack { width: 310px; min-width: 0; height: 44px; padding: 2px; flex: 0 0 310px; display: grid; grid-template-columns: 164px minmax(0, 1fr); align-items: stretch; gap: 2px; border: 1px solid #c9d8e5; border-radius: 13px; background: #f6f9fc; box-shadow: 0 3px 9px rgba(22, 59, 92, .08); }
.header-shop-stack .shop-switch-button { width: 100%; height: 38px; border: 0; border-radius: 9px 4px 4px 9px; background: transparent; box-shadow: none; }
.header-shop-stack .shop-switch-button:hover { background: #fff; }
.advisor-switcher { height: 38px; padding: 3px 8px 3px 10px; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 1px; border: 0; border-left: 1px solid #d4e1ea; border-radius: 0 9px 9px 0; color: #718397; background: transparent; }
.advisor-switcher > span { font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.advisor-switcher select { min-width: 0; width: 100%; border: 0; outline: 0; color: #173b5d; background: transparent; font: inherit; font-size: 11px; font-weight: 850; cursor: pointer; }
.advisor-switcher:focus-within { background: #fff; box-shadow: inset 0 0 0 2px rgba(0,169,232,.18); }
.advisor-switcher:has(select:disabled) { opacity: .72; }
body.auth-advisor .advisor-switcher,
body.auth-advisor .mobile-advisor-switcher { display: grid !important; visibility: visible; opacity: 1; pointer-events: auto; }
body.auth-advisor .advisor-switcher select,
body.auth-advisor .mobile-advisor-switcher select { pointer-events: auto; }
.shop-switch-avatar { width: 32px; height: 32px; border-radius: 9px; font-size: 11px; }
.shop-switch-button > span:nth-child(2) { min-width: 0; display: grid; line-height: 1.05; }
.shop-switch-button small { color: #718397; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shop-switch-button strong { margin-top: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.shop-switch-button > i { color: #73879a; font-style: normal; }
.admin-link[hidden] { display: none !important; }
.mobile-shop-button { width: 36px; height: 36px; padding: 0; display: grid; place-items: center; border: 1px solid #c8d8e6; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #163f64, #007eb8); font-size: 10px; font-weight: 950; }
.shop-context { min-width: 0; height: 38px; padding: 3px 8px 3px 5px; display: inline-grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 8px; color: #173b5d; text-align: left; user-select: none; }
.header-shop-stack .shop-context { width: 100%; border-radius: 9px 4px 4px 9px; }
.shop-context > span:last-child { min-width: 0; display: grid; line-height: 1.05; }
.shop-context small { color: #718397; font-size: 8px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.shop-context strong { margin-top: 3px; overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.mobile-shop-context { width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid #c8d8e6; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #163f64, #007eb8); font-size: 10px; font-weight: 950; user-select: none; }
.mobile-advisor-switcher { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding: 7px 9px; border: 1px solid #d5e2ec; border-radius: 10px; color: #718397; background: #f7fbfd; }
.mobile-advisor-switcher > span { font-size: 9px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.mobile-advisor-switcher select { min-width: 0; width: 100%; border: 0; outline: 0; color: #173b5d; background: transparent; font: inherit; font-size: 12px; font-weight: 850; }
.mobile-advisor-switcher:focus-within { border-color: #70b9d2; box-shadow: 0 0 0 3px rgba(0,169,232,.12); }

@media (max-width: 680px) {
    .shop-selector-modal { align-items: end; padding: 0; }
    .shop-selector-dialog { width: 100%; max-height: 92dvh; padding: 22px 16px calc(20px + env(safe-area-inset-bottom)); border-radius: 22px 22px 0 0; }
    .shop-selector-brand { margin-bottom: 17px; }
    .shop-selector-list { grid-template-columns: 1fr; }
    .shop-selector-list label { min-height: 62px; }
}

/* Zentral gespeicherte Angebote */
.admin-link { text-decoration: none; }
.cart-action-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 8px;
}

.cart-primary-actions {
    grid-template-columns: minmax(170px, 1.35fr) minmax(150px, 1fr);
    margin: 0 0 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid #dce6ee;
}

.cart-primary-actions #save-offer-btn {
    min-height: 46px;
    color: #fff;
    background: linear-gradient(135deg, #173f63, #087899);
    border-color: #173f63;
    box-shadow: 0 7px 16px rgba(23, 63, 99, .18);
    font-size: 13px;
    font-weight: 950;
}

.cart-primary-actions #open-offers-btn {
    min-height: 46px;
    color: #173f63;
    background: #fff;
    border-color: #b9cedd;
    font-size: 12px;
    font-weight: 900;
}

.cart-primary-actions #save-offer-btn:hover {
    color: #fff;
    background: linear-gradient(135deg, #102f4c, #076b89);
    border-color: #102f4c;
}

@media (max-width: 1500px) and (min-width: 1101px) {
    .cart-primary-actions { grid-template-columns: 1fr; }
}

.offer-storage-modal[hidden] { display: none !important; }
.offer-storage-modal { position: fixed; inset: 0; z-index: 10020; display: grid; place-items: center; padding: 24px; }
.offer-storage-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8, 29, 52, .58); backdrop-filter: blur(5px); cursor: default; }
.offer-storage-dialog { position: relative; width: min(980px, 100%); max-height: min(880px, calc(100dvh - 48px)); overflow: hidden; display: flex; flex-direction: column; border: 1px solid #c8d9e7; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(8, 29, 52, .30); }
.offer-storage-dialog > header { padding: 18px 20px; display: flex; align-items: center; justify-content: space-between; gap: 18px; border-bottom: 1px solid #dce6ef; background: linear-gradient(135deg, #f2f9fd, #fff); }
.offer-storage-dialog > header span { display: block; margin-bottom: 3px; color: #587087; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.offer-storage-dialog > header h2 { margin: 0; color: #153b5f; font-size: 22px; }
.offer-storage-close { width: 38px; height: 38px; flex: 0 0 38px; border: 1px solid #c7d7e5; border-radius: 50%; color: #173f63; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.offer-storage-form { padding: 18px 20px; display: grid; grid-template-columns: 1fr 1fr minmax(160px, .7fr) auto; align-items: end; gap: 10px; border-bottom: 1px solid #e1e9f0; }
.offer-storage-form label { display: grid; gap: 6px; color: #4f677e; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.offer-storage-form input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #bfd0df; border-radius: 10px; color: #123555; background: #fff; font: inherit; text-transform: none; }
.offer-storage-form input:focus { outline: 3px solid rgba(0, 169, 232, .18); border-color: #00a9e8; }
.offer-storage-form label small { color: #7b8fa2; font-size: 10px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.offer-storage-primary { min-height: 42px; padding: 0 16px; border: 1px solid #123f66; border-radius: 10px; color: #fff; background: #173f63; font-weight: 900; cursor: pointer; }
.offer-storage-list-head { padding: 13px 20px 8px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #173f63; }
.offer-storage-list-head button { border: 0; color: #0754c7; background: transparent; font-weight: 800; cursor: pointer; }
.offer-storage-list { min-height: 150px; overflow: auto; padding: 10px 20px 20px; display: grid; align-content: start; gap: 10px; background: linear-gradient(180deg, #f7fafc, #fff 80px); }
.offer-storage-item { min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; border: 1px solid #d3e0eb; border-radius: 14px; background: #fff; box-shadow: 0 4px 13px rgba(17, 52, 82, .045); transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease; }
.offer-storage-item:hover { border-color: #adc9dc; box-shadow: 0 8px 22px rgba(17, 52, 82, .09); transform: translateY(-1px); }
.offer-storage-item.is-selected { border-color: #1694c4; background: linear-gradient(135deg, #f0faff, #fff); box-shadow: 0 0 0 2px rgba(0, 169, 232, .12); }
.offer-storage-open-item { min-width: 0; padding: 12px 14px; display: grid; gap: 3px; border: 0; color: #143a5c; background: transparent; text-align: left; cursor: pointer; }
.offer-storage-open-item strong, .offer-storage-open-item > span:not(.offer-storage-card-top), .offer-storage-open-item small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.offer-storage-open-item span { color: #5f7489; font-size: 12px; }
.offer-storage-open-item small { color: #7890a5; }
.offer-storage-delete { width: 34px; height: 34px; border: 1px solid #efbac2; border-radius: 50%; color: #c6293d; background: #fff; font-size: 20px; cursor: pointer; }
.offer-storage-share { min-height: 34px; padding: 0 11px; border: 1px solid #9ec5df; border-radius: 9px; color: #123f66; background: #eef8fd; font-weight: 900; cursor: pointer; white-space: nowrap; }
.offer-storage-share:disabled { color: #8a99a7; border-color: #d4dde4; background: #f1f4f6; cursor: not-allowed; }
.offer-storage-rename { min-height: 34px; padding: 0 10px; border: 1px solid #c8d7e3; border-radius: 9px; color: #36556f; background: #fff; font-weight: 850; cursor: pointer; white-space: nowrap; }
.offer-storage-favorite { min-height: 34px; padding: 0 10px; border: 1px solid #e5c66c; border-radius: 9px; color: #765300; background: #fffaf0; font-weight: 900; cursor: pointer; white-space: nowrap; }
.offer-storage-favorite.is-active { color: #674500; border-color: #d9ad2e; background: #fff0b8; box-shadow: inset 0 0 0 1px rgba(217,173,46,.15); }
.offer-share-result { margin: 0 20px 14px; padding: 12px; display: grid; grid-template-columns: minmax(155px, .65fr) minmax(200px, 1.35fr) auto auto; align-items: center; gap: 9px; border: 1px solid #9fd7bb; border-radius: 12px; background: #f2fcf7; }
.offer-share-result[hidden] { display: none !important; }
.offer-share-result > div { display: grid; gap: 2px; color: #174f38; }
.offer-share-result > div span { color: #527263; font-size: 11px; }
.offer-share-result input { min-width: 0; height: 38px; padding: 0 10px; border: 1px solid #b7d6c6; border-radius: 8px; color: #173f63; background: #fff; }
.offer-share-result button, .offer-share-result a { min-height: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #176344; border-radius: 8px; color: #fff; background: #176344; font-size: 12px; font-weight: 900; text-decoration: none; cursor: pointer; white-space: nowrap; }
.offer-share-result a { color: #176344; background: #fff; }
.offer-storage-empty { padding: 30px 15px; border: 1px dashed #c7d7e4; border-radius: 12px; color: #64798d; text-align: center; }
.offer-storage-empty.is-error { color: #b1273b; border-color: #efbdc4; background: #fff5f6; }
body.offer-storage-open { overflow: hidden; }

.header-management-button.dashboard-edit-btn { color: #fff; border-color: #087da8; background: linear-gradient(135deg, #087da8, #0a668f); }
.header-management-button.dashboard-edit-btn > span:first-child { color: #0b5877; background: linear-gradient(145deg, #e9fdff, #82e7ee); }
.header-management-button.dashboard-edit-btn small { color: #bfeff3; }
.header-management-button.dashboard-edit-btn:hover { border-color: #39cdd8; box-shadow: 0 8px 18px rgba(8, 125, 168, .24); }
.mobile-dashboard-button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid #c2d7e4; border-radius: 12px; color: #0b6589; background: #f1faff; font-size: 18px; }

.dashboard-editor-modal[hidden] { display: none !important; }
.dashboard-editor-modal { position: fixed; inset: 0; z-index: 10025; display: grid; place-items: center; padding: 24px; }
.dashboard-editor-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(8, 29, 52, .68); backdrop-filter: blur(7px); cursor: default; }
.dashboard-editor-dialog { position: relative; width: min(960px, 100%); height: min(900px, calc(100vh - 48px)); max-height: calc(100vh - 48px); overflow: hidden; overflow: clip; display: flex; flex-direction: column; border: 1px solid #bfd3e1; border-radius: 22px; color: #123555; background: #f4f8fb; box-shadow: 0 32px 90px rgba(8, 29, 52, .35); }
.dashboard-editor-header { padding: 20px 22px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; border-bottom: 1px solid #d8e5ee; background: rgba(255,255,255,.98); }
.dashboard-editor-header > div > span { display: block; margin-bottom: 4px; color: #0780ad; font-size: 10px; font-weight: 950; letter-spacing: .11em; text-transform: uppercase; }
.dashboard-editor-header h2 { margin: 0; color: #153b5f; font-size: 24px; letter-spacing: -.02em; }
.dashboard-editor-header p { margin: 5px 0 0; color: #657b8e; font-size: 12px; }
.dashboard-editor-close { width: 40px; height: 40px; flex: 0 0 40px; display: grid; place-items: center; border: 1px solid #c5d5e2; border-radius: 50%; color: #173f63; background: #fff; font-size: 25px; line-height: 1; cursor: pointer; }
.dashboard-editor-layout { height: 0; min-height: 0; flex: 1 1 0; overflow: hidden; display: block; }
.dashboard-editor-preview { position: relative; min-height: 520px; overflow: hidden; padding: 34px; display: flex; align-items: flex-start; flex-direction: column; color: #fff; background: linear-gradient(155deg, #102f4c, #155578 65%, #087da8); }
.dashboard-editor-preview::after { content: ''; position: absolute; right: -70px; bottom: -80px; width: 220px; height: 220px; border: 38px solid rgba(255,255,255,.07); border-radius: 50%; }
.dashboard-preview-kicker { position: relative; z-index: 1; color: #9edcf0; font-size: 10px; font-weight: 950; letter-spacing: .12em; text-transform: uppercase; }
.dashboard-offer-preview-card { position: relative; z-index: 1; width: 100%; min-height: 126px; margin: 15px 0 22px; padding: 18px 20px; display: grid; grid-template-columns: minmax(0, 1fr) 210px; align-items: center; gap: 22px; overflow: hidden; color: #123555; background: linear-gradient(120deg, #fff 0%, #f2f9fc 72%, #e7f5fa 100%); border: 1px solid #bfd8e6; border-top: 4px solid #18a4cd; border-radius: 12px; box-shadow: 0 12px 28px rgba(2,30,50,.22); }
.dashboard-offer-preview-card::after { position: absolute; right: -28px; top: -50px; width: 100px; height: 100px; border: 16px solid rgba(8,125,168,.055); border-radius: 50%; content: ''; }
.dashboard-offer-preview-copy { position: relative; z-index: 1; min-width: 0; display: grid; gap: 6px; }
.dashboard-offer-preview-copy strong { color: #102f4d; font-size: 25px; line-height: 1.15; letter-spacing: -.02em; }
.dashboard-offer-preview-copy span { color: #657b8e; font-size: 11px; font-weight: 700; line-height: 1.35; }
.dashboard-offer-preview-logo { position: relative; z-index: 1; width: 210px; height: 92px; padding: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; border: 1px dashed #a8c8d9; border-radius: 9px; background: rgba(255,255,255,.78); }
.dashboard-offer-preview-logo img { max-width: 100%; max-height: 100%; display: block; object-fit: contain; object-position: center; }
.dashboard-offer-preview-logo > span { width: 100%; color: #7c94a6; font-size: 10px; font-weight: 900; letter-spacing: .06em; text-align: center; text-transform: uppercase; }
.dashboard-preview-shopline { position: relative; z-index: 1; width: 100%; display: grid; grid-template-columns: 54px minmax(0, 1fr); align-items: center; gap: 12px; }
.dashboard-preview-shopline > div:last-child { min-width: 0; display: grid; gap: 3px; }
.dashboard-preview-shopline strong { font-size: 16px; }
.dashboard-preview-shopline span { color: #c8e6f1; font-size: 11px; }
.dashboard-preview-shopline small { color: #9edcf0; font-size: 9px; font-weight: 850; }
.dashboard-preview-avatar { position: relative; z-index: 1; width: 46px; height: 46px; margin: 0 0 11px; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.38); border-radius: 13px; color: #123f66; background: #fff; box-shadow: 0 12px 32px rgba(0,0,0,.16); font-size: 16px; font-weight: 950; }
.dashboard-editor-preview > strong { position: relative; z-index: 1; font-size: 20px; line-height: 1.2; }
.dashboard-editor-preview > span:not(.dashboard-preview-kicker) { position: relative; z-index: 1; margin-top: 7px; color: #c8e6f1; font-size: 12px; line-height: 1.5; }
.dashboard-editor-preview > small { position: relative; z-index: 1; margin-top: 18px; padding: 8px 10px; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; color: #fff; background: rgba(255,255,255,.1); font-size: 10px; font-weight: 850; }
.dashboard-contact-preview-card { position: relative; z-index: 1; width: 100%; margin-top: 18px; padding: 13px; display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 13px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px; color: #173f63; background: rgba(255,255,255,.94); box-shadow: 0 8px 22px rgba(2,30,50,.13); }
.dashboard-contact-preview-photo { width: 64px; height: 64px; display: grid; place-items: center; overflow: hidden; border: 1px solid #c7dce8; border-radius: 13px; color: #fff; background: linear-gradient(145deg, #173f63, #087da8); font-size: 14px; font-weight: 950; }
.dashboard-contact-preview-photo canvas { width: 100%; height: 100%; display: block; }
.dashboard-contact-preview-card > div:last-child { min-width: 0; display: grid; gap: 2px; }
.dashboard-contact-preview-card > div:last-child > span { color: #087da8; font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-contact-preview-card > div:last-child > strong { overflow: hidden; color: #173f63; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-contact-preview-card > div:last-child > small { overflow: hidden; color: #718598; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-preview-note { position: relative; z-index: 1; margin-top: auto; padding: 13px; display: flex; align-items: flex-start; gap: 9px; border: 1px solid rgba(255,255,255,.16); border-radius: 13px; color: #d8edf5; background: rgba(4,33,54,.22); font-size: 11px; line-height: 1.45; }
.dashboard-preview-note b { width: 22px; height: 22px; flex: 0 0 22px; display: grid; place-items: center; border-radius: 50%; color: #12415e; background: #8fe0bf; }
.dashboard-editor-form { height: 100%; min-height: 0; overflow: auto; padding: 18px; display: grid; align-content: start; gap: 14px; }
.dashboard-editor-section { padding: 18px; border: 1px solid #d5e2eb; border-radius: 16px; background: #fff; box-shadow: 0 5px 15px rgba(17,52,82,.04); }
body:not(.auth-can-password-settings) .dashboard-access-section { display: none !important; }
.dashboard-password-grid { display: grid; gap: 11px; }
.dashboard-password-current { min-width: 0; display: grid; grid-template-columns: minmax(180px, .72fr) minmax(200px, 1.28fr); align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid #bfd8e6; border-radius: 12px; color: #526b81; background: linear-gradient(135deg, #f3fbfe, #fbfeff); font-size: 10px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-password-current-copy { min-width: 0; display: grid; gap: 3px; }
.dashboard-password-current-copy strong { color: #365873; font-size: 10px; letter-spacing: .06em; }
.dashboard-password-current-copy small { color: #7890a1; font-size: 10px; font-weight: 700; letter-spacing: 0; line-height: 1.35; text-transform: none; }
.dashboard-password-grid input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #bfd0df; border-radius: 10px; color: #123555; background: #fff; font: inherit; font-size: 13px; letter-spacing: normal; text-transform: none; }
.dashboard-password-grid input:focus { outline: 3px solid rgba(0,169,232,.16); border-color: #00a9e8; }
.dashboard-password-card { min-width: 0; padding: 13px 14px; display: grid; grid-template-columns: minmax(180px, .72fr) minmax(0, 1.28fr); align-items: center; gap: 13px; border: 1px solid #d4e2eb; border-radius: 12px; background: #fbfdfe; }
.dashboard-password-card-copy { min-width: 0; display: grid; gap: 4px; align-self: center; }
.dashboard-password-card strong { color: #173f63; font-size: 12px; }
.dashboard-password-card small { color: #718598; font-size: 10px; line-height: 1.35; }
.dashboard-password-fields { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: 8px; }
.dashboard-password-fields label { min-width: 0; display: grid; gap: 5px; color: #526b81; font-size: 9px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-password-fields label > span { color: #7890a1; font-size: 9px; font-weight: 900; letter-spacing: .06em; }
.dashboard-password-button { min-height: 42px; padding: 0 12px; border: 1px solid #14759c; border-radius: 10px; color: #fff; background: #087da8; font-size: 10px; font-weight: 900; white-space: nowrap; cursor: pointer; }
.dashboard-password-button:hover { background: #075f83; }
.dashboard-password-button:disabled { opacity: .62; cursor: wait; }
.dashboard-password-status { margin: 10px 0 0; padding: 9px 11px; border: 1px solid #b9d9e9; border-radius: 9px; color: #1d668b; background: #effaff; font-size: 11px; line-height: 1.4; }
.dashboard-password-status[data-tone="error"] { border-color: #efcaca; color: #9c3535; background: #fff4f4; }
.dashboard-section-heading { margin-bottom: 16px; display: flex; align-items: flex-start; gap: 11px; }
.dashboard-section-heading > span { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px; color: #087da8; background: #e9f7fc; font-size: 10px; font-weight: 950; }
.dashboard-section-heading h3 { margin: 0; color: #153b5f; font-size: 16px; }
.dashboard-section-heading p { margin: 4px 0 0; color: #718598; font-size: 11px; line-height: 1.45; }
.dashboard-media-heading { width: 100%; display: grid; justify-items: start; gap: 2px; }
.dashboard-media-heading > span { color: #087da8; font-size: 8px; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; }
.dashboard-media-heading > strong { color: #365873; font-size: 12px; }
.dashboard-media-heading > small { color: #718598; font-size: 9px; font-weight: 700; line-height: 1.35; }
.dashboard-form-step { min-height: 46px; padding: 9px 11px; display: flex; align-items: center; gap: 10px; border: 1px solid #d8e5ed; border-radius: 11px; background: linear-gradient(135deg, #f1f9fc, #fff); }
.dashboard-form-step > span, .dashboard-consultant-save-copy > span { width: 27px; height: 27px; flex: 0 0 27px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #087da8; font-size: 10px; font-weight: 950; }
.dashboard-form-step > div, .dashboard-consultant-save-copy > div { min-width: 0; display: grid; gap: 2px; }
.dashboard-form-step strong, .dashboard-consultant-save-copy strong { color: #173f63; font-size: 12px; }
.dashboard-form-step small, .dashboard-consultant-save-copy small { color: #718598; font-size: 9px; font-weight: 700; line-height: 1.35; }
.dashboard-profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; }
.dashboard-profile-grid label { min-width: 0; display: grid; gap: 6px; color: #526b81; font-size: 10px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-profile-grid label > small { color: #8495a5; font-size: 9px; font-weight: 700; letter-spacing: 0; text-transform: none; }
.dashboard-profile-grid label.is-wide { grid-column: 1 / -1; }
.dashboard-profile-grid input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #bfd0df; border-radius: 10px; color: #123555; background: #fff; font: inherit; font-size: 13px; text-transform: none; }
.dashboard-profile-grid input:focus { outline: 3px solid rgba(0,169,232,.16); border-color: #00a9e8; }
.dashboard-logo-field { padding: 12px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 9px 14px; border: 1px solid #d4e2eb; border-radius: 12px; background: #f7fbfd; }
.dashboard-logo-field.is-wide { grid-column: 1 / -1; }
.dashboard-logo-copy { min-width: 0; display: grid; gap: 4px; }
.dashboard-logo-copy strong { color: #365873; font-size: 11px; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-logo-copy small { color: #718598; font-size: 10px; font-weight: 700; line-height: 1.4; letter-spacing: 0; text-transform: none; }
.dashboard-logo-controls { display: flex; align-items: center; gap: 7px; }
.dashboard-profile-grid .dashboard-logo-upload, .dashboard-logo-controls button { min-height: 36px; padding: 0 11px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #14759c; border-radius: 9px; color: #fff; background: #087da8; font-size: 10px; font-weight: 900; letter-spacing: 0; text-transform: none; cursor: pointer; }
.dashboard-profile-grid .dashboard-logo-upload input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; opacity: 0; pointer-events: none; }
.dashboard-logo-controls button { color: #48657b; border-color: #c7d7e2; background: #fff; }
#dashboard-logo-status { grid-column: 1 / -1; color: #718598; font-size: 9px; font-weight: 800; }
#dashboard-logo-status[data-state="ready"] { color: #16825e; }
#dashboard-logo-status[data-state="loading"] { color: #087da8; }
.dashboard-logo-editor { padding: 14px; display: grid; grid-template-columns: 270px minmax(0, 1fr); align-items: center; gap: 18px; border: 1px solid #d4e2eb; border-radius: 13px; background: #f7fbfd; }
.dashboard-logo-editor.is-wide { grid-column: 1 / -1; }
.dashboard-logo-stage { min-width: 0; display: grid; justify-items: center; gap: 7px; }
.dashboard-logo-stage > strong { justify-self: start; color: #365873; font-size: 11px; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-logo-stage > small { color: #718598; font-size: 8px; font-weight: 700; text-align: center; }
.dashboard-logo-crop { width: 250px; height: 110px; padding: 0; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 13px; outline: 1px solid #b9d2e0; color: #698095; background: linear-gradient(145deg, #eaf5fa, #fff); box-shadow: 0 7px 18px rgba(17,52,82,.12); font: inherit; cursor: pointer; transition: outline-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.dashboard-logo-crop:hover { outline-color: #087da8; box-shadow: 0 9px 22px rgba(8,125,168,.2); transform: translateY(-1px); }
.dashboard-logo-crop:focus-visible { outline: 3px solid rgba(0,169,232,.28); outline-offset: 2px; }
.dashboard-logo-crop canvas { width: 100%; height: 100%; display: block; }
.dashboard-logo-crop > span { display: grid; justify-items: center; gap: 3px; }
.dashboard-logo-crop b { color: #48657b; font-size: 11px; }
.dashboard-logo-crop small { color: #8496a6; font-size: 9px; }
.dashboard-logo-editor-controls { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; }
.dashboard-logo-editor-controls input[type="range"] { width: 100%; height: 18px; padding: 0; border: 0; border-radius: 0; accent-color: #087da8; }
.dashboard-logo-editor .dashboard-logo-controls { grid-column: auto; flex-wrap: wrap; }
.dashboard-image-adjustments { padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 1px solid #cfe0e9; border-radius: 11px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.dashboard-image-adjustments[hidden] { display: none !important; }
.dashboard-image-adjustments > label { min-width: 0; display: grid; gap: 6px; color: #526b81; font-size: 9px; font-weight: 900; letter-spacing: .025em; text-transform: uppercase; }
.dashboard-consultant-add { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; gap: 10px; }
.dashboard-consultant-add label { display: grid; gap: 6px; color: #526b81; font-size: 10px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-consultant-add .is-wide { grid-column: 1 / -1; }
.dashboard-consultant-add input { width: 100%; height: 42px; padding: 0 11px; border: 1px solid #bfd0df; border-radius: 10px; color: #123555; background: #fff; font: inherit; font-size: 13px; text-transform: none; }
.dashboard-consultant-add input:focus { outline: 3px solid rgba(0,169,232,.16); border-color: #00a9e8; }
.dashboard-consultant-add .dashboard-consultant-permission { position: relative; min-height: 54px; padding: 9px 52px 9px 12px; display: flex; align-items: center; border: 1px solid #c7d9e7; border-radius: 12px; background: #f5fbfe; cursor: pointer; text-transform: none; }
.dashboard-consultant-permission > input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.dashboard-consultant-permission > span { display: grid; gap: 2px; }
.dashboard-consultant-permission > span strong { color: #153b5d; font-size: 12px; }
.dashboard-consultant-permission > span small { color: #6c8296; font-size: 10px; font-weight: 700; }
.dashboard-consultant-permission > i { position: absolute; right: 12px; width: 34px; height: 20px; border-radius: 999px; background: #cbd9e4; transition: .18s ease; }
.dashboard-consultant-permission > i::after { content: ''; position: absolute; top: 3px; left: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(12,43,70,.22); transition: .18s ease; }
.dashboard-consultant-permission:has(input:checked) { border-color: #8ed7bc; background: #f1fbf6; }
.dashboard-consultant-permission:has(input:checked) > i { background: #17a673; }
.dashboard-consultant-permission:has(input:checked) > i::after { transform: translateX(14px); }
.dashboard-consultant-photo-editor { padding: 12px; display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; gap: 15px; border: 1px solid #d4e2eb; border-radius: 13px; background: #f7fbfd; }
.dashboard-consultant-photo-stage { display: grid; justify-items: center; gap: 6px; }
.dashboard-consultant-photo-stage > small { color: #718598; font-size: 8px; font-weight: 700; line-height: 1.35; text-align: center; }
.dashboard-consultant-photo-crop { width: 126px; height: 126px; padding: 0; display: grid; place-items: center; overflow: hidden; border: 2px solid #fff; border-radius: 20px; outline: 1px solid #b9d2e0; color: #698095; background: linear-gradient(145deg, #eaf5fa, #fff); box-shadow: 0 7px 18px rgba(17,52,82,.12); font: inherit; cursor: pointer; transition: outline-color .16s ease, box-shadow .16s ease, transform .16s ease; }
.dashboard-consultant-photo-crop:hover { outline-color: #087da8; box-shadow: 0 9px 22px rgba(8,125,168,.2); transform: translateY(-1px); }
.dashboard-consultant-photo-crop:focus-visible { outline: 3px solid rgba(0,169,232,.28); outline-offset: 2px; }
.dashboard-consultant-photo-crop canvas { width: 100%; height: 100%; display: block; }
.dashboard-consultant-photo-crop > span { display: grid; justify-items: center; gap: 3px; }
.dashboard-consultant-photo-crop b { color: #48657b; font-size: 11px; }
.dashboard-consultant-photo-crop small { color: #8496a6; font-size: 9px; }
.dashboard-consultant-photo-controls { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 10px; }
.dashboard-consultant-photo-actions { grid-column: auto; display: flex; flex-wrap: wrap; gap: 7px; }
.dashboard-consultant-add .dashboard-consultant-photo-upload, .dashboard-consultant-add .dashboard-consultant-photo-actions button { min-height: 36px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #14759c; border-radius: 9px; color: #fff; background: #087da8; font-size: 10px; font-weight: 900; letter-spacing: 0; text-transform: none; cursor: pointer; }
.dashboard-consultant-add .dashboard-consultant-photo-upload input { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; border: 0; opacity: 0; pointer-events: none; }
.dashboard-consultant-add .dashboard-consultant-photo-actions button { min-height: 36px; color: #48657b; border-color: #c7d7e2; background: #fff; }
.dashboard-consultant-photo-controls input[type="range"] { width: 100%; height: 18px; padding: 0; border: 0; border-radius: 0; accent-color: #087da8; }
#dashboard-consultant-photo-status { grid-column: auto; color: #718598; font-size: 9px; font-weight: 800; }
#dashboard-consultant-photo-status[data-state="ready"] { color: #16825e; }
.dashboard-consultant-form-actions { margin-top: 2px; padding: 11px; display: flex; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #b9dcea; border-radius: 12px; background: #f2fbfe; }
.dashboard-consultant-save-copy { min-width: 0; display: flex; align-items: center; gap: 10px; }
.dashboard-consultant-save-buttons { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.dashboard-consultant-form-actions button { min-height: 42px; padding: 0 15px; border: 1px solid #14759c; border-radius: 10px; color: #fff; background: #087da8; font-weight: 900; cursor: pointer; }
.dashboard-consultant-form-actions button:disabled { opacity: .45; cursor: not-allowed; }
.dashboard-consultant-add button.secondary { color: #31536f; border-color: #c6d6e2; background: #fff; }
.dashboard-consultant-list-head { margin-top: 16px; padding-top: 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid #e0e9ef; }
.dashboard-consultant-list-head strong { color: #173f63; font-size: 12px; }
.dashboard-consultant-list-head span { min-width: 26px; height: 24px; padding: 0 7px; display: grid; place-items: center; border-radius: 999px; color: #087da8; background: #eaf8fd; font-size: 10px; font-weight: 950; }
.dashboard-consultant-list { margin-top: 8px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dashboard-consultant-row { min-width: 0; padding: 9px; display: grid; grid-template-columns: 38px minmax(0, 1fr); align-items: center; gap: 9px; border: 1px solid #d4e1ea; border-radius: 12px; background: #f8fbfd; }
.dashboard-consultant-row > span { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(145deg, #173f63, #087da8); font-size: 11px; font-weight: 950; }
.dashboard-consultant-row > span.has-photo { overflow: hidden; }
.dashboard-consultant-row > span.has-photo img { width: 100%; height: 100%; display: block; object-fit: cover; }
.dashboard-consultant-details { min-width: 0; display: grid; gap: 3px; }
.dashboard-consultant-details strong { overflow: hidden; color: #173f63; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-consultant-details small { overflow: hidden; color: #718598; font-size: 9px; font-weight: 700; line-height: 1.35; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-consultant-access-badge { width: max-content; padding: 2px 7px; border-radius: 999px; color: #875d00; background: #fff2bf; font-size: 9px; font-style: normal; font-weight: 900; }
.dashboard-consultant-actions { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; padding-top: 4px; border-top: 1px solid #e3ebf1; }
.dashboard-consultant-actions button { min-height: 30px; padding: 0 9px; border: 1px solid #bcd5e3; border-radius: 8px; color: #176785; background: #fff; font-size: 10px; font-weight: 850; cursor: pointer; }
.dashboard-consultant-actions button[data-remove-consultant] { color: #b5263a; border-color: #e5c2c8; }
.dashboard-consultant-empty { grid-column: 1 / -1; margin: 0; padding: 14px; border: 1px dashed #cbd9e4; border-radius: 11px; color: #718598; background: #fafcfd; font-size: 11px; text-align: center; }
.dashboard-toggle-grid { display: grid; gap: 9px; }
.dashboard-toggle-grid.provider-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dashboard-toggle-grid.section-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dashboard-toggle-grid label { position: relative; min-width: 0; min-height: 62px; padding: 11px 52px 11px 12px; display: flex; align-items: flex-start; justify-content: center; flex-direction: column; gap: 3px; border: 1px solid #d2dfe8; border-radius: 12px; color: #173f63; background: #f9fbfd; cursor: pointer; transition: border-color .16s ease, background .16s ease, transform .16s ease; }
.dashboard-toggle-grid label:hover { border-color: #9dc8dc; transform: translateY(-1px); }
.dashboard-toggle-grid label:has(input:checked) { border-color: #9dcede; background: #f0faff; }
.dashboard-toggle-grid label strong { min-width: 0; overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-toggle-grid label small { color: #718598; font-size: 10px; }
.dashboard-toggle-grid input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-toggle-grid i { position: absolute; right: 11px; top: 50%; width: 34px; height: 20px; border-radius: 999px; background: #c9d4dc; transform: translateY(-50%); transition: background .16s ease; }
.dashboard-toggle-grid i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(12,42,65,.24); transition: transform .16s ease; }
.dashboard-toggle-grid input:checked + i { background: #087da8; }
.dashboard-toggle-grid input:checked + i::after { transform: translateX(14px); }
.dashboard-toggle-grid.provider-grid label { padding-left: 52px; }
.dashboard-provider-mark { position: absolute; left: 11px; top: 50%; width: 31px; height: 31px; display: grid; place-items: center; border-radius: 9px; color: #fff; background: #173f63; font-size: 11px; font-weight: 950; transform: translateY(-50%); }
.dashboard-provider-mark.is-o2 { background: #0019a5; }
.dashboard-provider-mark.is-telekom { background: #df0067; }
.dashboard-provider-mark.is-congstar { color: #161616; background: #efe53a; }
.dashboard-provider-mark.is-ayyildiz { background: #d31831; }
.dashboard-section-groups { display: grid; gap: 11px; }
.dashboard-setting-group { padding: 13px; border: 1px solid #dce6ee; border-radius: 13px; background: #f9fbfd; }
.dashboard-setting-group > div:first-child { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dashboard-setting-group > div:first-child > span:first-child { width: 24px; height: 24px; display: grid; place-items: center; border-radius: 8px; color: #087da8; background: #e5f6fc; font-size: 9px; font-weight: 950; }
.dashboard-setting-group h4 { margin: 0; color: #365873; font-size: 12px; letter-spacing: .02em; }
.dashboard-setting-group .dashboard-toggle-grid label { background: #fff; }
.dashboard-provider-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.dashboard-provider-group-head { display: grid !important; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center !important; gap: 10px !important; margin-bottom: 0 !important; }
.dashboard-setting-group.is-o2 .dashboard-provider-group-head { margin-bottom: 12px !important; }
.dashboard-provider-group-head .dashboard-provider-mark { position: static; width: 38px !important; height: 38px !important; border-radius: 11px !important; color: #fff !important; transform: none; }
.dashboard-provider-group-head .dashboard-provider-mark.is-congstar { color: #161616 !important; }
.dashboard-provider-group-head > span:nth-child(2) { min-width: 0; display: grid; gap: 3px; }
.dashboard-provider-group-head h4 { overflow: hidden; color: #173f63; font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.dashboard-provider-group-head small { color: #718598; font-size: 9px; line-height: 1.35; }
.dashboard-provider-master { display: grid; justify-items: center; gap: 3px; color: #657b8e; font-size: 8px; font-weight: 900; text-transform: uppercase; cursor: pointer; }
.dashboard-provider-master input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-provider-master i { position: relative; width: 36px; height: 22px; border-radius: 999px; background: #c9d4dc; transition: background .16s ease; }
.dashboard-provider-master i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(12,42,65,.24); transition: transform .16s ease; }
.dashboard-provider-master input:checked + i { background: #087da8; }
.dashboard-provider-master input:checked + i::after { transform: translateX(14px); }
.dashboard-setting-group.is-o2 { border-color: #b9d8ea; background: #f5fbff; }
.dashboard-setting-group.is-telekom { border-color: #efc1d7; background: #fff8fb; }
.dashboard-setting-group.is-congstar { border-color: #ddd7b1; background: #fffdf2; }
.dashboard-setting-group.is-ayyildiz { border-color: #efc3c7; background: #fff8f8; }
.dashboard-push-setting { display: grid; grid-template-columns: minmax(0, 1fr) 130px; gap: 10px; }
.dashboard-push-toggle { position: relative; min-height: 66px; padding: 11px 58px 11px 13px; display: flex; align-items: center; border: 1px solid #d2dfe8; border-radius: 12px; background: #f9fbfd; cursor: pointer; }
.dashboard-push-toggle > span { display: grid; gap: 4px; }
.dashboard-push-toggle strong { color: #173f63; font-size: 13px; }
.dashboard-push-toggle small { color: #718598; font-size: 10px; line-height: 1.4; }
.dashboard-push-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.dashboard-push-toggle i { position: absolute; right: 13px; top: 50%; width: 36px; height: 22px; border-radius: 999px; background: #c9d4dc; transform: translateY(-50%); transition: background .16s ease; }
.dashboard-push-toggle i::after { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(12,42,65,.24); transition: transform .16s ease; }
.dashboard-push-toggle input:checked + i { background: #087da8; }
.dashboard-push-toggle input:checked + i::after { transform: translateX(14px); }
.dashboard-push-value { position: relative; display: grid; gap: 6px; color: #526b81; font-size: 10px; font-weight: 900; letter-spacing: .035em; text-transform: uppercase; }
.dashboard-push-value input { width: 100%; height: 42px; padding: 0 32px 0 11px; border: 1px solid #bfd0df; border-radius: 10px; color: #123555; background: #fff; font: inherit; font-size: 13px; text-transform: none; }
.dashboard-push-value > span { position: absolute; right: 12px; bottom: 12px; color: #718598; font-size: 12px; }
.dashboard-editor-actions { flex: 0 0 auto; padding: 14px 18px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; border-top: 1px solid #d8e4ed; background: #fff; }
.dashboard-editor-actions button { min-height: 42px; padding: 0 16px; border: 1px solid #bfd0df; border-radius: 10px; color: #173f63; background: #fff; font-weight: 900; cursor: pointer; }
.dashboard-editor-actions .dashboard-reset { margin-right: auto; color: #64798c; border-color: transparent; background: transparent; }
.dashboard-editor-actions .dashboard-save { color: #fff; border-color: #123f66; background: linear-gradient(135deg, #173f63, #087da8); box-shadow: 0 7px 18px rgba(18,63,102,.18); }
.dashboard-editor-actions .dashboard-preview-open { color: #075f83; border-color: #9bcde0; background: #eefaff; }
.dashboard-editor-actions .dashboard-save:disabled { opacity: .6; cursor: wait; }
body.dashboard-editor-open { overflow: hidden; }
.dashboard-offer-preview-modal[hidden] { display: none !important; }
.dashboard-offer-preview-modal { position: fixed; inset: 0; z-index: 4; display: grid; place-items: center; padding: 24px; }
.dashboard-offer-preview-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: rgba(6, 26, 45, .74); backdrop-filter: blur(7px); }
.dashboard-offer-preview-dialog { position: relative; width: min(780px, 100%); max-height: calc(100dvh - 48px); overflow: hidden; display: grid; grid-template-rows: auto minmax(0, 1fr); border: 1px solid #b8d2e1; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(2, 20, 37, .42); }
.dashboard-offer-preview-dialog > header { padding: 17px 19px; display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; border-bottom: 1px solid #d7e4ed; background: #fff; }
.dashboard-offer-preview-dialog > header span { color: #0780ad; font-size: 9px; font-weight: 950; letter-spacing: .1em; text-transform: uppercase; }
.dashboard-offer-preview-dialog > header h2 { margin: 3px 0 0; color: #153b5f; font-size: 20px; }
.dashboard-offer-preview-dialog > header p { margin: 4px 0 0; color: #718598; font-size: 11px; }
.dashboard-offer-preview-dialog > header button { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border: 1px solid #c5d5e2; border-radius: 50%; color: #173f63; background: #fff; font-size: 24px; line-height: 1; cursor: pointer; }
.dashboard-offer-preview-dialog .dashboard-editor-preview { overflow-x: hidden; overflow-y: auto; }

.offer-storage-overview { padding: 14px 20px 8px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; }
.offer-storage-overview > div { min-width: 0; padding: 10px 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border: 1px solid #d6e4ee; border-radius: 11px; background: #f5f9fc; }
.offer-storage-overview span { color: #60758a; font-size: 11px; font-weight: 850; text-transform: uppercase; }
.offer-storage-overview strong { color: #153b5f; font-size: 20px; }
.offer-storage-tools { padding: 8px 20px; display: grid; grid-template-columns: minmax(240px, 1fr) auto auto; align-items: end; gap: 9px; }
.offer-storage-search { height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid #bfd0df; border-radius: 10px; background: #fff; }
.offer-storage-search span { color: #6c8297; font-size: 18px; }
.offer-storage-search input { width: 100%; border: 0; outline: 0; color: #123555; background: transparent; }
.offer-storage-filter, .offer-age-select { display: grid; gap: 4px; color: #60758a; font-size: 10px; font-weight: 850; text-transform: uppercase; }
.offer-storage-filter select, .offer-age-select select { height: 42px; padding: 0 34px 0 10px; border: 1px solid #bfd0df; border-radius: 10px; color: #173f63; background: #fff; font: inherit; font-size: 12px; text-transform: none; }
.offer-storage-refresh, .offer-selection-count, .offer-storage-selection button { min-height: 38px; padding: 0 12px; border: 1px solid #bfd0df; border-radius: 9px; color: #173f63; background: #fff; font-size: 12px; font-weight: 850; cursor: pointer; }
.offer-storage-refresh { min-height: 42px; }
.offer-storage-selection { margin: 3px 20px 5px; padding: 9px; display: flex; align-items: end; flex-wrap: wrap; gap: 8px; border: 1px solid #d8e4ed; border-radius: 12px; background: #f8fbfd; }
.offer-select-all { min-height: 38px; padding: 0 8px; display: inline-flex; align-items: center; gap: 7px; color: #173f63; font-size: 12px; font-weight: 850; cursor: pointer; }
.offer-select-all input { width: 17px; height: 17px; accent-color: #087da8; }
.offer-selection-count { display: inline-flex; align-items: center; border-color: #b9d7e8; color: #08749a; background: #eef9fd; cursor: default; }
.offer-age-select { margin-left: auto; }
.offer-age-select select { height: 38px; }
.offer-storage-selection .offer-delete-selected { color: #fff; border-color: #bd2438; background: #c72b3f; }
.offer-storage-selection .offer-delete-selected:disabled { color: #8797a5; border-color: #d4dce3; background: #edf1f4; cursor: not-allowed; }
.offer-storage-check { width: 46px; align-self: stretch; display: grid; place-items: center; border-right: 1px solid #e2eaf0; cursor: pointer; }
.offer-storage-check input { position: absolute; opacity: 0; pointer-events: none; }
.offer-storage-check span { width: 20px; height: 20px; display: grid; place-items: center; border: 2px solid #afc1d0; border-radius: 6px; background: #fff; }
.offer-storage-check input:checked + span { border-color: #087da8; background: #087da8; }
.offer-storage-check input:checked + span::after { content: '✓'; color: #fff; font-size: 13px; font-weight: 950; }
.offer-storage-card-top { display: flex; align-items: center; gap: 9px; min-width: 0; }
.offer-storage-card-top strong { min-width: 0; flex: 1; font-size: 14px; }
.offer-expiry-badge { flex: 0 0 auto; padding: 4px 8px; border: 1px solid #c8d9e5; border-radius: 999px; color: #506b81; background: #f5f8fa; font-size: 10px; font-style: normal; font-weight: 900; white-space: nowrap; }
.offer-expiry-badge.is-active { color: #176442; border-color: #a9d8c1; background: #effaf5; }
.offer-expiry-badge.is-soon { color: #8b5a05; border-color: #ecd29c; background: #fff8e8; }
.offer-expiry-badge.is-expired { color: #b2263a; border-color: #efbcc4; background: #fff2f4; }
.offer-storage-card-actions { padding-right: 11px; display: flex; align-items: center; gap: 7px; }

.offer-expiry-modal[hidden] { display: none !important; }
.offer-expiry-modal { position: fixed; inset: 0; z-index: 10030; display: grid; place-items: center; padding: 24px; }
.offer-expiry-dialog { position: relative; width: min(560px, 100%); overflow: hidden; border: 1px solid #c5d8e6; border-radius: 20px; background: #fff; box-shadow: 0 28px 80px rgba(8, 29, 52, .32); }
.offer-expiry-dialog > header { padding: 19px 20px; display: flex; align-items: center; justify-content: space-between; gap: 15px; color: #153b5f; background: linear-gradient(135deg, #edf9fd, #fff); border-bottom: 1px solid #dce7ef; }
.offer-expiry-dialog > header span { display: block; margin-bottom: 4px; color: #0780ad; font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.offer-expiry-dialog > header h2 { margin: 0; font-size: 21px; }
.offer-expiry-dialog > p { margin: 0; padding: 17px 20px 8px; color: #5c7184; font-size: 13px; line-height: 1.5; }
.offer-expiry-quick { padding: 9px 20px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.offer-expiry-quick button { min-height: 40px; border: 1px solid #bcd1e0; border-radius: 10px; color: #173f63; background: #f6fafc; font-weight: 900; cursor: pointer; }
.offer-expiry-quick button:hover, .offer-expiry-quick button.is-active { color: #fff; border-color: #087da8; background: #087da8; }
.offer-expiry-date { margin: 4px 20px 18px; display: grid; gap: 7px; color: #3e5a72; font-size: 11px; font-weight: 900; text-transform: uppercase; }
.offer-expiry-date input { width: 100%; height: 46px; padding: 0 12px; border: 1px solid #b9cedd; border-radius: 11px; color: #153b5f; background: #fff; font: inherit; font-size: 15px; text-transform: none; }
.offer-expiry-date input:focus { outline: 3px solid rgba(0, 169, 232, .18); border-color: #00a9e8; }
.offer-expiry-date small { color: #71869a; font-size: 11px; font-weight: 700; line-height: 1.4; text-transform: none; }
.offer-expiry-actions { padding: 15px 20px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; border-top: 1px solid #e2eaf0; }
.offer-expiry-actions button { min-height: 44px; }
.offer-expiry-secondary { border: 1px solid #b9ccdb; border-radius: 10px; color: #173f63; background: #fff; font-weight: 900; cursor: pointer; }
body.offer-expiry-open { overflow: hidden; }

@media (max-width: 760px) {
    .offer-storage-modal { align-items: end; padding: 0; }
    .offer-storage-dialog { width: 100%; max-height: min(88dvh, 820px); border-radius: 18px 18px 0 0; }
    .offer-storage-form { grid-template-columns: 1fr; }
    .offer-share-result { grid-template-columns: 1fr; margin-inline: 14px; }
    .offer-storage-share { padding-inline: 9px; font-size: 11px; }
    .offer-storage-rename { padding-inline: 8px; font-size: 11px; }
    .offer-storage-overview { padding-inline: 14px; }
    .offer-storage-overview > div { padding: 8px; display: grid; }
    .offer-storage-overview strong { font-size: 18px; }
    .offer-storage-tools { padding-inline: 14px; grid-template-columns: 1fr auto; }
    .offer-storage-search { grid-column: 1 / -1; }
    .offer-storage-selection { margin-inline: 14px; align-items: center; }
    .offer-age-select { width: 100%; margin-left: 0; }
    .offer-age-select select { width: 100%; }
    .offer-storage-list { padding-inline: 14px; }
    .offer-storage-item { grid-template-columns: 42px minmax(0, 1fr); }
    .offer-storage-check { width: 42px; grid-row: 1; }
    .offer-storage-open-item { grid-row: 1; grid-column: 2; padding-left: 4px; }
    .offer-storage-card-top { align-items: flex-start; flex-direction: column; gap: 5px; }
    .offer-storage-card-actions { grid-column: 1 / -1; padding: 8px 10px; justify-content: flex-end; border-top: 1px solid #e0e9f0; }
    .offer-storage-card-actions .offer-storage-rename { margin-right: auto; }
    .offer-expiry-modal { align-items: end; padding: 0; }
    .offer-expiry-dialog { width: 100%; border-radius: 18px 18px 0 0; }
    .offer-expiry-actions { grid-template-columns: 1fr; }
    .dashboard-editor-modal { align-items: end; padding: 0; }
    .dashboard-editor-dialog { width: 100%; height: 94vh; max-height: 94vh; border-radius: 20px 20px 0 0; }
    .dashboard-editor-header { position: relative; padding: 16px 64px 16px 16px; }
    .dashboard-editor-close { position: absolute; top: 16px; right: 16px; }
    .dashboard-editor-header h2 { font-size: 20px; }
    .dashboard-editor-layout { display: block; overflow: hidden; }
    .dashboard-editor-preview { min-height: 420px; padding: 20px; }
    .dashboard-offer-preview-card { max-width: none; min-height: 104px; padding: 13px; grid-template-columns: minmax(0, 1fr) 124px; gap: 10px; }
    .dashboard-offer-preview-copy strong { font-size: 17px; }
    .dashboard-offer-preview-copy span { font-size: 8px; }
    .dashboard-offer-preview-logo { width: 124px; height: 55px; padding: 5px; }
    .dashboard-preview-avatar { width: 44px; height: 44px; margin: 0 0 10px; border-radius: 13px; font-size: 15px; }
    .dashboard-preview-note { display: none; }
    .dashboard-editor-form { overflow: auto; padding: 12px; }
    .dashboard-editor-section { padding: 14px; }
    .dashboard-profile-grid { grid-template-columns: 1fr; }
    .dashboard-profile-grid label.is-wide { grid-column: auto; }
    .dashboard-logo-field.is-wide { grid-column: auto; grid-template-columns: 1fr; }
    .dashboard-logo-controls { align-items: stretch; flex-direction: column; }
    .dashboard-profile-grid .dashboard-logo-upload, .dashboard-logo-controls button { width: 100%; }
    .dashboard-logo-editor.is-wide { grid-column: auto; grid-template-columns: 1fr; }
    .dashboard-logo-editor-controls { grid-template-columns: 1fr; }
    .dashboard-logo-editor .dashboard-logo-controls, #dashboard-logo-status { grid-column: auto; }
    .dashboard-image-adjustments { grid-template-columns: 1fr; }
    .dashboard-logo-crop { width: min(250px, 100%); height: auto; aspect-ratio: 25 / 11; }
    .dashboard-toggle-grid.provider-grid, .dashboard-toggle-grid.section-grid { grid-template-columns: 1fr 1fr; }
    .dashboard-provider-groups { grid-template-columns: 1fr; }
    .dashboard-consultant-add, .dashboard-push-setting { grid-template-columns: 1fr; }
    .dashboard-password-current { grid-template-columns: 1fr; gap: 7px; }
    .dashboard-password-card { grid-template-columns: 1fr; gap: 9px; }
    .dashboard-password-fields { grid-template-columns: 1fr; }
    .dashboard-password-button { width: 100%; }
    .dashboard-consultant-add .is-wide { grid-column: auto; }
    .dashboard-consultant-photo-editor { grid-template-columns: 1fr; }
    .dashboard-consultant-photo-controls { grid-template-columns: 1fr; }
    .dashboard-consultant-photo-actions, #dashboard-consultant-photo-status { grid-column: auto; }
    .dashboard-consultant-photo-actions { align-items: stretch; flex-direction: column; }
    .dashboard-consultant-add .dashboard-consultant-photo-upload, .dashboard-consultant-add .dashboard-consultant-photo-actions button { width: 100%; }
    .dashboard-consultant-form-actions { align-items: stretch; flex-direction: column; }
    .dashboard-consultant-save-buttons { width: 100%; }
    .dashboard-consultant-form-actions button { width: 100%; }
    .dashboard-consultant-list { grid-template-columns: 1fr; }
    .dashboard-toggle-grid.provider-grid label { padding-left: 48px; }
    .dashboard-editor-actions { padding: 11px 12px; display: grid; grid-template-columns: 1fr 1fr; }
    .dashboard-editor-actions .dashboard-reset { grid-column: 1 / -1; margin: 0; min-height: 34px; }
    .dashboard-editor-actions .dashboard-preview-open { grid-column: 1 / -1; }
    .dashboard-editor-actions .dashboard-save { grid-column: 2; grid-row: 3; }
    .dashboard-editor-actions .dashboard-cancel { grid-column: 1; grid-row: 3; }
    .dashboard-offer-preview-modal { align-items: end; padding: 0; }
    .dashboard-offer-preview-dialog { width: 100%; max-height: 92dvh; border-radius: 20px 20px 0 0; }
    .dashboard-offer-preview-dialog > header { position: relative; padding: 15px 62px 15px 15px; }
    .dashboard-offer-preview-dialog > header button { position: absolute; top: 15px; right: 15px; }
    .cart-primary-actions { grid-template-columns: 1fr 1fr; margin-bottom: 8px; padding-bottom: 8px; }
    .cart-primary-actions #save-offer-btn, .cart-primary-actions #open-offers-btn { min-height: 42px; padding-inline: 8px; font-size: 11px; }
}

/* V194: ruhiger VVL-Fokus – eine Entscheidung pro Bildschirm */
.renewal-builder-tab {
    max-width: 1180px;
    margin-inline: auto;
    padding: 18px 22px 48px;
    background: #f5f8fc;
}
.renewal-builder-hero {
    padding: 20px 24px;
    border: 1px solid #cfe1ee;
    border-top: 3px solid #087fae;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 24px rgba(15, 65, 95, .06);
}
.renewal-builder-hero h2 { margin: 3px 0 0; font-size: 1.45rem; letter-spacing: -.02em; }
.renewal-builder-hero p,
.renewal-section-head p,
.renewal-editor-card header p,
.renewal-home-inventory-heading small,
.renewal-mobile-inventory-head small,
.renewal-inventory-next span,
.renewal-stage-actions span { display: none; }
.renewal-builder-fee { min-width: 132px; padding: 9px 12px; border-radius: 12px; }
.renewal-builder-fee span { font-size: .6rem; }
.renewal-builder-fee strong { display: block; font-size: 1.15rem; }
.renewal-builder-fee small { font-size: .68rem; }
.renewal-quickbar { margin: 10px 0 0; padding: 10px 14px; border: 1px solid #d6e5ed; border-radius: 13px; background: #fff; box-shadow: none; }
.renewal-quickbar-total { padding-left: 14px; border-left: 1px solid #e1ebf1; }
.renewal-quickbar-total span { font-size: .6rem; }
.renewal-quickbar-total strong { font-size: 1rem; }
.renewal-workflow-guide.renewal-workflow-guide-four { margin: 10px 0 0; border: 0; border-radius: 10px; background: #e8f0f5; box-shadow: inset 0 0 0 1px #d5e2ea; }
.renewal-workflow-guide-four > div { padding: 9px 12px; border: 0; background: transparent !important; }
.renewal-workflow-guide-four > div:not(.is-active):not(.is-complete) { opacity: .55; }
.renewal-workflow-guide-four b { width: 24px; height: 24px; flex-basis: 24px; }
.renewal-workflow-guide-four strong { font-size: .72rem; }
.renewal-workflow-guide-four small { display: none; }
.renewal-inventory-card, .renewal-editor-card { margin-top: 10px; padding: 18px; border-radius: 16px; box-shadow: 0 4px 16px rgba(14, 61, 95, .045); }
.renewal-section-head, .renewal-editor-card > header { padding-bottom: 12px; }
.renewal-section-head h3, .renewal-editor-card h3 { margin-top: 2px; font-size: 1.08rem; }
.renewal-editor-step { font-size: .62rem; }
.renewal-mobile-inventory-head { padding: 11px 14px; }
.renewal-mobile-inventory-item { padding: 12px 14px; grid-template-columns: 28px minmax(130px, .8fr) minmax(150px, 1.2fr) minmax(120px, .8fr) 32px; gap: 8px; }
.renewal-mobile-inventory-item :is(input, select) { height: 36px; }
.renewal-home-inventory-heading { margin-top: 14px; }
.renewal-inventory-form { padding-top: 6px; }
.renewal-inventory-service { padding: 11px 13px; }
.renewal-inventory-fields { gap: 8px; }
.renewal-inventory-next, .renewal-stage-actions { margin-top: 14px; padding-top: 12px; }
.renewal-inventory-next strong, .renewal-stage-actions strong { font-size: .76rem; }
.renewal-inventory-next .renewal-primary-button, .renewal-stage-actions .renewal-primary-button { min-height: 40px; }
.renewal-linked-offers { margin-top: 12px; }
.renewal-linked-offer-head { padding: 11px 13px; }
.renewal-linked-offer-target { min-height: 62px; padding: 10px 13px; }
.renewal-live-comparison { margin-top: 12px; }
.renewal-cart-summary { margin-top: 10px; }
@media (max-width: 760px) {
    .renewal-builder-tab { padding: 10px 8px 28px; }
    .renewal-builder-hero { padding: 16px; }
    .renewal-builder-fee { min-width: 105px; }
    .renewal-quickbar { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
    .renewal-quickbar-total { grid-column: 1; grid-row: 2; padding: 0; border: 0; }
    .renewal-quickbar-cart { grid-column: 2; grid-row: 2; }
}

/* V193: VVL als fokussierter Arbeitsbereich mit optionalem Warenkorb-Drawer */
body:has(#tab-family-renewal.active) .app-layout {
    max-width: 1540px;
    gap: 0;
}

body:has(#tab-family-renewal.active) .main-content {
    width: 100%;
}

body:has(#tab-family-renewal.active) .header-filter-row,
body:has(#tab-family-renewal.active) .tab-row-providers {
    display: none;
}

/* Im VVL-Arbeitsbereich bleiben nur Listenpreise, VVL und die Zuhause-Auswahl sichtbar. */
body:has(#tab-family-renewal.active) .tab-row-o2 .tab-btn[data-target="tab-standard"],
body:has(#tab-family-renewal.active) .tab-row-o2 .tab-btn[data-target="tab-young"],
body:has(#tab-family-renewal.active) .tab-row-o2 .tab-btn[data-target="tab-plus"],
body:has(#tab-family-renewal.active) .tab-row-o2 .tab-btn[data-target="tab-kombi"],
body:has(#tab-family-renewal.active) .tab-row-o2 .tab-btn[data-target="tab-blue"],
body:has(#tab-family-renewal.active) .tab-row-o2 .tab-btn[data-target="tab-high-value"],
body:has(#tab-family-renewal.active) .tab-row-hardware {
    display: none;
}

body:has(#tab-family-renewal.active) .sidebar-cart {
    display: none;
}

body:has(#tab-family-renewal.active) .renewal-builder-tab {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding: 28px 34px 64px;
}

body:has(#tab-family-renewal.active) .renewal-builder-hero {
    min-height: 128px;
    padding: 28px 30px;
    border: 1px solid #c4dceb;
    border-top: 5px solid #0033a0;
    border-radius: 24px;
    background:
        radial-gradient(circle at 93% 4%, rgba(0, 169, 232, .16) 0 110px, transparent 111px),
        linear-gradient(135deg, #ffffff 0%, #f3fbff 100%);
    box-shadow: 0 12px 30px rgba(18, 61, 92, .09);
}

body:has(#tab-family-renewal.active) .renewal-builder-hero h2 {
    color: #082f52;
    font-size: clamp(1.7rem, 2.4vw, 2.25rem);
    letter-spacing: -.035em;
}

body:has(#tab-family-renewal.active) .renewal-builder-hero p {
    margin-top: 9px;
    font-size: .88rem;
}

body:has(#tab-family-renewal.active) .renewal-builder-fee {
    flex-basis: 168px;
    padding: 14px 16px;
    border: 1px solid #b7d9e9;
    border-radius: 16px;
    background: rgba(255, 255, 255, .86);
    text-align: left;
    box-shadow: 0 5px 14px rgba(18, 61, 92, .05);
}

body:has(#tab-family-renewal.active) .renewal-builder-fee span {
    display: block;
    color: #648196;
    font-size: .62rem;
    letter-spacing: .09em;
}

body:has(#tab-family-renewal.active) .renewal-builder-fee strong {
    display: block;
    margin-top: 5px;
    color: #0033a0;
    font-size: 1.65rem;
    line-height: 1;
}

body:has(#tab-family-renewal.active) .renewal-builder-fee small {
    display: block;
    margin-top: 7px;
    color: #648196;
    font-size: .68rem;
    font-weight: 800;
}

.renewal-quickbar {
    max-width: 1180px;
    margin: 14px auto 0;
    padding: 12px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 16px;
    border: 1px solid #cde1eb;
    border-radius: 17px;
    background: #ffffff;
    box-shadow: 0 5px 16px rgba(18, 61, 92, .05);
}

.renewal-quickbar-lead,
.renewal-quickbar-total {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.renewal-quickbar-icon {
    width: 33px;
    height: 33px;
    display: grid;
    place-items: center;
    flex: 0 0 33px;
    border-radius: 11px;
    background: #eaf7fc;
    color: #087fae;
    font-size: 1rem;
    font-weight: 950;
}

.renewal-quickbar-lead > div,
.renewal-quickbar-total {
    display: grid;
    gap: 2px;
}

.renewal-quickbar-lead strong {
    overflow: hidden;
    color: #123f61;
    font-size: .78rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.renewal-quickbar-lead small,
.renewal-quickbar-total span {
    color: #708799;
    font-size: .67rem;
}

.renewal-quickbar-total {
    min-width: 165px;
    padding-inline: 16px;
    border-inline: 1px solid #e1ebf1;
}

.renewal-quickbar-total strong {
    color: #0033a0;
    font-size: 1.08rem;
}

.renewal-quickbar-cart {
    min-height: 38px;
    padding-inline: 15px;
    white-space: nowrap;
}

body:has(#tab-family-renewal.active) .renewal-builder-tab .renewal-builder-hero { order: 1; }
body:has(#tab-family-renewal.active) .renewal-builder-tab .renewal-quickbar { order: 2; }
body:has(#tab-family-renewal.active) .renewal-builder-tab .renewal-workflow-guide { order: 3; }
body:has(#tab-family-renewal.active) .renewal-builder-tab [data-renewal-stage] { order: 4; }

body:has(#tab-family-renewal.active) .renewal-workflow-guide.renewal-workflow-guide-four,
body:has(#tab-family-renewal.active) .renewal-wizard-panel {
    width: 100%;
    box-sizing: border-box;
    max-width: 1180px;
    margin-inline: auto;
}

body:has(#tab-family-renewal.active) .renewal-quickbar {
    width: 100%;
    box-sizing: border-box;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide.renewal-workflow-guide-four {
    margin-top: 14px;
    border-radius: 17px;
    box-shadow: 0 5px 16px rgba(18, 61, 92, .05);
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four > div {
    min-height: 68px;
    padding: 14px 18px;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four b {
    width: 32px;
    height: 32px;
    flex-basis: 32px;
    font-size: .78rem;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four strong {
    color: #123f61;
    font-size: .79rem;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four small {
    color: #7890a0;
    font-size: .66rem;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four > div.is-active {
    background: linear-gradient(135deg, #effaff, #ffffff);
    box-shadow: inset 0 -3px 0 #00a9e8;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four > div.is-complete {
    background: #f5fcf8;
}

body:has(#tab-family-renewal.active) .renewal-inventory-card,
body:has(#tab-family-renewal.active) .renewal-editor-card {
    margin-top: 16px;
    padding: 27px;
    border: 1px solid #cbdfe9;
    border-radius: 21px;
    box-shadow: 0 10px 26px rgba(18, 61, 92, .07);
}

body:has(#tab-family-renewal.active) .renewal-section-head,
body:has(#tab-family-renewal.active) .renewal-editor-card > header {
    padding-bottom: 19px;
}

body:has(#tab-family-renewal.active) .renewal-section-head h3,
body:has(#tab-family-renewal.active) .renewal-editor-card h3 {
    color: #0b3152;
    font-size: 1.35rem;
    letter-spacing: -.02em;
}

body:has(#tab-family-renewal.active) .renewal-section-head p,
body:has(#tab-family-renewal.active) .renewal-editor-card header p {
    max-width: 720px;
    margin-top: 8px;
    color: #708799;
    font-size: .78rem;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory {
    margin-top: 18px;
    border-radius: 17px;
    box-shadow: 0 3px 12px rgba(18, 61, 92, .04);
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-head {
    min-height: 60px;
    padding: 15px 18px;
    background: #f5fafc;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-head strong {
    font-size: .9rem;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-head small {
    font-size: .68rem;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-item {
    padding: 17px 18px;
    gap: 12px;
    background: #ffffff;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-item + .renewal-mobile-inventory-item {
    border-top-color: #e6eef3;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-number {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: #e8f7fc;
    color: #087fae;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-item .is-manual-provider[hidden] {
    display: none !important;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-item :is(input, select) {
    height: 42px;
    border-radius: 10px;
    border-color: #c4d7e2;
    font-size: .78rem;
}

body:has(#tab-family-renewal.active) .renewal-home-inventory-heading {
    margin-top: 26px;
    padding: 0 2px;
}

body:has(#tab-family-renewal.active) .renewal-home-inventory-heading strong {
    font-size: .88rem;
}

body:has(#tab-family-renewal.active) .renewal-inventory-service {
    padding: 17px 18px;
    border: 1px solid #d6e4ec;
    border-radius: 15px;
}

body:has(#tab-family-renewal.active) .renewal-inventory-next,
body:has(#tab-family-renewal.active) .renewal-stage-actions {
    margin-top: 22px;
    padding-top: 18px;
}

body:has(#tab-family-renewal.active) .renewal-primary-button,
body:has(#tab-family-renewal.active) .renewal-secondary-button {
    min-height: 43px;
    border-radius: 11px;
    font-size: .75rem;
}

body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary {
    width: 100%;
    margin: 14px 0 0;
    border-radius: 16px;
    box-shadow: 0 5px 16px rgba(18, 61, 92, .05);
}

body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    padding: 0;
}

body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows > div {
    min-height: 68px;
    padding: 13px 17px;
    display: grid;
    align-content: center;
    gap: 5px;
    border-left: 1px solid #d9eaf2;
}

body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows > div:first-child {
    border-left: 0;
}

body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows span {
    font-size: .67rem;
}

body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows strong {
    font-size: 1.08rem;
}

.renewal-cart-close {
    display: none;
    min-height: 31px;
    padding: 0 10px;
    border: 1px solid #cbdde8;
    border-radius: 9px;
    background: #f5fbfe;
    color: #35647f;
    font: inherit;
    font-size: .67rem;
    font-weight: 850;
    cursor: pointer;
}

body:has(#tab-family-renewal.active).renewal-cart-drawer-open::before {
    content: none !important;
    display: none !important;
}

body:has(#tab-family-renewal.active).renewal-cart-drawer-open .sidebar-cart {
    display: flex;
    position: fixed;
    z-index: 1201;
    top: 22px;
    right: 22px;
    bottom: 22px;
    width: min(430px, calc(100vw - 44px));
    height: calc(100vh - 44px);
    min-height: 0;
    max-height: none;
    overflow: hidden;
    isolation: isolate;
    pointer-events: auto;
    border-radius: 20px;
    box-shadow: 0 24px 60px rgba(8, 37, 61, .24);
    animation: renewal-cart-drawer-in .18s ease-out both;
    opacity: 1 !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body:has(#tab-family-renewal.active).renewal-cart-drawer-open .renewal-cart-close {
    display: inline-flex;
    align-items: center;
}

body:has(#tab-family-renewal.active).renewal-cart-drawer-open .cart-items {
    overflow-y: auto;
}

@keyframes renewal-cart-drawer-in {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: translateX(0); }
}

@media (max-width: 820px) {
    body:has(#tab-family-renewal.active) .renewal-builder-tab { padding: 18px 14px 42px; }
    body:has(#tab-family-renewal.active) .renewal-builder-hero { padding: 22px; }
    .renewal-quickbar { grid-template-columns: 1fr auto; gap: 11px; }
    .renewal-quickbar-total { grid-column: 1; grid-row: 2; padding-left: 43px; border-inline: 0; }
    .renewal-quickbar-cart { grid-column: 2; grid-row: 2; }
    body:has(#tab-family-renewal.active) .renewal-inventory-card,
    body:has(#tab-family-renewal.active) .renewal-editor-card { padding: 19px; }
    body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows { grid-template-columns: 1fr; }
    body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows > div { border-left: 0; border-top: 1px solid #d9eaf2; }
    body:has(#tab-family-renewal.active) .renewal-review-workspace .renewal-cart-summary-rows > div:first-child { border-top: 0; }
}

@media (max-width: 560px) {
    .renewal-quickbar { display: flex; flex-wrap: wrap; }
    .renewal-quickbar-lead { flex: 1 1 100%; }
    .renewal-quickbar-total { flex: 1 1 auto; padding-left: 43px; }
    .renewal-quickbar-cart { flex: 0 0 auto; }
    body:has(#tab-family-renewal.active).renewal-cart-drawer-open .sidebar-cart {
        top: 10px;
        right: 10px;
        bottom: 10px;
        width: calc(100vw - 20px);
    }
}

@media print {
    .shop-selector-modal, .shop-switch-button, .header-shop-stack, .advisor-switcher, .mobile-shop-button, .mobile-shop-context, .mobile-advisor-switcher, .dashboard-editor-modal, .dashboard-edit-btn, .mobile-dashboard-button, .offer-storage-modal, .offer-storage-btn, .admin-link { display: none !important; }
}
/* o2 Vertragsverlängerung und Familienpaket */
.family-renewal-nav-btn {
    white-space: nowrap;
}

.family-renewal-tab {
    --family-green: #0aa765;
    --family-navy: #073b66;
    --family-line: #c9dce8;
    max-width: 1500px;
    margin: 0 auto;
    color: #0b3152;
}

.family-renewal-hero {
    margin-bottom: 14px;
    padding: 22px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    overflow: hidden;
    border: 1px solid #b9d7e6;
    border-top: 4px solid #0784b6;
    border-radius: 16px;
    background:
        radial-gradient(circle at 92% 0, rgba(20, 161, 202, .14) 0 80px, transparent 81px),
        linear-gradient(135deg, #fff 0%, #f2faff 100%);
    box-shadow: 0 8px 24px rgba(3, 53, 89, .08);
}

.family-renewal-kicker {
    display: block;
    margin-bottom: 4px;
    color: #0784b6;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.family-renewal-hero h2 {
    margin: 0;
    color: #052d50;
    font-size: clamp(1.35rem, 2vw, 2rem);
    line-height: 1.1;
}

.family-renewal-hero p {
    max-width: 800px;
    margin: 8px 0 0;
    color: #526e83;
    font-size: .88rem;
    line-height: 1.45;
}

.family-renewal-hero-badge {
    min-width: 205px;
    padding: 13px 16px;
    display: grid;
    gap: 2px;
    border: 1px solid #9dddbc;
    border-radius: 13px;
    color: #087347;
    background: #effcf5;
    text-align: right;
}

.family-renewal-hero-badge strong { font-size: 1.45rem; }
.family-renewal-hero-badge span { font-size: .72rem; font-weight: 800; }

.family-renewal-live-summary {
    margin-bottom: 14px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.family-renewal-live-summary > div {
    min-height: 76px;
    padding: 12px 14px;
    display: grid;
    align-content: center;
    gap: 5px;
    border: 1px solid #c9dce8;
    border-radius: 12px;
    background: #fff;
}

.family-renewal-live-summary span {
    color: #60798d;
    font-size: .66rem;
    font-weight: 900;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.family-renewal-live-summary strong {
    color: #073b66;
    font-size: 1.08rem;
    line-height: 1.15;
}

.family-renewal-live-summary .is-saving {
    border-color: #7bd8aa;
    background: #effcf5;
}
.family-renewal-live-summary .is-saving strong { color: #07854f; }
.family-renewal-live-summary .is-more { border-color: #efcc8f; background: #fff9ed; }
.family-renewal-live-summary .is-more strong { color: #a45a00; }

.family-renewal-section {
    margin-bottom: 14px;
    padding: 18px;
    border: 1px solid #c9dce8;
    border-radius: 15px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(3, 53, 89, .055);
}

.family-renewal-section > header { margin-bottom: 14px; }
.family-renewal-section > header > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.family-renewal-section > header > div > span {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    color: #0877a7;
    background: #e8f7fd;
    font-size: .72rem;
    font-weight: 950;
}

.family-renewal-section h3,
.family-renewal-section h4 { margin: 0; color: #0b3152; }
.family-renewal-section h3 { font-size: 1.08rem; }
.family-renewal-section h4 { font-size: .9rem; }
.family-renewal-section header p,
.family-household-card p {
    margin: 3px 0 0;
    color: #6b8192;
    font-size: .74rem;
    line-height: 1.35;
}

.family-contract-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.family-contract-card {
    min-width: 0;
    padding: 13px;
    border: 1px solid #d5e3ec;
    border-radius: 12px;
    background: #f9fcfe;
}

.family-contract-card.is-renewal {
    border-left: 4px solid var(--family-green);
    background: linear-gradient(90deg, #f3fcf7, #fbfefd 36%);
}

.family-contract-card-head {
    margin-bottom: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.family-contract-card-head > div {
    display: flex;
    align-items: center;
    gap: 8px;
}

.family-contract-card-head > div > span {
    color: #0883b2;
    font-size: .68rem;
    font-weight: 950;
}

.family-contract-card-head strong { font-size: .82rem; }
.family-contract-card-head button {
    width: 28px;
    height: 28px;
    border: 1px solid #e5bfc6;
    border-radius: 8px;
    color: #a83649;
    background: #fff;
    font-weight: 900;
    cursor: pointer;
}

.family-link-renewal-toggle {
    width: 100%;
    min-height: 36px;
    margin-top: 10px;
    border: 1px solid #75cba0;
    border-radius: 9px;
    color: #08794c;
    background: #effaf4;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

.family-link-renewal-toggle[aria-expanded="true"] {
    color: #fff;
    background: #0a9a5f;
}

.family-linked-renewal {
    margin-top: 10px;
    padding: 12px;
    border: 1px solid #9dd9b9;
    border-left: 4px solid #0aa765;
    border-radius: 10px;
    background: #f2fbf6;
}

.family-linked-renewal[hidden] { display: none !important; }
.family-linked-renewal-head {
    margin-bottom: 10px;
    display: grid;
    gap: 2px;
}
.family-linked-renewal-head strong { color: #08794c; font-size: .78rem; }
.family-linked-renewal-head span { color: #5e796b; font-size: .67rem; }

.family-field-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.family-mobile-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.family-renewal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.family-field-grid label {
    position: relative;
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #5e7589;
    font-size: .62rem;
    font-weight: 900;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.family-field-grid label.is-wide { grid-column: 1 / -1; }
.family-field-grid input,
.family-field-grid select {
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 0 10px;
    border: 1px solid #bdd1df;
    border-radius: 9px;
    outline: none;
    color: #0b3152;
    background: #fff;
    font: 750 .78rem/1.2 inherit;
    text-transform: none;
}

.family-field-grid input:focus,
.family-field-grid select:focus {
    border-color: #088bc0;
    box-shadow: 0 0 0 3px rgba(8, 139, 192, .11);
}

.family-field-grid label > span {
    position: absolute;
    right: 10px;
    bottom: 11px;
    color: #667e91;
    font-size: .72rem;
}

.family-field-grid label:has(> span) input { padding-right: 26px; }
.family-renewal-fee-note {
    margin-top: 9px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    color: #13764d;
    font-size: .68rem;
}

.family-add-button {
    margin-top: 10px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px dashed #68b5d2;
    border-radius: 10px;
    color: #0877a7;
    background: #f2fbff;
    font-weight: 850;
    cursor: pointer;
}

.family-household-grid {
    margin-top: 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.family-household-card {
    padding: 0;
    overflow: hidden;
    border: 1px solid #d5e3ec;
    border-radius: 12px;
    background: #f9fcfe;
}

.family-service-toggle {
    width: 100%;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    border: 0;
    color: #0b3152;
    background: transparent;
    text-align: left;
    cursor: pointer;
}

.family-service-toggle > span:nth-child(2) {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.family-service-toggle strong { font-size: .82rem; }
.family-service-toggle small { color: #6b8192; font-size: .68rem; }
.family-service-toggle b {
    margin-left: auto;
    color: #0877a7;
    font-size: .68rem;
}

.family-service-toggle[aria-expanded="true"] {
    background: #edf8fc;
    border-bottom: 1px solid #d5e3ec;
}

.family-household-card > [data-family-service-body] {
    padding: 12px 14px 14px;
}

.family-service-icon {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #0577a6;
    background: #e8f7fd;
    font-size: 1rem;
}

.family-cart-products { display: grid; gap: 8px; }
.family-cart-products article {
    padding: 10px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    border: 1px solid #d8e5ed;
    border-radius: 10px;
    background: #f8fbfd;
}

.family-cart-products article > div { min-width: 0; display: grid; gap: 2px; }
.family-cart-products article strong { font-size: .8rem; }
.family-cart-products article span { color: #60798d; font-size: .7rem; }
.family-cart-products label { color: #60798d; font-size: .62rem; font-weight: 900; text-transform: uppercase; }
.family-cart-products select {
    min-height: 34px;
    margin-left: 6px;
    border: 1px solid #bdd1df;
    border-radius: 8px;
    color: #0b3152;
    background: #fff;
    font-weight: 750;
}

.family-cross-sell-empty {
    padding: 18px;
    border: 1px dashed #c1d5e1;
    border-radius: 10px;
    color: #6a8192;
    background: #f8fbfd;
    text-align: center;
    font-size: .78rem;
}

.family-cross-sell-hint {
    margin: 10px 0 0;
    color: #60798d;
    font-size: .7rem;
}

.family-cart-summary {
    margin: 10px 0;
    padding: 10px 12px;
    border: 1px solid #98d9b8;
    border-left: 4px solid #0aa765;
    border-radius: 11px;
    background: #f1fbf6;
}

.family-cart-summary[hidden] { display: none !important; }
.family-cart-summary header {
    margin-bottom: 7px;
    padding-bottom: 7px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #c8e9d8;
    color: #087347;
}
.family-cart-summary header span { font-size: .72rem; font-weight: 950; text-transform: uppercase; }
.family-cart-summary header strong { font-size: .7rem; }
.family-cart-summary > div {
    padding: 3px 0;
    display: flex;
    justify-content: space-between;
    gap: 12px;
    color: #365e4c;
    font-size: .72rem;
}
.family-cart-summary > div strong { color: #073b66; }

/* VVL als normale Warenkorbposition */
.renewal-builder-tab {
    padding: 18px 24px 34px;
    color: #0b3152;
}

.renewal-builder-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 16px 20px;
    border: 1px solid #b9d8eb;
    border-top: 4px solid #0033a0;
    border-radius: 16px;
    background:
        radial-gradient(circle at 94% 0, rgba(0, 169, 232, .12) 0 78px, transparent 79px),
        linear-gradient(135deg, #fff 0%, #f4fbff 100%);
    box-shadow: 0 5px 16px rgba(0, 51, 160, .08);
}

.renewal-builder-kicker,
.renewal-editor-step {
    display: block;
    margin-bottom: 5px;
    color: #0033a0;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.renewal-builder-hero h2 {
    margin: 0;
    font-size: 1.4rem;
    line-height: 1.1;
}

.renewal-builder-hero p,
.renewal-editor-card header p,
.renewal-cross-sell-note p {
    margin: 4px 0 0;
    color: #5c7186;
    font-size: .78rem;
    line-height: 1.35;
}

.renewal-workflow-guide {
    margin-top: 14px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow: hidden;
    border: 1px solid #c8dae6;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(17, 64, 96, .05);
}

.renewal-workflow-guide > div {
    min-width: 0;
    padding: 12px 16px;
    display: flex;
    align-items: center;
    gap: 11px;
}

.renewal-workflow-guide > div + div { border-left: 1px solid #dce7ee; }

.renewal-workflow-guide b {
    flex: 0 0 28px;
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #e8f4fa;
    color: #0878a4;
    font-size: .75rem;
}

.renewal-workflow-guide .is-active b { background: #087fae; color: #fff; }
.renewal-workflow-guide span { min-width: 0; display: grid; gap: 2px; }
.renewal-workflow-guide strong { color: #103c5e; font-size: .78rem; }
.renewal-workflow-guide small { color: #718697; font-size: .66rem; line-height: 1.25; }

.renewal-builder-fee {
    flex: 0 0 180px;
    display: grid;
    gap: 2px;
    padding: 10px 14px;
    border: 2px solid #00a9e8;
    border-radius: 12px;
    background: linear-gradient(135deg, #f4fbff, #e8f7fd);
    text-align: right;
}

.renewal-builder-fee span,
.renewal-builder-fee small {
    color: #536e86;
    font-size: .72rem;
    font-weight: 850;
}

.renewal-builder-fee strong {
    color: #07854f;
    font-size: 1.2rem;
}

.renewal-editor-card {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid #cadbe8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(0, 51, 160, .08);
}

.renewal-editor-card > header {
    padding-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e1ebf2;
}

.renewal-editor-hint {
    flex: 0 0 auto;
    padding: 7px 11px;
    border-radius: 999px;
    border: 1px solid #b8d9ee;
    background: #f4fbff;
    color: #0033a0;
    font-size: .68rem;
    font-weight: 900;
}

.renewal-editor-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.renewal-position-form {
    display: grid;
    grid-template-columns: .85fr 1fr 1.45fr;
    gap: 11px;
    padding-top: 12px;
}

.renewal-position-form fieldset {
    display: grid;
    align-content: start;
    gap: 9px;
    min-width: 0;
    margin: 0;
    padding: 12px;
    border: 1px solid #d5e3ed;
    border-radius: 12px;
    background: #f9fbfd;
}

.renewal-position-form fieldset.is-new-contract {
    grid-template-columns: 1fr 1fr;
    border-color: #9ed5eb;
    background: linear-gradient(135deg, #f8fcff, #eef9fe);
}

.renewal-position-form legend {
    padding: 0 6px;
    color: #0b3152;
    font-size: .82rem;
    font-weight: 950;
}

.renewal-position-form legend span,
.renewal-position-form label > span:not(.renewal-money-input) {
    color: #72869a;
    font-size: .7rem;
    font-weight: 700;
}

.renewal-position-form label {
    display: grid;
    gap: 6px;
    color: #466076;
    font-size: .73rem;
    font-weight: 900;
    letter-spacing: .025em;
}

.renewal-position-form label.is-wide {
    grid-column: 1 / -1;
}

.renewal-position-form input {
    width: 100%;
    min-width: 0;
    height: 42px;
    padding: 0 12px;
    border: 1px solid #b9ccda;
    border-radius: 9px;
    background: #fff;
    color: #0b3152;
    font-family: inherit;
    font-size: .86rem;
    font-weight: 750;
    box-sizing: border-box;
}

.renewal-position-form input:focus {
    outline: 3px solid rgba(0, 153, 204, .14);
    border-color: #0099cc;
}

.renewal-money-input {
    position: relative;
    display: block;
}

.renewal-money-input input {
    padding-right: 35px;
}

.renewal-money-input b {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: #527087;
}

.renewal-form-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding-top: 2px;
}

.renewal-form-actions > div {
    display: flex;
    gap: 9px;
    margin-left: auto;
}

.renewal-primary-button,
.renewal-secondary-button {
    min-height: 43px;
    padding: 0 16px;
    border-radius: 10px;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 900;
    cursor: pointer;
}

.renewal-primary-button {
    border: 1px solid #0033a0;
    background: linear-gradient(135deg, #0019a5 0%, #0033a0 72%, #0066cc 100%);
    color: #fff;
    box-shadow: inset 0 -3px 0 #00b7f1, 0 5px 12px rgba(0, 51, 160, .18);
}

.renewal-primary-button:hover {
    border-color: #001f75;
    background: #001f75;
}

.renewal-secondary-button {
    border: 1px solid #bfd1de;
    background: #fff;
    color: #16486e;
}

.renewal-form-message {
    margin: 0;
    color: #07854f;
    font-size: .8rem;
    font-weight: 850;
}

.renewal-form-message[data-tone="error"] {
    color: #b3261e;
}

.renewal-live-comparison {
    margin-top: 11px;
    min-height: 42px;
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 9px;
    border: 1px solid #9ed5eb;
    border-radius: 10px;
    background: linear-gradient(135deg, #f7fcff, #edf8fd);
    color: #173f63;
    font-size: .76rem;
}

.renewal-live-comparison[hidden],
.renewal-live-incomplete[hidden] {
    display: none !important;
}

.renewal-live-comparison > span {
    margin-right: auto;
    color: #536e86;
    font-size: .65rem;
    font-weight: 950;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.renewal-live-comparison strong { color: #0033a0; }
.renewal-live-comparison > b { color: #7790a4; }
.renewal-live-comparison em {
    padding-left: 9px;
    border-left: 1px solid #c9e3f0;
    color: #07854f;
    font-style: normal;
    font-weight: 950;
}
.renewal-live-comparison em.is-more { color: #a45a00; }
.renewal-live-comparison em.is-same { color: #405c73; }

.renewal-live-incomplete {
    margin-top: 11px;
    padding: 9px 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid #e2bd77;
    border-left: 4px solid #c98200;
    border-radius: 10px;
    background: #fff9ec;
    color: #725014;
    font-size: .72rem;
}

.renewal-live-incomplete strong { color: #925d00; }

.renewal-cross-sell-note {
    margin-top: 12px;
    padding: 11px 14px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #b8d9ee;
    border-left: 4px solid #0033a0;
    border-radius: 12px;
    background: linear-gradient(135deg, #f7fcff, #edf8fd);
}

.renewal-cross-sell-note > span {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: #dff3fc;
    color: #0033a0;
    font-size: .75rem;
    font-weight: 950;
}

.renewal-cross-sell-note > div { min-width: 0; }
.renewal-cross-sell-note strong { color: #123f61; font-size: .84rem; }

.renewal-cross-sell-note p {
    margin-top: 3px;
    font-size: .76rem;
}

.renewal-cross-sell-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 7px;
}

.renewal-cross-sell-actions button {
    min-height: 34px;
    padding: 0 11px;
    border: 1px solid #8fc9df;
    border-radius: 9px;
    background: #fff;
    color: #003f86;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

.renewal-cross-sell-actions button:hover {
    border-color: #0033a0;
    background: #0033a0;
    color: #fff;
}

.renewal-cart-summary {
    width: min(100%, 520px);
    margin: 12px 0 0 auto;
    overflow: hidden;
    border: 1px solid #9ed5eb;
    border-radius: 13px;
    background: #f7fcff;
    box-shadow: 0 5px 14px rgba(0, 51, 160, .06);
}

.renewal-cart-summary[hidden] { display: none !important; }

.renewal-cart-summary > header {
    padding: 8px 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #c9e3f0;
    background: #eaf7fd;
}

.renewal-cart-summary > header span {
    color: #123f61;
    font-size: .68rem;
    font-weight: 950;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.renewal-cart-summary > header strong {
    color: #0033a0;
    font-size: .72rem;
}

.renewal-cart-summary-rows {
    padding: 9px 12px;
    display: grid;
    gap: 7px;
}

.renewal-cart-summary-rows > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
}

.renewal-cart-summary-rows span {
    color: #466076;
    font-size: .74rem;
    font-weight: 850;
}

.renewal-cart-summary-rows strong {
    color: #0033a0;
    font-size: .95rem;
    font-weight: 950;
}

.renewal-cart-summary-rows > div:last-child strong { color: #07854f; }

.renewal-inventory-card {
    margin-top: 12px;
    padding: 16px 18px;
    border: 1px solid #cadbe8;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 5px 16px rgba(0, 51, 160, .08);
}

.renewal-inventory-toggle {
    width: 100%;
    min-height: 50px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 0;
    background: transparent;
    color: #123f61;
    font-family: inherit;
    text-align: left;
    cursor: pointer;
}

.renewal-inventory-toggle > span:first-child {
    min-width: 0;
    display: grid;
    gap: 4px;
}

.renewal-inventory-toggle > span:first-child > strong {
    font-size: 1.02rem;
    font-weight: 950;
}

.renewal-inventory-toggle > span:first-child > small {
    color: #657d90;
    font-size: .72rem;
    font-weight: 750;
}

.renewal-inventory-toggle-status {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 10px;
}

.renewal-inventory-toggle-status > b {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border: 1px solid #b8d9ee;
    border-radius: 50%;
    color: #0033a0;
    font-size: 1rem;
    transition: transform .18s ease;
}

.renewal-inventory-toggle[aria-expanded="true"] .renewal-inventory-toggle-status > b {
    transform: rotate(180deg);
}

.renewal-inventory-content {
    margin-top: 11px;
    padding-top: 12px;
    border-top: 1px solid #e1ebf2;
}

.renewal-inventory-content[hidden] { display: none !important; }

.renewal-inventory-card > header {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid #e1ebf2;
}

.renewal-inventory-card h3 {
    margin: 0;
    font-size: 1.15rem;
}

.renewal-inventory-card h3 span {
    color: #718697;
    font-size: .7rem;
    font-weight: 750;
}

.renewal-inventory-card header p {
    margin: 6px 0 0;
    color: #5c7186;
    font-size: .86rem;
}

.renewal-inventory-save-state {
    flex: 0 0 auto;
    padding: 7px 10px;
    border-radius: 999px;
    background: #eef6fa;
    color: #557084;
    font-size: .7rem;
    font-weight: 850;
}

.renewal-inventory-save-state[data-state="saving"] {
    background: #fff6df;
    color: #8b5a00;
}

.renewal-inventory-save-state[data-state="saved"] {
    background: #eaf7fd;
    color: #003f86;
}

.renewal-mobile-inventory {
    margin-top: 12px;
    overflow: hidden;
    border: 1px solid #d4e2eb;
    border-radius: 14px;
    background: #fbfdfe;
}

.renewal-mobile-inventory-head {
    padding: 13px 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-bottom: 1px solid #e1eaf0;
    background: #f5fafc;
}

.renewal-mobile-inventory-head > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.renewal-mobile-inventory-head strong,
.renewal-home-inventory-heading strong {
    color: #123f61;
    font-size: .84rem;
}

.renewal-mobile-inventory-head small,
.renewal-home-inventory-heading small {
    color: #708596;
    font-size: .68rem;
    line-height: 1.35;
}

.renewal-add-inventory-button {
    flex: 0 0 auto;
    min-height: 36px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px solid #8fc9df;
    border-radius: 9px;
    background: #fff;
    color: #0878a4;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 850;
    cursor: pointer;
}

.renewal-add-inventory-button span { font-size: 1rem; line-height: 1; }
.renewal-add-inventory-button:hover { border-color: #087fae; background: #edf9fe; }
.renewal-mobile-inventory-list { display: grid; }

.renewal-mobile-inventory-item {
    padding: 13px 14px;
    display: grid;
    grid-template-columns: 34px minmax(150px, .8fr) minmax(170px, 1fr) minmax(145px, .8fr) 32px;
    grid-template-areas:
        "number provider reference reference remove"
        ". description description price ."
        ". manual manual manual .";
    align-items: end;
    gap: 10px;
}

.renewal-mobile-inventory-item + .renewal-mobile-inventory-item { border-top: 1px solid #e1eaf0; }

.renewal-mobile-inventory-number {
    grid-area: number;
    align-self: center;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 8px;
    background: #e8f5fa;
    color: #0878a4;
    font-size: .68rem;
    font-weight: 950;
}

.renewal-mobile-inventory-item label {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #526b7e;
    font-size: .68rem;
    font-weight: 900;
}

.renewal-mobile-inventory-item label > span:not(.renewal-money-input) {
    color: #8495a2;
    font-size: .6rem;
    font-weight: 700;
}

.renewal-mobile-inventory-item .is-provider { grid-area: provider; }
.renewal-mobile-inventory-item .is-manual-provider { grid-area: manual; }
.renewal-mobile-inventory-item .is-reference { grid-area: reference; }
.renewal-mobile-inventory-item .is-description { grid-area: description; }
.renewal-mobile-inventory-item .is-price { grid-area: price; }

.renewal-mobile-inventory-item :is(input, select) {
    width: 100%;
    min-width: 0;
    height: 39px;
    padding: 0 10px;
    border: 1px solid #b9ccda;
    border-radius: 8px;
    background: #fff;
    color: #0b3152;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 750;
    box-sizing: border-box;
}

.renewal-mobile-inventory-item :is(input, select):focus {
    outline: 3px solid rgba(0, 153, 204, .14);
    border-color: #0099cc;
}

.renewal-remove-mobile-inventory {
    grid-area: remove;
    align-self: end;
    width: 32px;
    height: 39px;
    border: 1px solid #d9c8c8;
    border-radius: 8px;
    background: #fff;
    color: #a53e3e;
    font-size: 1rem;
    cursor: pointer;
}

.renewal-remove-mobile-inventory:hover { border-color: #c76f6f; background: #fff5f5; }

.renewal-mobile-inventory-empty {
    min-height: 52px;
    padding: 10px;
    display: grid;
    place-content: center;
    gap: 4px;
    color: #748998;
    text-align: center;
}

.renewal-mobile-inventory-empty[hidden] { display: none !important; }
.renewal-mobile-inventory-empty b { color: #526b7e; font-size: .76rem; }
.renewal-mobile-inventory-empty span { font-size: .67rem; }

.renewal-home-inventory-heading {
    margin-top: 12px;
    padding: 0 2px;
    display: grid;
    gap: 3px;
}

.renewal-inventory-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 11px;
    padding-top: 10px;
}

.renewal-inventory-service {
    min-width: 0;
    margin: 0;
    padding: 14px 15px 13px;
    border: 1px solid #d4e1e9;
    border-radius: 13px;
    background: #f8fbfd;
    transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.renewal-inventory-service.is-active {
    border-color: #8fcce5;
    background: #f3faff;
    box-shadow: inset 0 0 0 1px rgba(0, 169, 232, .08);
}

.renewal-inventory-service legend {
    max-width: 100%;
    padding: 0 6px;
}

.renewal-inventory-service legend label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #123f61;
    font-size: .84rem;
    font-weight: 950;
    cursor: pointer;
}

.renewal-inventory-service legend input {
    width: 18px;
    height: 18px;
    accent-color: #0033a0;
}

.renewal-inventory-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 11px;
}

.renewal-inventory-fields label {
    display: grid;
    gap: 6px;
    color: #526b7e;
    font-size: .72rem;
    font-weight: 900;
}

.renewal-inventory-fields label > span:not(.renewal-money-input) {
    color: #7a8c9b;
    font-size: .67rem;
}

.renewal-inventory-fields input,
.renewal-inventory-fields select {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 11px;
    border: 1px solid #b9ccda;
    border-radius: 9px;
    background: #fff;
    color: #0b3152;
    font-family: inherit;
    font-size: .82rem;
    font-weight: 750;
    box-sizing: border-box;
}

.renewal-inventory-fields :is(input, select):disabled {
    border-color: #dce5eb;
    background: #f1f5f7;
    color: #8b9aa5;
    cursor: not-allowed;
}

.renewal-inventory-fields :is(input, select):focus {
    outline: 3px solid rgba(0, 153, 204, .14);
    border-color: #0099cc;
}

.renewal-inventory-speed {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 10px;
    display: grid;
    grid-template-columns: minmax(170px, .7fr) minmax(0, 1.3fr);
    align-items: end;
    gap: 10px;
    border: 1px solid #d3e2eb;
    border-radius: 10px;
    background: rgba(255,255,255,.78);
}

.renewal-inventory-speed > label {
    display: grid;
    gap: 6px;
}

.renewal-speed-input {
    position: relative;
    display: block;
}

.renewal-speed-input input {
    padding-right: 64px;
}

.renewal-speed-input b {
    position: absolute;
    right: 10px;
    top: 50%;
    color: #647b8e;
    font-size: .69rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.renewal-speed-presets {
    min-width: 0;
    display: grid;
    gap: 7px;
}

.renewal-speed-technologies,
.renewal-speed-options {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 5px;
}

.renewal-speed-technologies button,
.renewal-speed-options button {
    min-height: 27px;
    padding: 0 9px;
    border: 1px solid #bed1df;
    border-radius: 999px;
    color: #36566f;
    background: #fff;
    font: inherit;
    font-size: .66rem;
    font-weight: 850;
    cursor: pointer;
}

.renewal-speed-technologies button.is-active {
    color: #fff;
    border-color: #075f91;
    background: #075f91;
}

.renewal-speed-options button.is-selected {
    color: #003c80;
    border-color: #6bb9dc;
    background: #eaf8fe;
}

.renewal-inventory-service:not(.is-active) :is(.renewal-speed-technologies button, .renewal-speed-options button) {
    opacity: .5;
    cursor: not-allowed;
}

.renewal-inventory-service-state {
    display: block;
    margin-top: 10px;
    color: #6c8190;
    font-size: .68rem;
    font-weight: 800;
}

.renewal-inventory-service.is-active .renewal-inventory-service-state {
    color: #003f86;
}

.renewal-inventory-undo {
    margin-top: 11px;
    padding: 8px 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid #b8d9ee;
    border-radius: 9px;
    background: #f4fbff;
    color: #405c73;
    font-size: .72rem;
    font-weight: 800;
}

.renewal-inventory-undo[hidden] { display: none !important; }

.renewal-inventory-undo button {
    padding: 5px 9px;
    border: 1px solid #7abbd6;
    border-radius: 7px;
    background: #fff;
    color: #0033a0;
    font-family: inherit;
    font-size: .7rem;
    font-weight: 950;
    cursor: pointer;
}

.cart-item.is-renewal {
    border-color: #9ed5eb;
    background: linear-gradient(135deg, #fff 0%, #f3faff 100%);
}

.cart-renewal-badge {
    display: inline-flex;
    align-items: center;
    width: max-content;
    margin-top: 6px;
    padding: 4px 8px;
    border-radius: 999px;
    border: 1px solid #b8d9ee;
    background: #eaf7fd;
    color: #0033a0;
    font-size: .68rem;
    font-weight: 950;
}

.cart-renewal-edit {
    min-height: 30px;
    padding: 0 9px;
    border: 1px solid #a9c9dc;
    border-radius: 7px;
    background: #fff;
    color: #0b5c85;
    font-size: .7rem;
    font-weight: 900;
    cursor: pointer;
}

.renewal-cart-comparison {
    display: grid;
    grid-template-columns: auto repeat(3, minmax(0, 1fr));
    align-items: center;
    gap: 9px;
    margin: 10px 0;
    padding: 10px;
    border: 1px solid #b8d9ee;
    border-radius: 10px;
    background: linear-gradient(135deg, #f7fcff, #edf8fd);
}

.renewal-cart-comparison[hidden] {
    display: none !important;
}

.renewal-cart-comparison > span {
    display: grid;
    gap: 2px;
    color: #003f86;
    font-size: .68rem;
    font-weight: 950;
    text-transform: uppercase;
}

.renewal-cart-comparison > span small {
    color: #607a6d;
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: 0;
    text-transform: none;
}

.renewal-cart-comparison > div {
    display: grid;
    gap: 2px;
    padding-left: 9px;
    border-left: 1px solid #c9e3f0;
}

.renewal-cart-comparison small {
    color: #5f766b;
    font-size: .62rem;
    font-weight: 800;
}

.renewal-cart-comparison strong {
    color: #073b66;
    font-size: .8rem;
}

.renewal-cart-comparison strong.has-periods {
    display: grid;
    gap: 2px;
    font-size: .68rem;
    line-height: 1.25;
}

.renewal-cart-comparison .is-saving { color: #07854f; }
.renewal-cart-comparison .is-more { color: #a45a00; }
.renewal-cart-comparison .is-same { color: #34566f; }
.renewal-cart-comparison[data-state="incomplete"] {
    grid-template-columns: auto 1fr;
    border-color: #e2bd77;
    background: #fff9ec;
}
.renewal-cart-comparison[data-state="incomplete"] > span { color: #925d00; }
.renewal-cart-comparison[data-state="incomplete"] > div { display: none; }
.renewal-cart-comparison[data-state="incomplete"] #renewal-cart-result-wrap {
    display: grid;
    justify-items: end;
    border-left-color: #ead4a9;
}
.renewal-cart-comparison[data-state="incomplete"] #renewal-cart-result {
    color: #925d00;
}
.print-position-row.is-renewal { border-color: #9ed5eb; }

.cart-print-previous-services {
    margin: 10px 0 0;
    border: 1px solid #d5e2e9;
    border-left: 4px solid #6b8799;
    border-radius: 9px;
    background: #f8fafb;
    break-inside: avoid;
}

.cart-print-previous-services > header {
    padding: 8px 10px;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px solid #dce6eb;
}

.cart-print-previous-services > header strong {
    color: #526879;
    font-size: .66rem;
    font-weight: 950;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.cart-print-previous-services > header small {
    color: #7a8d9b;
    font-size: .6rem;
}

#cart-print-previous-services-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

#cart-print-previous-services-list > div {
    min-width: 0;
    padding: 9px 10px;
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 10px;
}

#cart-print-previous-services-list > div + div {
    border-left: 1px solid #dce6eb;
}

#cart-print-previous-services-list span {
    min-width: 0;
    display: grid;
    gap: 2px;
}

#cart-print-previous-services-list strong,
#cart-print-previous-services-list b {
    color: #173f63;
    font-size: .68rem;
}

#cart-print-previous-services-list small {
    color: #718391;
    font-size: .6rem;
}

#cart-print-previous-services-list b {
    white-space: nowrap;
}

.renewal-builder-tab.active {
    display: flex;
    flex-direction: column;
}

.renewal-builder-tab .renewal-builder-hero { order: 1; }
.renewal-builder-tab .renewal-workflow-guide { order: 2; }
.renewal-builder-tab .renewal-inventory-card { order: 3; }
.renewal-builder-tab .renewal-offer-workspace { order: 4; }
.renewal-builder-tab .renewal-cross-sell-note { order: 5; }

.renewal-workflow-guide > div.is-complete {
    background: #f1faf6;
}

.renewal-workflow-guide > div.is-complete b {
    background: #07854f;
    color: #fff;
}

.renewal-inventory-next {
    margin-top: 14px;
    padding: 13px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border: 1px solid #9ed5eb;
    border-radius: 12px;
    background: linear-gradient(135deg, #f8fcff, #edf8fd);
}

.renewal-inventory-next > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.renewal-inventory-next strong {
    color: #123f61;
    font-size: .84rem;
}

.renewal-inventory-next span {
    color: #647c90;
    font-size: .72rem;
}

.renewal-inventory-next small {
    margin-top: 3px;
    color: #b3261e;
    font-size: .7rem;
    font-weight: 850;
}

.renewal-linked-offers {
    margin-top: 13px;
    display: grid;
    gap: 11px;
}

.renewal-linked-offer {
    overflow: hidden;
    border: 1px solid #bed7e7;
    border-radius: 13px;
    background: #fbfdff;
}

.renewal-linked-offer.is-saved {
    border-color: #87cfa9;
    box-shadow: inset 4px 0 0 #0aa765;
}

.renewal-linked-offer-head {
    padding: 11px 13px;
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border-bottom: 1px solid #dce8ef;
    background: #f4f9fc;
}

.renewal-linked-offer-number {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    color: #fff;
    background: #087fae;
    font-size: .72rem;
    font-weight: 950;
}

.renewal-linked-offer-head > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.renewal-linked-offer-head strong {
    color: #123f61;
    font-size: .86rem;
}

.renewal-linked-offer-head small {
    overflow: hidden;
    color: #647d90;
    font-size: .68rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.renewal-linked-offer-status {
    padding: 5px 8px;
    border: 1px solid #b8d9ee;
    border-radius: 999px;
    color: #38617f;
    background: #fff;
    font-size: .64rem;
    font-weight: 900;
}

.renewal-linked-offer.is-saved .renewal-linked-offer-status {
    border-color: #9dddbc;
    color: #087347;
    background: #effcf5;
}

.renewal-linked-offer-form {
    padding: 12px 13px 13px;
    display: grid;
    grid-template-columns: 1.15fr .8fr .8fr 1.45fr auto;
    align-items: end;
    gap: 10px;
}

.renewal-linked-offer-form label {
    min-width: 0;
    display: grid;
    gap: 5px;
    color: #466076;
    font-size: .7rem;
    font-weight: 900;
}

.renewal-linked-offer-form label > span:not(.renewal-money-input) {
    color: #7b8d9c;
    font-size: .62rem;
    font-weight: 700;
}

.renewal-linked-offer-form input {
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0 10px;
    border: 1px solid #b9ccda;
    border-radius: 8px;
    background: #fff;
    color: #0b3152;
    font-family: inherit;
    font-size: .78rem;
    font-weight: 750;
    box-sizing: border-box;
}

.renewal-linked-offer-form input:focus {
    outline: 3px solid rgba(0, 153, 204, .14);
    border-color: #0099cc;
}

.renewal-linked-offer-form .renewal-primary-button {
    min-height: 40px;
    white-space: nowrap;
}

.renewal-linked-offers-empty {
    padding: 18px;
    display: grid;
    place-items: center;
    gap: 4px;
    border: 1px dashed #b9d4e3;
    border-radius: 12px;
    color: #647d90;
    background: #f8fbfd;
    text-align: center;
}

.renewal-linked-offers-empty strong {
    color: #123f61;
    font-size: .82rem;
}

.renewal-linked-offers-empty span {
    font-size: .7rem;
}

.renewal-standalone-toggle {
    margin-top: 12px;
    min-height: 38px;
    padding: 0 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border: 1px dashed #8fc9df;
    border-radius: 9px;
    color: #0878a4;
    background: #f7fcff;
    font-family: inherit;
    font-size: .72rem;
    font-weight: 900;
    cursor: pointer;
}

.renewal-standalone-toggle[aria-expanded="true"] {
    border-style: solid;
    color: #fff;
    background: #087fae;
}

.renewal-standalone-panel {
    margin-top: 10px;
    padding: 0 12px 12px;
    border: 1px solid #d4e2eb;
    border-radius: 12px;
    background: #fbfdfe;
}

.renewal-standalone-panel > h4 {
    margin: 12px 0 0;
    color: #123f61;
    font-size: .86rem;
}

.renewal-standalone-panel[hidden],
.renewal-offer-workspace[hidden] {
    display: none !important;
}

@media (max-width: 1050px) {
    .renewal-position-form {
        grid-template-columns: 1fr 1fr;
    }

    .renewal-position-form fieldset.is-new-contract {
        grid-column: 1 / -1;
    }

    .renewal-inventory-fields {
        grid-template-columns: 1fr;
    }

    .renewal-mobile-inventory-item {
        grid-template-columns: 34px 1fr 1fr 32px;
        grid-template-areas:
            "number provider reference remove"
            ". description price ."
            ". manual manual .";
    }

    .renewal-linked-offer-form {
        grid-template-columns: 1fr 1fr;
    }

    .renewal-linked-offer-form .renewal-primary-button {
        grid-column: 1 / -1;
        justify-self: end;
    }
}

@media (max-width: 1150px) {
    .family-mobile-fields,
    .family-renewal-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .renewal-builder-hero { align-items: stretch; flex-direction: column; }
    .renewal-builder-fee { flex-basis: auto; text-align: left; }
    .renewal-workflow-guide { grid-template-columns: 1fr; }
    .renewal-workflow-guide > div + div { border-left: 0; border-top: 1px solid #dce7ee; }
    .renewal-editor-card > header { align-items: stretch; flex-direction: column; }
    .renewal-editor-hint { align-self: start; }
    .renewal-mobile-inventory-head { align-items: stretch; flex-direction: column; }
    .renewal-add-inventory-button { justify-content: center; }
    .renewal-mobile-inventory-item {
        grid-template-columns: 30px 1fr 32px;
        grid-template-areas:
            "number provider remove"
            ". reference ."
            ". description ."
            ". price ."
            ". manual .";
    }
    .renewal-inventory-card > header { align-items: stretch; flex-direction: column; }
    .renewal-inventory-toggle { align-items: stretch; flex-direction: column; }
    .renewal-inventory-toggle-status { justify-content: space-between; }
    .renewal-inventory-save-state { align-self: start; }
    .renewal-inventory-form { grid-template-columns: 1fr; }
    .renewal-live-comparison { align-items: flex-start; flex-wrap: wrap; justify-content: flex-start; }
    .renewal-live-comparison > span { width: 100%; margin: 0; }
    .renewal-cross-sell-note { grid-template-columns: 1fr; }
    .renewal-cross-sell-actions { justify-content: flex-start; flex-wrap: wrap; }
    .renewal-inventory-next { align-items: stretch; flex-direction: column; }
    .renewal-inventory-next .renewal-primary-button { width: 100%; }
    .renewal-linked-offer-head { grid-template-columns: 34px minmax(0, 1fr); }
    .renewal-linked-offer-status { grid-column: 2; justify-self: start; }
    .renewal-linked-offer-form { grid-template-columns: 1fr; }
    .renewal-linked-offer-form .renewal-primary-button { grid-column: auto; width: 100%; }
    .family-renewal-hero { padding: 17px; align-items: stretch; flex-direction: column; }
    .family-renewal-hero-badge { min-width: 0; text-align: left; }
    .family-renewal-live-summary { grid-template-columns: 1fr 1fr; }
    .family-contract-list,
    .family-household-grid { grid-template-columns: 1fr; }
    .family-mobile-fields,
    .family-renewal-fields,
    .family-field-grid { grid-template-columns: 1fr; }
    .family-cart-products article { align-items: stretch; flex-direction: column; }
    .family-cart-products label { display: grid; gap: 5px; }
    .family-cart-products select { width: 100%; margin-left: 0; }
}

.hw-freeware-distribution-picker {
    display: grid;
    width: 100%;
    margin-top: 7px;
}

.hw-freeware-distribution-picker select {
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 28px 5px 9px;
    border: 1px solid #d6e1e8;
    border-radius: 9px;
    color: var(--ink, #18354c);
    background: #fbfdfe;
    font: inherit;
    font-size: 9px;
    font-weight: 800;
}

.hardware-preset-card .hw-freeware-price-summary {
    margin-top: 6px;
    padding: 0;
    color: #24475d;
    background: transparent;
    font-size: 11px;
    font-weight: 850;
}

.hw-freeware-card-controls {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 6px;
    padding-top: 7px;
    border-top: 1px solid #edf2f5;
}

.hw-freeware-suggest-price {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    margin: 0;
    padding: 4px 7px 4px 5px;
    border: 1px solid transparent;
    border-radius: 8px;
    color: #075c82;
    background: transparent;
    font: inherit;
    font-size: 9px;
    font-weight: 850;
    transition: border-color .18s ease, background .18s ease, color .18s ease, transform .18s ease;
    cursor: pointer;
}
.hw-freeware-suggest-price:hover { border-color:#c7dce7; color:#004f78; background:#eef8fc; transform:none; }
.hw-freeware-suggest-icon { width:18px; height:18px; display:grid; place-items:center; border-radius:6px; color:#087da8; background:#e7f5fa; font-size:11px; line-height:1; }
.hw-freeware-suggest-price > span:last-child { color:inherit; font-size:9px; font-weight:850; }
.freeware-price-suggestion-dialog { width:min(620px,calc(100vw - 28px)); max-height:calc(100vh - 28px); padding:0; overflow:hidden; border:1px solid #d8e5ee; border-radius:16px; color:var(--tool-ink); background:#f7fafc; box-shadow:0 24px 70px rgba(13,42,69,.32); }
.freeware-price-suggestion-dialog::backdrop { background:rgba(17,42,67,.64); backdrop-filter:blur(4px); }
.freeware-price-suggestion-card { display:grid; max-height:calc(100vh - 28px); background:#f7fafc; }
.freeware-price-suggestion-card > header, .freeware-price-suggestion-card > footer { padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:16px; background:#fff; }
.freeware-price-suggestion-card > header { border-bottom:1px solid #dfe9f0; }
.freeware-price-suggestion-card > header h2 { margin:4px 0 3px; color:var(--tool-ink); font-size:20px; }
.freeware-price-suggestion-card > header p { margin:0; color:#60778a; font-size:12px; }
.freeware-price-suggestion-close { width:36px; height:36px; display:grid; place-items:center; border:1px solid #c7d7e4; border-radius:50%; color:#18354c; background:#fff; font-size:22px; cursor:pointer; }
.freeware-price-suggestion-fields { min-height:0; padding:18px 20px 20px; display:grid; gap:13px; overflow:auto; }
.freeware-price-suggestion-context { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:12px 14px; border:1px solid #d9e7ef; border-left:4px solid #087da8; border-radius:10px; background:#fff; }
.freeware-price-suggestion-context > div { display:grid; gap:3px; }
.freeware-price-suggestion-context span { color:#718899; font-size:10px; font-weight:900; letter-spacing:.055em; text-transform:uppercase; }
.freeware-price-suggestion-context strong { color:#087da8; font-size:21px; line-height:1; }
.freeware-price-suggestion-context small { color:#35536a; font-size:12px; font-weight:800; }
.freeware-price-suggestion-context small:last-child { color:#7a8f9e; font-size:9px; font-weight:700; line-height:1.3; }
.freeware-price-suggestion-fields label { display:grid; gap:5px; color:#60778a; font-size:10px; font-weight:900; letter-spacing:.035em; text-transform:uppercase; }
.freeware-price-suggestion-fields input, .freeware-price-suggestion-fields select, .freeware-price-suggestion-fields textarea { width:100%; min-height:40px; padding:9px 11px; border:1px solid #c9d9e3; border-radius:9px; color:var(--tool-ink); background:#fff; font:inherit; font-size:13px; letter-spacing:0; text-transform:none; resize:vertical; }
.freeware-price-suggestion-fields input[readonly] { color:#60778a; background:#f5f8fa; }
.freeware-price-suggestion-fields label > small { color:#7890a0; font-size:10px; font-weight:600; letter-spacing:0; line-height:1.35; text-transform:none; }
.freeware-price-suggestion-grid { display:grid; grid-template-columns:minmax(0,250px); gap:10px; }
.freeware-price-suggestion-price-input { min-height:52px !important; color:#0b6f99 !important; font-size:21px !important; font-weight:900; }
.freeware-suggestion-start-choice, .freeware-suggestion-offers, .freeware-suggestion-new-offer { display:grid; gap:10px; padding:12px; border:1px solid #d9e7ef; border-radius:12px; background:#fff; }
.freeware-suggestion-start-head, .freeware-suggestion-section-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.freeware-suggestion-start-head > div, .freeware-suggestion-section-head > div, .freeware-suggestion-new-offer > div:first-child { display:grid; gap:3px; }
.freeware-suggestion-start-head span, .freeware-suggestion-section-head span, .freeware-suggestion-new-offer > div:first-child span { color:#718899; font-size:9px; font-weight:950; letter-spacing:.08em; text-transform:uppercase; }
.freeware-suggestion-start-head strong, .freeware-suggestion-section-head strong, .freeware-suggestion-new-offer > div:first-child strong { color:#173a5e; font-size:13px; }
.freeware-suggestion-start-head small, .freeware-suggestion-section-head small { color:#087da8; font-size:10px; font-weight:850; text-align:right; }
.freeware-suggestion-start-options { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.freeware-suggestion-start-options label { display:flex !important; grid-template-columns:none !important; align-items:flex-start; gap:8px; padding:10px; border:1px solid #d8e6ee; border-radius:9px; color:#35536a !important; background:#fbfdfe; cursor:pointer; letter-spacing:0 !important; text-transform:none !important; }
.freeware-suggestion-start-options label:has(input:checked) { border-color:#087da8; background:#eef8fc; box-shadow:inset 0 0 0 1px #087da8; }
.freeware-suggestion-start-options input { width:auto !important; min-height:auto !important; margin-top:2px; accent-color:#087da8; }
.freeware-suggestion-start-options label > span { display:grid; gap:3px; }
.freeware-suggestion-start-options strong { color:#173a5e; font-size:11px; }
.freeware-suggestion-start-options small, .freeware-suggestion-start-choice > p { color:#718899; font-size:10px; font-weight:600; line-height:1.35; }
.freeware-suggestion-start-choice > p { margin:0; }
.freeware-suggestion-offer-list, .freeware-suggestion-new-list { display:grid; gap:7px; }
.freeware-suggestion-offer-row, .freeware-suggestion-new-row { display:grid; grid-template-columns:minmax(0,1fr) minmax(105px,135px); gap:9px; align-items:center; padding:8px; border:1px solid #dce8ef; border-radius:9px; background:#fbfdfe; transition:border-color .16s ease, background .16s ease; }
.freeware-suggestion-offer-row.is-standard, .freeware-suggestion-new-row.is-standard { border-color:#087da8; background:#eef8fc; }
.freeware-suggestion-distributor-button { min-width:0; display:grid; grid-template-columns:24px minmax(0,1fr) auto; align-items:center; gap:7px; padding:2px; border:0; color:#173a5e; background:transparent; font:inherit; text-align:left; cursor:pointer; }
.freeware-suggestion-distributor-button:hover { color:#087da8; }
.freeware-suggestion-distributor-icon { width:22px; height:22px; display:grid; place-items:center; border:1px solid #b9d5e1; border-radius:50%; color:#087da8; background:#fff; font-size:14px; font-weight:900; line-height:1; }
.freeware-suggestion-distributor-button > span:nth-child(2) { min-width:0; display:grid; gap:2px; }
.freeware-suggestion-distributor-button strong { overflow:hidden; color:inherit; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.freeware-suggestion-distributor-button small, .freeware-suggestion-new-row > div small { color:#7890a0; font-size:9px; font-weight:650; }
.freeware-suggestion-distributor-button em { color:#718899; font-size:9px; font-style:normal; font-weight:850; white-space:nowrap; }
.freeware-suggestion-offer-row.is-standard .freeware-suggestion-distributor-button em, .freeware-suggestion-new-row.is-standard .freeware-suggestion-distributor-button em { color:#087da8; }
.freeware-suggestion-offer-row > label, .freeware-suggestion-new-row > label { min-width:0; }
.freeware-suggestion-offer-row input, .freeware-suggestion-new-row input { min-height:36px !important; padding:7px 9px !important; color:#0b6f99 !important; font-size:14px !important; font-weight:850; }
.freeware-suggestion-new-fields { display:grid; grid-template-columns:minmax(0,1fr) minmax(105px,135px) auto; gap:8px; align-items:end; }
.freeware-suggestion-new-fields button { min-height:40px; padding:0 11px; border:1px solid #b9d5e1; border-radius:9px; color:#087da8; background:#eef8fc; font:inherit; font-size:11px; font-weight:850; cursor:pointer; }
.freeware-suggestion-new-fields button:hover { border-color:#087da8; background:#e1f3fa; }
.freeware-suggestion-new-row { grid-template-columns:minmax(0,1fr) minmax(105px,135px) 30px; }
.freeware-suggestion-new-row > div { min-width:0; display:grid; gap:2px; }
.freeware-suggestion-remove-new { width:30px; height:30px; display:grid; place-items:center; border:1px solid #d7c4c4; border-radius:50%; color:#8b3434; background:#fff; font:inherit; font-size:18px; cursor:pointer; }
.freeware-suggestion-empty { padding:10px; border:1px dashed #cbdce6; border-radius:9px; color:#7890a0; font-size:11px; text-align:center; }
.freeware-price-suggestion-status { margin:0; padding:10px 12px; border-radius:9px; font-size:11px; line-height:1.4; }
.freeware-price-suggestion-status.is-success { color:#176442; background:#effaf5; }
.freeware-price-suggestion-status.is-error { color:#8b3434; background:#fff0f0; }
.freeware-price-suggestion-card > footer { justify-content:flex-end; border-top:1px solid #dfe9f0; background:#f8fafc; }
.freeware-suggestion-secondary, .freeware-suggestion-primary { min-height:38px; padding:0 13px; border-radius:9px; font:inherit; font-weight:850; cursor:pointer; }
.freeware-suggestion-secondary { border:1px solid #c7d7e4; color:#35536a; background:#fff; }
.freeware-suggestion-primary { border:1px solid #087da8; color:#fff; background:#087da8; }
.freeware-suggestion-primary span { font-size:16px; line-height:0; }
.freeware-suggestion-primary:disabled { opacity:.55; cursor:wait; }
@media (max-width: 560px) {
    .freeware-price-suggestion-grid { grid-template-columns:1fr; }
    .freeware-price-suggestion-card > header, .freeware-price-suggestion-card > footer { align-items:stretch; flex-direction:column; }
    .freeware-price-suggestion-card > footer button { width:100%; }
    .freeware-suggestion-start-options { grid-template-columns:1fr; }
    .freeware-suggestion-start-head, .freeware-suggestion-section-head { align-items:flex-start; flex-direction:column; }
    .freeware-suggestion-start-head small, .freeware-suggestion-section-head small { text-align:left; }
    .freeware-suggestion-new-fields, .freeware-suggestion-new-row { grid-template-columns:1fr; }
    .freeware-suggestion-new-fields button, .freeware-suggestion-remove-new { width:100%; border-radius:9px; }
    .freeware-suggestion-offer-row { grid-template-columns:1fr; }
}

/* Preis-Update v121: ruhiger Dialog mit eigenem, begrenztem Scrollbereich */
.freeware-price-suggestion-dialog {
    width: min(680px, calc(100vw - 24px));
    height: min(820px, calc(100dvh - 24px));
    max-height: calc(100vh - 24px);
    margin: auto;
    padding: 0;
    overflow: hidden;
    border-radius: 18px;
}

.freeware-price-suggestion-card {
    width: 100%;
    height: 100%;
    min-height: 0;
    grid-template-rows: auto minmax(0, 1fr) auto;
    overflow: hidden;
}

.freeware-price-suggestion-card > header {
    min-height: 74px;
    padding: 14px 18px;
}

.freeware-price-suggestion-card > header h2 {
    margin: 3px 0 2px;
    font-size: 19px;
}

.freeware-price-suggestion-card > header p {
    font-size: 11px;
}

.freeware-price-suggestion-close {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    font-size: 20px;
}

.freeware-price-suggestion-fields {
    min-height: 0;
    min-width: 0;
    padding: 13px 16px 16px;
    align-content: start;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
}
.freeware-price-suggestion-fields > *,
.freeware-suggestion-offer-list,
.freeware-suggestion-offer-list > *,
.freeware-suggestion-start-choice,
.freeware-suggestion-offers,
.freeware-update-leaderboard { min-width:0; width:100%; }

.freeware-price-suggestion-context {
    min-height: 66px;
    padding: 10px 13px;
    border-left-width: 3px;
}

.freeware-price-suggestion-context strong {
    font-size: 20px;
}

.freeware-suggestion-start-choice,
.freeware-suggestion-offers,
.freeware-suggestion-new-offer {
    gap: 8px;
    padding: 10px;
    border-radius: 11px;
}

.freeware-suggestion-start-head,
.freeware-suggestion-section-head {
    align-items: center;
}

.freeware-suggestion-start-head strong,
.freeware-suggestion-section-head strong {
    font-size: 12px;
}

.freeware-suggestion-start-head small,
.freeware-suggestion-section-head small {
    font-size: 9px;
}

.freeware-suggestion-start-options {
    gap: 7px;
}

.freeware-suggestion-start-options label {
    min-height: 44px;
    align-items: center;
    padding: 8px 9px;
}

.freeware-suggestion-start-options label > span {
    gap: 1px;
}

.freeware-suggestion-start-options strong {
    font-size: 11px;
}

.freeware-suggestion-start-options small {
    font-size: 9px;
    line-height: 1.2;
}

.freeware-suggestion-offer-list,
.freeware-suggestion-new-list {
    gap: 6px;
}

.freeware-suggestion-offer-row,
.freeware-suggestion-new-row {
    min-height: 55px;
    grid-template-columns: minmax(0, 1fr) 132px;
    gap: 9px;
    padding: 7px 8px;
    border-radius: 9px;
}

.freeware-suggestion-distributor-button {
    grid-template-columns: 24px minmax(0, 1fr) auto;
    gap: 7px;
}

.freeware-suggestion-distributor-button strong {
    font-size: 12px;
}

.freeware-suggestion-distributor-button small {
    font-size: 9px;
}

.freeware-suggestion-distributor-button em {
    font-size: 9px;
}

.freeware-suggestion-offer-row input,
.freeware-suggestion-new-row input {
    min-height: 35px !important;
}

.freeware-suggestion-distributor-button > span:nth-child(2) {
    gap: 3px;
}

.freeware-suggestion-offer-price-meta {
    color: #46677d !important;
    font-size: 9px !important;
    font-weight: 800 !important;
}

.freeware-suggestion-offer-update-meta {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    overflow: hidden;
    color: #638394;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .01em;
    line-height: 1.25;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.freeware-suggestion-offer-update-meta > span:first-child {
    width: 15px;
    height: 15px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #b9dbe7;
    border-radius: 50%;
    color: #087da8;
    background: #eef8fc;
    font-size: 10px;
    font-weight: 900;
}

.freeware-suggestion-offer-update-meta.is-empty {
    color: #93a5b0;
    font-weight: 650;
}

.freeware-suggestion-offer-update-meta.is-empty > span:first-child {
    color: #8296a2;
    border-color: #d4e1e8;
    background: #f4f7f9;
}

/* Freie Ware V136: manuelle Preiszeilen mit Aktualitätsstatus */
.freeware-simple-offer-row {
    display:grid;
    grid-template-columns:28px minmax(130px,1fr) 140px minmax(120px,1fr) max-content 34px;
    gap:9px;
    align-items:end;
    padding:10px;
    border:1px solid #dce8ef;
    border-radius:10px;
    background:#fbfdfe;
}
.freeware-simple-offer-row:has(.freeware-simple-standard:checked) { border-color:#087da8; background:#eef8fc; }
.freeware-simple-offer-row.is-fresh { border-color:#b6dfca; background:#f5fcf7; }
.freeware-simple-offer-row.is-stale { border-color:#edc4c4; background:#fff8f8; }
.freeware-simple-offer-row > label { display:grid; gap:5px; min-width:0; }
.freeware-simple-offer-row > small { min-width:0; align-self:center; color:#678092; font-size:10px; line-height:1.35; overflow-wrap:anywhere; }
.freeware-simple-offer-row > button { width:34px; height:34px; border:1px solid #d8c7c7; border-radius:9px; color:#963d3d; background:#fff; font-size:18px; cursor:pointer; }
.freeware-simple-standard { width:18px !important; min-height:18px !important; align-self:center; accent-color:#087da8; }
#freeware-price-add-row { justify-self:start; }
.freeware-card-freshness { display:block; min-height:18px; margin-top:3px; }
.freeware-freshness-chip { display:inline-flex; align-items:center; gap:5px; width:max-content; max-width:100%; padding:4px 7px; border:1px solid #cbdbe3; border-radius:999px; color:#5d7482; background:#f4f8fa; font-size:9px; font-style:normal; font-weight:900; line-height:1; white-space:nowrap; }
.freeware-freshness-chip i { width:7px; height:7px; flex:0 0 7px; border-radius:50%; background:#94a7b4; }
.freeware-freshness-chip.is-fresh { border-color:#b9dfc8; color:#187044; background:#effaf3; }
.freeware-freshness-chip.is-fresh i { background:#29a660; }
.freeware-freshness-chip.is-stale { border-color:#edc2c2; color:#a13d3d; background:#fff3f3; }
.freeware-freshness-chip.is-stale i { background:#d65b5b; }
.freeware-freshness-chip.is-unknown { color:#718493; background:#f3f6f8; }
.hw-freeware-card-controls .freeware-card-freshness { display:flex; min-width:0; min-height:0; margin:0; }
.hw-freeware-card-controls .freeware-freshness-chip { padding:0; border:0; background:transparent; }
.freeware-update-leaderboard { display:grid; gap:12px; margin-top:14px; padding:14px; border:1px solid #d8e6ed; border-radius:13px; background:linear-gradient(135deg,#f8fcfd,#f1f8fb); }
.freeware-update-leaderboard[hidden] { display:none; }
.freeware-ranking-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.freeware-ranking-head > div { display:grid; gap:3px; }
.freeware-ranking-head > strong { color:#173a5e; font-size:14px; }
.freeware-ranking-summary { color:#658092; font-size:10px; font-weight:800; text-align:right; }
.freeware-ranking-summary b { color:#173a5e; font-size:14px; }
.freeware-ranking-summary i { font-style:normal; }
.freeware-ranking-summary i.is-fresh { color:#187044; }
.freeware-ranking-summary i.is-stale { color:#a13d3d; }
.freeware-ranking-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.freeware-ranking-group { min-width:0; padding:10px; border:1px solid #dce8ee; border-radius:10px; background:#fff; }
.freeware-ranking-group h4 { margin:0 0 7px; color:#527083; font-size:10px; letter-spacing:.08em; text-transform:uppercase; }
.freeware-ranking-group ol { display:grid; gap:5px; margin:0; padding:0; list-style:none; }
.freeware-ranking-group li { display:grid; grid-template-columns:32px minmax(0,1fr) auto; gap:7px; align-items:center; min-width:0; padding:6px 0; border-top:1px solid #edf2f5; }
.freeware-ranking-group li:first-child { border-top:0; }
.freeware-ranking-rank { display:flex; align-items:center; justify-content:center; gap:2px; width:32px; height:24px; border-radius:8px; color:#496a7d; background:#eef5f8; font-size:11px; font-weight:950; }
.freeware-ranking-rank > span { font-size:12px; line-height:1; }
.freeware-ranking-rank > b { font-size:9px; }
.freeware-ranking-rank.is-rank-2 { color:#59636d; background:#f0f2f4; }
.freeware-ranking-rank.is-rank-3 { color:#865d32; background:#fff1e3; }
.freeware-ranking-group li:first-child .freeware-ranking-rank { color:#fff; background:#087da8; }
.freeware-ranking-group li strong { min-width:0; overflow:hidden; color:#173a5e; font-size:11px; text-overflow:ellipsis; white-space:nowrap; }
.freeware-ranking-group li em { color:#668091; font-size:9px; font-style:normal; font-weight:850; white-space:nowrap; }
.freeware-ranking-empty { margin:0; color:#718493; font-size:10px; }
@media (max-width:700px) {
    .freeware-simple-offer-row { grid-template-columns:28px 1fr 1fr 34px; align-items:end; }
    .freeware-simple-offer-row > small { grid-column:2 / 4; }
    .freeware-simple-offer-row > .freeware-freshness-chip { grid-column:2 / 4; justify-self:start; }
    .freeware-simple-offer-row > button { grid-column:4; grid-row:1 / span 3; align-self:center; }
    .freeware-ranking-head { align-items:flex-start; flex-direction:column; }
    .freeware-ranking-summary { text-align:left; }
    .freeware-ranking-grid { grid-template-columns:1fr; }
}

.freeware-suggestion-offer-row.is-standard .freeware-suggestion-offer-update-meta.is-updated > span:first-child {
    color: #fff;
    border-color: #087da8;
    background: #087da8;
}

.freeware-suggestion-new-offer {
    display: block;
    padding: 0;
    overflow: hidden;
}

.freeware-suggestion-new-offer > summary {
    min-height: 52px;
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px;
    color: #173a5e;
    cursor: pointer;
    list-style: none;
}

.freeware-suggestion-new-offer > summary::-webkit-details-marker {
    display: none;
}

.freeware-suggestion-new-offer > summary::after {
    margin-left: auto;
    color: #718899;
    content: '⌄';
    font-size: 16px;
    line-height: 1;
    transition: transform .16s ease;
}

.freeware-suggestion-new-offer[open] > summary {
    border-bottom: 1px solid #dfe9f0;
}

.freeware-suggestion-new-offer[open] > summary::after {
    transform: rotate(180deg);
}

.freeware-suggestion-new-icon {
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border: 1px solid #b9d5e1;
    border-radius: 50%;
    color: #087da8;
    background: #eef8fc;
    font-size: 16px;
    font-weight: 800;
}

.freeware-suggestion-new-offer > summary > span:last-of-type {
    min-width: 0;
    display: grid;
    gap: 1px;
}

.freeware-suggestion-new-offer > summary strong {
    font-size: 12px;
}

.freeware-suggestion-new-offer > summary small {
    color: #7890a0;
    font-size: 9px;
    font-weight: 650;
}

.freeware-suggestion-new-offer > .freeware-suggestion-new-fields,
.freeware-suggestion-new-offer > .freeware-suggestion-new-list {
    margin: 10px;
}

.freeware-suggestion-new-fields {
    grid-template-columns: minmax(0, 1fr) 132px auto;
    gap: 8px;
}

.freeware-suggestion-new-fields button {
    min-height: 40px;
}

.freeware-price-suggestion-card > footer {
    min-height: 66px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    justify-content: initial;
    gap: 12px;
    padding: 10px 16px;
}

.freeware-price-suggestion-status {
    min-width: 0;
    margin: 0;
    padding: 7px 9px;
    font-size: 10px;
}

.freeware-suggestion-footer-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.freeware-suggestion-secondary,
.freeware-suggestion-primary {
    min-height: 36px;
    white-space: nowrap;
}

.freeware-suggestion-primary:disabled {
    cursor: not-allowed;
}

@media (max-width: 560px) {
    .freeware-price-suggestion-dialog {
        width: calc(100vw - 12px);
        height: calc(100dvh - 12px);
        max-height: calc(100vh - 12px);
    }

    .freeware-price-suggestion-card > header {
        align-items: center;
        flex-direction: row;
        padding: 12px 13px;
    }

    .freeware-price-suggestion-fields {
        padding: 10px 11px 12px;
    }

    .freeware-suggestion-start-head,
    .freeware-suggestion-section-head {
        align-items: flex-start;
        flex-direction: column;
    }

    .freeware-suggestion-start-head small,
    .freeware-suggestion-section-head small {
        text-align: left;
    }

    .freeware-suggestion-start-options {
        grid-template-columns: 1fr;
    }

    .freeware-suggestion-offer-row,
    .freeware-suggestion-new-row,
    .freeware-suggestion-new-fields {
        grid-template-columns: 1fr;
    }

    .freeware-suggestion-offer-row > label,
    .freeware-suggestion-new-row > label {
        width: 100%;
    }

    .freeware-suggestion-offer-update-meta {
        white-space: normal;
    }

    .freeware-suggestion-new-fields button,
    .freeware-suggestion-remove-new {
        width: 100%;
        border-radius: 9px;
    }

    .freeware-price-suggestion-card > footer {
        grid-template-columns: 1fr;
        gap: 7px;
        padding: 9px 11px;
    }

    .freeware-price-suggestion-card > footer:has(.freeware-price-suggestion-status[hidden]) {
        grid-template-columns: 1fr;
    }

    .freeware-suggestion-footer-actions {
        display: grid;
        grid-template-columns: minmax(0, .8fr) minmax(0, 1.4fr);
    }

    .freeware-suggestion-footer-actions button {
        width: 100%;
        padding-inline: 8px;
    }
}

/* Preis-Update v122: dezenter Scrollbalken im bestehenden Blau-/Teal-System */
.freeware-price-suggestion-fields {
    scrollbar-width: thin;
    scrollbar-color: #9fc8d8 #edf5f8;
}

.freeware-price-suggestion-fields::-webkit-scrollbar {
    width: 10px;
}

.freeware-price-suggestion-fields::-webkit-scrollbar-track {
    margin: 12px 0;
    border: 1px solid #e1edf2;
    border-radius: 999px;
    background: #edf5f8;
}

.freeware-price-suggestion-fields::-webkit-scrollbar-thumb {
    min-height: 48px;
    border: 2px solid #edf5f8;
    border-radius: 999px;
    background: #9fc8d8;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

.freeware-price-suggestion-fields::-webkit-scrollbar-thumb:hover {
    background: #087da8;
}

.freeware-price-suggestion-fields::-webkit-scrollbar-thumb:active {
    background: #075c82;
}

/* Freie Ware V144: Farbpreise sichtbar direkt unter der Preisvorauswahl */
.freeware-price-color-slot {
    display: grid;
    min-width: 0;
}

.freeware-price-color-section {
    display: grid;
    gap: 10px;
    padding: 12px;
    border: 1px solid #d9e7ef;
    border-left: 4px solid #8db9cd;
    border-radius: 12px;
    background: #fff;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.freeware-price-color-section.is-active {
    border-color: #72c2a1;
    border-left-color: #15936a;
    background: #fbfffd;
    box-shadow: 0 8px 22px rgba(21, 147, 106, .08);
}

.freeware-price-color-section.is-single-color {
    gap: 8px;
    border-left-color: #b7cbd7;
    background: #fbfdfe;
}

.freeware-price-color-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.freeware-price-color-head > div {
    display: grid;
    gap: 3px;
}

.freeware-price-color-head > div > span {
    color: #5d788a;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.freeware-price-color-head strong {
    color: #173a5e;
    font-size: 13px;
}

.freeware-price-color-count {
    padding: 5px 8px;
    border: 1px solid #cbdce6;
    border-radius: 999px;
    color: #60778a;
    background: #f4f8fa;
    font-size: 9px;
    font-weight: 900;
    white-space: nowrap;
}

.freeware-price-color-toggle {
    display: flex !important;
    align-items: center;
    gap: 7px;
    padding: 6px 9px;
    border: 1px solid #b9d5e1;
    border-radius: 999px;
    color: #087da8;
    background: #eef8fc;
    font-size: 10px !important;
    font-weight: 900 !important;
    text-transform: none !important;
    cursor: pointer;
}

.freeware-price-color-toggle input {
    width: 17px !important;
    min-height: auto !important;
    margin: 0;
    accent-color: #087da8;
}

.freeware-price-color-section.is-active .freeware-price-color-toggle {
    border-color: #72c2a1;
    color: #08734f;
    background: #effaf5;
}

.freeware-price-color-hint {
    margin: 0;
    color: #718899;
    font-size: 10px;
    line-height: 1.35;
}

.freeware-price-color-plans {
    display: grid;
    gap: 8px;
}

.freeware-price-color-plan {
    display: grid;
    gap: 8px;
    padding: 9px;
    border: 1px solid #dce8ef;
    border-radius: 9px;
    background: #fbfdfe;
}

.freeware-price-color-plan-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.freeware-price-color-plan-title > div {
    display: grid;
    gap: 2px;
}

.freeware-price-color-plan-title strong {
    color: #173a5e;
    font-size: 12px;
}

.freeware-price-color-plan-title small,
.freeware-price-color-disabled span {
    color: #7890a0;
    font-size: 9px;
}

.freeware-price-color-swatch {
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    border: 1px solid #b6c7d2;
    border-radius: 50%;
    background: var(--freeware-color, #c8d1dc);
    box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55);
}

.freeware-price-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(135px, 1fr));
    gap: 8px;
}

.freeware-price-color-grid label {
    display: grid;
    gap: 4px;
    min-width: 0;
    color: #60778a;
    font-size: 9px;
    font-weight: 850;
    letter-spacing: .03em;
    text-transform: uppercase;
}

.freeware-price-color-grid label > span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.freeware-price-color-grid input {
    min-height: 36px !important;
    padding: 7px 9px !important;
    color: #0b6f99 !important;
    font-size: 13px !important;
    font-weight: 850;
    text-transform: none !important;
}

.freeware-price-color-grid small {
    color: #7890a0;
    font-size: 9px;
    text-transform: uppercase;
}

.freeware-price-color-disabled {
    display: grid;
    gap: 2px;
    padding: 9px;
    border: 1px dashed #cbdce6;
    border-radius: 9px;
    color: #35536a;
    background: #fbfdfe;
    font-size: 11px;
}

@media (max-width: 560px) {
    .freeware-price-color-head {
        align-items: flex-start;
        flex-direction: column;
    }
}

/* Freie Ware V146: ruhige Kartenhierarchie mit einer klaren Hauptaktion. */
#custom-hardware-panel .hardware-preset-card {
    gap: 0;
    border-color: #d9e5ed;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 40, 90, 0.035);
}

#custom-hardware-panel .hardware-preset-card:not(.flipped)::before {
    top: 11px;
    right: 11px;
    left: 11px;
    height: 142px;
    border: 0;
    border-radius: 12px;
    background: #f6fafc;
}

#custom-hardware-panel .hardware-preset-card > img.hw-tile-photo,
#custom-hardware-panel .hardware-preset-card > .hw-tile-placeholder,
#custom-hardware-panel .hardware-preset-card.hw-smartphone-card > img.hw-tile-photo,
#custom-hardware-panel .hardware-preset-card.hw-smartphone-card.has-color-picker > img.hw-tile-photo {
    width: 100%;
    height: 128px;
    margin: 0 0 12px;
    object-fit: contain;
    object-position: center;
    align-self: center;
}

#custom-hardware-panel .hardware-preset-card .hw-color-picker {
    top: 17px;
    right: 14px;
    width: 76px;
    gap: 4px;
    padding: 5px 4px 6px;
    border: 1px solid rgba(211, 226, 235, 0.95);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 3px 10px rgba(34, 78, 104, 0.06);
    backdrop-filter: blur(4px);
}

#custom-hardware-panel .hardware-preset-card .hw-color-picker legend {
    margin-bottom: 1px;
    color: #718696;
    font-size: 0.55rem;
    letter-spacing: 0.35px;
}

#custom-hardware-panel .hardware-preset-card .hw-color-option {
    width: 22px;
    height: 22px;
}

#custom-hardware-panel .hardware-preset-card .hw-color-option:has(input:checked) em {
    top: 39px;
    color: #24516e;
    font-size: 0.58rem;
    font-weight: 850;
}

#custom-hardware-panel .hardware-preset-card .hardware-preset-brand {
    margin-top: 0;
    color: #6d8190;
    font-size: 0.62rem;
    letter-spacing: 0.08em;
}

#custom-hardware-panel .hardware-preset-card > strong {
    margin-top: 3px;
    padding-right: 86px;
    color: #073f91;
    font-size: 0.94rem;
    line-height: 1.18;
}

#custom-hardware-panel .hardware-preset-card > span:not(.hardware-preset-brand) {
    min-height: 17px;
    margin-top: 2px;
    color: #526f82;
    font-size: 0.72rem;
    line-height: 1.2;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-price-summary {
    min-height: 20px;
    margin-top: 9px;
    color: #234b63;
    font-size: 0.72rem;
    font-weight: 850;
    line-height: 1.2;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-distribution-picker {
    margin-top: 7px;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-distribution-picker select {
    min-height: 32px;
    border-color: #d7e4eb;
    border-radius: 8px;
    color: #2a536b;
    background: #f8fbfc;
    font-size: 0.62rem;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-card-controls {
    margin-top: auto;
    padding-top: 9px;
    border-top-color: #edf2f5;
}

#custom-hardware-panel .hardware-preset-card .freeware-freshness-chip {
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 0.63rem;
    font-weight: 800;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-suggest-price {
    min-height: 30px;
    padding: 5px 8px 5px 6px;
    border: 1px solid #d5e4eb;
    border-radius: 8px;
    color: #245a76;
    background: #f7fbfd;
    font-size: 0.63rem;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-suggest-price:hover {
    border-color: #9ed2e3;
    color: #075c82;
    background: #eef8fc;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-suggest-price:focus {
    outline: none;
    box-shadow: none;
}

#custom-hardware-panel .hardware-preset-card .hw-freeware-suggest-price:focus-visible {
    outline: 2px solid #087da8;
    outline-offset: 2px;
}

#custom-hardware-panel .hardware-preset-card:hover,
#custom-hardware-panel .hardware-preset-card.flipped {
    border-color: #b8d8e5;
    box-shadow: 0 5px 14px rgba(0, 80, 120, 0.08);
    transform: translateY(-1px);
}

@media (max-width: 700px) {
    #custom-hardware-panel .hardware-preset-card .hw-freeware-card-controls {
        gap: 6px;
    }

    #custom-hardware-panel .hardware-preset-card .hw-freeware-suggest-price {
        padding-inline: 6px;
    }
}

/* Freie Ware V147: dieselbe feste Bild-/Farbrasterlogik wie My Handy. */
#custom-hardware-panel .hardware-preset-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    gap: 12px;
}

#custom-hardware-panel .hardware-preset-card {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    grid-template-rows: 142px auto auto auto auto auto minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 4px;
    min-height: 338px;
    height: 100%;
    padding: 14px 14px 54px;
    overflow: hidden;
}

#custom-hardware-panel .hardware-preset-card:not(.flipped)::before {
    top: 11px;
    right: 11px;
    left: 11px;
    height: 142px;
}

#custom-hardware-panel .hardware-preset-card > img.hw-tile-photo,
#custom-hardware-panel .hardware-preset-card > .hw-tile-placeholder,
#custom-hardware-panel .hardware-preset-card.hw-smartphone-card > img.hw-tile-photo,
#custom-hardware-panel .hardware-preset-card.hw-smartphone-card.has-color-picker > img.hw-tile-photo {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    height: 136px;
    margin: 0 0 10px;
    object-fit: contain;
    object-position: center;
    align-self: center;
}

#custom-hardware-panel .hardware-preset-card .hw-color-picker {
    position: relative;
    top: auto;
    right: auto;
    grid-column: 2;
    grid-row: 1;
    display: grid;
    grid-template-columns: repeat(2, 28px);
    grid-auto-rows: 28px;
    align-content: start;
    justify-content: center;
    align-self: start;
    justify-self: stretch;
    gap: 5px 4px;
    width: 100%;
    height: 142px;
    box-sizing: border-box;
    margin: 0;
    padding: 8px 0 25px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    backdrop-filter: none;
    z-index: 2;
}

#custom-hardware-panel .hardware-preset-card .hw-color-picker legend {
    grid-column: 1 / -1;
    width: 100%;
    margin: 0 0 1px;
    color: #718696;
    font-size: 0.55rem;
    letter-spacing: 0.35px;
}

#custom-hardware-panel .hardware-preset-card .hw-color-option {
    width: 28px;
    height: 28px;
    padding: 4px;
}

#custom-hardware-panel .hardware-preset-card .hw-color-swatch {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
}

#custom-hardware-panel .hardware-preset-card .hw-color-picker .hw-color-option:has(input:checked) em {
    top: auto;
    right: 0;
    bottom: 4px;
    left: 0;
    color: #24516e;
    font-size: 0.58rem;
    font-weight: 850;
    line-height: 1.1;
    text-align: center;
}

#custom-hardware-panel .hardware-preset-card > .hardware-preset-brand {
    grid-column: 1 / -1;
    grid-row: 2;
    min-height: 14px;
    margin: 0;
    padding: 0;
    line-height: 1.2;
}

#custom-hardware-panel .hardware-preset-card > strong {
    grid-column: 1 / -1;
    grid-row: 3;
    min-height: 20px;
    margin: 0;
    padding-right: 88px;
    line-height: 1.2;
}

#custom-hardware-panel .hardware-preset-card > span:not(.hardware-preset-brand) {
    grid-column: 1 / -1;
    grid-row: 4;
    min-height: 17px;
    margin: 0;
    line-height: 1.2;
}

#custom-hardware-panel .hardware-preset-card > .hw-freeware-price-summary {
    grid-column: 1 / -1;
    grid-row: 5;
    align-self: start;
    min-height: 20px;
    margin: 4px 0 0;
}

#custom-hardware-panel .hardware-preset-card > .hw-freeware-distribution-picker {
    grid-column: 1 / -1;
    grid-row: 6;
    align-self: start;
    margin: 0;
}

#custom-hardware-panel .hardware-preset-card > .hw-freeware-card-controls {
    grid-column: 1 / -1;
    grid-row: 7;
    align-self: end;
    min-width: 0;
    margin: 0;
}

@media (max-width: 760px) {
    #custom-hardware-panel .hardware-preset-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 420px) {
    #custom-hardware-panel .hardware-preset-card {
        grid-template-columns: minmax(0, 1fr) 80px;
        column-gap: 8px;
    }
}

/* Die Freeware-Spalte kann durch den Warenkorb schmaler sein als das Browserfenster. */
body:not([data-layout="smartphone"]) #custom-hardware-panel .hardware-preset-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr));
}

/* O2-Listenpreise: Referenz bleibt sichtbar, ohne Aktionspreise zu verwechseln. */
.o2-reference-tab-btn {
    border-color: #efc98f;
    background: #fffaf0;
    color: #945100;
}

.o2-reference-tab-btn:hover:not(.active) {
    border-color: #d99a42;
    background: #fff3dc;
}

.o2-reference-tab-btn.active {
    border-color: #9a5b12;
    background: #9a5b12;
    color: #fff;
}

/* VVL-Navigation: Referenz und Vertragsverlaengerung bewusst vom
   normalen o2-Neukundenbereich absetzen. */
body:not([data-layout="smartphone"]) .tab-row-o2 .tab-navigation {
    display: flex;
    align-items: center;
    gap: 6px;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-divider {
    flex: 0 0 1px;
    width: 1px;
    height: 30px;
    margin: 0 5px 0 4px;
    background: #b6c5d3;
    box-shadow: 1px 0 0 rgba(255, 255, 255, .8);
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    padding: 4px 6px;
    border: 1px solid #9bb6c8;
    border-radius: 13px;
    background: linear-gradient(135deg, #f2f9fc, #e7f3f8);
    box-shadow: 0 3px 8px rgba(7, 74, 112, .08);
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .tab-btn {
    min-width: 112px;
    margin: 0;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .family-renewal-nav-btn {
    min-width: 176px;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .o2-reference-tab-btn:not(.active) {
    border-color: #d99a42 !important;
    background: #fff8eb !important;
    color: #8a4f11 !important;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .o2-reference-tab-btn:hover:not(.active) {
    background: #ffefd1 !important;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .o2-reference-tab-btn.active {
    border-color: #9a5b12 !important;
    background: linear-gradient(135deg, #9a5b12, #c47b20) !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 #f4c66f, 0 4px 10px rgba(154, 91, 18, .22) !important;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .family-renewal-nav-btn:not(.active) {
    border-color: #73b8d3 !important;
    background: #eefaff !important;
    color: #056386 !important;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .family-renewal-nav-btn:hover:not(.active) {
    background: #dff4fc !important;
}

body:not([data-layout="smartphone"]) .tab-nav-vvl-group .family-renewal-nav-btn.active {
    border-color: #087ca8 !important;
    background: linear-gradient(135deg, #087ca8, #0aa7cf) !important;
    color: #fff !important;
    box-shadow: inset 0 -3px 0 #8fe4f7, 0 4px 10px rgba(8, 124, 168, .22) !important;
}

@media (max-width: 700px) {
    .tab-nav-vvl-divider {
        display: none;
    }

    .tab-nav-vvl-group {
        display: contents;
    }

}

.o2-list-price-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin: 0 0 16px;
    padding: 16px 20px;
    border: 1px solid #ead5ad;
    border-radius: 14px;
    background: linear-gradient(135deg, #fffdf8, #fff7e8);
    color: #5f461f;
}

.o2-list-price-hero span {
    display: block;
    margin-bottom: 4px;
    color: #a46a1b;
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .08em;
}

.o2-list-price-hero h2 {
    margin: 0;
    color: #173a5e;
    font-size: 1.25rem;
}

.o2-list-price-hero p {
    max-width: 720px;
    margin: 5px 0 0;
    color: #6f6250;
    font-size: .78rem;
    line-height: 1.4;
}

.o2-list-price-hero > strong {
    flex: 0 0 auto;
    padding: 7px 11px;
    border: 1px solid #e4bf7c;
    border-radius: 999px;
    background: #fff;
    color: #945100;
    font-size: .7rem;
    white-space: nowrap;
}

.price-box.price-box-with-reference {
    height: 76px;
    padding: 4px;
    gap: 4px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    border: 0;
    background: transparent;
}

.price-box-with-reference .price-list-reference,
.price-box-with-reference .price-box-current {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 8px;
}

.price-box-with-reference .price-list-reference {
    min-height: 24px;
    padding: 3px 8px;
    border: 1px solid #efb4b4;
    background: #fff1f1;
    color: #ad3535;
    font-size: .62rem;
    font-weight: 800;
    justify-content: center;
}

.price-box-with-reference .price-list-reference s {
    font-size: .78rem;
    font-weight: 900;
    text-decoration-thickness: 1.5px;
}

.price-box-with-reference .price-box-current {
    flex: 1 1 auto;
    justify-content: center;
    padding: 3px 8px;
    border: 2px solid var(--o2-cyan);
    background: linear-gradient(135deg, #f0fbff, #e3f6fe);
}

.price-box-with-reference .price-box-current .price-text {
    font-size: 1.28rem;
}

@media (max-width: 760px) {
    .o2-list-price-hero {
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .price-box.price-box-with-reference {
        height: 72px;
    }
}

body[data-layout="smartphone"] .price-box.price-box-with-reference {
    min-height: 70px;
    height: 70px;
}

body[data-layout="smartphone"] .price-box-with-reference .price-box-current .price-text {
    font-size: 1.18rem;
}

/* V187: ruhiger VVL-Ablauf mit Zieltarif-Auswahl über die vorhandenen Tarif-Tabs */
.renewal-builder-tab .renewal-workflow-guide {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.renewal-builder-tab .renewal-offer-workspace {
    border-color: #c6dce8;
    background: #fbfdff;
    box-shadow: 0 4px 14px rgba(17, 64, 96, .06);
}

.renewal-linked-offer-target {
    min-height: 72px;
    padding: 12px 13px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #dce8ef;
    background: #fff;
}

.renewal-linked-offer-target.is-active {
    background: #f0fbff;
    box-shadow: inset 3px 0 0 #0797c6;
}

.renewal-linked-offer-target > div {
    min-width: 0;
    display: grid;
    gap: 3px;
}

.renewal-linked-offer-target span {
    color: #6a8192;
    font-size: .64rem;
    font-weight: 900;
    letter-spacing: .02em;
    text-transform: uppercase;
}

.renewal-linked-offer-target strong {
    overflow: hidden;
    color: #123f61;
    font-size: .86rem;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.renewal-linked-offer-target small {
    color: #087347;
    font-size: .68rem;
    font-weight: 850;
}

.renewal-linked-offer-target .renewal-select-target {
    flex: 0 0 auto;
    min-height: 38px;
    padding: 0 13px;
    white-space: nowrap;
}

@media (max-width: 760px) {
    .renewal-builder-tab .renewal-workflow-guide {
        grid-template-columns: 1fr;
    }

    .renewal-linked-offer-target {
        align-items: stretch;
        flex-direction: column;
        gap: 10px;
    }

    .renewal-linked-offer-target .renewal-select-target {
        width: 100%;
    }
}

/* V190: ruhige VVL-Bestandsaufnahme, Zieltarif-Auswahl und Rabattbedienung */
.renewal-builder-tab {
    max-width: 1260px;
    margin-inline: auto;
    padding: 16px 20px 34px;
    color: #0b3152;
}

.renewal-builder-hero {
    min-height: 0;
    padding: 15px 18px;
    border-top-width: 3px;
    border-radius: 13px;
    box-shadow: 0 4px 13px rgba(0, 51, 160, .06);
}

.renewal-builder-hero h2 {
    font-size: 1.25rem;
}

.renewal-builder-hero p {
    max-width: 720px;
    font-size: .74rem;
}

.renewal-builder-fee {
    flex-basis: 150px;
    padding: 8px 11px;
    border-width: 1px;
    border-radius: 10px;
}

.renewal-builder-fee strong {
    font-size: 1.05rem;
}

.renewal-workflow-guide {
    margin-top: 10px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    border-radius: 11px;
    box-shadow: none;
}

.renewal-workflow-guide > div {
    padding: 9px 13px;
}

.renewal-workflow-guide b {
    width: 25px;
    height: 25px;
    flex-basis: 25px;
    font-size: .68rem;
}

.renewal-workflow-guide strong {
    font-size: .73rem;
}

.renewal-workflow-guide small {
    font-size: .62rem;
}

.renewal-inventory-card,
.renewal-editor-card {
    margin-top: 10px;
    padding: 14px;
    border-radius: 13px;
    box-shadow: 0 4px 13px rgba(0, 51, 160, .055);
}

.renewal-section-head,
.renewal-editor-card > header {
    padding-bottom: 11px;
    align-items: center;
}

.renewal-section-head > div:first-child,
.renewal-editor-card > header > div {
    min-width: 0;
}

.renewal-section-head h3,
.renewal-editor-card h3 {
    margin: 0;
    font-size: 1rem;
}

.renewal-section-head p,
.renewal-editor-card header p {
    margin-top: 4px;
    font-size: .7rem;
    line-height: 1.35;
}

.renewal-inventory-head-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}

.renewal-inventory-save-state {
    padding: 6px 8px;
    font-size: .63rem;
}

.renewal-add-inventory-button {
    min-height: 34px;
    padding-inline: 11px;
    font-size: .68rem;
}

.renewal-inventory-content {
    margin-top: 10px;
    padding-top: 10px;
}

.renewal-mobile-inventory {
    margin-top: 0;
    border-radius: 11px;
}

.renewal-mobile-inventory-head {
    padding: 10px 12px;
}

.renewal-mobile-inventory-head strong,
.renewal-home-inventory-heading strong {
    font-size: .76rem;
}

.renewal-mobile-inventory-head small,
.renewal-home-inventory-heading small {
    font-size: .63rem;
}

.renewal-inventory-summary {
    flex: 0 0 auto;
    color: #60798d;
    font-size: .64rem;
    font-weight: 800;
}

.renewal-mobile-inventory-item {
    grid-template-columns: 28px minmax(130px, .7fr) minmax(150px, 1fr) minmax(130px, .7fr) 30px;
    gap: 8px;
    padding: 10px 11px;
}

.renewal-mobile-inventory-number {
    width: 26px;
    height: 26px;
    font-size: .62rem;
}

.renewal-mobile-inventory-item label {
    font-size: .62rem;
}

.renewal-mobile-inventory-item :is(input, select) {
    height: 35px;
    font-size: .72rem;
}

.renewal-remove-mobile-inventory {
    width: 30px;
    height: 35px;
}

.renewal-mobile-inventory-empty {
    min-height: 66px;
    font-size: .68rem;
}

.renewal-home-inventory-heading {
    margin-top: 11px;
}

.renewal-inventory-form {
    gap: 8px;
    padding-top: 8px;
}

.renewal-inventory-service {
    padding: 11px 12px;
    border-radius: 10px;
}

.renewal-inventory-service legend label {
    font-size: .76rem;
}

.renewal-inventory-fields {
    gap: 8px;
}

.renewal-inventory-fields label {
    gap: 4px;
    font-size: .63rem;
}

.renewal-inventory-fields input,
.renewal-inventory-fields select {
    height: 35px;
    padding-inline: 9px;
    font-size: .72rem;
}

.renewal-service-footer {
    margin-top: 9px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.renewal-service-footer .renewal-inventory-service-state {
    margin-top: 0;
}

.renewal-service-target-button {
    min-height: 31px;
    padding-inline: 9px;
    font-size: .65rem;
}

.renewal-service-target-button:disabled {
    opacity: .5;
    cursor: not-allowed;
}

.renewal-inventory-next {
    margin-top: 11px;
    padding-top: 10px;
    border-top: 1px solid #e1ebf2;
}

.renewal-inventory-next strong {
    font-size: .75rem;
}

.renewal-inventory-next span,
.renewal-inventory-next small {
    font-size: .65rem;
}

.renewal-inventory-next .renewal-primary-button {
    min-height: 37px;
    font-size: .7rem;
}

.renewal-offer-workspace {
    background: #fff;
}

.renewal-selection-banner {
    margin: 10px 0;
    padding: 9px 11px;
    display: flex;
    align-items: center;
    gap: 9px;
    border: 1px solid #8bcfe8;
    border-left: 3px solid #0784b6;
    border-radius: 9px;
    background: #f2fbff;
}

.renewal-selection-banner[hidden] {
    display: none !important;
}

.renewal-selection-icon {
    width: 25px;
    height: 25px;
    display: grid;
    place-items: center;
    flex: 0 0 25px;
    border-radius: 50%;
    color: #fff;
    background: #0784b6;
    font-weight: 950;
}

.renewal-selection-banner > div {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.renewal-selection-banner strong {
    color: #123f61;
    font-size: .73rem;
}

.renewal-selection-banner small {
    color: #60798d;
    font-size: .62rem;
}

.renewal-selection-banner .renewal-secondary-button {
    min-height: 29px;
    margin-left: auto;
    padding-inline: 9px;
    white-space: nowrap;
    font-size: .63rem;
}

.renewal-linked-offers {
    display: grid;
    gap: 7px;
}

.renewal-linked-offer {
    overflow: hidden;
    border: 1px solid #d4e2eb;
    border-radius: 10px;
    background: #fbfdfe;
}

.renewal-linked-offer.is-saved {
    border-color: #9bd6ba;
    background: #fbfffd;
}

.renewal-linked-offer-head {
    padding: 9px 11px;
    grid-template-columns: 27px minmax(0, 1fr) auto;
    gap: 8px;
}

.renewal-linked-offer-number {
    width: 25px;
    height: 25px;
    border-radius: 7px;
    font-size: .61rem;
}

.renewal-linked-offer-head strong {
    font-size: .72rem;
}

.renewal-linked-offer-head small {
    font-size: .61rem;
}

.renewal-linked-offer-status {
    padding: 4px 7px;
    font-size: .59rem;
}

.renewal-linked-offer-target {
    min-height: 57px;
    padding: 8px 11px;
}

.renewal-linked-offer-target span {
    font-size: .58rem;
}

.renewal-linked-offer-target strong {
    font-size: .75rem;
}

.renewal-linked-offer-target small {
    font-size: .62rem;
}

.renewal-linked-offer-target .renewal-select-target {
    min-height: 32px;
    padding-inline: 10px;
    font-size: .66rem;
}

.renewal-live-comparison {
    margin-top: 9px;
    min-height: 38px;
    padding: 7px 10px;
    gap: 7px;
    font-size: .67rem;
}

.renewal-live-comparison > span {
    font-size: .58rem;
}

.renewal-live-comparison em {
    padding-left: 7px;
    font-size: .65rem;
}

.renewal-live-incomplete {
    margin-top: 9px;
    padding: 8px 10px;
    font-size: .65rem;
}

.renewal-cart-summary {
    margin-top: 10px;
    padding: 10px 12px;
    border-radius: 11px;
}

.cart-item.is-renewal {
    border-left: 3px solid #0784b6;
}

.cart-renewal-discount-row strong {
    color: #07854f;
}

.cart-price-editable {
    cursor: pointer;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: #70b8cf;
    text-underline-offset: 3px;
}

.cart-price-editable:hover {
    color: #007cae;
}

@media (max-width: 760px) {
    .renewal-builder-tab {
        padding-inline: 10px;
    }

    .renewal-builder-hero,
    .renewal-section-head,
    .renewal-editor-card > header,
    .renewal-inventory-head-actions,
    .renewal-service-footer,
    .renewal-selection-banner {
        align-items: stretch;
        flex-direction: column;
    }

    .renewal-builder-fee {
        text-align: left;
    }

    .renewal-section-head,
    .renewal-editor-card > header {
        gap: 9px;
    }

    .renewal-inventory-head-actions {
        align-items: flex-start;
    }

    .renewal-mobile-inventory-head {
        align-items: flex-start;
        flex-direction: column;
        gap: 5px;
    }

    .renewal-mobile-inventory-item {
        grid-template-columns: 28px minmax(0, 1fr) 30px;
        grid-template-areas:
            "number provider remove"
            ". reference ."
            ". description ."
            ". price ."
            ". manual .";
    }

    .renewal-inventory-form {
        grid-template-columns: 1fr;
    }

    .renewal-inventory-fields {
        grid-template-columns: 1fr;
    }

    .renewal-selection-banner .renewal-secondary-button {
        width: 100%;
        margin-left: 0;
    }

    .renewal-linked-offer-head {
        grid-template-columns: 27px minmax(0, 1fr);
    }

    .renewal-linked-offer-status {
        grid-column: 2;
        justify-self: start;
    }

    .renewal-linked-offer-target {
        align-items: stretch;
        flex-direction: column;
    }

    .renewal-linked-offer-target .renewal-select-target {
        width: 100%;
    }

    .renewal-live-comparison {
        grid-template-columns: 1fr 1fr;
    }

    .renewal-live-comparison > span {
        grid-column: 1 / -1;
    }
}

/* V192: VVL als ruhiger 4-Schritt-Assistent */
.renewal-builder-tab {
    max-width: 1180px;
    padding: 18px 20px 42px;
    background: #edf3f8;
}

.renewal-builder-hero {
    padding: 20px 22px;
    border-top: 3px solid #0033a0;
    border-radius: 16px;
    background: linear-gradient(135deg, #ffffff 0%, #f4fbff 100%);
    box-shadow: 0 6px 18px rgba(14, 61, 95, .08);
}

.renewal-builder-hero h2 {
    margin-top: 4px;
    color: #0b3152;
    font-size: 1.45rem;
}

.renewal-builder-hero p {
    margin-top: 6px;
    color: #637d91;
    font-size: .82rem;
}

.renewal-builder-fee {
    flex-basis: 142px;
    padding: 10px 14px;
    border: 1px solid #a7d8ea;
    border-radius: 12px;
    background: #effaff;
    text-align: center;
}

.renewal-builder-fee span {
    color: #5d7890;
    font-size: .66rem;
    font-weight: 850;
    text-transform: uppercase;
}

.renewal-builder-fee strong {
    color: #0033a0;
    font-size: 1.32rem;
}

.renewal-workflow-guide.renewal-workflow-guide-four {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin: 12px 0 0;
    border: 1px solid #cfdfeb;
    border-radius: 14px;
    background: #fff;
    box-shadow: none;
}

.renewal-workflow-guide-four > div {
    min-width: 0;
    padding: 13px 15px;
    border-left: 1px solid #e0eaf1;
}

.renewal-workflow-guide-four > div:first-child { border-left: 0; }
.renewal-workflow-guide-four > div.is-complete { background: #f4fcf8; }
.renewal-workflow-guide-four > div.is-complete b { background: #1ea36b; color: #fff; }
.renewal-workflow-guide-four > div.is-active { background: #f0fbff; }
.renewal-workflow-guide-four b { width: 29px; height: 29px; flex-basis: 29px; font-size: .74rem; }
.renewal-workflow-guide-four strong { font-size: .78rem; }
.renewal-workflow-guide-four small { font-size: .67rem; }

.renewal-wizard-panel[hidden] { display: none !important; }

.renewal-inventory-card,
.renewal-editor-card {
    margin-top: 12px;
    padding: 20px;
    border-radius: 16px;
    border-color: #cfdfeb;
    background: #fff;
    box-shadow: 0 6px 18px rgba(14, 61, 95, .06);
}

.renewal-section-head,
.renewal-editor-card > header {
    padding-bottom: 16px;
    border-bottom: 1px solid #e2ebf1;
}

.renewal-section-head h3,
.renewal-editor-card h3 {
    font-size: 1.18rem;
}

.renewal-section-head p,
.renewal-editor-card header p {
    max-width: 680px;
    margin-top: 6px;
    color: #688196;
    font-size: .78rem;
}

.renewal-inventory-head-actions { gap: 10px; }
.renewal-inventory-save-state { padding: 8px 10px; font-size: .68rem; }
.renewal-add-inventory-button { min-height: 40px; padding-inline: 14px; font-size: .75rem; }
.renewal-inventory-content { margin-top: 16px; padding-top: 0; }

.renewal-mobile-inventory {
    overflow: hidden;
    border: 1px solid #d6e4ec;
    border-radius: 13px;
    background: #fbfdff;
}

.renewal-mobile-inventory-head { padding: 14px 16px; background: #f3f9fc; }
.renewal-mobile-inventory-head strong,
.renewal-home-inventory-heading strong { font-size: .88rem; }
.renewal-mobile-inventory-head small,
.renewal-home-inventory-heading small { font-size: .7rem; }
.renewal-inventory-summary { font-size: .7rem; }

.renewal-mobile-inventory-item {
    grid-template-columns: 34px minmax(150px, .8fr) minmax(180px, 1.2fr) minmax(150px, .8fr) 34px;
    gap: 11px;
    padding: 15px 16px;
}

.renewal-mobile-inventory-number { width: 30px; height: 30px; font-size: .68rem; }
.renewal-mobile-inventory-item label { font-size: .68rem; }
.renewal-mobile-inventory-item :is(input, select) { height: 39px; font-size: .78rem; }
.renewal-remove-mobile-inventory { width: 34px; height: 39px; }
.renewal-mobile-inventory-empty { min-height: 86px; font-size: .76rem; }

.renewal-home-inventory-heading {
    margin-top: 20px;
    padding: 0 2px;
}

.renewal-inventory-form { gap: 12px; padding-top: 10px; }
.renewal-inventory-service { padding: 14px 16px; border-radius: 13px; background: #f7fafc; }
.renewal-inventory-service.is-active { background: #f2fbff; }
.renewal-inventory-service legend label { gap: 10px; font-size: .86rem; }
.renewal-inventory-service legend input { width: 20px; height: 20px; }
.renewal-inventory-service:not(.is-active) .renewal-inventory-fields,
.renewal-inventory-service:not(.is-active) .renewal-service-footer { display: none; }
.renewal-inventory-fields { gap: 11px; }
.renewal-inventory-fields label { font-size: .68rem; }
.renewal-inventory-fields input,
.renewal-inventory-fields select { height: 40px; font-size: .78rem; }
.renewal-service-footer { margin-top: 12px; }

.renewal-inventory-next,
.renewal-stage-actions {
    margin-top: 18px;
    padding: 15px 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    border-top: 1px solid #e0eaf1;
}

.renewal-inventory-next > div,
.renewal-stage-actions > div { min-width: 0; display: grid; gap: 3px; }
.renewal-inventory-next strong,
.renewal-stage-actions strong { font-size: .8rem; color: #123f61; }
.renewal-inventory-next span,
.renewal-stage-actions span { color: #71889a; font-size: .7rem; }
.renewal-inventory-next .renewal-primary-button,
.renewal-stage-actions .renewal-primary-button { min-height: 42px; padding-inline: 18px; font-size: .76rem; }
.renewal-stage-actions .renewal-secondary-button { min-height: 40px; }

.renewal-offer-workspace { background: #fff; }
.renewal-selection-banner { margin: 14px 0; padding: 12px 14px; border-radius: 11px; }
.renewal-linked-offers { gap: 10px; }
.renewal-linked-offer { border-radius: 13px; }
.renewal-linked-offer-head { padding: 14px 16px; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 11px; }
.renewal-linked-offer-number { width: 29px; height: 29px; font-size: .67rem; }
.renewal-linked-offer-head strong { font-size: .82rem; }
.renewal-linked-offer-head small { margin-top: 3px; font-size: .68rem; }
.renewal-linked-offer-status { padding: 5px 8px; font-size: .64rem; }
.renewal-linked-offer-target { min-height: 74px; padding: 13px 16px; }
.renewal-linked-offer-target span { font-size: .63rem; }
.renewal-linked-offer-target strong { font-size: .86rem; }
.renewal-linked-offer-target small { font-size: .68rem; }
.renewal-linked-offer-target .renewal-select-target { min-height: 38px; padding-inline: 14px; font-size: .72rem; }
.renewal-target-actions { margin-top: 18px; }
.renewal-target-actions .renewal-primary-button:disabled { opacity: .48; cursor: not-allowed; }

.renewal-options-list { display: grid; gap: 10px; margin-top: 16px; }
.renewal-option-row {
    min-width: 0;
    padding: 14px 16px;
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    border: 1px solid #d6e4ec;
    border-radius: 13px;
    background: #fbfdff;
}
.renewal-option-number { width: 29px; height: 29px; display: grid; place-items: center; border-radius: 8px; color: #087fae; background: #e8f7fc; font-size: .68rem; font-weight: 950; }
.renewal-option-copy { min-width: 0; display: grid; gap: 4px; }
.renewal-option-copy strong { overflow: hidden; color: #123f61; font-size: .86rem; text-overflow: ellipsis; white-space: nowrap; }
.renewal-option-copy small { overflow: hidden; color: #6d8597; font-size: .68rem; text-overflow: ellipsis; white-space: nowrap; }
.renewal-option-price { min-width: 110px; display: grid; gap: 2px; text-align: right; }
.renewal-option-price span { color: #71889a; font-size: .62rem; font-weight: 850; text-transform: uppercase; }
.renewal-option-price strong { color: #0033a0; font-size: 1.05rem; }
.renewal-option-price small { color: #07854f; font-size: .65rem; font-weight: 850; }
.renewal-options-empty { padding: 25px 18px; display: grid; gap: 5px; border: 1px dashed #bdd2df; border-radius: 13px; color: #60798d; text-align: center; }
.renewal-options-empty strong { color: #123f61; }
.renewal-options-help { margin-top: 16px; padding: 13px 15px; display: flex; align-items: center; gap: 11px; border: 1px solid #c6e5ee; border-radius: 13px; background: #f2fbff; }
.renewal-options-help-icon { width: 24px; height: 24px; display: grid; place-items: center; flex: 0 0 24px; border-radius: 50%; color: #fff; background: #087fae; font-weight: 950; }
.renewal-options-help > div { min-width: 0; display: grid; gap: 3px; }
.renewal-options-help strong { color: #123f61; font-size: .76rem; }
.renewal-options-help small { color: #6b8293; font-size: .67rem; }
.renewal-options-help button { margin-left: auto; flex: 0 0 auto; }

.renewal-review-action-note { margin-top: 16px; padding: 14px 16px; display: grid; gap: 4px; border: 1px solid #bfe3cd; border-radius: 13px; background: #f4fcf7; }
.renewal-review-action-note strong { color: #087347; font-size: .82rem; }
.renewal-review-action-note span { color: #5f7b6b; font-size: .7rem; }
.renewal-review-workspace .renewal-live-comparison,
.renewal-review-workspace .renewal-live-incomplete,
.renewal-review-workspace .renewal-cart-summary { margin-top: 12px; }

@media (max-width: 760px) {
    .renewal-builder-tab { padding: 12px 10px 30px; }
    .renewal-workflow-guide.renewal-workflow-guide-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .renewal-workflow-guide-four > div:nth-child(3) { border-left: 0; border-top: 1px solid #e0eaf1; }
    .renewal-workflow-guide-four > div:nth-child(4) { border-top: 1px solid #e0eaf1; }
    .renewal-inventory-card, .renewal-editor-card { padding: 15px; }
    .renewal-inventory-next, .renewal-stage-actions, .renewal-options-help { align-items: stretch; flex-direction: column; }
    .renewal-inventory-next .renewal-primary-button, .renewal-stage-actions button, .renewal-options-help button { width: 100%; }
    .renewal-option-row { grid-template-columns: 30px minmax(0, 1fr); }
    .renewal-option-price { grid-column: 2; justify-items: start; text-align: left; }
    .renewal-options-help button { margin-left: 0; }
}

/* V196: VVL-Fokus – weniger Ebenen, klare Entscheidung pro Schritt */
body:has(#tab-family-renewal.active) .main-content {
    background: #edf3f8;
}

body:has(#tab-family-renewal.active) .renewal-builder-tab {
    max-width: none;
    padding: 20px clamp(16px, 2.4vw, 32px) 46px;
    gap: 12px;
}

body:has(#tab-family-renewal.active) .renewal-builder-hero {
    min-height: 124px;
    padding: 22px 26px;
    border-top-width: 4px;
    box-shadow: 0 8px 22px rgba(14, 61, 95, .08);
}

body:has(#tab-family-renewal.active) .renewal-builder-hero h2 {
    font-size: clamp(1.45rem, 2.1vw, 1.85rem);
    letter-spacing: -.025em;
}

body:has(#tab-family-renewal.active) .renewal-builder-hero p,
body:has(#tab-family-renewal.active) .renewal-quickbar-lead small,
body:has(#tab-family-renewal.active) .renewal-quickbar-total span,
body:has(#tab-family-renewal.active) .renewal-workflow-guide-four small,
body:has(#tab-family-renewal.active) .renewal-section-head p,
body:has(#tab-family-renewal.active) .renewal-editor-card > header p {
    display: none !important;
}

body:has(#tab-family-renewal.active) .renewal-builder-fee {
    min-width: 154px;
    min-height: 72px;
    justify-content: center;
    padding: 10px 15px;
}

body:has(#tab-family-renewal.active) .renewal-quickbar {
    min-height: 62px;
    margin: 0;
    padding: 10px 14px;
    border-color: #cbdde9;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(14, 61, 95, .045);
}

body:has(#tab-family-renewal.active) .renewal-quickbar-lead {
    gap: 10px;
}

body:has(#tab-family-renewal.active) .renewal-quickbar-icon {
    width: 28px;
    height: 28px;
    flex-basis: 28px;
    border-radius: 9px;
    background: #e8f7fc;
    color: #087fae;
}

body:has(#tab-family-renewal.active) .renewal-quickbar-lead strong {
    font-size: .76rem;
}

body:has(#tab-family-renewal.active) .renewal-quickbar-total {
    padding-left: 20px;
}

body:has(#tab-family-renewal.active) .renewal-quickbar-total strong {
    font-size: 1rem;
}

body:has(#tab-family-renewal.active) .renewal-quickbar-cart {
    min-height: 38px;
    padding-inline: 15px;
    border-radius: 9px;
    font-size: .72rem;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide.renewal-workflow-guide-four {
    margin: 0;
    min-height: 64px;
    border-color: #cbdde9;
    border-radius: 13px;
    box-shadow: 0 3px 10px rgba(14, 61, 95, .035);
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four > div {
    padding: 11px 15px;
}

body:has(#tab-family-renewal.active) .renewal-workflow-guide-four strong {
    font-size: .75rem;
}

body:has(#tab-family-renewal.active) .renewal-inventory-card,
body:has(#tab-family-renewal.active) .renewal-editor-card {
    margin-top: 0;
    padding: 22px;
    border-radius: 15px;
    box-shadow: 0 7px 20px rgba(14, 61, 95, .055);
}

body:has(#tab-family-renewal.active) .renewal-section-head,
body:has(#tab-family-renewal.active) .renewal-editor-card > header {
    padding-bottom: 13px;
}

body:has(#tab-family-renewal.active) .renewal-section-head h3,
body:has(#tab-family-renewal.active) .renewal-editor-card h3 {
    font-size: 1.08rem;
}

body:has(#tab-family-renewal.active) .renewal-inventory-content,
body:has(#tab-family-renewal.active) .renewal-options-list {
    margin-top: 13px;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory,
body:has(#tab-family-renewal.active) .renewal-inventory-service,
body:has(#tab-family-renewal.active) .renewal-linked-offer,
body:has(#tab-family-renewal.active) .renewal-option-row {
    border-radius: 11px;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-head {
    padding: 12px 14px;
}

body:has(#tab-family-renewal.active) .renewal-mobile-inventory-item {
    padding: 13px 14px;
}

body:has(#tab-family-renewal.active) .renewal-inventory-next,
body:has(#tab-family-renewal.active) .renewal-stage-actions {
    margin-top: 15px;
    padding-top: 13px;
}

@media (max-width: 760px) {
    body:has(#tab-family-renewal.active) .renewal-builder-tab {
        padding: 12px 10px 30px;
    }

    body:has(#tab-family-renewal.active) .renewal-builder-hero,
    body:has(#tab-family-renewal.active) .renewal-inventory-card,
    body:has(#tab-family-renewal.active) .renewal-editor-card {
        padding: 16px;
    }

    body:has(#tab-family-renewal.active) .renewal-builder-fee {
        min-height: 58px;
    }
}