/* =========================================================================
   Playzilla Casino — Stylesheet
   Aufbau: Tokens -> Schriften -> Reset -> Zugänglichkeit -> Bausteine -> Helfer
   Bausteine stehen in der Reihenfolge, in der sie auf der Seite auftauchen.
   ========================================================================= */

/* -------------------------------------------------------------------------
   1. Tokens. Namen stammen aus dem Wörterbuch dieser Sammlung, nicht aus der
   Bibliothek. Farben sind die bereits verschobenen Endwerte.
   ------------------------------------------------------------------------- */
:root {
    /* Farbe */
    --rgc-prime: #1dffaf;
    --rgc-key: #fe6431;
    --rgc-spot-deep: #294057;
    --rgc-back: #031324;
    --rgc-raised: #0b1e34;
    --rgc-type: #FFFFFF;
    --rgc-text-muted: #c1bfbf;
    --rgc-rule: #1b3049;
    --rgc-border-strong: #2f5075;
    --rgc-blend-a: #1a3654;
    --rgc-blend-b: #0a2138;
    --rgc-notice: #b91c1c;

    /* Abstände */
    --rgc-hair: 2px;
    --rgc-tiny: 6px;
    --rgc-snug: 10px;
    --rgc-base: 16px;
    --rgc-wide: 48px;
    --rgc-roomy: 80px;
    --rgc-vast: 128px;
    --rgc-huge: 200px;

    /* Rundungen: oben weich, unten scharf */
    --r-hair: 2px 2px 0 0;
    --r-tiny: 2px 2px 0 0;
    --r-snug: 6px 6px 0 0;
    --r-base: 12px 12px 0 0;
    --r-wide: 20px 20px 0 0;
    --r-roomy: 20px 20px 0 0;
    --r-vast: 20px 20px 0 0;
    --r-huge: 20px 20px 0 0;
    --rgc-pill: 9999px 9999px 0 0;
    --rgc-round-full: 50%;

    /* Schrift */
    --rgc-banner: 'Inter Site', 'Segoe UI', Arial, sans-serif;
    --rgc-body: 'Inter Site', 'Segoe UI', Arial, sans-serif;
    --rgc-xxl: 56px;
    --rgc-h2: 38px;
    --rgc-sub: 24px;
    --rgc-display-4: 18px;
    --rgc-minor: 15px;
    --rgc-micro-head: 13px;
    --rgc-copy: 16px;
    --rgc-sm: 13px;
    --rgc-mini: 11px;
    --rgc-compact: 1.0;
    --rgc-normal: 1.4;
    --rgc-relaxed: 1.6;
    --rgc-book: 500;
    --rgc-half: 700;
    --rgc-black: 900;
    --rgc-narrow: -0.02em;
    --rgc-even: 0.02em;
    --rgc-open: 0.1em;

    /* Schatten */
    --d-hair: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    --d-tiny: 0 -1px 0 rgba(0, 0, 0, 0.08) inset;
    --d-snug: 0 2px 4px rgba(0, 0, 0, 0.06);
    --d-base: 0 4px 12px rgba(0, 0, 0, 0.10);
    --d-wide: 0 10px 28px rgba(0, 0, 0, 0.14);
    --d-roomy: 0 10px 28px rgba(0, 0, 0, 0.14);
    --d-vast: 0 10px 28px rgba(0, 0, 0, 0.14);
    --d-huge: 0 10px 28px rgba(0, 0, 0, 0.14);

    /* Bewegung — Zahlen und Kurven kommen aus der Sammlung */
    --rgc-short: 141ms;
    --rgc-steady: 250ms;
    --rgc-slow: 396ms;
    --rgc-exit: cubic-bezier(0.17, 0.93, 0.4, 0.98);
    --rgc-both: cubic-bezier(0.36, 0.11, 0.51, 0.9);
    --rgc-pop: cubic-bezier(0.3, 1, 0.72, 0.95);

    /* Maße */
    --rgc-page: 1320px;
    --rgc-column: 1320px;
    --rgc-edge-wide: 48px;
    --rgc-inset-tablet: 32px;
    --rgc-inset-mobile: 16px;
    --rgc-slim: 1px;
    --b-base: 2px;
    --rgc-strong: 3px;
    --rgc-h-lg: 74px;
    --rgc-height-mobile: 66px;

    /* eigene Hilfsmaße (bewusst ohne kanonische Vorsilben) */
    --rgc-brief: 580px;
    --rgc-sec-y: 44px;
    --rgc-frame: calc(var(--rgc-page) + 2 * var(--rgc-edge-wide));
    --rgc-edge: var(--rgc-edge-wide);
}

/* -------------------------------------------------------------------------
   2. Schriften — eigene Kopie, kein externer Aufruf.
   ------------------------------------------------------------------------- */
@font-face {
    font-display: swap;
    font-family: 'Inter Site';
    font-style: normal;
    font-weight: 500;
    src: url('/static/inter-500.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter Site';
    font-style: normal;
    font-weight: 700;
    src: url('/static/inter-700.woff2') format('woff2');
}

@font-face {
    font-display: swap;
    font-family: 'Inter Site';
    font-style: normal;
    font-weight: 900;
    src: url('/static/inter-900.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   3. Reset und Grundlage
   ------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    overflow-x: clip;
}

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

body {
    background: var(--rgc-back);
    color: var(--rgc-type);
    display: flex;
    flex-direction: column;
    font-family: var(--rgc-body);
    font-size: var(--rgc-copy);
    font-weight: var(--rgc-book);
    line-height: var(--rgc-normal);
    margin: 0;
    min-height: 100vh;
}

.sheet {
    flex: 1 0 auto;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    overflow-wrap: anywhere;
    margin: 0 0 var(--rgc-base);
}

h1 {
    font-family: var(--rgc-banner);
    font-size: clamp(30px, 4.4vw, var(--rgc-xxl));
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-narrow);
    line-height: var(--rgc-compact);
    text-transform: uppercase;
}

h2 {
    font-family: var(--rgc-banner);
    font-size: clamp(25px, 3vw, var(--rgc-h2));
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-narrow);
    line-height: var(--rgc-compact);
    margin-block-start: 0;
    text-transform: uppercase;
}

h3 {
    font-family: var(--rgc-banner);
    font-size: clamp(19px, 1.7vw, var(--rgc-sub));
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-even);
    line-height: var(--rgc-normal);
}

h4 {
    font-family: var(--rgc-banner);
    font-size: var(--rgc-display-4);
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-even);
}

h5,
h6 {
    font-family: var(--rgc-body);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    text-transform: uppercase;
}

h5 {
    font-size: var(--rgc-minor);
}

h6 {
    font-size: var(--rgc-micro-head);
}

p {
    margin: 0 0 var(--rgc-base);
}

img {
    max-width: 100%;
}

svg {
    fill: currentColor;
}

table {
    border-collapse: collapse;
}

/* Gemeinsame Sektionsbreite — jede Sektion nutzt exakt dieselbe Formel. */
.pillar-grave-inner,
.piedestal-swift-inner,
.shelf-refined-inner,
.stele-bright-inner,
.tribune-dark-inner,
.atrium-plus-inner,
.palier-cool-inner,
.loggia-swift-inner,
.hallway-prime-inner,
.catwalk-fresh-inner,
.pilier-true-inner,
.chapitre-smart-inner,
.crypte-signal-inner {
    margin-inline: auto;
    max-width: var(--rgc-frame);
    padding-inline: var(--rgc-edge);
    width: 100%;
}

/* Gemeinsamer vertikaler Rhythmus: benachbarte Paare bleiben unter 110px. */
.piedestal-swift,
.shelf-refined,
.stele-bright,
.tribune-dark,
.atrium-plus,
.palier-cool,
.loggia-swift,
.hallway-prime,
.catwalk-fresh,
.pilier-true,
.crypte-signal {
    padding-block: var(--rgc-sec-y);
}

/* -------------------------------------------------------------------------
   4. Zugänglichkeit und Bewegungsschutz
   ------------------------------------------------------------------------- */
.skip-hop {
    background: var(--rgc-key);
    border-radius: var(--r-snug);
    color: #14060a;
    font-weight: var(--rgc-black);
    inset-inline-start: var(--rgc-base);
    padding: var(--rgc-snug) var(--rgc-base);
    position: absolute;
    text-decoration: none;
    z-index: 140;
}

.skip-hop:not(:focus) {
    top: -200px !important;
}

.skip-hop:focus {
    top: var(--rgc-snug);
}

.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: var(--rgc-strong) solid var(--rgc-prime);
    outline-offset: 2px;
}

/* Auftritt beim Laden — Achse „sequence“. */
.pillar-grave-inner > *,
.piedestal-swift-inner > * {
    animation: rgc-rise var(--rgc-slow) var(--rgc-exit) both;
}

.pillar-grave-inner > *:nth-child(2) {
    animation-delay: 70ms;
}

.pillar-grave-inner > *:nth-child(3) {
    animation-delay: 140ms;
}

.pillar-grave-inner > *:nth-child(4) {
    animation-delay: 210ms;
}

@keyframes rgc-rise {
    from {
        opacity: 0;
        transform: translateY(14px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

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

    .pillar-grave-inner > *,
    .piedestal-swift-inner > * {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* -------------------------------------------------------------------------
   5. Kopfzeile — Aufbau HEAD-LEFT: Zeichen links, Menü direkt daneben,
   Schaltflächen rechts. Verhalten: klebend mit Schrumpfen.
   ------------------------------------------------------------------------- */
.socle-crisp {
    background: var(--rgc-back);
    position: sticky;
    top: 0;
    z-index: 90;
}

.socle-crisp-rank {
    align-items: center;
    display: flex;
    gap: var(--rgc-base);
    height: 74px;
    margin-inline: auto;
    max-width: var(--rgc-frame);
    padding-inline: var(--rgc-base);
    position: relative;
    transition: height var(--rgc-steady) var(--rgc-exit);
}

.socle-crisp.is-shrunk .socle-crisp-rank {
    height: 60px;
}

.socle-crisp-badge {
    align-items: center;
    display: inline-flex;
    flex-shrink: 0;
    text-decoration: none;
}

.socle-crisp-badge-plate {
    align-items: center;
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-rule);
    border-radius: var(--r-snug);
    color: var(--rgc-type);
    display: inline-flex;
    padding: var(--rgc-tiny) var(--rgc-snug);
}

.socle-crisp-badge-img {
    display: block;
    height: 34px;
    width: auto;
}

.socle-crisp.is-shrunk .socle-crisp-badge-img {
    height: 26px;
}

.socle-crisp-nav {
    flex: 0 1 auto;
}

.socle-crisp-queue {
    align-items: center;
    display: flex;
    gap: var(--rgc-base);
    list-style: none;
    margin: 0;
    padding: 0;
}

.socle-crisp-piece {
    align-items: center;
    display: flex;
    position: relative;
}

.socle-crisp-piece[hidden] {
    display: none;
}

.socle-crisp-piece + .socle-crisp-piece::before {
    color: var(--rgc-key);
    content: '·';
    margin-inline-end: var(--rgc-snug);
}

.socle-crisp-href {
    color: var(--rgc-type);
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: var(--rgc-even);
    min-height: 44px;
    text-decoration: none;
    text-transform: uppercase;
    transition: transform var(--rgc-short) var(--rgc-exit);
    white-space: nowrap;
}

.socle-crisp-href:hover {
    background: var(--rgc-back);
    color: var(--rgc-prime);
    transform: translateY(-2px);
}

.socle-crisp-href[aria-current='page'] {
    color: var(--rgc-prime);
    font-weight: var(--rgc-black);
}

.socle-crisp-more-opener {
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-rule);
    border-radius: var(--r-snug);
    color: var(--rgc-type);
    cursor: pointer;
    font-family: var(--rgc-body);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: var(--rgc-even);
    min-height: 44px;
    padding-inline: var(--rgc-snug);
    text-transform: uppercase;
    white-space: nowrap;
}

.socle-crisp-more-opener:hover {
    background: var(--rgc-blend-a);
    color: var(--rgc-prime);
}

.socle-crisp-more-panel {
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-border-strong);
    border-radius: var(--r-snug);
    display: none;
    inset-block-start: calc(100% + var(--rgc-tiny));
    inset-inline-end: 0;
    list-style: none;
    margin: 0;
    max-height: 62vh;
    min-width: 220px;
    overflow-y: auto;
    padding: var(--rgc-tiny);
    pointer-events: none;
    position: absolute;
    z-index: 95;
}

.socle-crisp-more-panel.is-open {
    display: block;
    pointer-events: auto;
}

.socle-crisp-more-panel .socle-crisp-piece {
    display: block;
}

.socle-crisp-more-panel .socle-crisp-piece + .socle-crisp-piece::before {
    content: none;
}

.socle-crisp-more-panel .socle-crisp-href {
    display: flex;
    padding-inline: var(--rgc-snug);
}

.socle-crisp-controls {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    gap: var(--rgc-snug);
    margin-inline-start: auto;
}

.socle-crisp-flag {
    background: linear-gradient(180deg, #111111 33%, #c8102e 33%, #c8102e 66%, #ffcc00 66%);
    border: var(--rgc-slim) solid var(--rgc-border-strong);
    border-radius: var(--r-hair);
    display: inline-block;
    flex-shrink: 0;
    height: 16px;
    width: 24px;
}

.socle-crisp-button {
    align-items: center;
    border-radius: var(--rgc-pill);
    display: inline-flex;
    flex-shrink: 0;
    font-family: var(--rgc-banner);
    font-size: 14px;
    font-weight: var(--rgc-black);
    justify-content: center;
    letter-spacing: var(--rgc-open);
    min-height: 44px;
    padding-inline: var(--rgc-base);
    text-decoration: none;
    text-transform: uppercase;
    white-space: nowrap;
}

.socle-crisp-button-quiet {
    background: var(--rgc-back);
    border: var(--b-base) solid var(--rgc-border-strong);
    color: var(--rgc-type);
}

.socle-crisp-button-quiet:hover {
    background: var(--rgc-spot-deep);
    color: var(--rgc-type);
}

.socle-crisp-menu-knob {
    background: transparent;
    border: 0;
    cursor: pointer;
    display: none;
    height: 44px;
    margin-left: auto;
    padding: 0;
    width: 44px;
}

.socle-crisp-lines {
    background: var(--rgc-type);
    display: block;
    height: 3px;
    margin-inline: auto;
    position: relative;
    width: 26px;
}

.socle-crisp-lines::before,
.socle-crisp-lines::after {
    background: var(--rgc-type);
    content: '';
    height: 3px;
    left: 0;
    position: absolute;
    width: 26px;
}

.socle-crisp-lines::before {
    top: -8px;
}

.socle-crisp-lines::after {
    top: 8px;
}

.socle-crisp-dock {
    background: var(--rgc-raised);
    border-block-start: var(--rgc-slim) solid var(--rgc-rule);
    display: none;
    inset-block-start: 100%;
    inset-inline: 0;
    max-height: 70vh;
    overflow-y: auto;
    position: absolute;
    z-index: 92;
}

.socle-crisp-dock.is-open {
    display: block;
}

.socle-crisp-dock-queue {
    list-style: none;
    margin: 0;
    padding: var(--rgc-snug) var(--rgc-base) var(--rgc-base);
}

.socle-crisp-dock-piece {
    display: block;
}

.socle-crisp-dock-href {
    color: var(--rgc-type);
    display: block;
    font-size: var(--rgc-minor);
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-even);
    min-height: 44px;
    padding-block: var(--rgc-snug);
    text-decoration: none;
    text-transform: uppercase;
}

.socle-crisp-dock-href:hover {
    background: var(--rgc-blend-a);
    color: var(--rgc-prime);
}

.socle-crisp-dock-href[aria-current='page'] {
    color: var(--rgc-prime);
    font-weight: var(--rgc-black);
}

/* -------------------------------------------------------------------------
   6. Hinweisstreifen 18+ — Variante RG-02: Band direkt unter der Kopfzeile.
   ------------------------------------------------------------------------- */
.rgc-notice-bar {
    background: var(--rgc-notice);
    color: #FFFFFF;
    display: block;
    font-size: var(--rgc-sm);
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-even);
    margin: 0;
    padding: var(--rgc-tiny) var(--rgc-base);
    text-align: center;
}

.rgc-notice-href {
    color: #FFFFFF;
    background: var(--rgc-notice);
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
}

.rgc-notice-href:hover {
    background: #FFFFFF;
    color: #7f1010;
}

/* -------------------------------------------------------------------------
   7. Erster Bildschirm — HERO-07: Kachel oben, Text darunter.
   ------------------------------------------------------------------------- */
.pillar-grave {
    background: var(--rgc-back);
    padding-block-end: var(--rgc-sec-y);
}

.pillar-grave-tile {
    align-items: center;
    background-color: var(--rgc-blend-b);
    background-image:
        repeating-linear-gradient(115deg, rgba(29, 255, 175, 0.05) 0 2px, transparent 2px 26px),
        linear-gradient(140deg, var(--rgc-blend-a) 0%, var(--rgc-blend-b) 55%, var(--rgc-back) 100%);
    border-block-end: var(--rgc-strong) solid var(--rgc-key);
    display: flex;
    height: 300px;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.pillar-grave-mark {
    color: #FFFFFF;
    font-family: var(--rgc-banner);
    font-size: clamp(36px, 11vw, 190px);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-narrow);
    line-height: 1;
    opacity: 0.09;
    text-transform: uppercase;
    user-select: none;
}

.pillar-grave-inner {
    padding-block-start: var(--rgc-sec-y);
}

.pillar-grave-eyebrow {
    background: var(--rgc-back);
    color: var(--rgc-prime);
    display: inline-block;
    font-size: var(--rgc-mini);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    margin-block-end: var(--rgc-snug);
    text-transform: uppercase;
}

.pillar-grave-under {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-display-4);
    line-height: var(--rgc-relaxed);
    max-width: var(--rgc-brief);
}

.pillar-grave-controls {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-base);
}

.pillar-grave-fine {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-sm);
}

/* -------------------------------------------------------------------------
   8. Seitenkopf — PHEAD-05: Spurleiste plus Titel.
   ------------------------------------------------------------------------- */
.piedestal-swift {
    background: linear-gradient(180deg, var(--rgc-blend-b) 0%, var(--rgc-back) 100%);
    border-block-end: var(--rgc-slim) solid var(--rgc-rule);
}

.piedestal-swift-trail {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-mini);
    letter-spacing: var(--rgc-open);
    margin-block-end: var(--rgc-base);
    text-transform: uppercase;
}

.piedestal-swift-href {
    background: transparent;
    color: var(--rgc-text-muted);
    text-decoration: none;
}

.piedestal-swift-href:hover {
    background: var(--rgc-blend-a);
    color: var(--rgc-key);
}

.piedestal-swift-here {
    color: var(--rgc-type);
}

.piedestal-swift-brief {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-display-4);
    line-height: var(--rgc-relaxed);
    margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   9. Textblock — PROSE-11: Sinnbild über der Überschrift, runde Fassung,
   große Stufe, luftige Dichte.
   ------------------------------------------------------------------------- */
.palier-cool-part {
    margin-block-end: var(--rgc-wide);
}

.palier-cool-part:last-child {
    margin-block-end: 0;
}

.palier-cool-emblem {
    align-items: center;
    background: #2b1610;
    border: var(--rgc-slim) solid var(--rgc-border-strong);
    border-radius: var(--rgc-round-full);
    color: var(--rgc-key);
    display: flex;
    height: 66px;
    justify-content: center;
    margin-block-end: var(--rgc-base);
    width: 66px;
}

.palier-cool-emblem svg {
    height: 34px;
    width: 34px;
}

.palier-cool-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin-block-end: var(--rgc-base);
}

.palier-cool-queue,
.palier-cool-steps {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin: 0 0 var(--rgc-base);
    padding-inline-start: var(--rgc-wide);
}

.palier-cool-piece {
    margin-block-end: var(--rgc-snug);
}

.palier-cool-piece::marker {
    color: var(--rgc-key);
    font-weight: var(--rgc-black);
}

.palier-cool-href {
    background: transparent;
    color: var(--rgc-prime);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.palier-cool-href:hover {
    background: var(--rgc-prime);
    color: #04231a;
    text-decoration: none;
}

.palier-cool-relay {
    align-items: center;
    background: var(--rgc-raised);
    border-block-start: var(--rgc-strong) solid var(--rgc-key);
    border-radius: var(--r-base);
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-base);
    justify-content: space-between;
    margin-block-end: var(--rgc-wide);
    padding: var(--rgc-base) var(--rgc-base);
}

.palier-cool-relay-cap {
    color: var(--rgc-type);
    font-family: var(--rgc-banner);
    font-size: var(--rgc-display-4);
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-even);
    text-transform: uppercase;
}

/* -------------------------------------------------------------------------
   10. Kartenstreifen — GRID-02: nummerierter senkrechter Streifen.
   ------------------------------------------------------------------------- */
.shelf-refined-stack {
    display: flex;
    flex-direction: column;
}

.shelf-refined-piece {
    border-block-start: var(--rgc-slim) solid var(--rgc-rule);
    display: flex;
    gap: var(--rgc-base);
    padding-block: var(--rgc-base);
}

.shelf-refined-piece:first-child {
    border-block-start: 0;
}

.shelf-refined-count {
    color: var(--rgc-key);
    flex: 0 0 80px;
    font-family: var(--rgc-banner);
    font-size: clamp(34px, 4vw, var(--rgc-xxl));
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-narrow);
    line-height: var(--rgc-compact);
    transition: transform var(--rgc-steady) var(--rgc-exit);
    width: 80px;
}

.shelf-refined-piece:hover .shelf-refined-count {
    transform: scale(1.1);
}

.shelf-refined-inside {
    min-width: 0;
}

.shelf-refined-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
}

/* -------------------------------------------------------------------------
   11. Stimmen — REV-01: drei Spalten mit Sternen.
   ------------------------------------------------------------------------- */
.tribune-dark-stack {
    display: grid;
    gap: var(--rgc-base);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.tribune-dark-plate {
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-rule);
    border-radius: var(--r-base);
    color: var(--rgc-type);
    padding: var(--rgc-base);
}

.tribune-dark-rank {
    align-items: baseline;
    display: flex;
    gap: var(--rgc-snug);
    justify-content: space-between;
}

.tribune-dark-author {
    color: var(--rgc-type);
    font-weight: var(--rgc-black);
}

.tribune-dark-on {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-mini);
    white-space: nowrap;
}

.tribune-dark-score {
    color: var(--rgc-key);
    font-size: var(--rgc-minor);
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-even);
    margin-block: var(--rgc-tiny);
}

.tribune-dark-copy {
    border: 0;
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin: 0;
    quotes: none;
}

/* -------------------------------------------------------------------------
   12. Tabelle — TABLE-06: redaktionell mit Vorspann über der Tabelle.
   ------------------------------------------------------------------------- */
.loggia-swift-note {
    color: var(--rgc-text-muted);
    font-family: var(--rgc-banner);
    font-size: var(--rgc-display-4);
    font-style: italic;
    margin-block-end: var(--rgc-base);
    padding-block-start: var(--rgc-base);
    position: relative;
    text-align: center;
}

.loggia-swift-note::before {
    background: var(--rgc-key);
    content: '';
    height: 2px;
    inset-block-start: 0;
    inset-inline-start: 50%;
    position: absolute;
    transform: translateX(-50%);
    width: 40px;
}

.loggia-swift-scroll {
    overflow-x: auto;
}

.loggia-swift-grid {
    min-width: 640px;
    width: 100%;
}

.loggia-swift-grid th,
.loggia-swift-grid td {
    background: var(--rgc-back);
    border-block-end: var(--rgc-slim) solid var(--rgc-rule);
    color: var(--rgc-text-muted);
    padding: var(--rgc-snug) var(--rgc-base);
    text-align: start;
    vertical-align: top;
}

.loggia-swift-grid thead th {
    background: var(--rgc-blend-b);
    color: var(--rgc-type);
    font-family: var(--rgc-body);
    font-size: var(--rgc-micro-head);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    text-transform: uppercase;
}

.loggia-swift-grid tbody th {
    background: var(--rgc-back);
    color: var(--rgc-type);
    font-weight: var(--rgc-half);
}

/* -------------------------------------------------------------------------
   13. Fragen — FAQ-01: klassisches Klappwerk, Zeichen dreht sich.
   ------------------------------------------------------------------------- */
.stele-bright-queue {
    margin: 0;
}

.stele-bright-piece {
    border-block-end: var(--rgc-slim) solid var(--rgc-rule);
}

.stele-bright-ask {
    margin: 0;
}

.stele-bright-ask h3 {
    margin: 0;
}

.stele-bright-opener {
    align-items: center;
    background: var(--rgc-back);
    border: 0;
    color: var(--rgc-type);
    cursor: pointer;
    display: flex;
    font-family: var(--rgc-body);
    font-size: var(--rgc-minor);
    font-weight: var(--rgc-black);
    gap: var(--rgc-base);
    justify-content: space-between;
    letter-spacing: var(--rgc-open);
    min-height: 44px;
    padding: var(--rgc-base) 0;
    text-align: start;
    text-transform: uppercase;
    width: 100%;
}

.stele-bright-opener:hover {
    background: var(--rgc-back);
    color: var(--rgc-key);
}

.stele-bright-sign {
    display: inline-block;
    flex-shrink: 0;
    height: 24px;
    position: relative;
    transition: transform var(--rgc-steady) var(--rgc-exit);
    width: 24px;
}

.stele-bright-sign::before,
.stele-bright-sign::after {
    background: var(--rgc-key);
    content: '';
    inset-block-start: 50%;
    inset-inline-start: 50%;
    position: absolute;
    transform: translate(-50%, -50%);
}

.stele-bright-sign::before {
    height: 2px;
    width: 18px;
}

.stele-bright-sign::after {
    height: 18px;
    width: 2px;
}

.stele-bright-opener[aria-expanded='true'] .stele-bright-sign {
    transform: rotate(45deg);
}

.stele-bright-reply {
    margin: 0;
    overflow: hidden;
    padding-block-end: var(--rgc-base);
}

.stele-bright-reply[hidden] {
    display: none;
}

.stele-bright-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin: 0;
}

/* -------------------------------------------------------------------------
   14. Aufruf — CTA-07: hochkant mit großer Zierzahl.
   ------------------------------------------------------------------------- */
.atrium-plus-plate {
    background: var(--rgc-back);
    border: var(--b-base) solid var(--rgc-key);
    border-radius: var(--r-wide);
    padding: var(--rgc-wide) var(--rgc-base);
    text-align: center;
}

.atrium-plus-figure {
    color: var(--rgc-key);
    display: block;
    font-family: var(--rgc-banner);
    font-size: clamp(40px, 6vw, var(--rgc-xxl));
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-narrow);
    line-height: var(--rgc-compact);
}

.atrium-plus-cap {
    color: var(--rgc-prime);
    display: block;
    font-size: var(--rgc-mini);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    margin-block: var(--rgc-snug);
    text-transform: uppercase;
}

.atrium-plus-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin-inline: auto;
    max-width: var(--rgc-brief);
}

.atrium-plus-fine {
    color: var(--rgc-text-muted);
    display: block;
    font-size: var(--rgc-sm);
    margin-block-start: var(--rgc-base);
}

/* -------------------------------------------------------------------------
   15. Zwischenruf — INLINE-CTA-05: hervorgehobenes Zitatband.
   ------------------------------------------------------------------------- */
.crypte-signal {
    background: var(--rgc-raised);
}

.crypte-signal-inner {
    text-align: center;
}

.crypte-signal-quote {
    color: var(--rgc-type);
    font-family: var(--rgc-banner);
    font-size: clamp(19px, 1.7vw, var(--rgc-sub));
    font-style: italic;
    margin-block-end: var(--rgc-base);
    margin-inline: auto;
    max-width: var(--rgc-brief);
}

/* -------------------------------------------------------------------------
   16. Verfasserband — BYLINE-05: waagerechtes Band über die volle Breite.
   ------------------------------------------------------------------------- */
.spread-warm {
    background: var(--rgc-blend-a);
    display: block;
}

.spread-warm-band {
    align-items: center;
    color: var(--rgc-type);
    display: flex;
    gap: var(--rgc-base);
    justify-content: space-between;
    margin-inline: auto;
    max-width: var(--rgc-frame);
    padding: var(--rgc-base) var(--rgc-edge);
}

.spread-warm-who {
    align-items: center;
    display: flex;
    gap: var(--rgc-base);
}

.spread-warm-photo {
    background: var(--rgc-blend-b);
    border-radius: var(--rgc-round-full);
    display: block;
    flex-shrink: 0;
    height: 56px;
    object-fit: cover;
    width: 56px;
}

.spread-warm-inside {
    min-width: 0;
}

.spread-warm-author {
    font-size: var(--rgc-display-4);
    font-weight: var(--rgc-black);
}

.spread-warm-href {
    background: transparent;
    color: var(--rgc-type);
    text-decoration: none;
}

.spread-warm-href:hover {
    background: var(--rgc-blend-a);
    color: var(--rgc-prime);
}

.spread-warm-job {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-sm);
}

.spread-warm-extra {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-sm);
    margin-block-start: var(--rgc-hair);
}

.spread-warm-on {
    color: var(--rgc-text-muted);
    white-space: nowrap;
}

.spread-warm-pitch {
    background: var(--rgc-blend-a);
    border: var(--rgc-slim) solid var(--rgc-key);
    border-radius: var(--r-snug);
    color: #ff9b6e;
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--rgc-sm);
    font-weight: var(--rgc-half);
    min-height: 44px;
    align-items: center;
    padding: var(--rgc-snug) var(--rgc-base);
    text-decoration: none;
}

.spread-warm-pitch:hover {
    background: var(--rgc-key);
    color: #14060a;
}

/* -------------------------------------------------------------------------
   17. Verfasserkarte — AUTH-05: kompakt, waagerecht.
   ------------------------------------------------------------------------- */
.pilier-true-plate {
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-rule);
    border-radius: var(--r-base);
    color: var(--rgc-type);
    display: flex;
    gap: var(--rgc-base);
    padding: var(--rgc-base);
}

.pilier-true-photo {
    background: var(--rgc-blend-b);
    border-radius: var(--rgc-round-full);
    display: block;
    flex-shrink: 0;
    height: 140px;
    object-fit: cover;
    width: 140px;
}

.pilier-true-inside {
    min-width: 0;
}

.pilier-true-job {
    color: var(--rgc-key);
    display: block;
    font-size: var(--rgc-mini);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    text-transform: uppercase;
}

.pilier-true-author {
    margin-block: var(--rgc-tiny) var(--rgc-snug);
}

.pilier-true-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
}

.pilier-true-skills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-tiny);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pilier-true-skill {
    background: var(--rgc-blend-a);
    border-radius: var(--r-snug);
    color: var(--rgc-type);
    font-size: var(--rgc-sm);
    padding: var(--rgc-tiny) var(--rgc-snug);
}

.pilier-true-articles {
    display: block;
    padding-block-start: var(--rgc-wide);
}

.pilier-true-articles-lede {
    font-family: var(--rgc-banner);
    font-size: var(--rgc-display-4);
    font-weight: var(--rgc-black);
    margin-block-end: var(--rgc-base);
    text-transform: uppercase;
}

.pilier-true-articles-queue {
    display: flex;
    flex-direction: column;
    gap: var(--rgc-tiny);
    list-style: none;
    margin: 0;
    padding: 0;
}

.pilier-true-articles-piece {
    line-height: var(--rgc-normal);
}

.pilier-true-articles-href {
    background: transparent;
    color: var(--rgc-prime);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.pilier-true-articles-href:hover {
    background: var(--rgc-prime);
    color: #04231a;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   18. Rechtstexte — LEGAL-07: redaktioneller Satz mit Initiale.
   ------------------------------------------------------------------------- */
.hallway-prime-eyebrow {
    color: var(--rgc-prime);
    display: block;
    font-size: var(--rgc-mini);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    margin-block-end: var(--rgc-snug);
    text-transform: uppercase;
}

.hallway-prime-intro {
    color: var(--rgc-type);
    font-family: var(--rgc-banner);
    font-size: var(--rgc-display-4);
    font-style: italic;
    line-height: var(--rgc-normal);
    margin-block-end: var(--rgc-wide);
}

.hallway-prime-body h2 {
    font-style: italic;
    margin-block-start: var(--rgc-wide);
    text-transform: none;
}

.hallway-prime-rule {
    background: var(--rgc-key);
    border: 0;
    height: 2px;
    margin: 0 0 var(--rgc-base);
    margin-inline: 0;
    width: 80px;
}

.hallway-prime-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
}

.hallway-prime-body h2 + .hallway-prime-rule + .hallway-prime-copy::first-letter {
    color: var(--rgc-key);
    float: left;
    font-family: var(--rgc-banner);
    font-size: 3em;
    font-weight: var(--rgc-black);
    line-height: 0.9;
    padding-inline-end: var(--rgc-snug);
}

.hallway-prime-queue {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin: 0 0 var(--rgc-base);
    padding-inline-start: var(--rgc-wide);
}

.hallway-prime-piece {
    margin-block-end: var(--rgc-snug);
}

.hallway-prime-warn {
    background: var(--rgc-raised);
    border-block-start: var(--b-base) solid var(--rgc-notice);
    border-radius: var(--r-snug);
    color: var(--rgc-type);
    font-size: var(--rgc-minor);
    line-height: var(--rgc-relaxed);
    padding: var(--rgc-base);
}

.hallway-prime-stamp {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-sm);
    margin-block-end: 0;
}

/* -------------------------------------------------------------------------
   19. Kontaktformular — FORM-04: eine kompakte Zeile, Nachricht darunter.
   ------------------------------------------------------------------------- */
.catwalk-fresh-shape {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-snug);
}

.catwalk-fresh-box {
    display: flex;
    flex: 1 1 240px;
    flex-direction: column;
    gap: var(--rgc-tiny);
}

.catwalk-fresh-box-wide {
    flex: 1 1 100%;
}

.catwalk-fresh-cap {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-sm);
    letter-spacing: var(--rgc-even);
}

.catwalk-fresh-entry {
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-border-strong);
    border-radius: var(--r-snug);
    color: var(--rgc-type);
    font-family: var(--rgc-body);
    font-size: var(--rgc-copy);
    min-height: 46px;
    padding: var(--rgc-snug) var(--rgc-base);
    width: 100%;
}

.catwalk-fresh-send {
    align-self: flex-end;
    background: var(--rgc-prime);
    border: 0;
    border-radius: var(--rgc-pill);
    color: #04231a;
    cursor: pointer;
    font-family: var(--rgc-banner);
    font-size: var(--rgc-minor);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    min-height: 46px;
    padding-inline: var(--rgc-wide);
    text-transform: uppercase;
}

.catwalk-fresh-send:hover {
    background: #14e59c;
    color: #04231a;
}

.catwalk-fresh-done {
    background: var(--rgc-raised);
    border-block-start: var(--b-base) solid var(--rgc-prime);
    border-radius: var(--r-snug);
    color: var(--rgc-type);
    margin-block-start: var(--rgc-base);
    padding: var(--rgc-base);
}

.catwalk-fresh-done[hidden] {
    display: none;
}

.catwalk-fresh-reach {
    color: var(--rgc-text-muted);
    margin-block-start: var(--rgc-base);
}

.catwalk-fresh-href {
    background: transparent;
    color: var(--rgc-prime);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.catwalk-fresh-href:hover {
    background: var(--rgc-prime);
    color: #04231a;
    text-decoration: none;
}

/* -------------------------------------------------------------------------
   20. Fehlerseite — ERR-07: geometrischer Untergrund.
   ------------------------------------------------------------------------- */
.chapitre-smart {
    background-color: var(--rgc-back);
    background-image:
        linear-gradient(rgba(254, 100, 49, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(254, 100, 49, 0.08) 1px, transparent 1px);
    background-size: 40px 40px;
    display: flex;
    flex: 1 0 auto;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    padding-block: var(--rgc-roomy);
    text-align: center;
}

.chapitre-smart-code {
    color: var(--rgc-key);
    display: block;
    font-family: var(--rgc-banner);
    font-size: clamp(64px, 16vw, 180px);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-narrow);
    line-height: var(--rgc-compact);
}

.chapitre-smart-head {
    margin-block: var(--rgc-base);
}

.chapitre-smart-copy {
    color: var(--rgc-text-muted);
    line-height: var(--rgc-relaxed);
    margin-inline: auto;
    max-width: var(--rgc-brief);
}

.chapitre-smart-back {
    background: var(--rgc-key);
    border-radius: var(--rgc-pill);
    color: #14060a;
    display: inline-flex;
    align-items: center;
    font-family: var(--rgc-banner);
    font-size: var(--rgc-minor);
    font-weight: var(--rgc-black);
    letter-spacing: var(--rgc-open);
    min-height: 46px;
    padding-inline: var(--rgc-wide);
    text-decoration: none;
    text-transform: uppercase;
}

.chapitre-smart-back:hover {
    background: #ff8154;
    color: #14060a;
}

/* -------------------------------------------------------------------------
   21. Fußzeile — FOOT-09: breiter einzeiliger Industriestreifen.
   ------------------------------------------------------------------------- */
.plaque-cool {
    background: var(--rgc-prime);
    color: #04231a;
}

.plaque-cool-strip {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-base);
    justify-content: space-between;
    margin-inline: auto;
    max-width: var(--rgc-frame);
    padding: var(--rgc-base) var(--rgc-edge);
}

.plaque-cool-badge {
    display: inline-flex;
    flex-shrink: 0;
}

.plaque-cool-badge-img {
    background: #04231a;
    border-radius: var(--r-snug);
    display: block;
    height: 36px;
    padding: var(--rgc-tiny);
    width: auto;
}

.plaque-cool-nav,
.plaque-cool-rule-nav {
    min-width: 0;
}

.plaque-cool-queue {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-base);
    list-style: none;
    margin: 0;
    padding: 0;
}

.plaque-cool-piece {
    display: inline-block;
}

.plaque-cool-href {
    background: var(--rgc-prime);
    color: #04231a;
    font-size: var(--rgc-sm);
    font-weight: var(--rgc-half);
    letter-spacing: var(--rgc-open);
    text-decoration: none;
    text-transform: uppercase;
}

.plaque-cool-href:hover {
    background: #04231a;
    color: var(--rgc-prime);
}

.plaque-cool-rule-queue {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rgc-snug);
    list-style: none;
    margin: 0;
    padding: 0;
}

.plaque-cool-rule-piece {
    display: inline-block;
}

.plaque-cool-rule-href {
    background: var(--rgc-prime);
    color: #0a3a2c;
    font-size: var(--rgc-mini);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.plaque-cool-rule-href:hover {
    background: #04231a;
    color: var(--rgc-prime);
}

.plaque-cool-fine {
    background: var(--rgc-prime);
    color: #0a3a2c;
    flex: 1 1 100%;
    font-size: var(--rgc-mini);
    line-height: var(--rgc-normal);
}

/* -------------------------------------------------------------------------
   22. Keksbanner — COOK-15: seitliches Blatt, fährt von unten ein.
   ------------------------------------------------------------------------- */
.rubrique-keen {
    background: var(--rgc-raised);
    border-inline-start: var(--rgc-slim) solid var(--rgc-border-strong);
    border-radius: var(--r-base);
    bottom: 0;
    box-shadow: var(--d-wide);
    display: block;
    inset-inline-end: 0;
    max-height: 62vh;
    overflow-y: auto;
    position: fixed;
    transform: translateY(calc(100% + 40px));
    transition: transform var(--rgc-slow) var(--rgc-exit), visibility 0ms linear var(--rgc-slow);
    visibility: hidden;
    width: min(360px, 100vw);
    z-index: 120;
}

.rubrique-keen.is-open {
    transform: translateY(0);
    transition: transform var(--rgc-slow) var(--rgc-exit), visibility 0ms;
    visibility: visible;
}

.rubrique-keen[hidden] {
    display: block;
}

.rubrique-keen-inside {
    display: flex;
    flex-direction: column;
    gap: var(--rgc-snug);
    padding: var(--rgc-base);
}

.rubrique-keen-note {
    color: var(--rgc-text-muted);
    font-size: var(--rgc-sm);
    line-height: var(--rgc-normal);
    margin: 0;
}

.rubrique-keen-controls {
    display: flex;
    flex-direction: column;
    gap: var(--rgc-snug);
}

.rubrique-keen-yes,
.rubrique-keen-refuse {
    align-items: center;
    border-radius: var(--rgc-pill);
    cursor: pointer;
    display: inline-flex;
    font-family: var(--rgc-banner);
    font-size: var(--rgc-sm);
    font-weight: var(--rgc-black);
    justify-content: center;
    letter-spacing: var(--rgc-even);
    min-height: 42px;
    padding: var(--rgc-snug) var(--rgc-base);
    text-transform: uppercase;
    width: 100%;
}

.rubrique-keen-yes {
    background: var(--rgc-prime);
    border: 0;
    color: #04231a;
}

.rubrique-keen-yes:hover {
    background: #14e59c;
    color: #04231a;
}

.rubrique-keen-refuse {
    background: var(--rgc-raised);
    border: var(--rgc-slim) solid var(--rgc-border-strong);
    color: var(--rgc-type);
}

.rubrique-keen-refuse:hover {
    background: var(--rgc-spot-deep);
    color: var(--rgc-type);
}

/* -------------------------------------------------------------------------
   23. Anpassung an schmale Fenster
   ------------------------------------------------------------------------- */
@media (max-width: 1240px) {
    :root {
        --rgc-edge: var(--rgc-inset-tablet);
    }

    .socle-crisp-button-quiet {
        display: none;
    }
}

@media (max-width: 1024px) {
    .tribune-dark-stack {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    .socle-crisp-nav {
        display: none;
    }

    .socle-crisp-menu-knob {
        display: block;
        order: 3;
    }

    .socle-crisp-controls {
        margin-inline-start: auto;
        order: 2;
    }
}

@media (max-width: 720px) {
    :root {
        --rgc-xxl: 34px;
        --rgc-h2: 26px;
        --rgc-sub: 20px;
        --rgc-display-4: 16px;
        --rgc-minor: 14px;
        --rgc-micro-head: 12px;
        --rgc-copy: 15px;
        --rgc-sm: 12px;
        --rgc-mini: 10px;
        --rgc-wide: 30px;
        --rgc-roomy: 48px;
        --rgc-edge: var(--rgc-inset-mobile);
        --rgc-sec-y: 34px;
    }

    .socle-crisp-rank {
        height: auto;
        min-height: 66px;
        padding-block: var(--rgc-snug);
    }

    .socle-crisp.is-shrunk .socle-crisp-rank {
        height: auto;
    }

    .socle-crisp-badge-img {
        height: 26px;
    }

    .socle-crisp.is-shrunk .socle-crisp-badge-img {
        height: 24px;
    }

    .socle-crisp-button {
        font-size: 12px;
        letter-spacing: var(--rgc-even);
        padding-inline: var(--rgc-snug);
    }

    .pillar-grave-tile {
        height: 170px;
    }

    .tribune-dark-stack {
        grid-template-columns: minmax(0, 1fr);
    }

    .shelf-refined-count {
        flex: 0 0 54px;
        width: 54px;
    }

    .spread-warm-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .spread-warm-pitch {
        justify-content: center;
        width: 100%;
    }

    .pilier-true-plate {
        flex-direction: column;
    }

    .loggia-swift-grid {
        min-width: 0;
    }

    .catwalk-fresh-box {
        flex: 0 0 auto;
        width: 100%;
    }

    .catwalk-fresh-send {
        align-self: stretch;
        width: 100%;
    }

    .rubrique-keen {
        border-inline-start: 0;
        inset-inline: 0;
        max-height: 70vh;
        width: 100vw;
    }

    .rubrique-keen-inside {
        font-size: 13px;
        gap: 8px;
        line-height: 1.35;
        padding: 12px 14px;
    }

    .rubrique-keen-controls {
        flex-direction: row;
    }

    .rubrique-keen-yes,
    .rubrique-keen-refuse {
        font-size: 12px;
        min-height: 36px;
        padding: 8px 14px;
    }

    .palier-cool-emblem {
        height: 52px;
        width: 52px;
    }

    .palier-cool-emblem svg {
        height: 26px;
        width: 26px;
    }

    .palier-cool-relay {
        align-items: stretch;
        flex-direction: column;
    }
}

@media (max-width: 620px) {
    .socle-crisp-rank {
        flex-wrap: wrap;
    }

    .socle-crisp-controls {
        flex-basis: 100%;
        order: 4;
    }

    .socle-crisp-button-offer {
        flex: 1 1 auto;
    }
}

@media (max-width: 400px) {
    .palier-cool-queue,
    .palier-cool-steps,
    .hallway-prime-queue {
        padding-inline-start: var(--rgc-base);
    }

    .rubrique-keen-controls {
        flex-direction: column;
    }
}

/* -------------------------------------------------------------------------
   24. Angebotsschaltflaechen — Form, Farbe und Dauerbewegung stammen aus
   scripts/cta-style.mjs (Farbe bewusst ausserhalb der Seitenpalette).
   ------------------------------------------------------------------------- */
/* Offer CTA */
.rnis-act{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;
  min-height:50px;padding:0 30px;border:1px solid #031324;border-radius:6px;
  background:#DB2777;color:#FFFFFF;text-decoration:none;
  font-size:14px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase;
  box-shadow:5px 5px 0 #031324;transition:background .12s ease,color .12s ease,transform .12s ease,box-shadow .12s ease}
.rnis-act:hover{background:#BE185D;color:#FFFFFF;box-shadow:3px 3px 0 #031324;animation:none}
.rnis-act:hover::after{animation:none}
.rnis-act:active{background:#9D174D;color:#FFFFFF}
.rnis-act:focus-visible{outline:3px solid #031324;outline-offset:3px}
.rnis-act{animation:lift_rnis 3.7s ease-in-out infinite}
@keyframes lift_rnis{0%{transform:translateY(0)}8.108%{transform:translateY(-5px)}29.730%,100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.rnis-act,.rnis-act::after{animation:none!important;transition:none!important}}

/* -------------------------------------------------------------------------
   25. Traeger der Angebotsschaltflaechen: Platz und Reihenfolge im jeweiligen
   Baustein. Aussehen kommt aus Abschnitt 24.
   ------------------------------------------------------------------------- */
.socle-crisp-button-offer {
    order: 3;
}

.socle-crisp-piece-extra {
    margin-inline-start: var(--rgc-tiny);
}

.pillar-grave-pitch {
    flex: 0 0 auto;
}

.palier-cool-button {
    flex: 0 0 auto;
}

.atrium-plus-button {
    margin-block-start: var(--rgc-base);
}

.crypte-signal-button {
    margin-inline: auto;
}

/* -------------------------------------------------------------------------
   26. Enge Desktop-Breiten: die Angebotsschaltflaeche wird schmaler, damit in
   der Kopfzeile mehr Menuepunkte in der Reihe bleiben (priority+).
   Steht bewusst NACH Abschnitt 24 — sonst gewinnt dessen Grundregel.
   ------------------------------------------------------------------------- */
@media (max-width: 1600px) {
    .socle-crisp-rank .rnis-act {
        letter-spacing: 0.8px;
        padding: 0 18px;
    }

    .socle-crisp-button-quiet {
        padding-inline: var(--rgc-snug);
    }

    .socle-crisp-queue {
        gap: var(--rgc-snug);
    }
}

@media (max-width: 720px) {
    .socle-crisp-rank .rnis-act {
        letter-spacing: 0.8px;
        min-height: 46px;
        padding: 0 16px;
        width: 100%;
    }
}

/* Sprungziele nicht unter die klebende Kopfzeile schieben. */
[id] {
    scroll-margin-block-start: 96px;
}

@media (max-width: 490px) {
  .socle-crisp-nav,
  .socle-crisp-queue,
  .socle-crisp-href { display: none !important; }
  .socle-crisp-more-opener { display: block !important; }
}


/* картинки страниц: вписываются целиком, не занимают весь экран */
.palier-cool-kadr{margin-block:24px;}
.palier-cool-kadr img{display:block;width:auto;height:auto;max-width:min(100%,560px);max-height:56vh;margin-inline:auto;}