/* =====================================================================================
   Vorlage 41 · Leuchttisch mit Kontaktbogen
   Aufbau dieser Datei:
    1 Grundlagen        5 Beitragsstudio        9 Aufträge, Formulare
    2 Filmstreifen      6 Entstehung (klebend)  10 Fenster (dialog)
    3 Start             7 Abo                   11 Fuß
    4 Feed und Beiträge 8 Fragen, Stimmen       12 Bewegung, Rückfälle, starr
   Moderne Technik, jeweils mit Rückfall: :has(), @property, animation-timeline, @starting-style,
   @container, mask-image, color-mix(), View Transitions. Die Seite ist ohne all das lesbar.
   ===================================================================================== */

/* ---------- 1 · Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--kopf) + 14px); overflow-x: clip; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0; font-family: var(--schrift); font-size: clamp(16px, 1.05vw + 12px, 18px); line-height: 1.6; color: var(--text);
  background:
    radial-gradient(1400px 800px at 50% 0%, #fffdf7 0%, rgba(255, 253, 247, 0) 70%),
    linear-gradient(rgba(42, 37, 33, .035) 1px, transparent 1px) 0 0 / 100% 120px,
    linear-gradient(90deg, rgba(42, 37, 33, .035) 1px, transparent 1px) 0 0 / 120px 100%,
    var(--tisch);
  padding-bottom: var(--leiste);
  overflow-x: clip;
}
img, video, svg { max-width: 100%; }
img, video { display: block; }
img { height: auto; }
h1, h2, h3, p, ul, ol, dl, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { font-weight: 800; line-height: 1.12; letter-spacing: -.012em; text-wrap: balance; }
h1 { font-size: clamp(38px, 5vw, 56px); }
h2 { font-size: clamp(30px, 3.6vw, 48px); }
h3 { font-size: clamp(18px, 1.3vw + 11px, 24px); }
p { text-wrap: pretty; }
a { color: var(--orange-tief); text-underline-offset: 3px; }
a:hover { color: var(--magenta); }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; border-radius: 4px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.nur-leser { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.sprung { position: fixed; left: 12px; top: -80px; z-index: 200; padding: 12px 18px; border-radius: 10px; background: var(--graphit); color: #fff; font-weight: 700; transition: top .2s; }
.sprung:focus { top: 12px; }
html:not(.js) .nur-js { display: none !important; }

.huelle { width: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { position: relative; padding-block: clamp(56px, 8vw, 112px); overflow-x: clip; }
.abschnitt-kopf { max-width: 760px; margin-bottom: clamp(24px, 3.4vw, 44px); }
.abschnitt-kopf h2 { margin-block: 8px 14px; }
.kicker { font: 500 13px/1.2 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-tief); margin-bottom: 8px; }
.lead { font-size: clamp(17px, .5vw + 15px, 20px); color: var(--muted); max-width: 64ch; }
.klein { font-size: 14px; color: var(--muted); }
.anleitung { display: inline-block; font-weight: 600; font-size: 15px; padding: 8px 14px; border-radius: var(--radius-rund); background: color-mix(in srgb, var(--orange) 22%, var(--papier)); color: var(--graphit); margin-bottom: 18px; }
.anleitung--hell { background: #fb9f2e; color: #1a1208; }

/* Knöpfe */
.knopf {
  --k-bg: var(--graphit); --k-fg: #fff; --k-rand: var(--graphit);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px;
  border: 2px solid var(--k-rand); border-radius: var(--radius-rund); background: var(--k-bg); color: var(--k-fg);
  font: 700 15px/1.2 var(--schrift); text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.knopf:hover { color: var(--k-fg); transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); }
.knopf:active { transform: translateY(0); }
.knopf:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.knopf--orange { --k-bg: var(--orange); --k-fg: var(--on-accent); --k-rand: var(--orange); }
.knopf--magenta { --k-bg: var(--magenta); --k-fg: #fff; --k-rand: var(--magenta); }
.knopf--graphit { --k-bg: var(--graphit); --k-fg: #fff; --k-rand: var(--graphit); }
.knopf--rand { --k-bg: transparent; --k-fg: var(--graphit); --k-rand: var(--graphit); }
.knopf--rand:hover { background: var(--graphit); color: #fff; }
.knopf--rand-dunkel { --k-bg: transparent; --k-fg: #fff; --k-rand: rgba(255, 255, 255, .75); }
.knopf--rand-dunkel:hover { background: #fff; color: var(--graphit); }
.knopf--text { --k-bg: transparent; --k-fg: inherit; --k-rand: transparent; text-decoration: underline; padding-inline: 10px; font-weight: 600; }
.knopf--gross { min-height: 52px; padding-inline: 26px; font-size: 16px; }
.knopf--klein { min-height: 44px; padding: 8px 16px; font-size: 14px; }
.knopf--attrappe { pointer-events: none; }
.knopf--attrappe:hover { transform: none; box-shadow: none; }
.knopf-reihe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }

/* Etiketten */
.pill { display: inline-flex; align-items: center; min-height: 26px; padding: 2px 11px; border-radius: var(--radius-rund); font: 700 13px/1 var(--schrift); letter-spacing: .01em; white-space: nowrap; }
.pill--frei { background: var(--mint); color: #05281d; }
.pill--einzel { background: var(--magenta); color: #fff; }
.pill--abo { background: var(--orange); color: var(--on-accent); }
.post[data-zustand="offen"]:not([data-art="frei"]) .pill { box-shadow: 0 0 0 2px var(--papier), 0 0 0 4px var(--mint); }
.post[data-zustand="offen"]:not([data-art="frei"]) .pill::after { content: " · offen"; font-weight: 600; }

/* Zahlen im Profilkopf */
.zahlen { display: grid; grid-template-columns: repeat(4, auto); gap: 6px clamp(14px, 2vw, 28px); justify-content: start; margin-top: 20px; }
.zahl { display: grid; }
.zahl-wert { font: 500 clamp(24px, 2.2vw + 10px, 34px)/1 var(--mono); color: var(--graphit); }
.zahl-text { font-size: 13px; color: var(--muted); }

/* ---------- 2 · Filmstreifen (Navigation) ---------- */
.streifen {
  --loch: rgba(248, 243, 233, .55);
  position: sticky; top: 0; z-index: 60; height: var(--kopf); background: #1b1714; color: #f8f3e9;
  box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .55);
}
.streifen::before, .streifen::after {
  content: ""; position: absolute; left: 0; right: 0; height: 6px; pointer-events: none;
  background: repeating-linear-gradient(90deg, var(--loch) 0 11px, transparent 11px 25px);
}
.streifen::before { top: 5px; } .streifen::after { bottom: 5px; }
.streifen-innen { height: 100%; max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; padding: 14px var(--rand) 14px; display: flex; align-items: center; gap: 18px; }
.marke { display: grid; line-height: 1.1; text-decoration: none; color: #fff; flex: none; }
.marke:hover { color: #fff; }
.marke-name { font-weight: 900; font-size: 17px; letter-spacing: -.01em; }
.marke-sub { font: 500 11px var(--mono); color: var(--orange-hell); letter-spacing: .08em; text-transform: uppercase; }
.frames { flex: 1; min-width: 0; }
.frames ol { display: flex; gap: 6px; justify-content: center; }
.frame {
  position: relative; display: flex; align-items: center; gap: 7px; height: 38px; padding: 0 11px; border: 2px solid #4a423a; border-radius: 3px;
  background: linear-gradient(#2e2824, #251f1c); color: #d9d0c2; text-decoration: none; white-space: nowrap;
  transition: border-color .25s, background-color .25s, box-shadow .3s, color .25s, transform .25s;
}
.frame:hover { color: #fff; border-color: #7a6d5f; }
.fnr { font: 500 12px/1 var(--mono); color: var(--orange-hell); }
.ftxt { font-weight: 700; font-size: 13px; }
.frame[aria-current="true"] {
  border-color: var(--orange); background: linear-gradient(#4a3216, #35240f); color: #fff;
  box-shadow: 0 0 0 1px #000, 0 0 18px rgba(245, 138, 7, .7), inset 0 0 14px rgba(245, 138, 7, .4);
  transform: translateY(-1px);
}
.kopf-abo { flex: none; min-height: 40px; padding: 6px 16px; font-size: 14px; }

@media (max-width: 1180px) { .frame:not([aria-current="true"]) .ftxt { display: none; } .marke-sub { display: none; } }
@media (max-width: 760px) {
  :root { --kopf: 56px; --leiste: 60px; }
  .streifen-innen { justify-content: space-between; padding-block: 11px; }
  .frames {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; height: var(--leiste); background: #1b1714; padding: 12px 6px 11px; box-shadow: 0 -6px 20px -8px rgba(0, 0, 0, .55);
  }
  .frames::before, .frames::after { content: ""; position: absolute; left: 0; right: 0; height: 5px; background: repeating-linear-gradient(90deg, rgba(248, 243, 233, .5) 0 9px, transparent 9px 21px); }
  .frames::before { top: 3px; } .frames::after { bottom: 3px; }
  .frames ol { gap: 3px; height: 100%; }
  .frames li { flex: 1; min-width: 0; }
  .frame { height: 100%; flex-direction: column; justify-content: center; gap: 1px; padding: 0 2px; }
  .frame:not([aria-current="true"]) .ftxt { display: block; }
  .ftxt { font-size: 9px; font-weight: 600; letter-spacing: -.02em; }
  .fnr { font-size: 11px; }
  .kopf-abo { min-height: 38px; padding-inline: 14px; }
}

/* ---------- 3 · Start ---------- */
.start { padding-top: clamp(20px, 3vw, 36px); background: radial-gradient(900px 500px at 85% 20%, color-mix(in srgb, var(--orange) 18%, transparent), transparent 70%); }
.titelbild { position: relative; margin: 0; padding: 12px; background: #1b1714; border-radius: 6px; box-shadow: var(--schatten-dia); }
.titelbild img { width: 100%; height: clamp(150px, 20vw, 250px); object-fit: cover; object-position: 50% 62%; }
.titel-rand { position: absolute; left: 22px; bottom: 15px; display: flex; gap: 14px; font: 500 11px var(--mono); color: var(--orange-hell); letter-spacing: .1em; text-shadow: 0 1px 2px #000; }
.start-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); margin-top: 0; }
@media (min-width: 1060px) { .start-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; } }
.profil { position: relative; display: grid; gap: 10px; }
.avatar-ring { width: clamp(104px, 11vw, 148px); aspect-ratio: 1; border-radius: 50%; padding: 5px; background: conic-gradient(from 200deg, var(--orange), var(--magenta), var(--mint), var(--orange)); margin-top: calc(clamp(104px, 11vw, 148px) / -2); margin-left: 20px; position: relative; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, .55); }
.avatar { width: 100%; height: 100%; border-radius: 50%; border: 5px solid var(--papier); object-fit: cover; background: var(--papier); }
.profil-text { padding-inline: 4px; }
.profil-text h1 { margin-block: 2px 4px; }
.profil-zeile { font-weight: 700; color: var(--orange-tief); margin-bottom: 12px; }
.probe { padding: clamp(16px, 2vw, 26px); border-radius: 16px; background: radial-gradient(520px 300px at 50% 0%, #fffefb, #fbf6ea 70%); box-shadow: 0 0 0 1px rgba(42, 37, 33, .08), 0 30px 60px -30px rgba(120, 80, 20, .5), inset 0 0 40px rgba(255, 220, 150, .45); margin-top: clamp(0px, 1vw, 12px); }
.probe-titel { font-size: clamp(20px, 1.4vw + 12px, 26px); margin-bottom: 8px; }
.probe-reihe { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 20px); margin-top: 6px; }
@media (max-width: 560px) { .probe-reihe { grid-template-columns: minmax(0, 1fr); max-width: 320px; margin-inline: auto; } }

/* ---------- 4 · Feed und Beiträge ---------- */
.beitraege { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--tisch-2) 70%, transparent) 20%, color-mix(in srgb, var(--tisch-2) 70%, transparent) 85%, transparent); }
.werkzeug { display: flex; flex-wrap: wrap; gap: 14px 24px; align-items: flex-start; justify-content: space-between; margin-bottom: clamp(24px, 3vw, 40px); }
.filter { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0; padding: 0; min-width: 0; }
.f-radio { position: absolute; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); appearance: none; -webkit-appearance: none; }
.filter label { display: inline-flex; align-items: center; min-height: 44px; padding: 0 20px; border: 2px solid var(--graphit); border-radius: var(--radius-rund); font-weight: 700; font-size: 15px; cursor: pointer; background: var(--papier); transition: background-color .2s, color .2s, transform .2s; }
.filter label:hover { transform: translateY(-2px); }
.f-radio:checked + label { background: var(--graphit); color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--orange) 70%, transparent); }
.f-radio:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 3px; }
.zugang { flex: 1 1 360px; max-width: 640px; padding: 12px 16px; border-radius: 12px; background: var(--papier); border: 2px dashed var(--graphit-3); display: grid; gap: 8px; }
.zugang-zeile { font-size: 15px; display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; }
.zugang-zeile strong { font-size: 17px; color: var(--magenta); }
[data-zugang].ist-abo { color: var(--mint-tief); }
.zugang-zaehler { font: 500 13px var(--mono); color: var(--muted); }
.zugang-knoepfe { display: flex; flex-wrap: wrap; gap: 8px; }
.zugang-meldung { font-size: 14px; color: var(--graphit); min-height: 0; }
.zugang-meldung:empty { display: none; }
.zugang-meldung { padding: 6px 10px; border-radius: 8px; background: color-mix(in srgb, var(--mint) 30%, var(--papier)); }
[hidden] { display: none !important; }

.feed {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(26px, 3.4vw, 46px) clamp(16px, 2.4vw, 34px);
  grid-auto-flow: dense; align-items: start; padding-block: 8px 12px;
}
.b-3 { grid-column: span 3; } .b-4 { grid-column: span 4; } .b-5 { grid-column: span 5; } .b-6 { grid-column: span 6; } .b-7 { grid-column: span 7; }
@media (max-width: 1060px) { .feed { grid-template-columns: repeat(6, minmax(0, 1fr)); } .b-3, .b-4 { grid-column: span 3; } .b-5, .b-6, .b-7 { grid-column: span 6; } }
@media (max-width: 680px) { .post { --rk: .35; } .feed { grid-template-columns: minmax(0, 1fr); } .b-3, .b-4, .b-5, .b-6, .b-7 { grid-column: auto; } }
.feed-leer { padding: 28px; text-align: center; font-weight: 700; }
.feed-hinweis { margin-top: 18px; }

/* Filter: mit JavaScript über data-filter (damit die View Transition den Wechsel führt), ohne über :has() */
.js .feed[data-filter="frei"] .post:not([data-art="frei"]),
.js .feed[data-filter="fotos"] .post:not([data-typ="foto"]):not([data-typ="serie"]),
.js .feed[data-filter="videos"] .post:not([data-typ="video"]),
.js .feed[data-filter="gesperrt"] .post:not([data-zustand="gesperrt"]) { display: none; }
html:not(.js) .huelle:has(#f-frei:checked) .feed .post:not([data-art="frei"]),
html:not(.js) .huelle:has(#f-fotos:checked) .feed .post:not([data-typ="foto"]):not([data-typ="serie"]),
html:not(.js) .huelle:has(#f-videos:checked) .feed .post:not([data-typ="video"]),
html:not(.js) .huelle:has(#f-gesperrt:checked) .feed .post:not([data-zustand="gesperrt"]) { display: none; }

/* Die Karten: Dia, Filmkarte, Serie (Filmstreifen), Abzug mit Text */
.post { --rk: 1; container-type: inline-size; position: relative; min-width: 0; transform: rotate(calc(var(--r, 0deg) * var(--rk))); transition: transform .35s cubic-bezier(.2, .8, .3, 1.1); }
.post:hover, .post:focus-within { transform: rotate(0deg) translateY(-4px); z-index: 2; }
.rahmen { position: relative; border-radius: 6px; box-shadow: var(--schatten-dia); }
.dia .rahmen { background: #fbf8f1; padding: 12px 12px 10px; }
.zettel .rahmen { background: var(--papier); padding: 14px 14px 12px; border: 1px solid #e3d9c2; }
.film .rahmen { background-color: var(--nacht-2); background-image: linear-gradient(180deg, var(--nacht-2), var(--nacht)); padding: 12px 12px 10px; color: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, .2) inset, 0 16px 28px -12px rgba(8, 14, 40, .7), 0 3px 6px rgba(8, 14, 40, .35); }
.serie .rahmen { background: #1b1714; padding: 0 0 8px; color: #f8f3e9; box-shadow: 0 16px 28px -12px rgba(30, 20, 10, .7), 0 3px 6px rgba(30, 20, 10, .35); }
.bild { position: relative; overflow: hidden; aspect-ratio: var(--ar, 3 / 2); background: #1d1815; isolation: isolate; outline: 1px solid rgba(0, 0, 0, .3); }
.bild > img, .bild > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Verschleierung: eigene kleine Datei, hochskaliert, plus weicher Filter und Körnung */
.u { filter: saturate(1.2); }
.korn { position: absolute; inset: 0; pointer-events: none; background: url("../img/korn.webp") 0 0 / 128px 128px; opacity: .38; z-index: 2; }
.post[data-zustand="offen"] .korn { opacity: 0; transition: opacity .8s ease calc(.3s + var(--verz, 0ms)); }

/* Entwicklung: der scharfe Abzug wischt von der oberen linken Ecke her herein.
   Maske und Filter gibt es nur, solange der Wisch läuft (Klasse .wischt, JavaScript setzt und löst sie), danach liegt das Bild ohne Zusatz da. */
.s { z-index: 1; opacity: 0; transition: opacity .45s ease var(--verz, 0ms); }
.post[data-zustand="offen"] .s, .post[data-art="frei"] .s { opacity: 1; }
@supports ((mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000))) {
  .post.wischt .s {
    opacity: 1; --e: 0;
    -webkit-mask-image: linear-gradient(135deg, #000 calc(var(--e) * 150% - 50%), transparent calc(var(--e) * 150%));
    mask-image: linear-gradient(135deg, #000 calc(var(--e) * 150% - 50%), transparent calc(var(--e) * 150%));
    filter: sepia(calc(.85 - var(--e) * .85)) saturate(calc(.55 + var(--e) * .45)) brightness(calc(1.3 - var(--e) * .3));
    transition: --e .95s cubic-bezier(.4, .1, .2, 1) var(--verz, 0ms);
  }
  .post.wischt[data-zustand="offen"] .s, .post.wischt.vorfuehrung .s { --e: 1; }
}
/* Solange die scharfe Datei nicht gesetzt ist (gesperrt), bleibt die Ebene leer und unsichtbar */
.s[data-src]:not([data-gesetzt]) { visibility: hidden; }
.serie .fr { position: relative; overflow: hidden; aspect-ratio: 3 / 2; background: #0f0c0a; }
.serie .fr .s { transition-delay: calc(var(--i, 0) * 180ms + var(--verz, 0ms)); }
.fr > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Das Schloss auf dem Bild */
.deckel { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 10px; padding: 12px; text-align: center; color: #fff; background: radial-gradient(closest-side at 50% 50%, rgba(22, 14, 10, .5), rgba(22, 14, 10, .16)); transition: opacity .45s ease var(--verz, 0ms), visibility 0s linear calc(.45s + var(--verz, 0ms)); }
.post[data-zustand="offen"] .deckel { opacity: 0; visibility: hidden; pointer-events: none; }
.schloss { display: grid; place-items: center; width: clamp(44px, 18cqw, 64px); aspect-ratio: 1; border-radius: 50%; background: rgba(27, 23, 20, .82); box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 8px 18px rgba(0, 0, 0, .45); }
.schloss svg { width: 55%; height: 55%; fill: #fff; }
.deckel-preis { font: 800 clamp(18px, 7cqw, 28px)/1 var(--schrift); text-shadow: 0 2px 8px rgba(0, 0, 0, .7); }
.deckel .knopf { max-width: 100%; box-shadow: 0 8px 18px -6px rgba(0, 0, 0, .65); font-size: clamp(12px, 3.6cqw, 15px); padding-inline: clamp(10px, 3cqw, 20px); }
@container (max-width: 250px) { .deckel { gap: 6px; padding: 6px; } .deckel-preis { font-size: 16px; } .deckel .knopf { font-size: 12px; padding: 6px 10px; min-height: 44px; } }
html:not(.js) .deckel .knopf { display: none; }

/* Beschriftung */
.beschr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; padding: 10px 4px 2px; }
.beschr h3 { flex: 1 1 140px; font-size: clamp(16px, 1.1vw + 10px, 21px); order: 2; }
.beschr .nr { order: 1; }
.beschr .pill { order: 3; margin-left: auto; }
.nr { font: 500 12px var(--mono); color: var(--orange-tief); letter-spacing: .06em; }
.film .nr, .serie .nr { color: var(--orange-hell); }
.film .beschr h3, .serie .beschr h3 { color: #fff; }
.meta { display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 13px; color: var(--muted); }
.film .meta, .serie .meta { color: #cdd5ea; }
.serie .meta { color: #d8cfc0; }
.serie .beschr, .serie .meta { padding-inline: 14px; }
.meta svg { width: 15px; height: 15px; fill: currentColor; flex: none; }
.post--klein .beschr h3, .post--klein .meta { display: none; }
.post--klein .beschr { padding-top: 8px; }
.post--klein .beschr .pill { margin-left: 0; }
.dia .pill, .film .pill { }

/* Serie: ein Filmstreifen mit Bildnummern */
.bild-reihe { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; padding: 26px 12px; background: #1b1714; border-radius: 6px 6px 0 0; }
.bild-reihe::before, .bild-reihe::after { content: ""; position: absolute; left: 0; right: 0; height: 6px; background: repeating-linear-gradient(90deg, rgba(248, 243, 233, .55) 0 11px, transparent 11px 25px); }
.bild-reihe::before { top: 9px; } .bild-reihe::after { bottom: 9px; }
@container (max-width: 430px) { .bild-reihe { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fnr-k { position: absolute; left: 6px; top: 4px; z-index: 2; font: 500 11px var(--mono); color: var(--orange-hell); text-shadow: 0 1px 2px #000; }
.serie .deckel { inset: 0; border-radius: 6px 6px 0 0; background: radial-gradient(closest-side at 50% 50%, rgba(22, 14, 10, .72), rgba(22, 14, 10, .25)); }
.serie .deckel-preis { font-size: clamp(15px, 4.6cqw, 22px); }
.serie .deckel .knopf { font-size: clamp(12px, 3.2cqw, 14px); }

/* Videokarten */
.laenge { position: absolute; left: 10px; bottom: 10px; z-index: 4; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; font: 500 12px var(--mono); }
.spiel { position: absolute; right: 10px; top: 10px; z-index: 4; display: grid; place-items: center; width: 44px; height: 44px; border: 2px solid rgba(255, 255, 255, .85); border-radius: 50%; background: rgba(15, 27, 58, .8); color: #fff; cursor: pointer; transition: transform .2s; }
.spiel:hover { transform: scale(1.08); }
.spiel svg { width: 20px; height: 20px; fill: #fff; }
.post[data-zustand="gesperrt"] .spiel, html:not(.js) .spiel { display: none; }
.kein-webm .film .bild::after { content: "Vorschau als Standbild"; position: absolute; right: 10px; bottom: 10px; z-index: 5; padding: 3px 9px; border-radius: 6px; background: rgba(0, 0, 0, .72); color: #fff; font: 500 12px var(--mono); }

/* Textbeiträge */
.text { padding: 8px 6px 4px; font-size: 15px; display: grid; gap: 8px; color: var(--text); }
.text p { max-width: 62ch; }
.text-rest { display: grid; gap: 8px; }
.post[data-zustand="gesperrt"] .text-rest { filter: blur(5px); user-select: none; -webkit-user-select: none; }
.zettel .text .text-rest p { color: var(--muted); }

/* ---------- 5 · Beitragsstudio ---------- */
.studio { background-color: var(--graphit); background-image: radial-gradient(900px 500px at 10% 0%, color-mix(in srgb, var(--orange) 24%, transparent), transparent 70%); color: #f8f3e9; }
.studio .kicker { color: var(--orange-hell); }
.studio .lead { color: #d6cdbf; }
.studio-raster { display: grid; gap: clamp(20px, 3vw, 40px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .studio-raster { grid-template-columns: minmax(300px, 5fr) minmax(0, 7fr); } }
.regler { display: grid; gap: 14px; }
.feld { border: 0; margin: 0; padding: 16px 18px 18px; border-radius: 14px; background: var(--graphit-2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); min-width: 0; }
.feld legend { padding: 0 8px; font: 500 13px var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--orange-hell); }
.feld input[type="radio"] { position: absolute; width: 1px; height: 1px; margin: 0; clip-path: inset(50%); appearance: none; -webkit-appearance: none; }
.bildwahl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 8px; }
.bildwahl label { display: grid; gap: 4px; cursor: pointer; font-size: 13px; font-weight: 600; text-align: center; color: #d6cdbf; }
.bildwahl img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 4px; outline: 3px solid transparent; outline-offset: 2px; transition: outline-color .2s, transform .2s; }
.bildwahl label:hover img { transform: translateY(-2px); }
.bildwahl input:checked + label img { outline-color: var(--orange); }
.bildwahl input:checked + label { color: #fff; }
.bildwahl input:focus-visible + label img { outline-color: #fff; }
.segment { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; margin-top: 8px; border-radius: var(--radius-rund); background: rgba(255, 255, 255, .08); padding: 4px; }
.segment label { display: grid; place-items: center; min-height: 44px; padding: 4px 8px; border-radius: var(--radius-rund); font-weight: 700; font-size: 14px; text-align: center; cursor: pointer; color: #d6cdbf; transition: background-color .2s, color .2s; }
.segment input:checked + label { background: var(--orange); color: var(--on-accent); }
.segment input:focus-visible + label { outline: 3px solid #fff; outline-offset: 2px; }
.regler-zeile, .rechnung-regler { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; }
.rechnung-regler label { grid-column: 1 / -1; font-weight: 700; font-size: 15px; }
.regler-wert { font: 500 18px var(--mono); min-width: 5ch; text-align: right; }
input[type="range"] { appearance: none; -webkit-appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--orange) var(--fuell, 30%), rgba(255, 255, 255, .22) var(--fuell, 30%)); }
input[type="range"]::-moz-range-track { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .22); }
input[type="range"]::-moz-range-progress { height: 8px; border-radius: 4px; background: var(--orange); }
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); box-shadow: 0 3px 8px rgba(0, 0, 0, .5); }
input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 4px solid var(--orange); }
input[type="range"]:disabled { opacity: .4; cursor: not-allowed; }
.feld .klein { color: #b9b0a2; margin-top: 4px; }

.vorschau { display: grid; gap: clamp(16px, 2vw, 26px); min-width: 0; }
@media (min-width: 1000px) { .vorschau { position: sticky; top: calc(var(--kopf) + 18px); align-self: start; } }
.vorschau-paar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 24px); }
@media (max-width: 560px) { .vorschau-paar { grid-template-columns: minmax(0, 1fr); } }
.vtile { margin: 0; display: grid; gap: 8px; container-type: inline-size; }
.vtile-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.vtile-name { font-weight: 800; font-size: 17px; margin-right: auto; }
.vtile .dia .rahmen { background: #fbf8f1; padding: 10px 10px 10px; }
.vtile .bild img.v { display: none; }
.vtile .bild { outline-color: rgba(0, 0, 0, .35); }
.abdunkler { display: none; position: absolute; inset: 0; z-index: 2; background: rgba(8, 6, 6, .9); pointer-events: none; }
.vtile .deckel { transition: opacity .35s; }
.t-einzel, .t-abo { display: none; }
.v-pill-frei, .v-pill-einzel, .v-pill-abo, .v-pill-enthalten, .haken { display: none; }
/* Besucher: welches Bild in welcher Schärfe */
.studio-raster:has(#sb1:checked):has(#sm-frei:checked) .vtile--besucher [data-b="1"].v-s,
.studio-raster:has(#sb2:checked):has(#sm-frei:checked) .vtile--besucher [data-b="2"].v-s,
.studio-raster:has(#sb3:checked):has(#sm-frei:checked) .vtile--besucher [data-b="3"].v-s { display: block; }
.studio-raster:has(#sb1:checked):not(:has(#sm-frei:checked)):has(#ss-leicht:checked) .vtile--besucher [data-b="1"].v-l,
.studio-raster:has(#sb2:checked):not(:has(#sm-frei:checked)):has(#ss-leicht:checked) .vtile--besucher [data-b="2"].v-l,
.studio-raster:has(#sb3:checked):not(:has(#sm-frei:checked)):has(#ss-leicht:checked) .vtile--besucher [data-b="3"].v-l { display: block; }
.studio-raster:has(#sb1:checked):not(:has(#sm-frei:checked)):not(:has(#ss-leicht:checked)) .vtile--besucher [data-b="1"].v-k,
.studio-raster:has(#sb2:checked):not(:has(#sm-frei:checked)):not(:has(#ss-leicht:checked)) .vtile--besucher [data-b="2"].v-k,
.studio-raster:has(#sb3:checked):not(:has(#sm-frei:checked)):not(:has(#ss-leicht:checked)) .vtile--besucher [data-b="3"].v-k { display: block; }

.studio-raster:has(#sm-frei:checked) .vtile--besucher .deckel { opacity: 0; visibility: hidden; }
.studio-raster:has(#ss-schwarz:checked):not(:has(#sm-frei:checked)) .vtile--besucher .abdunkler { display: block; }
.studio-raster:has(#sm-frei:checked) .vtile--besucher .korn { opacity: 0; }
.studio-raster:has(#sm-einzel:checked) .vtile--besucher .t-einzel, .studio-raster:has(#sm-abo:checked) .vtile--besucher .t-abo { display: inline; }
.studio-raster:has(#sm-frei:checked) .v-pill-frei, .studio-raster:has(#sm-einzel:checked) .v-pill-einzel, .studio-raster:has(#sm-abo:checked) .v-pill-abo { display: inline-flex; }
.studio-raster:has(#sm-frei:checked) .vtile--abo .v-pill-frei, .studio-raster:has(#sm-einzel:checked) .v-pill-enthalten, .studio-raster:has(#sm-abo:checked) .v-pill-enthalten { display: inline-flex; }
.studio-raster:has(#sb1:checked) .vtile--abo [data-b="1"], .studio-raster:has(#sb2:checked) .vtile--abo [data-b="2"], .studio-raster:has(#sb3:checked) .vtile--abo [data-b="3"] { display: block; }
.studio-raster:has(#sm-einzel:checked, #sm-abo:checked) .vtile--abo .haken { display: inline-flex; }
.haken { position: absolute; left: 10px; bottom: 10px; z-index: 3; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-rund); background: rgba(5, 40, 29, .86); color: #fff; font-weight: 700; font-size: 13px; }
.haken svg { width: 14px; height: 14px; color: var(--mint); }
.vtile .deckel--vorschau .deckel-preis { font-size: clamp(18px, 8cqw, 28px); }
.vtile .knopf--attrappe { font-size: clamp(12px, 4cqw, 15px); }
/* Regler gesperrt, wo sie nicht gelten */
.studio-raster:has(#sm-frei:checked) .feld--preis, .studio-raster:has(#sm-abo:checked) .feld--preis { opacity: .55; }
.studio-raster:has(#sm-frei:checked) .feld--preis input, .studio-raster:has(#sm-abo:checked) .feld--preis input { pointer-events: none; }
.studio-demo .vorschau { outline: 3px dashed color-mix(in srgb, var(--orange) 70%, transparent); outline-offset: 10px; border-radius: 8px; }

.rechnung { padding: clamp(16px, 2vw, 24px); border-radius: 16px; background: var(--papier); color: var(--text); box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .8); display: grid; gap: 12px; container-type: inline-size; }
.rechnung h3 { font-size: 20px; }
.rechnung .regler-wert { color: var(--graphit); }
.rechnung input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--orange) var(--fuell, 30%), rgba(42, 37, 33, .2) var(--fuell, 30%)); }
.rechnung input[type="range"]::-moz-range-track { background: rgba(42, 37, 33, .2); }
.rechnung input[type="range"]::-webkit-slider-thumb { background: var(--graphit); border-color: var(--orange); }
.rechnung input[type="range"]::-moz-range-thumb { background: var(--graphit); border-color: var(--orange); }
.rechnung-satz { font-size: clamp(18px, 4cqw + 6px, 26px); line-height: 1.25; }
.rechnung-satz strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--mint) 70%, transparent) 62%); }
.rechnung-tabelle { display: grid; gap: 4px; font-size: 15px; }
.rechnung-tabelle > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px dashed var(--border); }
.rechnung-tabelle dt { color: var(--muted); } .rechnung-tabelle dd { margin: 0; font: 500 15px var(--mono); }
.rechnung-tabelle .summe { border-bottom: 0; border-top: 2px solid var(--graphit); font-weight: 800; } .rechnung-tabelle .summe dt { color: var(--graphit); }

/* ---------- 6 · Entstehung (klebend) ---------- */
.ent {
  --crop: 1; --roh: 1; --fertig: 1; --u: 0; --uw: 1; --sucher: 0; --flash: 0; --zuschnitt: 0; --fotoo: 1; --fotos: 1; --tilt: 0; --kontakt: 0; --kringel: 1;
  --x1: 1; --x2: 1; --x3: 1; --x4: 1; --x6: 1; --regler: 0; --rg: 1; --veroeff: 0; --schalt: 1; --preisschild: 0; --schlossO: 0; --m1: 1; --m2: 1; --m3: 1; --msum: 1;
  position: relative; height: calc(var(--n) * 100svh); background-color: var(--nacht); background-image: radial-gradient(1000px 700px at 78% 40%, var(--nacht-3), var(--nacht) 70%); color: #fff;
}
.ent-buehne { position: sticky; top: var(--kopf); height: calc(100svh - var(--kopf) - var(--leiste)); display: grid; grid-template-rows: auto minmax(0, 1fr); gap: clamp(8px, 2vh, 20px); padding: clamp(14px, 3vh, 34px) var(--rand) clamp(10px, 2vh, 22px); max-width: calc(var(--breite) + 2 * var(--rand)); margin-inline: auto; overflow: hidden; }
.ent-kopf h2 { font-size: clamp(26px, 3.4vw, 44px); margin-top: 4px; }
.ent .kicker { color: var(--orange-hell); }
.ent-raster { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(18px, 3vw, 48px); min-height: 0; }
.ent-schritte { display: grid; align-content: center; gap: clamp(8px, 1.6vh, 16px); }
.ent-s { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: clamp(10px, 1.6vh, 16px) 16px; border-radius: 12px; border: 2px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); opacity: .45; transition: opacity .35s, border-color .35s, background-color .35s, transform .35s; }
.ent-s h3 { font-size: clamp(16px, 1vw + 10px, 20px); margin-bottom: 2px; }
.ent-s p { font-size: clamp(13px, .3vw + 12px, 15px); color: #d8def0; line-height: 1.45; }
.ent-nr { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 4px; background: #1b1714; color: var(--orange-hell); font: 500 15px var(--mono); border: 2px solid #4a423a; }
.ent-s[aria-current="step"] { opacity: 1; border-color: var(--orange); background: rgba(245, 138, 7, .12); transform: translateX(6px); }
.ent-s[aria-current="step"] .ent-nr { background: var(--orange); color: var(--on-accent); border-color: var(--orange); box-shadow: 0 0 16px rgba(245, 138, 7, .7); }
.ent-szene { position: relative; container-type: size; min-height: 0; border-radius: 16px; overflow: hidden; background: #0a1228; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -30px #000; }
.ent-tisch { position: absolute; inset: 0; background: radial-gradient(70cqw 60cqh at 50% 45%, rgba(255, 244, 220, .95), rgba(255, 232, 190, .55) 45%, rgba(40, 52, 100, .5) 80%), linear-gradient(rgba(0, 0, 0, .06) 1px, transparent 1px) 0 0 / 100% 40px; }
.foto { position: absolute; left: 50%; top: 50%; width: min(58cqw, 74cqh * .8); aspect-ratio: 4 / 5; translate: -50% -50%; opacity: var(--fotoo); transform: rotate(calc(var(--tilt) * 1deg)) scale(var(--fotos)); box-shadow: 0 0 0 10px #fbf8f1, 0 24px 44px -12px rgba(30, 20, 10, .75); background: #222; will-change: transform, opacity; }
.foto > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(var(--crop, 1)); }
.l-fertig { opacity: var(--fertig); }
.l-u { opacity: var(--u); -webkit-mask-image: linear-gradient(135deg, transparent calc(var(--uw) * 150% - 50%), #000 calc(var(--uw) * 150%)); mask-image: linear-gradient(135deg, transparent calc(var(--uw) * 150% - 50%), #000 calc(var(--uw) * 150%)); }
.foto { overflow: hidden; }
.l-sucher { position: absolute; inset: 0; opacity: var(--sucher); pointer-events: none; }
.l-sucher .e { position: absolute; width: 14%; height: 11%; border: 3px solid #fff; }
.e1 { left: 6%; top: 5%; border-right: 0; border-bottom: 0; } .e2 { right: 6%; top: 5%; border-left: 0; border-bottom: 0; } .e3 { left: 6%; bottom: 5%; border-right: 0; border-top: 0; } .e4 { right: 6%; bottom: 5%; border-left: 0; border-top: 0; }
.fokus { position: absolute; left: 50%; top: 40%; width: 22%; aspect-ratio: 1; translate: -50% -50%; border: 3px solid var(--mint); border-radius: 4px; scale: calc(1 + (1 - var(--sucher)) * .5); }
.sucher-daten { position: absolute; left: 50%; bottom: 7%; translate: -50% 0; font: 500 clamp(10px, 2.2cqw, 14px) var(--mono); color: #fff; padding: 3px 8px; background: rgba(0, 0, 0, .55); border-radius: 4px; white-space: nowrap; }
.l-zuschnitt { position: absolute; inset: 0; opacity: var(--zuschnitt); pointer-events: none; }
.zl { position: absolute; background: rgba(255, 255, 255, .8); } .zl1, .zl2 { top: 0; bottom: 0; width: 1px; } .zl3, .zl4 { left: 0; right: 0; height: 1px; }
.zl1 { left: 33.3%; } .zl2 { left: 66.6%; } .zl3 { top: 33.3%; } .zl4 { top: 66.6%; }
.l-flash { position: absolute; inset: 0; background: #fff; opacity: var(--flash); pointer-events: none; }
.l-schloss { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 8px; opacity: var(--schlossO); color: #fff; background: radial-gradient(closest-side, rgba(22, 14, 10, .5), rgba(22, 14, 10, .1)); }
.l-schloss .schloss { width: clamp(40px, 16cqw, 70px); }
.l-schloss .deckel-preis { font-size: clamp(18px, 5cqw, 30px); }

.kontakt { position: absolute; left: 50%; top: 50%; width: min(70cqw, 88cqh * .86); translate: -50% -50%; opacity: var(--kontakt); padding: 16px; background: #1b1714; border-radius: 6px; box-shadow: 0 24px 44px -12px rgba(0, 0, 0, .75); }
.kontakt-raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.kz { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: #000; }
.kz img { width: 100%; height: 100%; object-fit: cover; }
.kz i { position: absolute; left: 4px; top: 2px; font: 500 11px var(--mono); color: var(--orange-hell); font-style: normal; text-shadow: 0 1px 2px #000; }
.kontakt-stift { position: absolute; inset: 16px; width: calc(100% - 32px); height: calc(100% - 32px); overflow: visible; pointer-events: none; }
.kontakt-stift .x { fill: none; stroke: #ff3b6b; stroke-width: 7; stroke-linecap: round; stroke-dasharray: 1; }
.x1 { stroke-dashoffset: calc(1 - var(--x1)); } .x2 { stroke-dashoffset: calc(1 - var(--x2)); } .x3 { stroke-dashoffset: calc(1 - var(--x3)); } .x4 { stroke-dashoffset: calc(1 - var(--x4)); } .x6 { stroke-dashoffset: calc(1 - var(--x6)); }
.kringel { fill: none; stroke: var(--mint); stroke-width: 6; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--kringel)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 150px 198px; }

.regler-panel, .veroeff-panel { position: absolute; right: 4cqw; top: 50%; translate: 0 -50%; width: clamp(150px, 26cqw, 230px); padding: 14px 14px 16px; border-radius: 12px; background: rgba(27, 23, 20, .92); color: #fff; box-shadow: 0 16px 30px -10px rgba(0, 0, 0, .7); }
.regler-panel { opacity: var(--regler); }
.veroeff-panel { opacity: var(--veroeff); }
.panel-titel { font: 500 12px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--orange-hell); margin-bottom: 10px; }
.rg { display: grid; gap: 4px; margin-bottom: 10px; font-size: 13px; font-weight: 600; }
.rg b { display: block; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .2); position: relative; }
.rg i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--v) * var(--rg) * 100%); border-radius: 3px; background: var(--orange); }
.rg i::after { content: ""; position: absolute; right: -7px; top: -5px; width: 16px; height: 16px; border-radius: 50%; background: #fff; border: 3px solid var(--orange); }
.schalter { display: grid; grid-template-columns: auto 52px auto; gap: 8px; align-items: center; font-weight: 700; font-size: 14px; }
.s-knopf { position: relative; display: block; width: 52px; height: 28px; border-radius: 14px; background: color-mix(in srgb, var(--mint) calc((1 - var(--schalt)) * 100%), var(--magenta)); }
.s-knopf i { position: absolute; top: 3px; left: calc(3px + var(--schalt) * 24px); width: 22px; height: 22px; border-radius: 50%; background: #fff; }
.s-frei { opacity: calc(1 - var(--schalt) * .6); } .s-gesperrt { opacity: calc(.4 + var(--schalt) * .6); }
.preisschild { margin-top: 14px; display: inline-block; padding: 6px 14px; border-radius: var(--radius-rund); background: var(--magenta); font-weight: 800; font-size: 20px; opacity: var(--preisschild); scale: calc(.7 + var(--preisschild) * .3); }
.meldungen { position: absolute; left: 4cqw; right: 4cqw; bottom: 3cqh; display: grid; gap: 8px; justify-items: end; }
.m { max-width: 100%; padding: 10px 14px; border-radius: 12px; background: rgba(27, 23, 20, .94); color: #fff; font-size: clamp(12px, 1.6cqw + 5px, 15px); box-shadow: 0 10px 20px -8px rgba(0, 0, 0, .7); border-left: 4px solid var(--mint); }
.m1 { opacity: var(--m1); translate: 0 calc((1 - var(--m1)) * 26px); } .m2 { opacity: var(--m2); translate: 0 calc((1 - var(--m2)) * 26px); border-left-color: var(--orange); } .m3 { opacity: var(--m3); translate: 0 calc((1 - var(--m3)) * 26px); border-left-color: var(--magenta); }
.summe-m { display: flex; gap: 14px; justify-content: space-between; align-items: baseline; opacity: var(--msum); background: var(--orange); color: var(--on-accent); border-left-color: #fff; font-weight: 700; }
.m-summe { font: 500 20px var(--mono); }
.ent-stand { position: absolute; left: 4cqw; top: 3cqh; padding: 4px 12px; border-radius: var(--radius-rund); background: rgba(27, 23, 20, .85); font: 500 12px var(--mono); letter-spacing: .06em; color: #fff; }
.ent-szene.mit-meldungen .meldungen { z-index: 5; }
@media (max-width: 900px) {
  .ent-raster { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; }
  .ent-szene { order: 1; }
  .ent-schritte { order: 2; align-content: start; }
  .js:not([data-bewegung="starr"]) .ent-s:not([aria-current="step"]) { display: none; }
  .js:not([data-bewegung="starr"]) .ent-s[aria-current="step"] { transform: none; }
  .regler-panel, .veroeff-panel { right: 3cqw; top: auto; bottom: 3cqh; translate: 0 0; width: 52cqw; }
  .meldungen { left: 3cqw; right: 3cqw; bottom: auto; top: 12cqh; }
  .foto { width: min(54cqw, 66cqh * .8); }
}
/* Ruhige Fassung (starr, ohne JavaScript): die Szene steht fertig da, die Schritte stehen untereinander */
html[data-bewegung="starr"] .ent :is(.l-sucher, .l-zuschnitt, .l-flash, .l-schloss, .l-u), html:not(.js) .ent :is(.l-sucher, .l-zuschnitt, .l-flash, .l-schloss, .l-u) { display: none; }
html:not(.js) .s[data-src] { display: none; opacity: 1; }
html:not(.js) .ent { --kontakt: 1; --regler: 1; --veroeff: 1; --sucher: 1; --zuschnitt: 1; --flash: 1; --schlossO: 1; --u: 1; --preisschild: 1; }
html[data-bewegung="starr"] .ent, html:not(.js) .ent { height: auto; }
html[data-bewegung="starr"] .ent-buehne, html:not(.js) .ent-buehne { position: static; height: auto; overflow: visible; padding-block: clamp(48px, 7vw, 96px); }
html[data-bewegung="starr"] .ent-szene, html:not(.js) .ent-szene { height: clamp(420px, 60vw, 640px); }
html[data-bewegung="starr"] .ent-s, html:not(.js) .ent-s { opacity: 1; }
html[data-bewegung="starr"] .ent .regler-panel, html:not(.js) .ent .regler-panel, html[data-bewegung="starr"] .ent .veroeff-panel, html:not(.js) .ent .veroeff-panel, html[data-bewegung="starr"] .ent .kontakt, html:not(.js) .ent .kontakt { display: none; }
html[data-bewegung="starr"] .ent .meldungen, html:not(.js) .ent .meldungen { display: none; }
html[data-bewegung="starr"] .ent .ent-stand, html:not(.js) .ent .ent-stand { display: none; }
@media (max-width: 900px) { html[data-bewegung="starr"] .ent-raster, html:not(.js) .ent-raster { grid-template-rows: auto auto; } }

/* ---------- 7 · Abo ---------- */
.abo { background: var(--orange); color: var(--on-accent); }
.abo-raster { display: grid; gap: clamp(20px, 3vw, 44px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .abo-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.abo-karte { position: relative; padding: clamp(22px, 3vw, 40px); border-radius: 20px; background: var(--graphit); color: #f8f3e9; box-shadow: 0 30px 60px -30px rgba(40, 20, 0, .8); }
.abo-karte::before, .abo-karte::after { content: ""; position: absolute; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--orange); }
.abo-karte::before { left: -13px; } .abo-karte::after { right: -13px; }
.abo-karte .kicker { color: var(--orange-hell); }
.abo-karte h2 { font-size: clamp(26px, 3vw, 40px); margin-bottom: 14px; }
.abo-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 16px; color: #d6cdbf; }
.abo-zahl { font: 800 clamp(44px, 6vw, 72px)/1 var(--schrift); color: var(--orange-hell); letter-spacing: -.03em; }
.haken-liste { display: grid; gap: 10px; margin-block: 18px; }
.haken-liste li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 10px; font-weight: 600; }
.haken-liste svg { width: 22px; height: 22px; color: var(--mint); }
.abo-bedingung { padding: 14px 16px; border-radius: 10px; background: rgba(255, 255, 255, .08); font-size: 15px; color: #e6dfd2; border-left: 4px solid var(--orange); }
.abo-karte .klein { color: #b9b0a2; margin-top: 12px; }
.abo-rechner { padding: clamp(20px, 2.6vw, 34px); border-radius: 20px; background: var(--papier); color: var(--text); box-shadow: 0 30px 60px -30px rgba(40, 20, 0, .8); display: grid; gap: 16px; container-type: inline-size; }
.abo-rechner h3 { font-size: clamp(22px, 2vw, 28px); }
.abo-rechner input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(90deg, var(--orange) var(--fuell, 30%), rgba(42, 37, 33, .2) var(--fuell, 30%)); }
.abo-rechner input[type="range"]::-moz-range-track { background: rgba(42, 37, 33, .2); }
.abo-rechner input[type="range"]::-webkit-slider-thumb { background: var(--graphit); border-color: var(--orange); }
.abo-rechner input[type="range"]::-moz-range-thumb { background: var(--graphit); border-color: var(--orange); }
.abo-rechner .regler-wert { color: var(--graphit); }
.balken { display: grid; gap: 10px; }
.balken-zeile { display: grid; grid-template-columns: 64px minmax(0, 1fr) 72px; gap: 10px; align-items: center; font-weight: 700; font-size: 14px; }
.balken-zeile b { font: 500 14px var(--mono); text-align: right; }
.balken-spur { height: 22px; border-radius: 4px; background: var(--tisch-2); overflow: hidden; }
.balken-spur i { display: block; height: 100%; width: calc(var(--w) * 100%); background: var(--magenta); border-radius: 4px; transition: width .4s cubic-bezier(.3, .9, .3, 1.1), background-color .3s; }
.balken-spur i.b-abo { background: var(--graphit); }
.balken-spur i.guenstiger { background: var(--mint-tief); }
.rechner-satz { font-size: 17px; }
.rechner-satz strong { background: linear-gradient(transparent 62%, color-mix(in srgb, var(--orange) 55%, transparent) 62%); }
.preisliste { width: 100%; border-collapse: collapse; font-size: 15px; }
.preisliste th, .preisliste td { padding: 10px 6px; text-align: left; border-top: 1px dashed var(--border); vertical-align: middle; }
.preisliste td:last-child { font: 500 14px var(--mono); text-align: right; white-space: nowrap; }
@container (max-width: 420px) { .preisliste td:nth-child(2) { display: none; } }

/* ---------- 8 · Fragen und Stimmen ---------- */
.fragen { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--mint) 14%, transparent)); }
.fragen-raster { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .fragen-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } }
.fragen-liste h2 { margin-block: 6px 22px; }
details { border-top: 2px solid var(--graphit); }
details:last-of-type { border-bottom: 2px solid var(--graphit); }
summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 56px; padding: 12px 4px; cursor: pointer; font-weight: 800; font-size: clamp(17px, .6vw + 14px, 21px); list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--graphit); color: #fff; font: 500 22px/1 var(--mono); transition: transform .25s, background-color .25s; }
details[open] summary::after { transform: rotate(45deg); background: var(--orange); color: var(--on-accent); }
details[open] summary { color: var(--orange-tief); }
details p { padding: 0 4px 20px; max-width: 64ch; color: var(--muted); }
.stimmen { display: grid; gap: 22px; padding-top: 8px; }
.stimme { position: relative; padding: 24px 22px 18px; background: var(--papier); box-shadow: var(--schatten-dia); transform: rotate(calc(var(--r, 0deg) * .6)); border-radius: 3px; }
.stimme::before { content: ""; position: absolute; left: 50%; top: -12px; width: 90px; height: 24px; translate: -50% 0; background: color-mix(in srgb, var(--mint) 70%, transparent); transform: rotate(-3deg); }
.stimme blockquote p { font-size: 17px; font-weight: 600; line-height: 1.45; }
.stimme-name { margin-top: 10px; font: 500 13px var(--mono); color: var(--muted); }
.stimmen-hinweis { padding-inline: 4px; }

/* ---------- 9 · Aufträge, Formulare ---------- */
.auftraege { background-color: var(--pflaume); background-image: radial-gradient(800px 500px at 90% 0%, rgba(255, 124, 192, .22), transparent 70%); color: #fff; }
.auftraege .kicker { color: var(--orange-hell); } .auftraege .lead { color: #ecd9e6; }
.auftraege a { color: var(--orange-hell); }
.auftraege-raster { display: grid; gap: clamp(28px, 4vw, 64px); grid-template-columns: minmax(0, 1fr); align-items: start; }
@media (min-width: 1000px) { .auftraege-raster { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); } }
.auftraege-text h2 { margin-block: 6px 16px; }
.leistungen { display: grid; gap: 10px; margin-block: 24px; }
.leistungen li { display: grid; gap: 2px; padding: 14px 18px; border-radius: 10px; border-left: 5px solid var(--magenta-hell); background: rgba(255, 255, 255, .08); }
.leistungen b { font-size: 18px; } .leistungen span { color: #ecd9e6; font-size: 15px; }
.kontakt-zeile { display: grid; gap: 2px; font-weight: 700; font-size: 18px; }
.kontakt-zeile span { font-size: 14px; font-weight: 500; color: #ecd9e6; }
.anfrage { padding: clamp(20px, 2.6vw, 34px); border-radius: 16px; background: var(--papier); color: var(--text); display: grid; gap: 14px; box-shadow: 0 30px 60px -30px #000; }
.anfrage h3 { font-size: 24px; }
.anfrage a { color: var(--orange-tief); }
.feld-gruppe { display: grid; gap: 6px; }
.feld-gruppe label { font-weight: 700; font-size: 15px; }
input[type="text"], input[type="email"], select, textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 2px solid var(--graphit-3); border-radius: 10px; background: #fff; color: var(--text); font: 500 16px var(--schrift); }
textarea { min-height: 110px; resize: vertical; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.haken-feld { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 12px; align-items: start; font-size: 14px; }
.haken-feld input { width: 24px; height: 24px; margin: 2px 0 0; accent-color: var(--magenta); }
.formular-meldung { font-weight: 700; color: var(--mint-tief); min-height: 1.4em; }

/* ---------- 10 · Fenster ---------- */
.fenster { border: 0; padding: 0; width: min(560px, calc(100vw - 24px)); border-radius: 18px; background: var(--papier); color: var(--text); box-shadow: 0 40px 90px rgba(0, 0, 0, .55); max-height: calc(100svh - 24px); overflow: auto; }
.fenster::backdrop { background: rgba(20, 14, 10, .66); }
.fenster-innen { display: grid; gap: 14px; padding: clamp(20px, 3vw, 32px); }
.fenster h2 { font-size: clamp(24px, 3vw, 32px); }
.fenster-preis { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; color: var(--muted); }
.fenster-zahl { font: 800 clamp(36px, 6vw, 48px)/1 var(--schrift); color: var(--text); letter-spacing: -.02em; }
.fenster-knoepfe { display: flex; flex-wrap: wrap; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.fenster .haken-feld { padding: 12px 14px; border-radius: 10px; background: color-mix(in srgb, var(--orange) 14%, var(--papier)); font-size: 15px; font-weight: 600; }
@media (prefers-reduced-motion: no-preference) {
  .fenster { opacity: 0; transform: translateY(26px) scale(.97); transition: opacity .28s ease, transform .28s cubic-bezier(.2, .9, .3, 1.1), overlay .28s allow-discrete, display .28s allow-discrete; }
  .fenster[open] { opacity: 1; transform: none; }
  @starting-style { .fenster[open] { opacity: 0; transform: translateY(26px) scale(.97); } }
  .fenster::backdrop { opacity: 0; transition: opacity .28s ease, overlay .28s allow-discrete, display .28s allow-discrete; }
  .fenster[open]::backdrop { opacity: 1; }
  @starting-style { .fenster[open]::backdrop { opacity: 0; } }
}

/* ---------- 11 · Fuß ---------- */
.fuss { background: #1a1613; color: #d9d0c2; padding-top: clamp(40px, 5vw, 64px); }
.fuss a { color: var(--orange-hell); }
.fuss-raster { display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr); font-size: 15px; }
@media (min-width: 860px) { .fuss-raster { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fuss-marke { font-weight: 900; font-size: 22px; color: #fff; margin-bottom: 6px; }
.fuss address { font-style: normal; margin-bottom: 8px; }
.fuss-links { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: center; margin-top: 8px; }
.fuss .knopf--text { color: var(--orange-hell); }
.fuss-demo { margin-top: 28px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .15); font-size: 13px; color: #b9b0a2; max-width: 90ch; }
.fuss-zeile { width: 100%; max-width: none; margin: 0 !important; padding: 22px 20px 26px; text-align: center; font-size: 13px !important; color: #a79d8e; }
.fuss-zeile a { color: #d9d0c2; }

/* ---------- 12 · Bewegung, Rückfälle, starr ---------- */
/* Auftritte: scroll-getrieben, wo der Browser es kann; sonst übernimmt der IntersectionObserver (html.rein-io) */
@supports ((animation-timeline: view()) and (animation-range: entry 0% entry 50%)) {
  @media (prefers-reduced-motion: no-preference) {
    html:not([data-bewegung="starr"]) .rein { animation: rein-auf linear both; animation-timeline: view(); animation-range: entry 2% entry 42%; }
    html[data-bewegung="dynamisch"] .feed .post:not(.post--klein) { animation: kipp linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
    html:not([data-bewegung="starr"]) .streifen { animation: streifen-licht linear both; animation-timeline: scroll(root); animation-range: 0 300px; }
  }
}
@media (max-width: 680px) { html[data-bewegung="dynamisch"] .feed .post { animation: none !important; } }
@keyframes rein-auf { from { opacity: 0; translate: 0 40px; } to { opacity: 1; translate: 0 0; } }
@keyframes kipp { from { transform: rotate(calc(var(--r, 0deg) * var(--rk, 1) * 3.6)) translateY(22px); } to { transform: rotate(calc(var(--r, 0deg) * var(--rk, 1))) translateY(0); } }
@keyframes streifen-licht { from { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } to { box-shadow: 0 6px 20px -8px rgba(0, 0, 0, .55); } }
html.rein-io .rein { opacity: 0; translate: 0 34px; transition: opacity .6s ease, translate .6s cubic-bezier(.2, .9, .3, 1.1); }
html.rein-io .rein.ist-da { opacity: 1; translate: 0 0; }

/* Selbstvorführung im ersten Bildschirm: der mittlere Abzug entwickelt sich kurz von selbst */
.post.vorfuehrung .s { opacity: 1; visibility: visible; }
.post.vorfuehrung .deckel { opacity: 0; visibility: hidden; }
.vorfuehr-tag { position: absolute; left: 8px; top: 8px; z-index: 6; padding: 2px 9px; border-radius: var(--radius-rund); background: rgba(27, 23, 20, .85); color: #fff; font: 500 11px var(--mono); letter-spacing: .06em; pointer-events: none; }

html[data-bewegung="starr"] *, html[data-bewegung="starr"] *::before, html[data-bewegung="starr"] *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
html[data-bewegung="starr"] .post { transform: none; }
html[data-bewegung="starr"] .post:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .post { transform: none; }
}

@media print { .streifen, .frames, .knopf, .deckel { display: none !important; } }