/* ============================================================================
   AJZ KITA e.V. — Designsystem „Plakat & Papier“ (Neubau 2026)
   ----------------------------------------------------------------------------
   Vibe: Riso/Siebdruck-Zine trifft Brutalist-Plakat. Papier, Tinte, Signal-Rot.
   Kein Neon, kein Glow, nichts Cleanes — alles wirkt gedruckt, geklebt, kopiert.

   Signatur-Elemente:
     .misprint   Fehldruck-Headline (rot versetzte Druckplatte)
     .tape       Klebeband-Streifen (Fotos, Zettel, Plakatwand)
     .rip        Papier-Risskante zwischen Sektionen
     .halftone   Punktraster auf dunklen Flächen
     .sticker    schräg geklebte Labels
     harte 6px-Schlagschatten, 3px-Tintenrahmen

   Aufbau: 1 Tokens · 2 Base · 3 Typo-Utilities · 4 Layout · 5 Nav
           6 Buttons/Chips/Sticker · 7 Karten · 8 Hero · 9 Sektionen
           10 Fotos · 11 Plakatwand · 12 Marquee · 13 Formulare
           14 Footer · 15 Motion · 16 Reduced-Motion/Print
   ========================================================================== */

/* 0 ── WEBFONTS ----------------------------------------------------------- */
/* Selbst ausgeliefert aus public/assets/fonts, keine Verbindung zu Google.
   Inter kommt als Variable Font: eine Datei für alle Schnitte von 100 bis 900.
   Kursive Schnitte sind nicht dabei, die synthetisiert der Browser */

@font-face {
    font-family: 'Anton';
    src: url('../fonts/anton-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/space-mono-regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap
}

@font-face {
    font-family: 'Space Mono';
    src: url('../fonts/space-mono-bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap
}

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

/* 1 ── TOKENS ------------------------------------------------------------- */
:root {
    /* Marke */
    --ink: #16130F;
    --paper: #F3EDE2;
    --paper-2: #E7DDCB;
    --paper-3: #DCD0B9;
    --red: #D8231C;
    --red-dark: #A6160F;

    /* Semantik (Light = Standard) */
    --bg: var(--paper);
    --bg-2: var(--paper-2);
    --bg-3: var(--paper-3);
    --fg: var(--ink);
    --fg-soft: #544c40;
    --accent: var(--red);
    --accent-2: var(--red-dark);
    --line: var(--ink);
    --card: #F7F2E9;
    --block: var(--ink);
    --block-fg: var(--paper); /* dunkle Vollflächen */
    --grain: .055;
    --grain-blend: multiply;

    /* Typo (fluid) */
    --f-display: 'Anton', Impact, 'Arial Narrow', sans-serif;
    --f-mono: 'Space Mono', ui-monospace, Consolas, monospace;
    --f-body: 'Inter', system-ui, sans-serif;
    --t-hero: clamp(2.6rem, 10.5vw, 7.6rem);
    --t-1: clamp(2.2rem, 6.5vw, 4.4rem);
    --t-2: clamp(1.5rem, 3.4vw, 2.2rem);
    --t-3: 1.25rem;
    --t-body: 1rem;
    --t-small: .88rem;
    --t-label: .78rem;

    /* Maße */
    --bw: 3px;
    --shadow: 6px 6px 0 var(--ink);
    --shadow-sm: 3px 3px 0 var(--ink);
    --maxw: 1200px;
    --gut: clamp(1.1rem, 4vw, 2.6rem);
    --sect: clamp(3.4rem, 9vw, 6.5rem);
}

:root[data-theme="dark"] {
    --bg: #161310;
    --bg-2: #1e1a15;
    --bg-3: #28221b;
    --fg: #F3EDE2;
    --fg-soft: #bcb1a0;
    --accent: #E8453E;
    --accent-2: #D8231C;
    --line: #F3EDE2;
    --card: #1c1813;
    --block: #F3EDE2;
    --block-fg: #16130F;
    --grain: .09;
    --grain-blend: screen;
    --shadow: 6px 6px 0 #000;
    --shadow-sm: 3px 3px 0 #000;
}

/* 2 ── BASE --------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box
}

* {
    margin: 0;
    padding: 0
}

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

body {
    font-family: var(--f-body);
    font-size: var(--t-body);
    line-height: 1.55;
    background: var(--bg);
    color: var(--fg);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    transition: background .3s ease, color .3s ease;
}

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

a {
    color: inherit
}

ul, ol {
    list-style: none
}

::selection {
    background: var(--red);
    color: #fff
}

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

/* Fotokopie-Korn über allem (fein!) */
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    opacity: var(--grain);
    mix-blend-mode: var(--grain-blend);
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.skip {
    position: absolute;
    left: -999px;
    top: 0;
    z-index: 10010;
    background: var(--red);
    color: #fff;
    font-family: var(--f-mono);
    padding: .6rem 1rem;
    text-decoration: none
}

.skip:focus {
    left: 0
}

/* 3 ── TYPO --------------------------------------------------------------- */
h1, h2, h3, h4 {
    font-family: var(--f-display);
    font-weight: 400;
    text-transform: uppercase;
    line-height: .94;
    letter-spacing: .005em;
    overflow-wrap: break-word
}

.mono {
    font-family: var(--f-mono)
}

.misprint {
    text-shadow: .05em .05em 0 var(--red)
}

.outline {
    color: transparent;
    -webkit-text-stroke: 2px currentColor;
    paint-order: stroke
}

.lead {
    font-size: 1.06rem;
    color: var(--fg-soft)
}

.kicker {
    font-family: var(--f-mono);
    font-size: var(--t-label);
    text-transform: uppercase;
    letter-spacing: .22em;
    color: var(--accent);
    display: flex;
    align-items: center;
    gap: .6rem;
    margin-bottom: 1rem
}

.kicker::before {
    content: "";
    width: 2.2rem;
    height: 3px;
    background: var(--accent);
    flex-shrink: 0
}

.sec-title {
    font-size: var(--t-1);
    line-height: 1.1;
    margin-bottom: 1.2rem
}

/* 4 ── LAYOUT ------------------------------------------------------------- */
.wrap {
    max-width: var(--maxw);
    margin-inline: auto;
    padding-inline: var(--gut)
}

section {
    padding-block: var(--sect);
    position: relative
}

section.tight {
    padding-top: 0
}

.split {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap
}

.grid {
    display: grid;
    gap: 1.4rem
}

.grid.c2 {
    grid-template-columns:repeat(auto-fit, minmax(290px, 1fr))
}

.grid.c3 {
    grid-template-columns:repeat(auto-fit, minmax(295px, 1fr))
}

.grid.c4 {
    grid-template-columns:repeat(auto-fit, minmax(200px, 1fr))
}

/* Riss-Kante: dunkle Fläche „reißt“ ins Papier (oder umgekehrt) */
.rip {
    height: 16px;
    background: var(--block);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16'%3E%3Cpath d='M0 16V9l7 4 8-7 10 6 9-8 10 7 8-5 11 8 9-6 11 5 10-7 9 7 9-4 9 6V16Z'/%3E%3C/svg%3E") repeat-x bottom/120px 16px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='16'%3E%3Cpath d='M0 16V9l7 4 8-7 10 6 9-8 10 7 8-5 11 8 9-6 11 5 10-7 9 7 9-4 9 6V16Z'/%3E%3C/svg%3E") repeat-x bottom/120px 16px
}

.rip.flip {
    transform: scaleY(-1)
}

.rip.red {
    background: var(--red)
}

/* Seitenkopf mit Ghost-Wort */
.head {
    position: relative;
    overflow: hidden;
    background: var(--bg-2);
    border-bottom: var(--bw) solid var(--line);
    padding: clamp(2.6rem, 7vw, 4.8rem) 0 2.2rem
}

.head::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .05;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, var(--fg) 0 2px, transparent 2px 15px)
}

.head .wrap {
    position: relative;
    z-index: 2
}

.head h1 {
    font-size: clamp(2.5rem, 8.5vw, 5.6rem);
    line-height: 1.1;
}

.head .ghost {
    position: absolute;
    right: -.04em;
    bottom: -.22em;
    z-index: 1;
    pointer-events: none;
    font-family: var(--f-display);
    font-size: clamp(5rem, 24vw, 16rem);
    line-height: 1;
    text-transform: uppercase;
    white-space: nowrap;
    color: transparent;
    -webkit-text-stroke: 2px var(--fg);
    opacity: .08;
    user-select: none
}

.head .lead {
    margin-top: .9rem
}

/* 5 ── NAV ---------------------------------------------------------------- */
.nav {
    position: sticky;
    top: 0;
    z-index: 300;
    background: var(--bg);
    border-bottom: var(--bw) solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .55rem var(--gut);
    transition: background .3s ease
}

.nav::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--red)
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    text-decoration: none;
    flex-shrink: 0;
    font-family: var(--f-display);
    font-size: 1.25rem;
    text-transform: uppercase;
    letter-spacing: .02em
}

.brand img {
    width: 40px;
    height: 40px;
    transition: transform .25s ease
}

.brand:hover img {
    transform: rotate(-14deg) scale(1.1)
}

:root[data-theme="dark"] .brand img,
:root[data-theme="dark"] .menu-foot img {
    filter: invert(1)
}

.nav-menu {
    display: flex;
    gap: 1.15rem;
    align-items: center
}

.nav-menu a {
    font-family: var(--f-mono);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-decoration: none;
    padding: .3rem 0;
    border-bottom: 2px solid transparent
}

.nav-menu a:hover, .nav-menu a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent)
}

.tools {
    display: flex;
    gap: .5rem;
    flex-shrink: 0
}
.tools .lang-toggle {
  text-decoration: none;
}

.tbtn {
    font-family: var(--f-mono);
    font-size: .78rem;
    line-height: 1;
    cursor: pointer;
    color: inherit;
    background: none;
    border: 2px solid var(--line);
    padding: .35rem .6rem;
    display: inline-flex;
    gap: .3rem;
    transition: .15s
}

.tbtn:hover {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff
}

.tbtn b {
    color: var(--accent)
}

.tbtn:hover b {
    color: #fff
}

/* Dropdown */
.sub {
    position: relative;
    top: -2px;
}

.sub > a::after {
    content: " ▾";
    font-size: .7em
}

.sub-list {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 230px;
    z-index: 50;
    display: none;
    background: var(--bg);
    border: var(--bw) solid var(--line);
    box-shadow: var(--shadow);
    padding: .5rem
}

.sub:hover .sub-list, .sub:focus-within .sub-list {
    display: block
}

.sub-list a {
    display: block;
    padding: .5rem .5rem;
    border-bottom: none
}

/* Mobile: Vollbild-Plakat-Menü */
.burger {
    display: none
}

@media (max-width: 920px) {
    .burger {
        display: inline-flex
    }

    .nav-menu {
        position: fixed;
        inset: 0;
        z-index: 290;
        background: var(--bg);
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        padding: 5.5rem var(--gut) 6rem;
        gap: .15rem;
        transform: translateY(-102%);
        transition: transform .35s cubic-bezier(.7, 0, .3, 1)
    }

    .nav-menu.open {
        transform: none
    }

    .nav-menu::before {
        content: "MENÜ";
        position: absolute;
        top: 4.4rem;
        left: var(--gut);
        font-family: var(--f-mono);
        font-size: .72rem;
        letter-spacing: .35em;
        color: var(--accent)
    }

    .nav-menu::after {
        content: "AM BLEICHERBERG 3 · RIBNITZ-DAMGARTEN";
        position: absolute;
        bottom: 2rem;
        left: var(--gut);
        font-family: var(--f-mono);
        font-size: .68rem;
        letter-spacing: .12em;
        color: var(--fg-soft)
    }

    .nav-menu a {
        font-family: var(--f-display);
        font-size: clamp(1.8rem, 8.5vw, 2.7rem);
        line-height: 1.12;
        border-bottom: none
    }

    .sub-list {
        position: static;
        display: block;
        border: none;
        box-shadow: none;
        background: none;
        padding: .15rem 0 .4rem 1.3rem;
        min-width: 0
    }

    .sub-list a {
        font-family: var(--f-mono);
        font-size: .95rem;
        text-transform: uppercase;
        padding: .3rem 0
    }

    .sub > a::after {
        content: ""
    }
}

/* 6 ── BUTTONS · CHIPS · STICKER ------------------------------------------ */
.btn {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: .84rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .85rem 1.5rem;
    color: var(--fg);
    background: var(--card);
    border: var(--bw) solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .13s ease, box-shadow .13s ease
}

.btn:hover {
    transform: translate(-2px, -2px) rotate(-.6deg);
    box-shadow: 9px 9px 0 var(--ink)
}

:root[data-theme="dark"] .btn:hover {
    box-shadow: 9px 9px 0 #000
}

.btn:active {
    transform: none;
    box-shadow: var(--shadow-sm)
}

.btn.red {
    background: var(--red);
    border-color: var(--line);
    color: #fff
}

.btn.sm {
    padding: .5rem .95rem;
    font-size: .74rem;
    box-shadow: var(--shadow-sm)
}

.chip {
    display: inline-block;
    cursor: pointer;
    text-decoration: none;
    font-family: var(--f-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .28rem .65rem;
    background: var(--bg);
    color: var(--fg);
    border: 2px solid var(--line);
    transition: .15s
}

.chip:hover {
    background: var(--bg-3)
}

.chip.on, .chip[aria-pressed="true"] {
    background: var(--red);
    border-color: var(--red);
    color: #fff
}

.chip.flat {
    cursor: default
}

.chip.flat:hover {
    background: var(--bg)
}

.sticker {
    display: inline-block;
    transform: rotate(-3deg);
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--red);
    color: #fff;
    padding: .42rem .85rem;
    border: 2px solid var(--ink);
    box-shadow: var(--shadow-sm)
}

.sticker.ink {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--paper)
}

.sticker.r {
    transform: rotate(2.2deg)
}

/* Klebeband — überall wiederverwendbar */
.tape {
    position: relative
}

.tape::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -12px;
    width: 96px;
    height: 24px;
    z-index: 3;
    transform: translateX(-50%) rotate(-2deg);
    pointer-events: none;
    background: linear-gradient(100deg, rgba(233, 222, 190, .92), rgba(226, 214, 180, .78));
    border: 1px solid rgba(22, 19, 15, .14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18)
}

.tape.corners::before {
    left: 0;
    top: -10px;
    transform: translateX(-38%) rotate(-40deg);
    width: 82px
}

.tape.corners::after {
    content: "";
    position: absolute;
    right: 0;
    top: -10px;
    width: 82px;
    height: 24px;
    z-index: 3;
    transform: translateX(38%) rotate(40deg);
    pointer-events: none;
    background: linear-gradient(100deg, rgba(233, 222, 190, .92), rgba(226, 214, 180, .78));
    border: 1px solid rgba(22, 19, 15, .14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .18)
}
@media (max-width: 460px) {
    .tape.corners::before {
        height: 15px;
        width: 52px
    }
    .tape.corners::after {
        height: 15px;
        width: 52px
    }
}
/* 7 ── KARTEN ------------------------------------------------------------- */
.card {
    background: var(--card);
    border: var(--bw) solid var(--line);
    box-shadow: var(--shadow);
    transition: transform .16s ease, box-shadow .16s ease
}

.card:hover {
    transform: translate(-2px, -2px);
    box-shadow: 9px 9px 0 var(--ink)
}

:root[data-theme="dark"] .card:hover {
    box-shadow: 9px 9px 0 #000
}

.card .pad {
    padding: 1.5rem
}

.card h3 {
    font-size: var(--t-3);
    line-height: 1.2;
    margin-bottom: 0.3rem;
}

/* Event-Karte: Abreißkalender-Datum + roter Kantenstreifen */
.ev {
    position: relative;
    display: flex;
    flex-direction: column;
    max-width: 600px;
}

.ev::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background: var(--red)
}

.ev .body {
    padding: 1.15rem 1.15rem 1.15rem 1.5rem;
    display: flex;
    flex-direction: column;
    flex: 1
}

.ev .when {
    display: flex;
    align-items: baseline;
    gap: .6rem
}

.ev .dd {
    font-family: var(--f-display);
    font-size: 2rem;
    color: var(--red);
    line-height: 1
}

.ev .meta {
    font-family: var(--f-mono);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fg-soft)
}

.ev h3 {
    font-size: 1.3rem;
    line-height: 1.1;
    margin: .45rem 0 .35rem
}

.ev p {
    font-size: var(--t-small);
    color: var(--fg-soft)
}

.ev .ft {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    margin-top: auto;
    padding-top: .9rem
}

.ev .type {
    position: absolute;
    top: .7rem;
    right: -.5rem;
    transform: rotate(3deg);
    z-index: 2;
    font-family: var(--f-mono);
    font-weight: 700;
    font-size: .62rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    background: var(--ink);
    color: var(--paper);
    padding: .25rem .55rem;
    border: 2px solid var(--paper);
    box-shadow: var(--shadow-sm)
}

/* Säulen (01–04) */
.pillar {
    padding: 1.5rem;
    position: relative
}

.pillar .n {
    font-family: var(--f-display);
    font-size: 2.6rem;
    color: var(--red);
    line-height: 1
}

.pillar h3 {
    margin: .35rem 0 .3rem
}

.pillar p {
    font-size: var(--t-small);
    color: var(--fg-soft)
}

.pillar:nth-child(odd) {
    transform: rotate(-.8deg)
}

.pillar:nth-child(even) {
    transform: rotate(.8deg)
}

.pillar:hover {
    transform: rotate(0) translate(-2px, -2px)
}

/* Anekdoten */
.story {
    padding: 1.4rem
}

.story .y {
    font-family: var(--f-display);
    font-size: 1.4rem;
    color: var(--red)
}

.story h3 {
    font-size: 1.15rem;
    line-height: 1.1;
    margin: .25rem 0 .5rem
}

.story p {
    font-size: var(--t-small);
    color: var(--fg-soft)
}

.story .src {
    display: block;
    font-family: var(--f-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--fg-soft);
    opacity: .75;
    margin-top: .7rem
}

/* Timeline */
.tl {
    position: relative;
    margin-top: 1.5rem;
    padding-left: 2.1rem;
    border-left: var(--bw) solid var(--line)
}

.tl-i {
    position: relative;
    padding: 0 0 2.6rem .5rem
}

.tl-i:last-child {
    padding-bottom: .5rem
}

.tl-i::before {
    content: "";
    position: absolute;
    left: calc(-2.1rem - 9px);
    top: .4rem;
    width: 15px;
    height: 15px;
    background: var(--red);
    border: 3px solid var(--bg);
    outline: 2px solid var(--line);
    border-radius: 50%
}

.tl-i .y {
    font-family: var(--f-display);
    font-size: 2.1rem;
    color: var(--red);
    line-height: 1
}

.tl-i h3 {
    font-size: 1.3rem;
    line-height: 1.1;
    margin: .25rem 0 .4rem
}

.tl-i p {
    color: var(--fg-soft);
    max-width: 62ch
}

/* Merch */
.prod .img {
    aspect-ratio: 1;
    background: var(--bg-3);
    display: grid;
    place-items: center;
    font-size: 2.6rem;
    overflow: hidden;
    border-bottom: var(--bw) solid var(--line)
}

.prod .img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.prod .pad {
    padding: 1.1rem
}

.prod .price {
    font-family: var(--f-display);
    font-size: 1.5rem;
    color: var(--red);
    margin: .2rem 0 .5rem
}

/* Hinweis-Box (Redaktion/Platzhalter) */
.note {
    border: 2px dashed var(--accent);
    background: var(--bg-2);
    padding: 1rem 1.2rem;
    font-size: var(--t-small)
}

.note strong {
    font-family: var(--f-mono);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--accent)
}

/* Prose (Impressum/Datenschutz) */
.prose {
    max-width: 72ch
}

.prose h2 {
    font-size: 1.4rem;
    margin: 2rem 0 .6rem
}

.prose p {
    margin: .5rem 0;
    color: var(--fg-soft)
}

.prose a {
    color: var(--accent)
}

/* 8 ── HERO (Start) -------------------------------------------------------- */
.hero {
    position: relative;
    min-height: min(92vh, 820px);
    display: flex;
    align-items: flex-end;
    background: #0e0c09;
    color: #F3EDE2;
    border-bottom: var(--bw) solid var(--line);
    overflow: hidden
}

.hero .bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
    animation: heroZoom 16s ease-out forwards
}

@keyframes heroZoom {
    from {
        transform: scale(1.06)
    }
    to {
        transform: scale(1)
    }
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(178deg, rgba(14, 12, 9, .42) 0%, rgba(14, 12, 9, .05) 34%, rgba(14, 12, 9, .52) 68%, rgba(14, 12, 9, .9) 100%)
}

.hero .in {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: var(--maxw);
    margin-inline: auto;
    padding: clamp(5rem, 12vw, 8rem) var(--gut) clamp(2.4rem, 5vw, 3.4rem)
}

.hero h1 {
    font-size: var(--t-hero);
    color: #F3EDE2;
    margin: .9rem 0 .55rem;
    text-shadow: .045em .045em 0 var(--red)
}

.hero h1 .r {
    color: var(--red);
    text-shadow: .045em .045em 0 rgba(0, 0, 0, .6)
}

.hero .sub {
    font-family: var(--f-mono);
    font-size: clamp(.78rem, 2vw, 1rem);
    text-transform: uppercase;
    letter-spacing: .16em
}

.hero .adr {
    font-family: var(--f-mono);
    font-size: .7rem;
    letter-spacing: .14em;
    text-transform: uppercase;
    opacity: .72;
    margin-top: .35rem
}

.hero .stamp {
    position: absolute;
    z-index: 3;
    top: clamp(1.2rem, 4vw, 2.4rem);
    right: clamp(1rem, 4vw, 2.6rem);
    width: clamp(86px, 11vw, 136px);
    filter: drop-shadow(4px 4px 0 rgba(0, 0, 0, .55));
    animation: stampBob 7s ease-in-out infinite
}

@keyframes stampBob {
    0%, 100% {
        transform: rotate(-5deg) translateY(0)
    }
    50% {
        transform: rotate(4deg) translateY(-9px)
    }
}

.hero .scrollhint {
    position: absolute;
    z-index: 3;
    left: 50%;
    bottom: .7rem;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: .62rem;
    letter-spacing: .3em;
    opacity: .6;
    animation: hint 2.4s ease-in-out infinite
}

@keyframes hint {
    0%, 100% {
        transform: translate(-50%, 0)
    }
    50% {
        transform: translate(-50%, 6px)
    }
}

.hero .btn {
    background: transparent;
    color: #F3EDE2;
    border-color: #F3EDE2;
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .55)
}

.hero .btn.red {
    background: var(--red);
    color: #fff
}

.hero .sticker {
    border-color: #F3EDE2
}

.cta {
    display: flex;
    gap: .9rem;
    flex-wrap: wrap;
    margin-top: 1.7rem
}

/* Getapter „Nächstes Event“-Zettel */
.next {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .9rem;
    max-width: 100%;
    margin-top: 1.5rem;
    padding: .95rem 1.25rem;
    transform: rotate(.7deg);
    background: var(--paper);
    color: var(--ink);
    border: var(--bw) solid var(--ink);
    box-shadow: var(--shadow)
}

.next .dd {
    font-family: var(--f-display);
    font-size: 1.8rem;
    line-height: 1;
    color: var(--red)
}

.next .tx {
    min-width: 0;
    flex: 1 1 13rem
}

.next .k {
    display: block;
    font-family: var(--f-mono);
    font-size: .64rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: var(--red-dark)
}

.next strong {
    display: block;
    font-size: 1.04rem;
    line-height: 1.35
}

.next .m {
    font-size: .85rem;
    color: #544c40
}

/* 9 ── SEKTIONEN ----------------------------------------------------------- */
/* Dunkler Zahlen-Block mit Punktraster */
.block {
    background: var(--block);
    color: var(--block-fg);
    position: relative;
    overflow: hidden
}

.block::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .13;
    pointer-events: none;
    background-image: radial-gradient(currentColor 1.1px, transparent 1.6px);
    background-size: 15px 15px
}

.block .wrap {
    position: relative
}

.block .kicker {
    color: var(--accent)
}

.block h2 {
    color: var(--block-fg)
}

.stat {
    text-align: center
}

.stat .n {
    font-family: var(--f-display);
    font-size: clamp(2.9rem, 8vw, 5rem);
    color: var(--accent);
    line-height: 1
}

.stat .l {
    font-family: var(--f-mono);
    font-size: .76rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    opacity: .85
}

/* Line-up-Liste (Räume auf Start): Plakat-Zeilen */
.lineup {
    border-top: var(--bw) solid var(--line)
}

.lineup li {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: .55rem .2rem;
    border-bottom: var(--bw) solid var(--line);
    transition: background .15s, color .15s, padding-left .15s
}
@media (max-width: 360px) {
    .lineup li {
        flex-direction: column;
        gap: 0.2rem;
    }
}
.lineup .idx {
    font-family: var(--f-mono);
    font-size: .72rem;
    color: var(--accent);
    min-width: 2.2rem
}

.lineup .nm {
    font-family: var(--f-display);
    font-size: clamp(1.5rem, 4.6vw, 2.6rem);
    text-transform: uppercase;
    line-height: 1.1
}

.lineup .tag {
    margin-left: auto;
    font-family: var(--f-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--fg-soft);
    text-align: right
}

.lineup li:hover {
    background: var(--red);
    color: #fff;
    padding-left: .8rem
}

.lineup li:hover .idx, .lineup li:hover .tag {
    color: #fff
}

/* Soli-Banner */
.soli {
    background: var(--red);
    color: #fff;
    text-align: center;
    position: relative;
    overflow: hidden
}

.soli::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .12;
    pointer-events: none;
    background: repeating-linear-gradient(-45deg, #000 0 3px, transparent 3px 18px)
}

.soli .wrap {
    position: relative
}

.soli h2 {
    font-size: clamp(1.9rem, 5.5vw, 3.6rem);
    text-shadow: 3px 3px 0 var(--red-dark)
}

.soli p {
    max-width: 58ch;
    margin: 1rem auto 1.6rem
}

.soli .btn {
    background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
    box-shadow: 6px 6px 0 rgba(0, 0, 0, .35)
}

.soli .btn.lite {
    background: var(--paper);
    color: var(--ink)
}

.donate-btn {
    margin-top: 15px;
}
.soli .cta {
    justify-content: center
}

/* 10 ── FOTOS -------------------------------------------------------------- */
/* Getapter Abzug */
.shot {
    background: var(--card);
    border: var(--bw) solid var(--line);
    box-shadow: var(--shadow);
    padding: .55rem .55rem 0;
    transition: transform .25s ease, box-shadow .25s ease
}

.shot img {
    width: 100%
}

.shot figcaption {
    display: flex;
    justify-content: space-between;
    gap: .6rem;
    font-family: var(--f-mono);
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    padding: .55rem .15rem
}

.shot figcaption .y {
    color: var(--accent);
    white-space: nowrap
}

.shot.tl {
    transform: rotate(-1.7deg)
}

.shot.tr {
    transform: rotate(1.5deg)
}

.shot:hover {
    transform: rotate(0) translateY(-5px);
    box-shadow: 9px 11px 0 var(--ink);
    z-index: 4
}

:root[data-theme="dark"] .shot:hover {
    box-shadow: 9px 11px 0 #000
}

/* Mosaik (Start „Das Haus“) */
.mosaic {
    display: grid;
    gap: 3rem 1.8rem;
    grid-template-columns:repeat(12, 1fr);
    align-items: start;
    margin-top: 1.4rem
}

.mosaic > *:nth-child(1) {
    grid-column: 1/8
}

.mosaic > *:nth-child(2) {
    grid-column: 8/13;
    margin-top: 2.8rem
}

.mosaic > *:nth-child(3) {
    grid-column: 1/6;
    margin-top: -1.2rem
}

.mosaic > *:nth-child(4) {
    grid-column: 6/13
}

.mosaic > *:nth-child(5) {
    grid-column: 1/7;
}

.mosaic > *:nth-child(6) {
    grid-column: 7/13;
    margin-top: -1.0rem
}

.mosaic > *:nth-child(7) {
    grid-column: 1/6
}

.mosaic > *:nth-child(8) {
    grid-column: 6/12;
    /*margin-top: -7.8rem*/
}
@media (max-width: 780px) {
    .mosaic {
        grid-template-columns:1fr;
        gap: 2.1rem;
        padding: 0 15px;
    }

    .mosaic > * {
        grid-column: 1/-1 !important;
        margin-top: 0 !important
    }
}

/* Vollbreites Foto-Band */
.band {
    position: relative;
    min-height: 340px;
    display: flex;
    align-items: flex-end;
    background: var(--ink);
    border-block: var(--bw) solid var(--line)
}

.band img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .88
}

.band .cap {
    position: relative;
    z-index: 2;
    margin: 0 0 1.3rem var(--gut);
    transform: rotate(-1deg);
    font-family: var(--f-mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .07em;
    background: var(--paper);
    color: var(--ink);
    border: var(--bw) solid var(--ink);
    box-shadow: var(--shadow);
    padding: .5rem .85rem;
    max-width: min(85%, 34rem)
}

/* 11 ── PLAKATWAND --------------------------------------------------------- */
.wall {
    column-count: 4;
    column-gap: 1.5rem;
    padding-top: 1.2rem
}

@media (max-width: 1020px) {
    .wall {
        column-count: 3
    }
}

@media (max-width: 660px) {
    .wall {
        column-count: 2;
        column-gap: 1rem
    }
}

.wall figure {
    break-inside: avoid;
    position: relative;
    margin: 0 0 1.7rem;
    background: var(--card);
    border: 2px solid var(--line);
    box-shadow: 4px 6px 0 rgba(0, 0, 0, .34);
    padding: .45rem .45rem 0;
    transition: transform .2s ease, box-shadow .2s ease
}

.wall figure::before {
    content: "";
    position: absolute;
    left: 50%;
    top: -11px;
    width: 90px;
    height: 22px;
    z-index: 2;
    transform: translateX(-50%) rotate(-2deg);
    pointer-events: none;
    background: linear-gradient(100deg, rgba(233, 222, 190, .9), rgba(226, 214, 180, .75));
    border: 1px solid rgba(22, 19, 15, .14);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2)
}

.wall figure:nth-child(5n+1) {
    transform: rotate(-2.3deg)
}

.wall figure:nth-child(5n+2) {
    transform: rotate(1.7deg)
}

.wall figure:nth-child(5n+3) {
    transform: rotate(-.9deg)
}

.wall figure:nth-child(5n+4) {
    transform: rotate(2.5deg)
}

.wall figure:nth-child(5n+5) {
    transform: rotate(-1.4deg)
}

.wall figure:hover {
    transform: rotate(0) scale(1.045);
    box-shadow: 8px 11px 0 rgba(0, 0, 0, .4);
    z-index: 6
}

.wall img {
    width: 100%;
    cursor: zoom-in
}

.wall figcaption {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    font-family: var(--f-mono);
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .45rem .15rem
}

.wall figcaption .y {
    color: var(--accent);
    font-weight: 700
}

/* Mini-Wand (Teaser Start) */
.wallmini {
    display: grid;
    grid-template-columns:repeat(6, 1fr);
    gap: 1.15rem;
    margin-top: 1.6rem
}

@media (max-width: 920px) {
    .wallmini {
        grid-template-columns:repeat(3, 1fr)
    }

    .wallmini a:nth-child(n+7) {
        display: none
    }
}

.wallmini a {
    display: block;
    background: var(--card);
    border: 2px solid var(--line);
    box-shadow: 3px 4px 0 rgba(0, 0, 0, .3);
    padding: .3rem .3rem 0;
    transition: transform .18s ease
}

.wallmini a:nth-child(odd) {
    transform: rotate(-2deg)
}

.wallmini a:nth-child(even) {
    transform: rotate(1.8deg)
}

.wallmini a:hover {
    transform: rotate(0) scale(1.07);
    z-index: 3
}

.wallmini img {
    width: 100%;
    aspect-ratio: 3/4;
    object-fit: cover
}

.wallmini span {
    display: block;
    font-family: var(--f-mono);
    font-size: .58rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: .3rem .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis
}

@media (max-width: 665px) {
    .wallmini {
        grid-template-columns:repeat(2, 1fr)
    }
    .wallmini span {
        white-space: wrap;
    }
}
/* Lightbox */
.lb {
    position: fixed;
    inset: 0;
    z-index: 10005;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(12, 10, 7, .93);
    cursor: zoom-out
}

.lb.open {
    display: flex
}

.lb img {
    max-width: 92vw;
    max-height: 80vh;
    border: 3px solid var(--paper);
    box-shadow: 9px 9px 0 rgba(0, 0, 0, .6)
}

.lb .cap {
    position: absolute;
    bottom: 1.3rem;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--f-mono);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    background: var(--paper);
    color: var(--ink);
    border: 2px solid var(--ink);
    padding: .35rem .85rem;
    white-space: nowrap
}

.lb .x {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 2;
    cursor: pointer;
    font-family: var(--f-mono);
    background: var(--red);
    color: #fff;
    border: none;
    padding: .5rem .9rem
}

/* 12 ── MARQUEE ------------------------------------------------------------ */
.mq {
    background: var(--block);
    color: var(--block-fg);
    overflow: hidden;
    white-space: nowrap;
    border-bottom: var(--bw) solid var(--line);
    padding: .5rem 0
}

.mq .trk {
    display: inline-block;
    animation: mq 32s linear infinite;
    font-family: var(--f-display);
    font-size: 1.45rem;
    text-transform: uppercase;
    letter-spacing: .04em
}

.mq .trk > span {
    margin: 0 1.5rem
}

.mq i {
    font-style: normal;
    color: var(--accent)
}

.mq:hover .trk {
    animation-play-state: paused
}

@keyframes mq {
    to {
        transform: translateX(-50%)
    }
}

/* 13 ── FORMULARE · EMBEDS ------------------------------------------------- */
.form {
    display: grid;
    gap: 1.05rem;
    max-width: 640px
}

.form label {
    display: block;
    margin-bottom: .3rem;
    font-family: var(--f-mono);
    font-size: .74rem;
    text-transform: uppercase;
    letter-spacing: .06em
}

.form input, .form textarea, .form select {
    width: 100%;
    font-family: var(--f-body);
    font-size: 1rem;
    padding: .72rem .85rem;
    background: var(--card);
    color: var(--fg);
    border: var(--bw) solid var(--line)
}

.form textarea {
    min-height: 150px;
    resize: vertical
}

/* Fehlermeldung an einem einzelnen Feld */
.form .err {
    display: block;
    margin-top: .35rem;
    font-family: var(--f-mono);
    font-size: .74rem;
    color: var(--accent)
}

/* Meldung über dem Formular, z. B. wenn der Versand scheitert */
.form-alert {
    max-width: 640px;
    margin-bottom: 1.3rem;
    padding: .8rem 1rem;
    background: var(--card);
    border: var(--bw) solid var(--accent)
}

/* Honigtopf: für Menschen aus dem Bild, für Bots ein Feld wie jedes andere */
.form .hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden
}

.captcha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .7rem
}

/* das PNG ist transparent, der helle Grund kommt von hier */
.captcha img {
    height: 52px;
    padding: 0 .35rem;
    background: var(--paper);
    border: var(--bw) solid var(--line)
}

.captcha input {
    width: auto;
    flex: 1 1 9rem;
    font-family: var(--f-mono);
    text-transform: uppercase;
    letter-spacing: .14em
}

.embed {
    border: var(--bw) dashed var(--line);
    background: var(--bg-2);
    padding: 2rem;
    text-align: center
}

.embed p {
    color: var(--fg-soft);
    margin: .5rem 0 1rem;
    font-size: var(--t-small)
}

/* 14 ── FOOTER ------------------------------------------------------------- */
.foot {
    background: var(--ink);
    color: var(--paper);
    overflow: hidden;
    padding-bottom: 2rem
}

.foot .bigword {
    padding: 2.2rem var(--gut) 1rem;
    user-select: none;
    white-space: nowrap;
    font-family: var(--f-display);
    font-size: clamp(3.2rem, 13vw, 11.5rem);
    line-height: .85;
    text-transform: uppercase;
    letter-spacing: -.01em;
    color: transparent;
    -webkit-text-stroke: 2px var(--paper);
    opacity: .3
}

.foot .bigword b {
    font-weight: 400;
    color: var(--red);
    -webkit-text-stroke: 0
}

.foot .cols {
    display: grid;
    gap: 2rem;
    grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));
    max-width: var(--maxw);
    margin-inline: auto;
    padding: 1.6rem var(--gut) 0
}

.foot h4 {
    font-family: var(--f-display);
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: .6rem
}

.foot a {
    display: block;
    font-family: var(--f-mono);
    font-size: .84rem;
    text-decoration: none;
    opacity: .82;
    margin: .22rem 0
}

.foot a:hover {
    opacity: 1;
    color: var(--red)
}

.foot .mut {
    font-family: var(--f-mono);
    font-size: .84rem;
    opacity: .72;
    line-height: 1.75
}

.foot .legal {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    max-width: var(--maxw);
    margin: 2.2rem auto 0;
    padding: 1.2rem var(--gut) 0;
    border-top: 1px solid rgba(243, 237, 226, .3);
    font-family: var(--f-mono);
    font-size: .72rem;
    opacity: .72
}

.foot .legal a {
    display: inline;
    margin: 0
}

/* 15 ── MOTION ------------------------------------------------------------- */
.rv {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .65s ease, transform .65s ease
}

.rv.in {
    opacity: 1;
    transform: none
}

/* 16 ── REDUCED MOTION / PRINT / NO-JS ------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important
    }

    html {
        scroll-behavior: auto
    }

    .rv {
        opacity: 1;
        transform: none
    }

    .next, .pillar, .sticker, .shot, .wall figure, .wallmini a {
        transform: none
    }

    .mq .trk {
        animation: none;
        white-space: normal
    }

    .hero .bg {
        animation: none;
        transform: none
    }
}

[hidden] {
    display: none !important
}

@media print {
    .nav, .foot, .mq, .hero .stamp {
        display: none
    }
}

/* 17 ── BACKEND-RENDERED MARKUP -------------------------------------------- */
/* Classes replacing the inline styles the templates used to carry. */
.nav-menu a.active {
    color: var(--accent);
    border-bottom-color: var(--accent)
}

.sec-title.flush {
    margin-bottom: 0
}

.rip.flush {
    margin-top: 0
}

.mut {
    color: var(--fg-soft)
}

.accent {
    color: var(--accent)
}

.centered {
    text-align: center
}

.kicker.center {
    justify-content: center
}

.prose-narrow {
    max-width: 60ch;
    margin: 0 auto;
    opacity: .9
}

.note-line {
    font-size: .7rem;
    opacity: .6;
    margin-top: .9rem
}

.cta.start {
    justify-content: flex-start
}

.chips {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap
}

.chips.filters {
    margin-bottom: 2.2rem
}

.card .chips {
    margin: .5rem 0
}

.chip.placeholder {
    border-color: var(--accent);
    color: var(--accent)
}

.card-title {
    font-size: 1.45rem
}

.card .pad .sticker + .card-title {
    margin-top: 1rem
}

.post-date {
    font-size: .7rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--accent)
}

.card .post-title {
    font-size: 1.45rem;
    line-height: 1.7rem;
    margin: .3rem 0
}

.post-title a {
    text-decoration: none
}

.post-title a:hover {
    color: var(--accent)
}

/* Einzelner Beitrag auf eigener Seite */
.post {
    max-width: 72ch
}

.post .chips {
    margin: .6rem 0 1.4rem
}

.post .prose p {
    margin: 0 0 1rem;
    color: var(--fg)
}

.post .prose img {
    max-height: 500px;
}

.card-img {
    margin-top: 10px;
}
.permalink, .story .share {
    display: inline-block;
    margin-top: .85rem
}


/* Flyer an einer Termin-Karte */
.ev-flyer {
    background: var(--bg-3);
}

.ev-flyer img {
    width: 100%;
    aspect-ratio: 3/2;
    object-fit: cover;
    object-position: top;
    cursor: zoom-in
}
.event-body .ev-flyer {
    float: right;
    max-width: 35%;
    margin-left: 15px;
    margin-bottom: 10px;
}

@media (max-width: 920px) {
    .event-body .ev-flyer {
        float: none;
        max-width: none;
        margin-left: 0;
    }
}

@media (min-width: 921px) {
    .event-body .ev-flyer {
        transform: rotate(3deg);
        transition: all 0.2s;
    }
    .event-body .ev-flyer:hover {
        transform: rotate(0);
    }
}
.prod-type {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em
}

.prod .buy {
    display: flex;
    gap: .45rem;
    flex-wrap: wrap;
    align-items: center;
    margin-top: .7rem
}

.contact-name {
    font-size: 1.9rem
}

.address {
    line-height: 2;
    margin: .6rem 0
}

.account {
    line-height: 1.9
}