/* ═══════════════════════════════════════════════════════════════════════
   WP-Rechner – Design System
   Font: Inter (Google Fonts)
   Approach: border-based (no shadows), tabular-nums for financials,
             clean slate palette, emerald for positive values
   ═══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────── Design Tokens ──────────────────────── */
:root {
    --bg:           #F1F5F9;   /* slate-100 */
    --surface:      #FFFFFF;
    --surface-2:    #F8FAFC;   /* slate-50 */
    --border:       #E2E8F0;   /* slate-200 */
    --border-med:   #CBD5E1;   /* slate-300 */

    --text:         #0F172A;   /* slate-900 */
    --text-med:     #334155;   /* slate-700 */
    --text-muted:   #64748B;   /* slate-500 */
    --text-subtle:  #94A3B8;   /* slate-400 */

    --brand:        #1D4ED8;   /* blue-700 – trust & precision */
    --brand-bg:     #EFF6FF;   /* blue-50  */
    --brand-hover:  #1E40AF;   /* blue-800 */

    --pos:          #15803D;   /* green-700 */
    --pos-bg:       #F0FDF4;   /* green-50  */
    --pos-border:   #BBF7D0;   /* green-200 */

    --neg:          #B91C1C;   /* red-700   */
    --neg-bg:       #FEF2F2;   /* red-50    */
    --neg-border:   #FECACA;   /* red-200   */

    --warn-bg:      #FFFBEB;   /* amber-50  */
    --warn-border:  #FDE68A;   /* amber-200 */
    --warn-text:    #92400E;   /* amber-800 */

    --pro:          #6D28D9;   /* violet-700 */
    --pro-bg:       #F5F3FF;   /* violet-50  */

    /* Chart colors */
    --c-energie:    #3B82F6;   /* blue-500  */
    --c-wartung:    #F59E0B;   /* amber-500 */
    --c-invest:     #8B5CF6;   /* violet-500*/
    --c-reinvest:   #EC4899;   /* pink-500  */
    --c-foerder:    #10B981;   /* emerald-500*/
    --c-14a:        #06B6D4;   /* cyan-500  */

    --radius:       10px;
    --radius-sm:    6px;
    --radius-lg:    14px;

    /* Layout */
    --panel-width:  520px;
    --header-h:     56px;
    color-scheme:   light;
}

:root[data-theme="dark"] {
    color-scheme:   dark;
    --bg:           #0B0F17;   /* deep slate background */
    --surface:      #131B2E;   /* dark card surface */
    --surface-2:    #1A243B;   /* elevated card / input bg */
    --border:       #23304B;   /* subtle dark border */
    --border-med:   #334366;   /* medium border */

    --text:         #F8FAFC;   /* slate-50 - crisp light text */
    --text-med:     #CBD5E1;   /* slate-300 - secondary text */
    --text-muted:   #94A3B8;   /* slate-400 - muted descriptions */
    --text-subtle:  #64748B;   /* slate-500 - subtle notes */

    --brand:        #3B82F6;   /* vibrant blue-500 for high dark contrast */
    --brand-bg:     rgba(59, 130, 246, 0.16); /* translucent blue badge/accent */
    --brand-hover:  #60A5FA;   /* lighter blue hover */

    --pos:          #22C55E;   /* green-500 - bright positive */
    --pos-bg:       rgba(34, 197, 94, 0.14);  /* translucent green */
    --pos-border:   rgba(34, 197, 94, 0.35);

    --neg:          #EF4444;   /* red-500 - bright negative */
    --neg-bg:       rgba(239, 68, 68, 0.14);  /* translucent red */
    --neg-border:   rgba(239, 68, 68, 0.35);

    --warn-bg:      rgba(245, 158, 11, 0.14); /* translucent amber */
    --warn-border:  rgba(245, 158, 11, 0.35);
    --warn-text:    #FBBF24;   /* amber-400 */

    --pro:          #A855F7;   /* purple-500 */
    --pro-bg:       rgba(168, 85, 247, 0.15);
}

/* ──────────────────────── Reset & Base ──────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    font-size: 14px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    scroll-behavior: smooth;
    overflow-x: clip;
    width: 100%;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.5;
    min-height: 100vh;
    min-height: 100dvh;
    overflow-x: clip;
    width: 100%;
    transition: background-color 0.25s ease, color 0.25s ease;
}

/* ──────────────────────── Header ──────────────────────── */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #0F172A;   /* slate-900 */
    height: var(--header-h);
    border-bottom: 1px solid rgba(255,255,255,.08);
}

:root[data-theme="dark"] .site-header {
    background: #111827;
    border-bottom: 1px solid var(--border);
}

.site-header__inner {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header__brand {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #FFFFFF;
    text-decoration: none;
}

.brand-logo-img {
    height: 36px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}

.site-header__back-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.7);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    padding: 6px 12px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    transition: all 0.15s ease;
}

.site-header__back-btn:hover {
    color: #FFFFFF;
    background: rgba(255, 255, 255, 0.15);
}

.brand-icon {
    width: 22px;
    height: 22px;
    color: #60A5FA;  /* blue-400 */
}

.brand-name {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -.2px;
    color: #FFFFFF;
}

.brand-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: rgba(255,255,255,.12);
    color: rgba(255,255,255,.7);
    padding: 2px 7px;
    border-radius: 100px;
}

.site-header__tagline {
    font-size: 12px;
    color: rgba(255,255,255,.45);
}

/* ──────────────────────── Landing Page ──────────────────────── */
#landing-view {
    background: var(--surface);
    color: var(--text);
}

.landing-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: rgba(255,255,255,0.92);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--border);
    height: 70px;
    width: 100%;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

:root[data-theme="dark"] .landing-header {
    background: rgba(11, 15, 23, 0.88);
    border-bottom: 1px solid var(--border);
}

.landing-header__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ── Theme Toggle Button ── */
.theme-toggle-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--text-med);
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.theme-toggle-btn:hover {
    background: var(--border);
    color: var(--brand);
    border-color: var(--brand);
    transform: scale(1.05);
}

.theme-toggle-btn svg,
.theme-toggle-btn i {
    width: 18px;
    height: 18px;
    stroke-width: 2;
}

.theme-toggle-btn--site {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.16);
    color: #F1F5F9;
}

.theme-toggle-btn--site:hover {
    background: rgba(255, 255, 255, 0.16);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Visibility rules for sun / moon icon */
:root:not([data-theme="dark"]) .theme-icon-sun {
    display: none !important;
}
:root:not([data-theme="dark"]) .theme-icon-moon {
    display: inline-block !important;
}

:root[data-theme="dark"] .theme-icon-moon {
    display: none !important;
}
:root[data-theme="dark"] .theme-icon-sun {
    display: inline-block !important;
}

/* Logo toggling */
:root:not([data-theme="dark"]) .logo-dark {
    display: none !important;
}
:root:not([data-theme="dark"]) .logo-light {
    display: block !important;
}

:root[data-theme="dark"] .logo-light {
    display: none !important;
}
:root[data-theme="dark"] .logo-dark {
    display: block !important;
}

.landing-header__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.landing-header__brand {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--text);
    text-decoration: none;
}

.landing-header__brand .brand-logo-img {
    height: 42px;
    max-width: 210px;
}

.landing-header__brand .brand-icon {
    width: 28px;
    height: 28px;
    color: var(--brand);
}

.landing-header__nav {
    display: flex;
    gap: 24px;
}

.landing-header__nav a {
    text-decoration: none;
    color: var(--text-med);
    font-size: 14px;
    font-weight: 500;
    transition: color 0.2s;
}

.landing-header__nav a:hover {
    color: var(--brand);
}

.dropdown-container {
    position: relative;
    display: inline-block;
}

.btn-primary {
    background: var(--brand);
    color: #FFF;
    border: none;
    padding: 10px 20px;
    border-radius: var(--radius-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.btn-primary:hover {
    background: var(--brand-hover);
}

.btn-large {
    padding: 16px 28px;
    font-size: 16px;
    border-radius: var(--radius);
}

.dropdown-menu {
    display: none;
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    min-width: 240px;
    z-index: 300;
    padding: 8px;
}

.dropdown-menu.show {
    display: block;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.dropdown-header {
    padding: 8px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
}

.dropdown-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    text-decoration: none;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    border-radius: var(--radius-sm);
    transition: background 0.15s;
}

.dropdown-item:hover:not(.disabled) {
    background: var(--surface-2);
}

.dropdown-item.active {
    color: var(--brand);
}

.dropdown-item.disabled {
    opacity: 0.6;
    cursor: default;
    color: var(--text-muted);
}

.badge {
    background: var(--surface-2);
    color: var(--text-muted);
    padding: 3px 8px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
}

.badge--brand {
    background: var(--pos-bg);
    color: var(--pos);
}

.hero-section {
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: center;
}

.hero-badge {
    display: inline-block;
    background: var(--brand-bg);
    color: var(--brand);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 24px;
}

.hero-title {
    font-size: 48px;
    line-height: 1.1;
    color: var(--text);
    margin-bottom: 20px;
}

.hero-title span {
    color: var(--brand);
}

.hero-subtitle {
    font-size: 18px;
    color: var(--text-med);
    line-height: 1.6;
    margin-bottom: 32px;
}

.hero-trust {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--text-muted);
}

.hero-trust svg {
    width: 16px;
    height: 16px;
}

.hero-visual {
    background: var(--surface-2);
    border-radius: 20px;
    padding: 40px;
    position: relative;
}

.visual-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    overflow: hidden;
}

.visual-card .v-header {
    background: #0F172A;
    color: #FFF;
    padding: 12px 16px;
    font-size: 12px;
    font-weight: 600;
}

:root[data-theme="dark"] .visual-card .v-header {
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    color: var(--text);
}

.visual-card .v-body {
    padding: 24px;
}

.visual-card .v-bar {
    height: 12px;
    background: var(--border);
    border-radius: 100px;
    margin-bottom: 12px;
}

.visual-card .v-bar:nth-child(2) {
    background: var(--brand);
}

.visual-card .v-kpi {
    margin-top: 24px;
    font-size: 32px;
    font-weight: 700;
    color: var(--pos);
}
.visual-card .v-kpi span {
    font-size: 14px;
    color: var(--text-muted);
    font-weight: 500;
}

.trust-bar {
    background: #0F172A;
    color: #FFF;
    padding: 40px 0;
    margin-top: 60px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

:root[data-theme="dark"] .trust-bar {
    background: #070B14;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    color: #F8FAFC;
}

:root[data-theme="dark"] .trust-icon svg {
    color: #60A5FA;
}

.trust-bar__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.trust-icon {
    display: flex;
    align-items: center;
    justify-content: center;
}
.trust-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
    color: #FFF;
}

.trust-item strong {
    display: block;
    font-size: 15px;
    margin-bottom: 4px;
}

.trust-item span {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
}

.section-title {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
}

.features-section {
    max-width: 1200px;
    margin: 80px auto;
    padding: 0 24px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.feature-card {
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 24px;
    text-align: center;
    background: var(--surface);
    transition: transform 0.2s, box-shadow 0.2s;
    cursor: pointer;
}

.feature-card:hover:not(.disabled) {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
    border-color: var(--brand);
}

.feature-card.disabled {
    opacity: 0.7;
    background: var(--surface-2);
    cursor: default;
}

.feature-card .f-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}
.feature-card .f-icon svg {
    width: 44px;
    height: 44px;
    stroke-width: 1.5;
    color: var(--brand);
}
.feature-card.disabled .f-icon svg {
    color: var(--text-muted);
}

.feature-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.feature-card p {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

/* ──────────────────────── Landing Sections ──────────────────────── */
.landing-section {
    max-width: 1200px;
    margin: 100px auto;
    padding: 0 24px;
    scroll-margin-top: 80px;
}

.landing-section--alt {
    background: var(--surface-2);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    max-width: 100%;
    padding: 80px 24px;
    margin: 100px 0;
}

:root[data-theme="dark"] .landing-section--alt {
    background: #0E1526;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}

.landing-section--alt > .landing-section__inner {
    max-width: 1200px;
    margin: 0 auto;
}

.landing-section__header {
    text-align: center;
    max-width: 820px;
    margin: 0 auto 48px auto;
}

.section-tag {
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--brand);
    background: var(--brand-bg);
    padding: 4px 12px;
    border-radius: 100px;
    margin-bottom: 12px;
}

.section-title {
    text-align: center;
    font-size: 32px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.25;
}

.section-lead {
    font-size: 18px;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 14px;
}

.section-desc {
    font-size: 15px;
    color: var(--text-muted);
    line-height: 1.65;
    margin: 0 auto;
}

.section-desc strong {
    color: var(--text-med);
}

.badge-statement {
    display: inline-block;
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--pos);
    background: var(--pos-bg);
    border: 1px solid var(--pos-border);
    padding: 6px 18px;
    border-radius: 100px;
}

/* ── Process Grid (So funktioniert's) ── */
.process-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 36px;
}

.process-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.process-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
    border-color: var(--brand);
}

.process-step-num {
    position: absolute;
    top: 22px;
    right: 24px;
    font-size: 26px;
    font-weight: 800;
    color: var(--border-med);
    line-height: 1;
}

.process-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--brand-bg);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.process-icon svg {
    width: 24px;
    height: 24px;
}

.process-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.process-card p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ── Pill Banner ── */
.pill-banner {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 14px 28px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 100px;
    max-width: 460px;
    margin: 0 auto;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--text-med);
}

.pill-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.pill-item svg {
    width: 15px;
    height: 15px;
    color: var(--brand);
}

.pill-divider {
    color: var(--border-med);
    font-size: 16px;
}

/* ── Why Grid (Über uns / Warum Eneruva) ── */
.why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.why-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 32px 26px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.why-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
    border-color: var(--pos);
}

.why-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--pos-bg);
    color: var(--pos);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}

.why-icon svg {
    width: 24px;
    height: 24px;
}

.why-card h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 10px;
}

.why-card p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
}

/* ── FAQ List ── */
.faq-list {
    max-width: 840px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.faq-item {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    overflow: hidden;
}

.faq-item[open] {
    border-color: var(--border-med);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03);
}

.faq-question {
    padding: 18px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
    list-style: none;
}

.faq-question::-webkit-details-marker {
    display: none;
}

.faq-chevron {
    width: 18px;
    height: 18px;
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.faq-item[open] .faq-chevron {
    transform: rotate(180deg);
    color: var(--brand);
}

.faq-answer {
    padding: 0 22px 20px 22px;
    font-size: 14px;
    color: var(--text-med);
    line-height: 1.6;
}

.faq-answer strong {
    color: var(--text);
}

.faq-cta-box {
    text-align: center;
    max-width: 640px;
    margin: 50px auto 0 auto;
    padding: 32px 24px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
}

.faq-cta-box h4 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
}

.faq-cta-box p {
    font-size: 13.5px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.placeholder-section {
    max-width: 800px;
    margin: 80px auto;
    padding: 40px 24px;
    text-align: center;
    background: var(--surface-2);
    border-radius: var(--radius-lg);
}

.landing-footer {
    border-top: 1px solid var(--border);
    padding: 40px 0;
    margin-top: 80px;
}

.landing-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links a {
    color: var(--text-muted);
    text-decoration: none;
    margin-left: 24px;
    font-size: 14px;
}

.footer-links a:hover {
    color: var(--text);
}

@media (max-width: 900px) {
    .hero-section {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 32px;
        margin: 40px auto;
    }
    .hero-trust {
        justify-content: center;
    }
    .hero-cta .dropdown-menu {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
    }
    .landing-header__actions .dropdown-menu {
        right: 0;
        left: auto;
        transform: none;
    }
    .trust-bar__inner {
        grid-template-columns: 1fr 1fr;
    }
    .features-grid {
        grid-template-columns: 1fr 1fr;
    }
    .process-grid,
    .why-grid {
        grid-template-columns: 1fr 1fr;
        gap: 18px;
    }
    .landing-header__nav {
        display: none;
    }
}

@media (max-width: 600px) {
    .trust-bar__inner,
    .features-grid,
    .process-grid,
    .why-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hero-section {
        margin: 24px auto 36px;
        padding: 0 16px;
    }
    .hero-title {
        font-size: clamp(28px, 7.5vw, 36px);
        line-height: 1.18;
    }
    .hero-subtitle {
        font-size: 15px;
        line-height: 1.55;
        margin-bottom: 24px;
    }
    .hero-visual {
        padding: 20px 16px;
        border-radius: 16px;
    }
    .visual-card .v-body {
        padding: 16px;
    }
    .section-title {
        font-size: 24px;
        line-height: 1.3;
    }
    .section-lead {
        font-size: 16px;
    }
    .pill-banner {
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 10px 16px;
        font-size: 12px;
        max-width: 100%;
        border-radius: var(--radius);
    }
    .pill-divider {
        display: none;
    }
    .brand-logo-img {
        height: 30px;
        max-width: 135px;
    }
    .landing-header {
        height: 60px;
    }
    .landing-header__inner {
        padding: 0 16px;
    }
    .landing-header .brand-logo-img {
        height: 32px;
        max-width: 140px;
    }
    #header-btn-start {
        padding: 8px 14px;
        font-size: 13px;
    }
    .site-header {
        height: 52px;
    }
    .site-header__inner {
        padding: 0 14px;
    }
    .site-header__tagline {
        display: none;
    }
    .site-header__back-btn span {
        display: none;
    }
    .site-header__back-btn {
        padding: 6px 8px;
    }
    .landing-footer {
        padding: 32px 0;
        margin-top: 48px;
    }
    .landing-footer__inner {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        padding: 0 16px;
    }
    .footer-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 14px;
    }
    .footer-links a {
        margin-left: 0;
        font-size: 13px;
    }
    .faq-question {
        padding: 14px 16px;
        font-size: 14px;
    }
    .faq-answer {
        padding: 0 16px 16px 16px;
        font-size: 13.5px;
    }
    .faq-cta-box {
        padding: 24px 16px;
        margin: 32px auto 0;
    }
}

/* ──────────────────────── App Layout ──────────────────────── */
.main-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    min-height: calc(100vh - var(--header-h) - 40px);
}

/* ──────────────────────── Wizard View ──────────────────────── */
#wizard-view {
    max-width: 1100px;
    margin: 0 auto;
}

.wizard-progress {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    padding: 0 10px;
    max-width: 480px;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: var(--text-subtle);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    transition: color .3s;
    cursor: pointer;
    user-select: none;
}

.progress-step:hover .progress-dot {
    border-color: var(--brand);
    opacity: 0.8;
}

.progress-step.active, .progress-step.completed {
    color: var(--brand);
}

.progress-dot {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 2px solid var(--border-med);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    transition: all .3s;
}

.progress-step.active .progress-dot {
    border-color: var(--brand);
    background: var(--brand);
    color: #FFF;
}

.progress-step.completed .progress-dot {
    border-color: var(--brand);
    background: var(--brand-bg);
    color: var(--brand);
}

.progress-line {
    flex: 1;
    height: 2px;
    background: var(--border);
    margin: 0 12px 20px;
    position: relative;
    top: -10px;
}

.wizard-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
    padding: 24px 36px;
    border-top: 1px solid var(--border);
}

.btn-prev {
    background: transparent;
    border: 1px solid var(--border-med);
    color: var(--text-med);
    height: 42px;
    padding: 0 20px;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}

.btn-prev:hover { background: var(--surface-2); }

.btn-next, .btn-calc {
    background: var(--brand);
    color: #FFF;
    height: 46px;
    padding: 0 28px;
    border: none;
    border-radius: var(--radius);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-next:hover, .btn-calc:hover { background: var(--brand-hover); }

/* ── Form Cards ── */
.form-card.wizard-step {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    display: flex;
    position: relative;
    min-height: 640px;
}

.form-card__content {
    flex: 0 0 600px;
    max-width: 100%;
    z-index: 2;
    background: linear-gradient(to right, var(--surface) 88%, transparent 100%);
    display: flex;
    flex-direction: column;
    min-height: 640px;
}

.form-card__image {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 48%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 1;
    border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 22%);
    mask-image: linear-gradient(to right, transparent 0%, black 22%);
}

.form-card__header {
    padding: 28px 36px 20px;
    border-bottom: 1px solid var(--border);
}

.form-card__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.form-card__sub {
    font-size: 14px;
    color: var(--text-muted);
}

.form-card__body {
    padding: 28px 36px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
}

@media (max-width: 900px) {
    .form-card.wizard-step {
        flex-direction: column;
        min-height: auto;
    }
    .form-card__content {
        flex: 1;
        background: var(--surface);
        min-height: auto;
    }
    .form-card__image {
        position: relative;
        width: 100%;
        height: 200px;
        order: -1;
        border-radius: var(--radius-lg) var(--radius-lg) 0 0;
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 30%);
    }
    .form-card__header { padding: 20px 24px 16px; }
    .form-card__body   { padding: 20px 24px; }
    .wizard-footer     { padding: 20px 24px; }
}

/* ── Fields ── */
.field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.field__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-med);
    display: flex;
    align-items: center;
    gap: 5px;
}

.field__hint {
    font-size: 11px;
    color: var(--text-subtle);
    line-height: 1.5;
}

/* ── Inputs & Selects ── */
input[type="number"],
input[type="text"],
input[type="email"],
input[type="date"],
select {
    width: 100%;
    height: 42px;
    padding: 0 14px;
    border: 1px solid var(--border-med);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font-family: inherit;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    transition: border-color .15s, box-shadow .15s;
    outline: none;
}

input[type="number"]:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="date"]:focus,
select:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(29,78,216,.1);
}

input[type="date"] {
    color-scheme: light;
}

:root[data-theme="dark"] input[type="date"] {
    color-scheme: dark;
    background-color: var(--surface);
    color: var(--text);
    border-color: var(--border-med);
}

:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(0.9) brightness(1.2);
    cursor: pointer;
    opacity: 0.85;
}

:root[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 1;
}

select {
    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='%2364748B' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.input-wrap {
    position: relative;
    display: flex;
}

.input-wrap input {
    flex: 1;
    padding-right: 64px;
}

.input-unit {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--surface-2);
    border: 1px solid var(--border-med);
    border-left: none;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    white-space: nowrap;
    pointer-events: none;
}

/* ── Pill Groups ── */
.pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.pill {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid var(--border-med);
    border-radius: 100px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-med);
    background: var(--surface);
    transition: border-color .12s, background .12s, color .12s;
    user-select: none;
}

.pill input[type="radio"] { display: none; }

.pill:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-bg);
    color: var(--brand);
}

.pill:hover:not(:has(input:checked)) { background: var(--surface-2); }

/* ── KfW Chips ── */
.kfw-chips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 10px;
}

.kfw-chip {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 12px 14px;
    border: 1px solid var(--border-med);
    border-radius: var(--radius);
    background: var(--surface);
    transition: border-color .12s, background .12s;
}

.kfw-chip--always {
    border-color: var(--pos-border);
    background: var(--pos-bg);
}

.kfw-chip--toggle { cursor: pointer; user-select: none; }

.kfw-chip--toggle input[type="checkbox"] { display: none; }

.kfw-chip--toggle:has(input:checked) {
    border-color: var(--brand);
    background: var(--brand-bg);
}

.kfw-chip--toggle:has(input:checked) .kfw-chip__pct { color: var(--brand); }

.kfw-chip--toggle:hover:not(:has(input:checked)) { background: var(--surface-2); }

.kfw-chip__pct {
    font-size: 16px;
    font-weight: 700;
    color: var(--pos);
    line-height: 1;
}

.kfw-chip__name { font-size: 12px; font-weight: 600; color: var(--text); }
.kfw-chip__sub { font-size: 10px; color: var(--text-muted); line-height: 1.4; }

.kfw-live-result {
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-med);
}

.kfw-live-result strong { color: var(--text); font-variant-numeric: tabular-nums; }

/* ── Expander ── */
.expander {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.expander summary {
    padding: 11px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    background: var(--surface-2);
    list-style: none;
    display: flex;
    align-items: center;
    gap: 8px;
    user-select: none;
    border-radius: calc(var(--radius-sm) - 1px) calc(var(--radius-sm) - 1px) 0 0;
}

.expander:not([open]) summary {
    border-radius: calc(var(--radius-sm) - 1px);
}

.expander summary::before {
    content: '▸';
    font-size: 11px;
    transition: transform .15s;
}

.expander[open] summary::before { transform: rotate(90deg); }

.expander__body {
    padding: 16px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Info Box ── */
.info-box {
    padding: 12px 16px;
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--warn-text);
    line-height: 1.5;
}

/* ── Tooltip ── */
.tooltip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid var(--border-med);
    font-size: 10px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: help;
    vertical-align: middle;
    flex-shrink: 0;
    position: relative;
    margin-left: 5px;
    transition: all 0.15s ease;
    user-select: none;
}

.tooltip:hover,
.tooltip:focus,
.tooltip:focus-within,
.tooltip.tooltip--active {
    background: var(--brand-bg);
    border-color: var(--brand);
    color: var(--brand);
    outline: none;
    z-index: 99999 !important;
}

/* Elevate parent stacking contexts when a tooltip is active or hovered */
.field:has(.tooltip:hover),
.field:has(.tooltip:focus),
.field:has(.tooltip.tooltip--active),
.field-row:has(.tooltip:hover),
.field-row:has(.tooltip:focus),
.field-row:has(.tooltip.tooltip--active),
.expander:has(.tooltip.tooltip--active) {
    z-index: 1000;
    position: relative;
}

.tooltip::before {
    content: "";
    position: absolute;
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px 6px 0 6px;
    border-style: solid;
    border-color: #1E293B transparent transparent transparent;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 100000;
}

.tooltip::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: #1E293B;
    color: #FFFFFF;
    font-size: 11.5px;
    font-weight: 400;
    line-height: 1.5;
    padding: 8px 12px;
    border-radius: 8px;
    white-space: normal;
    width: 250px;
    max-width: min(280px, calc(100vw - 32px));
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
    z-index: 99999;
    text-align: left;
}

.tooltip:hover::before,
.tooltip:focus::before,
.tooltip.tooltip--active::before {
    opacity: 1;
}

.tooltip:hover::after,
.tooltip:focus::after,
.tooltip.tooltip--active::after {
    opacity: 1;
    pointer-events: auto;
}

/* Horizontal alignments */
.tooltip--left::after,
.tooltip.tooltip--align-right::after {
    left: auto;
    right: -10px;
    transform: none;
}
.tooltip--left::before,
.tooltip.tooltip--align-right::before {
    left: auto;
    right: 2px;
    transform: none;
}

.tooltip.tooltip--align-left::after {
    left: -10px;
    transform: none;
}
.tooltip.tooltip--align-left::before {
    left: 2px;
    transform: none;
}

/* Bottom flipping */
.tooltip.tooltip--bottom::before {
    bottom: auto;
    top: calc(100% + 2px);
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #1E293B transparent;
}
.tooltip.tooltip--bottom::after {
    bottom: auto;
    top: calc(100% + 8px);
}

/* ── Form error ── */
.form-error {
    padding: 12px 16px;
    background: var(--neg-bg);
    border: 1px solid var(--neg-border);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--neg);
}

.wizard-step-error {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #FEF2F2;
    border: 1px solid #FCA5A5;
    border-radius: var(--radius-sm);
    color: #991B1B;
    font-size: 13.5px;
    font-weight: 500;
    margin-bottom: 16px;
    animation: shakeErr 0.3s ease-in-out;
}

@keyframes shakeErr {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

.input-error {
    border-color: #EF4444 !important;
    background-color: #FFF5F5 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

/* ── Conditional ── */
.cond { display: flex; flex-direction: column; gap: 14px; }

/* ── KfW Section ── */
.kfw-section { gap: 10px; }

/* ──────────────────────── Loading View ──────────────────────── */
#loading-view {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 400px;
}

.loading-content {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}

.loading-content h3 { font-size: 16px; color: var(--text); }
.loading-content p { font-size: 13px; color: var(--text-muted); }

@keyframes spin { to { transform: rotate(360deg); } }

/* ──────────────────────── Results Dashboard ──────────────────────── */
#results-view {
    width: 100%;
}

.results-header-bar {
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.results-stepper {
    margin-bottom: 0;
    padding: 0;
    flex: 0 0 auto;
}

.results-stepper .progress-step {
    font-size: 10px;
}

.results-stepper .progress-dot {
    width: 26px;
    height: 26px;
    font-size: 11px;
}

.btn-secondary {
    background: var(--surface);
    border: 1px solid var(--border-med);
    color: var(--text-med);
    padding: 8px 16px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-secondary:hover { background: var(--surface-2); }

.results-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 20px;
    align-items: start;
}

.hero-kpi { margin-bottom: 20px; }

.spinner {
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--border);
    border-top-color: var(--brand);
    border-radius: 50%;
    animation: spin .7s linear infinite;
}

@keyframes spin { to { transform: rotate(360deg); } }

.kpi-card__icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    color: #1d4ed8;
}

.kpi-card__icon svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
}

.icon svg {
    width: 1em;
    height: 1em;
}

/* ── Scenario Tabs ── */
.scenario-tabs {
    display: flex;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 4px;
    gap: 4px;
    margin: 0 auto 20px;
    width: 100%;
    max-width: 580px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.s-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 12px;
    border: none;
    border-radius: calc(var(--radius) - 2px);
    background: transparent;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    transition: all .15s;
    white-space: nowrap;
}

.s-tab:hover:not(.s-tab--active) { background: var(--surface-2); color: var(--text); }

.s-tab--active {
    background: var(--brand);
    color: #FFFFFF !important;
    font-weight: 700;
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

.s-tab__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.s-tab__dot--opt { background: #10B981; }
.s-tab__dot--neu { background: #3B82F6; }
.s-tab__dot--pes { background: #F59E0B; }

.s-tab--active .s-tab__dot {
    background: #FFFFFF !important;
    box-shadow: 0 0 4px rgba(255,255,255,0.8);
}

/* ── Status Banner ── */
.status-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
}

.status-banner__left {
    display: flex;
    align-items: center;
    gap: 20px;
    flex: 1;
}

.status-icon {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 700;
    flex-shrink: 0;
}

.status-banner--pos .status-icon {
    background: #DCFCE7 !important;
    color: #16A34A !important;
    border: 1.5px solid #BBF7D0;
}

.status-banner--neg .status-icon {
    background: #FEE2E2 !important;
    color: #EF4444 !important;
    border: 1.5px solid #FECACA;
}

.status-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-muted);
    margin-bottom: 4px;
}

.status-title {
    font-size: 24px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--text);
}

.status-sub {
    font-size: 13.5px;
    color: var(--text-med);
    margin-top: 6px;
    line-height: 1.5;
    max-width: 560px;
}

.status-confidence {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
    background: var(--surface-2);
    padding: 4px 10px;
    border-radius: 100px;
    border: 1px solid var(--border);
}

:root[data-theme="dark"] .status-confidence {
    background: var(--surface-2);
    border-color: var(--border-med);
    color: var(--text-med);
}

.confidence-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #3B82F6;
    display: inline-block;
}

.status-banner__right {
    flex-shrink: 0;
    max-width: 320px;
}

.status-hint {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-muted);
}

:root[data-theme="dark"] .status-hint {
    background: var(--surface-2);
    border-color: var(--border-med);
    color: var(--text-med);
}

.status-hint strong {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
    margin-bottom: 4px;
    font-size: 12px;
}

.status-hint strong::before {
    content: "ℹ";
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--brand-bg);
    color: var(--brand);
    font-size: 10px;
    font-weight: 800;
}

/* ── 4 KPI Row ── */
.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 20px;
}

.kpi-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 4px;
    transition: transform .15s, box-shadow .15s;
}

.kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}

.kpi-card__icon {
    font-size: 18px;
    margin-bottom: 2px;
}

.kpi-card__label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}

.kpi-card__value {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.3px;
}

.kpi-card__sub {
    font-size: 11px;
    color: var(--text-subtle);
}

.kpi-card--green {
    background: #F0FDF4;
    border-color: #86EFAC;
}

.kpi-card--green .kpi-card__value {
    color: #16A34A;
}

/* ── Main Dash Grid ── */
.dash-grid {
    display: grid;
    grid-template-columns: 1.35fr 1fr;
    gap: 20px;
    align-items: start;
}

.dash-col-left, .dash-col-right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.dash-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 22px 24px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.dash-card__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.dash-card__sub {
    font-size: 12px;
    color: var(--text-muted);
    margin-bottom: 16px;
}

.dash-card__footnote {
    font-size: 11px;
    color: var(--text-subtle);
    margin-top: 12px;
    border-top: 1px solid var(--border);
    padding-top: 10px;
}

/* ── Break-even Chart & Results Canvases ── */
.breakeven-chart-wrap {
    position: relative;
    width: 100%;
    max-width: 100%;
}

.pv-chart-wrap,
.bat-chart-wrap {
    height: 220px;
    position: relative;
    width: 100%;
    max-width: 100%;
}

.pv-monthly-chart-wrap {
    width: 100%;
    max-width: 100%;
    height: 220px;
    position: relative;
}

#breakeven-canvas {
    width: 100% !important;
    max-width: 100% !important;
    height: 220px;
    display: block;
    box-sizing: border-box;
}

#pv-cashflow-chart,
#pv-monthly-chart,
#bat-sweetspot-chart,
#bat-monthly-chart {
    width: 100% !important;
    max-width: 100% !important;
    height: 100% !important;
    display: block;
    box-sizing: border-box;
}

.chart-legend {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    margin-top: 12px;
}

.chart-leg-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--text-muted);
}

.chart-leg-dot {
    width: 14px;
    height: 3px;
    border-radius: 2px;
    display: inline-block;
}

/* ── Cost Compare Cards ── */
.cost-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.cost-compare-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 18px 20px;
}

.cost-compare-card--wp {
    border-color: #BFDBFE;
    background: #F8FAFF;
}

:root[data-theme="dark"] .cost-compare-card--wp {
    border-color: rgba(59, 130, 246, 0.4);
    background: rgba(59, 130, 246, 0.1);
}

.cost-compare-card__header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.cost-compare-card__icon {
    font-size: 20px;
}

.cost-compare-card__label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text);
}

.cost-compare-card__total {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.cost-compare-bar {
    height: 10px;
    background: var(--border);
    border-radius: 100px;
    overflow: hidden;
    display: flex;
    margin-bottom: 14px;
}

.cc-bar-seg {
    height: 100%;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.cost-compare-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 12px;
}

.cc-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--text-med);
    font-variant-numeric: tabular-nums;
}

.cc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-right: 6px;
    vertical-align: middle;
}

.cc-item--kfw {
    color: #16A34A;
    font-weight: 600;
}

/* ── CO2 & Trees ── */
.co2-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.co2-stat {
    display: flex;
    flex-direction: column;
}

.co2-stat__val {
    font-size: 28px;
    font-weight: 800;
    color: #16A34A;
    font-variant-numeric: tabular-nums;
}

.co2-stat__label {
    font-size: 12.5px;
    color: var(--text-muted);
}

.co2-trees {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #F0FDF4;
    border: 1px solid #BBF7D0;
    border-radius: 12px;
    padding: 12px 18px;
    flex: 1;
    min-width: 200px;
}

.co2-trees__num {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 22px;
    font-weight: 800;
    color: #15803D;
    white-space: nowrap;
}

.co2-trees__label {
    font-size: 12px;
    color: #166534;
    line-height: 1.35;
}

/* ── Invest & KfW ── */
.invest-lines {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
}

.invest-line {
    display: flex;
    justify-content: space-between;
    color: var(--text-med);
    font-variant-numeric: tabular-nums;
}

.invest-line--kfw {
    color: #16A34A;
    font-weight: 600;
}

.invest-line--total {
    padding-top: 10px;
    border-top: 1px solid var(--border);
    font-weight: 800;
    font-size: 15px;
    color: var(--text);
}

/* ── Factor List ── */
.factor-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 4px;
}

.factor-labels {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 12px;
    margin-bottom: 5px;
}

.factor-labels span:first-child {
    font-weight: 600;
    color: var(--text);
}

.factor-impact {
    font-size: 11px;
    font-weight: 600;
}

.factor-impact--high { color: #DC2626; }
.factor-impact--med { color: #D97706; }
.factor-impact--low { color: #2563EB; }

.factor-bar-track {
    height: 6px;
    background: var(--surface-2);
    border-radius: 100px;
    overflow: hidden;
}

.factor-bar {
    height: 100%;
    background: #3B82F6;
    border-radius: 100px;
}

/* ── Scenario Assumptions ── */
.assumptions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.assumption-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid var(--border);
    gap: 8px;
}

.assumption-item:nth-last-child(-n+2) { border-bottom: none; }

.assumption-label {
    font-size: 11px;
    color: var(--text-muted);
}

.assumption-val {
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

/* ── Pro Teaser ── */
.pro-teaser {
    background: var(--pro-bg);
    border: 1px solid #DDD6FE;
    border-radius: var(--radius);
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pro-teaser__body {
    display: flex;
    gap: 12px;
    align-items: flex-start;
}

.pro-badge {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    background: var(--pro);
    color: #FFF;
    padding: 3px 8px;
    border-radius: 100px;
    flex-shrink: 0;
    margin-top: 2px;
}

.pro-teaser__text strong {
    font-size: 13px;
    color: var(--pro);
    display: block;
    margin-bottom: 4px;
}

.pro-teaser__text p {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
}

.btn-pro {
    width: 100%;
    height: 36px;
    background: #EDE9FE;
    color: var(--pro);
    border: 1px solid #DDD6FE;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}
.btn-pro:hover {
    background: var(--pro);
    color: #FFFFFF;
}

/* ── Bottom Recommendation Banner ── */
.recommendation-banner {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 26px 30px;
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.recommendation-banner__icon {
    font-size: 32px;
    flex-shrink: 0;
    align-self: flex-start;
    margin-top: 2px;
}

.recommendation-banner__content {
    flex: 1;
}

.recommendation-banner__content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 6px;
}

.recommendation-banner__content p {
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    margin-bottom: 12px;
}

.rec-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.rec-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-med);
}

.rec-list li::before {
    content: "✓";
    color: var(--brand);
    font-weight: 700;
    font-size: 11px;
    background: var(--brand-bg);
    border: 1px solid var(--border-med);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.recommendation-banner__cta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 250px;
    flex-shrink: 0;
}

.cta-question {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    text-align: center;
    margin-bottom: 2px;
}

.btn-pv-compare {
    background: #2563EB;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 600;
    padding: 12px 18px;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    text-align: center;
    transition: background 0.15s, transform 0.15s;
    box-shadow: 0 1px 3px rgba(37,99,235,0.2);
}

.btn-pv-compare:hover {
    background: #1D4ED8;
    transform: translateY(-1px);
}

/* ── Animationen (Phase 1) ── */
@keyframes pulse-glow {
    0% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0.3); border-color: var(--brand); }
    70% { box-shadow: 0 0 0 10px rgba(29, 78, 216, 0); border-color: var(--brand); }
    100% { box-shadow: 0 0 0 0 rgba(29, 78, 216, 0); border-color: var(--border); }
}

.glow-effect {
    animation: pulse-glow 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ──────────────────────── Responsive ──────────────────────── */
/* ──────────────────────── Responsive ──────────────────────── */
@media (max-width: 900px) {
    .dash-grid {
        grid-template-columns: 1fr;
    }
    .results-grid {
        grid-template-columns: 1fr;
    }
    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    .status-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    .status-banner__right {
        max-width: 100%;
        width: 100%;
    }
    .recommendation-banner {
        flex-direction: column;
        align-items: stretch;
    }
    .recommendation-banner__cta {
        min-width: 100%;
    }
    .bat-context-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .bat-dual-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

@media (max-width: 640px) {
    /* Prevent iOS Safari auto-zoom on input focus */
    input[type="number"],
    input[type="text"],
    input[type="email"],
    input[type="date"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Container & Layout */
    .main-container {
        margin: 16px auto 36px;
        padding: 0 12px;
        min-height: auto;
    }

    /* Form & Wizard */
    .form-card.wizard-step {
        border-radius: 12px;
    }
    .form-card__image {
        height: 120px;
        border-radius: 12px 12px 0 0;
    }
    .form-card__header {
        padding: 18px 16px 12px;
    }
    .form-card__title {
        font-size: 18px;
        line-height: 1.3;
    }
    .form-card__sub {
        font-size: 13px;
    }
    .form-card__body {
        padding: 16px;
        gap: 16px;
    }
    .field-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .kfw-chips {
        grid-template-columns: 1fr;
        gap: 8px;
    }
    .assumptions {
        grid-template-columns: 1fr;
    }
    .wizard-footer {
        flex-direction: column-reverse;
        gap: 10px;
        padding: 14px 16px;
    }
    .wizard-footer .btn-prev,
    .wizard-footer .btn-next,
    .wizard-footer .btn-calc {
        width: 100%;
        justify-content: center;
        height: 44px;
    }
    .wizard-progress {
        padding: 0 4px;
        margin-bottom: 20px;
    }
    .progress-step {
        font-size: 10px;
        gap: 4px;
    }
    .progress-dot {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    .pill-group {
        gap: 6px;
    }
    .pill {
        padding: 7px 12px;
        font-size: 12.5px;
    }

    /* Results Header & Views */
    .results-header-bar,
    .results-topbar {
        flex-direction: column-reverse;
        gap: 12px;
        align-items: stretch;
        margin-bottom: 16px;
    }
    .results-header-bar .btn-secondary,
    .results-topbar .btn-secondary {
        width: 100%;
        justify-content: center;
        padding: 9px 16px;
    }
    .results-stepper,
    .results-topbar .wizard-progress {
        width: 100%;
        max-width: 100%;
        justify-content: center;
    }
    .scenario-tabs {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        padding: 3px;
        gap: 2px;
    }
    .s-tab {
        padding: 7px 10px;
        font-size: 11.5px;
        white-space: nowrap;
    }
    .status-banner {
        padding: 16px;
        gap: 14px;
    }
    .status-banner__left {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .status-title {
        font-size: 19px;
        line-height: 1.3;
    }
    .status-sub {
        font-size: 13px;
    }
    .cost-compare-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .cost-compare-card {
        padding: 14px 16px;
    }
    .kpi-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .kpi-card {
        padding: 14px 16px;
    }
    .kpi-card__value {
        font-size: 22px;
        word-break: break-word;
    }
    .dash-card {
        padding: 16px;
    }
    .dash-card__title {
        font-size: 15px;
    }
    .breakeven-chart-wrap {
        width: 100%;
    }
    #breakeven-canvas {
        height: 185px !important;
    }
    .pv-chart-wrap,
    .bat-chart-wrap,
    .pv-monthly-chart-wrap {
        height: 190px !important;
    }
    .chart-legend {
        justify-content: center;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin-top: 8px;
    }
    .sim-slider-header {
        flex-wrap: wrap;
        gap: 4px;
    }
    .sim-slider-label {
        font-size: 13px;
    }
    .sim-slider-val {
        font-size: 13px;
    }
    .recommendation-banner {
        padding: 16px;
    }
    .recommendation-banner__content h3 {
        font-size: 16px;
    }

    /* Battery Specific Mobile Views */
    .bat-context-card {
        padding: 14px 16px;
    }
    .bat-context-col__val {
        font-size: 16px;
    }
    .bat-dual-card {
        padding: 16px;
    }
    .bat-dual-card__title {
        font-size: 18px;
    }
    .bat-dual-card__metrics {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
        padding-top: 10px;
    }
    .bat-saturation-box {
        padding: 12px 14px;
        font-size: 12px;
    }
    .capacity-selector-grid {
        grid-template-columns: repeat(auto-fill, minmax(95px, 1fr));
        gap: 8px;
    }
    .capacity-btn {
        padding: 10px 6px;
    }
    .capacity-btn__val {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .bat-dual-card__metrics {
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }
    .capacity-selector-grid {
        grid-template-columns: repeat(auto-fill, minmax(82px, 1fr));
        gap: 6px;
    }
    .capacity-btn__val {
        font-size: 13px;
    }
    .capacity-btn__badge {
        font-size: 9.5px;
        padding: 2px 4px;
    }
    .results-disclaimer {
        padding: 12px 14px;
        font-size: 11.5px;
    }
}

/* Scenario Simulator */
.sim-sliders {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 16px;
}
.sim-slider-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.sim-slider-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sim-slider-label {
    font-weight: 500;
    color: var(--t-main);
    font-size: 0.95rem;
}
.sim-slider-val {
    font-weight: 600;
    color: var(--prim);
    font-size: 0.95rem;
}
.sim-slider-sub {
    font-size: 0.8rem;
    color: var(--t-light);
}
input[type=range].sim-range {
    -webkit-appearance: none;
    width: 100%;
    background: transparent;
}
input[type=range].sim-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: #2563EB; /* Break-Even WP Blue */
    cursor: pointer;
    margin-top: -9px;
    box-shadow: 0 2px 5px rgba(37,99,235,0.4);
    border: 2px solid #FFFFFF;
}
input[type=range].sim-range::-webkit-slider-runnable-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #DBEAFE; /* Light blue track */
    border-radius: 3px;
}
input[type=range].sim-range:focus {
    outline: none;
}

/* Firefox Fallbacks */
input[type=range].sim-range::-moz-range-thumb {
    height: 22px;
    width: 22px;
    border-radius: 50%;
    background: #2563EB;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(37,99,235,0.4);
    border: 2px solid #FFFFFF;
}
input[type=range].sim-range::-moz-range-track {
    width: 100%;
    height: 6px;
    cursor: pointer;
    background: #DBEAFE;
    border-radius: 3px;
}

/* Animations */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.spin {
    animation: spin 1s linear infinite;
}

/* ── Premium View ── */
.premium-container {
    max-width: 1000px;
    margin: 40px auto;
    padding: 0 20px;
}
.premium-header {
    text-align: center;
    margin-bottom: 40px;
}
.premium-header h1 {
    font-size: 2.2rem;
    color: var(--t-main);
    margin-bottom: 12px;
}
.premium-header p {
    color: var(--t-light);
    font-size: 1.1rem;
}
.premium-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    align-items: start;
}
@media (max-width: 768px) {
    .premium-grid { grid-template-columns: 1fr; }
}

.premium-form-card {
    background: var(--surface);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border);
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
.premium-form-card h2 {
    font-size: 1.3rem;
    margin-bottom: 8px;
    color: var(--t-main);
}
.premium-form-card p {
    color: var(--t-light);
    margin-bottom: 24px;
    font-size: 0.95rem;
    line-height: 1.5;
}

.premium-cta {
    margin-top: 30px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.premium-benefits-card {
    background: var(--surface-2);
    border-radius: 12px;
    padding: 30px;
    border: 1px solid var(--border);
}
.premium-benefits-card h3 {
    font-size: 1.2rem;
    margin-bottom: 20px;
    color: var(--t-main);
    display: flex;
    align-items: center;
    gap: 8px;
}
.benefit-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--text-med);
    line-height: 1.5;
}
.benefit-item .icon {
    color: var(--pos);
    flex-shrink: 0;
    margin-top: 2px;
}
.premium-preview {
    margin-top: 30px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 8px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-subtle);
    font-size: 0.9rem;
    overflow: hidden;
    position: relative;
}
.premium-preview::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(29,78,216,0.05), rgba(29,78,216,0.1));
    filter: blur(10px);
}
.premium-preview span {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
}

/* ──────────────────────── PV Rechner Design System ──────────────────────── */
#pv-wizard-view {
    max-width: 1100px;
    margin: 0 auto;
}

#pv-results-view {
    width: 100%;
}

.pv-flaeche-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    margin-bottom: 14px;
    position: relative;
    transition: border-color .15s, box-shadow .15s;
}

.pv-flaeche-card:hover {
    border-color: var(--border-med);
}

.pv-flaeche-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

.pv-flaeche-card__title {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-remove-flaeche {
    background: none;
    border: none;
    color: var(--text-subtle);
    cursor: pointer;
    padding: 4px;
    border-radius: var(--radius-sm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}

.btn-remove-flaeche:hover {
    color: var(--neg);
    background: var(--neg-bg);
}

/* ──────────────────────── Batteriespeicher Rechner Design System ──────────────────────── */
#batterie-wizard-view {
    max-width: 1100px;
    margin: 0 auto;
}

#batterie-results-view {
    width: 100%;
}

.capacity-selector-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(115px, 1fr));
    gap: 10px;
    margin-top: 14px;
}

.capacity-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.capacity-btn:hover {
    border-color: var(--brand);
    background: var(--surface-hover);
}

.capacity-btn--active {
    border-color: var(--brand);
    background: var(--brand-subtle);
    box-shadow: 0 0 0 1px var(--brand);
}

.capacity-btn__val {
    font-size: 15px;
    font-weight: 700;
    color: var(--text);
}

.capacity-btn__badge {
    font-size: 10.5px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text-muted);
}

.capacity-btn--active .capacity-btn__badge {
    background: var(--brand);
    color: #fff;
}

.capacity-btn__badge--opt {
    background: rgba(34, 197, 94, 0.15);
    color: var(--pos);
}

.capacity-btn--active .capacity-btn__badge--opt {
    background: var(--pos);
    color: #fff;
}

.bat-compare-table th {
    font-weight: 600;
}

.bat-compare-table td {
    padding: 10px 8px;
    border-bottom: 1px solid var(--border);
}

.bat-compare-table tr:hover {
    background: var(--surface-hover);
}

.bat-compare-table tr.row--optimal {
    background: rgba(37, 99, 235, 0.04);
    font-weight: 600;
}

.bat-compare-table tr.row--selected {
    outline: 2px solid var(--brand);
    outline-offset: -2px;
}

/* ── Batterie System-Kontext ── */
.bat-context-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 18px 24px;
    margin-bottom: 20px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}
.bat-context-grid {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 24px;
    align-items: center;
}
@media (max-width: 860px) {
    .bat-context-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
}
.bat-context-col {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bat-context-col__label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    font-weight: 700;
    color: var(--text-subtle);
}
.bat-context-col__val {
    font-size: 18px;
    font-weight: 800;
    color: var(--text);
}
.bat-context-col__sub {
    font-size: 12.5px;
    color: var(--text-muted);
}

/* ── Dual Recommendation Cards ── */
.bat-dual-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}
@media (max-width: 768px) {
    .bat-dual-cards {
        grid-template-columns: 1fr;
    }
}
.bat-dual-card {
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: 16px;
    padding: 20px 22px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: all 0.2s ease;
    cursor: pointer;
}
.bat-dual-card:hover {
    border-color: var(--brand);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
}
.bat-dual-card--active {
    border-color: var(--brand);
    background: var(--surface-2);
    box-shadow: 0 0 0 2px var(--brand);
}
.bat-dual-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.bat-dual-card__title {
    font-size: 20px;
    font-weight: 800;
    color: var(--text);
    margin: 4px 0 4px 0;
}
.bat-dual-card__desc {
    font-size: 13px;
    color: var(--text-med);
    line-height: 1.45;
    margin-bottom: 14px;
}
.bat-dual-card__metrics {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.bat-metric-item {
    display: flex;
    flex-direction: column;
}
.bat-metric-item__val {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
}
.bat-metric-item__label {
    font-size: 11px;
    color: var(--text-subtle);
    font-weight: 500;
}

/* ── Sättigungshinweis Box ── */
.bat-saturation-box {
    background: var(--brand-bg);
    border: 1px solid var(--border-med);
    border-radius: 12px;
    padding: 14px 18px;
    margin-bottom: 24px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}
.bat-saturation-box i {
    color: var(--brand);
    flex-shrink: 0;
    margin-top: 2px;
}
.bat-saturation-box__title {
    font-size: 13px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 2px;
}
.bat-saturation-box__text {
    font-size: 12.5px;
    color: var(--text-med);
    line-height: 1.45;
    margin: 0;
}

/* ── Dachflächen Cards for Battery ── */
.bat-flaeche-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 12px;
}
.bat-flaeche-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.bat-flaeche-card__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
}

/* ──────────────────────── Legal Pages (Impressum & Datenschutz) ──────────────────────── */
.legal-container {
    max-width: 860px;
    margin: 40px auto 80px auto;
    padding: 0 24px;
}

.legal-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 40px 48px;
    box-shadow: var(--shadow-sm);
}

.legal-card h1 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.legal-card .legal-subtitle {
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 32px;
    border-bottom: 1px solid var(--border);
    padding-bottom: 16px;
}

.legal-card h2 {
    font-size: 19px;
    font-weight: 600;
    color: var(--text);
    margin-top: 32px;
    margin-bottom: 12px;
}

.legal-card h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text);
    margin-top: 24px;
    margin-bottom: 8px;
}

.legal-card p, .legal-card ul {
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--text-med);
    margin-bottom: 16px;
}

.legal-card ul {
    padding-left: 24px;
}

.legal-card li {
    margin-bottom: 6px;
}

.legal-card strong {
    color: var(--text);
}

.legal-placeholder-badge {
    display: inline-block;
    background: #FEF3C7;
    color: #92400E;
    font-weight: 600;
    font-size: 13px;
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid #FCD34D;
    margin: 2px 0;
}

.legal-callout {
    background: var(--bg-alt);
    border-left: 4px solid var(--brand);
    padding: 18px 22px;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    margin: 24px 0;
    font-size: 14px;
    color: var(--text-med);
    line-height: 1.6;
}

@media (max-width: 600px) {
    .legal-card {
        padding: 24px 20px;
    }
    .legal-card h1 {
        font-size: 24px;
    }
}

/* ──────────────────────── Results Disclaimer Box ──────────────────────── */
.results-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    margin-top: 24px;
    font-size: 12.5px;
    line-height: 1.55;
    color: var(--text-med);
    scroll-margin-top: 80px;
}

:root[data-theme="dark"] .results-disclaimer {
    background: var(--surface-2);
    border-color: var(--border-med);
    color: var(--text-med);
}

.results-disclaimer__icon {
    flex-shrink: 0;
    color: var(--brand);
    margin-top: 2px;
}

.results-disclaimer__icon svg {
    width: 18px;
    height: 18px;
}

.results-disclaimer__text strong {
    display: block;
    color: var(--text);
    font-size: 13px;
    margin-bottom: 4px;
}

/* ── Sub-KPI Asterisk Disclaimer ── */
.kpi-disclaimer-note {
    font-size: 11.5px;
    color: var(--text-muted);
    margin-top: 8px;
    margin-bottom: 20px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.kpi-disclaimer-link {
    color: var(--brand);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.15s ease;
}

.kpi-disclaimer-link:hover {
    color: var(--brand-hover);
    text-decoration: underline;
}

@media (max-width: 600px) {
    .results-disclaimer {
        padding: 14px 16px;
        font-size: 12px;
        gap: 10px;
    }
    .kpi-disclaimer-note {
        font-size: 11px;
        margin-top: 6px;
        margin-bottom: 16px;
    }
}

/* ──────────────────────── Error Pages (404 / 500) ──────────────────────── */
.error-page-container {
    max-width: 680px;
    margin: 80px auto;
    padding: 0 24px;
    text-align: center;
}

.error-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 48px 36px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.error-badge {
    display: inline-block;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--brand);
    background: var(--brand-bg);
    padding: 6px 16px;
    border-radius: 100px;
    margin-bottom: 20px;
}

.error-badge--warn {
    color: var(--neg);
    background: var(--neg-bg);
}

.error-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--text);
    margin-bottom: 12px;
    line-height: 1.35;
}

.error-desc {
    font-size: 14.5px;
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: 30px;
}

.error-actions {
    display: flex;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.error-rechner-box {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 22px;
    text-align: center;
}

.error-rechner-box h4 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 14px;
}

.error-rechner-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
}

.error-rechner-links a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: #FFFFFF;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-med);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.error-rechner-links a:hover {
    border-color: var(--brand);
    color: var(--brand);
    transform: translateY(-1px);
}

@media (max-width: 600px) {
    .error-card {
        padding: 32px 18px;
    }
    .error-title {
        font-size: 20px;
    }
    .error-actions {
        flex-direction: column;
    }
    .error-rechner-links {
        flex-direction: column;
    }
}

/* ──────────────────────── Feedback Widget & Modal ──────────────────────── */
.feedback-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 999;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--brand);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: 0 4px 16px rgba(29, 78, 216, 0.32), 0 2px 6px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, background 0.2s ease;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

.feedback-fab:hover {
    background: var(--brand-hover);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(29, 78, 216, 0.42);
}

.feedback-fab:active {
    transform: translateY(0);
}

.feedback-fab__icon {
    width: 17px;
    height: 17px;
    stroke-width: 2.2;
}

/* Modal Overlay */
.feedback-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.feedback-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    animation: feedbackFadeIn 0.2s ease-out;
}

.feedback-modal__card {
    position: relative;
    z-index: 1;
    background: var(--surface);
    width: 100%;
    max-width: 490px;
    border-radius: 16px;
    border: 1px solid var(--border);
    box-shadow: 0 20px 45px -10px rgba(15, 23, 42, 0.25);
    overflow: hidden;
    animation: feedbackCardIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes feedbackFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes feedbackCardIn {
    from { opacity: 0; transform: scale(0.96) translateY(8px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.feedback-modal__header {
    padding: 18px 22px;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.feedback-modal__title-wrap {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feedback-modal__icon-badge {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--brand-bg);
    color: var(--brand);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.feedback-modal__icon-badge svg {
    width: 20px;
    height: 20px;
}

.feedback-modal__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 2px 0;
}

.feedback-modal__sub {
    font-size: 12.5px;
    color: var(--text-muted);
    margin: 0;
    line-height: 1.4;
}

.feedback-modal__close-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    border-radius: 8px;
    color: var(--text-subtle);
    cursor: pointer;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.feedback-modal__close-btn:hover {
    background: var(--border);
    color: var(--text);
}

.feedback-modal__close-btn svg {
    width: 18px;
    height: 18px;
}

#feedback-form-container {
    padding: 22px;
}

/* Context Badge */
.feedback-context-box {
    background: #EFF6FF;
    border: 1px solid #BFDBFE;
    border-radius: 8px;
    padding: 8px 12px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #1E40AF;
}

.feedback-context-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
    flex-shrink: 0;
}

.feedback-context-label svg {
    width: 14px;
    height: 14px;
}

.feedback-context-val {
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Category Pills */
.feedback-categories {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.feedback-cat-pill {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
}

.feedback-cat-pill input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.feedback-cat-pill span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    border-radius: 100px;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-med);
    transition: all 0.15s ease;
}

.feedback-cat-pill span i,
.feedback-cat-pill span svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.2;
    flex-shrink: 0;
}

.feedback-cat-pill:hover span {
    border-color: var(--border-med);
    background: var(--surface-2);
}

.feedback-cat-pill.active span,
.feedback-cat-pill input[type="radio"]:checked + span {
    background: var(--brand-bg);
    border-color: var(--brand);
    color: var(--brand);
    font-weight: 600;
}

/* Textarea & Inputs */
.feedback-textarea {
    width: 100%;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    font-family: inherit;
    font-size: 13.5px;
    color: var(--text);
    resize: vertical;
    min-height: 95px;
    line-height: 1.5;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.feedback-textarea:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.feedback-contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}

.feedback-screenshot-row {
    background: var(--surface-alt, rgba(241, 245, 249, 0.5));
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

:root[data-theme="dark"] .feedback-screenshot-row {
    background: rgba(30, 41, 59, 0.5);
    border-color: var(--border-med);
}

.feedback-screenshot-row:hover {
    border-color: var(--brand);
}

.feedback-checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
}

.feedback-checkbox-label input[type="checkbox"] {
    margin-top: 2px;
    width: 16px;
    height: 16px;
    accent-color: var(--brand);
    cursor: pointer;
    flex-shrink: 0;
}

.feedback-checkbox-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--text);
    line-height: 1.35;
}

.feedback-checkbox-text strong {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--text);
}

.feedback-checkbox-text strong svg {
    width: 14px;
    height: 14px;
    color: var(--brand);
}

.feedback-checkbox-text small {
    font-size: 11.5px;
    color: var(--text-muted);
    font-weight: 400;
    line-height: 1.4;
}

.feedback-privacy-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    color: var(--text-muted);
    margin-bottom: 20px;
}

.feedback-privacy-note svg {
    width: 14px;
    height: 14px;
    color: var(--pos);
    flex-shrink: 0;
}

.feedback-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}

.feedback-actions .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    font-size: 13.5px;
}

.feedback-actions .btn-primary svg {
    width: 15px;
    height: 15px;
}

.feedback-actions .btn-secondary {
    padding: 9px 16px;
    font-size: 13.5px;
}

.feedback-inline-error {
    color: var(--neg);
    font-size: 12px;
    font-weight: 500;
    margin-top: 6px;
}

/* Success Screen */
.feedback-success {
    padding: 40px 24px;
    text-align: center;
    animation: feedbackFadeIn 0.2s ease-out;
}

.feedback-success__icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #DCFCE7;
    color: #15803D;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px auto;
}

.feedback-success__icon svg {
    width: 30px;
    height: 30px;
}

.feedback-success h4 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 8px 0;
}

.feedback-success p {
    font-size: 13.5px;
    color: var(--text-muted);
    line-height: 1.55;
    margin: 0 auto;
    max-width: 360px;
}

@media (max-width: 600px) {
    .feedback-fab {
        bottom: max(16px, env(safe-area-inset-bottom, 16px));
        right: max(16px, env(safe-area-inset-right, 16px));
        padding: 8px 14px;
        font-size: 12.5px;
    }
    .feedback-modal {
        padding: 12px;
    }
    .feedback-modal__card {
        max-height: calc(100dvh - 28px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 14px;
    }
    .feedback-contact-row {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    #feedback-form-container {
        padding: 18px 16px;
    }
}







/* ==========================================================================
   EEG 2027 Direktvermarktung Module & UI Components
   ========================================================================== */
.eeg2027-card {
    background: var(--surface-2);
    border: 1px solid var(--border-med);
    border-radius: var(--radius-md, 12px);
    padding: 16px 18px;
    margin-top: 1.25rem;
    transition: all var(--transition-normal, 0.2s ease);
}

.eeg2027-header {
    border-bottom: 1px solid var(--border);
    padding-bottom: 12px;
    margin-bottom: 14px;
}

.eeg2027-header__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--brand-bg);
    color: var(--brand);
    border: 1px solid var(--border-med);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    margin-bottom: 8px;
}

.eeg2027-header__badge svg,
.eeg2027-header__badge i {
    width: 14px;
    height: 14px;
}

.eeg2027-header__note {
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.5;
    margin: 0;
}

.eeg2027-header__note strong {
    color: var(--text);
}

.eeg2027-hint-banner {
    background: var(--warn-bg);
    border: 1px solid var(--warn-border);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 11.5px;
    color: var(--warn-text);
    line-height: 1.4;
    margin-top: 10px;
}

.eeg2027-pill-tag {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
}

.eeg2027-pill-tag--bonus {
    background: var(--pos-bg);
    color: var(--pos);
    border: 1px solid var(--pos-border);
}

.eeg2027-pill-tag--transition {
    background: var(--warn-bg);
    color: var(--warn-text);
    border: 1px solid var(--warn-border);
}

/* ── Dark Mode Component Refinements ── */
:root[data-theme="dark"] select {
    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='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] input[type=range].sim-range::-webkit-slider-runnable-track {
    background: var(--border-med);
}

:root[data-theme="dark"] input[type=range].sim-range::-moz-range-track {
    background: var(--border-med);
}

:root[data-theme="dark"] .tooltip::after {
    background: #1E293B;
    border: 1px solid #334366;
    color: #F8FAFC;
}

:root[data-theme="dark"] .tooltip::before {
    border-top-color: #334366;
}

:root[data-theme="dark"] .feedback-context-box {
    background: rgba(59, 130, 246, 0.12);
    border-color: rgba(59, 130, 246, 0.3);
    color: #93C5FD;
}


/* ==========================================================================
   Print Styles – @media print
   Blendet Navigation, Buttons und UI-Elemente aus; optimiert Ergebnisseiten
   ========================================================================== */
@media print {
    /* Globale Basis */
    *,
    *::before,
    *::after {
        box-shadow: none !important;
        text-shadow: none !important;
    }

    body {
        font-size: 12pt;
        color: #000;
        background: #fff;
    }

    /* Ausblenden: Navigation, Buttons, Wizards, Feedback-Widget */
    .site-header,
    .site-nav,
    .site-footer,
    .feedback-btn,
    .feedback-modal,
    .wizard-nav,
    .wizard-progress,
    .s-tabs,
    .btn,
    button,
    .simulator-panel,
    .premium-preview,
    .loading-view,
    #wizard-view,
    #pv-wizard-view,
    #batterie-wizard-view,
    .hero,
    .faq-section,
    .how-section,
    .why-section,
    .tools-section,
    .tooltip,
    [data-tooltip] {
        display: none !important;
    }

    /* Ergebnisseiten vollständig anzeigen */
    #results-view,
    #pv-results-view,
    #batterie-results-view {
        display: block !important;
        width: 100% !important;
    }

    /* Karten ohne Schatten, seitenbreite Darstellung */
    .card,
    .result-card,
    .dashboard-card,
    .kpi-card {
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 12pt;
    }

    /* Seitenumbrüche vor Hauptergebnis-Sektionen */
    .results-grid,
    .pv-results-grid,
    .bat-results-grid {
        page-break-before: avoid;
    }

    /* Diagramme: maximal seitenbreit, nicht abschneiden */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* Links: URL nach dem Text ausgeben */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 9pt;
        color: #555;
    }

    /* Keine URL bei internen Anker-Links */
    a[href^="#"]::after {
        content: "";
    }
}