/* ===================================================================
   grundlage.css - Farbwerte, Schrift, Grundgerüst der Schaukastenseite.
   Hell- und Dunkelmodus sind gleichwertig gepflegt (RULE 00, RULE 10).
   =================================================================== */

.aeri-seite {
    --akzent: #3b82f6;
    --akzent-hell: #60a5fa;
    --akzent-tief: #1d4ed8;

    --grund: #020617;
    --grund-tief: #01030d;
    --flaeche: rgba(255, 255, 255, .045);
    --flaeche-stark: rgba(255, 255, 255, .075);
    --rand: rgba(255, 255, 255, .09);
    --rand-stark: rgba(255, 255, 255, .16);
    --text: #e9eefb;
    --text-leise: #93a3bd;
    --schatten: 0 1.5rem 3.5rem rgba(0, 0, 0, .45);
    --schein: rgba(59, 130, 246, .28);

    --breite: 76rem;
    --rundung: 1.25rem;
    --rundung-klein: .75rem;
}

.aeri-seite[data-thema="hell"] {
    --grund: #eef3fc;
    --grund-tief: #e2eaf8;
    --flaeche: rgba(255, 255, 255, .72);
    --flaeche-stark: rgba(255, 255, 255, .92);
    --rand: rgba(15, 23, 42, .09);
    --rand-stark: rgba(15, 23, 42, .16);
    --text: #0a1424;
    --text-leise: #55657f;
    --schatten: 0 1.25rem 3rem rgba(18, 38, 82, .12);
    --schein: rgba(59, 130, 246, .2);
}

.aeri-seite, .aeri-seite * {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.aeri-seite {
    font-size: clamp(15px, .55vw + 12px, 20px);
    background: var(--grund-tief);
    -webkit-font-smoothing: antialiased;
    scroll-behavior: smooth;
}

.aeri-seite {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: var(--text);
    line-height: 1.6;
    background-color: var(--grund);
    background-image:
        radial-gradient(at 8% 0%, rgba(29, 78, 216, .28) 0, transparent 55%),
        radial-gradient(at 92% 12%, rgba(76, 29, 149, .22) 0, transparent 50%),
        radial-gradient(at 50% 100%, rgba(59, 130, 246, .12) 0, transparent 60%);
    background-attachment: scroll;
    min-height: 100vh;
    overflow-x: hidden;
    transition: background-color .4s ease, color .4s ease;
}

.aeri-seite[data-thema="hell"] {
    background-image:
        radial-gradient(at 8% 0%, rgba(59, 130, 246, .18) 0, transparent 55%),
        radial-gradient(at 92% 12%, rgba(124, 58, 237, .12) 0, transparent 50%),
        radial-gradient(at 50% 100%, rgba(59, 130, 246, .1) 0, transparent 60%);
}

.aeri-seite h1, .aeri-seite h2, .aeri-seite h3, .aeri-seite h4 {
    font-family: 'Outfit', 'Inter', system-ui, sans-serif;
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.aeri-seite p { color: var(--text-leise); }

code, kbd {
    font-family: 'Consolas', 'SF Mono', ui-monospace, monospace;
    font-size: .88em;
}

/* --- Grundgerüst --------------------------------------------------- */

.bahn {
    width: 100%;
    max-width: var(--breite);
    margin: 0 auto;
    padding: 0 1.75rem;
}

/* padding-block, nicht padding: das Kurzschreiben würde den Seitenrand von
   .bahn mit 0 überschreiben - dann klebt der ganze Text am Fensterrand. */
.abschnitt {
    padding-block: 5.5rem;
    position: relative;
}

.abschnitt + .abschnitt {
    border-top: 1px solid var(--rand);
}

.abschnitt-kopf {
    max-width: 44rem;
    margin-bottom: 3rem;
}

.abschnitt-nummer {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--akzent-hell);
    margin-bottom: .9rem;
}

.abschnitt-kopf h2 {
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    margin-bottom: .85rem;
}

.abschnitt-kopf p {
    font-size: 1.05rem;
    max-width: 40rem;
}

/* --- Glasfläche: einmal definiert, überall benutzt ----------------- */

.glas {
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: var(--rundung);
    -webkit-backdrop-filter: blur(1.25rem);
    backdrop-filter: blur(1.25rem);
    box-shadow: var(--schatten);
}

/* --- Kopfzeile ---------------------------------------------------- */

.kopfzeile {
    position: sticky;
    top: 0;
    z-index: 20;
    background: color-mix(in srgb, var(--grund) 78%, transparent);
    -webkit-backdrop-filter: blur(1rem);
    backdrop-filter: blur(1rem);
    border-bottom: 1px solid var(--rand);
}

.kopfzeile-inhalt {
    display: flex;
    align-items: center;
    gap: .75rem;
    height: 4rem;
}

/* Die Sprungleiste nimmt den Platz zwischen Marke und Schalter - und darf
   dabei schrumpfen, statt die beiden aus dem Fenster zu schieben. */
.kopfzeile-inhalt > .sprungleiste {
    flex: 1 1 auto;
}

.kopfzeile-inhalt > .knopf {
    flex: 0 0 auto;
}

.marke {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: .6rem;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    letter-spacing: -.01em;
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.marke:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 4px;
    border-radius: .4rem;
}

.marke small {
    font-weight: 400;
    color: var(--text-leise);
    letter-spacing: .04em;
}

.kopf-luecke { flex: 1; }

.knopf {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font: inherit;
    font-size: .85rem;
    font-weight: 500;
    color: var(--text);
    background: var(--flaeche);
    border: 1px solid var(--rand);
    border-radius: 999px;
    padding: .48rem 1rem;
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease, transform .25s ease;
}

.knopf:hover {
    border-color: var(--rand-stark);
    background: var(--flaeche-stark);
    transform: translateY(-1px);
}

.knopf:focus-visible {
    outline: 2px solid var(--akzent);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .knopf:hover { transform: none; }
}