/* Erzeugt von _werkzeuge/css-buendeln.js – nicht von Hand ändern.
   Quelle: css/style.css und die davon eingebundenen Module.
   Nach jeder Stiländerung neu bauen. */



:root {



    --bew-schnell: 140ms;


    --bew-normal: 240ms;


    --bew-ruhig: 420ms;


    --bew-endlos: 2400ms;


    --bew-mikro: 200ms;



    --bew-aufbau: 1000ms;
    --bew-abbau: 800ms;
    --bew-ankunft: 1500ms;




    --bew-rein: cubic-bezier(.16, .84, .44, 1);


    --bew-raus: cubic-bezier(.5, 0, .84, .16);


    --bew-beides: cubic-bezier(.4, 0, .2, 1);


    --bew-feder: cubic-bezier(.34, 1.56, .64, 1);


    --bew-knackig: cubic-bezier(.16, 1, .3, 1);




    --bew-standard:
        transform var(--bew-normal) var(--bew-beides),
        opacity var(--bew-normal) var(--bew-beides),
        color var(--bew-schnell) var(--bew-beides),
        background-color var(--bew-normal) var(--bew-beides),
        border-color var(--bew-normal) var(--bew-beides),
        box-shadow var(--bew-normal) var(--bew-beides);


    --bew-mikro-bund:
        transform var(--bew-mikro) var(--bew-knackig),
        opacity var(--bew-mikro) var(--bew-knackig),
        color var(--bew-mikro) var(--bew-knackig),
        background-color var(--bew-mikro) var(--bew-knackig),
        border-color var(--bew-mikro) var(--bew-knackig),
        box-shadow var(--bew-mikro) var(--bew-knackig),
        outline-color var(--bew-mikro) var(--bew-knackig);


    --bew-knopf: var(--bew-mikro-bund);
}



@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;

        animation-delay: 0s !important;
        transition-delay: 0s !important;
        scroll-behavior: auto !important;
    }


    .schwebt,
    [class*="float"],
    [class*="pulse"] {
        animation: none !important;
    }
}


:root.aerona-ohne-animation,
:root.aerona-ohne-animation *,
:root.aerona-ohne-animation *::before,
:root.aerona-ohne-animation *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

:root.aerona-ohne-animation .schwebt,
:root.aerona-ohne-animation [class*="float"],
:root.aerona-ohne-animation [class*="pulse"] {
    animation: none !important;
}




* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}


details:not([open])>*:not(summary) {
    display: none;
}

html {

    overflow-y: scroll !important;
    overflow-x: hidden !important;
    height: auto !important;
    background-color: color-mix(in srgb, var(--k-text) 2.4%, var(--k-grund));
    -webkit-font-smoothing: antialiased;
    scrollbar-gutter: stable;
}

:root {
    --primary-color: #3b82f6;
    --hero-theme-color: #3b82f6;
    --text-muted: #94a3b8;
    --bg-dark: #020617;
    --accent-glow: rgba(59, 130, 246, 0.3);
    --aerona-mono: 'Aerona Mono', monospace;
}

body {
    font-family: 'Aerona Sans', sans-serif;
    background-color: var(--bg-dark);
    background-image:
        radial-gradient(at 0% 0%, hsla(217, 100%, 10%, 1) 0, transparent 50%),
        radial-gradient(at 100% 100%, hsla(270, 100%, 5%, 1) 0, transparent 50%);

    background-attachment: scroll;
    color: white;
    line-height: 1.5;
    position: relative;


    width: 100%;
    height: auto !important;
    min-height: 100vh;
    overflow: visible !important;
}




.btn,
.btn-primary,
.btn-secondary,
.primary-glow,
.bento-card,
.glass-panel,
.platform-card,
.feature-card,
.dashboard-mockup,
.hero-image-container,
#aerona-scroll-progress,
#cursor-glow {
    will-change: transform;
}


#aerona-scroll-progress {
    will-change: transform;
}


body::before,
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}

body::before {
    background-image:
        radial-gradient(white, rgba(255, 255, 255, .2) 2px, transparent 40px),
        radial-gradient(white, rgba(255, 255, 255, .15) 1px, transparent 30px);
    background-size: 550px 550px, 350px 350px;
    opacity: 0.05;
    z-index: 1;
}

body::after {
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.02;
    z-index: 9999;
}

a {
    text-decoration: none;
    color: inherit;
}




.aerona-ohne-animation .hero h1,
.aerona-ohne-animation .hero p,
.aerona-ohne-animation .hero-version-badge {
    animation: none !important;
}


.aerona-ohne-animation .reveal-init {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

@media (prefers-reduced-motion: reduce) {


    .hero h1,
    .hero p,
    .hero-version-badge {
        animation: none !important;
    }


    .reveal-init,
    .reveal-init.revealed {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}





::selection {
    background: color-mix(in srgb, var(--k-text-leise) 35%, transparent);
    color: white;
}


html::-webkit-scrollbar {
    width: 10px;
}

html::-webkit-scrollbar-track {
    background: color-mix(in srgb, var(--k-text) 2.4%, var(--k-grund));
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, color-mix(in srgb, var(--k-verlauf-a) 20%, transparent), color-mix(in srgb, var(--k-verlauf-b) 20%, transparent));
    border-radius: 10px;
    border: 2px solid color-mix(in srgb, var(--k-text) 4.1%, var(--k-grund));
}

html::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, color-mix(in srgb, var(--k-verlauf-a) 40%, transparent), color-mix(in srgb, var(--k-verlauf-b) 40%, transparent));
}


#aerona-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--k-verlauf);
    z-index: 10000;
    box-shadow: -6px 0 10px -4px rgba(96, 165, 250, 0.5), 6px 0 10px -4px rgba(168, 85, 247, 0.5);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--bew-schnell) var(--bew-rein);
}


#scrollToTopBtn {
    position: fixed;
    bottom: 40px;

    inset-inline-end: 40px;
    width: 56px;
    height: 56px;
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 9%, var(--k-grund)) 60%, transparent);
    border: 1px solid;
    border-color: var(--k-glas-kante);
    border-radius: 18px;
    color: white;
    font-size: 1.4rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--bew-standard);
    z-index: 9990;
    opacity: 0;
    visibility: hidden;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.4);
}

#scrollToTopBtn.visible {
    opacity: 1;
    visibility: visible;
}





::selection {
    background: color-mix(in srgb, var(--k-text-leise) 35%, transparent);
    color: white;
}


.btn-primary,
.btn-secondary {
    padding: 1rem 2.2rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: var(--bew-mikro-bund);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.2px;
}


.btn-primary {
    background: var(--k-verlauf-tief);
    color: white;
    box-shadow:
        -8px 10px 25px -8px rgba(96, 165, 250, 0.3), 8px 10px 25px -8px rgba(168, 85, 247, 0.3),
        inset 0 1px 1px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}



.btn-primary,
.btn-secondary {
    padding: 1rem 2.2rem;
    border-radius: 16px;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: var(--bew-mikro-bund);
    border: none;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
    letter-spacing: -0.2px;
}

.btn-primary {
    background: var(--k-verlauf-tief);
    color: white;
    box-shadow: -8px 10px 25px -8px rgba(96, 165, 250, 0.3), 8px 10px 25px -8px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}








.site-header {
    height: 72px;
    padding: 0 2.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: 95%;
    max-width: 1400px;
    border-radius: 100px;
    z-index: 2000;
    transition: var(--bew-standard);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
    overflow: visible;
}


.mobile-nav-header,
.mobile-close-btn,
.mobile-extras-container,
.mobile-toggle,
.mobile-close-btn-alt {
    display: none !important;
}



nav.main-nav {
    display: none;
    flex: 1;
    justify-content: center;
    position: relative;
    z-index: 2;
}

@media (min-width: 900px) {
    nav.main-nav {
        display: flex;
        gap: 0.5rem;
    }

    nav.main-nav a {
        color: var(--k-text-leise);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 100px;
        transition: var(--bew-mikro-bund);
        white-space: nowrap;
    }

    nav.main-nav a.active {
        color: white;
        background: var(--k-verlauf-tief);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.2),
            0 8px 16px rgba(29, 78, 216, 0.3);
        padding: 8px 22px;
    }


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

    .dropdown-trigger {
        color: var(--k-text-leise);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 700;
        padding: 8px 18px;
        border-radius: 100px;
        transition: var(--bew-mikro-bund);
        cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
        background: transparent;
        border: none;
        display: flex;
        align-items: center;
        gap: 6px;
    }

    .dropdown-trigger.active {
        color: white;
        background: var(--k-verlauf-tief);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, 0.2),
            0 8px 16px rgba(29, 78, 216, 0.3);
    }

    .dropdown-content {
        position: absolute;

        top: 100%;
        left: 50%;

        transform: translateX(-50%);

        background: color-mix(in srgb, var(--k-text) 7.1%, var(--k-grund));

        border: 1px solid;
        border-color: var(--k-glas-kante);
        border-top: 2px solid color-mix(in srgb, var(--k-text) 20%, transparent);

        border-radius: 24px;
        min-width: 220px;
        box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 20px rgba(59, 130, 246, 0.1);
        opacity: 0;
        visibility: hidden;
        padding: 12px;
        z-index: 2100;


        transition:
            opacity var(--bew-normal) var(--bew-beides) var(--bew-normal),
            visibility 0s linear var(--bew-normal);
    }

    .dropdown-content a {
        display: block !important;
        padding: 10px 16px !important;
        color: var(--k-text-leise) !important;
        font-size: 0.85rem !important;
        border-radius: 12px !important;
        transition: var(--bew-mikro-bund);
        background: transparent !important;
        box-shadow: none !important;
    }

    .dropdown-content a.active {
        color: var(--k-text) !important;
        background: color-mix(in srgb, var(--k-text) 8%, transparent) !important;
        font-weight: 800 !important;
    }


    .dropdown-content a[href="showcase.html"] {
        font-weight: 700;
        letter-spacing: 0.5px;
    }
}


.dropdown-content a.lost-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem;
    color: var(--k-text) !important;
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--k-text) 4%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--k-text) 9%, transparent);
}

.dropdown-content a.lost-nav-link::after {
    content: "NEU";
    background: var(--k-verlauf-tief);
    color: white;
    font-size: 0.65rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(139, 92, 246, 0.5);
}

.dropdown-content a.neu-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.75rem;
}

.dropdown-content a.neu-nav-link::after {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--k-gut);
    flex-shrink: 0;
}


.dropdown-content.dd-mega {
    display: grid;
    grid-template-columns: repeat(4, minmax(min(100%, 165px), 1fr));
    gap: 0.3rem 0.6rem;
    align-items: start;
}

.dd-col {
    display: flex;
    flex-direction: column;
}

.dd-title {
    padding: 6px 16px 4px;
    color: var(--k-text-still);
    font-size: 0.66rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    white-space: nowrap;
}

.dropdown-content a.web-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    color: var(--k-signal) !important;
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--k-signal) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--k-signal) 20%, transparent);
}

.dropdown-content a.web-nav-link::after {
    content: "NEU";
    background: var(--k-signal);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}

.dropdown-content a.research-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    color: var(--k-text) !important;
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--k-text) 4%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--k-text) 8%, transparent);
    margin-bottom: 4px;
}

.dropdown-content a.research-nav-link::after {
    content: "FORSCHUNG";
    background: var(--k-verlauf-tief);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.5);
}

.dropdown-content.dd-mega--3 {
    grid-template-columns: repeat(4, minmax(min(100%, 185px), 1fr));
}

.dd-col {
    min-width: 0;
}

.dropdown-content a.web-nav-link,
.dropdown-content a.research-nav-link,
.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link,
.dropdown-content a.neu-nav-link {
    min-width: 0;
    flex-direction: column;

    align-items: stretch !important;
    justify-content: center !important;
    row-gap: 5px;
    font-size: 0.82rem;
    line-height: 1.35;

    white-space: normal;
    overflow-wrap: anywhere;
}

.dropdown-content a.web-nav-link::after,
.dropdown-content a.research-nav-link::after,
.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after {
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-start;
}

.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem;
    color: var(--k-signal) !important;
    font-weight: 700 !important;
    background: color-mix(in srgb, var(--k-signal) 10%, transparent) !important;
    border: 1px solid color-mix(in srgb, var(--k-signal) 20%, transparent);
}

.dropdown-content a.about-nav-link::after {
    content: "NEU";
}

.dropdown-content a.inventor-nav-link::after {
    content: "KEVIN WAGNER";
}

.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after {
    background: var(--k-signal);
    color: white;
    font-size: 0.6rem;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    box-shadow: 0 0 8px rgba(249, 115, 22, 0.5);
}


.dropdown-content a.web-nav-link,
.dropdown-content a.research-nav-link,
.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link,
.dropdown-content a.neu-nav-link,
.dropdown-content a.lost-nav-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem;

    background: transparent !important;
    border: none !important;
    border-radius: 8px !important;
    margin-bottom: 0 !important;

    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    white-space: normal !important;
    overflow-wrap: anywhere;
    min-width: 0;
}

.dropdown-content a.research-nav-link::after,
.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after,
.dropdown-content a.web-nav-link::after,
.dropdown-content a.neu-nav-link::after {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    margin-left: auto;
    flex-shrink: 0;
    align-self: center;
    background: var(--k-text-leise);
    padding: 0;
    box-shadow: none;
    letter-spacing: normal;
    font-size: 0;
}

.dropdown-content a.research-nav-link::after {
    background: var(--k-verlauf);
}

.dropdown-content a.about-nav-link::after,
.dropdown-content a.inventor-nav-link::after {
    background: var(--k-signal);
}

.dropdown-content a.neu-nav-link::after,
.dropdown-content a.web-nav-link::after {
    background: var(--k-gut);
}

.dd-legende {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem;
    margin-top: 0.6rem;
    padding-top: 0.85rem;
    border-top: 1px solid color-mix(in srgb, var(--k-text-leise) 12%, transparent);
    color: var(--k-text-still);
    font-size: 0.72rem;
    font-weight: 600;
}

.dd-legende span {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.dd-legende span::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dd-legende .lg-forschung::before {
    background: var(--k-verlauf);
}

.dd-legende .lg-neu::before {
    background: color-mix(in srgb, var(--k-gut) 45%, var(--k-text));
}

.dd-legende .lg-ueber::before {
    background: color-mix(in srgb, var(--k-signal) 55%, var(--k-text));
}

.dropdown-content.dd-mega {
    grid-template-columns: repeat(4, minmax(min(100%, 200px), 1fr));
}

.dropdown-content.dd-mega--3 {
    grid-template-columns: repeat(4, minmax(min(100%, 200px), 1fr));
}

.dropdown-content a {
    font-size: 0.83rem;
}

.dropdown-content a.web-nav-link,
.dropdown-content a.research-nav-link,
.dropdown-content a.about-nav-link,
.dropdown-content a.inventor-nav-link,
.dropdown-content a.neu-nav-link,
.dropdown-content a.lost-nav-link {
    font-size: 0.83rem !important;
}




@media (max-width: 900px) {


    .hamburger-icon {
        width: 24px;
        height: 18px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        pointer-events: none;

    }

    .hamburger-icon span {
        display: block;
        width: 100%;
        height: 2px;
        background-color: var(--k-text);
        border-radius: 2px;

        transition: var(--bew-mikro-bund);
    }




    .site-header {
        top: 0 !important;
        left: 0 !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 54px !important;
        padding: 0.5rem 0.75rem !important;
        border-radius: 0 !important;
        border: none !important;

        border-bottom: 1px solid var(--k-rand-dicke) !important;
        background:
            linear-gradient(var(--k-menue), var(--k-menue)),
            var(--k-grund) !important;

        justify-content: space-between !important;
        position: fixed !important;
        z-index: 10000 !important;
    }


    .mobile-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;

        width: 36px;
        min-width: 36px;

        height: 36px;
        flex-shrink: 0 !important;
        background: transparent;
        border: none;
        color: var(--k-text) !important;
        font-size: 1.4rem;
        margin-left: 4px !important;
    }
}


:root[data-thema="hell"] .bg-blobs {
    z-index: 0;
}

:root.aerona-ohne-animation #music-progress {
    transition-duration: .01ms !important;
}

@media (prefers-reduced-motion: reduce) {
    :root #music-progress {
        transition-duration: .01ms !important;
    }
}




footer {
    background: radial-gradient(circle at 50% 100%, color-mix(in srgb, var(--k-akzent) 5%, transparent), transparent 70%), color-mix(in srgb, var(--k-text) 2.4%, var(--k-grund));
    padding: 6rem 2rem 2rem 2rem;
    position: relative;
    margin-top: 10rem;
    overflow: hidden;
}


footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(90deg,
            transparent 0%,
            color-mix(in srgb, var(--k-verlauf-a) 0%, transparent) 20%,
            color-mix(in srgb, var(--k-verlauf-a) 50%, transparent) 40%,
            color-mix(in srgb, var(--k-verlauf-b) 50%, transparent) 60%,
            color-mix(in srgb, var(--k-verlauf-b) 0%, transparent) 80%,
            transparent 100%);
    box-shadow: -40px 0 20px -10px rgba(96, 165, 250, 0.25), 40px 0 20px -10px rgba(168, 85, 247, 0.25);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;

    grid-template-columns: 1.4fr repeat(5, 1fr);
    gap: 3rem;
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    position: relative;
    z-index: 2;
}

.footer-col h3 {
    margin-bottom: 2rem;
    color: white;
    font-size: 0.9rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.footer-col a {
    display: block;
    color: var(--k-text-leise);
    text-decoration: none;
    margin-bottom: 1rem;
    font-size: 0.95rem;
    font-weight: 500;
    transition: var(--bew-mikro-bund);
}


.brand-col .footer-brand {
    font-size: 1.8rem;
    font-weight: 950;
    color: white;
    letter-spacing: -1.5px;
    margin-bottom: 1rem;
    display: block;
}

.brand-col p {
    color: var(--k-text-still);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 2rem;
    max-width: 300px;
}






.footer-bottom {
    max-width: 1400px;
    margin: 3rem auto 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--k-text-still);
    font-size: 0.9rem;
    position: relative;
    z-index: 2;
}

.copyright {
    font-weight: 500;
}

.footer-badges {
    display: flex;
    gap: 1.5rem;
}

.badge-pill {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    padding: 6px 16px;
    border-radius: 50px;
    color: var(--k-text-still);
    font-weight: 600;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: var(--bew-mikro-bund);
}



@media (max-width: 1300px) {
    .footer-content {
        grid-template-columns: repeat(3, 1fr);
        gap: 3rem;
    }
}

@media (max-width: 1100px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 3rem;
    }


}

@media (max-width: 600px) {

    footer {
        margin-top: 4rem;
    }

    .footer-content {
        grid-template-columns: 1fr;
    }

    .brand-col,

    .footer-bottom {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }
}


.footer-insta {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 1.4rem;
    padding: 0.5rem 1.05rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    color: var(--k-text-leise);
    font-size: 0.86rem;
    font-weight: 600;
    text-decoration: none;
    transition: var(--bew-mikro-bund);
}

.footer-insta i {
    font-size: 1rem;
}


.system-status {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.status-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--k-licht);
    box-shadow: 0 0 10px rgba(251, 191, 36, 0.7);
    flex-shrink: 0;
}


.footer-bottom {
    gap: 1.5rem;
    flex-wrap: wrap;
    padding-right: 84px;
}

@media (max-width: 900px) {
    .footer-bottom {
        padding-right: 0;
        padding-bottom: 76px;
    }
}






.modal-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 2.4%, var(--k-grund)) 86%, transparent);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 3000;
    display: none;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    box-sizing: border-box;
    overflow-y: auto;

    animation: stufen-kommt var(--bew-normal) steps(4, end);
}



.modal-content {

    background: color-mix(in srgb, var(--k-text) 8.2%, var(--k-grund));
    border: 1px solid color-mix(in srgb, var(--k-text-leise) 18%, transparent);
    border-radius: 24px;

    padding: 2.6rem 1.4rem 2.6rem 2.6rem;
    width: 100%;
    max-width: 640px;
    max-height: calc(100vh - 3rem);
    max-height: calc(100dvh - 3rem);
    overflow-y: auto;
    box-shadow: 0 40px 90px rgba(0, 0, 0, 0.7);
    transform: scale(0.95);
    animation: popIn var(--bew-normal) var(--bew-feder) forwards;

    scrollbar-width: thin;
    scrollbar-color: rgba(148, 163, 184, 0.3) transparent;
}



.updates-popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0);

    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: var(--bew-standard);
}

.updates-popup {
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 9%, var(--k-grund)) 95%, transparent);
    border: 1px solid var(--k-rand-seite);
    box-shadow: 0 0 50px var(--k-vertieft-tief);
    padding: 3rem;
    border-radius: 24px;
    text-align: center;
    max-width: 500px;
    width: 90%;

    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.9);
    transition: var(--bew-standard);
}

.updates-popup h2 {
    font-size: 2rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(135deg, #fff 0%, var(--k-verlauf-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.updates-popup p {
    color: color-mix(in srgb, var(--k-text) 50%, var(--k-text-leise));
    line-height: 1.6;
    margin-bottom: 2rem;
    font-size: 1.05rem;
}

.updates-popup-btn {
    background: var(--k-verlauf);
    color: white;
    border: none;
    padding: 12px 32px;
    border-radius: 100px;
    font-weight: 700;
    font-size: 1.05rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: var(--bew-mikro-bund);
}


.kopfleiste {
    border-color: var(--k-glas-kante);
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2000;
    box-sizing: border-box;

    width: 95%;
    max-width: 1400px;

    border-radius: 32px;
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 5.5%, var(--k-grund)) 82%, transparent);
    border: 1px solid color-mix(in srgb, var(--k-text-leise) 16%, transparent);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5);



    overflow: visible;
}



.kopfleiste .site-header {
    position: static;
    transform: none;
    width: 100%;
    max-width: none;
    left: auto;
    top: auto;
    border-radius: 0;
    background: transparent;
    border: none;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

.status-band {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0.6rem 2.5rem;
    min-height: 42px;


    border-top: 1px solid color-mix(in srgb, var(--k-text-leise) 13%, transparent);
    background: color-mix(in srgb, var(--k-licht) 4.5%, transparent);
    border-radius: 0 0 31px 31px;

    color: var(--k-text-leise);
    font-size: 0.84rem;
    line-height: 1.5;
}

.status-band i {
    color: var(--k-licht);
    font-size: 0.88rem;
    flex-shrink: 0;
}


.status-band__hammer {
    display: inline-grid;
    place-items: center;
    min-inline-size: 24px;
    min-block-size: 24px;
    border-radius: var(--k-rund-klein);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

.status-band__text {
    min-width: 0;
}

.status-band strong {
    color: color-mix(in srgb, var(--k-text) 70%, var(--k-text-leise));
    font-weight: 700;
}

.status-band__wann {
    color: color-mix(in srgb, var(--k-licht) 75%, var(--k-text));
    font-weight: 700;
    white-space: nowrap;
}

.status-band a {
    margin-left: auto;
    flex-shrink: 0;
    color: color-mix(in srgb, var(--k-licht) 75%, var(--k-text));
    font-size: 0.79rem;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
    padding: 0.28rem 0.8rem;
    border: 1px solid color-mix(in srgb, var(--k-licht) 30%, transparent);
    border-radius: 100px;
    transition: var(--bew-mikro-bund);
}


@media (min-width: 1280px) { :root { --kopfleiste-hoehe: 127px; } }
@media (min-width: 740px) and (max-width: 900px) { :root { --kopfleiste-hoehe: 108px; } }
@media (min-width: 350px) and (max-width: 440px) {
    :root { --kopfleiste-hoehe: 194px; }
}


.kopfleiste + main,
.kopfleiste ~ main {

    padding-top: calc(var(--kopfleiste-hoehe, 9.5rem) + 1.2rem);
}


@media (max-width: 1099px) {
    .kopfleiste {
        top: 0;
        left: 0;
        transform: none;
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        border-left: none;
        border-right: none;
        border-top: none;
        border-bottom: 1px solid color-mix(in srgb, var(--k-text-leise) 16%, transparent);
        background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 5.9%, var(--k-grund)) 95%, transparent);
    }

    .kopfleiste .site-header {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 100% !important;
        height: auto !important;
        min-height: 54px !important;
        padding: 0.5rem 1rem !important;
        border: none !important;
        border-radius: 0 !important;
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        z-index: auto !important;
    }

    .status-band {
        padding: 0.55rem 1rem;
        border-radius: 0;
        align-items: flex-start;
        font-size: 0.79rem;
    }

    .status-band i {
        margin-top: 0.2rem;
    }

    .kopfleiste ~ main {
        padding-top: calc(var(--kopfleiste-hoehe, 8.5rem) + 1rem);
    }
}

@media (max-width: 760px) {
    .status-band {
        flex-wrap: wrap;
        gap: 0.55rem;
    }

    .status-band a {
        margin-left: 0;
        width: 100%;
        text-align: center;
        padding: 0.4rem 0.8rem;
    }

    .kopfleiste ~ main {
        padding-top: calc(var(--kopfleiste-hoehe, 10.5rem) + 1rem);
    }
}

.abs__weiter {
    display: inline-block;
    margin-top: 2rem;
    color: var(--k-text);
    font-size: 0.92rem;
    font-weight: 700;
    text-decoration: none;
    padding-bottom: 3px;
    border-bottom: 1px solid var(--k-rand-seite);
    transition: var(--bew-mikro-bund);
}

.abs__weiter::after {
    content: " →";
}




.demo-highlight {
}



@media (prefers-reduced-motion: reduce) {

    :root[data-thema] .em-sektion--angekommen,
    :root[data-thema] .em-sektion--angekommen .em-sektion__nr {
        animation: none;
    }


    :root[data-thema] .em-sektion--angekommen {
        background: var(--k-vertieft);
        border-radius: 12px;
    }
}


:root.aerona-ohne-animation .em-sektion--angekommen,
:root.aerona-ohne-animation .em-sektion--angekommen .em-sektion__nr {
    animation: none;
}

:root.aerona-ohne-animation .em-sektion--angekommen {
    background: var(--k-vertieft);
    border-radius: 12px;
}

@media (prefers-reduced-motion: reduce) {


    :root[data-thema] .em-sektion {
        content-visibility: auto;
    }
}


img,
video,
canvas,
svg {
    max-width: 100%;
    height: auto;
}


html,
body {
    width: 100%;
    position: relative;

}

main {
    width: 100%;
    position: relative;
    overflow: visible;
}


@media (max-width: 480px) {
    html {

        font-size: 100%;

        -webkit-overflow-scrolling: touch;
    }


}

@media (max-width: 768px) {

    main {
        overflow-wrap: break-word;
    }


    :root:not(:lang(de)) main :is(p, li, h1, h2, h3, h4, h5, h6, dt, dd, td, th, summary, figcaption, blockquote, label) {
        -webkit-hyphens: auto;
        hyphens: auto;
        overflow-wrap: anywhere;
    }


    h1:not(.legal-body h1) {
        font-size: min(2.6rem, 10.5vw) !important;
        letter-spacing: -1.5px !important;
    }

    .btn,
    .btn-primary,
    .btn-secondary {
        width: 100%;
        margin-left: 0 !important;
    }
}


@media (hover: none) {

    .btn,
    .btn-primary,
    .btn-secondary,
    .btn-micro,
    nav a,
    .mobile-toggle {
        min-height: 48px;

        cursor: url("../images/zeiger/pfeil.svg") 3 3, default;
    }


    :root[data-thema] main .an-knopf,
    :root[data-thema] main select,
    :root[data-thema] .wv-knopf,
    :root[data-thema] .wv-mischen {

        min-height: 2.75rem !important;
    }
}


@media (max-width: 900px) {
    .footer-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 3rem 2rem;
        text-align: left;
    }

    .brand-col,
    .newsletter-col {
        grid-column: span 2;
        text-align: center;
        align-items: center;
    }

    .footer-col {
        display: flex;
        flex-direction: column;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 2rem;
        text-align: center;
        padding: 2rem 0;
    }

    .footer-badges {
        flex-direction: column;
        gap: 1rem;
        align-items: center;
    }
}


@media (max-width: 480px) {
    .footer-content {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 3rem 1.25rem;
        text-align: center;
    }

    .footer-col {
        align-items: center;
    }

    .footer-col h3 {
        letter-spacing: 1px;
    }
}


@media (max-width: 600px) {
    .modal-content {
        width: 95%;
        padding: 1.5rem;
        max-height: 90vh;
        max-height: 90dvh;
        overflow-y: auto;
        border-radius: 20px;
        scrollbar-width: none;

        -ms-overflow-style: none;

    }
}




.kopf,
.ds-gruende,
:root[data-thema="dunkel"] {
    --k-grund: #000000;


    --k-schleier: rgba(4, 7, 16, 0.86);


    --k-platte: rgba(0, 0, 0, 0.78);
    --k-platte-tief: rgba(0, 0, 0, 0.88);
    --k-kante: rgba(255, 255, 255, 0.08);
    --k-kante-licht: rgba(255, 255, 255, 0.55);



    --k-vertieft:
        linear-gradient(115deg,
            rgba(255, 255, 255, 0) 24%,
            rgba(255, 255, 255, 0.035) 44%,
            rgba(255, 255, 255, 0) 64%),
        linear-gradient(180deg,
            rgba(216, 234, 255, 0.15) 0%,
            rgba(216, 234, 255, 0.042) 6%,
            rgba(198, 220, 245, 0.010) 22%,
            rgba(198, 220, 245, 0.006) 70%,
            rgba(255, 242, 224, 0.026) 96%,
            rgba(255, 242, 224, 0.05) 100%);

    --k-vertieft-kante: rgba(255, 255, 255, 0.14);
    --k-glanz: rgba(255, 255, 255, 0.34);
    --k-vertieft-tief: rgba(0, 0, 0, 0.34);


    --k-text: #ffffff;
    --k-text-leise: #a6a6a6;

    --k-text-still: #8c8c8c;


    --k-akzent: #3b82f6;
    --k-akzent-hell: #60a5fa;
    --k-akzent-tief: #1d4ed8;
    --k-auf-akzent: #ffffff;



    --k-winkel: 135deg;
    --k-verlauf: linear-gradient(var(--k-winkel), #60a5fa 0%, #a855f7 100%);
    --k-verlauf-tief: linear-gradient(var(--k-winkel), #2563eb 0%, #7c3aed 100%);
    --k-verlauf-tief-a: #2563eb;
    --k-verlauf-tief-b: #7c3aed;
    --k-verlauf-a: #60a5fa;
    --k-verlauf-b: #a855f7;

    --k-fokus: var(--k-verlauf-b);
    --k-schein-verlauf: rgba(139, 92, 246, 0.45);

    --k-schein-verlauf-leise: rgba(139, 92, 246, 0.14);
    --k-schein: rgba(59, 130, 246, 0.45);
    --k-schein-leise: rgba(59, 130, 246, 0.16);


    --k-schatten-eng: 0 2px 8px rgba(0, 0, 0, 0.45);
    --k-schatten-weit: 0 18px 48px rgba(0, 0, 0, 0.55);

    --k-punkt-neu: #34d399;
    --k-punkt-forschung: #a78bfa;
    --k-punkt-weg: #f59e0b;

    --k-punkt-ueber: #fb923c;


    --k-gut: #22c55e;
    --k-gut-frisch: #10b981;
    --k-fehler: #ef4444;
    --k-warnung: #f59e0b;
    --k-signal: #f97316;
    --k-licht: #fbbf24;
    --k-hinweis: #38bdf8;


    --k-himmel: linear-gradient(160deg, #241c52 0%, #0d1030 100%);
    --k-gestirn: linear-gradient(160deg, #cbd5e1 0%, #94a3b8 100%);
    --k-stern: rgba(226, 232, 240, 0.85);

    color-scheme: dark;
}

:root[data-thema="hell"] .kopf,
:root[data-thema="hell"] {
    --k-grund: #ffffff;

    --k-schleier: rgba(226, 232, 240, 0.82);

    --k-platte: rgba(255, 255, 255, 0.82);
    --k-platte-tief: rgba(255, 255, 255, 0.92);
    --k-kante: rgba(0, 0, 0, 0.10);
    --k-kante-licht: rgba(37, 99, 235, 0.65);

    --k-vertieft:
        linear-gradient(115deg,
            rgba(0, 0, 0, 0) 24%,
            rgba(0, 0, 0, 0.028) 44%,
            rgba(0, 0, 0, 0) 64%),
        linear-gradient(180deg,
            rgba(255, 255, 255, 0.95) 0%,
            rgba(255, 255, 255, 0.42) 5%,
            rgba(196, 216, 240, 0.16) 22%,
            rgba(176, 199, 226, 0.20) 70%,
            rgba(120, 146, 180, 0.16) 96%,
            rgba(96, 124, 160, 0.22) 100%);
    --k-vertieft-kante: rgba(0, 0, 0, 0.14);
    --k-glanz: rgba(255, 255, 255, 1);
    --k-vertieft-tief: rgba(0, 0, 0, 0.09);

    --k-text: #000000;
    --k-text-leise: #565656;
    --k-text-still: #636363;

    --k-winkel: 135deg;
    --k-verlauf: linear-gradient(var(--k-winkel), #2563eb 0%, #7c3aed 100%);
    --k-verlauf-tief: linear-gradient(var(--k-winkel), #1d4ed8 0%, #6d28d9 100%);
    --k-verlauf-tief-a: #1d4ed8;
    --k-verlauf-tief-b: #6d28d9;
    --k-verlauf-a: #2563eb;
    --k-verlauf-b: #7c3aed;

    --k-fokus: var(--k-verlauf-b);
    --k-schein-verlauf: rgba(124, 58, 237, 0.32);
    --k-schein-verlauf-leise: rgba(124, 58, 237, 0.10);

    --k-akzent: #2563eb;

    --k-akzent-hell: rgb(7, 106, 227);
    --k-akzent-tief: #1e40af;
    --k-auf-akzent: #ffffff;
    --k-schein: rgba(37, 99, 235, 0.30);
    --k-schein-leise: rgba(37, 99, 235, 0.10);

    --k-schatten-eng: 0 2px 6px rgba(0, 0, 0, 0.10);
    --k-schatten-weit: 0 18px 44px rgba(0, 0, 0, 0.16);

    --k-punkt-neu: #059669;

    --k-punkt-forschung: #6d28d9;
    --k-punkt-weg: #b45309;
    --k-punkt-ueber: #c2410c;

    --k-gut: #15803d;
    --k-gut-frisch: #047857;
    --k-fehler: #b91c1c;
    --k-warnung: #b45309;
    --k-signal: #c2410c;
    --k-licht: #a16207;
    --k-hinweis: #0369a1;

    --k-himmel: linear-gradient(160deg, #e6e9ff 0%, #c3cbfa 100%);
    --k-gestirn: linear-gradient(160deg, #fef3c7 0%, #fbbf24 100%);
    --k-stern: rgba(255, 255, 255, 0);

    color-scheme: light;
}

:root,
.kopf {
    --k-rund-klein: 10px;
    --k-rund-mittel: 14px;
    --k-rund-gross: 22px;
    --k-rund-pille: 999px;

    --k-hoehe: 74px;
    --k-hoehe-schmal: 58px;
}

html {
    scrollbar-width: thin;
    scrollbar-color: var(--k-text-leise) var(--k-grund);
}

html::-webkit-scrollbar {
    width: 12px;
}

html::-webkit-scrollbar-track {
    background: var(--k-grund);
}

html::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--k-verlauf-a), var(--k-verlauf-b));
    background-clip: content-box;
    border: 3px solid transparent;
    border-radius: var(--k-rund-pille);
}

html::-webkit-scrollbar-thumb:hover {

    background: linear-gradient(180deg, var(--k-verlauf-a), var(--k-verlauf-b));
    background-clip: content-box;
    border-width: 2px;
}

:root[data-thema] #aerona-scroll-progress {
    background: var(--k-verlauf);
    box-shadow: 0 0 12px var(--k-schein-verlauf);
}

:root[data-thema] body {
    background-color: var(--k-grund);
    background-image: none;
}

:root[data-thema="dunkel"] {

    --rb-platte: rgba(9, 13, 26, 0.66);
    --rb-platte-fest: rgba(9, 13, 26, 0.8);
    --rb-a: rgba(96, 165, 250, 0.55);
    --rb-b: rgba(168, 85, 247, 0.55);
    --rb-a-zeigen: rgba(96, 165, 250, 0.75);
    --rb-b-zeigen: rgba(168, 85, 247, 0.75);
    --rb-schein: 0 2px 10px rgba(0, 0, 0, 0.4);
}

:root[data-thema="hell"] {
    --rb-platte: rgba(255, 255, 255, 0.66);
    --rb-platte-fest: rgba(255, 255, 255, 0.85);
    --rb-a: rgba(37, 99, 235, 0.55);
    --rb-b: rgba(124, 58, 237, 0.55);
    --rb-a-zeigen: rgba(37, 99, 235, 0.78);
    --rb-b-zeigen: rgba(124, 58, 237, 0.78);
    --rb-schein: 0 2px 10px rgba(15, 23, 42, 0.18);
}

:root[data-thema],
:root[data-thema] .kopf__menue-rollen,
:root[data-thema] .lang-grid,
:root[data-thema] .lang-info-modal-content,
:root[data-thema] .modal-backdrop,
:root[data-thema] .modal-content,
:root[data-thema] .main-nav.mobile-open,
:root[data-thema] .mock-tab,
:root[data-thema] .sprachwahl__raster,
:root[data-thema] .buch-reader.vollbild .buch,
:root[data-thema] .wkb-seite,
:root[data-thema] .zs-kasten,
:root[data-thema] .sn-kasten,
:root[data-thema] .ewo-liste,
:root[data-thema] .updates-popup {
    scrollbar-width: none;
}

:root[data-thema]::-webkit-scrollbar,
:root[data-thema] .kopf__menue-rollen::-webkit-scrollbar,
:root[data-thema] .lang-grid::-webkit-scrollbar,
:root[data-thema] .lang-info-modal-content::-webkit-scrollbar,
:root[data-thema] .modal-backdrop::-webkit-scrollbar,
:root[data-thema] .modal-content::-webkit-scrollbar,
:root[data-thema] .main-nav.mobile-open::-webkit-scrollbar,
:root[data-thema] .mock-tab::-webkit-scrollbar,
:root[data-thema] .sprachwahl__raster::-webkit-scrollbar,
:root[data-thema] .buch-reader.vollbild .buch::-webkit-scrollbar,
:root[data-thema] .wkb-seite::-webkit-scrollbar,
:root[data-thema] .zs-kasten::-webkit-scrollbar,
:root[data-thema] .sn-kasten::-webkit-scrollbar,
:root[data-thema] .ewo-liste::-webkit-scrollbar,
:root[data-thema] .updates-popup::-webkit-scrollbar {
    width: 0;
    height: 0;
    background: transparent;
}

:root[data-thema] .aerona-rollbalken {
    position: absolute;
    top: 4px;
    right: 2px;
    bottom: 4px;
    width: 9px;
    z-index: 60;
    pointer-events: none;
    opacity: 0;
    transition: opacity var(--bew-normal) var(--bew-beides);
}

:root[data-thema] #aerona-rollbalken {
    position: fixed;
    top: 8px;
    right: 0;
    bottom: 8px;
}

:root[data-thema] .aerona-rollbalken.sichtbar {
    opacity: 1;
}

:root[data-thema] .aerona-rollbalken i {
    border-color: var(--k-glas-kante);
    position: absolute;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    border-radius: 5px;
    pointer-events: auto;
    cursor: url("../images/zeiger/hand.svg") 13 2, grab;
    will-change: transform;
    transition: background-color var(--bew-mikro) var(--bew-knackig);

    background-color: var(--rb-platte);
    background-image: linear-gradient(180deg, var(--rb-a) 0%, var(--rb-b) 100%);

    border: 1px solid transparent;
    border-top-color: var(--k-rand-oben);
    border-left-color: var(--k-rand-seite);
    border-right-color: var(--k-rand-seite);
    border-bottom-color: var(--k-rand-unten);

    box-shadow:
        inset 0 1px 0 var(--k-rand-dicke),
        inset 0 -1px 0 var(--k-rand-unten),
        var(--rb-schein);

    backdrop-filter: var(--k-glas-filter);
    -webkit-backdrop-filter: var(--k-glas-filter);
}

:root[data-thema] .aerona-rollbalken i:hover {
    background-image: linear-gradient(180deg, var(--rb-a-zeigen) 0%, var(--rb-b-zeigen) 100%);
}

:root[data-thema] .aerona-rollbalken.greift i {
    cursor: url("../images/zeiger/hand.svg") 13 2, grabbing;
    background-color: var(--rb-platte-fest);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .aerona-rollbalken,
    :root[data-thema] .aerona-rollbalken i {
        transition: none;
    }
}
:root[data-thema="hell"] .rq-schiene { background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 9%, var(--k-grund)) 10%, transparent); }
@media (forced-colors: active) {
    .rq-griff { background: Highlight; }
}
:root[data-thema="hell"] .fw-kasten { background: rgba(255, 255, 255, 0.92); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.18); }
:root[data-thema="hell"] .fw-hex input { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.14); }
:root[data-thema="hell"] .tw-knopf { border-color: rgba(0, 0, 0, 0.14); background: rgba(0, 0, 0, 0.03); }
:root[data-thema="hell"] .tw-an .tw-kreuz { box-shadow: inset 0 0 0 999px rgba(15, 23, 42, 0.06); }





.kopf {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: auto;
    max-width: none;
    transform: none;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: var(--k-schatten-weit);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    z-index: 2000;
}


.kopf .status-band {
    position: relative;
    z-index: 1;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--k-kante);
    background: var(--k-vertieft);
    background-color: var(--k-platte-tief);
    backdrop-filter: var(--k-glas-filter);
    -webkit-backdrop-filter: var(--k-glas-filter);
    color: var(--k-text-leise);
}


.kopf .kopf__leiste {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: var(--k-hoehe);
    padding: 0 1.5rem;
    margin: 0;
    width: auto;
    max-width: none;
    left: auto;
    transform: none;
    border: 0;

    border-radius: 0;
    overflow: visible;
}



.kopf .kopf__platte {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--k-platte);
    backdrop-filter: var(--k-glas-filter);
    -webkit-backdrop-filter: var(--k-glas-filter);
    border-bottom: 1px solid var(--k-kante);
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}


.kopf .kopf__lichtkante {
    display: none;
}





.kopf--ankunft .kopf__leiste {
    animation: kopf-leiste-ankunft var(--bew-ruhig) steps(6, end) backwards;
}


.kopf--ankunft .kopf__teil {
    animation: kopf-teil-ankunft var(--bew-ruhig) steps(5, end) backwards;
    animation-delay: calc(var(--i, 0) * 45ms);
}


@media (prefers-reduced-motion: reduce) {

    .kopf--ankunft .kopf__leiste,
    .kopf--ankunft .kopf__teil {
        animation: none;
    }

    .kopf--ankunft .kopf__leiste,
    .kopf--ankunft .kopf__teil {
        opacity: 1;
        transform: none;
    }
}


@media (max-width: 900px) {
    .kopf .kopf__platte {
        background: linear-gradient(var(--k-platte), var(--k-platte)), var(--k-grund, #000);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }
}



.kopf .kopf__marke {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    flex: 0 0 auto;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    text-align: left;
    color: inherit;
    position: relative;
    z-index: 2;
}

.kopf .kopf__kanzel {
    position: relative;
    width: 46px;
    height: 46px;
    flex: 0 0 auto;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    box-shadow: inset 0 1px 0 var(--k-vertieft-kante),
        inset 0 -6px 14px var(--k-vertieft-tief);
    display: grid;
    place-items: center;
}


.kopf .kopf__kanzel aeri-tier {
    position: relative;
    width: 40px;
    height: 40px;
    transform: translateY(-1px);
    transition: transform var(--bew-mikro) var(--bew-knackig);
    animation: marke-aeri-einflug 620ms var(--bew-feder) backwards;
}


.kopf {
    --marke-gruss: 2600ms;
}

.kopf .kopf__kanzel::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    background: radial-gradient(circle,
            var(--k-schein-verlauf) 0%,
            transparent 68%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
}


.kopf .kopf__name {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.1;
}

.kopf .kopf__titel {
    position: relative;
    display: inline-block;
}

.kopf .kopf__titel b,
.kopf .kopf__titel-verlauf {
    display: block;
    font-size: 1.28rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.kopf .kopf__titel b {
    color: var(--k-text);
}

.kopf .kopf__titel-verlauf {
    position: absolute;
    inset: 0;
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    opacity: 0;
    transition: opacity var(--bew-mikro) var(--bew-knackig);
    pointer-events: none;
}


.kopf .kopf__name small {
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--k-text-leise);
    white-space: nowrap;
    transform: translateX(-2px);
    transition: transform var(--bew-mikro) var(--bew-knackig);
}


@media (prefers-reduced-motion: reduce) {

    .kopf .kopf__kanzel aeri-tier {
        animation: none;
        transform: translateY(-1px);
        transition: none;
    }

    .kopf .kopf__titel-verlauf {
        transition-duration: 1ms;
    }

    .kopf--gruss .kopf__kanzel::after {
        animation: none;
    }
}

:root.aerona-ohne-animation .kopf .kopf__kanzel aeri-tier,
:root.aerona-ohne-animation .kopf--gruss .kopf__kanzel::after {
    animation: none;
}

@media (max-width: 640px) {

    .kopf .kopf__marke {
        flex-shrink: 1;
        min-width: 0;
    }

    .kopf .kopf__kanzel {
        flex-shrink: 0;
    }

    .kopf .kopf__name,
    .kopf .kopf__titel {
        min-width: 0;
    }

    .kopf .kopf__instrumente {
        flex-shrink: 0;
    }
}

@media (max-width: 469px) {
    .kopf .kopf__name {
        display: none;
    }
}

@media (max-width: 700px) {

    :root[data-thema] .kopf .kopf__konsole .kopf__knopf,
    :root[data-thema] .kopf .mobile-toggle {
        min-height: 44px;
        min-width: 44px;
    }

    :root[data-thema] .kopf .kopf__himmel::after {
        content: '';
        position: absolute;
        inset: -3px;
    }
}



.kopf .kopf__bahn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    flex: 1 1 auto;

    justify-content: safe center;
    min-width: 0;
    padding-bottom: 7px;
    z-index: 2;
}


.kopf .kopf__schiene {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--k-vertieft);
    pointer-events: none;
}


.kopf .kopf__gleiter {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 1px;
    height: 3px;
    border-radius: 1.5px;

    background: var(--k-verlauf);
    box-shadow: 0 0 14px var(--k-schein-verlauf);
    transform-origin: left center;
    transform: translateX(0) scaleX(0);
    opacity: 0;
    pointer-events: none;

    transition: transform var(--bew-mikro) var(--bew-knackig),
        opacity var(--bew-mikro) var(--bew-knackig);
}

.kopf .kopf__gleiter--da {
    opacity: 1;
}


.kopf .kopf__bahn>a,
.kopf .kopf__bahn .dropdown-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.85rem;
    border: 0;

    background-color: transparent;
    border-radius: var(--k-rund-klein);
    font-family: inherit;
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--k-text-leise);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    white-space: nowrap;
    transition: color var(--bew-mikro) var(--bew-knackig);
}


.kopf .kopf__bahn>a[href],
.kopf .kopf__bahn .dropdown-trigger>span {
    background-color: transparent;
    background-image: linear-gradient(var(--k-text-leise), var(--k-text-leise));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}


.kopf .kopf__bahn>a[href].active,
.kopf .kopf__bahn .nav-dropdown--aktiv>.dropdown-trigger>span,
.kopf .kopf__bahn .dropdown-trigger.active>span {
    background-color: transparent;
    background-image: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    box-shadow: none;
    border: 0;
}


.kopf .kopf__bahn .dropdown-trigger.active,
.kopf .kopf__bahn .nav-dropdown--aktiv>.dropdown-trigger {
    background: transparent;
    box-shadow: none;
    border: 0;
    color: inherit;
}


.kopf .kopf__bahn .dropdown-trigger i {
    font-size: 0.62rem;
    opacity: 0.7;
    transition: transform var(--bew-mikro) var(--bew-knackig),
        opacity var(--bew-mikro) var(--bew-knackig);
}


.kopf .kopf__bahn .dropdown-trigger:hover i,
.kopf .kopf__bahn .dropdown-trigger:focus-visible i,
.kopf .kopf__bahn .nav-dropdown--aktiv>.dropdown-trigger i,
.kopf .kopf__bahn .dropdown-trigger.active i {
    background-image: linear-gradient(var(--k-verlauf-b), var(--k-verlauf-b));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    opacity: 1;
}

.kopf .kopf__bahn .nav-dropdown {
    position: relative;
    display: inline-flex;
}

@media (prefers-reduced-motion: reduce) {

    .kopf .kopf__gleiter,
    .kopf .kopf__bahn .dropdown-content {
        transition-duration: 1ms;
    }
}



.kopf .kopf__bahn .nav-dropdown {
    position: relative;
    display: inline-flex;
}


.kopf .kopf__bahn .dropdown-content {
    position: absolute;
    top: calc(100% + 14px);
    left: 50%;
    background: var(--k-menue);
    border: 1px solid var(--k-kante);
    border-radius: var(--k-rund-gross);
    box-shadow: var(--k-schatten-weit);
    padding: 1.2rem 1.1rem;


    overflow: visible;
    display: block;


    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%);
    transition: opacity var(--bew-mikro) var(--bew-knackig),
        visibility 0s linear var(--bew-mikro);
    z-index: 10;
}


.kopf .kopf__bahn .dropdown-content::before {
    content: '';
    position: absolute;
    top: -14px;
    left: 0;
    right: 0;
    height: 14px;
}


.kopf .kopf__menue-rollen {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(min(100%, 165px), 1fr));
    gap: 0.3rem 0.6rem;
    align-items: start;
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.kopf .dd-mega--3 .kopf__menue-rollen {
    grid-template-columns: repeat(4, minmax(min(100%, 185px), 1fr));
}


.kopf .dd-mega--schriften .kopf__menue-rollen {
    grid-template-columns: repeat(3, minmax(min(100%, 175px), 1fr));
}

.kopf .kopf__bahn .dropdown-content.dd-mega--schriften {
    left: auto;
    right: 0;
    transform: none;
}


.kopf .kopf__bahn .dd-title {
    padding: 10px 14px 5px;
    font-size: max(12px, 0.63rem);
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


:root .kopf .kopf__bahn .dd-title {
    color: var(--k-text-leise);
}


.kopf .kopf__bahn .dropdown-content a {
    position: relative;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0.5rem;
    padding: 0.44rem 0.85rem !important;
    margin-bottom: 0 !important;
    border: 0 !important;
    border-radius: var(--k-rund-klein) !important;
    color: var(--k-text-leise) !important;
    font-size: 0.86rem !important;
    font-weight: 600 !important;
    line-height: 1.45 !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    text-decoration: none;
    white-space: nowrap;
    transition: color var(--bew-mikro) var(--bew-knackig),
        background-color var(--bew-mikro) var(--bew-knackig);
}


.kopf .kopf__bahn .dropdown-content a.neu-nav-link::after,
.kopf .kopf__bahn .dropdown-content a.web-nav-link::after,
.kopf .kopf__bahn .dropdown-content a.research-nav-link::after,
.kopf .kopf__bahn .dropdown-content a.lost-nav-link::after,
.kopf .kopf__bahn .dropdown-content a.about-nav-link::after,
.kopf .kopf__bahn .dropdown-content a.inventor-nav-link::after {
    content: '';
    position: static;
    width: 6px;
    height: 6px;
    margin-left: auto;
    border-radius: 50%;
    background: var(--k-punkt-neu) !important;
    transform: none;
    flex: 0 0 auto;
    box-shadow: none !important;

    font-size: 0;
    line-height: 0;
    padding: 0;
    letter-spacing: normal;
}

.kopf .kopf__bahn .dropdown-content a.research-nav-link::after {
    background: var(--k-verlauf) !important;
}

.kopf .kopf__bahn .dropdown-content a.lost-nav-link::after {
    background: var(--k-punkt-weg) !important;
}


.kopf .kopf__bahn .dropdown-content a.about-nav-link::after,
.kopf .kopf__bahn .dropdown-content a.inventor-nav-link::after {
    background: var(--k-punkt-ueber) !important;
}

.kopf .kopf__bahn .dropdown-content a.research-nav-link {
    color: var(--k-text) !important;
}


:root .kopf .kopf__bahn .dd-legende {
    grid-column: 1 / -1;
    margin-top: 0.7rem;
    padding-top: 0.85rem;
    border-top: 1px solid var(--k-kante);
    color: var(--k-text-leise);
    font-size: max(12px, 0.7rem);
    font-weight: 600;
}



@media (prefers-reduced-motion: reduce) {

    .kopf .kopf__bahn .dropdown-content,
    .kopf .kopf__bahn .dropdown-content a::after {
        transition-duration: 1ms;
    }
}



.kopf .kopf__himmel {
    position: relative;
    flex: 0 0 auto;
    width: 62px;
    height: 30px;
    padding: 0;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: var(--k-rund-pille);
    background: var(--k-himmel);
    box-shadow: inset 0 2px 6px var(--k-vertieft-tief);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;


    overflow: hidden;
    overflow: clip;
    overflow-clip-margin: 3px;
    transition: background-color var(--bew-mikro) var(--bew-knackig),
        border-color var(--bew-mikro) var(--bew-knackig);
}


.kopf .kopf__stern {
    position: absolute;
    border-radius: 50%;
    background: var(--k-stern);
    transition: background-color var(--bew-mikro) var(--bew-knackig),
        transform var(--bew-mikro) var(--bew-knackig);
}

.kopf .kopf__stern:nth-child(1) {
    width: 3px;
    height: 3px;
    top: 7px;
    right: 11px;
}

.kopf .kopf__stern:nth-child(2) {
    width: 2px;
    height: 2px;
    top: 17px;
    right: 20px;
}

.kopf .kopf__stern:nth-child(3) {
    width: 2px;
    height: 2px;
    top: 10px;
    right: 26px;
}

:root[data-thema="hell"] .kopf .kopf__stern {
    transform: scale(0.2);
}


.kopf .kopf__gestirn {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--k-gestirn);
    box-shadow: var(--k-schatten-eng);
    transform: translateX(0);
    transition: transform var(--bew-mikro) var(--bew-knackig),
        box-shadow var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema="hell"] .kopf .kopf__gestirn {
    transform: translateX(32px);
    box-shadow: 0 0 14px rgba(251, 191, 36, 0.75), var(--k-schatten-eng);
}


.kopf .kopf__biss {
    position: absolute;
    top: -5px;
    right: -4px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--k-himmel);
    transform: scale(1);
    transform-origin: 70% 30%;
    transition: transform var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema="hell"] .kopf .kopf__biss {
    transform: scale(0);
}


.kopf .kopf__hof {
    position: absolute;
    inset: -6px;
    border-radius: 50%;
    background: radial-gradient(circle,
            color-mix(in srgb, var(--k-licht) 55%, transparent) 0%,
            transparent 68%);
    opacity: 0;
    transform: scale(0.6);
    transition: opacity var(--bew-mikro) var(--bew-knackig),
        transform var(--bew-mikro) var(--bew-knackig);
    pointer-events: none;
}

:root[data-thema="hell"] .kopf .kopf__hof {
    opacity: 1;
    transform: scale(1);
}



:root.aerona-ohne-animation .kopf .kopf__gestirn,
:root.aerona-ohne-animation .kopf .kopf__biss,
:root.aerona-ohne-animation .kopf .kopf__hof,
:root.aerona-ohne-animation .kopf .kopf__stern {
    transition-duration: 1ms;
}

@media (prefers-reduced-motion: reduce) {

    .kopf .kopf__gestirn,
    .kopf .kopf__biss,
    .kopf .kopf__hof,
    .kopf .kopf__stern {
        transition-duration: 1ms;
    }

    .thema-wechselt::view-transition-old(root) {
        animation: none;
    }
}

[data-thema="hell"] .thema-uhrzeit__feld input {
    color-scheme: light;
}



.kopf .kopf__instrumente {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    flex: 0 0 auto;
    margin-left: auto;
    position: relative;
    z-index: 2;
}


.kopf .kopf__konsole {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 4px;
    border-radius: var(--k-rund-pille);
    background: var(--k-vertieft);
    box-shadow: inset 0 1px 0 var(--k-vertieft-kante),
        inset 0 -5px 12px var(--k-vertieft-tief);
}


.kopf .kopf__himmel+.kopf__knopf {
    margin-left: 0.5rem;
}

.kopf .kopf__himmel+.kopf__knopf::after {
    content: '';
    position: absolute;
    left: -0.3rem;
    top: 22%;
    bottom: 22%;
    width: 1px;
    background: var(--k-vertieft-kante);
    pointer-events: none;
}


.kopf .kopf__knopf {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    height: 30px;
    padding: 0 0.7rem;
    border: 0;
    border-radius: var(--k-rund-pille);
    background: transparent;
    font-family: inherit;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    color: var(--k-text-leise);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: var(--bew-mikro-bund);
}

.kopf .kopf__knopf--rund {
    width: 30px;
    padding: 0;
    font-size: 0.72rem;
}


.kopf a.kopf__knopf {
    text-decoration: none;
    box-sizing: border-box;
}


.kopf .kopf__knopf::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: 1px solid transparent;
    background: conic-gradient(from 0deg,
            var(--k-verlauf-a),
            var(--k-verlauf-b),
            var(--k-verlauf-a)) border-box;
    -webkit-mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#000 0 0) padding-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    opacity: 0;
    transition: opacity var(--bew-mikro) var(--bew-knackig);
    pointer-events: none;
}


.kopf .kopf__knopf--pixelring::before {
    display: none;
}


.kopf .kopf__knopf>span,
.kopf .kopf__knopf i::before {
    background-image: linear-gradient(var(--k-text-leise), var(--k-text-leise));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;

}

.kopf .kopf__knopf i {
    font-size: 0.6rem;
    opacity: 0.75;
    transition: transform var(--bew-mikro) var(--bew-knackig),
        opacity var(--bew-mikro) var(--bew-knackig);
}


.kopf .kopf__start {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    height: 38px;
    padding: 0 1.1rem;
    border: 0;
    border-radius: var(--k-rund-pille);

    background: var(--k-verlauf-tief);
    color: var(--k-auf-akzent);
    font-family: inherit;
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    box-shadow: var(--k-schatten-eng);
    transition: var(--bew-mikro-bund);
}


.kopf .kopf__start i {
    font-size: 0.78rem;
    transition: transform var(--bew-mikro) var(--bew-knackig);
}

.kopf .kopf__start {
    position: relative;
    overflow: hidden;
}

.kopf .kopf__start>i,
.kopf .kopf__start>span {
    position: relative;
    z-index: 1;
}

@media (prefers-reduced-motion: reduce) {

    .kopf .kopf__knopf::before,
    .kopf .kopf__knopf i,
    .kopf .kopf__knopf>span {
        transition-duration: 1ms;
    }
}

.kopf .kopf__knopf>.kopf__vorlesen {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.kopf .kopf__glocke[hidden],
:root .gl-liste[hidden],
:root .gl-liste .gl-gesehen[hidden] {
    display: none !important;
}

.kopf .kopf__glocke-zahl {
    position: absolute;
    top: -4px;
    right: -5px;
    z-index: 2;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    box-sizing: border-box;
    border-radius: var(--k-rund-pille);

    background: var(--k-verlauf-tief);
    color: var(--k-auf-akzent);

    box-shadow: 0 0 0 2px var(--k-vertieft-kante);
    font-size: 0.6rem;
    font-weight: 800;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
    pointer-events: none;
}

.kopf .kopf__glocke-zahl[hidden] { display: none; }

.kopf .kopf__glocke .kopf__glocke-zahl {
    background: var(--k-verlauf-tief);
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
}

:root.aerona-ohne-animation .kopf .kopf__glocke--wackeln > i { animation: none; }
@media (prefers-reduced-motion: reduce) {
    .kopf .kopf__glocke--wackeln > i { animation: none; }
}

:root .gl-liste {
    position: fixed;
    z-index: 9996;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding: 0.9rem 0.9rem 0.8rem;
    border: 1px solid var(--k-glas-kante, var(--k-kante));
    border-radius: var(--k-rund-gross);
    background-color: var(--k-menue);
    background-image: var(--k-platte-schein);
    box-shadow: var(--k-schatten-weit), inset 0 1px 0 var(--k-rand-oben, transparent);
    backdrop-filter: var(--k-glas-filter);
    -webkit-backdrop-filter: var(--k-glas-filter);
    color: var(--k-text);
    font-size: 0.88rem;
    font-weight: 500;
    line-height: 1.45;
    letter-spacing: normal;
    text-align: start;
    text-transform: none;
    white-space: normal;
    cursor: url("../images/zeiger/pfeil.svg") 3 3, auto;
}

@media (min-width: 901px) and (max-width: 2600px) {
    .kopf .kopf__bahn>a,
    .kopf .kopf__bahn .dropdown-trigger {
        padding-inline: 0.6rem;
    }

    .kopf .kopf__bahn .kopf__weglassbar {
        display: none;
    }
}

@media (min-width: 901px) and (max-width: 1400px) {

    .kopf .kopf__start span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (min-width: 901px) and (max-width: 1400px) {
    .kopf .kopf__bahn>a,
    .kopf .kopf__bahn .dropdown-trigger {
        padding-inline: 0.45rem;
        font-size: 0.85rem;
        gap: 0.25rem;
    }
}

@media (min-width: 901px) and (max-width: 1400px) {
    .kopf .kopf__name {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

.kopf .dd-mega--design .kopf__menue-rollen {
    grid-template-columns: repeat(3, max-content);
    column-gap: 1.6rem;
}

.kopf .kopf__bahn .dropdown-content.dd-mega--design {
    left: auto;
    right: 0;
    transform: none;
}

@media (min-width: 901px) {
    .kopf .dd-mega--design a {
        white-space: nowrap;
    }
}

@media (min-width: 901px) {
    .kopf .kopf__menue-rollen,
    .kopf .dd-mega--3 .kopf__menue-rollen {
        grid-template-columns: repeat(4, max-content);
        column-gap: 1.2rem;
    }

    .kopf .dd-mega--schriften .kopf__menue-rollen {
        grid-template-columns: repeat(3, max-content);
        column-gap: 1.2rem;
    }

    .kopf .kopf__bahn > .nav-dropdown:first-of-type .dropdown-content {
        left: 0;
        transform: none;
    }
}

@media (min-width: 901px) {
    .kopf .kopf__bahn.kopf__bahn--rollt {
        overflow-x: auto;
        overflow-y: hidden;
        justify-content: safe center;
        scrollbar-width: none;
        overscroll-behavior-x: contain;
    }

    .kopf .kopf__bahn.kopf__bahn--rollt .dropdown-content {
        position: fixed;
    }

    .kopf .kopf__bahn-pfeil {
        position: relative;
        flex: none;
        display: grid;
        place-items: center;
        width: 30px;
        height: 30px;
        margin-bottom: 7px;
        border: 0;
        border-radius: 50%;
        background: var(--k-vertieft);
        color: var(--k-text-leise);
        font-size: 0.72rem;
        cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    }
}

.kopf .kopf__bahn-pfeil[hidden] {
    display: none;
}

@media (max-width: 900px) {
    .kopf .kopf__bahn-pfeil {
        display: none;
    }
}

.kopf .mobile-toggle {
    width: 38px;
    height: 38px;
    border: 0;
    border-radius: var(--k-rund-mittel);
    background: var(--k-vertieft);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    display: none;
    place-items: center;
}

.kopf .hamburger-icon {
    position: relative;
    width: 18px;
    height: 12px;
}

.kopf .hamburger-icon span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 2px;
    background: var(--k-text);
    transition: transform var(--bew-mikro) var(--bew-knackig),
        opacity var(--bew-mikro) var(--bew-knackig);
}

.kopf .hamburger-icon span:nth-child(1) {
    top: 0;
}

.kopf .hamburger-icon span:nth-child(2) {
    top: 5px;
}

.kopf .hamburger-icon span:nth-child(3) {
    top: 10px;
}


@media (max-width: 900px) {


    .kopf .kopf__bahn:not(.mobile-open) {
        display: none;
    }

    .kopf .kopf__leiste {
        height: var(--k-hoehe-schmal);
        padding: 0 0.9rem;
        gap: 0.75rem;
    }

    .kopf .kopf__kanzel {
        width: 38px;
        height: 38px;
    }


    .kopf .kopf__kanzel aeri-tier {
        width: 32px;
        height: 32px;
    }

    .kopf .kopf__titel b,
    .kopf .kopf__titel-verlauf {
        font-size: 1.05rem;
    }

    .kopf .kopf__name small {
        display: none;
    }


    .kopf .kopf__start:not(.mobile-download-cta),
    .kopf .kopf__knopf--rund:not(.mobile-extra-knopf) {
        display: none;
    }

    .kopf .mobile-toggle {
        display: grid;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kopf .kopf__start span,
    .kopf .hamburger-icon span {
        transition-duration: 1ms;
    }
}

:where(p, li, dd, dt, td, th, figcaption, blockquote, summary, button, h1, h2, h3, h4, h5, h6) {
    overflow-wrap: break-word;
}

:where(main, footer) :where(a, code) {
    overflow-wrap: anywhere;
}

:where(select, input, textarea) {
    max-inline-size: 100%;
}

:where(input) { text-overflow: ellipsis; }

.system-status { flex-wrap: wrap; }
.system-status > span { white-space: normal; }

html { -webkit-tap-highlight-color: transparent; }

@media (max-width: 480px) {
    :where(p, li, dd, dt, td, th, figcaption, blockquote, summary, h1, h2, h3, h4, h5, h6) {
        -webkit-hyphens: auto;
        hyphens: auto;
    }
}

:where(main) :where(img, video) { max-inline-size: 100%; }

@media (max-width: 480px) {
    :where(h1, h2, h3, h4) { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
    main { overflow-x: clip; }
}

@media screen and (hover: none), screen and (pointer: coarse) {
    main > section ~ section ~ section {
        content-visibility: auto;
        contain-intrinsic-size: auto 900px;
        overflow-clip-margin: 4rem;
    }
}

@media screen {

    .sicht-ruht,
    .sicht-ruht::before,
    .sicht-ruht::after {
        animation-play-state: paused !important;
    }
}

:root.aerona-geraet-leicht {
    --bew-aufbau: calc(var(--bew-ruhig) * 1.6);
    --bew-abbau: calc(var(--bew-ruhig) * 1.4);
    --bew-ankunft: calc(var(--bew-ruhig) * 2.4);
    --fenster-auf: calc(var(--bew-ruhig) * 2.4);
}



.kopf .status-band {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.7rem 1.5rem;
    font-size: 0.82rem;
}


.kopf .status-band>i {
    position: relative;
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--k-rund-klein);
    background: var(--k-vertieft);
    box-shadow: inset 0 1px 0 var(--k-vertieft-kante);
    font-size: 0.72rem;

    color: var(--k-verlauf-a);
}


.kopf .status-band>i::before {
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}


.kopf .status-band__zeichen--tippbar {
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

.kopf .status-band__zeichen--tippbar::after {
    content: '';
    position: absolute;
    inset: -11px;
}

.kopf .status-band__text {
    color: var(--k-text-leise);
    line-height: 1.45;
    min-width: 0;
}

.kopf .status-band__text strong {
    color: var(--k-text);
    font-weight: 700;
}


.kopf .status-band__wann {
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-weight: 700;
}


.kopf .status-band a {
    position: relative;
    flex: 0 0 auto;
    margin-left: auto;
    padding: 0.3rem 0.1rem;
    border: 0;
    border-radius: 0;
    background: none;
    color: var(--k-text);
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    text-decoration: none;
    transition: color var(--bew-mikro) var(--bew-knackig);
}

.kopf .status-band a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 1px;
    background: var(--k-verlauf);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--bew-mikro) var(--bew-knackig);
}

@media (max-width: 900px) {

    .kopf .status-band {
        padding: 0.55rem 0.9rem;
        gap: 0.6rem;
        font-size: 0.76rem;
    }

    .kopf .status-band>i {
        width: 22px;
        height: 22px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kopf .status-band a::after {
        transition-duration: 1ms;
    }
}




.kopf .status-band__huelle,
.kopf .status-band__innen {
    display: contents;
}

.kopf .status-band__griff {
    display: none;
}


@media (max-width: 760px) {


    .kopf .status-band__griff {
        position: relative;
        flex: 0 0 auto;
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;

        margin: -0.5rem 0 -0.5rem auto;
        padding: 0;
        border: 0;
        border-radius: var(--k-rund-klein);
        background: none;
        color: var(--k-text-leise);
        font-size: 0.78rem;
        cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
        -webkit-tap-highlight-color: transparent;
    }


    .kopf .status-band__griff i {
        color: var(--k-text);
        transition: transform var(--bew-normal) var(--bew-beides);
    }

    .kopf .status-band--zu .status-band__griff i {
        transform: rotate(-90deg);
        color: var(--k-text-leise);
    }


    .kopf .status-band__huelle {
        display: grid;
        grid-template-rows: 1fr;
        min-width: 0;
        transition: grid-template-rows var(--bew-ruhig) var(--bew-beides);
    }

    .kopf .status-band--zu .status-band__huelle {
        grid-template-rows: 0fr;
    }


    .kopf .status-band__innen {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 0.5rem 0.85rem;
        min-height: 0;
        overflow: hidden;
    }


    .kopf .status-band--zu {
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }


    .kopf .status-band--klappbar {
        align-items: flex-start;
        flex-wrap: nowrap;
    }


    .kopf .status-band--klappbar>i {
        margin-top: 0.1rem;
    }

    .kopf .status-band--zu>i {
        margin-top: 0;
    }


    .kopf .status-band__innen a {
        margin-left: 0;
    }
}

@media (prefers-reduced-motion: reduce) {

    .kopf .status-band__huelle,
    .kopf .status-band__griff i {
        transition-duration: 1ms;
    }
}





.modal-backdrop {

    background: var(--k-schleier);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}


.modal-backdrop .modal-content {

    transform: none;
    background-color: var(--k-menue);
    background-image: linear-gradient(90deg, var(--k-verlauf-a), var(--k-verlauf-b));
    background-repeat: no-repeat;
    background-size: 100% 2px;
    background-position: top left;
    border: 1px solid var(--k-kante);
    border-radius: var(--k-rund-gross);
    box-shadow: var(--k-schatten-weit);
    color: var(--k-text-leise);
}


.modal-backdrop .modal-content {

    scrollbar-color: var(--k-text-leise) transparent;
}

@media (prefers-reduced-motion: reduce) {

    .modal-footer-link::after,

    .modal-header .close-btn,

    .modal-header .close-btn::before {
        transition-duration: 1ms;
    }

    .modal-header .close-btn:hover {
        transform: none;
    }
}

:root.aerona-schrift-klein {
    font-size: 87.5%;
}

:root.aerona-schrift-gross {
    font-size: 112.5%;
}

:root.aerona-pixel-aus [data-aerona-pixel],
:root.aerona-pixel-aus :is(.kopf__spaene, .kopf__himmel-pixel, .sprachwahl__funken,
    .pixel-welle, .start-feld, .pixel-rollspur) {
    visibility: hidden !important;
}

:root.aerona-schriftart body,
:root.aerona-schriftart body :where(*:not(i, code, pre, kbd, samp, .az, .az, .az, .az, [class^="fa-"], [class*=" fa-"])) {
    font-family: var(--aerona-schriftart), 'Aerona Sans', system-ui, sans-serif !important;
}

:root.aerona-aeri-kopf-aus .kopf__kanzel {
    display: none !important;
}

@media (prefers-reduced-motion: reduce) {
    .ab-blase,
    .ab-blase.ab-weg {
        animation: none;
    }
}

html.aerona-fokus .ab-blase {
    display: none;
}

body.z-fenster:not(.z-nie) .ab-blase {
    visibility: hidden;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .zh-blase:not([hidden]) {
        animation: zh-auf var(--bew-mikro) steps(4, end);
    }
}

@media (prefers-reduced-motion: reduce) {

    .modal-header .close-btn i::before,

    .modal-header .close-btn i::after {
        transition-duration: 1ms;
    }
}


.modal-content--knapp {
    max-width: 400px;
    text-align: center;
}

.modal-knopf-breit {
    width: 100%;
    justify-content: center;
}

@media (prefers-reduced-motion: reduce) {

    .platform-card,
    .platform-card::before {
        transition-duration: 1ms;
    }
}

@media (prefers-reduced-motion: reduce) {
    .fv-reiter__knopf {
        transition: none;
    }
}

:root {
    --fenster-auf: calc(var(--bew-ruhig) * 3.4);

    --fenster-zu: calc(var(--fenster-auf) * 0.55);
}

.fenster__ring {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 0;
}

.fenster__zeichen-pixel {
    position: absolute;
    pointer-events: none;
    max-width: none;
    max-height: none;
    z-index: 2;
}

.zeichen--zerfaellt::before {
    visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {

    .modal-backdrop.active .modal-content,

    .modal-backdrop.fenster--faehrt-zurueck,

    .modal-backdrop.active .platform-card,

    .modal-backdrop.active .modal-gate,

    .modal-backdrop.active .modal-footer-link,

    .modal-backdrop.active .thanks-box {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .fenster--aus-knopf.modal-backdrop.active .modal-content,

    .fenster--aus-knopf.modal-backdrop.active .modal-content::after,

    .fenster--faehrt-zurueck .modal-content::after {
        display: none;
    }
}

.modal-backdrop .modal-content {
    position: relative;
}

@media (prefers-reduced-motion: reduce) {

    .fenster--faehrt-zurueck .modal-content {
        animation: none;
    }
}

@media (max-width: 600px) {

    .modal-backdrop .modal-content {
        border-radius: var(--k-rund-gross);
    }
}

@media (prefers-reduced-motion: reduce) {

    .sprachwahl__zaehler.ist-neu,
    .sprachwahl__zaehler.ist-neu .sprachwahl__zahl {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sprachwahl__karte,
    .sprachwahl__karte::before,
    .sprachwahl__mehr {
        transition-duration: 1ms;
    }

    .sprachwahl__karte {
        animation: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .sprachinfo__nehmen {
        transition-duration: 1ms;
    }

    .sprachinfo__nehmen:hover {
        transform: none;
    }
}




:root[data-thema] .btn-primary {
    width: max-content;
    max-width: 100%;
    background: var(--k-verlauf-tief);
    color: var(--k-auf-akzent);
    border: 0;
}

:root[data-thema] .kopf .kopf__start,
:root[data-thema] .sprachinfo__nehmen,
:root[data-thema] .hero-weg--haupt,
:root[data-thema] .btn-primary {

    position: relative;

    box-shadow:
        var(--k-schatten-eng),
        inset 0 1px 0 rgba(255, 255, 255, 0.3),
        inset 0 -12px 18px -12px rgba(0, 0, 0, 0.45);
}

@media (prefers-reduced-motion: reduce) {

    :root[data-thema] .kopf .kopf__start:active,
    :root[data-thema] .sprachinfo__nehmen:active,
    :root[data-thema] .hero-weg--haupt:active,
    :root[data-thema] .btn-primary:active {
        transform: none;
    }
}

:root.aerona-ohne-animation[data-thema] .kopf .kopf__start:active,
:root.aerona-ohne-animation[data-thema] .sprachinfo__nehmen:active,
:root.aerona-ohne-animation[data-thema] .hero-weg--haupt:active,
:root.aerona-ohne-animation[data-thema] .btn-primary:active {
    transform: none;
}

:root[data-thema] .kopf-suche {
    position: relative;
    display: flex;
    align-items: center;
}

:root[data-thema] .kopf-suche__knopf {
    display: grid;
    place-items: center;
}

:root[data-thema] .kopf-suche__feld {
    inline-size: 0;
    padding: 0;
    border: 0;
    background: none;
    color: var(--k-text);
    font: inherit;
    font-size: 0.9rem;
    outline: none;
    opacity: 0;
    transition: opacity var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema] .kopf-suche__treffer {
    position: absolute;
    inset-block-start: calc(100% + 0.6rem);
    inset-inline-end: 0;
    z-index: 40;
    display: flex;
    flex-direction: column;
    inline-size: clamp(14rem, 26vw, 22rem);
    max-block-size: 60vh;
    overflow-y: auto;
    padding: 0.4rem;
    border: 1px solid;
    border-color: var(--k-glas-kante);
    border-radius: var(--k-rund-mittel, 14px);
    background: var(--k-menue);
    box-shadow: var(--k-glas-tiefe);
}

:root[data-thema] .kopf-suche__treffer[hidden] {
    display: none;
}

@media (max-width: 760px) {

    :root[data-thema] .kopf-suche__treffer {
        inline-size: min(18rem, 80vw);
    }
}

:root.aerona-ohne-animation .kopf-suche__feld,
:root.aerona-ohne-animation .kopf-suche__ziel {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche__feld,
    :root[data-thema] .kopf-suche__ziel {
        transition: none;
    }
}

@media print {

    :root[data-thema].hl-kopf-suche-wort ::highlight(kopf-suche-wort) {
        background-color: transparent !important;
    }
}

:root.aerona-ohne-animation .kopf-suche.schuettelt {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche.schuettelt {
        animation: none;
    }
}

:root.aerona-ohne-animation .kopf-suche-ziel {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche-ziel {
        animation: none;
    }
}

:root[data-thema].hl-kopf-suche-wort ::highlight(kopf-suche-wort) {
    background-color: color-mix(in srgb, var(--k-akzent) 40%, transparent);
    color: var(--k-text);
}

:root[data-thema] .kopf-suche__treffer,
:root[data-thema] .kopf-suche-info {
    background: linear-gradient(var(--k-menue), var(--k-menue)), var(--k-grund);
}

:root[data-thema] .kopf-suche__i {
    display: none;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    margin-inline-end: 0.2rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--k-text-still);
    font-size: 0.95rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: color var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema] .kopf-suche-info {
    position: absolute;
    inset-block-start: calc(100% + 0.6rem);
    inset-inline-end: 0;
    z-index: 40;
    display: grid;
    gap: 0.6rem;
    inline-size: clamp(15rem, 28vw, 23rem);
    max-block-size: 70vh;
    overflow-y: auto;
    padding: 0.8rem;
    border: 1px solid transparent;
    border-color: var(--k-glas-kante);
    border-radius: var(--k-rund-mittel, 14px);

    background: linear-gradient(var(--k-menue), var(--k-menue)), var(--k-grund);
    box-shadow: var(--k-glas-tiefe);
}

:root[data-thema] .kopf-suche-info[hidden] {
    display: none;
}

:root.aerona-ohne-animation .kopf-suche__i {
    transition: none;
}

:root[data-thema] .kopf-suche__rest {
    position: absolute;
    z-index: 1;
    pointer-events: none;
    white-space: pre;
    color: var(--k-text-still);
    opacity: 0.75;
}

:root[data-thema] .kopf-suche__treffer {
    overflow-x: hidden;
    scrollbar-color: var(--k-text-leise) transparent;
}

@media (max-width: 760px), (pointer: coarse) {

    :root[data-thema] .kopf-suche__feld {
        font-size: max(16px, 0.9rem);
    }

}

@media (forced-colors: active) {
    :root[data-thema] .kopf-suche__ziel.ist-dran,
    :root[data-thema] .kopf-suche__ziel[aria-selected="true"] {
        outline: 2px solid Highlight;
        outline-offset: -2px;
    }

    :root[data-thema] .kopf-suche-filter__knopf[aria-pressed="true"] {
        forced-color-adjust: none;
        border-color: Highlight;
        background: Highlight;
        color: HighlightText;
    }

    :root[data-thema] .kopf-suche-filter__knopf[aria-pressed="true"]:focus-visible {
        outline-color: CanvasText;
    }

    :root[data-thema].hl-kopf-suche-wort ::highlight(kopf-suche-wort) {
        background-color: Highlight;
        color: HighlightText;
    }
}

:root.aerona-ohne-animation .kopf-suche,
:root.aerona-ohne-animation .kopf-suche *,
:root.aerona-ohne-animation .kopf-suche *::before,
:root.aerona-ohne-animation .kopf-suche *::after {
    transition-duration: 1ms !important;
    transition-delay: 0s !important;
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche,
    :root[data-thema] .kopf-suche *,
    :root[data-thema] .kopf-suche *::before,
    :root[data-thema] .kopf-suche *::after {
        transition-duration: 1ms !important;
        transition-delay: 0s !important;
        animation-duration: 1ms !important;
        animation-delay: 0s !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

:root[data-thema] .kopf-suche__treffer {
    overscroll-behavior: contain;
    scrollbar-width: thin;
}

:root[data-thema].suche-deckt-bahn .kopf__leiste .main-nav {
    visibility: hidden;
    pointer-events: none;
}

:root[data-thema] .kopf-suche__leeren {

    position: relative;
    z-index: 2;
    display: none;
    flex: 0 0 auto;
    place-items: center;
    inline-size: 1.9rem;
    block-size: 1.9rem;
    margin-inline-start: -1.9rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: none;
    color: var(--k-text-still);
    font-size: 0.8rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: color var(--bew-mikro) var(--bew-knackig);
}

@media (pointer: coarse) {
    :root[data-thema] .kopf-suche__leeren {
        inline-size: 2.75rem;
        block-size: auto;
        min-block-size: 1.9rem;
        align-self: stretch;
        margin-inline-start: -2.75rem;
        border-radius: var(--k-rund-klein, 8px);
    }
}

:root.aerona-ohne-animation .kopf-suche__leeren {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche__leeren {
        transition: none;
    }
}

:root[data-thema] .kopf-suche__anzahl {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (forced-colors: active) {
    :root[data-thema] .kopf-suche-aufklappen__knopf[aria-expanded="true"]:not(:focus-visible) {
        outline: 1px solid CanvasText;
        outline-offset: -3px;
    }
}

:root.aerona-ohne-animation .kopf-suche-aufklappen__knopf,
:root.aerona-ohne-animation .kopf-suche-aufklappen__pfeil {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche-aufklappen__knopf,
    :root[data-thema] .kopf-suche-aufklappen__pfeil {
        transition: none;
    }
}

:root[data-thema] .kopf-suche {
    --hier-breite: 2.4rem;
    --hier-x: 1.9rem;
}

@media (pointer: coarse) {
    :root[data-thema] .kopf-suche {
        --hier-breite: 2.75rem;
        --hier-x: 2.75rem;
    }
}

:root[data-thema].hl-kopf-suche-hier ::highlight(kopf-suche-hier) {
    background-color: color-mix(in srgb, var(--k-verlauf-b) 30%, transparent);
    color: var(--k-text);
}

:root[data-thema].hl-kopf-suche-hier-dran ::highlight(kopf-suche-hier-dran) {
    background-color: color-mix(in srgb, var(--k-verlauf-b) 60%, transparent);
    color: var(--k-text);
    text-decoration: underline 2px var(--k-text);
}

@media (forced-colors: active) {
    :root[data-thema] .kopf-suche__hier-zahl {
        border-color: ButtonText;
        background: ButtonFace;
        color: ButtonText;
    }

    :root[data-thema].hl-kopf-suche-hier ::highlight(kopf-suche-hier) {
        background-color: Mark;
        color: MarkText;
    }

    :root[data-thema].hl-kopf-suche-hier-dran ::highlight(kopf-suche-hier-dran) {
        background-color: Highlight;
        color: HighlightText;
    }
}

@media print {

    :root[data-thema].hl-kopf-suche-hier ::highlight(kopf-suche-hier),
    :root[data-thema].hl-kopf-suche-hier-dran ::highlight(kopf-suche-hier-dran) {
        background-color: transparent !important;
        text-decoration: none !important;
    }
}

@media (forced-colors: active) {
    :root[data-thema] .kopf-suche-anheften__stern:hover {
        outline: 1px solid CanvasText;
        outline-offset: -3px;
    }
}

:root.aerona-ohne-animation .kopf-suche-anheften__stern {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche-anheften__stern {
        transition: none;
    }
}

:root[data-thema] .kopf-suche-sofort {
    position: absolute;
    inset-block-start: calc(100% + var(--suche-oben, 0.6rem));
    inset-inline-end: 0;
    z-index: 41;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    inline-size: clamp(14rem, 26vw, 22rem);
    max-block-size: 42vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    padding: 0.7rem 0.8rem 0.6rem;
    border: 1px solid;
    border-color: var(--k-glas-kante);
    border-radius: var(--k-rund-mittel, 14px);
    background: linear-gradient(var(--k-menue), var(--k-menue)), var(--k-grund);
    box-shadow: var(--k-glas-tiefe);
}

:root[data-thema] .kopf-suche-sofort[hidden] {
    display: none;
}

:root[data-thema] .kopf-suche-sofort__ansage {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    white-space: nowrap;
    clip-path: inset(50%);
}

:root.aerona-ohne-animation .kopf-suche-sofort:not([hidden]) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .kopf-suche-sofort:not([hidden]) {
        animation: none;
    }
}

@media print {

    :root,
    :root[data-thema],
    :root[data-thema="hell"],
    :root[data-thema="dunkel"] {
        --k-text: #111;
        --k-text-leise: #333;
        --k-text-still: #555;
        --k-grund: #fff;
        --k-vertieft: #fff;
        --k-menue: #fff;
        --k-glas-kante: #bbb;
        --k-rand-oben: #888;
        --k-rand-unten: #bbb;
        --k-rand-seite: #999;
        --k-glas-tiefe: none;
        --k-schleier: rgba(255, 255, 255, .9);
    }

    html,
    body {
        background: #fff !important;
        color: #111 !important;
    }

    .kopfleiste,
    .site-header,
    .status-band,
    .kapitel-spur,
    .verzeichnis,
    .verz-griff,
    #scrollToTopBtn,
    .nach-oben,
    .modal-backdrop,
    .em-modal,
    .po-gross,
    .cookie-banner,
    .aerona-rollbalken,
    aeri-tier,
    canvas[class*="pixel"],
    canvas[class*="ring"],
    .updates-popup-overlay,
    #site-footer-placeholder {
        display: none !important;
    }

    @layer druck-tinte {
        main,
        main * {
            color: #111 !important;

            -webkit-text-fill-color: currentColor !important;
        }
    }

    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
        text-shadow: none !important;
    }
}




:root[data-thema] #scrollToTopBtn.nach-oben {
    border-color: var(--k-glas-kante);
    position: fixed;

    inset-inline-end: 40px;
    bottom: 40px;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;

    background: var(--k-vertieft);
    background-color: var(--k-menue);
    border-width: 1px;
    border-style: solid;

    border-color:
        var(--k-rand-oben)
        var(--k-rand-seite)
        var(--k-rand-unten)
        var(--k-rand-seite);
    border-radius: var(--k-rund-gross);
    box-shadow:
        var(--k-schatten-weit),
        inset 0 1px 0 var(--k-rand-dicke),
        inset 0 -12px 18px -12px var(--k-vertieft-tief);


    backdrop-filter: none;
    -webkit-backdrop-filter: none;

    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    z-index: 9990;
    opacity: 0;
    visibility: hidden;
    transform: translateY(14px) scale(0.92);
    transition:
        opacity var(--bew-ruhig) var(--bew-rein),
        transform var(--bew-ruhig) var(--bew-feder),
        border-color var(--bew-mikro) var(--bew-knackig),
        box-shadow var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema] #scrollToTopBtn.nach-oben.visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

:root[data-thema] .nach-oben__pfeil {
    position: relative;
    display: block;
    width: 2px;
    height: 17px;
    border-radius: 1px;
    background: var(--k-text-leise);

    transition:
        transform var(--bew-mikro) var(--bew-knackig),
        background-color var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema] .nach-oben__pfeil::before,
:root[data-thema] .nach-oben__pfeil::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 2px;
    height: 9px;
    border-radius: 1px;
    background: inherit;
    transform-origin: 50% 1px;
}

:root[data-thema] .nach-oben__pfeil::before { transform: rotate(-40deg); }
:root[data-thema] .nach-oben__pfeil::after { transform: rotate(40deg); }

:root[data-thema] #scrollToTopBtn.nach-oben::after {
    content: '';
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    padding: 1px;
    background: var(--k-verlauf) border-box;
    mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
    mask-composite: exclude;
    -webkit-mask-composite: xor;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bew-mikro) var(--bew-knackig);
}

@media (max-width: 640px) {
    :root[data-thema] #scrollToTopBtn.nach-oben {
        inset-inline-end: 18px;
        bottom: 18px;
        width: 46px;
        height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {

    :root[data-thema] #scrollToTopBtn.nach-oben,
    :root[data-thema] .nach-oben__pfeil {
        transition: opacity var(--bew-schnell) var(--bew-beides);
        transform: none;
    }

    :root[data-thema] #scrollToTopBtn.nach-oben.faehrt .nach-oben__pfeil {
        animation: none;
    }
}




:root {
    --k-glas-filter: blur(4px) saturate(1.4);
}

:root[data-thema="dunkel"],
.kopf,
.ds-gruende {

    --k-rand-oben: rgba(255, 255, 255, 0.5);
    --k-rand-dicke: rgba(255, 255, 255, 0.09);
    --k-rand-seite: rgba(255, 255, 255, 0.085);
    --k-rand-unten: rgba(255, 255, 255, 0.2);


    --k-vertieft-aussen:
        0 1px 1px rgba(0, 0, 0, 0.5),
        0 8px 18px -10px rgba(0, 0, 0, 0.8);


    --k-glas-brechung:
        inset 0 3px 5px -3px rgba(214, 232, 255, 0.30),
        inset 3px 0 6px -5px rgba(255, 255, 255, 0.10),
        inset -3px 0 6px -5px rgba(255, 255, 255, 0.10),
        inset 0 -4px 7px -4px rgba(255, 244, 230, 0.13);


    --k-schliff: saturate(1.9) brightness(1.14);
    --k-schliff-maske:
        linear-gradient(to bottom, #000, transparent 16px),
        linear-gradient(to top, #000, transparent 12px),
        linear-gradient(to right, #000, transparent 8px),
        linear-gradient(to left, #000, transparent 8px);
}

:root[data-thema="hell"] .kopf,
:root[data-thema="hell"] {

    --k-rand-oben: rgba(255, 255, 255, 1);
    --k-rand-dicke: rgba(255, 255, 255, 0.55);
    --k-rand-seite: rgba(0, 0, 0, 0.12);
    --k-rand-unten: rgba(0, 0, 0, 0.2);

    --k-vertieft-aussen:
        0 1px 1px rgba(0, 0, 0, 0.09),
        0 8px 18px -10px rgba(0, 0, 0, 0.35);


    --k-glas-brechung:
        inset 0 3px 5px -3px rgba(255, 255, 255, 0.95),
        inset 3px 0 6px -5px rgba(255, 255, 255, 0.55),
        inset -3px 0 6px -5px rgba(255, 255, 255, 0.55),
        inset 0 -4px 7px -4px rgba(15, 23, 42, 0.10);


    --k-schliff: saturate(1.6) brightness(0.97);
}


:root[data-thema],
:root[data-thema] .ds-gruende {
    --k-glas-kante:
        var(--k-rand-oben)
        var(--k-rand-seite)
        var(--k-rand-unten)
        var(--k-rand-seite);

    --k-glas-tiefe:
        var(--k-vertieft-aussen),
        inset 0 1px 0 var(--k-rand-dicke),
        var(--k-glas-brechung),
        inset 0 -10px 16px -14px var(--k-vertieft-tief);
    --k-glas-tiefe-randlos:
        var(--k-vertieft-aussen),
        inset 0 1px 0 var(--k-rand-oben),
        inset 0 -1px 0 var(--k-rand-unten),
        inset 1px 0 0 var(--k-rand-seite),
        inset -1px 0 0 var(--k-rand-seite),
        inset 0 2px 0 var(--k-rand-dicke),
        var(--k-glas-brechung),
        inset 0 -10px 16px -14px var(--k-vertieft-tief);
}

:root[data-thema] .kopf .status-band,
:root[data-thema] .platform-card,
:root[data-thema] .status-badge,
:root[data-thema] .status-badge.future,
:root[data-thema] .modal-gate,
:root[data-thema] .thanks-box,
:root[data-thema] .sprachinfo__feld,
:root[data-thema] .sprachwahl__karte:not(.ist-gewaehlt),
:root[data-thema] .sprachwahl__feld,
:root[data-thema] .sprachwahl__zaehler,
:root[data-thema] .fn-notiz {
    border-color: var(--k-glas-kante);
    box-shadow: var(--k-glas-tiefe);
}

:root[data-thema] .kopf .kopf__schiene,
:root[data-thema] .kopf .kopf__konsole,
:root[data-thema] .kopf .kopf__kanzel,
:root[data-thema] .kopf .mobile-toggle,
:root[data-thema] .kopf .status-band > i,
:root[data-thema] .modal-header .close-btn {

    box-shadow: var(--k-glas-tiefe-randlos);
}

:root[data-thema] .kopf .kopf__kanzel,
:root[data-thema] .kopf .kopf__konsole {
    box-shadow:
        var(--k-vertieft-aussen),
        inset 0 1px 0 var(--k-rand-oben),
        inset 0 -1px 0 var(--k-rand-unten),
        inset 1px 0 0 var(--k-rand-seite),
        inset -1px 0 0 var(--k-rand-seite),
        inset 0 2px 0 var(--k-rand-dicke),
        inset 0 -16px 22px -14px var(--k-vertieft-tief);
}

:root[data-thema] .bau-karte,
:root[data-thema] .offen-karte,
:root[data-thema] .fest-punkt,
:root[data-thema] .ende-weg,
:root[data-thema] .gross-zahl,
:root[data-thema] .zahl-teil,
:root[data-thema] .hero-weg:not(.hero-weg--haupt),

:root[data-thema] .fn-app,
:root[data-thema] .fn-teil,
:root[data-thema] .fn-nie__punkt,
:root[data-thema] .fn-plattform,

:root[data-thema] .wk-item,
:root[data-thema] .wk-sum__item,
:root[data-thema] .wk-teil,
:root[data-thema] .wk-check,
:root[data-thema] .wk-honest,
:root[data-thema] .wk-item__icon,

:root[data-thema] .eco-layer,
:root[data-thema] .eco-layer__icon,
:root[data-thema] .eco-layer__tag,
:root[data-thema] .eco-part,
:root[data-thema] .eco-card,
:root[data-thema] .eco-why__item,
:root[data-thema] .eco-why__item > i,
:root[data-thema] .eco-step,

:root[data-thema] .wy-pain__item,
:root[data-thema] .wy-pain__item > i,
:root[data-thema] .wy-own__item,
:root[data-thema] .wy-platform,
:root[data-thema] .wy-platform__icon,
:root[data-thema] .wy-price__side,

:root[data-thema] .ap-card,
:root[data-thema] .ap-card__icon,
:root[data-thema] .ap-tag,
:root[data-thema] .ap-way,
:root[data-thema] .ap-way__icon,

:root[data-thema] .zu-label,
:root[data-thema] .zu-warnung,
:root[data-thema] .zu-stufe,
:root[data-thema] .zu-marken span,
:root[data-thema] .zu-block--hardware,
:root[data-thema] .zu-block--schluessel,
:root[data-thema] .zu-punkt,
:root[data-thema] .zu-satz,
:root[data-thema] .zu-idee,
:root[data-thema] .zu-status,
:root[data-thema] .zu-schlusswege a,

:root[data-thema] .sec-label,
:root[data-thema] .sec-zahl,
:root[data-thema] .sec-hinweis,
:root[data-thema] .sec-karte,

:root[data-thema] .st-intro,
:root[data-thema] .st-case,
:root[data-thema] .st-case__label,
:root[data-thema] .st-reason,
:root[data-thema] .st-card,
:root[data-thema] .st-outro,

:root[data-thema] .ex-count,
:root[data-thema] .ex-rule,
:root[data-thema] .ex-note,

:root[data-thema] .pr-label,
:root[data-thema] .pr-warnung,
:root[data-thema] .pr-stufe,
:root[data-thema] .pr-seite,
:root[data-thema] .pr-satz,
:root[data-thema] .erk-weg,
:root[data-thema] .erk-weg__urteil,
:root[data-thema] .erk-regel,
:root[data-thema] .erk-gross,

:root[data-thema] .sup-label,
:root[data-thema] .sup-hinweis,
:root[data-thema] .sup-karte,
:root[data-thema] .sup-weg,
:root[data-thema] .sup-frage,

:root[data-thema] .dev-badge,
:root[data-thema] .dev-closed,
:root[data-thema] .dev-code,
:root[data-thema] .dev-field,
:root[data-thema] .dev-sec__item,
:root[data-thema] .dev-note,
:root[data-thema] .dev-next span {
    border-color: var(--k-glas-kante);
    box-shadow: var(--k-glas-tiefe);
}


:root[data-thema] .kopf__platte::after,
:root[data-thema] .kopf .dropdown-content.dd-mega::after,
:root[data-thema] .ds-scheibe::after,
:root[data-thema] .ds-probe--platte::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;

    -webkit-backdrop-filter: var(--k-schliff);
    backdrop-filter: var(--k-schliff);

    -webkit-mask: var(--k-schliff-maske);
    mask: var(--k-schliff-maske);
}



@media (max-width: 700px) {
    :root[data-thema] .kopf__platte::after,
    :root[data-thema] .kopf .dropdown-content.dd-mega::after,
    :root[data-thema] .ds-scheibe::after,
    :root[data-thema] .ds-probe--platte::after {
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }
}


:root[data-thema="dunkel"],
.kopf {

    --k-menue: rgba(9, 13, 26, 0.86);

    --k-korn: rgba(255, 255, 255, 0.02);

    --k-platte-schein: linear-gradient(180deg,
        rgba(255, 255, 255, 0.05) 0%,
        rgba(255, 255, 255, 0) 90px);


    --k-feld: rgba(30, 64, 175, 0.13);
}

:root[data-thema="hell"] .kopf,
:root[data-thema="hell"] {

    --k-menue: rgba(255, 255, 255, 0.86);
    --k-korn: rgba(15, 23, 42, 0.02);

    --k-platte-schein: none;

    --k-feld: rgba(15, 23, 42, 0.045);
}


.kopf .kopf__bahn .dropdown-content {
    background-image: var(--k-platte-schein);
    background-color: var(--k-menue);
    box-shadow: var(--k-schatten-weit), inset 0 1px 0 var(--k-rand-oben);
}


.modal-backdrop .modal-content {
    background-image:
        linear-gradient(90deg, var(--k-verlauf-a), var(--k-verlauf-b)),
        radial-gradient(circle at 1px 1px, var(--k-korn) 0.5px, transparent 0),
        var(--k-platte-schein);
    background-size: 100% 2px, 3px 3px, 100% 100%;
    background-position: top left, top left, top left;
    background-repeat: no-repeat, repeat, no-repeat;
}


.kopf .kopf__bahn .dropdown-content,
.modal-backdrop .modal-content {
    border-color: var(--k-glas-kante);
    box-shadow: var(--k-schatten-weit), var(--k-glas-tiefe);
    backdrop-filter: var(--k-glas-filter);
    -webkit-backdrop-filter: var(--k-glas-filter);
}


.kopf .kopf__bahn .dropdown-content {
    background-image:
        radial-gradient(circle at 1px 1px, var(--k-korn) 0.5px, transparent 0),
        var(--k-platte-schein),
        linear-gradient(var(--k-menue), var(--k-menue));
    background-size: 3px 3px, 100% 100%, 100% 100%;
    background-position: top left, top left, top left;
    background-repeat: repeat, no-repeat, no-repeat;
}


:root[data-thema] .weiterlesen {
    padding: 3rem 1.25rem 1rem;
}

:root[data-thema] .wv-innen {
    max-width: 1100px;
    margin: 0 auto;
    padding-top: 2rem;
    border-top: 1px solid var(--k-vertieft-kante);
}

:root[data-thema] .wv-kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.8rem;
    margin-bottom: 1.2rem;
}

:root[data-thema] .wv-titel {
    margin: 0;
    color: var(--k-text);
    font-size: clamp(1.25rem, 2.4vw, 1.6rem);
}

:root[data-thema] .wv-mischen,
:root[data-thema] .wv-einstellungen {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 999px;
    background: var(--k-vertieft);
    color: var(--k-text);
    font: inherit;
    font-size: 0.85rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema] .wv-einstellungen {
    padding: 0.15rem 0.6rem;
    font-size: 0.8rem;
}

:root[data-thema] .wv-karten {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
    gap: 1rem;
}

:root[data-thema] .wv-karte {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    padding: 1.1rem 1.2rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 18px;
    background: var(--k-vertieft);
    color: var(--k-text);
    text-decoration: none;
}

:root[data-thema] .wv-karte__kopf {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    color: var(--k-text-leise);
    font-size: 0.78rem;
}

:root[data-thema] .wv-karte__symbol {
    display: inline-grid;
    place-items: center;
    width: 2rem;
    height: 2rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 50%;
    color: var(--k-text);
}

:root[data-thema] .wv-karte__neu {
    margin-left: auto;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 999px;
}

:root[data-thema] .wv-karte__titel {
    font-size: 1.05rem;
    line-height: 1.35;
}

:root[data-thema] .wv-karte__text {
    color: var(--k-text-leise);
    font-size: 0.88rem;
    line-height: 1.55;
}

:root[data-thema] .wv-hinweis {
    margin: 1rem 0 0;
    color: var(--k-text-leise);
    font-size: 0.8rem;
}

:root[data-thema] .wv-werkzeuge,
:root[data-thema] .wv-touren,
:root[data-thema] .wv-merkliste {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.1rem;
}

:root[data-thema] .wv-werkzeuge:empty,
:root[data-thema] .wv-touren[hidden],
:root[data-thema] .wv-merkliste[hidden] {
    display: none;
}

:root[data-thema] .wv-knopf,
:root[data-thema] .wv-merk {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    min-height: 36px;
    padding: 0.35rem 0.9rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 999px;
    background: var(--k-vertieft);
    color: var(--k-text);
    font: inherit;
    font-size: 0.85rem;
    text-decoration: none;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema] .wv-merkliste__titel {
    margin-inline-end: 0.3rem;
    color: var(--k-text-leise);
    font-size: 0.85rem;
}

:root[data-thema] .rk-reihe {
    padding: 2.5rem 1.25rem 0.5rem;
}

:root[data-thema] .rk-innen {
    max-width: 1100px;
    margin: 0 auto;
    padding: 1.4rem 1.3rem 1.1rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 18px;
    background: var(--k-vertieft);
    color: var(--k-text);
}

:root[data-thema] .rk-titel {
    margin: 0 0 0.35rem;
    color: var(--k-text);
    font-size: clamp(1.15rem, 2.2vw, 1.4rem);
}

:root[data-thema] .rk-hinweis {
    margin: 0 0 1rem;
    color: var(--k-text-leise);
    font-size: 0.88rem;
    line-height: 1.55;
}

:root[data-thema] .rk-hinweis .az {
    margin-inline-end: 0.3rem;
    color: var(--k-text-still);
}

:root[data-thema] .rk-knoepfe {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 96px), 1fr));
    gap: 0.6rem;
}

:root[data-thema] .rk-knopf {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-height: 44px;
    padding: 0.7rem 0.4rem 0.6rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 14px;
    background: var(--k-vertieft-tief);
    color: var(--k-text);
    font: inherit;
    font-size: 0.85rem;
    line-height: 1.25;
    text-align: center;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema] .rk-bild {
    display: block;
    width: 48px;
    height: 48px;
    object-fit: contain;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .rk-knopf.rk-hupf .rk-bild { animation: none; }
}

:root.aerona-ohne-animation .rk-knopf.rk-hupf .rk-bild { animation: none; }

:root[data-thema] .rk-ansage {
    min-height: 1.3em;
    margin: 0.8rem 0 0;
    color: var(--k-text);
    font-size: 0.9rem;
}

:root[data-thema] .rk-fuss {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
    margin: 0.7rem 0 0;
    font-size: 0.85rem;
}

:root[data-thema] .rk-link {
    padding-block: 2px;
    color: var(--k-text);
    text-decoration: underline;
    text-decoration-color: var(--k-vertieft-kante);
    text-underline-offset: 3px;
}

:root[data-thema]:not(.aerona-pixel-aus) .rk-link:is(:hover, :focus-visible) { text-decoration-color: transparent; }

:root[data-thema] .rk-klein {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 36px;
    padding: 0.25rem 0.8rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 999px;
    background: var(--k-vertieft-tief);
    color: var(--k-text);
    font: inherit;
    font-size: 0.85rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

@media (max-width: 480px) {
    :root[data-thema] .rk-reihe { padding-inline: 0.75rem; }
    :root[data-thema] .rk-innen { padding: 1.1rem 0.9rem 0.9rem; }

    :root[data-thema] .rk-knoepfe { grid-template-columns: repeat(auto-fit, minmax(min(100%, 5.4rem), 1fr)); gap: 0.45rem; }
    :root[data-thema] .rk-knopf { padding-inline: 0.2rem; font-size: 0.78rem; -webkit-hyphens: auto; hyphens: auto; }
    :root[data-thema] .rk-bild { width: 40px; height: 40px; }
}

:root[data-thema].lh-kurz #aerona-scroll-progress {
    display: none;
}

:root[data-thema].lh-ruhig .lh-lineal {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .lh-lineal {
        transition: none;
    }
}

:root[data-thema] .ml-schwebe {
    position: fixed;
    inset-inline-end: 44px;
    bottom: 104px;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid transparent;
    border-color: var(--k-glas-kante);
    border-radius: 50%;
    background: var(--k-menue);
    color: var(--k-text);
    box-shadow: var(--k-schatten-weit);
    font-size: 1rem;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    z-index: 9990;
}

@media (max-width: 640px) {
    :root[data-thema] .ml-schwebe {
        inset-inline-end: 19px;
        bottom: 74px;
    }
}

.ml-leer { opacity: .45; }

body.z-modal:not(.z-nie) .ml-schwebe { display: none; }

body.z-modal-radar:not(#z-nie) :is(.ml-schwebe, .ko-kompass, .tr-leiste, #scrollToTopBtn) { display: none; }

body.z-nav-offen:not(.z-nie) .ml-schwebe,
body.z-nav-offen:not(.z-nie) .ko-kompass,
body.z-nav-offen:not(.z-nie) .tr-leiste { display: none; }

@media (max-width: 760px) {
    :root[data-thema] body.z-kompass .kapitel-spur { display: none; }
}

body.z-geb-offen:not(.z-nie) .ml-schwebe,
body.z-geb-offen:not(.z-nie) .ko-kompass,
body.z-geb-offen:not(.z-nie) #scrollToTopBtn { display: none; }

:root { --sb-streifen: 2.875rem; }

:root.sb-platz:not(.sb-da)[data-thema] main header.pr-hero {
    margin-bottom: calc(3.5rem + var(--sb-streifen));
}

:root[data-thema] .sb-steckbrief {
    box-sizing: border-box;
    width: calc(100% - 32px);
    max-width: 60rem;
    margin: 1rem auto 2rem;
    box-shadow: inset 0 0 0 1px var(--k-vertieft-kante);
    border-radius: var(--k-rund-klein, 10px);
    background: var(--k-vertieft);
    color: var(--k-text);
}

:root[data-thema] .pr-main .sb-steckbrief {
    width: auto;
    max-width: none;
    margin-inline: 0;
}

:root[data-thema] .pr-hero + .sb-steckbrief {
    margin-top: -2rem;
}

:root[data-thema] .sb-streifen {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    box-sizing: border-box;
    height: var(--sb-streifen);
    padding: 0 1rem;

    color: var(--k-text);
    font-size: 0.9rem;
    line-height: 1.3;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    list-style: none;
    border-radius: var(--k-rund-klein, 10px);
}

:root[data-thema] .sb-streifen > .az:first-child,
:root[data-thema] .sb-block__titel .az, :root[data-thema] .sb-spuren .az {
    display: inline-block; color: var(--k-akzent-hell); background: var(--k-verlauf);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

:root[data-thema] .sb-streifen__titel {
    flex: 0 0 auto;
    font-weight: 600;
    white-space: nowrap;
}

:root[data-thema] .sb-meta {
    flex: 1 1 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-width: 0;
    height: 1.3em;
    overflow: hidden;
    color: var(--k-text-leise);
}

:root[data-thema] .sb-meta__teil { white-space: nowrap; }

:root[data-thema] .sb-meta__teil::before {
    content: '·';
    padding-inline: 0.45rem;
}

:root[data-thema] .sb-pfeil {
    flex: 0 0 auto;
    margin-inline-start: auto;
    color: var(--k-text-leise);
    font-size: 0.8rem;
    transition: transform var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema] .sb-innen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
    gap: 1rem 1.5rem;
    padding: 0.4rem 1rem 1rem;
    border-top: 1px solid var(--k-vertieft-kante);
    font-size: 0.92rem;
    line-height: 1.55;
}

@media (max-width: 600px) {
    :root { --sb-streifen: 3.75rem; }
    :root[data-thema] .sb-streifen {
        flex-wrap: wrap;
        align-content: center;
        gap: 0.15rem 0.5rem;
        padding: 0 0.8rem;
        font-size: 0.85rem;
    }
    :root[data-thema] .sb-pfeil { order: 2; }
    :root[data-thema] .sb-meta {
        order: 3;
        flex: 1 0 100%;
        padding-inline-start: 1.6rem;
        font-size: 0.82rem;
    }
    :root[data-thema] .sb-meta__teil:first-child::before { content: none; }
    :root[data-thema] .sb-innen { grid-template-columns: 1fr; padding-inline: 0.8rem; }
}

:root.aerona-bewegung-aus .sb-pfeil,
:root.aerona-ohne-animation .sb-pfeil { transition: none; }

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .sb-pfeil { transition: none; }
}

:root.aerona-bewegung-aus .lb-blitz,
:root.aerona-ohne-animation .lb-blitz { animation: none; }

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

html.aerona-fokus #aerona-leseraum-fortschritt {
    display: block;
}

.aerona-leseraum-leiste {
    position: fixed;

    bottom: calc(24px + var(--tour-hoehe, 0px));
    left: 50%;
    transform: translateX(-50%) translateY(30px);
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 9%, var(--k-grund)) 85%, transparent);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 9999px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    z-index: 99998;
    opacity: 0;
    pointer-events: none;
    transition: transform var(--bew-normal) var(--bew-knackig), opacity var(--bew-normal) var(--bew-knackig);
}

html.aerona-fokus .aerona-leseraum-leiste {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.aerona-leseraum-zeit {
    font-size: 0.82rem;
    color: var(--k-text-leise);
    padding: 0 6px;
    white-space: nowrap;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.aerona-leseraum-zeit strong {
    color: var(--k-hinweis);
    font-weight: 500;
}

.aerona-leseraum-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: transparent;
    border: 1px solid transparent;
    color: color-mix(in srgb, var(--k-text) 50%, var(--k-text-leise));
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    font-size: 0.85rem;
    transition: var(--bew-mikro-bund);
}

.aerona-leseraum-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
}

.aerona-leseraum-btn:focus-visible {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border-color: rgba(255, 255, 255, 0.2);
    outline: none;
}

.aerona-leseraum-btn.aktiv {
    background: color-mix(in srgb, var(--k-text) 10%, transparent);
    border-color: color-mix(in srgb, var(--k-text) 35%, transparent);
    color: var(--k-hinweis);
}

.aerona-leseraum-trenner {
    width: 1px;
    height: 18px;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 2px;
}

html.aerona-fokus.leseraum-serif main {
    font-family: 'Aerona Classic', Georgia, serif   ;
    letter-spacing: 0.01em;
}

html.aerona-fokus.leseraum-schrift-gross main {
    font-size: 1.15em;
    line-height: 1.85;
}

html.aerona-fokus.leseraum-schrift-riesig main {
    font-size: 1.3em;
    line-height: 1.95;
}

html.aerona-fokus[data-leseraum-thema="sepia"] {
    background-color: #f6efe2 !important;
}

html.aerona-fokus[data-leseraum-thema="sepia"] body {
    background-color: #f6efe2 !important;
    color: #3d3122 !important;
}

html.aerona-fokus[data-leseraum-thema="sepia"] main p,
html.aerona-fokus[data-leseraum-thema="sepia"] main li {
    color: #3d3122 !important;
}

html.aerona-fokus[data-leseraum-thema="sepia"] main h1,
html.aerona-fokus[data-leseraum-thema="sepia"] main h2,
html.aerona-fokus[data-leseraum-thema="sepia"] main h3 {
    color: #23190e !important;
}

html.aerona-fokus[data-leseraum-thema="sepia"] .aerona-leseraum-leiste {
    background: rgba(240, 230, 215, 0.9);
    border-color: color-mix(in srgb, color-mix(in srgb, var(--k-text) 17.6%, var(--k-grund)) 15%, transparent);
    color: #3d3122;
}

html.aerona-fokus[data-leseraum-thema="sepia"] .aerona-leseraum-btn {
    color: #584632;
}

html.aerona-fokus[data-leseraum-thema="sepia"] .aerona-leseraum-btn:hover {
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 17.6%, var(--k-grund)) 10%, transparent);
    color: #23190e;
}

html.aerona-fokus[data-leseraum-thema="oled"] {
    background-color: #000000 !important;
}

html.aerona-fokus[data-leseraum-thema="oled"] body {
    background-color: #000000 !important;
    color: color-mix(in srgb, var(--k-text) 70%, var(--k-text-leise)) !important;
}

html.aerona-fokus[data-leseraum-thema="oled"] .aerona-leseraum-leiste {
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 3.9%, var(--k-grund)) 95%, transparent);
    border-color: rgba(255, 255, 255, 0.15);
}

@media (max-width: 600px) {
    .aerona-leseraum-leiste {
        bottom: calc(12px + var(--tour-hoehe, 0px));
        padding: 4px 10px;
        gap: 4px;
        max-width: 95vw;
    }
    .aerona-leseraum-zeit {
        display: none;
    }
}

:root[data-thema] .lt-packen-btn,
:root[data-thema] .sb-knopf-pille {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 4px 12px;
    background: var(--k-vertieft);
    border: 1px solid var(--k-vertieft-kante);
    border-radius: 9999px;
    color: var(--k-text);
    font: inherit;
    font-size: 0.8rem;
    text-decoration: none;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: border-color var(--bew-mikro) var(--bew-knackig);
}

:root[data-thema] .wv-werkzeuge .lt-packen-btn {
    margin-top: 0;
    padding: 0.35rem 0.9rem;
    font-size: 0.85rem;
}

#aeri-ende-moment {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    z-index: 900;
    width: min(650px, calc(100% - 32px));
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 0 auto;
    padding: 12px 20px;
    background: color-mix(in srgb, color-mix(in srgb, var(--k-text) 9%, var(--k-grund)) 60%, transparent);
    border: 1px solid var(--k-glas-kante, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    opacity: 0;

    transition: opacity var(--bew-normal) steps(4, end);
    pointer-events: auto;
}

#aeri-ende-moment.sichtbar {
    opacity: 1;
}

.aeri-ende-figur {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    pointer-events: none;
}

.aeri-ende-text {
    flex: 1;
    font-size: 0.88rem;
    color: color-mix(in srgb, var(--k-text) 70%, var(--k-text-leise));
    line-height: 1.4;
    margin: 0;
}

.aeri-ende-text strong {
    color: var(--k-hinweis);
    font-weight: 600;
}

.aeri-ende-weg {
    background: transparent;
    border: none;
    color: var(--k-text-still);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    font-size: 0.9rem;
    padding: 4px 6px;
    border-radius: 6px;
    transition: color var(--bew-mikro) var(--bew-knackig);
}

@media (prefers-reduced-motion: reduce) {
    #aeri-ende-moment {
        transition: none !important;
        transform: none !important;
    }
    .aeri-such-moment {
        transition: none !important;
        transform: none !important;
    }
}

:root.aerona-kontrast[data-thema] .ku-vorlage { opacity: 0.38; }

:root.aerona-kontrast[data-thema] .ku-linien line { opacity: 1; }

:root.aerona-kontrast[data-thema] .ku-luecken { opacity: 1; }

:root[data-thema].hl-aerona-vorlesen ::highlight(aerona-vorlesen) {
    background-color: #6b5200;
    color: #ffffff;
    text-decoration: underline 2px currentColor;
    text-underline-offset: 3px;
}

:root[data-thema="hell"].hl-aerona-vorlesen ::highlight(aerona-vorlesen) {
    background-color: #ffe066;
    color: #1a1a1a;
}

:root.vl-waehlbar main :is(p, li, dd, dt, blockquote, figcaption, h1, h2, h3, h4, h5, h6, td, th):hover:not(a *, button *):not(:has(:is(p, li, dd, dt, blockquote, figcaption, td, th):hover)) {
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    outline: 1px dashed var(--k-fokus);
    outline-offset: 3px;
}

@media (max-width: 640px) {

    body.z-kompass .lh-vorlesen .vl-blase {
        bottom: calc(100% + 74px);
    }
}

@media print {

    :root.hl-aerona-vorlesen ::highlight(aerona-vorlesen) {
        background-color: transparent;
        color: inherit;
        text-decoration: none;
    }
}

:root[data-thema] main :is(p, li, dd, td, figcaption, blockquote, .pr-warnung > span, .ex-note > span,
.ex-count__note, .ad-note > span, .wy-common > span, .aeri-noch-nicht-text > span) > a:not(.pr-seite, .ew-weiter,
.pr-label, [class*="knopf"], [class*="karte"], [class*="kachel"],
[class*="button"], [class*="btn"], [class*="pille"], .dp-leer__wege a,
.ap-hero__weiter a, .ap-outro a, .wy-pain__item a, .wy-common a, .wk-honest a, .zk-geb-link a, .ae-zeit__text a),
:root[data-thema] main :is(p, li, dd, td) > sup > a {

    text-decoration-line: underline;
    text-decoration-color: transparent;
    text-decoration-thickness: max(1px, 0.06em);
    text-underline-offset: 0.2em;
    background-image: var(--k-verlauf);
    background-repeat: no-repeat;
    background-size: 100% max(1px, 0.06em);
    background-position: 0 calc(100% - 0.02em);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

:root.aerona-kontrast main :is(p, li, dd, td, figcaption, blockquote, .pr-warnung > span, .ex-note > span,
.ex-count__note, .ad-note > span, .wy-common > span, .aeri-noch-nicht-text > span) > a,
:root.aerona-kontrast main :is(p, li, dd, td) > sup > a {
    text-decoration-color: currentColor;
    text-decoration-thickness: 2px;
    background-image: none;
}

:root.aerona-links-strich main :is(p, li, dd, td, figcaption, blockquote, .pr-warnung > span, .ex-note > span,
.ex-count__note, .ad-note > span, .wy-common > span, .aeri-noch-nicht-text > span) > a,
:root.aerona-links-strich main :is(p, li, dd, td) > sup > a {
    background-image: none;
}

.zum-inhalt {
    position: fixed;
    top: 0.5rem;
    left: 0.5rem;
    z-index: 10000;
    padding: 0.6rem 1rem;
    border-radius: 10px;
    background: var(--k-grund);
    color: var(--k-text);
    font-weight: 700;
    text-decoration: underline;
    transform: translateY(-200%);
}

:root[data-thema].aerona-zeilen-16 main :is(p, li, dd, dt, blockquote,
figcaption, td, th, cite, .sf-text, .pr-unter) {
    line-height: 1.6 !important;
}

:root[data-thema].aerona-zeilen-19 main :is(p, li, dd, dt, blockquote,
figcaption, td, th, cite, .sf-text, .pr-unter) {
    line-height: 1.9 !important;
}

:root[data-thema].aerona-buchstaben-weit main,
:root[data-thema].aerona-buchstaben-weit main :is(p, li, dd, dt, blockquote,
figcaption, td, th, cite, h1, h2, h3, h4, .sf-text, .pr-unter) {
    letter-spacing: 0.04em !important;
    word-spacing: 0.16em !important;
}

:root[data-thema].aerona-buchstaben-weit main :is(svg, code, pre, kbd, samp,
i, .az, .az, .az, [class^="fa-"], [class*=" fa-"]),
:root[data-thema].aerona-buchstaben-weit main svg * {
    letter-spacing: normal !important;
    word-spacing: normal !important;
}

:root[data-thema]:is(.aerona-buchstaben-weit, .aerona-leichter) main :is(h1, h2, h3, h4) {
    overflow-wrap: break-word !important;
}

:root[data-thema].aerona-textbreite-schmal main :is(p, li, dd, blockquote,
figcaption, h1, h2, h3, h4, .sf-text, .pr-unter) {
    max-width: 70ch !important;
}

:root[data-thema].aerona-textbreite-schmal main :is(td, th) :is(p, li) {
    max-width: none !important;
}

:root[data-thema].aerona-links-strich main a:not(.pr-seite, .ew-weiter,
.pr-label, [class*="knopf"], [class*="karte"], [class*="kachel"],
[class*="button"], [class*="btn"]) {
    text-decoration: underline !important;
    text-decoration-thickness: max(1px, 0.06em);
    text-underline-offset: 0.18em;
}

:root[data-thema].aerona-mausziel-gross main :is(button, summary, select,
[role="button"], [role="switch"], [role="radio"], [role="tab"]) {
    min-height: 44px !important;
}

:root[data-thema].aerona-mausziel-gross main a:not(:is(p, li, td, th, h1, h2,
h3, h4, blockquote, figcaption, cite, small, .sf-text, .pr-unter) a) {
    min-height: 44px !important;
}

:root[data-thema] {
    --silbe-a: #60a5fa;
    --silbe-b: #f87171;
}

:root[data-thema="hell"] {
    --silbe-a: #1e40af;
    --silbe-b: #991b1b;
}

:root.aerona-kontrast[data-thema] {
    --silbe-a: #93c5fd !important;
    --silbe-b: #fca5a5 !important;
}

:root.aerona-kontrast[data-thema="hell"] {
    --silbe-a: #1e3380 !important;
    --silbe-b: #701a1a !important;
}

:root[data-thema].aerona-silben ::highlight(aerona-silbe-a) {
    color: var(--silbe-a);
}

:root[data-thema].aerona-silben ::highlight(aerona-silbe-b) {
    color: var(--silbe-b);
}

@media (forced-colors: active) {
    :root[data-thema].aerona-silben ::highlight(aerona-silbe-a),
    :root[data-thema].aerona-silben ::highlight(aerona-silbe-b) {
        color: CanvasText;
    }
}

:root.aerona-farbsehen-protan {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' color-interpolation-filters='linearRGB'%3E%3CfeColorMatrix type='matrix' values='0.152286 1.052583 -0.204868 0 0 0.114503 0.786281 0.099216 0 0 -0.003882 -0.048116 1.051998 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}

:root.aerona-farbsehen-deutan {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' color-interpolation-filters='linearRGB'%3E%3CfeColorMatrix type='matrix' values='0.367322 0.860646 -0.227968 0 0 0.280085 0.672501 0.047413 0 0 -0.011820 0.042940 0.968881 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}

:root.aerona-farbsehen-tritan {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' color-interpolation-filters='linearRGB'%3E%3CfeColorMatrix type='matrix' values='1.255528 -0.076749 -0.178779 0 0 -0.078411 0.930809 0.147602 0 0 0.004733 0.691367 0.303900 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}

:root.aerona-farbsehen-grau {
    filter: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='f' color-interpolation-filters='linearRGB'%3E%3CfeColorMatrix type='matrix' values='0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3C/svg%3E#f");
}

@media print {
    :root.aerona-farbsehen-protan,
    :root.aerona-farbsehen-deutan,
    :root.aerona-farbsehen-tritan,
    :root.aerona-farbsehen-grau {
        filter: none;
    }
}

:root[data-thema="hell"] .tm-mark {
    background: linear-gradient(var(--k-winkel), color-mix(in srgb, var(--k-verlauf-tief-a) 16%, transparent), color-mix(in srgb, var(--k-verlauf-tief-b) 16%, transparent));
    background: linear-gradient(var(--k-winkel), color-mix(in srgb, var(--k-verlauf-a) 18%, transparent),
        color-mix(in srgb, var(--k-verlauf-b) 18%, transparent));
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .bg-gross.offen {
        animation: none;
    }

    :root[data-thema] .bg-bild {
        transition: none;
    }

    :root[data-thema] .bg-gross.laedt .bg-buehne::after {
        animation: none;
        border-top-color: var(--k-kante);
    }
}

:root.aerona-ohne-animation .bg-gross.offen {
    animation: none;
}

:root.aerona-ohne-animation .bg-bild {
    transition: none;
}

:root.aerona-ohne-animation .bg-gross.laedt .bg-buehne::after {
    animation: none;
    border-top-color: var(--k-kante);
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .ns-karte:not([hidden]) {
        animation: ns-auf var(--bew-mikro) steps(4, end);
    }
}
:root[data-thema="hell"] .ds-schwebe__fenster {
    background: linear-gradient(rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.96)) padding-box, var(--k-verlauf) border-box;
}

@media (prefers-reduced-motion: reduce) {
    .rueckblick.rb--sanft .rb-kasten {
        animation: none;
    }
}

.aerona-quiz .aq-kasten { max-width: 38rem; }

.aerona-quiz .aq-antwort,
.aerona-quiz .aq-rueckblick__eintrag,
.aerona-quiz .aq-mehr { position: relative; }

.aerona-quiz .aq-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.aerona-quiz .aq-leiste {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 0 0 0.9rem;
}

.aerona-quiz .aq-stand {
    margin: 0;
    color: var(--k-text-leise);
    font-size: 0.9rem;
    font-variant-numeric: tabular-nums;
}

.aerona-quiz .aq-art {
    margin: 0 0 0.3rem;
    color: var(--k-text-still);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.aerona-quiz .aq-frage {
    margin: 0 0 1rem;
    color: var(--k-text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.4;
    overflow-wrap: anywhere;
}

.aerona-quiz .aq-frage:focus { outline: none; }
.aerona-quiz .aq-frage:focus-visible,
.aerona-quiz .aq-ergebnis:focus-visible { outline: 2px solid var(--k-fokus); outline-offset: 4px; }

.aerona-quiz .aq-antworten {
    display: grid;
    gap: 0.6rem;
}

.aerona-quiz .aq-antwort {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 48px;
    padding: 0.65rem 0.9rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: var(--k-rund-mittel, 14px);
    background: var(--k-vertieft);
    color: var(--k-text);
    font: inherit;
    font-size: 1rem;
    line-height: 1.45;
    text-align: start;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

.aerona-quiz .aq-antwort:focus-visible { outline: 2px solid var(--k-fokus); outline-offset: 2px; }
.aerona-quiz .aq-antwort[aria-disabled="true"] { cursor: url("../images/zeiger/pfeil.svg") 3 3, default; }

.aerona-quiz .aq-nr {
    display: inline-grid;
    flex: 0 0 auto;
    place-items: center;
    width: 1.8rem;
    height: 1.8rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: var(--k-rund-pille, 999px);
    color: var(--k-text-leise);
    font-size: 0.85rem;
    font-variant-numeric: tabular-nums;
}

.aerona-quiz .aq-text { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.aerona-quiz .aq-marke { flex: 0 0 auto; }

.aerona-quiz .aq-antwort[data-ergebnis="richtig"] {
    border-color: var(--k-punkt-neu);
    box-shadow: inset 0 0 0 1px var(--k-punkt-neu);
}

.aerona-quiz .aq-antwort[data-ergebnis="richtig"] .aq-marke,
.aerona-quiz .aq-antwort[data-ergebnis="richtig"] .aq-nr { color: var(--k-punkt-neu); border-color: var(--k-punkt-neu); }

.aerona-quiz .aq-antwort[data-ergebnis="falsch"] {
    border-color: var(--k-punkt-ueber);
    box-shadow: inset 0 0 0 1px var(--k-punkt-ueber);
}

.aerona-quiz .aq-antwort[data-ergebnis="falsch"] .aq-marke,
.aerona-quiz .aq-antwort[data-ergebnis="falsch"] .aq-nr { color: var(--k-punkt-ueber); border-color: var(--k-punkt-ueber); }

.aerona-quiz .aq-tipp {
    margin: 0.8rem 0 0;
    color: var(--k-text-still);
    font-size: 0.82rem;
}

@media (hover: none) and (pointer: coarse) {
    .aerona-quiz .aq-tipp { display: none; }
}

.aerona-quiz .aq-aufloesung {
    margin: 1rem 0 0;
    padding: 0.8rem 1rem;
    border-inline-start: 3px solid var(--k-punkt-ueber);
    border-radius: 0 var(--k-rund-klein, 10px) var(--k-rund-klein, 10px) 0;
    background: var(--k-vertieft-tief);
}

.aerona-quiz .aq-aufloesung--gut { border-inline-start-color: var(--k-punkt-neu); }

.aerona-quiz .aq-satz {
    margin: 0 0 0.7rem;
    color: var(--k-text);
    font-size: 0.95rem;
    line-height: 1.55;
}

.aerona-quiz .aq-reihe {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem 1rem;
}

.aerona-quiz .aq-mehr {
    color: var(--k-text);
    font-size: 0.88rem;
    text-decoration: underline;
    text-decoration-color: var(--k-text-leise);
    text-underline-offset: 3px;
}

.aerona-quiz .aq-mehr .az { margin-inline-start: 0.2rem; font-size: 0.75em; }
.aerona-quiz .aq-mehr:focus-visible { outline: 2px solid var(--k-fokus); outline-offset: 2px; }

.aerona-quiz .aq-ergebnis {
    margin: 0 0 0.6rem;
    color: var(--k-text);
    font-size: 1.6rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.aerona-quiz .aq-ergebnis:focus { outline: none; }

.aerona-quiz .aq-bestwert {
    margin: 0 0 1rem;
    color: var(--k-text-leise);
    font-size: 0.9rem;
}

.aerona-quiz .aq-rueckblick {
    display: grid;
    gap: 0.5rem;
    margin: 0 0 1.2rem;
    padding: 0;
    list-style: none;
}

.aerona-quiz .aq-rueckblick__eintrag {
    display: grid;
    grid-template-columns: 1.2rem 1fr;
    gap: 0.15rem 0.6rem;
    padding: 0.55rem 0.8rem;
    border: 1px solid var(--k-vertieft-kante);
    border-radius: var(--k-rund-klein, 10px);
    background: var(--k-vertieft);
    font-size: 0.88rem;
}

.aerona-quiz .aq-rueckblick__eintrag > .az { margin-top: 0.2rem; color: var(--k-punkt-ueber); }
.aerona-quiz .aq-rueckblick__eintrag--gut > .az { color: var(--k-punkt-neu); }
.aerona-quiz .aq-rueckblick__frage { color: var(--k-text); overflow-wrap: anywhere; }
.aerona-quiz .aq-rueckblick .aq-mehr { grid-column: 2; font-size: 0.8rem; }

@media (max-width: 480px) {
    .aerona-quiz .aq-frage { font-size: 1.08rem; }
    .aerona-quiz .aq-reihe { justify-content: flex-start; }
    .aerona-quiz .aq-reihe .pf-knopf { flex: 1 1 100%; justify-content: center; }
}

@media (prefers-reduced-motion: no-preference) {
    .tl-menue:not([hidden]):not(.tl-menue--ruhig) {
        animation: tl-auf var(--bew-mikro) steps(4, end);
    }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 600px) {
    .tl-menue:not([hidden]):not(.tl-menue--ruhig) {
        animation: tl-blatt var(--bew-mikro) steps(4, end);
    }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .az-meldung,
    :root[data-thema] .az-meldung--da,
    :root[data-thema] .az-meldung--weg {
        transform: none;
        transition: none;
    }
}

:root.aerona-bewegung-aus .az-meldung {
    transform: none;
    transition: none;
}

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

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .lv-karte:not([hidden]) {
        animation: lv-auf var(--bew-mikro) steps(4, end);
    }
}

:root[data-thema].ek-an [aria-describedby~="ek-karte"]:not(:focus-visible) {

    outline: 1.5px dashed var(--k-text-leise);
    outline-offset: 3px;
}

:root[data-thema].ek-karte-offen .lv-karte {
    display: none;
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation):not(.aerona-bewegung-aus) .ek-karte:not([hidden]) {
        animation: ek-auf var(--bew-mikro) steps(4, end);
    }
}

@media print {

    :root[data-thema].ek-an [aria-describedby~="ek-karte"] {
        outline: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .tr-leiste--auftritt .tr-innen {
        animation: none;
    }
}

:root.tr-laeuft #scrollToTopBtn,
:root.tr-laeuft .ml-schwebe,
:root.tr-laeuft .lh-vorlesen {
    translate: 0 calc(-1 * var(--tour-hoehe, 0px));
}

:root[data-thema] .tr-start__dauer {
    color: var(--k-text-leise);
    font-size: 0.78rem;

    white-space: nowrap;
}

:root[data-thema] .tr-start__dauer::before {
    content: "·";
    margin-inline: 0.1rem 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .sk-k,
    :root[data-thema] .sk-kanten line {
        transition: none;
    }
}

:root[data-thema] .ko-kompass {
    position: fixed;
    top: var(--ko-oben, 112px);
    inset-inline-end: var(--ko-rand, 18px);
    z-index: 9985;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
    font-size: 0.85rem;
}

:root[data-thema] .ko-griff,
:root[data-thema] .ko-zu,
:root[data-thema] .fk-ende,
:root[data-thema] .ls-hinweis__los,
:root[data-thema] .ls-hinweis__zu {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    min-height: 36px;
    border: 1px solid transparent;
    border-color: var(--k-glas-kante);
    border-radius: 999px;
    background: var(--k-menue);
    color: var(--k-text);
    font: inherit;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema] .ko-griff {
    padding: 0.35rem 0.8rem;
    box-shadow: var(--k-schatten-weit);
}

:root[data-thema] .ko-griff__zeit {
    color: var(--k-text-leise);
    font-variant-numeric: tabular-nums;
}

:root[data-thema] .ko-feld,
:root[data-thema] .ls-hinweis {
    border: 1px solid transparent;
    border-color: var(--k-glas-kante);
    background: var(--k-menue);
    color: var(--k-text);
    box-shadow: var(--k-schatten-weit);
    -webkit-backdrop-filter: blur(18px) saturate(1.2);
    backdrop-filter: blur(18px) saturate(1.2);
}

:root[data-thema] .ko-feld {
    width: min(20rem, 40vw);
    max-height: calc(100vh - var(--ko-oben, 112px) - 80px);

    overflow: hidden auto;
    overscroll-behavior: contain;
    padding: 0.75rem 0.5rem 0.75rem 0.75rem;
    border-radius: var(--k-rund-gross, 18px);
}

:root[data-thema] body.z-modal:not(.z-nie) .ko-kompass,
:root[data-thema] body.z-kompass-offen .ls-hinweis,
:root[data-thema] body.z-modal:not(.z-nie) .ls-hinweis {
    display: none;
}

@media (max-width: 760px) {
    :root[data-thema] .ko-kompass {
        top: auto;
        bottom: calc(18px + env(safe-area-inset-bottom, 0px));
        inset-inline: 18px auto;
        flex-direction: column-reverse;
        align-items: flex-start;
    }

    :root[data-thema] .ko-griff {
        width: 46px;
        height: 46px;
        padding: 0;
    }

    :root[data-thema] .ko-griff__zeit {
        display: none;
    }

    :root[data-thema] .ko-feld {
        width: calc(100vw - 36px);
        max-height: 60vh;
    }

    :root[data-thema] body.z-vorlesen:not(.z-nie) .ko-kompass {
        bottom: 84px;
    }

    :root[data-thema] body.z-tr-leiste:not(.z-nie) .ko-kompass {
        display: none;
    }
}

@media (min-width: 761px) {
    :root[data-thema] body.z-kompass .ls-hinweis {
        top: calc(var(--ls-oben, 112px) + 48px);
    }
}

:root[data-thema].aerona-ohne-animation .ls-hinweis,
:root[data-thema].aerona-bewegung-aus .ls-hinweis { transition: none; }
@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .ls-hinweis { transition: none; }
}

:root[data-thema].aerona-fokus .fk-ende {
    position: fixed;
    top: 14px;
    inset-inline-end: 18px;
    z-index: 9995;
    display: inline-flex;
    padding: 0.35rem 0.9rem;
    box-shadow: var(--k-schatten-weit);
    font-size: 0.85rem;
}

:root[data-thema].aerona-fokus .kopfleiste,
:root[data-thema].aerona-fokus .status-band,
:root[data-thema].aerona-fokus #site-footer-placeholder,
:root[data-thema].aerona-fokus body > footer,
:root[data-thema].aerona-fokus .weiterlesen,
:root[data-thema].aerona-fokus #scrollToTopBtn,
:root[data-thema].aerona-fokus .ml-schwebe,
:root[data-thema].aerona-fokus .kapitel-spur,
:root[data-thema].aerona-fokus .kapitel-blende,
:root[data-thema].aerona-fokus .verzeichnis,
:root[data-thema].aerona-fokus .werk-leiste,
:root[data-thema].aerona-fokus .ko-kompass,
:root[data-thema].aerona-fokus .ls-hinweis,
:root[data-thema].aerona-fokus .st-knopf--unten,
:root[data-thema].aerona-fokus [data-aeri-platz],
:root[data-thema].aerona-fokus body > aeri-tier {
    display: none !important;
}

:root[data-thema].aerona-fokus main {
    max-width: 70ch;
    margin-inline: auto !important;
    padding-top: 4.5rem !important;
    padding-inline: 1rem;
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .bg-karte:not([hidden]),
    :root[data-thema]:not(.aerona-ohne-animation) .st-leiste:not([hidden]) {
        animation: bg-auf var(--bew-mikro) steps(4, end);
    }
}

:root[data-thema] .st-anker {
    position: relative;
    display: inline-block;
    width: 0;
    height: 1em;
    vertical-align: middle;
}

:root[data-thema] .st-anker__knopf {
    position: absolute;
    top: 50%;
    inset-inline-start: 0.3rem;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--k-text-leise);
    font-size: 0.95rem;
    line-height: 1;

    opacity: 0.45;
    transform: translateY(-50%);
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

@media (hover: none) { :root[data-thema] .st-anker__knopf { opacity: 0.55; } }

@media (hover: none), (max-width: 768px) { :root[data-thema] :is(h2, h3):has(> .st-anker) { padding-inline-end: calc(0.3rem + 32px); } }

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema] .hb-weiter i {
        transition: transform var(--bew-mikro) var(--bew-knackig);
    }

    :root[data-thema] .hb-weiter:hover i {
        transform: translateX(3px);
    }
}

html.aerona-kontrast .ae-hoeren__knopf,
html.aerona-kontrast .ae-hoeren__klein {
    border-width: 2px !important;
}

html.aerona-kontrast .ae-hoeren__knopf[aria-pressed="true"] span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

html.aerona-kontrast .ae-hoeren__klein[aria-pressed="true"] {
    outline: 2px solid var(--k-akzent-hell);
    outline-offset: 1px;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .ae-hoeren__knopf,
    :root[data-thema] .ae-hoeren__klein {
        transition: none;
    }
}

html.aerona-ohne-animation[data-thema] .ae-hoeren__knopf,
html.aerona-ohne-animation[data-thema] .ae-hoeren__klein {
    transition: none;
}
:root[data-thema="hell"] .rt-legende,
:root[data-thema="hell"] .rt-spiel { --rt-fehlt: #71717a; --rt-fehlt-kante: #52525b; }
:root.aerona-kontrast[data-thema] .rt-legende,
:root.aerona-kontrast[data-thema] .rt-spiel { --rt-richtig: #14532d; --rt-woanders: #713f12; --rt-fehlt: #27272a; --rt-fehlt-kante: var(--k-text); }
:root.aerona-kontrast[data-thema="hell"] .rt-legende,
:root.aerona-kontrast[data-thema="hell"] .rt-spiel { --rt-fehlt: #3f3f46; }
:root.aerona-kontrast[data-thema] .rt-feld[data-stand],
:root.aerona-kontrast[data-thema] .rt-taste[data-stand] { border: 3px solid var(--k-text); }

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh {
        animation: rt-drehen var(--bew-ruhig) steps(3, end) both;
        transition: background-color 0s linear var(--bew-normal), border-color 0s linear var(--bew-normal), color 0s linear var(--bew-normal), outline-color 0s linear var(--bew-normal);
    }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh .rt-feld__marke { animation: rt-auf 0s steps(1, end) var(--bew-mikro) both; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(2) { animation-delay: var(--bew-schnell); transition-delay: var(--bew-ruhig); }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(3) { animation-delay: 300ms; transition-delay: 550ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(4) { animation-delay: var(--bew-ruhig); transition-delay: 700ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(5) { animation-delay: 600ms; transition-delay: 850ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(2) .rt-feld__marke { animation-delay: 360ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(3) .rt-feld__marke { animation-delay: 510ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(4) .rt-feld__marke { animation-delay: 660ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-feld--dreh:nth-child(5) .rt-feld__marke { animation-delay: 810ms; }
    :root[data-thema]:not(.aerona-ohne-animation) .rt-zeile--wackeln { animation: rt-wackeln var(--bew-ruhig) steps(1, end); }
}

html.aerona-kontrast .sb-wort__ae { border-bottom-width: 6px !important; }
html.aerona-kontrast .sb-wort--klein .sb-wort__ae { border-bottom-width: 3px !important; }
html.aerona-kontrast .sb-wort__etikett { color: var(--k-text) !important; font-weight: 600; }
html.aerona-kontrast .sb-feld { border-width: 2px !important; border-left-width: 6px !important; }
html.aerona-kontrast .sb-zeile td:first-child { border-left-width: 6px !important; }

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

.aerona-bewegung-aus .kq-meldung {
    animation: none;
}

.dp-kopfzeile,
.dp-fusszeile {
    display: none;
}

@media print {

    @page {
        margin: 18mm 16mm 20mm;
    }

    @page {
        @bottom-right {
            content: "Seite " counter(page) " von " counter(pages);
            font-size: 9pt;
            color: #555;
        }
    }
}

@media print {
    html.sm-druckt,
    html.sm-druckt body {
        height: auto !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    html.sm-druckt body > *:not(.sm-druck),
    html.sm-druckt body::before,
    html.sm-druckt body::after { display: none !important; }

    html.sm-druckt .sm-druck { display: block !important; }
}

:root.aerona-akzent .kopf {
    --k-akzent: inherit;
    --k-akzent-hell: inherit;
    --k-akzent-tief: inherit;
    --k-verlauf-a: inherit;
    --k-verlauf-b: inherit;
    --k-verlauf-tief-a: inherit;
    --k-verlauf-tief-b: inherit;
    --k-verlauf: inherit;
    --k-verlauf-tief: inherit;
    --k-schein: inherit;
    --k-schein-leise: inherit;
    --k-schein-verlauf: inherit;
    --k-schein-verlauf-leise: inherit;
    --k-kante-licht: inherit;
    --k-fokus: inherit;
}

:root.aerona-akzent .nz-fenster .nz-aktion--haupt {
    border-color: var(--k-akzent-tief);
    background: var(--k-akzent-tief);
}

@media (forced-colors: active) {
    .akzent-wahl__punkt {
        forced-color-adjust: none;
        box-shadow: 0 0 0 1px CanvasText;
    }
}

:root.aerona-kontrast[data-thema="dunkel"],
:root.aerona-kontrast[data-thema="dunkel"] .kopf {
    --k-grund: #000000 !important;
    --k-schleier: rgba(0, 0, 0, 0.94) !important;
    --k-platte: #000000 !important;
    --k-platte-tief: #000000 !important;
    --k-menue: #0a0a0a !important;
    --k-feld: #141414 !important;
    --k-korn: transparent !important;
    --k-platte-schein: none !important;
    --k-kante: #9a9a9a !important;
    --k-kante-licht: #9a9a9a !important;
    --k-vertieft: linear-gradient(#121212, #121212) !important;
    --k-vertieft-kante: #9a9a9a !important;
    --k-vertieft-tief: transparent !important;
    --k-glanz: transparent !important;
    --k-rand-oben: #9a9a9a !important;
    --k-rand-seite: #9a9a9a !important;
    --k-rand-unten: #9a9a9a !important;
    --k-rand-dicke: transparent !important;

    --k-text: #ffffff !important;
    --k-text-leise: #e6e6e6 !important;
    --k-text-still: #d0d0d0 !important;

    --k-akzent: #8cbcff !important;
    --k-akzent-hell: #a8ccff !important;
    --k-akzent-tief: #8cbcff !important;

    --k-auf-akzent: #000000 !important;
    --k-verlauf-a: #8cbcff !important;
    --k-verlauf-b: #c9b0ff !important;
    --k-verlauf: linear-gradient(var(--k-winkel), #8cbcff 0%, #c9b0ff 100%) !important;
    --k-verlauf-tief-a: #8cbcff !important;
    --k-verlauf-tief-b: #c9b0ff !important;
    --k-verlauf-tief: linear-gradient(var(--k-winkel), #8cbcff 0%, #c9b0ff 100%) !important;
    --k-fokus: #ffd60a !important;
    --k-schein: transparent !important;
    --k-schein-leise: transparent !important;
    --k-schein-verlauf: transparent !important;
    --k-schein-verlauf-leise: transparent !important;

    --k-punkt-neu: #6ee7b7 !important;
    --k-punkt-forschung: #c4b5fd !important;
    --k-punkt-weg: #fcd34d !important;
    --k-punkt-ueber: #fdba74 !important;

    --text-muted: #e6e6e6 !important;
    --text-secondary: #e6e6e6 !important;
    --text-primary: #ffffff !important;
    --glass-text-primary: #ffffff !important;
    --glass-text-secondary: #e6e6e6 !important;
    --bg-dark: #000000 !important;
}

:root.aerona-kontrast[data-thema="hell"],
:root.aerona-kontrast[data-thema="hell"] .kopf {
    --k-grund: #ffffff !important;
    --k-schleier: rgba(255, 255, 255, 0.96) !important;
    --k-platte: #ffffff !important;
    --k-platte-tief: #ffffff !important;
    --k-menue: #ffffff !important;
    --k-feld: #f0f0f0 !important;
    --k-korn: transparent !important;
    --k-platte-schein: none !important;
    --k-kante: #6b6b6b !important;
    --k-kante-licht: #6b6b6b !important;
    --k-vertieft: linear-gradient(#f2f2f2, #f2f2f2) !important;
    --k-vertieft-kante: #6b6b6b !important;
    --k-vertieft-tief: transparent !important;
    --k-glanz: transparent !important;
    --k-rand-oben: #6b6b6b !important;
    --k-rand-seite: #6b6b6b !important;
    --k-rand-unten: #6b6b6b !important;
    --k-rand-dicke: transparent !important;

    --k-text: #000000 !important;
    --k-text-leise: #1f1f1f !important;
    --k-text-still: #333333 !important;

    --k-akzent: #1e40af !important;
    --k-akzent-hell: #1e3a8a !important;
    --k-akzent-tief: #172554 !important;
    --k-auf-akzent: #ffffff !important;
    --k-verlauf-a: #1e40af !important;
    --k-verlauf-b: #5b21b6 !important;
    --k-verlauf: linear-gradient(var(--k-winkel), #1e40af 0%, #5b21b6 100%) !important;
    --k-verlauf-tief-a: #1e3a8a !important;
    --k-verlauf-tief-b: #4c1d95 !important;
    --k-verlauf-tief: linear-gradient(var(--k-winkel), #1e3a8a 0%, #4c1d95 100%) !important;
    --k-fokus: #000000 !important;
    --k-schein: transparent !important;
    --k-schein-leise: transparent !important;
    --k-schein-verlauf: transparent !important;
    --k-schein-verlauf-leise: transparent !important;

    --k-punkt-neu: #065f46 !important;
    --k-punkt-forschung: #4c1d95 !important;
    --k-punkt-weg: #78350f !important;
    --k-punkt-ueber: #7c2d12 !important;

    --text-muted: #1f1f1f !important;
    --text-secondary: #1f1f1f !important;
    --text-primary: #000000 !important;
    --text: #000000 !important;
    --text-leise: #1f1f1f !important;
    --glass-text-primary: #000000 !important;
    --glass-text-secondary: #1f1f1f !important;
}

:root.aerona-kontrast,
:root.aerona-kontrast .kopf {
    --k-glas-filter: none !important;
    --k-schliff: none !important;
    --k-glas-brechung: 0 0 0 transparent !important;
    --k-vertieft-aussen: 0 0 0 transparent !important;

    --k-schatten-eng: 0 0 0 transparent !important;
    --k-schatten-weit: 0 0 0 transparent !important;
}

:root.aerona-kontrast,
:root.aerona-kontrast body {
    background: var(--k-grund) !important;
}

:root.aerona-kontrast *,
:root.aerona-kontrast *::before,
:root.aerona-kontrast *::after {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    text-shadow: none !important;
}

:root.aerona-kontrast main a:not([class]),
:root.aerona-kontrast :is(p, li, dd, td, th, figcaption, blockquote, small, label, cite) > a,
:root.aerona-kontrast footer a:not([class]) {
    text-decoration-line: underline !important;
    text-decoration-thickness: 0.09em !important;
    text-underline-offset: 0.2em !important;
}

:root.aerona-kontrast :focus-visible {
    outline: 3px solid var(--k-fokus) !important;
    outline-offset: 2px !important;
}

:root.aerona-kontrast [data-aerona-pixel],
:root.aerona-kontrast :is(.kopf__spaene, .kopf__himmel-pixel, .sprachwahl__funken,
    .pixel-welle, .start-feld, .pixel-rollspur) {
    opacity: 0.2 !important;
}

:root.aerona-kontrast .kopf .kopf__bahn-pfeil {
    position: relative;
    z-index: 2;
}

:root.aerona-kontrast[data-thema="dunkel"] *::before,
:root.aerona-kontrast[data-thema="dunkel"] *::after {
    -webkit-text-stroke-color: #2a2a2a !important;
}

:root.aerona-kontrast[data-thema="hell"] *::before,
:root.aerona-kontrast[data-thema="hell"] *::after {
    -webkit-text-stroke-color: #d9d9d9 !important;
}

:root.aerona-kontrast .kapitel-marke {
    opacity: 0.3 !important;
}

:root.aerona-kontrast :is(.kopf .kopf__start, .sprachinfo__nehmen, .hero-weg--haupt, .btn-primary),
:root.aerona-kontrast :is(.kopf .kopf__start, .sprachinfo__nehmen, .hero-weg--haupt, .btn-primary):is(:hover, :focus-visible) {
    box-shadow: none !important;
}

:root.aerona-kontrast[data-thema] .kas-fach__saeule { border: 2px solid var(--k-text); }
:root.aerona-kontrast[data-thema] .kas-fach__fuellung { background: var(--k-text); }
:root.aerona-kontrast[data-thema] .kas-hinten { border-top: 2px solid var(--k-text); }
:root.aerona-kontrast[data-thema] .kas-fach__abstand,
:root.aerona-kontrast[data-thema] .kas-karte__kopf,
:root.aerona-kontrast[data-thema] .kas-draussen { color: var(--k-text); }

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .kas-fach__fuellung { transition: height var(--bew-ruhig) steps(6, end); }
    :root[data-thema]:not(.aerona-ohne-animation) .kas-hinten--auf { animation: kas-auf var(--bew-normal) steps(4, end); }
}

:root.aerona-kontrast[data-thema] .abn-strich {
    width: 4px;
    background: var(--k-text);
    opacity: 1;
}

:root.aerona-kontrast[data-thema] .abn-etikett,
:root.aerona-kontrast[data-thema] .abn-leiste,
:root.aerona-kontrast[data-thema] .abn-leiste__knopf {
    border-color: var(--k-text);
    color: var(--k-text);
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .zg-markiert { animation: none; }
    :root[data-thema] .zg-start::before,
    :root[data-thema] .zg-fundklappe > summary::before,
    :root[data-thema] .zg-rahmen__kopf::before { transition: none; }
}

:root.aerona-kontrast[data-thema] .fab-zelle[data-stufe="nein"] .fab-urteil,
:root.aerona-kontrast[data-thema] .fab-gleich { color: var(--k-text); }

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .fab-ablage,
    :root[data-thema]:not(.aerona-ohne-animation) .fab-wert { transition: border-color var(--bew-mikro) var(--bew-knackig); }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .zs-seite__kopf::before {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .wf-baum--neu { animation: wf-ein var(--bew-normal) steps(4, end); }
}
:root.aerona-kontrast[data-thema] #diktat { --dk-falsch: #7f1d1d; --dk-gross: #713f12; }
:root.aerona-kontrast[data-thema] .dk-spalte[data-art]:not([data-art="gleich"]) { border: 3px solid var(--k-text); }

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-ohne-animation) .dk-ergebnis--neu { animation: dk-auf var(--bew-normal) steps(4, end); }
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.spw-still) .erb-bild:not(.erb-bild--still) .erb-emoji {
        animation: erb-auf var(--bew-normal) steps(4, end) both;
    }
    :root[data-thema]:not(.spw-still) .erb-bild:not(.erb-bild--still) .erb-emoji + .erb-plus + .erb-emoji {
        animation-delay: 80ms;
    }
}

:root[data-thema="dunkel"] .lp-eingabe { color-scheme: dark; }
:root[data-thema="hell"] .lp-eingabe { color-scheme: light; }

@media (forced-colors: active) {
    :root[data-thema] .btk-tag,
    :root[data-thema] .btk-muster { border: 1px solid CanvasText; }
    :root[data-thema] .btk-tag::before,
    :root[data-thema] .btk-muster::before { forced-color-adjust: none; background: CanvasText; }
    :root[data-thema] .btk-tag:focus-visible { outline: 2px solid Highlight; }
}
:root[data-thema="hell"] #bt-liste summary > .sf-eingabe__hilfe { border-color: rgba(0, 0, 0, 0.1); background: rgba(0, 0, 0, 0.03); }

html.aerona-kontrast .st-aufdecken {
    border-width: 2px !important;
}

html.aerona-kontrast .st-aufdecken[aria-expanded="true"] span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .st-aufdecken {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.aerona-bewegung-aus) .sz-kachel {
        transition: border-color var(--bew-mikro) var(--bew-knackig);
    }
}

html.aerona-kontrast .lz-luecke { border-bottom-width: 3px; }
html.aerona-kontrast .lz-gefuellt { text-decoration-thickness: 3px; }

@media (prefers-reduced-motion: no-preference) {

    :root[data-thema] .em-aehnlich__knopf {
        transition: border-color var(--bew-mikro) var(--bew-knackig);
    }
}

html.aerona-kontrast .rn-luecke { border-bottom-width: 3px; }
html.aerona-kontrast .rn-teil[data-stand="statt"],
html.aerona-kontrast .rn-teil[data-stand="zuviel"] { border-width: 3px; }

:root.aerona-kontrast[data-thema] .pfa .rt-zahlen span { color: var(--k-text); }

:root.aerona-kontrast[data-thema] .emo-bild { border: 2px solid var(--k-text); }
:root.aerona-kontrast[data-thema] .emo-breite input:focus-visible,
:root.aerona-kontrast[data-thema] .emo-schalter input:focus-visible { outline-width: 3px; }

html.aerona-kontrast .vp-aufdecken,
html.aerona-kontrast .vp-mehr {
    border-width: 2px !important;
}

html.aerona-kontrast .vp-aufdecken[aria-expanded="true"] span {
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .vp-aufdecken,
    :root[data-thema] .vp-mehr {
        transition: none;
    }
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema]:not(.spw-still) .ewu-wuerfel--rollt .ewu-emoji {
        animation: ewu-rollen var(--bew-ruhig) steps(3, end) both;
    }
    :root[data-thema]:not(.spw-still) .ewu-platz:nth-child(2) .ewu-wuerfel--rollt .ewu-emoji { animation-delay: 50ms; }
    :root[data-thema]:not(.spw-still) .ewu-platz:nth-child(3) .ewu-wuerfel--rollt .ewu-emoji { animation-delay: 100ms; }
    :root[data-thema]:not(.spw-still) .ewu-platz:nth-child(4) .ewu-wuerfel--rollt .ewu-emoji { animation-delay: var(--bew-schnell); }
    :root[data-thema]:not(.spw-still) .ewu-platz:nth-child(n+5) .ewu-wuerfel--rollt .ewu-emoji { animation-delay: var(--bew-mikro); }
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .pfw-ring__stand { transition: none; }
}

:root.aerona-kontrast[data-thema] .pfw-ziel { color: var(--k-text); }

:root.aerona-kontrast[data-thema] .pfm-kal__kopf,
:root.aerona-kontrast[data-thema] .pfm-kal .pfm-kal__tag { color: var(--k-text); }

:root.aerona-kontrast[data-thema] .pfm-kal .pfm-kal__tag--ja { color: var(--k-auf-akzent); }

:root[data-thema] .ko-griff {
    position: relative;
}

:root[data-thema]:not(.aerona-kontrast) :is(.ml-schwebe, .ko-griff):is(:hover, :focus-visible) > i {
    display: inline-block;
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .sk-liste > summary::after {
        transition: none;
    }
}

:root.aerona-ohne-animation .ar-seither__ziel,
:root.aerona-ohne-animation .ar-seither__ziel i {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .ar-seither__ziel,
    :root[data-thema] .ar-seither__ziel i {
        transition: none;
    }
}

:root.aerona-ohne-animation .gd-tour {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] .gd-tour {
        transition: none;
    }
}

:where(main [id]:not(h1, h2, h3)) {
    scroll-margin-top: calc(var(--kopfleiste-hoehe, 7rem) + 0.75rem);
}

:root[data-thema] {
    --schwebe-rand: 18px;
    --schwebe-breite: 52px;

    --schwebe-platz: calc(var(--schwebe-rand) + var(--schwebe-breite) + 12px);
}

@media (min-width: 761px) {

    :root[data-thema] #scrollToTopBtn.nach-oben {
        inset-inline-end: var(--schwebe-rand);
    }

    :root[data-thema] .ml-schwebe {
        inset-inline-end: calc(var(--schwebe-rand) + 4px);
    }

    :root[data-thema] body .kapitel-spur {
        inset-inline-end: calc(var(--schwebe-rand) + 7px);
    }

    :root[data-thema] main.pr-main {
        padding-inline-end: max(24px, min(var(--schwebe-platz),
            calc(var(--schwebe-platz) - (100% - 1100px) / 2)));
    }

    :root[data-thema] .weiterlesen {
        padding-inline-end: max(20px, min(var(--schwebe-platz), calc(1284px - 100%)));
    }
}

@media (min-width: 761px) and (max-width: 1301px) {
    :root[data-thema] .ko-griff {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    :root[data-thema] .ko-griff__zeit {
        display: none;
    }
}

@media (max-width: 760px) {
    :root[data-thema] body .kapitel-spur {
        inset-block: auto calc(18px + env(safe-area-inset-bottom, 0px));
        inset-inline: 18px auto;
        translate: none;
        padding: 0;
        gap: 0;
        border: 0;
        background: none;
        box-shadow: none;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
    }

    :root[data-thema] body .kapitel-spur > :not(.verz-griff) {
        display: none;
    }

    :root[data-thema] body .kapitel-spur .verz-griff {
        align-items: center;
        inline-size: 46px;
        block-size: 46px;
        margin: 0;
        border-radius: 50%;
        box-shadow: var(--k-schatten-weit);
    }

    :root[data-thema] body.z-vorlesen:not(.z-nie) .kapitel-spur {
        inset-block-end: 84px;
    }

    :root[data-thema] body.z-tr-leiste:not(.z-nie) .kapitel-spur {
        display: none;
    }
}

:root[data-thema] .schwebe-weicht {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;

    transition: opacity var(--bew-schnell) var(--bew-beides), visibility 0s var(--bew-schnell);
}

:where(aeri-tier) {
    display: inline-block;
    width: var(--aeri-groesse, 96px);
    height: var(--aeri-groesse, 96px);
    line-height: 0;
    vertical-align: middle;
}
aeri-tier[groesse="32"] { --aeri-groesse: 32px; }
aeri-tier[groesse="40"] { --aeri-groesse: 40px; }
aeri-tier[groesse="44"] { --aeri-groesse: 44px; }
aeri-tier[groesse="72"] { --aeri-groesse: 72px; }

:root:not(.aerona-kontrast) .za-zeichen {
    display: inline-block;
    color: var(--k-akzent-hell);
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

@media (forced-colors: active) {
    .za-zeichen {
        background: none;
        -webkit-text-fill-color: currentColor;
    }
    .za-wartet::before {
        visibility: visible;
    }
}

.fokus-verlauf-ring {

    position: fixed;
    inset: auto;
    left: 0;
    top: 0;
    width: 0;
    height: 0;
    margin: 0;
    border: 0;
    padding: 2px;
    box-sizing: border-box;
    overflow: visible;
    color: inherit;
    background: var(--k-verlauf);
    pointer-events: none;
    -webkit-user-select: none;
    user-select: none;
    z-index: 2147483647;
    display: none;
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
}

@media not (forced-colors: active) {
    html.fokus-verlauf:not(.aerona-kontrast) :is(a, area, button, input, select, textarea, summary, [tabindex], [contenteditable]):focus-visible {
        outline-color: transparent !important;
    }
}

html.aerona-kontrast .fokus-verlauf-ring {
    display: none !important;
}

@media (forced-colors: active) {
    .fokus-verlauf-ring { display: none !important; }
}

@media (prefers-reduced-motion: no-preference) {
    :root[data-thema] .rh-wink .rh-pfeil:first-child { animation: rh-hin var(--bew-endlos) steps(1, end) 3; }
    :root[data-thema] .rh-wink .rh-pfeil:last-child { animation: rh-her var(--bew-endlos) steps(1, end) 3; }
}

@media screen {

    :root.b2-an[data-thema]:not(.aerona-kontrast) [data-pixel="2"]:not(.pixel2-steht) {
        animation: pixel2-wartet calc(var(--bew-endlos) * 2.5) var(--bew-beides);
    }
}

:root[data-thema] .pixel2-verlauf:not(#_) {
    display: inline;
    position: static;
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    letter-spacing: inherit;
    word-spacing: inherit;
    text-transform: inherit;
    background-color: transparent;
}
:root[data-thema]:not(.aerona-kontrast) .pixel2-verlauf:not(#_) {
    background-image: linear-gradient(var(--k-winkel), var(--k-verlauf-a) 0%, var(--k-verlauf-b) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

:root[data-thema] .st-anker { -webkit-text-fill-color: currentColor; }

:root[data-thema]:not(.aerona-kontrast) .st-anker i:not(.za-zeichen) {
    display: inline-block;
    background: var(--k-verlauf);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root[data-thema="hell"] .einst-anim__kachel { border-color: rgba(0, 0, 0, 0.1); background: rgba(255, 255, 255, 0.7); }
@media (forced-colors: active) {
    .einst-anim__kachel > b,
    .einst-anim__teil { -webkit-text-fill-color: CanvasText; background-image: none; }
}

:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input) {
    -webkit-appearance: none;
    appearance: none;
    height: 22px;
    margin: 0;
    background: transparent;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input)::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 3px;
    background:
        linear-gradient(90deg, var(--k-verlauf-a), var(--k-verlauf-b)) 0 0 / var(--regler-anteil, 50%) 100% no-repeat,
        color-mix(in srgb, var(--k-text-leise) 20%, transparent);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input)::-moz-range-track {
    height: 6px;
    border-radius: 3px;
    background: color-mix(in srgb, var(--k-text-leise) 20%, transparent);
}
:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input)::-moz-range-progress {
    height: 6px;
    border-radius: 3px;
    background-image: linear-gradient(90deg, var(--k-verlauf-a), var(--k-verlauf-b));
}

:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input)::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin-top: -6px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 45%, transparent 47%),
        linear-gradient(135deg, var(--k-verlauf-a), var(--k-verlauf-b));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.45);
    transition: transform var(--bew-mikro, 200ms) var(--bew-knackig, cubic-bezier(.16, 1, .3, 1)), box-shadow var(--bew-mikro, 200ms) var(--bew-knackig, cubic-bezier(.16, 1, .3, 1));
}
:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input)::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 0;
    border-radius: 50%;
    background:
        radial-gradient(circle at 50% 50%, #fff 0 45%, transparent 47%),
        linear-gradient(135deg, var(--k-verlauf-a), var(--k-verlauf-b));
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.45);
}

:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input):hover::-webkit-slider-thumb,
:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input):focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.22), 0 0 16px rgba(129, 140, 248, 0.65);
}
:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input).regler--zieht::-webkit-slider-thumb {
    transform: scale(1.25);
    box-shadow: 0 0 0 6px rgba(168, 85, 247, 0.25), 0 0 22px rgba(129, 140, 248, 0.85);
}

:root[data-thema]:not(.aerona-kontrast) input[type="range"]:not(.comp-slider-input, .slider-input):focus-visible {
    outline: 2px solid var(--k-fokus);
    outline-offset: 4px;
    border-radius: 6px;
}

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] input[type="range"]:not(.comp-slider-input, .slider-input)::-webkit-slider-thumb { transition: none; }
}

:root[data-thema]:not(.aerona-kontrast) input:is([type="checkbox"], [type="radio"]) {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: none;
    inline-size: 1.15em;
    block-size: 1.15em;
    margin: 0;

    border: 1px solid rgba(255, 255, 255, .24);
    border-radius: 0.32em;
    background-color: rgba(255, 255, 255, .06);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06);
    vertical-align: -0.18em;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
    transition: background-color var(--bew-mikro, 200ms) var(--bew-knackig, cubic-bezier(.16, 1, .3, 1)), border-color var(--bew-mikro, 200ms) var(--bew-knackig, cubic-bezier(.16, 1, .3, 1)), box-shadow var(--bew-mikro, 200ms) var(--bew-knackig, cubic-bezier(.16, 1, .3, 1));
}
:root[data-thema]:not(.aerona-kontrast) input[type="radio"] { border-radius: 50%; }

:root[data-thema]:not(.aerona-kontrast) input:is([type="checkbox"], [type="radio"]):hover {
    border-color: color-mix(in srgb, var(--k-verlauf-b) 55%, transparent);
    box-shadow: 0 0 0 3px rgba(129, 140, 248, .14);
}

:root[data-thema]:not(.aerona-kontrast) input:is([type="checkbox"], [type="radio"]):checked {
    border-color: transparent;
    background: linear-gradient(135deg, var(--k-verlauf-a), var(--k-verlauf-b));
    box-shadow: 0 0 12px rgba(129, 140, 248, .45);
}

:root[data-thema]:not(.aerona-kontrast) input[type="checkbox"]::after {
    content: "";
    position: absolute;
    left: 34%;
    top: 14%;
    inline-size: 28%;
    block-size: 52%;
    border: solid #fff;
    border-width: 0 0.14em 0.14em 0;
    transform: rotate(45deg) scale(0);
    transition: transform var(--bew-mikro, 200ms) cubic-bezier(.3, 1.6, .5, 1);
}
:root[data-thema]:not(.aerona-kontrast) input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }

:root[data-thema]:not(.aerona-kontrast) input[type="radio"]::after {
    content: "";
    position: absolute;
    inset: 28%;
    border-radius: 50%;
    background: #fff;
    transform: scale(0);
    transition: transform var(--bew-mikro, 200ms) cubic-bezier(.3, 1.6, .5, 1);
}
:root[data-thema]:not(.aerona-kontrast) input[type="radio"]:checked::after { transform: scale(1); }

:root[data-thema]:not(.aerona-kontrast) input:is([type="checkbox"], [type="radio"]):focus-visible {
    outline: 2px solid var(--k-fokus);
    outline-offset: 2px;
}

:root[data-thema]:not(.aerona-kontrast) input[type="number"] { -moz-appearance: textfield; appearance: textfield; }

:root[data-thema]:not(.aerona-kontrast) input[type="search"] { -webkit-appearance: none; appearance: none; }
:root[data-thema]:not(.aerona-kontrast) input[type="search"]:not(.b2-hat-leeren, .em-suche__feld)::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
:root[data-thema]:not(.aerona-kontrast) input[type="number"]::-webkit-inner-spin-button,
:root[data-thema]:not(.aerona-kontrast) input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

:root[data-thema]:not(.aerona-kontrast) select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-inline-end: 2.4em;
    background-image: linear-gradient(45deg, transparent 50%, var(--k-text-leise, #aaa) 50%), linear-gradient(135deg, var(--k-text-leise, #aaa) 50%, transparent 50%);
    background-position: calc(100% - 1.25em) 52%, calc(100% - 0.95em) 52%;
    background-size: 0.32em 0.32em, 0.32em 0.32em;
    background-repeat: no-repeat;
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema]:not(.aerona-kontrast) select:focus:not(:focus-visible),
:root[data-thema]:not(.aerona-kontrast) select[aria-expanded="true"] { outline: none; }

@media (prefers-reduced-motion: reduce) {
    :root[data-thema] input:is([type="checkbox"], [type="radio"])::after { transition: none; }
}

:root[data-thema]:not(.aerona-kontrast) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, [contenteditable="true"]) {
    caret-color: var(--k-verlauf-a);
}
:root[data-thema]:not(.aerona-kontrast) :is(input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], [type="file"]), textarea, [contenteditable="true"]):focus {
    animation: aerona-schreibstrich var(--bew-aufbau) var(--bew-beides, cubic-bezier(.4, 0, .2, 1)) infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
    :root[data-thema] :is(input, textarea, [contenteditable="true"]):focus { animation: none; }
}

:root.b2-an:not(.aerona-kontrast) input:is([type="checkbox"], [type="radio"]):checked::after { transition: none; }
:root[data-thema="hell"] input[type="file"]::file-selector-button { border-color: rgba(0, 0, 0, 0.14); background: rgba(0, 0, 0, 0.04); }

:root[data-thema], :root[data-thema] body { cursor: url("../images/zeiger/pfeil.svg") 3 3, auto; }
:root[data-thema] :is(a[href], button, [role="button"], [role="tab"], [role="menuitem"], summary, label[for], select,
    input:is([type="checkbox"], [type="radio"], [type="range"], [type="button"], [type="submit"])):not(:disabled, [aria-disabled="true"]) {
    cursor: url("../images/zeiger/hand.svg") 13 2, pointer;
}

:root[data-thema] :is(.updates-popup h2, .zc-zahl-wert, .ap-accent, .ap-way h3, .sup-hero h1, .eco-accent, .gross-zahl__wert,
    .ex-count__value, .updates-hero .updates-title, .wk-accent, .wy-accent) {
    inline-size: fit-content;
    margin-inline: auto;
}

:root {
    --b2-dauer: 420ms; --b2-kurz: 210ms; --b2-kurve: cubic-bezier(.16, 1, .3, 1); --b2-heben: -2px;
    --b2-druck: 0.97; --b2-schatten: 0.4; --b2-glanz: 1; --b2-ring-dicke: 3px;
}

@keyframes pixel2-wartet {
    from, to { -webkit-text-fill-color: transparent; background-image: none; }
}

@keyframes ankunft-wartet {
    from, to { visibility: hidden; }
}

.b2-glanz { position: relative; overflow: clip !important; }
.b2-glanz::after {
    content: ''; position: absolute; inset: -2px; pointer-events: none; z-index: 3;
    transform: translateX(-130%) skewX(-20deg);
    background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
    opacity: var(--b2-glanz, 1);
}

.b2-funke {
    position: absolute; width: 6px; height: 6px; pointer-events: none; z-index: 20;
    background: var(--k-verlauf); background-size: 1000% 1000%;
}

.b2-ring {
    position: absolute; pointer-events: none; z-index: 19; box-sizing: border-box; padding: var(--b2-ring-dicke, 3px);
    background: var(--k-verlauf);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}

.b2-magnet {
    transition: transform var(--b2-kurz, 210ms) var(--b2-kurve, cubic-bezier(.16, 1, .3, 1)), box-shadow var(--b2-kurz, 210ms) var(--b2-kurve, cubic-bezier(.16, 1, .3, 1));
}
.b2-licht {
    position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0;
    background: radial-gradient(circle at var(--b2-lx, 50%) var(--b2-ly, 50%), rgba(255, 255, 255, .3), transparent 60%);
    transition: opacity var(--b2-kurz, 210ms) var(--bew-knackig, cubic-bezier(.16, 1, .3, 1));
}

.b2-blende { position: absolute; inset: 0; z-index: 30; pointer-events: none; background: var(--k-verlauf-tief); }
.b2-kapitelnaht { position: absolute; top: 0; bottom: 0; left: 0; width: 30%; z-index: 31; pointer-events: none; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); }
@keyframes b2-tippt { 0%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-5px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .b2-tippt i { animation: none; } }
@media (prefers-reduced-motion: reduce) { .b2-kippt { transition: none; } }

@media (prefers-reduced-motion: reduce) {
    .b2-magnet, .b2-zeigering::before { transition: none; }
}
@media (prefers-reduced-motion: reduce) { .b2-tz { transition: none; } }
.b2-er-wartet { opacity: 0; }
:root[data-thema="hell"] .b2-fb-lupe { background: rgba(255, 255, 255, .9); border-color: rgba(0, 0, 0, .1); box-shadow: 0 14px 30px rgba(0, 0, 0, .18); }

@keyframes ab-rein {

    from { opacity: 0; animation-timing-function: steps(4, end); }
    to { opacity: 1; }
}

@keyframes ab-raus {
    from { opacity: 1; animation-timing-function: steps(4, end); }
    to { opacity: 0; }
}

@keyframes aa-strich {
    to { stroke-dashoffset: 0; }
}

@keyframes dk-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(-0.3rem); }
    to { opacity: 1; transform: none; }
}

@keyframes kas-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(-0.3rem); }
    to { opacity: 1; transform: none; }
}

@keyframes rt-drehen {
    0% { transform: rotateX(0); }
    50% { transform: rotateX(90deg); }
    100% { transform: rotateX(0); }
}

@keyframes rt-auf { from { animation-timing-function: steps(1, end); opacity: 0; } to { opacity: 1; } }

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

@keyframes as-menue-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes band-schlag {

    0%,
    100% {
        transform: rotate(2deg);
    }

    35% {
        transform: rotate(-28deg);
    }

    62% {
        transform: rotate(16deg);
    }

    78% {
        transform: rotate(6deg);
    }
}

@keyframes bg-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to { opacity: 1; }
}

@keyframes bg-dreht {
    to { transform: rotate(360deg); }
}

@keyframes seiteVor {
    from {
        opacity: 0;
        transform: rotateY(9deg) translateX(34px);
        transform-origin: left center;
    }

    to {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

@keyframes seiteZurueck {
    from {
        opacity: 0;
        transform: rotateY(-9deg) translateX(-34px);
        transform-origin: right center;
    }

    to {
        opacity: 1;
        transform: rotateY(0) translateX(0);
    }
}

@keyframes ds-tafel-kommt {
    from {
        animation-timing-function: steps(6, end);
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kq-auftritt {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to { opacity: 1; }
}

@keyframes em-angekommen {

    0%,
    45% {

        background: var(--k-vertieft);
        border-radius: 12px;
    }

    100% {
        background: transparent;
        border-radius: 12px;
    }
}

@keyframes em-angekommen-nr {

    0%,
    45% {
        background: var(--k-verlauf-tief);
        color: var(--k-auf-akzent);
    }

    100% {
        background: var(--k-vertieft);
        color: var(--k-text);
    }
}

@keyframes erb-auf {
    from { opacity: 0; transform: scale(0.85); }
    to { opacity: 1; transform: none; }
}

@keyframes ewu-rollen {
    0% { opacity: 0; transform: translateY(-0.8rem) rotate(-160deg) scale(0.6); }
    60% { opacity: 1; transform: translateY(0.15rem) rotate(12deg) scale(1.05); }
    100% { opacity: 1; transform: none; }
}

@keyframes ek-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

@keyframes kopf-schleier-aus {
    from {
        animation-timing-function: steps(6, end);
        opacity: 1;
    }

    to {
        opacity: 0;
    }
}

@keyframes kopf-fenster-rollen {
    0% {
        opacity: 1;
        clip-path: inset(0 50% calc(100% - 3px) 50%);
    }

    26% {
        opacity: 1;
        clip-path: inset(0 0 calc(100% - 3px) 0);
    }

    93% {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }

    100% {
        opacity: 1;
        clip-path: inset(-60%);
    }
}

@keyframes fenster-inhalt-auf {
    from {
        animation-timing-function: steps(4, end);
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kopf-fenster-flieger {
    0% {

        animation-timing-function: steps(8, end);
        transform: translate(var(--auf-x, 0), var(--auf-y, 0))
            rotate(var(--auf-winkel, 0deg)) scale(0.30);
        clip-path: polygon(calc(50% + var(--flieger-l, 15.3%)) 50%,
                calc(50% - var(--flieger-l, 15.3%)) calc(50% - var(--flieger-h, 5.7%)),
                calc(50% - var(--flieger-l, 15.3%) * 0.32) 50%,
                calc(50% - var(--flieger-l, 15.3%) * 0.86) calc(50% + var(--flieger-h, 5.7%) * 0.76));
    }

    34% {
        animation-timing-function: steps(7, end);
        transform:
            translate(calc(var(--auf-x, 0px) * 0.52),
                calc(var(--auf-y, 0px) * 0.52 - 22px))
            rotate(calc(var(--auf-winkel, 0deg) * 0.62)) scale(0.40);
        clip-path: polygon(calc(50% + var(--flieger-l, 15.3%)) 50%,
                calc(50% - var(--flieger-l, 15.3%)) calc(50% - var(--flieger-h, 5.7%)),
                calc(50% - var(--flieger-l, 15.3%) * 0.32) 50%,
                calc(50% - var(--flieger-l, 15.3%) * 0.86) calc(50% + var(--flieger-h, 5.7%) * 0.76));
    }

    62% {

        transform: translate(0, 0)
            rotate(calc(var(--auf-winkel, 0deg) * 0.06)) scale(0.48);
        clip-path: polygon(calc(50% + var(--flieger-l, 15.3%)) 50%,
                calc(50% - var(--flieger-l, 15.3%)) calc(50% - var(--flieger-h, 5.7%)),
                calc(50% - var(--flieger-l, 15.3%) * 0.32) 50%,
                calc(50% - var(--flieger-l, 15.3%) * 0.86) calc(50% + var(--flieger-h, 5.7%) * 0.76));
    }

    80% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        clip-path: polygon(100% 44%, 0% 44%, 0% 56%, 100% 56%);
    }

    95% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
    }

    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        clip-path: polygon(160% -60%, -60% -60%, -60% 160%, 160% 160%);
    }
}

@keyframes kopf-fenster-schatten {
    0% {
        filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.55));
    }

    34% {
        filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.5));
    }

    62% {
        filter: drop-shadow(0 7px 13px rgba(0, 0, 0, 0.45));
    }

    80% {
        filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
    }

    100% {
        filter: drop-shadow(var(--k-schatten-weit));
    }
}

@keyframes kopf-schleier-an {
    from {
        opacity: 0;
    }

    45% { opacity: .08; animation-timing-function: steps(5, end); }

    to {
        opacity: 1;
    }
}

@keyframes kopf-fenster-papier {

    0%,
    72% {
        animation-timing-function: steps(4, end);
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

@keyframes kopf-fenster-zurueck {

    0% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        clip-path: polygon(160% -60%, -60% -60%, -60% 160%, 160% 160%);
    }

    10% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        clip-path: polygon(100% 0%, 0% 0%, 0% 100%, 100% 100%);
    }

    28% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        clip-path: polygon(100% 44%, 0% 44%, 0% 56%, 100% 56%);
    }

    48% {
        animation-timing-function: steps(8, end);
        transform: translate(0, 0)
            rotate(calc(var(--zu-winkel, 0deg) * 0.45)) scale(0.48);
        clip-path: polygon(calc(50% + var(--flieger-l, 15.3%)) 50%,
                calc(50% - var(--flieger-l, 15.3%)) calc(50% - var(--flieger-h, 5.7%)),
                calc(50% - var(--flieger-l, 15.3%) * 0.32) 50%,
                calc(50% - var(--flieger-l, 15.3%) * 0.86) calc(50% + var(--flieger-h, 5.7%) * 0.76));
    }

    76% {
        transform:
            translate(calc(var(--auf-x, 0px) * 0.55),
                calc(var(--auf-y, 0px) * 0.55 - 16px))
            rotate(calc(var(--zu-winkel, 0deg) * 0.88)) scale(0.38);
        clip-path: polygon(calc(50% + var(--flieger-l, 15.3%)) 50%,
                calc(50% - var(--flieger-l, 15.3%)) calc(50% - var(--flieger-h, 5.7%)),
                calc(50% - var(--flieger-l, 15.3%) * 0.32) 50%,
                calc(50% - var(--flieger-l, 15.3%) * 0.86) calc(50% + var(--flieger-h, 5.7%) * 0.76));
    }

    100% {
        transform: translate(var(--auf-x, 0), var(--auf-y, 0))
            rotate(var(--zu-winkel, 0deg)) scale(0.26);
        clip-path: polygon(calc(50% + var(--flieger-l, 15.3%)) 50%,
                calc(50% - var(--flieger-l, 15.3%)) calc(50% - var(--flieger-h, 5.7%)),
                calc(50% - var(--flieger-l, 15.3%) * 0.32) 50%,
                calc(50% - var(--flieger-l, 15.3%) * 0.86) calc(50% + var(--flieger-h, 5.7%) * 0.76));
    }
}

@keyframes kopf-fenster-schatten-zurueck {
    0% {
        filter: drop-shadow(var(--k-schatten-weit));
    }

    28% {
        filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
    }

    48% {
        filter: drop-shadow(0 7px 13px rgba(0, 0, 0, 0.45));
    }

    76% {
        filter: drop-shadow(0 14px 20px rgba(0, 0, 0, 0.5));
    }

    100% {
        filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.55));
    }
}

@keyframes aerona-schreibstrich {
    from { caret-color: var(--k-verlauf-a); }
    to { caret-color: var(--k-verlauf-b); }
}

@keyframes geb-fallen {
    0%   { opacity: 0; transform: translate3d(0, 0, 0) rotate(0deg); }
    8%   { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; transform: translate3d(var(--kipp, 0), 102vh, 0) rotate(var(--dreh, 360deg)); }
}

@keyframes geb-aufsteigen {
    0%   { opacity: 0; transform: translate3d(0, 0, 0); }
    12%  { opacity: .85; }
    70%  { opacity: .85; }
    100% { opacity: 0; transform: translate3d(var(--drift, 0), -110vh, 0); }
}

@keyframes geb-wackeln {
    0%, 100%      { transform: rotate(0) scale(1); }
    12%           { transform: rotate(-13deg) scale(1.12); }
    28%           { transform: rotate(11deg)  scale(1.12); }
    43%           { transform: rotate(-8deg)  scale(1.07); }
    58%           { transform: rotate(6deg)   scale(1.04); }
    73%           { transform: rotate(-3deg)  scale(1.02); }
}

@keyframes geb-atmen {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.07); }
}

@keyframes geb-puls {

    0%,
    100% {
        opacity: 0;
        transform: scale(.94);
    }

    50% {
        opacity: .55;
        transform: scale(1.06);
    }
}

@keyframes geb-steigt {
    from {
        transform: translate(0, 0) rotate(-4deg);
        opacity: 0;
    }

    12% {
        opacity: .5;
    }

    88% {
        opacity: .5;
    }

    to {
        transform: translate(var(--drift), -22rem) rotate(4deg);
        opacity: 0;
    }
}

@keyframes kopf-glocke-wackeln {
    0%, 100% { transform: rotate(0); }
    15% { transform: rotate(12deg); }
    32% { transform: rotate(-10deg); }
    49% { transform: rotate(6deg); }
    66% { transform: rotate(-3deg); }
    83% { transform: rotate(1deg); }
}

@keyframes kopf-blende {
    from {
        clip-path: circle(0% at var(--wisch-x, 50%) var(--wisch-y, 0));
    }

    to {
        clip-path: circle(140% at var(--wisch-x, 50%) var(--wisch-y, 0));
    }
}

@keyframes kopf-suche-nein {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-5px); }
    40% { transform: translateX(4px); }
    60% { transform: translateX(-3px); }
    80% { transform: translateX(2px); }
}

@keyframes kopf-suche-da {
    0% { outline-color: transparent; outline-offset: 1.2rem; }
    18% { outline-color: var(--k-akzent); outline-offset: 0.4rem; }
    70% { outline-color: var(--k-akzent); outline-offset: 0.4rem; }
    100% { outline-color: transparent; outline-offset: 0.4rem; }
}

@keyframes aerona-lade-punkt {
    0%    { translate: 0 0; }
    12.5% { translate: 10px 0; }
    25%   { translate: 20px 0; }
    37.5% { translate: 20px 10px; }
    50%   { translate: 20px 20px; }
    62.5% { translate: 10px 20px; }
    75%   { translate: 0 20px; }
    87.5% { translate: 0 10px; }
    100%  { translate: 0 0; }
}

@keyframes lb-blitz {
    0% { opacity: 0; transform: scale(1.02); }
    12% { opacity: 1; transform: scale(1); }
    75% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes lv-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(2px); }
    to { opacity: 1; transform: none; }
}

@keyframes cursorMove {
    0%, 10% { transform: translate(80cqw, 90cqh) scale(1); }
    20% { transform: translate(55cqw, 50cqh) scale(1); }
    25% { transform: translate(55cqw, 50cqh) scale(.85); }
    30%, 40% { transform: translate(55cqw, 50cqh) scale(1); }
    45% { transform: translate(45cqw, 62cqh) scale(1); }
    50% { transform: translate(45cqw, 62cqh) scale(.85); }
    55%, 70% { transform: translate(45cqw, 62cqh) scale(1); }
    80%, 100% { transform: translate(80cqw, 90cqh) scale(1); }
}

@keyframes menuShow {
    0%, 25% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
    30%, 75% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
    80%, 100% { opacity: 0; transform: translateX(-50%) translateY(10px) scale(.9); }
}

@keyframes elementColor {
    0%, 24% { background: var(--k-akzent); outline: 2px dashed transparent; outline-offset: 4px; }
    25%, 49% { background: var(--k-akzent); outline: 2px dashed color-mix(in srgb, var(--k-fehler) 80%, transparent); outline-offset: 4px; }
    50%, 74% { background: var(--k-fehler); outline: 2px dashed color-mix(in srgb, var(--k-fehler) 80%, transparent); outline-offset: 4px; }
    75%, 100% { background: var(--k-fehler); outline: 2px dashed transparent; outline-offset: 4px; }
}

@keyframes marke-aeri-einflug {
    from {
        opacity: 0;
        transform: translate(-16px, 6px) scale(0.45) rotate(-14deg);
    }

    to {
        opacity: 1;
        transform: translateY(-1px) scale(1) rotate(0deg);
    }
}

@keyframes marke-gruss-schein {
    0% {
        opacity: 0;
        transform: scale(0.7);
    }

    20% {
        opacity: 1;
        transform: scale(1);
    }

    100% {
        opacity: 0;
        transform: scale(1.32);
    }
}

@keyframes nach-oben-durch {
    0% { transform: translateY(-3px); opacity: 1; animation-timing-function: steps(3, end); }
    30% { transform: translateY(-14px); opacity: 0; }
    31% { transform: translateY(14px); opacity: 0; animation-timing-function: steps(4, end); }
    100% { transform: translateY(0); opacity: 1; }
}

@keyframes ns-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to { opacity: 1; }
}

@keyframes kopf-leiste-ankunft {
    from {
        opacity: 0;
        transform: translateY(-18px);
        animation-timing-function: steps(6, end);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes kopf-teil-ankunft {
    from {
        opacity: 0;
        transform: translateY(9px) scale(0.94);
        animation-timing-function: steps(5, end);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes po-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to { opacity: 1; }
}

@keyframes rk-hupf {
    0% { transform: scale(1); }
    45% { transform: scale(1.12); }
    100% { transform: scale(1); }
}

@keyframes legalEin {
    from { animation-timing-function: steps(6, end);
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes rh-hin { 0%, 100% { transform: none; } 50% { transform: translateX(-3px); } }

@keyframes rh-her { 0%, 100% { transform: none; } 50% { transform: translateX(3px); } }

@keyframes rb-ein {
    from { animation-timing-function: steps(5, end); opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes b2-datei-tuer-l { from { transform: translateX(0); } to { transform: translateX(-101%); } }

@keyframes b2-datei-tuer-r { from { transform: translateX(0); } to { transform: translateX(101%); } }

@keyframes b2-datei-inhalt { from { opacity: 0; filter: blur(8px); } to { opacity: 1; filter: none; } }

@keyframes aerona-seite-kommt {
    from { animation-timing-function: steps(4, end);
        opacity: 0;
        transform: translateY(6px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes sprachwahl-ankommen {
    from {
        opacity: 0;
        transform: translateY(7px) scale(0.985);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes sprachwahl-gezaehlt {
    0%,
    100% {
        background: var(--k-vertieft);
    }

    35% {
        background: var(--k-schein-verlauf-leise);
    }
}

@keyframes sprachwahl-zahl-hoch {
    0%,
    100% {
        transform: translateY(0);
    }

    35% {
        transform: translateY(-2px);
    }
}

@keyframes ausgang-takt {
    0%, 100% { translate: 0 0; }
    50%      { translate: 0 2px; }
}

@keyframes roll-punkt {
    0%, 100% { opacity: .25; }
    50%      { opacity: 1; }
}

@keyframes blende-zug {
    0%   { opacity: 0; scale: 1.18; }
    22%  { opacity: .5; }
    62%  { opacity: .32; }
    100% { opacity: 0; scale: .96; }
}

@keyframes naht-wisch {
    from { background-position: -30% 0, 0 0; }
    to   { background-position: 130% 0, 0 0; }
}

@keyframes verz-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to   { opacity: 1; }
}

@keyframes verz-zu {
    from { animation-timing-function: steps(4, end); opacity: 1; }
    to   { opacity: 0; }
}

@keyframes verz-tafel-auf {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
}

@keyframes kopf-suche-sofort-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@keyframes tk-auftritt {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to { opacity: 1; }
}

@keyframes tl-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(4px); }
}

@keyframes tl-blatt {
    from { animation-timing-function: steps(4, end); transform: translateY(100%); }
}

@keyframes tr-auftritt {
    from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

@keyframes av-atmen {
    50% { box-shadow: 0 0 0 5px rgba(168, 85, 247, .22), 0 0 22px rgba(168, 85, 247, .9); }
}

@keyframes wf-ein { from { animation-timing-function: steps(4, end); opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

@keyframes zh-auf {
    from { animation-timing-function: steps(4, end); opacity: 0; }
    to { opacity: 1; }
}

@keyframes zk-rein { from { opacity: 0; transform: translateY(10px) scale(0.98); } to { opacity: 1; transform: none; } }

@keyframes zk-klappe-zu { from { opacity: 1; transform: scaleY(1); } to { opacity: 0; transform: scaleY(0); } }

@keyframes zk-klappe-auf { from { opacity: 0; transform: scaleY(0); } to { opacity: 1; transform: scaleY(1); } }

@keyframes zk-brief { from { animation-timing-function: steps(5, end); opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@keyframes zg-blinken {
    from { outline-offset: 10px; }
    to { outline-offset: 3px; }
}

@keyframes cursor-takt {
    50% {
        opacity: 0;
        box-shadow: none;
    }
}

@keyframes wave-eq {
    0% {
        transform: scaleY(0.6);
        filter: brightness(0.8);
    }

    100% {
        transform: scaleY(1.3);
        filter: brightness(1.3);
    }
}

@keyframes hero-kommt-oben {
    from {
        animation-timing-function: steps(5, end);
        opacity: 0;
        transform: translateY(-40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes hero-kommt-unten {
    from {
        animation-timing-function: steps(5, end);
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes chartBounce {
    30% {
        transform: scaleY(.35);
    }

    60% {
        transform: scaleY(.85);
    }

    100% {
        transform: scaleY(.45);
    }
}

@keyframes demoPulse {
    0% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(59, 130, 246, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(59, 130, 246, 0);
    }
}

@keyframes stufen-kommt {
    from {
        animation-timing-function: steps(4, end);
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes popIn {
    to {
        transform: scale(1);
    }
}

@keyframes aerona-notausgang {
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes schreibmarke-takt {

    0%,
    100% {
        animation-timing-function: steps(1, end);
        opacity: 1;
    }

    50% {
        opacity: 0;
    }
}

@keyframes barPulse {

    0%,
    100% {
        transform: scaleY(.3);
    }

    50% {
        transform: scaleY(.8);
    }
}

@keyframes status-punkt-takt {
    50% {
        opacity: 0.5;
    }
}

@keyframes status-ring-takt {
    0% {
        transform: scale(1);
        opacity: 1;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

@keyframes ring-takt {

    75%,
    100% {
        transform: scale(1.6);
        opacity: 0;
    }
}

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

@keyframes eintrag-kommt {
    from {
        opacity: 0;
        transform: translateX(-14px) scale(0.98);
    }

    to {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

@keyframes status-punkt-blinken {

    0%,
    100% {
        opacity: 1;
        box-shadow: 0 0 6px var(--k-vertieft-tief);
    }

    50% {
        opacity: 0.5;
        box-shadow: 0 0 12px var(--k-vertieft-tief), 0 0 20px var(--k-vertieft-tief);
    }
}

@keyframes lade-takt {
    to {
        transform: rotate(360deg);
    }
}

@keyframes inhalt-kommt {
    from {
        animation-timing-function: steps(4, end);
        opacity: 0;
        transform: translateY(8px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tippt {
    0%, 100% { opacity: .25; transform: translateY(0); }
    40%      { opacity: 1; transform: translateY(-.18rem); }
}

:root.b2-an .kopf .kopf__bahn .dropdown-content {
    transition: visibility 0s linear var(--bew-mikro);
}
:root.b2-an .kopf .kopf__bahn .dropdown-trigger i {
    transition: opacity var(--bew-mikro) var(--bew-knackig);
}

:root.b2-an .b2-text-wartet { opacity: 0; }

@keyframes b2-seite-tueren-auf {
    from { clip-path: polygon(0 0, 50% 0, 50% 100%, 50% 100%, 50% 0, 100% 0, 100% 100%, 0 100%); }
    to { clip-path: polygon(0 0, 0 0, 0 100%, 100% 100%, 100% 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes b2-seite-faellt-ein {
    from { transform: scale(1.25) translateY(-8px); filter: blur(10px); opacity: 0; }
    70% { transform: scale(.98); filter: blur(0); opacity: 1; }
    to { transform: none; filter: none; opacity: 1; }
}
:root[data-thema]:not(.thema-wechselt)::view-transition-old(root) {
    z-index: 2;
    animation: b2-seite-tueren-auf var(--bew-ruhig) cubic-bezier(.6, 0, .3, 1) both;
}
:root[data-thema]:not(.thema-wechselt)::view-transition-new(root) {
    animation: b2-seite-faellt-ein 500ms cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
    :root[data-thema]:not(.thema-wechselt)::view-transition-old(root),
    :root[data-thema]:not(.thema-wechselt)::view-transition-new(root) { animation: none; }
}
:root.aerona-ohne-animation[data-thema]:not(.thema-wechselt)::view-transition-old(root),
:root.aerona-ohne-animation[data-thema]:not(.thema-wechselt)::view-transition-new(root) {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    :root.b2-tueren-auf::before, :root.b2-tueren-auf::after { display: none; }
    :root.b2-tueren-auf main { animation: none; }
}
:root.aerona-ohne-animation.b2-tueren-auf::before,
:root.aerona-ohne-animation.b2-tueren-auf::after { display: none; }
:root.aerona-ohne-animation.b2-tueren-auf main { animation: none; }

@media (prefers-reduced-motion: no-preference) {
    :root.b2-an:not(.aerona-ohne-animation) :is(.kopf .kopf__start, .sprachinfo__nehmen, .hero-weg, .btn-primary, .btn-secondary).b2-magnet:is(:hover, .b2-zeigt) {
        transform: translate(var(--b2-mx, 0px), calc(var(--b2-heben, -2px) + var(--b2-my, 0px))) scale(1.04);
    }

    :root.b2-an:not(.aerona-ohne-animation)[data-thema] .hero-weg.b2-magnet {
        transition: color var(--bew-mikro) var(--bew-knackig),
                    translate var(--bew-ruhig) steps(5, end) var(--reihe, 0ms),
                    opacity var(--bew-ruhig) steps(5, end) var(--reihe, 0ms),
                    transform var(--b2-kurz, 210ms) var(--b2-kurve, cubic-bezier(.16, 1, .3, 1));
    }
}

:root.b2-an .kopf--ankunft.b2-ankunft .kopf__leiste,
:root.b2-an .kopf--ankunft.b2-ankunft .kopf__teil {
    animation: none;
}

:root.b2-an .kopf .kopf__gleiter,
:root.b2-an .kopf .kopf__gleiter--wandert {
    transition: opacity var(--bew-mikro) var(--bew-knackig);
}

:root.b2-an .kopf .kopf__gestirn,
:root.b2-an .kopf .kopf__himmel--fliegt .kopf__gestirn {
    opacity: 1;
    transition: box-shadow var(--bew-mikro) var(--bew-knackig);
}

:root.b2-an .hamburger-icon span {
    transition: background-color var(--bew-mikro) var(--bew-knackig);
}

:root.b2-an[data-thema] .kopf-suche__feld {
    transition: none;
}

:root.b2-an[data-thema] .kopf-suche__treffer {
    scrollbar-width: none;
}

:root.b2-an .kopf .status-band__huelle {
    transition: none;
}

:root.b2-an[data-thema] #scrollToTopBtn.nach-oben.visible {
    transition:
        border-color var(--bew-mikro) var(--bew-knackig),
        box-shadow var(--bew-mikro) var(--bew-knackig);
}

:root.b2-an .tl-knopf__text {
    display: inline-block;
}

:root.b2-an .updates-popup-overlay .updates-popup {
    transform: none;
    transition: none;
}

:root.b2-an[data-thema] .kopf__torte::before,
:root.b2-an[data-thema] .kopf__torte--tag::before {
    animation: none;
    opacity: 0;
}

:root.b2-an .kopf .kopf__kanzel aeri-tier {
    animation: none;
}

:root.b2-an[data-thema] [data-aeri-platz],
:root.b2-an[data-thema] [data-aeri-platz] > * {
    transition: none !important;
}

:root.b2-an[data-thema] .kopf .kopf__kanzel > aeri-tier {
    scale: none !important;
    transition: transform var(--bew-mikro) var(--bew-knackig) !important;
}

:root.b2-an #aeri-ende-moment {
    transition: none;
}

@media (prefers-reduced-motion: reduce) {
    :root.b2-an .tippt i { animation: none; }
}

:root.b2-an.aerona-ohne-animation .tippt i {
    animation: none;
}

:root.b2-an[data-thema] .spur-laeufer {
    transition: opacity var(--laeufer-form) var(--laeufer-kurve);
}

:root.b2-an[data-thema] .kapitel--dran > .kapitel-naht {
    animation: none;
}

:root.b2-an[data-thema] .kapitel-blende.blende--laeuft {
    animation: none;
}

:root.b2-an[data-thema] .verzeichnis,
:root.b2-an[data-thema] .verzeichnis.verz--geht,
:root.b2-an[data-thema] .verz-tafel {
    animation: none;
}

:root.b2-an .aerona-leseraum-leiste {
    transform: none;
    translate: -50% 0;
    transition: none;
}

:root.b2-an[data-thema] .schwebe-weicht {
    transition: none !important;
}
:root.b2-an[data-thema] .schwebe-weicht.b2-e6-geht {
    opacity: 1 !important;
    visibility: visible !important;
}

:root.b2-an[data-thema] .kopf-suche__feld {
    border-radius: var(--k-rund-pille, 999px);
}
@media (prefers-reduced-motion: reduce) {
    :where(details.pr-seite) > summary::after { transition: none; }
}

@media (prefers-reduced-motion: no-preference) {
    :root.b2-an:not(.aerona-ohne-animation) .modal-backdrop.fenster--aus-knopf.fenster--faehrt-zurueck {
        animation: none;
    }
    :root.b2-an:not(.aerona-ohne-animation) .modal-backdrop.fenster--aus-knopf.fenster--faehrt-zurueck .modal-content {
        animation: b2-a10-halten var(--b2-a10-zu, var(--fenster-zu)) linear both;
    }
    :root.b2-an:not(.aerona-ohne-animation) .modal-backdrop.fenster--aus-knopf.fenster--faehrt-zurueck .modal-content::after {
        content: none;
        animation: none;
    }
}
@keyframes b2-a10-halten {
    from { visibility: visible; }
    to { visibility: visible; }
}

:root.b2-an .kopf .kopf__start i {
    transition: none;
}

:root.b2-an[data-thema] .werk-strich::after {
    transition: none;
}
:root.b2-an:not(.aerona-kontrast) .ex-time.b2-strang .ex-step.b2-strang-zeigt h2 {
    background-image: linear-gradient(90deg, var(--k-verlauf-a, #60a5fa), var(--k-verlauf-b, #a855f7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
:root.b2-an:not(.aerona-kontrast) .ae-zeit.b2-strang .b2-strang-zeigt .ae-zeit__nr {
    background-image: linear-gradient(90deg, var(--k-verlauf-a, #60a5fa), var(--k-verlauf-b, #a855f7));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}