/*
 * Startseite, Impressum und Datenschutz – umgesetzt nach
 * docs/prototyp/landingpage_v4/ („Nachtlauf").
 *
 * Fassung 4 löst Fassung 3 ab: dunkle Nachtpalette statt Terrakotta auf Creme,
 * kondensierte Barlow-Versalien statt Archivo, Bewegung aus dem
 * Scrollfortschritt statt einer ruhigen Papierseite.
 *
 * Eigene Datei und eigene Palette: Formular und Verwaltung benutzen weiterhin
 * assets/style.css. Die Startseite hängt nicht davon ab.
 *
 * Radien: Flächen und Bilder 18px, alles Anklickbare als Pille. Eine Regel,
 * überall gleich.
 */

/* ---------- Schriften ---------- */

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/barlow-condensed-600.woff2") format("woff2");
}

@font-face {
    font-family: "Barlow Condensed";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/barlow-condensed-700.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Sans";
    font-style: normal;
    font-weight: 400 600;
    font-display: swap;
    src: url("fonts/ibm-plex-sans-var.woff2") format("woff2");
}

@font-face {
    font-family: "IBM Plex Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

/* ---------- Marken ---------- */

.lp {
    color-scheme: dark;

    --ink:        #0B100F;
    --ink-2:      #101715;
    --surface:    #16201D;
    --surface-2:  #1D2925;
    --line:       rgba(233, 245, 238, .13);
    --line-soft:  rgba(233, 245, 238, .07);
    --text:       #E9F2ED;
    --muted:      #9DAFA8;
    --accent:     #C9F24D;
    --accent-hi:  #D8FA6C;
    --accent-ink: #0B100F;
    --accent-txt: #C9F24D;   /* Akzent als Schriftfarbe */
    --chip:       #F4F1E9;   /* Logokacheln, in beiden Modi hell: die Logos sind dunkel */
    --chip-ink:   #2A3330;
    --scrim:      rgba(11, 16, 15, .72);

    --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
    --body:    "IBM Plex Sans", system-ui, -apple-system, sans-serif;
    --mono:    "IBM Plex Mono", ui-monospace, monospace;

    --shell: 1280px;
    --pad:   clamp(20px, 4vw, 56px);
    --gap:   clamp(72px, 11vh, 150px);
    --r:     18px;

    --ease:  cubic-bezier(.16, 1, .3, 1);
}

/*
 * Heller Modus. Fassung 3 kannte nur einen; hier kommt er dazu, weil die
 * Nachtpalette auf einem hellen Bildschirm im Sonnenlicht schlecht liegt.
 * Ausgelegt ist die Seite auf dunkel – der helle Modus ist die Ausweichfassung,
 * keine zweite Gestaltung.
 */
@media (prefers-color-scheme: light) {
    .lp {
        color-scheme: light;

        --ink:        #F1F3EE;
        --ink-2:      #E8EBE3;
        --surface:    #FFFFFF;
        --surface-2:  #F7F8F3;
        --line:       rgba(14, 21, 19, .16);
        --line-soft:  rgba(14, 21, 19, .08);
        --text:       #0E1513;
        --muted:      #4C5A55;
        --accent:     #C9F24D;
        --accent-hi:  #BCE93A;
        --accent-ink: #0B100F;
        --accent-txt: #3B5406;   /* Limette trägt auf Weiß keinen Text, deshalb Moos */
        --chip:       #F4F1E9;
        --chip-ink:   #2A3330;
        --scrim:      rgba(11, 16, 15, .58);
    }
}

/*
 * Die alten Namen zeigen auf die neuen Werte.
 *
 * Impressum, Datenschutz und die Einwilligungsseite teilen sich dieses
 * Stylesheet mit der Startseite. Ihre Regeln stehen weiter unten und sprechen
 * die Palette der Fassung 3 an. Statt sie alle umzuschreiben, hängen die alten
 * Namen hier an den neuen – so wechseln die Rechtsseiten die Palette mit,
 * hellen Modus eingeschlossen, ohne dass an ihrem Aufbau etwas zu ändern wäre.
 */
.lp {
    --paper:      var(--ink);
    --card:       var(--surface);
    --card-lit:   var(--surface-2);
    --slot:       var(--surface-2);
    --dark:       var(--text);
    --mid:        var(--muted);
    --rust:       var(--accent-txt);
    --rust-dark:  var(--accent-txt);
    --rust-deep:  var(--accent-txt);
    --yellow:     var(--accent);
    --yellow-lit: var(--accent-hi);
    --brown:      var(--accent-ink);
    --brown-mid:  var(--accent-ink);
    --head:       var(--display);
}

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

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 90px;
}

body.lp {
    margin: 0;
    background: var(--ink);
    color: var(--text);
    font: 400 17px/1.6 var(--body);
    /* clip statt hidden: `hidden` macht den Body zum Scrollcontainer und nimmt
       allem darin die Klebewirkung (position: sticky). */
    overflow-x: clip;
    -webkit-font-smoothing: antialiased;
}

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

a {
    color: inherit;
}

:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 3px;
    border-radius: 4px;
}

.lp-shell {
    width: 100%;
    max-width: var(--shell);
    margin: 0 auto;
    padding-inline: var(--pad);
}

.lp-mono {
    font-family: var(--mono);
    font-weight: 500;
}

.lp-accent {
    color: var(--accent-txt);
}

.lp-skip {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 90;
    background: var(--accent);
    color: var(--accent-ink);
    padding: 12px 18px;
    font-weight: 600;
    text-decoration: none;
}

.lp-skip:focus {
    left: 12px;
    top: 12px;
}

/* ---------- Wiederkehrende Bausteine ---------- */

.lp-h2 {
    margin: 0 0 20px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 4.6rem);
    line-height: .95;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--text);
}

.lp-lead {
    margin: 0 0 18px;
    font-size: clamp(1.1rem, 1.6vw, 1.35rem);
    line-height: 1.5;
    max-width: 58ch;
}

.lp-body {
    margin: 0 0 18px;
    color: var(--muted);
    max-width: 62ch;
}

.lp-sub {
    margin: 0 0 18px;
    color: var(--muted);
    max-width: 56ch;
}

/* ---------- Knöpfe ---------- */

.lp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    gap: 10px;
    padding: 12px 22px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-family: var(--body);
    font-weight: 600;
    font-size: .97rem;
    text-decoration: none;
    transition: background-color .2s var(--ease), border-color .2s var(--ease),
                color .2s var(--ease), transform .18s var(--ease);
}

.lp-btn-lg {
    padding: 16px 30px;
    font-size: 1.05rem;
}

.lp-btn-accent {
    background: var(--accent);
    color: var(--accent-ink);
}

.lp-btn-accent:hover {
    background: var(--accent-hi);
}

.lp-btn-ghost {
    background: transparent;
    color: var(--text);
    border-color: var(--line);
    backdrop-filter: blur(6px);
}

.lp-btn-ghost:hover {
    border-color: var(--text);
}

.lp-btn:active {
    transform: translateY(1px) scale(.985);
}

/* ---------- Laufweg und Korn ---------- */

/* Der Laufweg zeigt den Scrollfortschritt. Er kommt erst weiter unten dazu,
   wo der Browser scroll-driven animations kennt – sonst wäre er ein Strich,
   der nie wächst. */
.lp-rail {
    display: none;
}

.lp-grain {
    position: fixed;
    inset: 0;
    z-index: 60;
    pointer-events: none;
    opacity: .35;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}

@media (prefers-color-scheme: light) {
    .lp-grain {
        opacity: .2;
        mix-blend-mode: multiply;
    }
}

/* ---------- Hinweis an unbelegten Bildplätzen ---------- */
/*
 * Liegt an einem Bildplatz noch keine eigene Datei, zeigt die Seite ein
 * Platzhalterbild. Das ist ein beliebiges Motiv und sieht aus wie eine echte
 * Aufnahme vom Campus – deshalb sagt dieser Hinweis, was es wirklich ist.
 *
 * Er liegt im Bild, nicht daneben: nur so ist eindeutig, welcher Platz gemeint
 * ist, wenn mehrere nebeneinander stehen. Und er ist lesbar, nicht dezent –
 * ein Hinweis, den man übersieht, hätte keinen Zweck.
 *
 * Sobald jemand im Verwaltungsbereich ein Bild hochlädt, verschwindet er.
 */

.lp-placeholder {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 2;
    max-width: min(340px, calc(100% - 28px));
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px 11px;
    border: 1px dashed color-mix(in srgb, var(--accent) 55%, transparent);
    border-radius: 12px;
    /* Fester dunkler Grund statt einer Marke: der Hinweis liegt auf einem
       Foto, dessen Helligkeit niemand kennt – auch im hellen Modus. */
    background: rgba(11, 16, 15, .82);
    backdrop-filter: blur(8px);
    color: #E9F2ED;
    text-align: left;
}

.lp-placeholder-tag {
    font-family: var(--mono);
    font-weight: 500;
    font-size: .68rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--accent);
}

.lp-placeholder-text {
    font-size: .82rem;
    line-height: 1.4;
}

/* Über dem Titel im Einstieg und über der Party-Tafel steht links schon Text.
   Dort weicht der Hinweis nach rechts aus. */
.lp-placeholder.is-oben {
    left: auto;
    right: var(--pad);
    top: 24px;
}

/* Die Bildplätze müssen den Hinweis tragen können. `.lp-hero-media` und
   `.lp-party` sind bereits positioniert. */
.lp-fact-photo,
.lp-about-media,
.lp-retro-item {
    position: relative;
}

@media (max-width: 560px) {
    .lp-placeholder {
        top: 10px;
        left: 10px;
        max-width: calc(100% - 20px);
        padding: 8px 12px 9px;
    }

    .lp-placeholder.is-oben {
        right: 10px;
    }

    .lp-placeholder-text {
        font-size: .78rem;
    }
}

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

.lp-head {
    position: sticky;
    top: 0;
    z-index: 50;
    background: color-mix(in srgb, var(--ink) 78%, transparent);
    backdrop-filter: blur(14px) saturate(140%);
    border-bottom: 1px solid var(--line-soft);
}

.lp-head-inner {
    max-width: var(--shell);
    margin: 0 auto;
    min-height: 72px;
    padding-inline: var(--pad);
    display: flex;
    align-items: center;
    gap: 28px;
}

.lp-brand {
    display: flex;
    gap: 8px;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.35rem;
    letter-spacing: .01em;
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
}

.lp-nav {
    display: flex;
    gap: 26px;
    margin-left: auto;
    font-size: .95rem;
}

.lp-nav a {
    text-decoration: none;
    color: var(--muted);
    position: relative;
    padding-block: 6px;
    transition: color .2s var(--ease);
}

.lp-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: var(--accent);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--ease);
}

.lp-nav a:hover {
    color: var(--text);
}

.lp-nav a:hover::after {
    transform: scaleX(1);
}

.lp-nav-cta {
    margin-left: 4px;
}

@media (max-width: 1080px) {
    .lp-nav { display: none; }
    .lp-nav-cta { margin-left: auto; }
}

@media (max-width: 560px) {
    .lp-head-inner {
        flex-wrap: wrap;
        gap: 12px;
        padding-block: 12px;
    }
    .lp-nav-cta { margin-left: 0; }
}

/* ---------- Einstieg ---------- */

.lp-hero {
    position: relative;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    padding-block: clamp(48px, 9vh, 96px);
    overflow: hidden;
}

.lp-hero-media {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.lp-hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.72) contrast(1.04) brightness(.86);
}

.lp-hero-media::after {
    content: "";
    position: absolute;
    inset: 0;
    /* Das Bild ist hell und bunt, der Titel steht darauf: erst ein Verlauf über
       das Ganze, dann ein dunkler Kegel links unter der Schrift. */
    background:
        linear-gradient(180deg,
            color-mix(in srgb, var(--ink) 78%, transparent) 0%,
            color-mix(in srgb, var(--ink) 72%, transparent) 52%,
            var(--ink) 100%),
        radial-gradient(78% 70% at 4% 46%,
            color-mix(in srgb, var(--ink) 90%, transparent) 0%, transparent 72%);
}

.lp-hero-inner {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    grid-template-rows: auto auto;
    align-items: end;
    column-gap: clamp(32px, 5vw, 72px);
    row-gap: clamp(28px, 5vh, 56px);
}

.lp-hero-title {
    grid-column: 1 / -1;
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.9rem, 10.5vw, 9.5rem);
    line-height: .88;
    letter-spacing: -.015em;
    text-transform: uppercase;
}

.lp-hero-title .lp-line {
    display: block;
    overflow: hidden;
    padding-bottom: .06em;
}

.lp-hero-title .lp-line > span {
    display: block;
}

.lp-hero-title em {
    font-style: normal;
    color: var(--accent-txt);
}

@media (prefers-color-scheme: light) {
    /* Auf hellem Grund liegt der Titel weiterhin auf dem Bild: heller Text bleibt. */
    .lp-hero-title,
    .lp-hero-sub { color: #F2F6F1; }
    .lp-hero-title em { color: var(--accent); }
}

.lp-hero-sub {
    margin: 0 0 30px;
    font-size: clamp(1.08rem, 1.5vw, 1.3rem);
    line-height: 1.55;
    max-width: 46ch;
    color: color-mix(in srgb, var(--text) 88%, transparent);
}

.lp-hero-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* ---------- Countdown ---------- */

.lp-clock {
    background: color-mix(in srgb, var(--surface) 78%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 22px 24px 20px;
    backdrop-filter: blur(16px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 24px 60px rgba(0, 0, 0, .35);
}

.lp-clock-label {
    margin: 0 0 14px;
    font-size: .82rem;
    letter-spacing: .06em;
    color: var(--muted);
}

.lp-clock-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.lp-clock-cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-right: 10px;
    border-right: 1px solid var(--line-soft);
}

.lp-clock-cell:last-child {
    border-right: 0;
}

.lp-clock-num {
    font-family: var(--mono);
    font-weight: 500;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--accent-txt);
}

.lp-clock-unit {
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muted);
}

.lp-clock-when {
    margin: 16px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--line-soft);
    font-size: .95rem;
    line-height: 1.45;
    color: var(--text);
}

.lp-clock-done {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.6rem;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--accent-txt);
}

@media (prefers-color-scheme: light) {
    .lp-clock {
        background: color-mix(in srgb, #0E1513 68%, transparent);
        color: #F2F6F1;
    }
    .lp-clock-when { color: #F2F6F1; }
    .lp-clock-num,
    .lp-clock-done { color: var(--accent); }
    .lp-clock-label,
    .lp-clock-unit { color: #C3CEC8; }
}

@media (max-width: 900px) {
    .lp-hero-inner {
        grid-template-columns: 1fr;
        align-items: start;
    }
    .lp-clock { max-width: 460px; }
}

/* ---------- Eckdaten ---------- */

.lp-facts-wrap {
    padding-top: var(--gap);
}

.lp-facts {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(180px, auto);
    gap: 14px;
}

.lp-fact {
    border-radius: var(--r);
    padding: 26px;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 10px;
    overflow: hidden;
    /* Grundlage für beliebig viele Kacheln: volle Breite. Die drei Plätze des
       Entwurfs werden gleich darunter gesetzt, alles Weitere läuft in eigene
       Zeilen statt die Aufteilung zu sprengen. */
    grid-column: 1 / -1;
}

.lp-fact-num {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.2rem, 4.4vw, 3.4rem);
    line-height: .92;
    text-transform: uppercase;
}

.lp-fact-cap {
    margin: 0;
    font-size: .98rem;
    line-height: 1.45;
    max-width: 34ch;
}

.lp-fact-accent {
    background: var(--accent);
    color: var(--accent-ink);
}

.lp-fact-accent .lp-fact-cap {
    color: color-mix(in srgb, var(--accent-ink) 82%, transparent);
}

.lp-fact-tint {
    background:
        radial-gradient(120% 120% at 100% 0%,
            color-mix(in srgb, var(--accent) 22%, transparent) 0%, transparent 62%),
        var(--surface);
    border: 1px solid var(--line);
}

.lp-fact-tint .lp-fact-cap {
    color: var(--muted);
}

.lp-fact-plain {
    background: var(--surface-2);
    border: 1px solid var(--line);
}

.lp-fact-plain .lp-fact-cap {
    color: var(--muted);
}

.lp-fact-photo {
    margin: 0;
    padding: 0;
    min-height: 320px;
}

.lp-fact-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Die Aufteilung des Entwurfs: erste Kachel links, zweite daneben, das Bild
   rechts über zwei Zeilen, die dritte darunter über die halbe Breite. */
@media (min-width: 861px) {
    .lp-facts > .lp-fact-accent { grid-column: 1 / 5; }
    .lp-facts > .lp-fact-tint   { grid-column: 5 / 8; }
    .lp-facts > .lp-fact-plain  { grid-column: 1 / 8; }

    .lp-facts > .lp-fact-photo {
        grid-column: 8 / 13;
        grid-row: 1 / 3;
        min-height: 0;
    }
}

/* ---------- Der Campus in einem Abend ---------- */

.lp-about {
    padding-top: var(--gap);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(28px, 5vw, 80px);
    align-items: center;
}

.lp-about-media {
    margin: 0;
    border-radius: var(--r);
    overflow: hidden;
}

.lp-about-media img {
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 5;
    object-fit: cover;
}

@media (max-width: 860px) {
    .lp-about { grid-template-columns: 1fr; }
}

/* ---------- Ablauf: waagerechte Fahrt ---------- */

.lp-run {
    margin-top: var(--gap);
}

/* Grundfassung: einfach seitwärts scrollbar. Ohne JavaScript, ohne Pin. */
.lp-run-viewport {
    padding-block: 8px 32px;
}

/*
 * Überschrift und Spur stehen im selben Block. Grundfassung: der Block ist so
 * breit wie die Seite, die Überschrift beginnt am Rand.
 */
.lp-run-inner {
    max-width: 100%;
}

.lp-run-head {
    padding-inline: var(--pad);
    padding-bottom: 26px;
}

.lp-run-head .lp-h2 {
    margin-bottom: 8px;
}

.lp-run-note {
    margin: 0;
    color: var(--muted);
    font-size: .98rem;
}

.lp-run-track {
    display: flex;
    gap: var(--run-gap);
    padding-inline: var(--pad);
    /* `safe center`: passen alle Stationen nebeneinander, steht die Reihe in der
       Mitte statt links am Rand. Passen sie nicht, fällt die Ausrichtung auf den
       Anfang zurück – ein schlichtes `center` schöbe die erste Station aus dem
       Bild, und man käme nicht mehr an sie heran. */
    justify-content: safe center;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
    --stop-w: clamp(240px, 24vw, 320px);
    --run-gap: 18px;
    /* Wie viele Stationen es sind, setzt das Template als --stops. */
    --stops: 6;
}

.lp-stop {
    flex: 0 0 var(--stop-w);
    scroll-snap-align: start;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: 24px 22px 26px;
    min-height: 280px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.lp-stop-time {
    margin: 0;
    font-size: 1.35rem;
    color: var(--accent-txt);
    letter-spacing: -.02em;
}

.lp-stop-title {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.75rem;
    line-height: 1;
    text-transform: uppercase;
}

.lp-stop-text {
    margin: 0;
    color: var(--muted);
    font-size: .97rem;
    line-height: 1.5;
}

/* Die letzte Station ist das Ziel des Abends und wird abgesetzt. */
.lp-stop-last {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--accent-ink);
}

.lp-stop-last .lp-stop-time {
    color: color-mix(in srgb, var(--accent-ink) 75%, transparent);
}

.lp-stop-last .lp-stop-text {
    color: color-mix(in srgb, var(--accent-ink) 80%, transparent);
}

/* Auf dem Handy steht immer genau eine Station im Bild.
   Die Kachel bekommt die volle Breite zwischen den Rändern (100% meint hier
   die Inhaltsbreite, also abzüglich der Innenabstände), und der Abstand
   zwischen zwei Kacheln wird auf denselben Wert gesetzt wie der Rand. Damit
   ist links und rechts gleich viel Luft, und von der nächsten Station lugt
   nichts herein. `scroll-padding` sorgt dafür, dass die Kachel beim Einrasten
   am Rand stehen bleibt und nicht an der Kante des Fensters. */
@media (max-width: 900px) {
    .lp-run-track {
        --stop-w: 100%;
        --run-gap: var(--pad);
        scroll-padding-inline: var(--pad);
    }

    /* Bei voller Breite trägt der Text die Höhe – eine feste Mindesthöhe
       ließe unter kurzen Zeilen ein großes Loch. */
    .lp-stop {
        min-height: 0;
    }
}

/* Aufgewertete Fassung: der Abschnitt wird festgehalten, die Spur fährt
   seitwärts. Der Abend läuft von links nach rechts – deshalb diese Bewegung
   und keine andere.
   Rechnung: Bühne 300vh, Fenster 100vh, also fährt sie zwischen 25% und 75%
   des cover-Bereichs. Die Strecke hängt an der Zahl der Stationen; bei wenigen
   wird sie 0 und der Abschnitt steht einfach still. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) and (min-width: 901px) {
        .lp-run-stage {
            height: 300vh;
            view-timeline-name: --lp-runline;
            view-timeline-axis: block;
        }

        .lp-run-viewport {
            position: sticky;
            top: 0;
            height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            overflow: hidden;
            padding-block: 0;
        }

        /*
         * Auf sehr breiten Schirmen ist die Strecke 0 und die Spur steht still –
         * dann gehört sie in die Mitte und nicht an den linken Rand. Der Block
         * ist so breit wie sein breitestes Kind, also wie die Spur; `auto`
         * zentriert ihn genau so lange, wie er hineinpasst. Ist er breiter,
         * wird daraus von selbst 0 und die Fahrt beginnt wieder ganz links.
         *
         * Die Überschrift steht mit im Block und rückt deshalb mit – sie
         * beginnt dort, wo auch die erste Station beginnt.
         */
        .lp-run-inner {
            width: max-content;
            max-width: none;
            margin-inline: auto;
        }

        .lp-run-track {
            overflow: visible;
            width: max-content;
            --pan: max(0px, calc(
                var(--stops) * var(--stop-w)
                + (var(--stops) - 1) * var(--run-gap)
                + 2 * var(--pad)
                - 100vw
            ));
            animation: lp-pan linear both;
            animation-timeline: --lp-runline;
            animation-range: cover 25% cover 75%;
            will-change: transform;
        }

        @keyframes lp-pan {
            to { transform: translate3d(calc(-1 * var(--pan)), 0, 0); }
        }
    }
}

/* ---------- Aftershow Party ---------- */

.lp-party {
    position: relative;
    margin-top: var(--gap);
    min-height: min(88vh, 760px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.lp-party-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(.78);
}

.lp-party::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 10%, var(--scrim) 60%, var(--ink) 100%);
}

.lp-party-panel {
    position: relative;
    z-index: 1;
    width: 100%;
    padding-block: clamp(40px, 8vh, 90px);
}

.lp-party-box {
    max-width: 640px;
    background: color-mix(in srgb, var(--ink) 74%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(26px, 4vw, 40px);
    backdrop-filter: blur(18px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
    color: #EEF4F0;
}

.lp-party-box .lp-h2 {
    color: #EEF4F0;
}

.lp-party-box .lp-body {
    color: #C6D2CC;
}

.lp-party-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 22px 0 0;
}

.lp-party-facts span {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 8px 16px;
    font-size: .92rem;
    color: var(--accent);
}

/* Ohne Durchsicht bleibt die Flaeche lesbar, statt vor dem Bild zu verschwimmen. */
@media (prefers-reduced-transparency: reduce) {
    .lp-clock,
    .lp-party-box,
    .lp-btn-ghost,
    .lp-head { backdrop-filter: none; }

    .lp-clock,
    .lp-party-box { background: var(--surface); }
}

/* ---------- Rückblick ---------- */

.lp-retro {
    padding-top: var(--gap);
}

.lp-retro-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 16px;
    align-items: start;
}

.lp-retro-item {
    margin: 0;
}

.lp-retro-item img {
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: var(--r);
}

.lp-retro-item figcaption {
    padding-top: 10px;
    font-family: var(--mono);
    font-size: .84rem;
    color: var(--muted);
}

.lp-retro-a { grid-column: 1 / 5; }
.lp-retro-b { grid-column: 5 / 10; margin-top: clamp(24px, 6vw, 84px); }
.lp-retro-c { grid-column: 10 / 13; }

.lp-retro-a img { aspect-ratio: 4 / 5; }
.lp-retro-b img { aspect-ratio: 11 / 8; }
.lp-retro-c img { aspect-ratio: 5 / 6; }

@media (max-width: 860px) {
    .lp-retro-a,
    .lp-retro-b,
    .lp-retro-c {
        grid-column: 1 / -1;
        margin-top: 0;
    }
}

/* Zoom auf dem Scrollweg: die Bilder rücken näher, während sie durchs Bild
   laufen. Erzeugt Tiefe im Rückblick, ohne Text zu bewegen. */
@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .lp-retro-item img {
            animation: lp-closer linear both;
            animation-timeline: view();
            animation-range: entry 10% cover 85%;
        }

        @keyframes lp-closer {
            from { transform: scale(1.16); }
            to   { transform: scale(1); }
        }
    }
}

/* ---------- Fachschaften ---------- */

.lp-crew {
    padding-top: var(--gap);
}

.lp-crew-head {
    margin-bottom: 34px;
}

.lp-crew-empty {
    margin: 0;
    color: var(--muted);
}

.lp-belt {
    overflow: hidden;
    padding-block: 6px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.lp-belt-row {
    display: flex;
    width: max-content;
    gap: 16px;
    animation: lp-belt 46s linear infinite;
}

/* Anhalten, solange jemand hinsieht oder mit der Tastatur darin steht. */
.lp-belt:hover .lp-belt-row,
.lp-belt:focus-within .lp-belt-row {
    animation-play-state: paused;
}

/* Zu wenige Kacheln für eine Schleife: dann steht das Band still und ohne die
   Maske an den Rändern. Zentriert, weil eine kurze Reihe sonst links klebt und
   rechts eine Lücke lässt, die nach einem Fehler aussieht. Sobald genug
   Fachschaften da sind, läuft das Band wieder und füllt die Breite selbst. */
.lp-belt.is-short {
    -webkit-mask-image: none;
    mask-image: none;
    padding-inline: var(--pad);
}

.lp-belt.is-short .lp-belt-row {
    animation: none;
    width: auto;
    justify-content: center;
}

.lp-belt.is-short .lp-belt-set {
    flex-wrap: wrap;
    justify-content: center;
}

.lp-belt-set {
    display: flex;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.lp-belt-item {
    flex: 0 0 auto;
    width: 200px;
    height: 148px;
    background: var(--chip);
    color: var(--chip-ink);
    border-radius: var(--r);
    display: grid;
    /* minmax(0, 1fr) statt 1fr: sonst bekommt die Zeile als Mindestmaß die
       natürliche Größe des Logos, wächst über die feste Höhe hinaus und schiebt
       den Spieltitel unter das Bild. Logos kommen in allen Größen – die Kachel
       muss sie kleiner rechnen dürfen. */
    grid-template-rows: minmax(0, 1fr) auto;
    gap: 8px;
    padding: 18px 18px 14px;
    overflow: hidden;
}

/* Das Logo wird über die Fläche gelegt statt in sie hineingerechnet.
   `max-height: 100%` löst sich hier nicht auf – die Zeile ist zwar 1fr einer
   festen Höhe, gilt dem Browser für Prozentwerte aber nicht als bestimmt, und
   die Logos standen dann in Originalgröße über der Kachel. Ein absolut
   gesetztes Bild mit object-fit hängt an nichts davon. */
.lp-belt-mark {
    position: relative;
    min-height: 0;
}

.lp-belt-mark img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

/* Ohne Logo steht der Name in der Fläche – der braucht den normalen Fluss. */
.lp-belt-mark:has(.lp-belt-abbr) {
    display: grid;
    place-items: center;
}

/* Ein langer Name muss die Kachel ebenfalls nicht sprengen. */
.lp-belt-abbr {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* Nicht jede Organisation hat ein Logo. Dann steht der Name selbst da – das
   ist die ehrlichere Kachel als ein erfundenes Kürzel. */
.lp-belt-abbr {
    font-family: var(--display);
    font-weight: 700;
    font-size: 1.3rem;
    line-height: 1.05;
    text-align: center;
    text-transform: uppercase;
}

.lp-belt-game {
    font-size: .78rem;
    line-height: 1.25;
    text-align: center;
    color: color-mix(in srgb, var(--chip-ink) 72%, transparent);
    /* Eine Zeile, egal wie lang der Spieltitel ist: sonst wackeln die Kacheln. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@keyframes lp-belt {
    to { transform: translate3d(-50%, 0, 0); }
}

/* Auf dem Handy stehen die Logos als Zweierraster statt als laufendes Band.
   Ein Band, das seitwärts fährt, während die Seite senkrecht scrollt, ist auf
   einem kleinen Schirm mehr Unruhe als Information – und wer die hinteren
   Kacheln sehen will, muss warten, statt zu blättern.
   Damit entfällt auch die Kopie der Reihe: sie trug nur die Endlosschleife. */
@media (max-width: 560px) {
    .lp-belt {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
        padding-inline: var(--pad);
    }

    .lp-belt-row {
        display: block;
        width: auto;
        animation: none;
    }

    .lp-belt-set[aria-hidden="true"] {
        display: none;
    }

    .lp-belt-set {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;
    }

    /* Im Raster bestimmt die Spalte die Breite, nicht die Kachel. */
    .lp-belt-item {
        width: auto;
    }

    /* Die Kachel ist schmaler als am Rechner: ein langer Name wie
       „Hochschulradio" bricht sonst mitten im Wort um. */
    .lp-belt-abbr {
        font-size: 1.05rem;
    }

    /* Ein Spieltitel darf hier zwei Zeilen bekommen, statt nach der Hälfte
       abgeschnitten zu werden – auf der schmalen Kachel bliebe sonst von
       „Schaumkussschleuder" nichts Lesbares übrig. */
    .lp-belt-game {
        white-space: normal;
        /* Spieltitel sind oft ein einziges langes Wort. Ohne diese Zeile
           bleibt es trotz zweier erlaubter Zeilen in der ersten stehen und
           wird abgeschnitten. */
        overflow-wrap: anywhere;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        overflow: hidden;
    }
}

/* ---------- Anmeldung ---------- */

.lp-signup {
    padding-top: var(--gap);
}

.lp-signup-box {
    display: grid;
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    gap: clamp(28px, 4vw, 60px);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(28px, 5vw, 64px);
    position: relative;
    overflow: hidden;
}

.lp-signup-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(80% 90% at 0% 0%,
        color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 60%);
    pointer-events: none;
}

.lp-signup-lead,
.lp-signup-req {
    position: relative;
}

.lp-signup-cta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-top: 26px;
}

.lp-signup-note {
    margin: 0;
    font-size: .92rem;
    color: var(--muted);
}

.lp-signup-req {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    align-content: start;
}

.lp-req {
    border-top: 2px solid var(--accent-txt);
    padding-top: 14px;
}

.lp-req p {
    margin: 0;
    font-size: .99rem;
    line-height: 1.45;
    color: var(--text);
}

@media (max-width: 900px) {
    .lp-signup-box { grid-template-columns: 1fr; }
    .lp-signup-req { grid-template-columns: 1fr; }
}

/* ---------- Fragen ---------- */

.lp-faq {
    padding-top: var(--gap);
}

.lp-faq-list {
    border-top: 1px solid var(--line);
    max-width: 900px;
}

.lp-qa {
    border-bottom: 1px solid var(--line);
}

.lp-qa summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 22px 0;
    cursor: pointer;
    list-style: none;
    font-family: var(--display);
    font-weight: 600;
    font-size: clamp(1.3rem, 2.4vw, 1.8rem);
    line-height: 1.15;
    text-transform: uppercase;
    transition: color .2s var(--ease);
}

.lp-qa summary::-webkit-details-marker { display: none; }
.lp-qa summary:hover { color: var(--accent-txt); }

.lp-qa summary i {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border: 1px solid var(--line);
    border-radius: 999px;
    position: relative;
    transition: transform .3s var(--ease), border-color .2s var(--ease);
}

.lp-qa summary i::before,
.lp-qa summary i::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 12px;
    height: 2px;
    background: var(--accent-txt);
    transform: translate(-50%, -50%);
}

.lp-qa summary i::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.lp-qa[open] summary i {
    transform: rotate(135deg);
    border-color: var(--accent-txt);
}

.lp-qa p {
    margin: 0;
    padding: 0 0 24px;
    max-width: 62ch;
    color: var(--muted);
}

/* ---------- Flyer ---------- */

.lp-campaign-wrap {
    padding-top: var(--gap);
    padding-bottom: var(--gap);
}

.lp-campaign {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: var(--r);
    padding: clamp(24px, 4vw, 40px);
}

.lp-campaign-title {
    margin: 0 0 10px;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(1.8rem, 3vw, 2.6rem);
    line-height: 1;
    text-transform: uppercase;
}

.lp-campaign .lp-body {
    margin: 0;
}

.lp-campaign-soon {
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: 10px 20px;
    font-size: .92rem;
    color: var(--muted);
    white-space: nowrap;
}

/* ---------- Fuß ---------- */

.lp-foot {
    border-top: 1px solid var(--line);
    background: var(--ink-2);
    padding-block: clamp(40px, 6vw, 72px) 40px;
}

.lp-foot-inner {
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: clamp(24px, 4vw, 60px);
    align-items: start;
}

.lp-foot-mark {
    margin: 0;
    font-family: var(--display);
    font-weight: 700;
    font-size: clamp(2.4rem, 6vw, 4.2rem);
    line-height: .9;
    text-transform: uppercase;
}

.lp-foot-cols {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.lp-foot-note {
    margin: 0;
    color: var(--muted);
    font-size: .95rem;
    max-width: 52ch;
}

.lp-foot-links {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 10px;
    font-size: .95rem;
}

.lp-foot-links a {
    text-decoration: none;
    border-bottom: 1px solid var(--line);
    padding-bottom: 2px;
    transition: border-color .2s var(--ease);
}

.lp-foot-links a:hover {
    border-color: var(--accent);
}

@media (max-width: 860px) {
    .lp-foot-inner { grid-template-columns: 1fr; }
}

/* ---------- Auftritt beim Scrollen ---------- */

.lp-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .7s var(--ease) calc(var(--i, 1) * 70ms),
        transform .7s var(--ease) calc(var(--i, 1) * 70ms);
}

.lp-reveal.is-in {
    opacity: 1;
    transform: none;
}

/*
 * Ohne JavaScript bliebe alles mit .lp-reveal unsichtbar – das wäre eine leere
 * Seite. Deshalb setzt das Skript als Erstes `js` auf das Wurzelelement, und
 * erst dann greift das Verstecken. Kein Skript, keine Bewegung, aber alles da.
 */
html:not(.js) .lp-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

@media (prefers-reduced-motion: no-preference) {
    /* Titelzeilen laufen aus ihrer Maske hoch: setzt die Rangfolge im Einstieg. */
    html.js .lp-hero-title .lp-line > span {
        transform: translateY(110%);
        animation: lp-rise .95s var(--ease) forwards;
    }

    html.js .lp-hero-title .lp-line:nth-child(1) > span { animation-delay: .12s; }
    html.js .lp-hero-title .lp-line:nth-child(2) > span { animation-delay: .24s; }
    html.js .lp-hero-title .lp-line:nth-child(3) > span { animation-delay: .36s; }

    @keyframes lp-rise {
        to { transform: translateY(0); }
    }

    /* Laufweg am linken Rand, nur wo scroll-driven animations laufen. */
    @supports (animation-timeline: scroll()) {
        @media (min-width: 1180px) {
            .lp-rail {
                display: block;
                position: fixed;
                left: 22px;
                top: 0;
                bottom: 0;
                width: 2px;
                background: var(--line-soft);
                z-index: 40;
                pointer-events: none;
            }

            .lp-rail-fill {
                display: block;
                width: 100%;
                height: 100%;
                background: var(--accent);
                transform-origin: top;
                transform: scaleY(0);
                animation: lp-rail linear both;
                animation-timeline: scroll(root block);
            }

            @keyframes lp-rail {
                to { transform: scaleY(1); }
            }
        }
    }
}

/* ---------- Impressum, Datenschutz und Einwilligung ---------- */
/*
 * Diese Abschnitte stammen aus Fassung 3 und sind bewusst nicht neu gebaut:
 * es sind Fließtextseiten, und ihr Aufbau war richtig. Sie sprechen die alten
 * Namen an, die oben auf die Nachtpalette zeigen – dadurch wechseln sie die
 * Farben mit, hellen Modus eingeschlossen.
 */

.lp-legal {
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(32px, 5vw, 56px) var(--pad) var(--gap);
}

.lp-legal-back a {
    font-size: 15px;
    font-weight: 500;
    color: var(--mid);
    text-decoration: none;
}

.lp-legal-back a:hover {
    color: var(--rust);
}

.lp-legal-warning {
    margin: 20px 0 0;
    padding: 18px 22px;
    border-radius: 18px;
    background: var(--yellow);
    color: var(--brown);
    font-size: 15.5px;
    line-height: 1.6;
}

.lp-legal-title {
    margin: 26px 0 0;
    font-family: var(--head);
    font-weight: 800;
    font-size: clamp(36px, 5.4vw, 60px);
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--dark);
    hyphens: auto;
}

.lp-legal-lead {
    margin: 14px 0 0;
    font-size: 18px;
    line-height: 1.55;
    color: var(--mid);
}

.lp-legal-block {
    margin-top: 18px;
    padding: 24px 26px;
    border-radius: 18px;
    background: var(--card);
}

.lp-legal-block h2 {
    margin: 0 0 12px;
    font-family: var(--head);
    font-weight: 700;
    font-size: 21px;
    color: var(--dark);
}

.lp-legal-block h3 {
    margin: 22px 0 8px;
    font-family: var(--head);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--dark);
}

.lp-legal-block h3:first-of-type {
    margin-top: 16px;
}

.lp-legal-block p,
.lp-legal-block ul {
    margin: 0 0 12px;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--mid);
}

.lp-legal-block ul {
    padding-left: 20px;
}

.lp-legal-block li {
    margin-bottom: 6px;
}

.lp-legal-block p:last-child,
.lp-legal-block ul:last-child {
    margin-bottom: 0;
}

.lp-legal-block strong {
    color: var(--dark);
}

.lp-legal-block code {
    padding: 2px 6px;
    border-radius: 6px;
    background: var(--line-soft);
    font-size: 14.5px;
}

.lp-legal-note {
    padding: 14px 16px;
    border-radius: 12px;
    background: var(--line-soft);
    font-size: 15.5px !important;
}

.lp-legal-stand {
    margin-top: 24px;
    font-size: 14px;
    color: var(--mid);
}

/* --- Hinweis zur Reichweitenmessung ---------------------------------------
   Liegt fest am unteren Rand, nimmt aber nicht den ganzen Schirm ein: die
   Seite bleibt lesbar und bedienbar, auch wenn jemand gar nicht entscheiden
   will. Kein Overlay, keine Sperre – ein Banner, das die Seite blockiert,
   waere Druck und damit keine freiwillige Einwilligung. */

.lp-consent {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 60;
    padding: 0 16px 16px;
    animation: lp-consent-in 220ms ease-out;
}

@keyframes lp-consent-in {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
}

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

.lp-consent-inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px 32px;
    max-width: 1120px;
    margin: 0 auto;
    padding: 22px 26px;
    border: 1px solid var(--brown-mid);
    border-radius: 20px;
    background: var(--card-lit);
    box-shadow: 0 18px 44px rgba(0, 0, 0, .34);
}

.lp-consent-copy {
    flex: 1 1 420px;
}

.lp-consent-title {
    margin: 0 0 8px;
    font-family: var(--head);
    font-size: 19px;
    color: var(--dark);
}

.lp-consent-copy p {
    margin: 0;
    max-width: 68ch;
    color: var(--mid);
    font-size: 14px;
    line-height: 1.6;
}

.lp-consent-details {
    margin-top: 12px;
    font-size: 13.5px;
    color: var(--mid);
}

.lp-consent-details summary {
    cursor: pointer;
    color: var(--rust-dark);
    font-weight: 600;
}

.lp-consent-details ul {
    margin: 10px 0 0;
    padding-left: 20px;
    line-height: 1.6;
}

.lp-consent-details li {
    margin-bottom: 5px;
}

.lp-consent-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 0 1 auto;
}

/* Beide Knoepfe gleich gross, gleich gefaerbt, gleich weit vorn. Wer ablehnt,
   soll nicht suchen muessen. */
.lp-consent-btn {
    min-width: 168px;
    padding: 12px 22px;
    border: 1px solid var(--dark);
    border-radius: 999px;
    background: var(--dark);
    color: var(--paper);
    font: inherit;
    font-size: 14.5px;
    font-weight: 600;
    cursor: pointer;
}

.lp-consent-btn:hover {
    background: var(--rust);
    border-color: var(--rust);
}

.lp-consent-btn:focus-visible {
    outline: 2px solid var(--rust);
    outline-offset: 3px;
}

.lp-consent-link {
    font-size: 13.5px;
    color: var(--mid);
}

.lp-consent-actions.is-page {
    margin: 18px 0 6px;
}

/* Stand auf der Seite /einwilligung/ */
.lp-consent-state {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 10px;
}

.lp-consent-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.lp-consent-badge.is-on {
    background: var(--yellow);
    color: var(--brown);
}

.lp-consent-badge.is-off {
    background: var(--dark);
    color: var(--paper);
}

.lp-legal-note {
    color: var(--mid);
    font-size: 14px;
}

@media (max-width: 760px) {
    .lp-consent-inner {
        padding: 18px;
        border-radius: 16px;
    }

    .lp-consent-actions {
        width: 100%;
    }

    .lp-consent-btn {
        flex: 1 1 140px;
        min-width: 0;
    }
}

/* ---------- Weniger Bewegung ---------- */
/*
 * Schaltet sämtliche Bewegung ab, ohne dass ein Inhalt verschwindet: die
 * Auftritte stehen sofort da, das Logoband steht still, der Laufweg entfällt.
 */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

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

    .lp-reveal { opacity: 1; transform: none; }
    .lp-hero-title .lp-line > span { transform: none; }
    .lp-belt-row { animation: none; }
    .lp-rail { display: none; }
}