/*
 * Startseiten-Header (nur auf „/“ eingebunden).
 * Endzustand ist der Standard (ohne JS / reduzierte Bewegung). Das Intro wird über
 * html[data-hh-intro="full|short"] aktiviert und startet mit .hh-go.
 * Animiert werden ausschließlich transform und opacity.
 */

.hh {
    --hh-ink: #0d0c11;
    --hh-red: #e3182d;
    position: relative;
    isolation: isolate;
    align-items: center;
    min-height: clamp(640px, calc(100svh - 56px), 900px);
    padding: 96px 0 110px;
    background-color: #111216;
}

.hh::before,
.hh::after {
    display: none;
}

.hh-scene {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    container-type: size;
}

.hh-stage {
    --hh-sw: max(124cqw, 199.2cqh);
    position: absolute;
    top: calc(58cqh - var(--hh-sw) * .3516);
    left: calc(62cqw - var(--hh-sw) / 2);
    width: var(--hh-sw);
    aspect-ratio: 16 / 9;
}

/* Ebenen im Hero (von unten): Welt (0), Boden-Kante (1), Figur mit Mario (2). Die Bühne selbst
   bildet keinen eigenen Stapelkontext, damit die Kante zwischen Welt und Mario liegen kann. */
.hh-world {
    z-index: 0;
}

.hh-scene::after {
    content: "";
    position: absolute;
    z-index: 1;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 96px;
    pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 150' preserveAspectRatio='none'%3E%3Cpath d='M0,150 L1200,150 L1200,0 Q600,100 0,0 Z' fill='%231b1a23'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

.hh-fig {
    z-index: 2;
}

.hh-world,
.hh-fig {
    position: absolute;
    inset: 0;
    transition: transform .9s cubic-bezier(.2, .7, .2, 1);
}

.hh-world {
    transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -5px), 0) scale(1.012);
}

.hh-fig {
    transform: translate3d(calc(var(--mx, 0) * 12px), calc(var(--my, 0) * 7px), 0);
}

.hh-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hh-curtain {
    position: absolute;
    inset: 0;
    background: var(--hh-ink);
    opacity: 0;
}

.hh-covers {
    position: absolute;
    inset: 0;
}

.hh-shard {
    position: absolute;
    left: var(--l);
    top: var(--t);
    width: var(--w);
    height: var(--h);
    background-image: var(--hh-art);
    background-position: var(--bp);
    background-size: var(--bs);
    background-repeat: no-repeat;
}

.hh-dim {
    position: absolute;
    inset: 0;
    background: rgba(13, 12, 17, .66);
}

.hh-sweep {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.hh-sweep::before {
    content: "";
    position: absolute;
    top: -10%;
    bottom: -10%;
    left: 0;
    width: 22%;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .22) 50%, rgba(255, 255, 255, 0) 100%);
    opacity: 0;
    transform: translateX(-120%) skewX(-12deg);
}

.hh-glow {
    position: absolute;
    left: 27%;
    top: 28%;
    width: 46%;
    height: 66%;
    background: none;
    opacity: 0;
}

.hh-mario {
    position: absolute;
    left: 42.5391%;
    top: 40%;
    width: 15.7031%;
    height: 60%;
    filter: drop-shadow(0 0 2.4cqw rgba(13, 12, 17, .55)) drop-shadow(0 1.6cqw 1.4cqw rgba(0, 0, 0, .45));
    transform-origin: 50% 100%;
    z-index: 5;
}

/* Sprechblase */
.hh-bubble {
    position: absolute;
    --hh-bw: clamp(250px, 21vw, 330px);
    left: min(59.2%, calc(38cqw + var(--hh-sw) / 2 - var(--hh-bw) - 16px));
    bottom: 51%;
    z-index: 1;
    width: var(--hh-bw);
    padding: 16px 20px 17px;
    border-radius: 22px;
    background: #fff;
    color: #1b1a23;
    box-shadow: 0 22px 45px rgba(0, 0, 0, .45), 0 0 0 4px rgba(227, 24, 45, .22);
    font-family: Barlow, ui-sans-serif, system-ui, sans-serif;
    text-align: left;
    transform-origin: 6% 110%;
}

.hh-bubble::after {
    content: "";
    position: absolute;
    left: 6px;
    bottom: -20px;
    width: 34px;
    height: 26px;
    background: #fff;
    clip-path: polygon(0 100%, 32% 0, 100% 0);
}

.hh-bubble__title {
    margin: 0;
    font-size: clamp(1.02rem, 1.2vw, 1.2rem);
    font-weight: 800;
    line-height: 1.2;
}

.hh-bubble__welcome {
    display: block;
}

.hh-bubble__title [data-hero-greeting] {
    color: var(--hh-red);
}

.hh-bubble__line {
    min-height: 3.9em;
    margin: .45rem 0 0;
    font-size: .95rem;
    line-height: 1.3;
    color: #3d3b47;
    transition: opacity .35s ease, transform .35s ease;
}

.hh-bubble__line.is-leaving {
    opacity: 0;
    transform: translateY(6px);
}

.hh-bubble__line a {
    color: #c4111f;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    white-space: nowrap;
    pointer-events: auto;
}

.hh-bubble__line a:hover {
    color: #8f0b16;
}

.hh-bubble a:focus-visible {
    outline: 3px solid var(--hh-red);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Abdunklung liegt jetzt in .hh-dim (unter Mario), damit er nicht abgedunkelt wird. */
.hh-shade {
    display: none;
}

/* Inhalt */
.hh-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    text-align: left;
}

.hh-content > * {
    max-width: min(560px, 42vw);
}

.hh-title {
    letter-spacing: .01em;
    text-shadow: 0 6px 0 rgba(0, 0, 0, .35);
}

/* Intro: erst mit .hh-go starten (Bild geladen oder Zeitlimit erreicht) */
html[data-hh-intro]:not(.hh-go) .hh-scene *,
html[data-hh-intro]:not(.hh-go) .hh-scene *::before {
    animation-play-state: paused !important;
}

html[data-hh-intro="full"] .hh-curtain {
    animation: hh-curtain-out 1s ease 1.4s both;
}

html[data-hh-intro="full"] .hh-shard {
    animation: hh-shard-in 1.15s cubic-bezier(.22, 1.15, .36, 1) var(--d) both;
}

html[data-hh-intro="full"] .hh-sweep::before {
    animation: hh-sweep 1.4s ease-in-out 1.35s both;
}

html[data-hh-intro="full"] .hh-glow {
    animation: hh-fade-in 1.1s ease .85s both, hh-glow-pulse 5s ease-in-out 3s infinite alternate;
}

html[data-hh-intro="full"] .hh-mario {
    animation: hh-mario-in 1.15s cubic-bezier(.3, .7, .3, 1) .65s both;
}

html[data-hh-intro="full"] .hh-bubble {
    animation: hh-pop .65s cubic-bezier(.34, 1.56, .64, 1) 1.75s both;
}

html[data-hh-intro="full"] .hh-title {
    animation: hh-title-in 1s cubic-bezier(.2, .8, .2, 1) .1s both;
}

html[data-hh-intro="full"] .hh-subtitle {
    animation: hh-rise .7s ease 1.2s both;
}

html[data-hh-intro="full"] .hh-text {
    animation: hh-rise .7s ease 1.38s both;
}

html[data-hh-intro="full"] .hh-cta {
    animation: hh-rise .7s ease 1.56s both;
}

html[data-hh-intro="full"]:not(.hh-done) .hh-shard,
html[data-hh-intro="full"]:not(.hh-done) .hh-mario {
    will-change: transform, opacity;
}

html[data-hh-intro="short"] .hh-curtain {
    animation: hh-curtain-out .5s ease both;
}

html[data-hh-intro="short"] .hh-fig {
    animation: hh-fade-in .5s ease both;
}

html[data-hh-intro="short"] .hh-bubble {
    animation: hh-pop .45s cubic-bezier(.34, 1.56, .64, 1) .25s both;
}

html[data-hh-intro="short"] .hh-glow {
    animation: hh-glow-pulse 5s ease-in-out 1s infinite alternate;
}

html[data-hh-intro="short"] .hh-subtitle,
html[data-hh-intro="short"] .hh-text,
html[data-hh-intro="short"] .hh-cta {
    animation: hh-rise .5s ease both;
}

@keyframes hh-curtain-out {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes hh-fade-in {
    from { opacity: 0; }
}

@keyframes hh-shard-in {
    0% { opacity: 0; transform: translate(var(--fx), var(--fy)) rotate(var(--r)) scale(.5); }
    30% { opacity: 1; }
    100% { opacity: 1; transform: none; }
}

@keyframes hh-sweep {
    0% { opacity: 0; transform: translateX(-120%) skewX(-12deg); }
    15% { opacity: 1; }
    85% { opacity: 1; }
    100% { opacity: 0; transform: translateX(480%) skewX(-12deg); }
}

@keyframes hh-mario-in {
    0% { opacity: 0; transform: translateY(42%) scale(.82); }
    35% { opacity: 1; }
    62% { transform: translateY(-3.5%) scale(1.035); }
    80% { transform: translateY(1%) scale(.995); }
    100% { opacity: 1; transform: none; }
}

@keyframes hh-pop {
    0% { opacity: 0; transform: scale(.3) rotate(-6deg); }
    100% { opacity: 1; transform: none; }
}

@keyframes hh-title-in {
    from { transform: translateY(26px) scale(.97); }
}

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

@keyframes hh-glow-pulse {
    from { opacity: .85; }
    to { opacity: .55; }
}

/* Tablet & Smartphone: Text oben, Mario darunter, Sprechblase über seiner Mütze */
@media (max-width: 1023px) {
    .hh {
        --hh-sh: min(200vw, 820px);
        align-items: flex-start;
        min-height: 0;
        padding: 40px 0 calc(var(--hh-sh) * .48 + 180px);
    }

    .hh-stage {
        --hh-sh: min(200cqw, 820px);
        top: auto;
        bottom: calc(var(--hh-sh) * -.128);
        left: calc(50cqw - var(--hh-sh) * .8889);
        width: calc(var(--hh-sh) * 1.7778);
        height: var(--hh-sh);
    }

    .hh-bubble {
        left: 50%;
        bottom: 64%;
        width: min(340px, calc(100cqw - 32px));
        margin-left: calc(min(340px, calc(100cqw - 32px)) / -2);
        padding: 13px 16px 14px;
        border-radius: 18px;
        transform-origin: 42% 115%;
    }

    .hh-bubble::after {
        left: calc(42% - 12px);
        bottom: -18px;
        width: 28px;
        height: 20px;
        clip-path: polygon(50% 100%, 0 0, 100% 0);
    }

    .hh-bubble__title {
        font-size: 1.05rem;
    }

    .hh-world::after {
        content: "";
        position: absolute;
        top: -1px;
        left: 0;
        right: 0;
        height: 16%;
        background: #121117;
    }

    .hh-bubble__line {
        min-height: 2.6em;
        font-size: .9rem;
    }

    .hh-dim {
        background: rgba(13, 12, 17, .71);
    }

    .hh-content {
        max-width: 720px;
        padding: 0 20px;
        text-align: center;
    }

    .hh-content > * {
        max-width: none;
        margin-left: auto;
        margin-right: auto;
    }

    .hh-title {
        margin-bottom: .75rem;
    }

    .hh-subtitle {
        margin-bottom: 1rem;
    }

    .hh-text {
        margin-bottom: 1.25rem;
        font-size: 1.02rem;
    }

    .hh-world,
    .hh-fig {
        transform: none;
        transition: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hh *,
    .hh *::before,
    .hh *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* Startseite: "Trete unserer Community bei!" (#front-doublebox) */
.join-head {
    margin: 0 auto 2.5rem;
    max-width: 60rem;
}

.join-grid {
    display: grid;
    gap: 1.75rem;
    margin: 0 auto;
    max-width: 62rem;
}

@media (min-width: 900px) {
    .join-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.join-section {
    isolation: isolate;
    overflow: hidden;
    position: relative;
}

.join-section::before,
.join-section::after {
    content: "";
    inset: -50% 0 0;
    pointer-events: none;
    position: absolute;
    z-index: -1;
}

.join-section::before,
.join-section::after {
    display: none;
}

@keyframes join-stars {
    to { transform: translateY(200px); }
}

.join-grid {
    gap: 2rem;
    max-width: 66rem;
}

.join-card {
    --jc: #df2020;
    --jc-dark: #8e1515;
    --jc-glow: rgba(223, 32, 32, .45);
    background: #1b1a23;
    border: 2px solid var(--jc);
    border-radius: 1.75rem;
    box-shadow: 0 6px 0 var(--jc-dark), none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    transition: translate .2s ease, box-shadow .2s ease;
}

.join-card--blue {
    --jc: #2f7bff;
    --jc-dark: #1a4aa6;
    --jc-glow: rgba(47, 123, 255, .45);
}

.join-card::before {
    background: var(--jc);
    content: "";
    height: 6px;
    inset: 0 0 auto;
    position: absolute;
    z-index: 2;
}

.join-card:hover {
    box-shadow: 0 10px 0 var(--jc-dark);
    translate: 0 -8px;
}

.join-card__media {
    background-position: center;
    background-size: cover;
    height: 13rem;
    margin: 1.1rem 1.1rem 0;
    border-radius: 1.1rem;
    overflow: hidden;
    position: relative;
}

.join-card__media::before {
    background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 2px, transparent 2px 4px);
    content: "";
    inset: 0;
    position: absolute;
    z-index: 1;
}

.join-card__media::after {
    background: none;
    content: "";
    inset: 0;
    position: absolute;
}

.join-card__media {
    transition: background-size .4s ease;
}

.join-card:hover .join-card__media {
    background-size: 108%;
}

.join-card__icon {
    align-items: center;
    background: var(--jc);
    border: 3px solid #17161e;
    border-radius: 1.1rem;
    box-shadow: 0 4px 0 var(--jc-dark);
    color: #fff;
    display: flex;
    font-size: 1.7rem;
    height: 4rem;
    justify-content: center;
    left: 2rem;
    position: absolute;
    top: 11.4rem;
    width: 4rem;
    z-index: 3;
}

.join-card:hover .join-card__icon {
    animation: join-bob .6s ease-in-out;
}

@keyframes join-bob {
    50% { transform: translateY(-6px) rotate(-6deg); }
}

.join-card__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .6rem;
    padding: 2.75rem 2rem 2rem;
}

.join-card__title {
    color: #fff;
    font-size: 1.7rem;
    font-weight: 800;
    line-height: 1.2;
    margin: 0;
}

.join-card__text {
    color: #b4b4bd;
    flex: 1;
    font-size: 1.05rem;
    margin: 0 0 1rem;
}

.join-card__cta {
    align-self: flex-start;
}

.join-card--blue .join-card__cta {
    background: #2f7bff;
    border-color: #1a4aa6;
    box-shadow: 0 4px 0 #1a4aa6;
}

@media (max-width: 520px) {
    .join-card__cta {
        align-self: stretch;
        text-align: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .join-section::before,
    .join-card:hover .join-card__icon {
        animation: none;
    }

    .join-card:hover {
        translate: none;
    }
}

/* ==========================================================================
   CRT-Fernseher (Community-Sektion)
   ========================================================================== */
.crt-tv { max-width: 46rem; margin: 0 auto; }
.crt-tv__bezel {
    padding: 1.5rem 1.5rem 1rem;
    border-radius: 2rem;
    background: #2a2931;
    box-shadow: inset 0 2px 0 rgba(255,255,255,.12), inset 0 -4px 0 rgba(0,0,0,.45), 0 8px 0 #0e0d12;
    border: 1px solid #0e0d12;
}
.crt-tv__screen {
    position: relative;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    display: flex; align-items: center; justify-content: center;
    border-radius: 2.5rem / 2rem;
    background: radial-gradient(ellipse at center, #1f2630 0%, #121820 60%, #07090c 100%);
    box-shadow: inset 0 0 0 3px #0b0a10, inset 0 0 60px rgba(0,0,0,.85), inset 0 0 120px rgba(0,0,0,.5), 0 0 0 3px #2d2c34;
    isolation: isolate;
}
.crt-tv__screen::before {
    content: "";
    position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background:
        repeating-linear-gradient(to bottom, rgba(0,0,0,.28) 0, rgba(0,0,0,.28) 1px, transparent 1px, transparent 3px),
        repeating-linear-gradient(to right, rgba(255,255,255,.03) 0, rgba(255,255,255,.03) 1px, transparent 1px, transparent 3px);
}
.crt-tv__screen::after {
    content: "";
    position: absolute; inset: 0; z-index: 4; pointer-events: none;
    border-radius: inherit;
    background:
        radial-gradient(ellipse at 30% 12%, rgba(255,255,255,.14) 0, transparent 45%),
        radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.6) 100%);
}
.crt-tv__content {
    position: relative; z-index: 2;
    width: 100%;
    padding: 2rem 2.5rem;
    text-align: center;
    text-shadow: 0 0 6px rgba(200,220,255,.4);
    animation: crt-tv-flicker 4s steps(1) infinite;
}
.crt-tv__icon {
    width: 5rem; height: 5rem; margin: 0 auto 1.5rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 1rem;
    background: rgba(223,32,32,.35);
    box-shadow: 0 0 22px rgba(255,70,60,.55);
}
.crt-tv__content .bign-btn-cta { text-shadow: none; }
.crt-tv__panel { display: flex; align-items: center; justify-content: flex-end; gap: 1rem; padding: .9rem .5rem 0; }
.crt-tv__led { width: .7rem; height: .7rem; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 8px #ff3b30, 0 0 16px rgba(255,59,48,.6); margin-right: auto; }
.crt-tv__grille { width: 7rem; height: 1.1rem; border-radius: .3rem; background: repeating-linear-gradient(to right, #0b0a10 0, #0b0a10 3px, #2a2931 3px, #2a2931 6px); box-shadow: inset 0 1px 2px rgba(0,0,0,.8); }
.crt-tv__knob { width: 1.8rem; height: 1.8rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b5a63, #26252c 70%); box-shadow: 0 2px 0 #0b0a10, inset 0 1px 0 rgba(255,255,255,.2); position: relative; }
.crt-tv__knob::after { content: ""; position: absolute; left: 50%; top: 12%; width: 2px; height: 32%; background: #c9c8d0; transform: translateX(-50%); }
.crt-tv__knob:nth-of-type(2) { transform: rotate(35deg); }
.crt-tv__feet { display: flex; justify-content: space-between; padding: 0 3rem; }
.crt-tv__feet span { width: 4rem; height: .6rem; border-radius: 0 0 .5rem .5rem; background: #121117; }
@keyframes crt-tv-flicker { 0%, 100% { opacity: 1; } 92% { opacity: .96; } 94% { opacity: 1; } 97% { opacity: .97; } }
@media (max-width: 640px) {
    .crt-tv__bezel { padding: 1rem .8rem .7rem; border-radius: 1.4rem; }
    .crt-tv__screen { aspect-ratio: auto; min-height: 20rem; }
    .crt-tv__content { padding: 2rem 1rem; }
    .crt-tv__grille { width: 4rem; }
    .crt-tv__feet { padding: 0 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .crt-tv__content { animation: none; } }

/* ===== Home: Ueber uns als kompakter Magazin-Aufmacher (.mag-front) =====
   Zwei Spalten: Text + Buttons links, Cover rechts; mobil gestapelt. Runde Ecken wie im Rest der Seite. */
.mag-front { --mf-line: #2c2b36; --mf-ink: #f4f4f7; --mf-dim: #b8b8c4; }
.mag-front__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "cover" "body";
    gap: 1.5rem;
    max-width: 64rem;
    margin: 0 auto;
}
.mag-front__head { grid-area: head; }
.mag-front__title {
    margin: 0;
    padding-bottom: .9rem;
    border-bottom: 1px solid var(--mf-line);
    font-size: clamp(2rem, 6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.01em;
    text-transform: uppercase;
    color: var(--mf-ink);
    overflow-wrap: anywhere;
}
.mag-front__body { grid-area: body; min-width: 0; }
.mag-front__lead p, .mag-front__text p { margin: 0; }
.mag-front__lead { margin-bottom: 1rem; font-size: 1.1rem; font-weight: 600; line-height: 1.55; color: var(--mf-ink); }
.mag-front__text { margin-bottom: .85rem; font-size: 1rem; line-height: 1.6; color: var(--mf-dim); }
/* Buttons: ab 480px nebeneinander in einer Zeile mit gleicher Höhe, darunter gestapelt in voller Breite. */
.mag-front__actions { display: flex; flex-wrap: wrap; align-items: stretch; gap: .75rem 1rem; margin-top: 1.5rem; }
.mag-front__actions > a { flex: 1 1 100%; min-width: 0; justify-content: center; text-align: center; padding: .95rem 1.4rem; font-size: .9rem; line-height: 1.3; }
@media (min-width: 480px) {
    .mag-front__actions { flex-wrap: nowrap; }
    .mag-front__actions > a { flex: 0 1 auto; }
}
.mag-front__cover { grid-area: cover; justify-self: center; width: 100%; max-width: 15rem; margin: 0; }
.mag-front__cover img { display: block; width: 100%; height: auto; border-radius: .75rem; box-shadow: 0 18px 40px rgba(0, 0, 0, .45); }

/* Zwei Spalten erst ab 1024px, damit die Textspalte breit genug für beide Buttons in einer Zeile ist. */
@media (min-width: 1024px) {
    .mag-front__grid {
        grid-template-columns: minmax(0, 1fr) minmax(14rem, 20rem);
        grid-template-areas: "head cover" "body cover";
        grid-template-rows: auto 1fr;
        max-width: 72rem;
        column-gap: 3.5rem;
        row-gap: 1.25rem;
        align-items: start;
    }
    .mag-front__cover { max-width: none; justify-self: end; }
}
/* ===== /Home: Ueber uns ===== */

/* ==========================================================================
   Redbox: Retro-Extras (OSD, Power-on, Rolling Band, Pixel-Deko)
   ========================================================================== */
.rb-stage { position: relative; }
.crt-tv { position: relative; z-index: 1; }
.crt-tv__knob { cursor: pointer; transition: transform .35s cubic-bezier(.3,1.5,.5,1); }
.crt-tv__knob:hover { filter: brightness(1.3); }
.crt-tv__beam { position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1px; z-index: 5; background: #fff; box-shadow: 0 0 14px 3px rgba(255,255,255,.8); opacity: 0; pointer-events: none; }
.crt-tv__roll { position: absolute; left: 0; right: 0; top: 0; height: 22%; z-index: 3; pointer-events: none; background: linear-gradient(to bottom, transparent, rgba(255,255,255,.07), transparent); animation: crt-tv-roll 7s linear infinite; }
.crt-tv__osd { position: absolute; z-index: 5; pointer-events: none; font-family: "Press Start 2P", "Courier New", monospace; font-size: .7rem; letter-spacing: .08em; color: #5dff7a; text-shadow: 0 0 6px rgba(93,255,122,.8), 2px 2px 0 rgba(0,40,0,.8); line-height: 1; }
.crt-tv__osd--ch { top: 1rem; left: 1.2rem; }
.crt-tv__osd--av { top: 1rem; right: 1.2rem; }
.crt-tv__osd i { font-style: normal; margin-left: .6rem; animation: crt-tv-blink 1.1s steps(1) infinite; }
.crt-tv__screen.is-static::before { background: repeating-linear-gradient(to bottom, rgba(0,0,0,.3) 0, rgba(0,0,0,.3) 1px, transparent 1px, transparent 3px), repeating-conic-gradient(#fff 0 25%, #222 0 50%) 0 0 / 5px 5px; opacity: .85; }
.crt-tv__screen.is-static .crt-tv__content { opacity: .15; }
.crt-tv--on .crt-tv__content { animation: crt-tv-on 1s cubic-bezier(.2,.7,.2,1) 1, crt-tv-flicker 4s steps(1) 1s infinite; }
.crt-tv--on .crt-tv__beam { animation: crt-tv-beam 1s ease-out 1; }
.crt-tv--on .crt-tv__osd { animation: crt-tv-blinkin 1.2s steps(1) 1; }
@keyframes crt-tv-on { 0% { transform: scale(0, .01); filter: brightness(5); opacity: 1; } 35% { transform: scale(1, .01); filter: brightness(4); } 70% { transform: scale(1, 1.06); filter: brightness(2); } 100% { transform: none; filter: none; } }
@keyframes crt-tv-beam { 0% { opacity: 1; transform: scaleX(0); } 35% { opacity: 1; transform: scaleX(1); } 55% { opacity: 0; } 100% { opacity: 0; } }
@keyframes crt-tv-blinkin { 0%, 60% { opacity: 0; } 70% { opacity: 1; } 80% { opacity: 0; } 100% { opacity: 1; } }
@keyframes crt-tv-roll { 0% { transform: translateY(-120%); } 100% { transform: translateY(560%); } }
@keyframes crt-tv-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0; } }

@media (max-width: 640px) { .crt-tv__osd { font-size: .5rem; top: .6rem; } .crt-tv__osd--ch { left: .7rem; } .crt-tv__osd--av { right: .7rem; } .crt-tv__osd i { display: none; } }
@media (prefers-reduced-motion: reduce) { .crt-tv__roll, .crt-tv__osd i { animation: none !important; } .crt-tv__roll { display: none; } }

/* ==========================================================================
   Startseite: Nintendo-Sektionen (ein System, je Sektion eine Akzentfarbe)
   Welt-Label (HUD), Pixel-Rahmen, Controller-Buttons, Pixel-Trenner.
   Hintergründe bleiben neutrale Grau-Verläufe; Akzente nur in kleinen Elementen.
   ========================================================================== */
:root {
    --crt-scanlines: repeating-linear-gradient(to bottom, rgba(255, 255, 255, .025) 0 2px, transparent 2px 6px);
    --px-grid: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 16px 16px, linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 16px 16px;
    --px-line: #3b3a47;
}

#front-introduction, #front-podcast, #front-community, #front-blog, #front-doublebox {
    --sx: #df2020;
    position: relative;
    background-color: transparent;
    border-top: 0;
    padding-top: 4.5rem;
    padding-bottom: 4.5rem;
}

#front-introduction { --sx: #df2020; background: linear-gradient(to bottom, #1b1a23, #17161e); padding-top: 3.5rem; padding-bottom: 3.5rem; }
#front-podcast { --sx: #f5b800; background: var(--crt-scanlines), repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 12px, transparent 12px 24px), linear-gradient(to bottom, #100f15, #1a1922); }
#front-community { --sx: #43d05a; background: var(--crt-scanlines), linear-gradient(135deg, #25242d, #2b2a34 55%, #25242d); }
#front-blog { --sx: #4a86e8; background: var(--crt-scanlines), var(--px-grid), linear-gradient(to bottom, #100f15, #15141b); }
#front-doublebox { --sx: #df2020; background: var(--crt-scanlines), repeating-linear-gradient(135deg, rgba(255, 255, 255, .02) 0 12px, transparent 12px 24px), linear-gradient(to bottom, #15141b, #1b1a23); }

/* Sektionstrenner (statisch, keine Animation): feine Grundlinie, sanfter Lichtbogen in der
   Sektionsfarbe (::after) und eine kleine abgerundete Lasche in der Mitte (::before).
   Keine Transforms, Filter oder Keyframes: stabil beim Scrollen und bei Display-Skalierung. */
#front-introduction, #front-podcast, #front-community, #front-blog, #front-doublebox { border-top: 1px solid #2c2b36; }
#front-introduction::before, #front-podcast::before, #front-community::before, #front-blog::before, #front-doublebox::before {
    content: "";
    display: block;
    position: absolute;
    z-index: 11;
    top: -1px;
    left: 0;
    right: 0;
    width: 96px;
    height: 8px;
    margin: 0 auto;
    border-radius: 0 0 999px 999px;
    background: var(--sx);
    box-shadow: none;
    clip-path: none;
    pointer-events: none;
    opacity: 1;
    animation: none;
    transform: none;
}
#front-introduction::after, #front-podcast::after, #front-community::after, #front-blog::after, #front-doublebox::after {
    content: "";
    position: absolute;
    z-index: 10;
    top: -1px;
    left: 0;
    right: 0;
    height: 48px;
    pointer-events: none;
    background:
        linear-gradient(90deg, transparent 0, var(--sx) 35%, var(--sx) 65%, transparent 100%) 50% 0 / min(48rem, 100%) 1px no-repeat,
        radial-gradient(50% 100% at 50% 0, color-mix(in srgb, var(--sx) 18%, transparent), transparent 100%) 50% 0 / min(48rem, 100%) 100% no-repeat;
    opacity: .8;
}
@media (max-width: 640px) {
    #front-introduction::before, #front-podcast::before, #front-community::before, #front-blog::before, #front-doublebox::before { width: 72px; height: 6px; }
}

#front-community .sec-title::after, #front-introduction .sec-title::after,
#front-podcast .sec-title::after, #front-blog .sec-title::after, #front-doublebox .sec-title::after { display: none; }

/* Podcast-Player und Einwilligungsfeld: runde Ecken und weicher Schatten wie auf bign-club.de. */
#front-podcast .bign-podcast-player, #front-podcast .consent-placeholder {
    border: 1px solid hsla(0, 0%, 100%, .12);
    border-radius: 1.1rem;
    box-shadow: 0 16px 36px rgba(15, 15, 22, .45);
}
/* Mitgliedschaftskarten: Rundung wie auf bign-club.de (rounded-3xl). */
.join-card { border-radius: 1.5rem; }

/* Controller-Buttons: Pille mit Glanzkante, versenkt beim Drücken. */
#front-introduction .bign-btn-cta, #front-podcast .bign-btn-cta, #front-community .bign-btn-cta,
#front-blog .bign-btn-cta, #front-doublebox .bign-btn-cta {
    border-radius: 999px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 5px 0 #8e1515;
}
#front-doublebox .join-card--blue .join-card__cta { box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 5px 0 #1a4aa6; }
#front-introduction .bign-btn-cta:active, #front-podcast .bign-btn-cta:active, #front-community .bign-btn-cta:active,
#front-blog .bign-btn-cta:active, #front-doublebox .bign-btn-cta:active { translate: 0 4px; box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 1px 0 #8e1515; }
#front-introduction a:focus-visible, #front-podcast a:focus-visible, #front-community a:focus-visible,
/* Ghost-Variante auf der Startseite: gleiche Pillenform, Kontur statt roter 3D-Kante. */
#front-introduction .bign-btn-cta--ghost, #front-podcast .bign-btn-cta--ghost, #front-community .bign-btn-cta--ghost,
#front-blog .bign-btn-cta--ghost, #front-doublebox .bign-btn-cta--ghost { box-shadow: inset 0 0 0 2px hsla(0, 0%, 100%, .35); }
#front-introduction .bign-btn-cta--ghost:hover, #front-podcast .bign-btn-cta--ghost:hover, #front-community .bign-btn-cta--ghost:hover,
#front-blog .bign-btn-cta--ghost:hover, #front-doublebox .bign-btn-cta--ghost:hover { box-shadow: inset 0 0 0 2px #df2020; }
#front-introduction .bign-btn-cta--ghost:active, #front-podcast .bign-btn-cta--ghost:active, #front-community .bign-btn-cta--ghost:active,
#front-blog .bign-btn-cta--ghost:active, #front-doublebox .bign-btn-cta--ghost:active { translate: 0 1px; box-shadow: inset 0 0 0 2px #df2020; }
#front-blog a:focus-visible, #front-doublebox a:focus-visible, #front-podcast button:focus-visible { outline: 3px solid #ffd84d; outline-offset: 3px; }

/* --- Podcast: Überschrift links, Einwilligungs-Platzhalter mit rundem Icon --- */
#front-podcast .sec-title, #front-podcast .sec-title p { text-align: left; margin-left: 0; }
#front-podcast .sec-title .bign-rich-text, #front-podcast .sec-title p { margin-left: 0; margin-right: auto; text-align: left; }
#front-podcast .sec-title { margin-bottom: 1.75rem; }
#front-podcast .consent-gate { margin: 0; }
#front-podcast .consent-placeholder {
    position: relative;
    display: grid;
    grid-template-columns: 4.5rem 1fr;
    gap: .35rem 1.25rem;
    align-items: start;
    margin: 0;
    padding: 1.5rem 1.5rem 1.4rem;
    background:
        linear-gradient(135deg, #24232c, #1b1a23);
}
#front-podcast .consent-placeholder::before {
    content: "\f2ce";
    font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", sans-serif;
    font-weight: 900;
    grid-row: 1 / span 4;
    display: flex; align-items: center; justify-content: center;
    width: 4.5rem; height: 4.5rem;
    margin-top: .5rem;
    font-size: 1.9rem;
    color: #1b1a23;
    background: #f5b800;
    border-radius: 1rem;
    box-shadow: inset 0 -3px 0 #c98a00, 0 6px 14px rgba(0, 0, 0, .35);
}
#front-podcast .consent-placeholder > * { grid-column: 2; }
#front-podcast .consent-placeholder p { margin: .5rem 0 0; color: #d4d4de; line-height: 1.5; }
#front-podcast .consent-placeholder .consent-placeholder__source { margin-top: 0; font-family: Nintendoid1, monospace; font-size: .62rem; letter-spacing: .15em; color: #b8b8c4; text-transform: uppercase; }
#front-podcast .consent-placeholder form { margin-top: .6rem; }
#front-podcast .consent-placeholder .consent-button--primary {
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-weight: 800;
    box-shadow: inset 0 3px 0 rgba(255, 255, 255, .28), 0 5px 0 #8e1515;
}
#front-podcast .consent-placeholder a { color: #ffb4b4; }
@media (max-width: 560px) {
    #front-podcast .consent-placeholder { grid-template-columns: 1fr; }
    #front-podcast .consent-placeholder::before { grid-row: auto; width: 3.5rem; height: 3.5rem; margin: 0 0 .5rem; font-size: 1.5rem; }
    #front-podcast .consent-placeholder > * { grid-column: 1; }
}

/* --- Community: Überschrift lesbar, Fließtext in Fließschrift --- */
#front-community .sec-title h2 {
    font-family: Nintendoid1, monospace;
    font-size: clamp(1.4rem, 4.2vw, 2.4rem);
    font-weight: 400;
    line-height: 1.3;
    letter-spacing: .05em;
    hyphens: none;
    -webkit-hyphens: none;
    text-shadow: 3px 3px 0 rgba(0, 0, 0, .55);
}
#front-community .sec-title p, #front-community .sec-title .bign-rich-text {
    max-width: 40rem;
    margin: 1.1rem auto 0;
    font-family: inherit;
    font-size: 1.1rem;
    line-height: 1.6;
    letter-spacing: normal;
    text-transform: none;
    color: #d4d4de;
}
#front-community .sec-title { margin-bottom: 2rem; }

/* --- TV-Bildschirm: "PRESS START"-Titelbild mit Links --- */
#front-community .crt-tv__bezel { border-radius: 1rem; }
#front-community .crt-tv__screen { aspect-ratio: auto; min-height: 26rem; border-radius: 1.6rem / 1.2rem; }
.crt-tv__title {
    margin: 0 0 1rem;
    font-family: Nintendoid1, monospace;
    font-size: clamp(1.1rem, 3.4vw, 1.7rem);
    letter-spacing: .12em;
    color: #ffd84d;
    text-shadow: 3px 3px 0 #8e1515, 0 0 14px rgba(255, 216, 77, .5);
    animation: crt-tv-blink 1.4s steps(1) infinite;
}
.crt-tv__icon { width: 4rem; height: 4rem; margin-bottom: 1rem; }
.crt-tv__text { max-width: 30rem; margin: 0 auto 1.4rem; font-size: 1.05rem; line-height: 1.55; color: #e8e8f0; }
.crt-tv__text p { margin: 0; }
.crt-tv__links { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem 1.4rem; margin: 1.6rem 0 0; padding: 0; list-style: none; }
.crt-tv__links a { display: inline-flex; align-items: center; gap: .45rem; padding: .25rem .1rem; color: #5dff7a; font-family: Nintendoid1, monospace; font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; text-shadow: 0 0 6px rgba(93, 255, 122, .6); text-decoration: none; }
.crt-tv__links a:hover { color: #fff; }
.crt-tv__links a::before { content: "\25B6"; font-size: .6rem; }
.crt-tv__links a:focus-visible { outline: 3px solid #ffd84d; outline-offset: 3px; }
/* Einschalt-Effekt ohne den Inhalt auszublenden (nur Helligkeit + Strahl). */
@keyframes crt-tv-on { 0% { filter: brightness(4); } 100% { filter: none; } }
@media (max-width: 640px) {
    #front-community .crt-tv__screen { min-height: 30rem; }
    .crt-tv__osd--ch, .crt-tv__osd--av { display: none; }
    .crt-tv__title { animation: none; }
}
@media (prefers-reduced-motion: reduce) { .crt-tv__title { animation: none; } }

/* --- Blog / Doublebox --- */
#front-blog .sec-title, #front-doublebox .sec-title { margin-bottom: 2rem; }
#front-doublebox .join-head { margin-bottom: 2rem; }
.join-card__media { margin: 1rem 1rem 0; height: 12rem; }
.join-card__icon { top: 10.4rem; }
.join-card__body { padding-top: 2.5rem; }
#front-blog .mt-12 { margin-top: 2.5rem; }
@media (max-width: 767px) {
    #front-introduction, #front-podcast, #front-community, #front-blog, #front-doublebox { padding-top: 3rem; padding-bottom: 3rem; }
    #front-introduction { padding-top: 2.5rem; }
}