/*
 * Eigene Story „Eine Party, die unter die Haut ging“ (Heft 4, S. 16–17) – Namensraum .koeck-party, Präfix kp-.
 * Vorlage template-parts/stories/eigen/party.php (+ party-grafik.php), Script js/stories/party.js.
 * Wie im Heft: schwarz, randlos, Fotos in verschiedenen Größen überlappen sich und ragen an den Rand. Licht in Rosa
 * und Grün wie auf den Fotos (Bühne, Fahne). Collagen als Raster mit quadratischen Zellen (cqw), damit sich die Fotos
 * bei jeder Breite gleich überlappen. Handy zuerst; ab 600 px breitere Spalte, ab 1000 px Fotos im Rand neben dem Text.
 * Animiert werden nur transform, opacity, clip-path (Fotos) und stroke-dashoffset (Grafiken).
 */
.koeck-party {
	--kp-rosa: #ff5aa5;   /* Bühnenlicht (Foto Live-Band) – 6,9:1 auf Schwarz */
	--kp-gruen: #58d49a;  /* Licht an der Fahne – 10,9:1 auf Schwarz */
	--kp-ink: #ece7dd;    /* Fließtext 15,8:1 */
	--kp-grau: #a8a195;   /* Bildunterschriften, Beschriftungen 7,6:1 */
	--kp-papier: #f1ece2; /* Vorlagen-Papier der Tätowierer */
	--kp-stencil: #6d55c9;/* Pauspapier-Lila wie auf den Fotos */
	--kp-rand: 20px;
	--kp-sp: 26em;        /* Lesespalte: ca. 70–75 Zeichen (schmale Schrift) */
	--kp-ease: cubic-bezier(.23, 1, .32, 1);
	position: relative; overflow-x: clip;
	background: #000; color: var(--kp-ink);
	font: 400 18px/1.62 var(--sans); -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
.koeck-party p, .koeck-party figure, .koeck-party blockquote, .koeck-party ol, .koeck-party ul { margin: 0; padding: 0; }
.koeck-party img { display: block; width: 100%; height: 100%; object-fit: cover; }
.koeck-party button { font: inherit; color: inherit; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
@media (min-width: 600px) { .koeck-party { --kp-rand: 40px; } }
@media (min-width: 1000px) { .koeck-party { --kp-rand: max(5vw, 48px); } }

/* Fotos zum Antippen (öffnen die Bildstrecke im Vollbild) */
.koeck-party .kp-f { --kp-dreh: 0deg; display: block; position: relative; padding: 0; border: 0; overflow: hidden; background: #161616; cursor: zoom-in; transform: rotate(var(--kp-dreh)); box-shadow: 0 18px 44px rgba(0, 0, 0, .55); user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: transform .25s var(--kp-ease); }
.koeck-party .kp-f img { transition: transform .6s var(--kp-ease); }
/* 1.55.0: Safari hält aspect-ratio auf <button> nicht ein – das Foto bekommt das Format selbst (sonst wurde z. B. das
   Leinwand-Foto hochformatig und verdeckte die Überschrift „… bleibenden Eindruck“) */
.koeck-party :is(.kp-s--rechts, .kp-s--breit, .kp-s--sack1, .kp-s--sack2, .kp-s--rueck, .kp-s--ehrung, .kp-s--t3, .kp-s--calla) > img { aspect-ratio: inherit; height: auto; }
.koeck-party .kp-f:active { transform: rotate(var(--kp-dreh)) scale(.98); }
.koeck-party .kp-f:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .koeck-party .kp-f:hover img { transform: scale(1.04); } }
.koeck-party .kp-dreh-l { --kp-dreh: -3deg; }
.koeck-party .kp-dreh-r { --kp-dreh: 3deg; }
/* Aufdecken ab der Leselinie (Vorhang von unten, wie die Bildstrecke); beim Zurückscrollen zügig wieder zu (1.57.0, jhSmAuf) */
.koeck-party.kp-js :is(.kp-f, .kp-bild) img { clip-path: inset(100% 0 0 0); transition: clip-path .45s var(--kp-ease), transform .6s var(--kp-ease); }
.koeck-party.kp-js :is(.kp-f, .kp-bild).kp-sicht img { clip-path: inset(0 0 0 0); transition: clip-path 1.1s var(--kp-ease) calc(var(--sm-stufe, 0) * 100ms), transform .6s var(--kp-ease); }
.koeck-party.kp-js:not(.kp-lauf) :is(.kp-f, .kp-bild) img { clip-path: none; } /* party.js läuft nicht: alles sichtbar */

/* Collagen: Raster mit quadratischen Zellen */
.koeck-party :is(.kp-coll, .kp-fest, .kp-tat-coll) { container-type: inline-size; }
.koeck-party .kp-raster { --kp-z: calc(100cqw / 12); display: grid; grid-template-columns: repeat(12, var(--kp-z)); grid-auto-rows: var(--kp-z); justify-content: center; }
.koeck-party .kp-coll .kp-raster { --kp-z: min(calc(100cqw / 12), 4.6svh); } /* Einstieg: quer, Tablet und Zoom höchstens etwa einen Bildschirm hoch */
.koeck-party .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.koeck-party .kp-raster > .kp-f { width: auto; height: auto; }

/* ---------- 1 · Einstieg: Bühnenlicht, Titel, Collage ---------- */
.koeck-party .kp-held { position: relative; padding-top: calc(96px + env(safe-area-inset-top, 0px)); }
.koeck-party .kp-licht { position: absolute; top: -12%; width: 82%; height: 78%; pointer-events: none; opacity: .5; mix-blend-mode: screen; transform-origin: 50% 0; }
.koeck-party .kp-licht--r { left: -26%; background: radial-gradient(ellipse 50% 70% at 50% 0, var(--kp-rosa), transparent 70%); transform: rotate(16deg); } /* taste-skill-ignore: Scheinwerferkegel wie auf dem Foto der Live-Band */
.koeck-party .kp-licht--g { right: -26%; background: radial-gradient(ellipse 50% 70% at 50% 0, var(--kp-gruen), transparent 70%); transform: rotate(-16deg); } /* taste-skill-ignore: grünes Licht an der Fahne */
.koeck-party .kp-held-text { position: relative; padding: 0 var(--kp-rand); }
.koeck-party .kp-titel { margin: 0; max-width: 8em; color: #fff; font: 300 clamp(50px, min(15vw, 11svh), 140px)/.94 var(--serif); letter-spacing: -.02em; text-wrap: balance; hyphens: manual; }
.koeck-party .kp-haut { position: relative; display: inline-block; white-space: nowrap; }
.koeck-party .kp-haut svg { position: absolute; left: -3%; bottom: -.1em; width: 106%; height: .3em; overflow: visible; }
.koeck-party .kp-haut path { fill: none; stroke: var(--kp-rosa); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; stroke-dasharray: 900; stroke-dashoffset: 0; } /* Bildschirm-Längen: non-scaling-stroke */
.koeck-party .kp-vorspann { margin-top: 26px; max-width: 24em; color: #ddd7cc; font: 300 clamp(21px, 5.4vw, 27px)/1.3 var(--serif); text-wrap: pretty; }
.koeck-party .kp-coll { position: relative; margin-top: 40px; }
.koeck-party .kp-film { grid-column: 1 / 9; grid-row: 1 / 15; z-index: 1; position: relative; overflow: hidden; background: #111 center / cover no-repeat; }
.koeck-party .kp-film video { display: block; width: 100%; height: 100%; object-fit: cover; }
.koeck-party .kp-film-knopf { position: absolute; left: 14px; bottom: 14px; display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 18px 6px 6px; border: 0; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font: 600 16px/1 var(--sans); letter-spacing: .02em; cursor: pointer; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .16s var(--kp-ease), background-color .2s ease; user-select: none; -webkit-user-select: none; }
.koeck-party .kp-film-knopf small { margin-left: 4px; color: rgba(255, 255, 255, .75); font: 400 14px/1 var(--sans); }
.koeck-party .kp-film-knopf:active { transform: scale(.96); }
.koeck-party .kp-film-knopf:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 3px; }
.koeck-party .kp-play { position: relative; width: 36px; height: 36px; border-radius: 50%; background: var(--kp-rosa); }
.koeck-party .kp-play::after { content: ""; position: absolute; left: 14px; top: 11px; border-style: solid; border-width: 7px 0 7px 11px; border-color: transparent transparent transparent #000; }
@media (hover: hover) and (pointer: fine) { .koeck-party .kp-film-knopf:hover { background: rgba(0, 0, 0, .75); } }
.koeck-party .kp-c2 { --kp-dreh: 3deg; grid-column: 7 / 13; grid-row: 3 / 10; z-index: 2; margin-right: calc(var(--kp-rand) * .6); }
.koeck-party .kp-c3 { --kp-dreh: -3deg; grid-column: 5 / 12; grid-row: 12 / 18; z-index: 3; }
/* Einstieg: Licht geht an, Titel kommt, Linie wird gestochen */
.koeck-party.kp-js .kp-licht { opacity: 0; transition: opacity 1.4s ease .1s; }
.koeck-party.kp-js.kp-da .kp-licht { opacity: .5; }
.koeck-party.kp-js .kp-held-text > * { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .9s var(--kp-ease); }
.koeck-party.kp-js.kp-da .kp-held-text > * { opacity: 1; transform: none; }
.koeck-party.kp-js.kp-da .kp-vorspann { transition-delay: .18s; }
.koeck-party.kp-js .kp-haut path { stroke-dashoffset: 900; }
.koeck-party.kp-js.kp-da .kp-haut path { stroke-dashoffset: 0; transition: stroke-dashoffset .9s cubic-bezier(.65, 0, .35, 1) .55s; }
@media (prefers-reduced-motion: no-preference) {
	.koeck-party.kp-da .kp-licht--r { animation: kp-schwenk-r 9s ease-in-out 1.6s infinite alternate; }
	.koeck-party.kp-da .kp-licht--g { animation: kp-schwenk-g 11s ease-in-out 1.6s infinite alternate; }
}
@keyframes kp-schwenk-r { from { transform: rotate(16deg); } to { transform: rotate(4deg); } }
@keyframes kp-schwenk-g { from { transform: rotate(-16deg); } to { transform: rotate(-6deg); } }

/* ---------- Text ---------- */
.koeck-party .kp-ab { position: relative; padding-top: 72px; }
.koeck-party .kp-spalte { position: relative; max-width: var(--kp-sp); margin: 0 auto; padding: 0 var(--kp-rand); box-sizing: content-box; }
.koeck-party .kp-spalte::after { content: ""; display: table; clear: both; }
.koeck-party .kp-h { margin: 0 0 22px; color: #fff; font: 300 clamp(32px, 8.4vw, 56px)/1.02 var(--serif); letter-spacing: -.02em; text-wrap: balance; hyphens: manual; }
.koeck-party .kp-p { margin: 0 0 1.1em; hyphens: auto; text-wrap: pretty; }
.koeck-party .kp-gross { color: #fff; font: 300 clamp(23px, 5.9vw, 31px)/1.3 var(--serif); letter-spacing: -.005em; hyphens: manual; }
.koeck-party .kp-satz { margin: 8px auto 0; max-width: 20em; color: #fff; font: 300 clamp(24px, 6.4vw, 36px)/1.18 var(--serif); text-align: center; text-wrap: balance; hyphens: manual; }
.koeck-party figcaption { color: var(--kp-grau); font: 300 18px/1.3 var(--serif); }

/* Fotos im Text: am Handy halb im Rand, ab 1000 px ganz im Rand neben der Spalte */
.koeck-party .kp-s { margin-bottom: 20px; }
.koeck-party .kp-s--rechts { width: 40%; aspect-ratio: 4 / 5; margin: 0 calc(var(--kp-rand) * -1 + 14px) -40px auto; z-index: 2; }
.koeck-party .kp-s--breit { width: calc(100% + var(--kp-rand)); margin: 0 0 26px calc(var(--kp-rand) * -1); aspect-ratio: 16 / 10; }

/* ---------- 2 · Ankommen: Karte, Gäste, Goodie-Bag ---------- */
.koeck-party .kp-karte { max-width: 620px; margin: 8px auto 48px; padding: 0 calc(var(--kp-rand) - 8px); }
.koeck-party .kp-karte svg { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-party .kp-k-weg-grund path { fill: none; stroke: #333; stroke-width: 2; stroke-dasharray: 2 5; stroke-linecap: round; }
.koeck-party .kp-k-weg path { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.koeck-party .kp-k-weg [data-kp-weg="leo"] { stroke: var(--kp-rosa); }
.koeck-party .kp-k-weg [data-kp-weg="mzl"] { stroke: var(--kp-gruen); }
.koeck-party .kp-k-weg [data-kp-weg="wn"] { stroke: #fff; }
.koeck-party .kp-k-ort circle { fill: #000; stroke: var(--kp-ink); stroke-width: 1.6; }
.koeck-party .kp-karte text { fill: var(--kp-ink); font: 600 15px/1 var(--sans); letter-spacing: .02em; } /* SVG schrumpft mit: bei 320 px noch 13 px */
.koeck-party .kp-karte .kp-k-klein { fill: var(--kp-grau); font-weight: 400; font-size: 14px; }
.koeck-party .kp-karte .kp-k-ziel-name { fill: #fff; font: 300 19px/1 var(--serif); letter-spacing: 0; }
.koeck-party .kp-k-schuppen { fill: #1b1b1b; stroke: #fff; stroke-width: 1.6; stroke-linejoin: round; }
.koeck-party .kp-k-stand { fill: none; stroke: #fff; stroke-width: 1; }
.koeck-party .kp-k-dreh { fill: #000; stroke: #fff; stroke-width: 1.4; }
.koeck-party .kp-k-glanz { fill: var(--kp-rosa); opacity: 0; transform: scale(.6); transform-box: fill-box; transform-origin: center; transition: opacity .6s ease, transform .9s var(--kp-ease); }
.koeck-party .kp-karte.kp-angekommen .kp-k-glanz { opacity: .28; transform: none; }
.koeck-party .kp-k-fuss { fill: none; stroke: var(--kp-grau); stroke-width: 1.4; stroke-dasharray: 1.5 4; stroke-linecap: round; }
.koeck-party .kp-k-back { fill: var(--kp-grau); }
.koeck-party .kp-bus { opacity: 0; }
.koeck-party .kp-bus-i rect { fill: #fff; }
.koeck-party .kp-bus-i path { fill: none; stroke: #000; stroke-width: 2.2; stroke-linecap: round; }
.koeck-party .kp-gaeste { display: grid; grid-template-columns: repeat(20, 1fr); gap: 6px; max-width: 440px; margin: 26px auto 0; padding: 0 8px; }
.koeck-party .kp-gaeste i { position: relative; aspect-ratio: 1; border-radius: 50%; border: 1.5px solid #4a4a4a; }
/* besetzter Platz: weiße Scheibe darüber, nur opacity (1.57.0, statt Hintergrund- und Randfarbe) */
.koeck-party .kp-gaeste i.kp-ja::after { content: ""; position: absolute; inset: -1.5px; border-radius: 50%; background: #fff; opacity: 0; transition: opacity .3s ease; }
.koeck-party .kp-gaeste i.kp-an::after { opacity: 1; }
.koeck-party .kp-gaeste .kp-mehr { border: 0; position: relative; }
.koeck-party .kp-gaeste .kp-mehr::before, .koeck-party .kp-gaeste .kp-mehr::after { content: ""; position: absolute; left: 50%; top: 50%; width: 90%; height: 1.5px; background: var(--kp-grau); transform: translate(-50%, -50%); }
.koeck-party .kp-gaeste .kp-mehr::after { transform: translate(-50%, -50%) rotate(90deg); }
.koeck-party .kp-karte-zahl { display: flex; align-items: baseline; justify-content: center; gap: 12px; margin-top: 18px; padding: 0 8px; color: var(--kp-ink); font: 400 17px/1.3 var(--sans); text-align: left; }
.koeck-party .kp-karte-zahl b { color: #fff; font: 300 64px/.9 var(--serif); font-variant-numeric: tabular-nums; min-width: 1.1em; text-align: right; }
.koeck-party .kp-karte-zahl span { max-width: 13em; }

.koeck-party .kp-sack-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; align-items: start; max-width: 860px; margin: 36px auto 40px; padding: 0 var(--kp-rand); }
.koeck-party .kp-s--sack1, .koeck-party .kp-s--sack2 { aspect-ratio: 4 / 5; margin: 0; }
.koeck-party .kp-s--sack2 { margin-top: 34px; }
.koeck-party .kp-sack { grid-column: 1 / -1; grid-row: 2; margin-top: -10px; }
.koeck-party .kp-sack-knopf { display: block; position: relative; width: min(100%, 320px); margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer; user-select: none; -webkit-user-select: none; }
.koeck-party .kp-sack-knopf svg { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-party .kp-sack-knopf:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 6px; border-radius: 8px; }
.koeck-party .kp-l { fill: none; stroke: var(--kp-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-fl { fill: #000; }
.koeck-party .kp-tuete { fill: #111; }
.koeck-party .kp-sack-70 { fill: var(--kp-ink); font: 300 22px/1 var(--serif); }
.koeck-party .kp-sack-70--gross { font-size: 46px; fill: #fff; }
.koeck-party .kp-sack-tuete { transform-box: fill-box; transform-origin: 50% 100%; transition: transform .2s var(--kp-ease); }
.koeck-party .kp-sack-knopf:active .kp-sack-tuete { transform: scale(.97); }
.koeck-party .kp-sack-teil { transform-box: fill-box; transform-origin: center; opacity: 0; transform: translate(var(--x), var(--y)) scale(.35); transition: transform .55s cubic-bezier(.34, 1.4, .64, 1), opacity .25s ease; }
.koeck-party [data-kp-teil="shirt"] { --x: 54px; --y: 84px; --r: -10deg; }
.koeck-party [data-kp-teil="tasche"] { --x: -56px; --y: 84px; --r: 8deg; }
.koeck-party [data-kp-teil="socken"] { --x: -2px; --y: 104px; --r: 4deg; }
.koeck-party .kp-sack.kp-auf .kp-sack-teil { opacity: 1; transform: rotate(var(--r)); }
.koeck-party .kp-sack.kp-auf [data-kp-teil="tasche"] { transition-delay: .07s; }
.koeck-party .kp-sack.kp-auf [data-kp-teil="socken"] { transition-delay: .14s; }
.koeck-party .kp-sack-tipp { display: block; margin-top: 10px; color: var(--kp-grau); font: 600 14px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; text-align: center; }
.koeck-party .kp-sack-tipp::before { content: ""; display: inline-block; width: 8px; height: 8px; margin: 0 10px 1px 0; border-radius: 50%; background: var(--kp-rosa); }
.koeck-party .kp-sack.kp-auf .kp-sack-tipp { opacity: 0; }
.koeck-party .kp-sack-liste { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: -18px; list-style: none; }
.koeck-party .kp-sack-liste li { padding: 6px 12px; border: 1px solid #444; border-radius: 99px; color: var(--kp-ink); font: 400 15px/1.2 var(--sans); }
.koeck-party.kp-lauf .kp-sack-liste li { opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .4s var(--kp-ease); }
.koeck-party.kp-lauf .kp-sack.kp-auf .kp-sack-liste li { opacity: 1; transform: none; transition-delay: .25s; }
.koeck-party.kp-lauf .kp-sack.kp-auf .kp-sack-liste li + li { transition-delay: .32s; }
.koeck-party.kp-lauf .kp-sack.kp-auf .kp-sack-liste li + li + li { transition-delay: .39s; }
.koeck-party:not(.kp-lauf) .kp-sack-teil { opacity: 1; transform: rotate(var(--r)); } /* ohne Script: Inhalt liegt draußen */
.koeck-party:not(.kp-lauf) .kp-sack-tipp { display: none; }

/* ---------- 3 · Abend: Leinwand, Scheinwerfer, Ehrung, Fest ---------- */
.koeck-party .kp-rueck { position: relative; max-width: 820px; margin: 10px auto 40px; padding: 0 var(--kp-rand); }
.koeck-party .kp-leinwand { position: relative; width: 82%; }
.koeck-party .kp-lw-tuch { position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; aspect-ratio: 16 / 10; background: #efeae0; color: #111; box-shadow: 0 0 60px rgba(255, 245, 225, .15); }
.koeck-party .kp-lw-jahr { font: 300 clamp(56px, 17vw, 120px)/1 var(--serif); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.koeck-party .kp-lw-bahn { width: 54%; height: 2px; margin-top: 10px; background: rgba(0, 0, 0, .15); }
.koeck-party .kp-lw-bahn i { display: block; height: 100%; background: #111; transform-origin: 0 50%; transform: scaleX(1); }
.koeck-party .kp-s--rueck { position: absolute; right: calc(var(--kp-rand) - 8px); bottom: -62%; width: 48%; aspect-ratio: 4 / 3; --kp-dreh: 3deg; z-index: 2; }
.koeck-party .kp-ab--abend .kp-rueck + .kp-spalte { margin-top: 42%; }

.koeck-party .kp-spots { max-width: 1100px; margin: 44px auto 0; padding: 0 var(--kp-rand); }
.koeck-party .kp-spot-reihe { display: grid; grid-template-columns: repeat(5, 1fr); gap: 34px 6px; list-style: none; }
.koeck-party .kp-spot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; aspect-ratio: .7; padding-bottom: 2px; }
.koeck-party .kp-kegel { position: absolute; inset: -18px -6% 18px; background: linear-gradient(to bottom, rgba(255, 244, 214, .5), rgba(255, 244, 214, .03)); clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%); opacity: .1; transition: opacity .5s ease; } /* taste-skill-ignore: Scheinwerferkegel */
.koeck-party .kp-spot b { position: relative; color: #fff; font: 300 clamp(34px, 9vw, 52px)/1 var(--serif); opacity: .35; transition: opacity .5s ease; }
.koeck-party .kp-spot small { position: relative; margin-top: 4px; color: var(--kp-grau); font: 600 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.koeck-party .kp-spot.kp-an .kp-kegel, .koeck-party .kp-spot.kp-an b { opacity: 1; } /* party.js schaltet beim Scrollen einen nach dem anderen (1.57.0) */
.koeck-party .kp-saal { display: grid; grid-template-columns: repeat(14, 1fr); gap: 9px; max-width: 290px; margin: 40px auto 0; }
.koeck-party .kp-saal i { position: relative; aspect-ratio: 1; border-radius: 50%; background: #2a2a2a; }
/* Licht im Saal: helle Scheibe mit Schein darüber, nur opacity (1.57.0, statt Hintergrund und Schatten zu animieren) */
.koeck-party .kp-saal i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #fff3d6; box-shadow: 0 0 10px rgba(255, 243, 214, .55); opacity: 0; transition: opacity .4s ease; }
.koeck-party .kp-saal i.kp-an::after { opacity: 1; }
.koeck-party .kp-spot-satz { margin-top: 20px; color: #fff; font: 300 clamp(24px, 6.4vw, 34px)/1.15 var(--serif); text-align: center; }
.koeck-party.kp-lauf .kp-spot-satz { opacity: 0; transform: translateY(10px); transition: opacity .45s var(--kp-ease), transform .6s var(--kp-ease); }
.koeck-party.kp-lauf .kp-spots.kp-alle .kp-spot-satz { opacity: 1; transform: none; transition: opacity 1.1s var(--kp-ease), transform 1.4s var(--kp-ease); }
.koeck-party:not(.kp-lauf) .kp-spots .kp-kegel, .koeck-party:not(.kp-lauf) .kp-spot b { opacity: 1; }
.koeck-party:not(.kp-lauf) .kp-saal i::after, .koeck-party:not(.kp-lauf) .kp-gaeste i.kp-ja::after { opacity: 1; }

.koeck-party .kp-ehrung { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); max-width: 1180px; margin: 64px auto 0; }
.koeck-party .kp-bild { margin: 0; }
.koeck-party .kp-bild img { aspect-ratio: 3 / 2; height: auto; }
.koeck-party .kp-bild figcaption { max-width: 34em; margin-top: 12px; padding: 0 var(--kp-rand); }
.koeck-party .kp-bild--wko { grid-column: 1 / -1; grid-row: 2; }
.koeck-party .kp-s--ehrung { grid-column: 1 / 8; grid-row: 1; margin: 0 0 -14% var(--kp-rand); aspect-ratio: 3 / 2; z-index: 2; }
.koeck-party .kp-spalte--party { margin-top: 56px; }
.koeck-party .kp-fest { position: relative; max-width: 1300px; margin: 18px auto 0; padding: 0 0 0 0; }
.koeck-party .kp-fe1 { grid-column: 1 / 12; grid-row: 1 / 8; z-index: 1; }
.koeck-party .kp-fe2 { grid-column: 6 / 13; grid-row: 6 / 15; z-index: 2; }
.koeck-party .kp-fe3 { grid-column: 1 / 7; grid-row: 12 / 18; z-index: 3; --kp-dreh: -2deg; }
.koeck-party .kp-fe4 { grid-column: 2 / 8; grid-row: 18 / 23; z-index: 4; --kp-dreh: 3deg; }
.koeck-party .kp-fe5 { grid-column: 7 / 13; grid-row: 20 / 27; z-index: 3; }
.koeck-party .kp-bild--breit { max-width: 1000px; margin: 48px auto 0; }

/* Fotobox: die Kabine (galerie.js) mit Hinweis */

/* ---------- 4 · Tattoo-Station ---------- */
.koeck-party .kp-ab--tattoo { padding-top: 96px; }
.koeck-party .kp-tat-coll { max-width: 1180px; margin: 0 auto 40px; }
.koeck-party .kp-t1 { grid-column: 1 / 12; grid-row: 1 / 9; z-index: 1; }
.koeck-party .kp-t2 { grid-column: 8 / 13; grid-row: 6 / 13; z-index: 2; margin-right: var(--kp-rand); }

.koeck-party .kp-stich { max-width: 620px; margin: 30px auto 0; padding: 0 var(--kp-rand); }
.koeck-party .kp-stich-tipp { margin-bottom: 14px; color: #fff; font: 300 22px/1.2 var(--serif); text-align: center; }
.koeck-party .kp-flash { position: relative; max-width: 520px; margin: 0 auto; padding: 30px 18px calc(var(--kp-mw, 80px) * 1.02 + 10px); background: var(--kp-papier); color: #1a1a1a; transform: rotate(-.8deg); box-shadow: 0 22px 50px rgba(0, 0, 0, .6); }
.koeck-party .kp-flash-tape { position: absolute; top: -10px; width: 74px; height: 24px; background: rgba(240, 232, 205, .82); box-shadow: 0 1px 2px rgba(0, 0, 0, .15); }
.koeck-party .kp-flash-tape--l { left: 14px; transform: rotate(-6deg); }
.koeck-party .kp-flash-tape--r { right: 14px; transform: rotate(5deg); }
.koeck-party .kp-motive { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 14px; padding-top: 16px; border-top: 1px dashed rgba(0, 0, 0, .18); }
.koeck-party .kp-motiv { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px; border: 0; border-radius: 6px; background: none; color: #222; cursor: pointer; transition: transform .16s var(--kp-ease), background-color .2s ease; user-select: none; -webkit-user-select: none; }
.koeck-party .kp-motiv:active { transform: scale(.97); }
.koeck-party .kp-motiv:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 2px; }
.koeck-party .kp-motiv svg { width: 78%; aspect-ratio: 1; overflow: visible; }
.koeck-party .kp-motiv--gross { width: 100%; }
.koeck-party .kp-motiv--gross svg { width: 100%; aspect-ratio: 186 / 170; }
.koeck-party .kp-motiv--gross .kp-vorlage :is(path, ellipse) { stroke-width: .6; }
.koeck-party .kp-vorlage g[clip-path] path { stroke-dasharray: none; opacity: .45; } /* Gitter in der Pausvorlage durchgezogen */
.koeck-party .kp-motiv--gross .kp-tinte :is(path, ellipse) { stroke-width: 1.15; }
.koeck-party .kp-motiv span { font: 600 13px/1.15 var(--sans); text-align: center; hyphens: manual; }
/* frisch gestochen: der Strich glänzt kurz rötlich, dann wird er ruhig */
.koeck-party .kp-tinte { transition: filter 2.4s ease; }
.koeck-party .kp-motiv.kp-frisch .kp-tinte { filter: drop-shadow(0 0 1.6px rgba(214, 60, 70, .75)); transition-duration: .2s; }
/* Tätowiermaschine (Spulenmaschine): Nadelspitze sitzt im Ursprung (21 | 142 von 100 × 150) */
.koeck-party .kp-flash { --kp-mw: clamp(70px, 19vw, 100px); }
.koeck-party .kp-maschine { position: absolute; left: 0; top: 0; width: var(--kp-mw); margin: calc(var(--kp-mw) * -1.42) 0 0 calc(var(--kp-mw) * -.21); transform-origin: 21% 94.7%; pointer-events: none; z-index: 3; filter: drop-shadow(6px 10px 6px rgba(0, 0, 0, .3)); transition: transform .55s var(--kp-ease); }
.koeck-party .kp-maschine.kp-zieht { transition: none; }
.koeck-party .kp-maschine svg { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-party .kp-ma-kabel { fill: none; stroke: #1d1d1f; stroke-width: 3.5; stroke-linecap: round; }
.koeck-party .kp-ma-stahl { fill: #6f7178; stroke: #2b2b2e; stroke-width: 1.2; stroke-linejoin: round; }
.koeck-party .kp-ma-spule { fill: #b8733a; stroke: #6b3d16; stroke-width: 1.2; }
.koeck-party .kp-ma-draht { stroke: #8a4f22; stroke-width: .8; }
.koeck-party .kp-ma-anker rect { fill: #9a9ca3; stroke: #2b2b2e; stroke-width: 1.1; }
.koeck-party .kp-ma-anker path { fill: none; stroke: #c9c9cf; stroke-width: 1.6; }
.koeck-party .kp-ma-schraube { fill: #c9c9cf; stroke: #2b2b2e; stroke-width: 1; }
.koeck-party .kp-ma-rohr { fill: #a9abb2; stroke: #2b2b2e; stroke-width: 1.1; }
.koeck-party .kp-ma-griff { fill: #1d1d1f; stroke: #000; stroke-width: 1; }
.koeck-party .kp-ma-rillen { stroke: #3d3d40; stroke-width: 1; }
.koeck-party .kp-ma-spitze { fill: #d6d7dc; stroke: #2b2b2e; stroke-width: 1; }
.koeck-party .kp-ma-nadel { stroke: #5a5a60; stroke-width: 1.4; stroke-linecap: round; }
@media (prefers-reduced-motion: no-preference) {
	.koeck-party .kp-flash.kp-summt .kp-ma-nadel { animation: kp-stechen .05s linear infinite; } /* Nadel sticht auf und ab */
	.koeck-party .kp-flash.kp-summt .kp-ma-anker { animation: kp-anker .05s linear infinite; }
	.koeck-party .kp-flash.kp-summt .kp-maschine svg { animation: kp-summen .07s linear infinite; }
}
@keyframes kp-stechen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@keyframes kp-anker { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
@keyframes kp-summen { 0% { transform: translate(0, 0); } 25% { transform: translate(.5px, -.4px); } 50% { transform: translate(-.4px, .5px); } 75% { transform: translate(.4px, .3px); } 100% { transform: translate(0, 0); } }
/* Ton an/aus */
.koeck-party .kp-ton { position: absolute; top: 20px; right: 10px; z-index: 4; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(0, 0, 0, .06); color: #222; cursor: pointer; }
.koeck-party .kp-ton svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.koeck-party .kp-ton[aria-pressed="true"] .kp-ton-aus, .koeck-party .kp-ton[aria-pressed="false"] .kp-ton-an { display: none; }
.koeck-party .kp-ton:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 2px; }
.koeck-party .kp-haptik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); pointer-events: none; }
.koeck-party:not(.kp-lauf) .kp-ton { display: none; }
.koeck-party:not(.kp-lauf) .kp-maschine { display: none; }
.koeck-party .kp-vorlage :is(path, ellipse) { fill: none; stroke: var(--kp-stencil); stroke-width: .8; stroke-dasharray: .02 .015; opacity: .75; } /* Striche skalieren mit (pathLength=1 verträgt kein non-scaling-stroke) */
.koeck-party .kp-tinte :is(path, ellipse) { fill: none; stroke: #111; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 1.1; stroke-dashoffset: 1.05; } /* 1.05: am Anfang keine runden Strichenden als Punkte */
.koeck-party:not(.kp-lauf) .kp-tinte :is(path, ellipse) { stroke-dashoffset: 0; }
.koeck-party .kp-uhr { display: flex; align-items: center; gap: 12px; margin-top: 28px; color: var(--kp-ink); font: 600 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; }
.koeck-party .kp-uhr i { flex: 1; height: 3px; background: #2e2e2e; overflow: hidden; }
.koeck-party .kp-uhr b { display: block; height: 100%; background: linear-gradient(90deg, var(--kp-rosa), var(--kp-gruen)); transform-origin: 0 50%; transform: scaleX(1); } /* taste-skill-ignore: Abendlauf von Rosa nach Grün wie das Licht */
.koeck-party .kp-tat-ende { position: relative; display: grid; grid-template-columns: repeat(12, 1fr); max-width: 1180px; margin: 64px auto 0; }
.koeck-party .kp-bild--arm { grid-column: 1 / -1; grid-row: 2; }
.koeck-party .kp-s--t3 { grid-column: 6 / 13; grid-row: 1; margin: 0 var(--kp-rand) -18% 0; aspect-ratio: 4 / 3; z-index: 2; --kp-dreh: 2deg; }

/* ---------- 5 · Zitat ---------- */
.koeck-party .kp-zitat { position: relative; display: flex; flex-direction: column; justify-content: center; min-height: 86svh; margin-top: 96px; padding: 80px var(--kp-rand); overflow: hidden; }
.koeck-party .kp-zitat-bild { position: absolute; inset: 0; opacity: .38; }
.koeck-party .kp-zitat blockquote { position: relative; max-width: 15em; margin: 0 auto; color: #fff; font: 300 clamp(32px, 8.6vw, 74px)/1.08 var(--serif); letter-spacing: -.015em; text-wrap: balance; hyphens: manual; }
.koeck-party .kp-zitat blockquote p::before { content: "„"; margin-left: -.42em; }
.koeck-party .kp-zitat blockquote p::after { content: "“"; }
.koeck-party .kp-zitat figcaption { position: relative; max-width: calc(15 * clamp(32px, 8.6vw, 74px)); width: 100%; margin: 24px auto 0; color: #fff; font: 600 13px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; }

/* ---------- 6 · Bildstrecke ---------- */
.koeck-party .kp-bilder { padding: 72px 0 0; }
.koeck-party .kp-bilder .wp-block-heading { margin: 0 auto 26px; padding: 0 var(--kp-rand); max-width: var(--kp-sp); box-sizing: content-box; color: #fff; font: 300 clamp(34px, 9vw, 64px)/1 var(--serif); letter-spacing: -.02em; }


/* ---------- Blumenstock mit Kärtchen (jede:r Geehrte bekam einen) ---------- */
.koeck-party .kp-blumen-reihe { display: flex; flex-direction: column; align-items: center; max-width: 900px; margin: 56px auto 0; padding: 0 var(--kp-rand); }
.koeck-party .kp-s--calla { align-self: flex-start; width: 48%; aspect-ratio: 4 / 5; margin: 0 0 -60px; z-index: 1; }
.koeck-party .kp-blumen { position: relative; z-index: 2; width: min(100%, 360px); aspect-ratio: 1; margin-bottom: 26%; }
.koeck-party .kp-bl-stock { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.koeck-party .kp-bl-l { fill: none; stroke: var(--kp-ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-bl-blatt { fill: #12261b; stroke: var(--kp-gruen); stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-bl-bluete { fill: var(--kp-rosa); stroke: #fff; stroke-width: 1.4; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-bl-kolben { fill: none; stroke: #f3d27c; stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-bl-topf { fill: #151515; stroke: var(--kp-ink); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-bl-stab { fill: none; stroke: #8a8378; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-bl-knopf { fill: #8a8378; }
.koeck-party .kp-bl-wiegen { transform-box: view-box; transform-origin: 110px 230px; }
@media (prefers-reduced-motion: no-preference) { .koeck-party .kp-bl-wiegen { animation: kp-wiegen 6s ease-in-out infinite alternate; } }
@keyframes kp-wiegen { from { transform: rotate(-1.2deg); } to { transform: rotate(1.2deg); } }
/* Kärtchen hängt am Stab (232 | 138 von 300) und schwingt */
.koeck-party .kp-karte-haenger { position: absolute; left: 77.3%; top: 46%; width: 40%; margin-left: -20%; transform-origin: 50% 0; transform: rotate(var(--kp-schw, 3deg)); cursor: grab; touch-action: pan-y; outline: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.koeck-party .kp-karte-haenger::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 16px; background: #cfc8bb; }
.koeck-party .kp-karte-haenger:focus-visible .kp-kaertchen { outline: 3px solid var(--kp-rosa); outline-offset: 4px; }
@media (prefers-reduced-motion: no-preference) { .koeck-party .kp-karte-haenger:not(.kp-angefasst) { animation: kp-schwingen 3.2s ease-in-out infinite alternate; } }
@keyframes kp-schwingen { from { transform: rotate(5deg); } to { transform: rotate(-3deg); } }
.koeck-party .kp-kaertchen { position: relative; margin-top: 16px; padding: 22px 10px 12px; border-radius: 4px; background: #fbf8f2; color: #111; text-align: center; box-shadow: 0 14px 30px rgba(0, 0, 0, .55); clip-path: polygon(14% 0, 86% 0, 100% 9%, 100% 100%, 0 100%, 0 9%); } /* Anhänger-Form mit abgeschrägten Ecken */
.koeck-party .kp-kae-loch { position: absolute; left: 50%; top: 7px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #000; box-shadow: inset 0 0 0 1.5px #cfc8bb; }
.koeck-party .kp-kaertchen img { width: 70%; height: auto; margin: 0 auto 6px; object-fit: contain; }
.koeck-party .kp-kae-h { font: 400 clamp(13px, 3.6vw, 16px)/1.1 var(--sans); letter-spacing: -.005em; text-wrap: balance; }
.koeck-party .kp-kae-k { margin-top: 6px; padding-top: 6px; border-top: 1px solid #ddd5c6; color: #3a3a3a; font: 400 12px/1.25 var(--sans); text-wrap: balance; }
@media (min-width: 700px) {
	.koeck-party .kp-blumen-reihe { flex-direction: row; justify-content: center; align-items: flex-start; gap: 4vw; }
	.koeck-party .kp-s--calla { width: min(34%, 280px); margin: 60px 0 0; }
}

/* ---------- Tattoo: Haut mit Folie und Tape, darauf das Motiv ---------- */
.koeck-party .kp-vorlage text, .koeck-party .kp-tinte-spaet text { font: 500 13px/1 var(--sans); letter-spacing: .04em; }
.koeck-party .kp-vorlage text { fill: none; stroke: var(--kp-stencil); stroke-width: .6; opacity: .7; }
.koeck-party .kp-vorlage ellipse:not([pathLength]) { fill: none; stroke: var(--kp-stencil); stroke-width: .6; stroke-dasharray: 1.5 1.5; }
.koeck-party .kp-tinte-spaet { opacity: 0; transition: opacity .4s ease; }
.koeck-party .kp-tinte-spaet text, .koeck-party .kp-tinte-spaet ellipse { fill: #1a1410; }
.koeck-party .kp-tinte-spaet .kp-glanz { fill: #f0bf97; }
.koeck-party .kp-motiv.kp-fertig .kp-tinte-spaet, .koeck-party:not(.kp-lauf) .kp-tinte-spaet { opacity: 1; }
.koeck-party .kp-vorlage { transition: opacity .5s ease; }
.koeck-party .kp-motiv.kp-fertig .kp-vorlage, .koeck-party:not(.kp-lauf) .kp-vorlage { opacity: 0; } /* fertig gestochen: Pausvorlage weg */
.koeck-party:not(.kp-lauf) :is(.kp-film-knopf, .kp-stich-tipp, .kp-sack-tipp) { display: none; }
.koeck-party:not(.kp-lauf) :is(.kp-motiv, .kp-f, .kp-karte-haenger) { pointer-events: none; }
.koeck-party .kp-box-roh { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(min(46%, 280px), 1fr)); gap: 10px; max-width: 1100px; margin: 0 auto; padding: 0 var(--kp-rand); }
.koeck-party .kp-box-roh > figure { width: auto !important; margin: 0 !important; }
.koeck-party .kp-box-roh img { height: auto; aspect-ratio: 3 / 2; }

/* ---------- Fotobox-Ecke ---------- */
.koeck-party .kp-fotobox { position: relative; margin-top: 110px; padding: 64px var(--kp-rand) 72px; background: #0d0b0c; overflow: hidden; }
.koeck-party .kp-fb-lichter { position: absolute; left: 0; right: 0; top: 10px; display: flex; justify-content: space-around; height: 44px; pointer-events: none; }
.koeck-party .kp-fb-lichter::before { content: ""; position: absolute; left: -2%; right: -2%; top: 0; height: 30px; border-bottom: 1px solid #3a3433; border-radius: 0 0 50% 50% / 0 0 100% 100%; }
.koeck-party .kp-fb-lichter i { position: relative; top: var(--y); width: 7px; height: 7px; border-radius: 50%; background: #ffd89a; box-shadow: 0 0 10px 3px rgba(255, 196, 120, .55); }
@media (prefers-reduced-motion: no-preference) { .koeck-party .kp-fotobox.kp-im-bild .kp-fb-lichter i { animation: kp-glimm 2.6s ease-in-out calc(var(--i) * -0.37s) infinite alternate; } }
@keyframes kp-glimm { from { opacity: .45; } to { opacity: 1; } }
.koeck-party .kp-fb-ecke { display: grid; gap: 28px; justify-items: center; max-width: 980px; margin: 0 auto; }
.koeck-party .kp-fb-kabine { position: relative; width: min(64vw, 280px); padding: 0; border: 0; background: none; color: #fff; cursor: pointer; transition: transform .2s var(--kp-ease); user-select: none; -webkit-user-select: none; }
.koeck-party .kp-fb-kabine:active { transform: scale(.97); }
.koeck-party .kp-fb-kabine:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 8px; border-radius: 12px; }
.koeck-party .kp-fb-kabine svg { display: block; width: 100%; height: auto; overflow: visible; }
.koeck-party .kp-fbk-l { fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.koeck-party .kp-fbk-neon { fill: none; stroke: var(--kp-rosa); stroke-width: 2.4; }
.koeck-party .kp-fbk-neon-glanz { fill: none; stroke: var(--kp-rosa); stroke-width: 10; opacity: .28; filter: blur(4px); }
.koeck-party .kp-fbk-neon-text { fill: var(--kp-rosa); font: 600 16px/1 var(--sans); letter-spacing: .2em; }
.koeck-party .kp-fbk-blitz { fill: #fff3d6; }
.koeck-party .kp-fbk-licht { fill: #fff; opacity: 0; }
.koeck-party .kp-fb-kabine.kp-blitzt .kp-fbk-licht { animation: kp-lock 1s ease-out; }
@keyframes kp-lock { 0%, 100% { opacity: 0; } 12% { opacity: 1; } 34% { opacity: 0; } }
.koeck-party .kp-fbk-vorhang path { fill: none; stroke-width: 2.2; stroke-linecap: round; transform-box: fill-box; transform-origin: 50% 0; }
.koeck-party .kp-fbk-vorhang path:nth-child(3n+1) { stroke: #c9c9d1; }
.koeck-party .kp-fbk-vorhang path:nth-child(3n+2) { stroke: var(--kp-rosa); }
.koeck-party .kp-fbk-vorhang path:nth-child(3n) { stroke: #e7c46a; }
@media (prefers-reduced-motion: no-preference) { .koeck-party .kp-fotobox.kp-im-bild .kp-fbk-vorhang path { animation: kp-lametta 3.4s ease-in-out calc(var(--i) * -0.23s) infinite alternate; } }
@keyframes kp-lametta { from { transform: skewX(-2.5deg); } to { transform: skewX(2.5deg); } }
@media (hover: hover) and (pointer: fine) { .koeck-party .kp-fb-kabine:hover .kp-fbk-vorhang path { transform: skewX(-7deg) scaleX(.9); } }
.koeck-party .kp-fbk-abzug { position: absolute; left: 6.5%; top: 60.5%; width: 30%; padding: 3% 3% 7%; background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, .5); transform: rotate(-4deg); transform-origin: 50% 0; transition: transform .7s var(--kp-ease), opacity .3s ease; }
.koeck-party .kp-fbk-abzug img { aspect-ratio: 3 / 2; height: auto; }
.koeck-party .kp-fbk-abzug.kp-rein { transform: rotate(-4deg) translateY(-30%); opacity: 0; transition: none; }
.koeck-party .kp-fb-text { display: grid; justify-items: center; gap: 16px; text-align: center; }
.koeck-party .kp-fb-h { margin: 14px 0 0; }
.koeck-party .kp-fb-satz { margin-top: -6px; color: var(--kp-rosa); font: 300 clamp(22px, 5.6vw, 28px)/1.15 var(--serif); }
.koeck-party .kp-fb-tipp { max-width: 22em; color: var(--kp-ink); font: 400 18px/1.45 var(--sans); }
.koeck-party .kp-fb-los { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: 99px; background: var(--kp-rosa); color: #000; font: 600 17px/1 var(--sans); letter-spacing: .02em; cursor: pointer; transition: transform .16s var(--kp-ease); user-select: none; -webkit-user-select: none; }
.koeck-party .kp-fb-los::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #000; box-shadow: 0 0 0 3px rgba(0, 0, 0, .2); }
.koeck-party .kp-fb-los:active { transform: scale(.96); }
.koeck-party .kp-fb-los:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.koeck-party:not(.kp-lauf) .kp-fotobox { display: none; } /* ohne Script: die Galerie am Ende */
.koeck-party.kp-lauf .kp-box-galerie { display: none; }
@media (min-width: 800px) {
	.koeck-party .kp-fb-ecke { grid-template-columns: auto 1fr; align-items: center; gap: 6vw; justify-items: start; }
	.koeck-party .kp-fb-text { justify-items: start; text-align: left; }
	.koeck-party .kp-fb-kabine { width: 300px; }
}

/* ---------- Tablet ---------- */
@media (min-width: 600px) {
	.koeck-party .kp-s--rechts { width: 38%; margin-right: calc(var(--kp-rand) * -1); }
	.koeck-party .kp-sack-reihe { grid-template-columns: 1fr 1.5fr 1fr; gap: 24px; align-items: center; }
	.koeck-party .kp-sack { grid-column: 2; grid-row: 1; margin-top: 0; }
	.koeck-party .kp-s--sack2 { margin-top: 70px; }
	.koeck-party .kp-spot-reihe { grid-template-columns: repeat(10, 1fr); gap: 4px; }
	.koeck-party .kp-spot b { font-size: clamp(30px, 4.4vw, 54px); }
	.koeck-party .kp-saal { grid-template-columns: repeat(35, 1fr); max-width: 900px; gap: 8px; }
}

/* ---------- Desktop: Fotos neben der Spalte, Collagen breiter ---------- */
@media (min-width: 1000px) {
	.koeck-party { --kp-m: calc((min(100vw, 1440px) - var(--kp-sp)) / 2 - var(--kp-rand)); } /* Platz neben der Lesespalte */
	.koeck-party .kp-held { display: grid; grid-template-columns: 1.15fr 1fr; align-items: center; min-height: 100svh; padding-top: 0; }
	.koeck-party .kp-coll .kp-raster { --kp-z: min(calc(100cqw / 12), 7svh); }
	.koeck-party .kp-coll { grid-column: 1; grid-row: 1; margin-top: 0; }
	.koeck-party .kp-film { grid-column: 4 / 10; grid-row: 1 / 12; }
	.koeck-party .kp-c2 { grid-column: 9 / 13; grid-row: 7 / 12; margin-right: 0; }
	.koeck-party .kp-c3 { grid-column: 1 / 5; grid-row: 3 / 8; }
	.koeck-party .kp-held-text { grid-column: 2; grid-row: 1; padding: 90px var(--kp-rand) 40px 4vw; }
	.koeck-party .kp-titel { font-size: clamp(64px, 6.4vw, 92px); }
	.koeck-party .kp-ab { padding-top: 110px; }
	.koeck-party .kp-ab--shuttle .kp-karte { max-width: 700px; }
	.koeck-party .kp-rueck { display: grid; grid-template-columns: 1fr; max-width: 1100px; }
	.koeck-party .kp-leinwand { width: 64%; }
	.koeck-party .kp-s--rueck { width: 40%; bottom: -12%; right: calc(var(--kp-rand) + 2%); }
	.koeck-party .kp-ab--abend .kp-rueck + .kp-spalte { margin-top: 110px; }
	.koeck-party .kp-ehrung { grid-template-columns: repeat(24, 1fr); padding: 0 var(--kp-rand); }
	.koeck-party .kp-s--ehrung { grid-column: 1 / 10; grid-row: 1; margin: 18% 0 0 0; }
	.koeck-party .kp-bild--wko { grid-column: 8 / 25; grid-row: 1; }
	.koeck-party .kp-bild figcaption { padding: 0; }
	.koeck-party .kp-fest { padding: 0 var(--kp-rand); }
	.koeck-party :is(.kp-fest, .kp-tat-coll) .kp-raster { grid-template-columns: repeat(24, 1fr); grid-auto-rows: calc(100cqw / 24); }
	.koeck-party .kp-fe1 { grid-column: 1 / 12; grid-row: 1 / 8; }
	.koeck-party .kp-fe2 { grid-column: 11 / 17; grid-row: 4 / 12; }
	.koeck-party .kp-fe3 { grid-column: 18 / 24; grid-row: 1 / 7; }
	.koeck-party .kp-fe4 { grid-column: 4 / 10; grid-row: 8 / 13; }
	.koeck-party .kp-fe5 { grid-column: 18 / 25; grid-row: 8 / 16; }
			.koeck-party .kp-tat-coll { padding: 0 var(--kp-rand); }
	.koeck-party .kp-t1 { grid-column: 1 / 15; grid-row: 1 / 10; }
	.koeck-party .kp-t2 { grid-column: 17 / 24; grid-row: 2 / 12; margin: 0; }
	.koeck-party .kp-ab--tattoo .kp-tat-coll + .kp-spalte { margin-top: 0; }
	.koeck-party .kp-tat-ende { grid-template-columns: repeat(24, 1fr); padding: 0 var(--kp-rand); }
	.koeck-party .kp-bild--arm { grid-column: 1 / 16; grid-row: 1; }
	.koeck-party .kp-s--t3 { grid-column: 15 / 23; grid-row: 1; margin: 22% 0 0 0; }
}
@media (min-width: 1200px) {
	.koeck-party .kp-s--rechts { position: absolute; top: -30px; left: calc(100% - var(--kp-rand) + 2.5vw); width: min(calc(var(--kp-m) - 3.5vw), 300px); margin: 0; }
	.koeck-party .kp-s--breit { position: absolute; right: calc(100% - var(--kp-rand) + 2.5vw); top: 0; width: min(calc(var(--kp-m) - 3vw), 460px); margin: 0; aspect-ratio: 4 / 3; }
}
/* Handy quer und niedrige Fenster: Einstieg nicht höher als nötig */
@media (max-height: 520px) and (orientation: landscape) {
	.koeck-party .kp-titel { font-size: clamp(40px, 9svh + 2vw, 72px); }
	.koeck-party .kp-zitat { min-height: 0; }
}

/* Bewegung reduzieren: Endzustände, nichts fliegt */
@media (prefers-reduced-motion: reduce) {
	.koeck-party .kp-tinte :is(path, ellipse) { stroke-dashoffset: 0; }
	.koeck-party .kp-tinte-spaet { opacity: 1; }
	.koeck-party .kp-vorlage { opacity: 0; }
	.koeck-party *, .koeck-party *::before, .koeck-party *::after { animation: none !important; transition-duration: 0s !important; transition-delay: 0s !important; }
	.koeck-party.kp-js :is(.kp-f, .kp-bild) img { clip-path: none; }
}
@media print {
	.koeck-party :is(.kp-f, .kp-bild) img { clip-path: none !important; }
	.koeck-party :is(.kp-saal i, .kp-gaeste i.kp-ja)::after, .koeck-party .kp-spot :is(.kp-kegel, b), .koeck-party .kp-spot-satz { opacity: 1 !important; transform: none !important; } /* 1.57.0 */
	.koeck-party .kp-licht, .koeck-party .kp-fb-lichter, .koeck-party .kp-film-knopf { display: none; }
}

/* ================= Fotobox-Fenster und Kino (hängen am body, außerhalb der Story) ================= */
.kp-fbx, .kp-kino { --kp-rosa: #ff5aa5; --kp-ease: cubic-bezier(.23, 1, .32, 1); --serif: new-spirit-condensed, "Instrument Serif", Georgia, serif; --sans: acumin-pro-condensed, "Roboto Condensed", system-ui, sans-serif; position: fixed; inset: 0; z-index: 99980; color: #fff; font-family: var(--sans); overscroll-behavior: contain; -webkit-tap-highlight-color: transparent; }
.kp-fbx *, .kp-kino * { box-sizing: border-box; }
.kp-fbx[hidden], .kp-kino[hidden] { display: none; }
html.kp-fbx-auf { overflow: hidden; }
.kp-fbx button, .kp-kino button { font: inherit; color: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; }
.kp-fbx-grund { position: absolute; inset: 0; background: #0d0b0c; opacity: 0; transition: opacity .3s ease; }
.kp-fbx.kp-offen .kp-fbx-grund { opacity: 1; }
.kp-fbx-innen { position: absolute; inset: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); opacity: 0; transition: opacity .3s ease; }
.kp-fbx.kp-offen .kp-fbx-innen { opacity: 1; }
.kp-fbx-kopf { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding-left: 6px; }
.kp-fbx-titel { margin: 0; font: 300 clamp(22px, 5.6vw, 30px)/1.05 var(--serif); letter-spacing: -.01em; }
.kp-fbx-zu { flex: 0 0 auto; width: 48px; height: 48px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .12); cursor: pointer; }
.kp-fbx-zu svg { width: 22px; height: 22px; }
.kp-fbx-zu:focus-visible, .kp-fbx-req button:focus-visible, .kp-fbx-fuss button:focus-visible, .kp-abz:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 3px; }
.kp-fbx-req { display: flex; gap: 8px; overflow-x: auto; margin: 6px -12px 0; padding: 4px 12px 8px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kp-fbx-req::-webkit-scrollbar { display: none; }
.kp-fbx-req button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 0 14px; border: 1px solid rgba(255, 255, 255, .28); border-radius: 99px; background: none; font-size: 15px; font-weight: 600; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .16s var(--kp-ease); }
.kp-fbx-req button small { font-weight: 400; font-size: 13px; opacity: .7; }
.kp-fbx-req button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #000; }
.kp-fbx-req button:active { transform: scale(.96); }
.kp-fbx-buehne { position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; touch-action: pan-y; }
.kp-fbx-schlitz { position: absolute; top: 0; left: 50%; width: min(88%, 720px); height: 10px; transform: translateX(-50%); border-radius: 0 0 6px 6px; background: #1d1a1b; box-shadow: inset 0 -3px 0 #000; z-index: 50; }
.kp-fbx-stapel { position: relative; width: min(92%, 760px, calc((100% - 30px) * 1.5)); aspect-ratio: 3 / 2; }
.kp-fbx-stapel { width: min(92vw, 760px, calc((100svh - 300px) * 1.5)); }
.kp-abz { position: absolute; inset: 0; margin: 0; padding: 0; border: 0; background: #fff; box-shadow: 0 18px 50px rgba(0, 0, 0, .65); cursor: zoom-in; transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg)); transition: transform .65s var(--kp-ease), opacity .3s ease, filter .4s ease; will-change: transform; }
.kp-abz img { display: block; width: 100%; height: 100%; object-fit: cover; pointer-events: none; }
.kp-abz.kp-raus { transition: transform .9s cubic-bezier(.2, .9, .25, 1); }
.kp-abz.kp-unten { filter: brightness(.7); cursor: default; }
.kp-abz.kp-zieht { transition: none; cursor: grabbing; }
.kp-fbx-zaehler { position: absolute; inset: 0; display: grid; place-items: center; z-index: 70; font: 300 clamp(110px, 34vw, 220px)/1 var(--serif); pointer-events: none; text-shadow: 0 2px 30px rgba(0, 0, 0, .9); }
.kp-fbx-zaehler:not(:empty)::before { content: ""; position: absolute; width: min(56vw, 300px); aspect-ratio: 1; border-radius: 50%; background: rgba(13, 11, 12, .82); z-index: -1; }
.kp-fbx-zaehler { isolation: isolate; }
.kp-fbx.kp-wandmodus .kp-fbx-tipp { visibility: hidden; }
.kp-fbx-vorhang { position: absolute; inset: 0; z-index: 60; display: flex; pointer-events: none; }
.kp-fbx-vorhang i { flex: 1; transform-origin: 50% 0; transition: transform .7s var(--kp-ease); transition-delay: calc(var(--d) * 22ms); }
.kp-fbx-vorhang i:nth-child(3n+1) { background: linear-gradient(90deg, #8d8d96, #e6e6ee 45%, #77777f); }
.kp-fbx-vorhang i:nth-child(3n+2) { background: linear-gradient(90deg, #a2245f, #ff7fbb 45%, #8c1d51); }
.kp-fbx-vorhang i:nth-child(3n) { background: linear-gradient(90deg, #9d7a28, #f3d27c 45%, #84651e); } /* taste-skill-ignore: Lametta-Vorhang der Fotobox */
.kp-fbx.kp-vorhang-auf .kp-fbx-vorhang i { transform: translateY(-104%); }
.kp-fbx-blitz { position: absolute; inset: 0; z-index: 90; background: #fff; opacity: 0; pointer-events: none; }
.kp-fbx-blitz.kp-an { animation: kp-blitz .55s ease-out; }
@keyframes kp-blitz { 0% { opacity: 0; } 8% { opacity: .95; } 100% { opacity: 0; } }
.kp-fbx-fuss { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; padding: 12px 4px 4px; }
.kp-fbx-links { display: flex; align-items: center; gap: 8px; }
.kp-fbx-rund { width: 48px; height: 48px; display: grid; place-items: center; border: 1px solid rgba(255, 255, 255, .3); border-radius: 50%; background: none; cursor: pointer; transition: transform .16s var(--kp-ease); }
.kp-fbx-rund svg { width: 20px; height: 20px; }
.kp-fbx-rund:active { transform: scale(.94); }
.kp-fbx-rund:disabled { opacity: .3; cursor: default; }
.kp-fbx-zahl { font-size: 15px; font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, .8); white-space: nowrap; }
.kp-ausloeser { position: relative; width: 76px; height: 76px; border: 4px solid #fff; border-radius: 50%; background: none; cursor: pointer; }
.kp-ausloeser::before { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--kp-rosa); transition: transform .14s var(--kp-ease); }
.kp-ausloeser:active::before { transform: scale(.86); }
.kp-ausloeser:disabled { opacity: .35; cursor: default; }
.kp-fbx-wandknopf { justify-self: end; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .3); border-radius: 99px; background: none; font-size: 15px; font-weight: 600; cursor: pointer; }
.kp-fbx-wandknopf svg { width: 18px; height: 18px; }
.kp-fbx-tipp { grid-column: 1 / -1; margin: 2px 0 0; text-align: center; font-size: 14px; color: rgba(255, 255, 255, .7); }
/* Wand: alle Abzüge mit Klebeband */
.kp-fbx-wand { position: absolute; inset: 0; z-index: 40; overflow-y: auto; padding: 16px 6px 30px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 260px), 1fr)); gap: 22px 14px; align-content: start; overscroll-behavior: contain; background: #0d0b0c; }
.kp-fbx-wand[hidden] { display: none; }
.kp-wand-abz { position: relative; padding: 0; border: 0; background: #fff; box-shadow: 0 10px 26px rgba(0, 0, 0, .55); transform: rotate(var(--r, 0deg)); cursor: zoom-in; opacity: 0; translate: 0 14px; transition: opacity .4s ease var(--v, 0ms), translate .6s var(--kp-ease) var(--v, 0ms), transform .2s var(--kp-ease); }
.kp-fbx-wand.kp-da .kp-wand-abz { opacity: 1; translate: 0 0; }
.kp-wand-abz img { display: block; width: 100%; aspect-ratio: 3 / 2; height: auto; object-fit: cover; }
.kp-wand-abz::before { content: ""; position: absolute; top: -9px; left: 50%; width: 54px; height: 18px; margin-left: -27px; background: rgba(255, 238, 190, .78); transform: rotate(var(--t, -4deg)); z-index: 1; }
.kp-wand-abz:active { transform: rotate(var(--r, 0deg)) scale(.97); }
@media (hover: hover) and (pointer: fine) { .kp-wand-abz:hover { transform: rotate(0deg) scale(1.03); } }
.kp-wand-abz:focus-visible { outline: 3px solid var(--kp-rosa); outline-offset: 4px; }
@media (min-width: 700px) { .kp-fbx-innen { padding-left: max(28px, env(safe-area-inset-left)); padding-right: max(28px, env(safe-area-inset-right)); } }
@media (max-height: 520px) and (orientation: landscape) {
	.kp-fbx-innen { grid-template-rows: auto auto minmax(0, 1fr) auto; }
	.kp-fbx-stapel { width: min(70vw, calc((100svh - 190px) * 1.5)); }
	.kp-ausloeser { width: 58px; height: 58px; }
	.kp-fbx-tipp { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.kp-fbx *, .kp-fbx-grund, .kp-fbx-innen { transition-duration: 0s !important; animation: none !important; }
}
/* Kino: der Film vom Fest mit Ton */
.kp-kino { display: grid; place-items: center; background: rgba(0, 0, 0, .94); opacity: 0; transition: opacity .25s ease; }
.kp-kino.kp-offen { opacity: 1; }
.kp-kino video { width: auto; height: auto; max-width: 100vw; max-height: 100svh; aspect-ratio: 9 / 16; background: #000; }
.kp-kino .kp-fbx-zu { position: absolute; top: max(12px, env(safe-area-inset-top)); right: max(12px, env(safe-area-inset-right)); z-index: 2; background: rgba(0, 0, 0, .5); color: #fff; }

/* ---------- Große Bildschirme (1.53.4): die Story füllt den Bildschirm, statt klein in der 1440-px-Mitte zu stehen ----------
   Die Story tritt aus dem 1440-px-Rahmen des Themes heraus (schwarz bis an den Rand); alle Größen wachsen mit --kp-x. */
@media (min-width: 1600px) {
	.koeck-party { --kp-x: 1.15; width: calc(100vw - var(--scrollbar-width, 0px)); margin-left: calc(50% - (100vw - var(--scrollbar-width, 0px)) / 2); --kp-m: calc((min(100vw, 1440px * var(--kp-x)) - var(--kp-sp)) / 2 - var(--kp-rand)); font-size: calc(18px * var(--kp-x)); }
}
@media (min-width: 2000px) { .koeck-party { --kp-x: 1.35; } }
@media (min-width: 2500px) { .koeck-party { --kp-x: 1.6; } }
@media (min-width: 3000px) { .koeck-party { --kp-x: 1.85; } }
@media (min-width: 1600px) {
	.koeck-party .kp-held { max-width: calc(1440px * var(--kp-x)); margin: 0 auto; }
	.koeck-party .kp-titel { font-size: min(calc(92px * var(--kp-x)), 11svh); }
	.koeck-party .kp-vorspann { font-size: calc(27px * var(--kp-x)); }
	.koeck-party .kp-coll .kp-raster { --kp-z: min(calc(100cqw / 12), 7.4svh); }
	.koeck-party .kp-h { font-size: calc(56px * var(--kp-x)); }
	.koeck-party .kp-gross { font-size: calc(31px * var(--kp-x)); }
	.koeck-party .kp-satz { font-size: calc(36px * var(--kp-x)); }
	.koeck-party figcaption { font-size: calc(18px * var(--kp-x)); }
	.koeck-party .kp-karte, .koeck-party .kp-ab--shuttle .kp-karte { max-width: calc(700px * var(--kp-x)); }
	.koeck-party .kp-gaeste { max-width: calc(440px * var(--kp-x)); }
	.koeck-party .kp-karte-zahl { font-size: calc(17px * var(--kp-x)); }
	.koeck-party .kp-karte-zahl b { font-size: calc(64px * var(--kp-x)); }
	.koeck-party .kp-sack-reihe { max-width: calc(860px * var(--kp-x)); }
	.koeck-party .kp-rueck { max-width: calc(1100px * var(--kp-x)); }
	.koeck-party .kp-lw-jahr { font-size: calc(120px * var(--kp-x)); }
	.koeck-party .kp-spots { max-width: calc(1100px * var(--kp-x)); }
	.koeck-party .kp-spot b { font-size: calc(54px * var(--kp-x)); }
	.koeck-party .kp-spot-satz { font-size: calc(34px * var(--kp-x)); }
	.koeck-party .kp-saal { max-width: calc(900px * var(--kp-x)); }
	.koeck-party :is(.kp-ehrung, .kp-tat-coll, .kp-tat-ende) { max-width: calc(1180px * var(--kp-x)); }
	.koeck-party .kp-fest { max-width: calc(1300px * var(--kp-x)); }
	.koeck-party .kp-bild--breit { max-width: calc(1000px * var(--kp-x)); }
	.koeck-party .kp-blumen-reihe { max-width: calc(900px * var(--kp-x)); }
	.koeck-party .kp-box-roh { max-width: calc(1100px * var(--kp-x)); }
	.koeck-party .kp-fb-ecke { max-width: calc(980px * var(--kp-x)); }
	.koeck-party .kp-fb-kabine { width: calc(300px * var(--kp-x)); }
	.koeck-party .kp-fb-satz { font-size: calc(28px * var(--kp-x)); }
	.koeck-party .kp-fb-tipp { font-size: calc(18px * var(--kp-x)); }
	/* Tattoo-Vorlage zum Antippen: deutlich größer */
	.koeck-party .kp-stich { max-width: max(620px, min(calc(620px * var(--kp-x) * 1.25), calc(50svh + 100px))); }
	.koeck-party .kp-flash { max-width: max(520px, min(calc(520px * var(--kp-x) * 1.25), 50svh)); --kp-mw: max(100px, min(calc(100px * var(--kp-x) * 1.25), 9.5svh)); }
	.koeck-party .kp-stich-tipp { font-size: calc(22px * var(--kp-x)); }
	.koeck-party .kp-motiv span { font-size: calc(13px * var(--kp-x)); }
	.koeck-party .kp-uhr { font-size: calc(14px * var(--kp-x)); }
}
@media (min-width: 1600px) {
	.koeck-party .kp-s--rechts { width: min(calc(var(--kp-m) - 3.5vw), calc(300px * var(--kp-x))); }
	.koeck-party .kp-s--breit { width: min(calc(var(--kp-m) - 3vw), calc(460px * var(--kp-x))); }
}