@media (max-width: 480px) {
    :root {
        --ratio: calc(720 / 2560);
    }
}

@media (min-width: 481px) and (max-width: 767px) {
    :root {
        --ratio: calc(900 / 2560);
    }
}

@media (min-width: 768px) and (max-width: 1439px) {
    :root {
        --ratio: calc(1280 / 2560);
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    :root {
        --ratio: calc(1440 / 2560);
    }
}

@media (min-width: 1920px) {
    :root {
        --ratio: calc(1920 / 2560);
    }
}

@media (min-width: 2560px) {
    :root {
        --ratio: 1;
    }
}

/* SIZING */
:root {
    --size-2xs: calc(48px * var(--ratio));
    --size-xs: calc(96px * var(--ratio));
    --size-sm: calc(192px * var(--ratio));
    --size-md: calc(288px * var(--ratio));
    --size-lg: calc(384px * var(--ratio));
    --size-xl: calc(480px * var(--ratio));
    --size-2xl: calc(576px * var(--ratio));
    --size-3xl: calc(672px * var(--ratio));
    --size-4xl: calc(768px * var(--ratio));
    --size-5xl: calc(864px * var(--ratio));
    --size-6xl: calc(960px * var(--ratio));
    --size-7xl: calc(1056px * var(--ratio));
    --size-8xl: calc(1152px * var(--ratio));
    --size-9xl: calc(1248px * var(--ratio));
    --size-10xl: calc(1344px * var(--ratio));

    --icon-2xs: calc(16px * var(--ratio));
    --icon-xs: calc(20px * var(--ratio));
    --icon-sm: calc(32px * var(--ratio));
    --icon-md: calc(44px * var(--ratio));
    --icon-lg: calc(60px * var(--ratio));
    --icon-xl: calc(72px * var(--ratio));
    --icon-2xl: calc(84px * var(--ratio));

    --thumbnail-2xs: calc(20px * var(--ratio));
    --thumbnail-xs: calc(40px * var(--ratio));
    --thumbnail-sm: calc(80px * var(--ratio));
    --thumbnail-md: calc(120px * var(--ratio));
    --thumbnail-lg: calc(160px * var(--ratio));
    --thumbnail-xl: calc(200px * var(--ratio));
    --thumbnail-2xl: calc(240px * var(--ratio));
    --thumbnail-3xl: calc(280px * var(--ratio));
    --thumbnail-4xl: calc(320px * var(--ratio));
    --thumbnail-5xl: calc(360px * var(--ratio));

    --rounded-2xs: calc(5px * var(--ratio));
    --rounded-xs: calc(10px * var(--ratio));
    --rounded-sm: calc(20px * var(--ratio));
    --rounded-md: calc(25px * var(--ratio));
    --rounded-lg: calc(28px * var(--ratio));
    --rounded-xl: calc(38px * var(--ratio));
    --rounded-2xl: calc(48px * var(--ratio));
    --rounded-3xl: calc(58px * var(--ratio));

    --line-xs: 1px;
    --line-sm: 2px;
    --line-md: 3px;
    --line-lg: 4px;
    --line-xl: 6px;
    --line-2xl: 8px;

    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 1px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* SPACING & TYPOGRAPHY */
:root {
    --space-3xs: calc(8px * var(--ratio));
    --space-2xs: calc(12px * var(--ratio));
    --space-xs: calc(20px * var(--ratio));
    --space-sm: calc(40px * var(--ratio));
    --space-md: calc(80px * var(--ratio));
    --space-lg: calc(120px * var(--ratio));
    --space-xl: calc(200px * var(--ratio));
    --space-2xl: calc(320px * var(--ratio));

    --text-3xs: calc(1rem * var(--ratio));
    --text-2xs: calc(1.2rem * var(--ratio));
    --text-xs: calc(1.4rem * var(--ratio));
    --text-sm: calc(1.6rem * var(--ratio));
    --text-md: calc(1.8rem * var(--ratio));
    --text-lg: calc(2rem * var(--ratio));
    --text-xl: calc(2.2rem * var(--ratio));
    --text-2xl: calc(2.4rem * var(--ratio));

    --heading-xs: calc(2rem * var(--ratio));
    --heading-sm: calc(2.6rem * var(--ratio));
    --heading-md: calc(3.2rem * var(--ratio));
    --heading-lg: calc(3.8rem * var(--ratio));
    --heading-xl: calc(4.4rem * var(--ratio));
    --heading-2xl: calc(5rem * var(--ratio));
}

/* HIGHLIGHT COLORS */
:root {
    --primary-color: #D82F5A;
    --secondary-color: #00009A;
    --tertiary-color: #2121D5;
    --quaternary-color: #E8E800;

    --bad-color: #D84A4A;
    --mid-color: #D88A2F;
    --good-color: #27AE60;

    --positive-color: #39AC30;
}

/* INVARIANT COLORS */
:root {
    --base-color-invariant: #14101C;
    --dim-color-invariant: #92929D;
    --deep-color-invariant: #2E2E3B;
    --dark-color-invariant: #1A2229;
    --light-color-invariant: #A9B0BE;
    --bright-color-invariant: #E2E2E2;
    --subtle-color-invariant: #7C7C87;
}

/* DARK THEME */
:root {
    --bg-color-primary: var(--base-color-invariant);
    --bg-color-secondary: #1C1C24;

    --accent-color-primary: #3A3A4B;
    --accent-color-secondary: var(--deep-color-invariant);
    --accent-color-tertiary: #22222B;

    --fg-color-primary: #FFFFFF;
    --fg-color-highlight: var(--primary-color);
}

/* LIGHT THEME */
:root[data-theme="light"] {
    --bg-color-primary: #FFFFFF;
    --bg-color-secondary: #F8F8F8;

    --accent-color-primary: #DCDCE1;
    --accent-color-secondary: #E6E6EA;
    --accent-color-tertiary: #EFEFF2;

    --fg-color-primary: var(--base-color-invariant);
    --fg-color-highlight: var(--secondary-color);
}

/* REDESIGN — shared tokens for redesigned pages (dark-first) */
:root {
    --bg: #0B0B0E;
    --surface: #15161B;
    --surface-2: #1B1D24;
    --surface-3: #212430;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);

    --text: #F4F5F7;
    --text-dim: #A7ABB6;
    --text-mute: #71757F;

    --magenta: #FF6E92;

    --r-sm: 4px;
    --r: 6px;
    --r-md: 10px;
    --r-lg: 16px;
    --r-xl: 22px;

    --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -24px rgba(0, 0, 0, .8);
    --shadow-pop: 0 30px 70px -30px rgba(0, 0, 0, .85);

    --ease: cubic-bezier(.22, .61, .36, 1);

    --fg: var(--text);
    --fg-2: rgba(244, 244, 246, .84);
    --fg-3: rgba(244, 244, 246, .62);
    --fg-4: rgba(244, 244, 246, .42);
    --bg-2: #0F1014;
    --bg-3: #15161B;
    --primary-soft: rgba(216, 47, 90, .16);
    --primary-soft-2: rgba(216, 47, 90, .08);

    /* Grundfarbe feiner Linien und Tönungen: rgba(var(--ink), .06) */
    --ink: 255, 255, 255;

    color-scheme: dark;
}

/* REDESIGN — heller Modus, nur Token-Überschreibungen (Werte aus dem [data-theme="light"]-Block von
   iab.css bzw. Home-standalone der Exporte). Gilt für die ganze Anwendung; Abschnitte auf Fotos
   behalten ihre dunkle Abdunklung. */
:root[data-theme="light"] {
    color-scheme: light;

    --fg: #14151A;
    --fg-2: rgba(20, 21, 26, .84);
    --fg-3: rgba(20, 21, 26, .60);
    --fg-4: rgba(20, 21, 26, .42);
    --bg-2: #FFFFFF;
    --bg-3: #E6E8EE;
    --primary-soft: rgba(216, 47, 90, .12);
    --primary-soft-2: rgba(216, 47, 90, .06);

    --ink: 15, 18, 30;

    --bg: #EEF0F4;
    --surface: #FFFFFF;
    --surface-2: #F6F7FA;
    --surface-3: #ECEEF3;
    --line: rgba(15, 18, 30, .10);
    --line-strong: rgba(15, 18, 30, .18);

    --text: #14151A;
    --text-dim: rgba(20, 21, 26, .60);
    --text-mute: rgba(20, 21, 26, .42);

    --shadow-card: 0 22px 50px -30px rgba(20, 24, 40, .35);
    --shadow-pop: 0 30px 70px -30px rgba(20, 24, 40, .40);

    /* Akzentschrift: Grün, Gold und Magenta des dunklen Entwurfs sind auf Weiß kaum lesbar.
       Seiten schreiben color: var(--green-ink, #4ade80) — im Dunkeln greift der Rückfallwert. */
    --magenta: var(--primary-color);
    --green-ink: #1A962B;
    --amber-ink: #B7791F;
}

/* Die Portale folgen ihrem eigenen hellen Entwurf, der die Akzentfarben unverändert lässt. */
:root[data-theme="light"] .ds-app {
    --magenta: #FF6E92;
    --green-ink: initial;
    --amber-ink: initial;
}

/* Die dunkle Kontur der Überschriften lässt dunkle Schrift auf hellem Grund doppelt wirken. */
:root[data-theme="light"] .headline,
:root[data-theme="light"] .headline :is(b, strong, em, .red) {
    -webkit-text-stroke: 0;
}

:root[data-theme="light"] .rs-dark .headline:not(.headline--flat) {
    -webkit-text-stroke: var(--line-xs) color-mix(in srgb, currentColor, black 50%);
}

/* Abschnitte, die auch im hellen Modus dunkel bleiben (Foto-Heros, Express-Karten, dunkle
   Verläufe): stellt dort die dunklen Token wieder her. */
:root[data-theme="light"] .rs-dark {
    color: var(--text);
    color-scheme: dark;

    --bg: #0B0B0E;
    --surface: #15161B;
    --surface-2: #1B1D24;
    --surface-3: #212430;
    --line: rgba(255, 255, 255, .09);
    --line-strong: rgba(255, 255, 255, .16);

    --text: #F4F5F7;
    --text-dim: #A7ABB6;
    --text-mute: #71757F;
    --magenta: #FF6E92;

    --fg: #F4F5F7;
    --fg-2: rgba(244, 244, 246, .84);
    --fg-3: rgba(244, 244, 246, .62);
    --fg-4: rgba(244, 244, 246, .42);
    --bg-2: #0F1014;
    --bg-3: #15161B;
    --primary-soft: rgba(216, 47, 90, .16);
    --primary-soft-2: rgba(216, 47, 90, .08);
    --ink: 255, 255, 255;

    --green-ink: initial;
    --amber-ink: initial;

    --shadow-card: 0 1px 0 rgba(255, 255, 255, .03) inset, 0 18px 40px -24px rgba(0, 0, 0, .8);
    --shadow-pop: 0 30px 70px -30px rgba(0, 0, 0, .85);
}

/* REDESIGN — page scaffolding shared by redesigned pages */
.rs-page {
    width: 100%;
    background: var(--bg);
    color: var(--text);
}

.rs-page section.page-section {
    margin-bottom: 0;
}

.rs-page .red {
    color: var(--primary-color);
    text-transform: none;
}

.rs-brand {
    text-transform: none;
}

.rs-page .mute {
    color: var(--text-mute);
}

.rs-container {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: 28px;
}

.rs-intro {
    box-sizing: content-box;
    max-width: 760px;
    margin: 0 auto 52px;
    padding-inline: 28px;
    text-align: center;
}

.rs-headline {
    display: block;
    margin-top: 14px;
    line-height: 1.12;
    letter-spacing: -.4px;

    /* Deutsche Zusammensetzungen sprengen am Telefon jede Spalte: „Investitionsabzugsbetrag"
       ragte auf /IAB 23 Pixel über den Rand und wurde abgeschnitten. Die Silbentrennung
       greift, seit die Seite ihre Sprache nennt (Punkt 56). */
    overflow-wrap: break-word;
    hyphens: auto;
}

.rs-intro .rs-headline .headline {
    font-size: clamp(25px, 2.9vw, 37px);
}

.rs-lead {
    max-width: 58ch;
    margin: 14px auto 0;
    font-size: clamp(14.5px, 1.2vw, 16.5px);
    font-weight: 300;
    color: var(--text-dim);
}

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

.rs-table {
    overflow: hidden;
    background: var(--surface);
    border: var(--line-xs) solid var(--line);
    border-radius: var(--r-lg);
}

.rs-page .rs-eyebrow-blue .eyebrow {
    color: #9a93ff !important;
    border-color: rgba(90, 82, 255, .4) !important;
    background-color: rgba(90, 82, 255, .09) !important;
}

.rs-page .rs-eyebrow-ghost .eyebrow {
    border-color: var(--line) !important;
    background-color: transparent !important;
}

.rs-form-card {
    padding: 32px;
    background: var(--surface);
    border: var(--line-xs) solid var(--line-strong);
    border-radius: var(--r-lg);
    box-shadow: var(--shadow-card);

    --bg-color-primary: var(--bg);
    --bg-color-secondary: var(--surface-2);
    --accent-color-primary: #3A3A4B;
    --accent-color-secondary: var(--line-strong);
    --accent-color-tertiary: var(--bg);
    --fg-color-primary: var(--text);
    --dim-color-invariant: var(--text-mute);
    --subtle-color-invariant: var(--text-dim);
}

.rs-form-card .custom-input-wrapper {
    gap: 7px;
}

.rs-form-card .custom-input {
    gap: 0;
    border-radius: var(--r);
}

.rs-form-card .custom-input:focus-within {
    --accent-color-secondary: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(216, 47, 90, .16);
}

.rs-form-card .custom-input__label {
    font-size: 13px;
}

.rs-form-card .custom-input__field {
    padding: 12px 0;
    font-size: 15px;
}

.rs-form-card .custom-input__placeholder,
.rs-form-card .custom-input__currency-mirror {
    font-size: 15px;
}

.rs-form-card .custom-input__side {
    min-width: 0;
}

.rs-form-card .custom-input__side--left {
    padding-left: 14px;
}

.rs-form-card .custom-input:not(.custom-input--file) .custom-input__side--right {
    padding-right: 14px;
}

@media (max-width: 640px) {
    .rs-container,
    .rs-intro {
        padding-inline: 20px;
    }
}

@media (max-width: 560px) {
    .rs-field-row {
        grid-template-columns: 1fr;
    }
}

/* Ungültige Eingaben sehen auf jeder Seite gleich aus: rote Kontur mit leichtem Schein, die Meldung
   in Rot darunter bzw. am Label. Nach einem Absendeversuch wackeln sie kurz (FlashInvalid in value.js).
   !important, weil Rahmenfarben der Felder teils inline aus Parametern kommen. */
.field-invalid {
    border-color: var(--bad-color) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--bad-color) 18%, transparent) !important;
}

.field-error {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    color: var(--bad-color);
}

.field-flash {
    animation: field-flash .4s ease;
}

@keyframes field-flash {
    20%, 60% {
        transform: translateX(-4px);
    }

    40%, 80% {
        transform: translateX(4px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .field-flash {
        animation: none;
    }
}

/* REDESIGN — reveal on scroll (Reveal.Attach in reveal.js) */
.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s var(--ease), transform .7s var(--ease);
}

.rv.in {
    opacity: 1;
    transform: none;
}

.rv.d1 {
    transition-delay: .08s;
}

.rv.d2 {
    transition-delay: .16s;
}

.rv.d3 {
    transition-delay: .24s;
}

.rv.d4 {
    transition-delay: .32s;
}

@media (prefers-reduced-motion: reduce) {
    .rv {
        opacity: 1;
        transform: none;
        transition: none;
    }
}


/* GLOBAL */

* {
    font-family: 'Poppins', sans-serif;
    box-sizing: border-box;

    scrollbar-color: var(--accent-color-primary) transparent;
}

body {
    display: flex;
    flex-direction: column;
    max-width: 100vw;
    margin: 0;
    padding: 0;
    font-size: var(--text-xs);
    background-color: var(--bg-color-primary);
    color: var(--fg-color-primary);
}

body:has([data-overlay]) {
    overflow: hidden;
}


/* TYPOGRAPHY UTILITIES */

.text-3xs {
    font-size: var(--text-3xs);
}

.text-2xs {
    font-size: var(--text-2xs);
}

.text-xs {
    font-size: var(--text-xs);
}

.text-sm {
    font-size: var(--text-sm);
}

.text-md {
    font-size: var(--text-md);
}

.text-lg {
    font-size: var(--text-lg);
}

.text-xl {
    font-size: var(--text-xl);
}

.text-2xl {
    font-size: var(--text-2xl);
}

.extra-thin {
    font-weight: 100;
}

.light {
    font-weight: 200;
}

.thin {
    font-weight: 300;
}

.regular {
    font-weight: 400;
}

.medium {
    font-weight: 500;
}

.semi-bold {
    font-weight: 600;
}

.bold {
    font-weight: 700;
}

.extra-bold {
    font-weight: 800;
}

.heavy {
    font-weight: 900;
}

.highlight {
    color: var(--primary-color);
}

.contrast {
    filter: invert(1) grayscale(1) brightness(1.3) contrast(9000);
    mix-blend-mode: luminosity;
}

/* VISIBILITY UTILITIES */

@media (max-width: 767px) {
    .tablet-visible,
    .laptop-visible,
    .desktop-visible,
    .widescreen-visible,
    .mobile-hidden {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .mobile-visible,
    .laptop-visible,
    .desktop-visible,
    .widescreen-visible,
    .tablet-hidden {
        display: none !important;
    }
}

@media (min-width: 1024px) and (max-width: 1439px) {
    .mobile-visible,
    .tablet-visible,
    .desktop-visible,
    .widescreen-visible,
    .laptop-hidden {
        display: none !important;
    }
}

@media (min-width: 1440px) and (max-width: 1919px) {
    .mobile-visible,
    .tablet-visible,
    .laptop-visible,
    .widescreen-visible,
    .desktop-hidden {
        display: none !important;
    }
}

@media (min-width: 1920px) {
    .mobile-visible,
    .tablet-visible,
    .laptop-visible,
    .desktop-visible,
    .widescreen-hidden {
        display: none !important;
    }
}