@charset "UTF-8";

/* =============================================================
   Lukki Casino — Redaktionsauftritt Österreich
   Aufbau der Datei:
     1. Schriftschnitte (selbst gehostet)
     2. Gestaltungsmarken (:root) — mobile Stufe zuerst
     3. Breite Stufen der Marken
     4. Grundlagen / Reset / Zugänglichkeit
     5. Bausteine, alphabetisch nach Klassenwurzel
     6. Hilfsklassen
   ============================================================= */

/* ---------- 1. Schriftschnitte ---------- */

@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url(/type/lk-book.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 400;
    src: url(/type/lk-book-x.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url(/type/lk-semi.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 600;
    src: url(/type/lk-semi-x.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Der schwerste vorhandene Schnitt deckt die Stufe 700 und 800 zugleich ab —
   damit bleibt die Stufe aus der Typoskala erhalten, ohne künstlichen Fettdruck. */
@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700 800;
    src: url(/type/lk-strong.woff2) format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-display: swap;
    font-family: "Poppins";
    font-style: normal;
    font-weight: 700 800;
    src: url(/type/lk-strong-x.woff2) format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- 2. Gestaltungsmarken — schmale Stufe ---------- */

:root {
    /* Farbklaviatur */
    --ink-pillar: #102a56;
    --ink-key: #ecd393;
    --ink-spot-deep: #e5c878;
    --ink-bg: #f0eff0;
    --ink-layer: #faf9fa;
    --ink-text: #1e2937;
    --ink-quiet: #000000;
    --ink-rule: rgba(16, 42, 86, 0.18);
    --ink-edge-hard: #102a56;
    --ink-grad-1: #ecd298;
    --ink-gradient-mid: #0f2753;
    --ink-caution: #b3001b;
    /* abgeleitet: ruhiger Fließtext und Schrift auf dunklem Grund */
    --ink-hush: #4a5568;
    --ink-reverse: #f7f6f4;
    --ink-reverse-soft: #c9d2e0;

    /* Abstandsleiter */
    --gut-step-0: 4px;
    --gut-step-1: 12px;
    --gut-step-2: 20px;
    --gut-step-3: 36px;
    --gut-step-4: 56px;
    --gut-step-5: 84px;
    --gut-step-6: 120px;
    --gut-step-7: 180px;

    /* Rundungen und Kanten */
    --rad-step-0: 0;
    --rad-step-1: 0;
    --rad-step-2: 4px;
    --rad-step-3: 6px;
    --rad-step-4: 10px;
    --rad-step-5: 14px;
    --rad-step-6: 18px;
    --rad-step-7: 24px;
    --rad-pill: 9999px;
    --rad-round-full: 50%;
    --bd-slim: 1px;
    --bd-mid: 4px;
    --bd-wide: 6px;

    /* Tiefen */
    --dep-step-0: none;
    --dep-step-1: none;
    --dep-step-2: none;
    --dep-step-3: 0 0 0 1px rgba(16, 42, 86, 0.08);
    --dep-step-4: 0 0 0 2px rgba(16, 42, 86, 0.10), 0 8px 24px rgba(16, 42, 86, 0.12);
    --dep-step-5: 0 0 0 2px rgba(16, 42, 86, 0.14), 0 14px 34px rgba(16, 42, 86, 0.16);
    --dep-step-6: 0 18px 46px rgba(16, 42, 86, 0.20);
    --dep-step-7: 0 24px 60px rgba(16, 42, 86, 0.24);

    /* Schrift */
    --ff-display: "Poppins", "Segoe UI", system-ui, sans-serif;
    --ff-body: "Poppins", "Segoe UI", system-ui, sans-serif;
    --fs-h1: clamp(22px, calc(4.2px + 5.56vw), 72px);
    --fs-h2: clamp(24px, calc(16.9px + 2.22vw), 44px);
    --fs-lg-2: clamp(19px, calc(15.8px + 1vw), 28px);
    --fs-h4: 18px;
    --fs-minor: 14px;
    --fs-xs-2: 12px;
    --fs-copy: 17px;
    --fs-petite: 14px;
    --fs-legal: 11px;
    --ld-tight: 1.06;
    --ld-even: 1.5;
    --ld-roomy: 1.7;
    --wg-book: 400;
    --wg-semi: 600;
    --wg-strong: 800;
    --ls-snug: -0.03em;
    --ls-regular: 0;
    --ls-loose: 0.05em;

    /* Bewegung — Zahlen dieser Sammlung, nicht gerundet */
    --dur-snap: 87ms;
    --dur-base: 180ms;
    --dur-calm: 348ms;
    --bz-out: cubic-bezier(0.23, 0.65, 0.53, 0.95);
    --bz-in: cubic-bezier(0.53, 0.05, 0.77, 0.35);
    --bz-in-out: cubic-bezier(0.68, 0.04, 0.41, 1);
    --bz-pop: cubic-bezier(0.33, 1.65, 0.68, 0.95);

    /* Maße der Bahn */
    --shl-max: 1220px;
    --shl-readable: 550px;
    --shl-pad-lg: 64px;
    --shl-pad-md: 32px;
    --shl-edge-narrow: 20px;
    --shl-pad: var(--shl-edge-narrow);

    /* Kopfleiste */
    --bar-size-desktop: 72px;
    --bar-height-mobile: 64px;

    /* Schrittweiten der Abschnitte */
    --band-top: var(--gut-step-3);
    --band-end: var(--gut-step-2);
}

/* ---------- 3. Breite Stufen ---------- */

@media (min-width: 620px) {
    :root {
        --shl-pad: var(--shl-pad-md);
    }
}

@media (min-width: 940px) {
    :root {
        --fs-h4: 20px;
        --fs-minor: 16px;
        --fs-xs-2: 14px;
        --fs-copy: 18px;
        --fs-petite: 15px;
        --fs-legal: 12px;
        --shl-pad: var(--shl-pad-lg);
        --band-top: var(--gut-step-4);
        --band-end: var(--gut-step-3);
    }
}

/* ---------- 4. Grundlagen ---------- */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
}

html,
body {
    overflow-x: clip;
}

body {
    background-color: var(--ink-bg);
    color: var(--ink-text);
    font-family: var(--ff-body);
    font-size: var(--fs-copy);
    font-weight: var(--wg-book);
    line-height: var(--ld-even);
    margin: 0;
    min-height: 100vh;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
    margin: 0;
}

h1 {
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-snug);
    line-height: var(--ld-tight);
}

h2 {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-snug);
    line-height: var(--ld-tight);
}

h3 {
    font-family: var(--ff-body);
    font-size: var(--fs-lg-2);
    font-weight: var(--wg-semi);
    line-height: var(--ld-tight);
}

p {
    margin: 0;
}

ul,
ol {
    margin: 0;
    padding: 0;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: var(--ink-pillar);
}

button,
input,
textarea {
    font: inherit;
}

[id] {
    scroll-margin-block-start: 110px;
}

.shell-main {
    display: block;
}

/* Sprungmarke bleibt weit außerhalb des Bildes, bis sie den Fokus bekommt */
.skip-jump {
    background-color: var(--ink-pillar);
    color: var(--ink-reverse);
    inset-inline-start: var(--gut-step-2);
    padding: var(--gut-step-1) var(--gut-step-2);
    position: fixed;
    text-decoration: none;
    top: var(--gut-step-1);
    z-index: 200;
}

.skip-jump:not(:focus) {
    top: -240px !important;
}

/* Hinweis zum Spielerschutz — dunkles Band mit farbiger Kante (RG-04) */
.rg-banner {
    align-items: center;
    background-color: var(--ink-pillar);
    border-block-end: 3px solid var(--ink-caution);
    color: var(--ink-reverse);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-legal);
    gap: var(--gut-step-0) var(--gut-step-1);
    justify-content: center;
    line-height: var(--ld-even);
    margin: 0;
    padding: 6px var(--shl-pad);
    text-align: center;
}

.rg-banner-badge {
    background-color: var(--ink-caution);
    border-radius: var(--rad-step-2);
    color: var(--ink-reverse);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-loose);
    padding: 1px 7px;
}

.rg-banner-prose,
.rg-banner-note {
    color: var(--ink-reverse);
}

.rg-banner-more {
    color: var(--ink-reverse);
    display: none;
}

@media (min-width: 620px) {
    .rg-banner-more {
        display: inline;
    }
}

.rg-banner-href {
    color: var(--ink-key);
    text-decoration-color: var(--ink-caution);
    text-decoration-thickness: 2px;
    text-underline-offset: 2px;
}

.rg-banner-href:hover,
.rg-banner-href:focus-visible {
    color: var(--ink-reverse);
    text-decoration-color: var(--ink-key);
}

/* Fließtextverweise — Linie wächst von links (Bewegungsachse linkHover) */
.body-href {
    background-image: linear-gradient(var(--ink-pillar), var(--ink-pillar));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    color: var(--ink-pillar);
    font-weight: var(--wg-semi);
    padding-block-end: 2px;
    text-decoration: underline;
    text-decoration-color: var(--ink-rule);
    text-underline-offset: 3px;
    transition: background-size var(--dur-base) var(--bz-out);
}

.body-href:hover,
.body-href:focus-visible {
    background-size: 100% 2px;
    color: var(--ink-pillar);
    text-decoration-color: transparent;
}

/* Gemeinsame Bahn: jede Sektion teilt sich dieselbe Höchstbreite */
.a63-frame,
.e82-frame,
.f62-frame,
.g53-frame,
.h27-frame,
.i93-frame,
.k64-frame,
.m96-frame,
.n41-frame,
.p85-frame,
.t63-frame,
.u12-frame,
.u56-frame,
.u85-frame,
.u99-frame,
.v23-frame,
.v37-frame,
.x98-frame {
    display: block;
    margin-inline: auto;
    max-width: calc(var(--shl-max) + 2 * var(--shl-pad-lg));
    padding-inline: var(--shl-pad);
    width: 100%;
}

/* Gemeinsamer Abschnittsrhythmus */
.e82,
.f62,
.g53,
.h27,
.i93,
.m96,
.n41,
.t63,
.u99,
.v23,
.v37 {
    padding-block: var(--band-top) var(--band-end);
}

/* ---------- 5. Bausteine ---------- */

/* ===== a63 — Fußbereich, massiv und mittig (FOOT-03) ===== */

.a63 {
    background-color: var(--ink-bg);
    border-block-start: var(--bd-slim) solid var(--ink-rule);
    padding-block: var(--band-top) var(--band-end);
}

.a63-frame {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-3);
    text-align: center;
}

.a63-glyph {
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
}

.a63-plate {
    align-items: center;
    background-color: var(--ink-pillar);
    border: var(--bd-slim) solid var(--ink-edge-hard);
    border-radius: var(--rad-step-4);
    display: inline-flex;
    justify-content: center;
    padding: var(--gut-step-1) var(--gut-step-2);
}

.a63-img {
    flex-shrink: 0;
    height: 66px;
    width: auto;
}

.a63-nav {
    width: 100%;
}

.a63-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-1) var(--gut-step-3);
    justify-content: center;
    list-style: none;
}

.a63-one {
    display: inline-flex;
}

.a63-href {
    color: var(--ink-text);
    font-family: var(--ff-display);
    font-size: var(--fs-copy);
    font-weight: var(--wg-semi);
    text-decoration: none;
    white-space: nowrap;
}

.a63-href:hover,
.a63-href:focus-visible {
    color: var(--ink-pillar);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.a63-prose {
    color: var(--ink-hush);
    font-size: var(--fs-petite);
    line-height: var(--ld-roomy);
    margin-inline: auto;
    max-width: 480px;
}

.a63-line {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-1) var(--gut-step-2);
    justify-content: center;
}

.a63-fine {
    color: var(--ink-hush);
    font-size: var(--fs-legal);
    letter-spacing: var(--ls-loose);
    text-decoration: none;
    text-transform: uppercase;
}

.a63-fine + .a63-fine::before {
    color: var(--ink-rule);
    content: "·";
    margin-inline-end: var(--gut-step-2);
}

.a63-fine:hover,
.a63-fine:focus-visible {
    color: var(--ink-text);
    text-decoration: underline;
}

.a63-legal {
    color: var(--ink-hush);
    font-size: var(--fs-legal);
}

/* ===== e82 — Fehlerseite auf gerastertem Grund (ERR-07) ===== */

.e82 {
    background-color: var(--ink-bg);
    background-image:
        linear-gradient(rgba(16, 42, 86, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(16, 42, 86, 0.07) 1px, transparent 1px);
    background-size: 40px 40px;
    padding-block: var(--gut-step-5) var(--gut-step-5);
}

.e82-frame {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-2);
    text-align: center;
}

.e82-num {
    color: var(--ink-pillar);
    font-family: var(--ff-display);
    font-size: clamp(64px, 14vw, 140px);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-snug);
    line-height: 1;
    opacity: 0.22;
}

.e82-title {
    margin-inline: auto;
    max-width: var(--shl-readable);
}

.e82-prose {
    color: var(--ink-hush);
    line-height: var(--ld-roomy);
    margin-inline: auto;
    max-width: var(--shl-readable);
}

.e82-back {
    align-items: center;
    align-self: center;
    background-color: var(--ink-pillar);
    border: var(--bd-slim) solid var(--ink-edge-hard);
    border-radius: var(--rad-step-3);
    color: var(--ink-reverse);
    display: inline-flex;
    font-family: var(--ff-display);
    font-size: var(--fs-minor);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-loose);
    min-height: 48px;
    padding: var(--gut-step-1) var(--gut-step-3);
    text-decoration: none;
    text-transform: uppercase;
    transition: transform var(--dur-snap) var(--bz-out);
}

.e82-back:hover,
.e82-back:focus-visible {
    background-color: var(--ink-gradient-mid);
    color: var(--ink-reverse);
    transform: translateY(2px);
}

/* ===== f62 — Kartenraster mit wechselnden Spaltenbreiten (GRID-03) ===== */

.f62 {
    background-color: var(--ink-bg);
}

.f62-title {
    margin-block-end: var(--gut-step-3);
}

.f62-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-3);
}

.f62-block {
    background-color: var(--ink-layer);
    border: var(--bd-mid) double var(--ink-rule);
    border-radius: var(--rad-step-3);
    display: flex;
    flex: 1 1 100%;
    flex-direction: column;
    gap: var(--gut-step-1);
    padding: var(--gut-step-3);
    transition: border-color var(--dur-base) var(--bz-out);
}

.f62-block:hover {
    border-color: var(--ink-pillar);
}

.f62-mark {
    align-items: center;
    background-color: var(--ink-pillar);
    border-radius: var(--rad-step-3);
    display: inline-flex;
    flex-shrink: 0;
    height: 44px;
    justify-content: center;
    width: 44px;
}

.f62-glyph {
    fill: var(--ink-key);
    height: 26px;
    width: 26px;
}

.f62-head {
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--wg-strong);
}

.f62-prose {
    color: var(--ink-text);
    line-height: var(--ld-even);
}

/* ===== g53 — Autorenkarte quer mit rundem Bildnis (AUTH-01) ===== */

.g53 {
    background-color: var(--ink-bg);
}

.g53-frame {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-3);
}

.g53-block {
    background-color: var(--ink-layer);
    border: var(--bd-mid) double var(--ink-rule);
    border-radius: var(--rad-step-4);
    display: grid;
    gap: var(--gut-step-3);
    grid-template-columns: 1fr;
    justify-items: center;
    padding: var(--gut-step-3) var(--gut-step-2);
    text-align: center;
}

.g53-headshot {
    border: var(--bd-slim) solid var(--ink-rule);
    border-radius: var(--rad-round-full);
    display: block;
    flex-shrink: 0;
    height: 120px;
    overflow: hidden;
    width: 120px;
}

.g53-img {
    height: 100%;
    object-fit: cover;
    object-position: center top;
    width: 100%;
}

.g53-main {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
}

.g53-post {
    color: var(--ink-pillar);
    font-size: var(--fs-petite);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

.g53-who {
    font-family: var(--ff-display);
    font-size: var(--fs-h2);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-snug);
    line-height: var(--ld-tight);
}

.g53-prose {
    color: var(--ink-text);
    line-height: var(--ld-roomy);
}

.g53-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-0) var(--gut-step-1);
    justify-content: center;
}

.g53-tag {
    background-color: var(--ink-pillar);
    border-radius: var(--rad-pill);
    color: var(--ink-reverse);
    font-size: var(--fs-legal);
    letter-spacing: var(--ls-loose);
    padding: var(--gut-step-0) var(--gut-step-1);
    text-transform: uppercase;
}

.g53-more {
    border-block-start: var(--bd-slim) solid var(--ink-rule);
    padding-block-start: var(--gut-step-2);
}

.g53-head {
    font-size: var(--fs-lg-2);
    margin-block-end: var(--gut-step-1);
}

.g53-set {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    list-style: none;
}

.g53-one {
    display: block;
}

.g53-href {
    color: var(--ink-pillar);
    font-weight: var(--wg-semi);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.g53-href:hover,
.g53-href:focus-visible {
    color: var(--ink-gradient-mid);
    text-decoration-thickness: 2px;
}

/* ===== h27 — Fließtext mit Randlinie am Absatz (PROSE-03) ===== */

.h27 {
    background-color: var(--ink-bg);
}

.h27-block {
    --h27-line: var(--ink-key);
}

.h27-block--one {
    --h27-line: var(--ink-key);
}

.h27-block--two {
    --h27-line: var(--ink-pillar);
}

.h27-block--three {
    --h27-line: var(--ink-caution);
}

.h27-block + .h27-block {
    margin-block-start: var(--gut-step-3);
}

.h27-head {
    margin-block-end: var(--gut-step-2);
}

.h27-prose {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
}

.h27-prose > p {
    border-inline-start: var(--bd-slim) dotted var(--h27-line);
    line-height: var(--ld-roomy);
    padding-inline-start: var(--gut-step-2);
}

.h27-set {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    list-style: none;
    padding-inline-start: var(--gut-step-2);
}

.h27-set--step {
    counter-reset: h27step;
}

.h27-one {
    border-inline-start: var(--bd-slim) dotted var(--h27-line);
    line-height: var(--ld-roomy);
    padding-inline-start: var(--gut-step-2);
    position: relative;
}

.h27-set--step > .h27-one {
    counter-increment: h27step;
}

.h27-set--step > .h27-one::before {
    color: var(--ink-pillar);
    content: counter(h27step) ". ";
    font-weight: var(--wg-semi);
}

.h27-figure {
    border: var(--bd-slim) solid var(--ink-rule);
    border-radius: var(--rad-step-3);
    margin: var(--gut-step-3) 0 0;
    max-width: 420px;
    overflow: hidden;
    padding: 0;
}

.h27-img {
    height: auto;
    width: 100%;
}

.h27-cap {
    background-color: var(--ink-layer);
    color: var(--ink-hush);
    font-size: var(--fs-petite);
    line-height: var(--ld-even);
    padding: var(--gut-step-1);
}

/* ===== i93 — Stimmen als große Auszüge (REV-09) ===== */

.i93 {
    background-color: var(--ink-layer);
}

.i93-title {
    margin-block-end: var(--gut-step-3);
    text-align: center;
}

.i93-set {
    display: block;
}

.i93-one {
    margin: 0;
    padding-block: var(--gut-step-3);
    text-align: center;
}

.i93-quote {
    color: var(--ink-text);
    font-family: var(--ff-display);
    font-size: var(--fs-lg-2);
    font-style: italic;
    line-height: var(--ld-tight);
    margin: 0 auto;
    max-width: var(--shl-readable);
}

.i93-aside {
    align-items: center;
    color: var(--ink-hush);
    display: flex;
    flex-wrap: wrap;
    font-size: var(--fs-petite);
    gap: var(--gut-step-0) var(--gut-step-1);
    justify-content: center;
    letter-spacing: var(--ls-loose);
    margin-block-start: var(--gut-step-2);
    text-transform: uppercase;
}

.i93-who {
    color: var(--ink-text);
    font-weight: var(--wg-semi);
}

.i93-moment {
    color: var(--ink-hush);
}

.i93-sum {
    color: var(--ink-pillar);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-regular);
    text-transform: none;
}

.i93-rule {
    background-color: var(--ink-rule);
    border: 0;
    height: 1px;
    margin: 0 auto;
    width: 80px;
}

/* ===== k64 — Signaturband über volle Breite (BYLINE-05) ===== */

.k64 {
    background-color: var(--ink-pillar);
    color: var(--ink-reverse);
    padding-block: var(--gut-step-2);
}

.k64-frame {
    align-items: center;
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-2);
    justify-content: space-between;
}

.k64-who-box {
    align-items: center;
    display: flex;
    gap: var(--gut-step-1);
    text-align: start;
}

.k64-headshot {
    border-radius: var(--rad-round-full);
    flex-shrink: 0;
    height: 56px;
    object-fit: cover;
    object-position: center top;
    width: 56px;
}

.k64-main {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.k64-badge {
    color: var(--ink-reverse-soft);
    font-size: var(--fs-legal);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

.k64-who {
    color: var(--ink-reverse);
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--wg-semi);
}

.k64-href {
    color: var(--ink-key);
    text-decoration: none;
}

.k64-href:hover,
.k64-href:focus-visible {
    color: var(--ink-reverse);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.k64-post {
    color: var(--ink-reverse-soft);
    font-size: var(--fs-petite);
}

.k64-moment {
    color: var(--ink-reverse-soft);
    font-size: var(--fs-legal);
}

.k64-pitch {
    align-items: center;
    border: var(--bd-slim) solid var(--ink-key);
    border-radius: var(--rad-step-3);
    color: var(--ink-key);
    display: inline-flex;
    font-size: var(--fs-petite);
    font-weight: var(--wg-semi);
    justify-content: center;
    min-height: 46px;
    padding: var(--gut-step-1) var(--gut-step-2);
    text-decoration: none;
    transition: background-color var(--dur-base) var(--bz-out), color var(--dur-base) var(--bz-out);
    width: 100%;
}

.k64-pitch:hover,
.k64-pitch:focus-visible {
    background-color: var(--ink-key);
    color: var(--ink-pillar);
}

/* ===== m96 — Kontaktkarte mit Akzentkante (FORM-07) ===== */

.m96 {
    background-color: var(--ink-bg);
}

.m96-title {
    margin-block-end: var(--gut-step-1);
}

.m96-kicker {
    color: var(--ink-hush);
    line-height: var(--ld-roomy);
    margin-block-end: var(--gut-step-3);
}

.m96-block {
    background-color: var(--ink-layer);
    border: var(--bd-slim) solid var(--ink-rule);
    border-radius: var(--rad-step-4);
    overflow: hidden;
}

.m96-head {
    background-color: var(--ink-key);
    display: block;
    height: 8px;
    width: 100%;
}

.m96-main {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-2);
    padding: var(--gut-step-3) var(--gut-step-2);
}

.m96-cell {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-0);
}

.m96-badge {
    color: var(--ink-text);
    font-size: var(--fs-petite);
    font-weight: var(--wg-semi);
}

.m96-input,
.m96-words {
    background-color: var(--ink-bg);
    border: var(--bd-slim) solid var(--ink-rule);
    border-radius: var(--rad-step-3);
    color: var(--ink-text);
    font-size: var(--fs-copy);
    min-height: 48px;
    padding: var(--gut-step-1);
    width: 100%;
}

.m96-words {
    line-height: var(--ld-even);
    resize: vertical;
}

.m96-input:focus-visible,
.m96-words:focus-visible {
    border-color: var(--ink-pillar);
    outline: 2px solid var(--ink-pillar);
    outline-offset: 1px;
}

.m96-actions {
    display: flex;
    justify-content: center;
}

.m96-send {
    background-color: var(--ink-pillar);
    border: var(--bd-slim) solid var(--ink-edge-hard);
    border-radius: var(--rad-step-3);
    color: var(--ink-reverse);
    cursor: pointer;
    font-family: var(--ff-display);
    font-size: var(--fs-minor);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-loose);
    min-height: 48px;
    padding: var(--gut-step-1) var(--gut-step-3);
    text-transform: uppercase;
    transition: transform var(--dur-snap) var(--bz-out);
}

.m96-send:hover,
.m96-send:focus-visible {
    background-color: var(--ink-gradient-mid);
    color: var(--ink-reverse);
    transform: translateY(2px);
}

.m96-done {
    background-color: var(--ink-layer);
    color: var(--ink-text);
    font-weight: var(--wg-semi);
    line-height: var(--ld-roomy);
    padding: var(--gut-step-3) var(--gut-step-2);
}

.m96-aside {
    color: var(--ink-hush);
    font-size: var(--fs-petite);
    margin-block-start: var(--gut-step-2);
}

.m96-href {
    color: var(--ink-pillar);
    font-weight: var(--wg-semi);
}

.m96-href:hover,
.m96-href:focus-visible {
    color: var(--ink-gradient-mid);
}

/* ===== n41 — dunkler Aufrufblock über die volle Breite (CTA-08) ===== */

.n41 {
    background-color: var(--ink-pillar);
    color: var(--ink-reverse);
    padding-block: var(--band-top) var(--band-end);
}

.n41-frame {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-2);
}

.n41-kicker {
    color: var(--ink-key);
    font-size: var(--fs-legal);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

.n41-title {
    color: var(--ink-reverse);
    font-family: var(--ff-display);
    font-size: var(--fs-h1);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-snug);
    line-height: var(--ld-tight);
    text-transform: uppercase;
}

.n41-prose {
    color: var(--ink-reverse-soft);
    font-size: var(--fs-h4);
    line-height: var(--ld-even);
}

.n41-legal {
    color: var(--ink-reverse-soft);
    font-size: var(--fs-legal);
    line-height: var(--ld-even);
}

/* ===== p85 — schmale Doppelknopf-Leiste im Textfluss (INLINE-CTA-06) ===== */

.p85 {
    background-color: var(--ink-layer);
    border-block: var(--bd-slim) solid var(--ink-rule);
    display: block;
    padding-block: var(--gut-step-2);
}

.p85--lede {
    background-color: var(--ink-bg);
}

.p85--flow {
    border-radius: var(--rad-step-3);
    margin-block: var(--gut-step-3);
}

.p85--cell {
    border-radius: var(--rad-step-3);
    flex: 1 1 100%;
}

.p85-frame {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    text-align: center;
}

.p85-prose {
    color: var(--ink-text);
    font-weight: var(--wg-semi);
    line-height: var(--ld-even);
    margin-inline: auto;
    max-width: var(--shl-readable);
}

.p85-actions {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    justify-content: center;
}

.p85-ghost {
    align-items: center;
    background-color: transparent;
    border: var(--bd-slim) solid var(--ink-hush);
    border-radius: var(--rad-step-3);
    color: var(--ink-text);
    display: inline-flex;
    font-size: var(--fs-minor);
    font-weight: var(--wg-semi);
    justify-content: center;
    min-height: 46px;
    padding: var(--gut-step-1) var(--gut-step-2);
    text-decoration: none;
    transition: border-color var(--dur-base) var(--bz-out), background-color var(--dur-base) var(--bz-out);
}

.p85-ghost:hover,
.p85-ghost:focus-visible {
    background-color: rgba(16, 42, 86, 0.06);
    border-color: var(--ink-pillar);
    color: var(--ink-text);
}

.p85-legal {
    color: var(--ink-hush);
    font-size: var(--fs-legal);
}

/* Grundform der Angebotsknöpfe im Seitenfluss — Farbe und Bewegung
   liefert das Stilwerkzeug weiter unten in dieser Datei. */
.n41-pitch,
.p85-pitch,
.x98-pitch {
    align-items: center;
    align-self: flex-start;
    border-radius: var(--rad-step-3);
    display: inline-flex;
    font-family: var(--ff-display);
    font-size: var(--fs-minor);
    font-weight: var(--wg-strong);
    justify-content: center;
    letter-spacing: var(--ls-loose);
    min-height: 52px;
    padding-inline: var(--gut-step-3);
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
}

.p85-pitch {
    align-self: auto;
}

/* ===== t63 — Tabelle mit zweifarbigen Spalten (TABLE-07) ===== */

.t63 {
    background-color: var(--ink-bg);
}

.t63-title {
    margin-block-end: var(--gut-step-1);
}

.t63-cap {
    color: var(--ink-hush);
    font-size: var(--fs-petite);
    margin-block-end: var(--gut-step-2);
}

.t63-scroll {
    border: var(--bd-slim) solid var(--ink-rule);
    border-radius: var(--rad-step-3);
    overflow-x: auto;
}

.t63-grid {
    border-collapse: collapse;
    min-width: 620px;
    width: 100%;
}

.t63-line {
    border-block-end: var(--bd-slim) solid var(--ink-rule);
}

.t63-cell {
    hyphens: auto;
    overflow-wrap: break-word;
    padding: var(--gut-step-1);
    text-align: start;
    vertical-align: top;
}

.t63-grid thead .t63-cell {
    background-color: var(--ink-pillar);
    color: var(--ink-reverse);
    font-family: var(--ff-display);
    font-size: var(--fs-petite);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

.t63-grid tbody .t63-cell {
    background-color: transparent;
    color: var(--ink-text);
    font-size: var(--fs-petite);
    font-weight: var(--wg-book);
}

.t63-grid tbody .t63-cell:nth-child(even) {
    background-color: rgba(16, 42, 86, 0.05);
}

.t63-cell--lead {
    color: var(--ink-text);
    font-weight: var(--wg-semi);
    white-space: nowrap;
}

/* ===== u12 — Hinweiskarte zu Cookies, links unten verankert (COOK-09) ===== */

.u12 {
    background-color: var(--ink-bg);
    border-inline-start: var(--bd-mid) solid var(--ink-key);
    border-start-end-radius: var(--rad-step-2);
    border-end-end-radius: var(--rad-step-2);
    box-shadow: var(--dep-step-4);
    inset-block-end: var(--gut-step-2);
    inset-inline-end: var(--gut-step-2);
    inset-inline-start: var(--gut-step-2);
    max-width: none;
    opacity: 1;
    position: fixed;
    transition: opacity var(--dur-calm) var(--bz-out);
    z-index: 90;
}

.u12[hidden] {
    display: none;
}

.u12--gone {
    display: none;
    opacity: 0;
}

.u12-frame {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
}

.u12-words {
    color: var(--ink-text);
    font-size: 13px;
    line-height: 1.35;
}

.u12-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
}

.u12-yes,
.u12-reject {
    border-radius: var(--rad-step-3);
    cursor: pointer;
    flex: 1 1 auto;
    font-size: 12px;
    font-weight: var(--wg-semi);
    min-height: 36px;
    padding: 8px 14px;
}

.u12-yes {
    background-color: var(--ink-pillar);
    border: var(--bd-slim) solid var(--ink-edge-hard);
    color: var(--ink-reverse);
}

.u12-yes:hover,
.u12-yes:focus-visible {
    background-color: var(--ink-gradient-mid);
    color: var(--ink-reverse);
}

.u12-reject {
    background-color: transparent;
    border: var(--bd-slim) solid var(--ink-hush);
    color: var(--ink-text);
}

.u12-reject:hover,
.u12-reject:focus-visible {
    background-color: rgba(16, 42, 86, 0.06);
    color: var(--ink-text);
}

@media (min-width: 700px) {
    .u12 {
        inset-block-end: var(--gut-step-4);
        inset-inline-end: auto;
        inset-inline-start: var(--gut-step-4);
        max-width: min(420px, calc(100vw - 2 * var(--gut-step-4)));
    }

    .u12-frame {
        gap: var(--gut-step-1);
        padding: var(--gut-step-2);
    }

    .u12-words {
        font-size: var(--fs-petite);
        line-height: var(--ld-even);
    }

    .u12-actions {
        flex-wrap: nowrap;
    }

    .u12-yes,
    .u12-reject {
        flex: 1 1 0;
        font-size: 13px;
        min-height: 46px;
        padding: var(--gut-step-1);
    }
}

/* ===== u56 — Kopfleiste: Zeichen und Menüknopf (HEAD-BURGER) ===== */

.u56 {
    background-color: var(--ink-layer);
    border-block-end: var(--bd-slim) solid var(--ink-rule);
    position: sticky;
    top: 0;
    transition: background-color var(--dur-base) var(--bz-out), box-shadow var(--dur-base) var(--bz-out);
    z-index: 80;
}

.u56.is-shrunk {
    backdrop-filter: blur(10px);
    background-color: rgba(250, 249, 250, 0.88);
    box-shadow: var(--dep-step-3);
}

.u56-bar {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-1);
    justify-content: space-between;
    min-height: 72px;
    padding-block: 6px;
}

.u56-glyph {
    display: inline-block;
    flex-shrink: 0;
    line-height: 0;
}

.u56-plate {
    align-items: center;
    background-color: var(--ink-pillar);
    border-radius: var(--rad-step-3);
    display: inline-flex;
    flex-shrink: 0;
    justify-content: center;
    padding: 2px 10px;
    transition: padding var(--dur-base) var(--bz-out);
}

.u56-img {
    flex-shrink: 0;
    height: 60px;
    transition: height var(--dur-base) var(--bz-out);
    width: auto;
}

.u56.is-shrunk .u56-img {
    height: 48px;
}

.u56-actions {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-1);
    justify-content: flex-end;
}

.u56-pitch {
    align-items: center;
    border-radius: var(--rad-step-3);
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-petite);
    font-weight: var(--wg-strong);
    justify-content: center;
    letter-spacing: var(--ls-loose);
    min-height: 46px;
    padding-inline: var(--gut-step-2);
    text-decoration: none;
    white-space: nowrap;
}

.u56-pitch--quiet {
    background-color: transparent;
    border: var(--bd-slim) solid var(--ink-pillar);
    color: var(--ink-pillar);
}

.u56-pitch--quiet:hover,
.u56-pitch--quiet:focus-visible {
    background-color: var(--ink-pillar);
    color: var(--ink-reverse);
}

.u56-menu-handle {
    align-items: center;
    background-color: transparent;
    border: 0;
    color: var(--ink-text);
    cursor: pointer;
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--ff-display);
    font-size: var(--fs-minor);
    font-weight: var(--wg-semi);
    gap: 8px;
    letter-spacing: var(--ls-loose);
    min-height: 46px;
    padding-inline: 8px;
    text-transform: uppercase;
}

.u56-menu-handle:hover,
.u56-menu-handle:focus-visible {
    background-color: transparent;
    color: var(--ink-pillar);
}

.u56-word {
    display: inline-block;
}

.u56-chev {
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    display: inline-block;
    height: 8px;
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--bz-in-out);
    width: 8px;
}

.u56-menu-handle[aria-expanded="true"] .u56-chev {
    transform: rotate(-135deg);
}

.u56-slide {
    background-color: var(--ink-layer);
    border-block-end: var(--bd-slim) solid var(--ink-rule);
    box-shadow: var(--dep-step-4);
    display: none;
    inset-inline: 0;
    max-height: 70vh;
    overflow-y: auto;
    position: absolute;
    top: 100%;
    z-index: 79;
}

.u56-slide.is-open {
    display: block;
}

.u56-nav {
    display: block;
    margin-inline: auto;
    max-width: calc(var(--shl-max) + 2 * var(--shl-pad-lg));
    padding: var(--gut-step-2) var(--shl-pad);
    width: 100%;
}

.u56-set {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    list-style: none;
}

.u56-one {
    display: block;
}

.u56-href {
    color: var(--ink-text);
    display: block;
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--wg-semi);
    padding-block: var(--gut-step-0);
    text-decoration: none;
}

.u56-href:hover,
.u56-href:focus-visible {
    color: var(--ink-pillar);
    text-decoration: underline;
    text-underline-offset: 4px;
}

.u56-href--here {
    color: var(--ink-pillar);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-underline-offset: 4px;
}

/* ===== u85 — Pfadzeile mit Winkel (BREAD-03) ===== */

.u85 {
    background-color: var(--ink-bg);
    padding-block: var(--gut-step-2);
}

.u85-set {
    display: flex;
    flex-wrap: wrap;
    gap: var(--gut-step-0);
    list-style: none;
}

.u85-one {
    color: var(--ink-hush);
    font-size: var(--fs-petite);
}

.u85-one + .u85-one::before {
    color: var(--ink-pillar);
    content: "›";
    margin-inline: var(--gut-step-1);
    opacity: 0.7;
}

.u85-one--here {
    color: var(--ink-text);
    font-weight: var(--wg-semi);
}

.u85-href {
    color: var(--ink-hush);
    text-decoration: none;
}

.u85-href:hover,
.u85-href:focus-visible {
    color: var(--ink-text);
    text-decoration: underline;
}

/* ===== u99 — Fragenharmonika mit Randziffer (FAQ-04) ===== */

.u99 {
    background-color: var(--ink-bg);
}

.u99-title {
    margin-block-end: var(--gut-step-3);
}

.u99-set {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
}

.u99-one {
    border-block-end: var(--bd-slim) solid var(--ink-rule);
    display: grid;
    grid-template-columns: 44px 1fr;
    padding-block-end: var(--gut-step-1);
}

.u99-num {
    color: var(--ink-pillar);
    font-family: var(--ff-display);
    font-size: var(--fs-lg-2);
    font-weight: var(--wg-strong);
    grid-column: 1;
    grid-row: 1;
    line-height: 1.6;
}

.u99-head {
    font-size: var(--fs-h4);
    grid-column: 2;
    grid-row: 1;
    margin: 0;
}

.u99-handle {
    align-items: center;
    background-color: transparent;
    border: 0;
    color: var(--ink-text);
    cursor: pointer;
    display: flex;
    font-family: var(--ff-body);
    font-size: var(--fs-h4);
    font-weight: var(--wg-semi);
    gap: var(--gut-step-1);
    justify-content: space-between;
    line-height: var(--ld-even);
    min-height: 48px;
    padding: var(--gut-step-0) 0;
    text-align: start;
    width: 100%;
}

.u99-handle:hover,
.u99-handle:focus-visible {
    background-color: transparent;
    color: var(--ink-pillar);
}

.u99-word {
    display: inline-block;
}

.u99-chev {
    border-inline-end: 2px solid currentColor;
    border-block-end: 2px solid currentColor;
    display: inline-block;
    flex-shrink: 0;
    height: 10px;
    margin-block-end: 4px;
    transform: rotate(45deg);
    transition: transform var(--dur-base) var(--bz-in-out);
    width: 10px;
}

.u99-handle[aria-expanded="true"] .u99-chev {
    transform: rotate(-135deg);
}

.u99-pane {
    display: grid;
    grid-column: 2;
    grid-row: 2;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-base) var(--bz-in-out);
}

.u99-pane.is-open {
    grid-template-rows: 1fr;
}

.u99-main {
    overflow: hidden;
}

.u99-prose {
    color: var(--ink-text);
    line-height: var(--ld-roomy);
    padding-block: var(--gut-step-1);
}

/* ===== v23 — enger Rechtstext (LEGAL-06) ===== */

.v23 {
    background-color: var(--ink-bg);
}

.v23-set-box {
    counter-reset: v23sec;
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-3);
}

.v23-one {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
}

.v23-head {
    counter-increment: v23sec;
    font-family: var(--ff-display);
    font-size: var(--fs-h4);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-regular);
    line-height: var(--ld-even);
}

.v23-head::before {
    color: var(--ink-pillar);
    content: "§ " counter(v23sec) ". ";
    font-weight: var(--wg-strong);
}

.v23-head--plain {
    counter-increment: none;
}

.v23-head--plain::before {
    content: "";
}

.v23-prose {
    color: var(--ink-text);
    font-size: var(--fs-petite);
    line-height: var(--ld-roomy);
}

.v23-aside {
    background-color: var(--ink-layer);
    border: var(--bd-slim) solid var(--ink-rule);
    border-radius: var(--rad-step-3);
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    margin-block-start: var(--gut-step-3);
    padding: var(--gut-step-2);
}

.v23-set {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
    list-style: none;
}

.v23-one-line {
    border-inline-start: var(--bd-mid) solid var(--ink-key);
    color: var(--ink-text);
    font-size: var(--fs-petite);
    line-height: var(--ld-roomy);
    padding-inline-start: var(--gut-step-1);
}

.v23-legal {
    color: var(--ink-hush);
    font-size: var(--fs-legal);
    line-height: var(--ld-roomy);
    margin-block-start: var(--gut-step-2);
}

/* ===== v37 — Seitenkopf: Ziffer und Titel (PHEAD-07) ===== */

.v37 {
    background-color: var(--ink-bg);
}

.v37-frame {
    display: grid;
    gap: var(--gut-step-1);
    grid-template-columns: 1fr;
}

.v37-num {
    color: var(--ink-pillar);
    font-family: var(--ff-display);
    font-size: clamp(38px, 9vw, 74px);
    font-weight: var(--wg-strong);
    letter-spacing: var(--ls-snug);
    line-height: 1;
}

.v37-main {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
}

.v37-title {
    color: var(--ink-text);
}

.v37-kicker {
    color: var(--ink-text);
    line-height: var(--ld-roomy);
}

.v37-aside {
    color: var(--ink-hush);
    font-size: var(--fs-petite);
}

/* ===== x98 — erster Bildschirm: Bildkachel oben, Text darunter (HERO-07) ===== */

.x98 {
    background-color: var(--ink-bg);
    display: block;
}

.x98-figure {
    display: block;
    margin: 0;
    position: relative;
}

.x98-figure::after {
    background-image: linear-gradient(to bottom, rgba(240, 239, 240, 0), var(--ink-bg));
    content: "";
    height: 40%;
    inset-block-end: 0;
    inset-inline: 0;
    position: absolute;
}

.x98-img {
    height: 220px;
    object-fit: cover;
    object-position: center;
    width: 100%;
}

.x98-frame {
    padding-block: var(--gut-step-3) var(--gut-step-2);
}

.x98--bare .x98-frame {
    padding-block: var(--band-top) var(--band-end);
}

.x98-main {
    display: flex;
    flex-direction: column;
    gap: var(--gut-step-1);
}

.x98-kicker {
    color: var(--ink-pillar);
    font-size: var(--fs-legal);
    font-weight: var(--wg-semi);
    letter-spacing: var(--ls-loose);
    text-transform: uppercase;
}

.x98-title {
    color: var(--ink-text);
}

.x98-prose {
    color: var(--ink-text);
    font-size: var(--fs-h4);
    line-height: var(--ld-roomy);
    max-width: var(--shl-readable);
}

.x98-note {
    color: var(--ink-hush);
    font-size: var(--fs-legal);
}

/* ---------- 6. Hilfsklassen und Rücksicht auf Bewegung ---------- */

.sr-only {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

:focus-visible {
    outline: 3px solid var(--ink-pillar);
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
        transition-duration: 0.001ms !important;
    }
}

/* ---------- 7. Breite Stufen der Bausteine ---------- */

@media (max-width: 619px) {
    .u56-bar {
        min-height: var(--bar-height-mobile);
        row-gap: var(--gut-step-1);
    }

    .u56-img {
        height: 34px;
    }

    .u56.is-shrunk .u56-img {
        height: 28px;
    }

    /* Die Knopfgruppe löst sich auf, damit Zeichen, Menü und Angebotsknopf
       direkt in der Kopfzeile umbrechen statt in einer zweiten Gruppe. */
    .u56-actions {
        display: contents;
    }

    .u56-glyph {
        order: 1;
    }

    .u56-menu-handle {
        order: 2;
    }

    .u56-pitch {
        flex-basis: 100%;
        order: 3;
        width: 100%;
    }
}

@media (min-width: 620px) {
    .f62-block--wide {
        flex: 1 1 calc(60% - var(--gut-step-3));
    }

    .f62-block--slim {
        flex: 1 1 calc(40% - var(--gut-step-3));
    }

    .f62-block--full {
        flex: 1 1 100%;
    }

    .g53-block {
        grid-template-columns: 160px 1fr;
        justify-items: start;
        padding: var(--gut-step-3);
        text-align: start;
    }

    .g53-headshot {
        height: 160px;
        width: 160px;
    }

    .g53-tags {
        justify-content: flex-start;
    }

    .k64-frame {
        align-items: center;
        flex-direction: row;
    }

    .k64-pitch {
        width: auto;
    }

    .p85-actions {
        flex-direction: row;
    }

    .u99-one {
        grid-template-columns: 60px 1fr;
    }

    .v37-frame {
        gap: var(--gut-step-3);
        grid-template-columns: 120px 1fr;
    }

    .v37-num {
        align-self: start;
    }

    .x98-img {
        height: 340px;
    }
}

@media (min-width: 940px) {
    .a63-img {
        height: 88px;
    }

    .m96-main {
        padding: var(--gut-step-4) var(--gut-step-3);
    }

}

/* ---------- 8. Angebotsknopf: Farbe, Form und Dauerbewegung ---------- */

.vakava-grab{display:inline-flex;align-items:center;justify-content:center;padding:var(--gut-step-1) var(--gut-step-2);min-height:46px;border-radius:var(--rad-step-3);border:var(--bd-slim) solid var(--ink-hush);font-size:var(--fs-minor);font-weight:var(--wg-semi)}
.vakava-grab{position:relative;
  background:#059669;color:#000000;text-decoration:none;
  transition:background var(--dur-calm) var(--bz-in-out),transform var(--dur-calm) var(--bz-in-out);}
.vakava-grab.vakava-grab{color:#000000;text-decoration:none;}
.vakava-grab:hover{background:#047857;color:#FFFFFF;animation:none}
.vakava-grab.vakava-grab:hover{color:#FFFFFF;text-decoration:none}
.vakava-grab:hover::after{animation:none}
.vakava-grab:active{background:#065F46;color:#FFFFFF}
.vakava-grab:focus-visible{outline:3px solid #000000;outline-offset:3px}
.vakava-grab{overflow:hidden;animation:vakava-flare 2.11s linear infinite}
.vakava-grab::after{content:"";position:absolute;top:0;bottom:0;left:0;width:45%;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,.42) 50%,transparent 100%);transform:translateX(-160%);animation:vakava-flare-2 2.11s ease-in-out infinite}
@keyframes vakava-flare{0%{transform:scale(1);animation-timing-function:cubic-bezier(.25,.8,.35,1)}21.327%{transform:scale(1.09);animation-timing-function:cubic-bezier(.45,.05,.55,.95)}54.976%,100%{transform:scale(1)}}
@keyframes vakava-flare-2{0%,5.687%{transform:translateX(-160%)}47.867%,100%{transform:translateX(330%)}}
@media (prefers-reduced-motion:reduce){.vakava-grab,.vakava-grab::after{animation:none!important;transition:none!important}}

/* Der Angebotsknopf im Schlussblock steht größer als im Fließtext. */
.n41 .n41-pitch {
    font-size: var(--fs-h4);
    min-height: 58px;
    padding-inline: var(--gut-step-4);
}