/* Theaterpack – gemeinsamer Bühnen-Schmuck („Stil einheitlich“, 07.10.2026; Ursprung: Aufpeppen /paare 06.10.2026)
   Wahl Max: Idee 1 Scherenschnitt-Figuren · Idee 4 Eintrittskarten · Idee 5 Filmstreifen & Polaroids.
   Gilt nur unter <body class="… deko">. Wird auf ALLEN neuen Seiten NACH schrift.css und VOR der seiteneigenen CSS geladen.
   Pflege NUR hier: gemeinsam/css/deko.css (werkzeug/bau_vorschau.py kopiert in alle Quellen). Bewegung: js/deko.js.
   Regeln:
   - Dekoration ist immer aria-hidden bzw. alt="" (Ausnahme: Polaroid-Fotos mit echtem Alt-Text + wahrer Beschriftung = Stückname).
   - Masken nur auf dekorativen ::before-Ebenen (Inhalt wird nie beschnitten; ohne Masken-Support bleibt ein Rechteck).
   - Abrisse neutral („Eintritt“ bzw. Sachwort), keine Wortspiele, nichts, was wie eine Platznummer aussieht (Max, 07.10.2026). */

@font-face{font-family:"Caveat";font-style:normal;font-weight:600;font-display:swap;
  src:url("../fonts/caveat-600-latin.woff2") format("woff2")}
.deko{--papier:#F1E9DC;--tinte:#1b1712;--tinte-leise:#4d443a;--gold-dunkel:#7a4f0e;
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive}

/* ---------- Eintrittskarte: Grundform (Papier als ::before, Stanzlöcher links/rechts per Maske) ---------- */
.deko .ticket{position:relative;isolation:isolate}
.deko .ticket::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:10px;
  background:linear-gradient(var(--tk,rgba(241,233,220,.86)),var(--tk,rgba(241,233,220,.86))),var(--korn);background-size:auto,220px;background-color:var(--papier);
  -webkit-mask:radial-gradient(circle at 0 50%,transparent var(--loch,10px),#000 calc(var(--loch,10px) + .5px)) left/51% 100% no-repeat,
               radial-gradient(circle at 100% 50%,transparent var(--loch,10px),#000 calc(var(--loch,10px) + .5px)) right/51% 100% no-repeat;
          mask:radial-gradient(circle at 0 50%,transparent var(--loch,10px),#000 calc(var(--loch,10px) + .5px)) left/51% 100% no-repeat,
               radial-gradient(circle at 100% 50%,transparent var(--loch,10px),#000 calc(var(--loch,10px) + .5px)) right/51% 100% no-repeat}

/* ---------- Große goldene Karte (Hauptanlass) mit Abriss rechts, darin eine kleine Figur ---------- */
.deko .gross-k.gold-karte{display:grid;grid-template-columns:1fr 170px;background:none;border:0;border-radius:0;padding:0;margin-bottom:16px;
  color:var(--tinte);--loch:16px;--tk:rgba(232,176,74,.9)}
.deko .gross-k.gold-karte::before{background-color:var(--gelb)}
.deko .gold-karte .vorn{padding:clamp(24px,3vw,32px) clamp(18px,3vw,34px) clamp(24px,3vw,32px) clamp(32px,4vw,46px)}
.deko .gold-karte .kl{color:#4a3510}
.deko .gross-k.gold-karte b{font-size:clamp(44px,6vw,80px);line-height:.9;margin:8px 0 12px;color:var(--tinte)}
.deko .gross-k.gold-karte p{color:#3a2b10;max-width:34em;font-size:17px}
.deko .gold-karte .abriss{border-left:2px dashed rgba(27,23,18,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:14px 18px 14px 10px;text-align:center;font:700 11px/1.3 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:#3a2b10}
.deko .gold-karte .abriss img{display:block;height:clamp(96px,10vw,128px);width:auto}

/* ---------- Kleine cremefarbene Kärtchen mit Abriss (Anlässe / Häuser) ---------- */
.deko .anlass-chips.karten{gap:14px}
.deko .anlass-chips.karten div{background:none;border:0;border-radius:0;padding:0}
.deko .anlass-chips.karten .ticket{display:grid;grid-template-columns:1fr 46px;min-height:112px;color:var(--tinte)}
.deko .anlass-chips.karten .vorn{padding:16px 10px 16px 24px}
.deko .anlass-chips.karten b{font-size:21px;line-height:1;color:var(--tinte)}
.deko .anlass-chips.karten span{color:var(--tinte-leise);font-size:15px;line-height:1.4;display:block}
.deko .anlass-chips.karten a{color:var(--gold-dunkel);text-decoration:underline;text-underline-offset:3px}
.deko .anlass-chips.karten .abriss{writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;
  border-right:2px dashed rgba(27,23,18,.38);font:700 10px/1 var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--tinte-leise);padding:8px 0}
.deko .anlass-chips.karten .ticket:nth-child(odd){transform:rotate(-.6deg)}
.deko .anlass-chips.karten .ticket:nth-child(3n){transform:rotate(.7deg)}
@media (max-width:560px){
  .deko .anlass-chips.karten{grid-template-columns:1fr}
  .deko .anlass-chips.karten .ticket{min-height:0}
  .deko .anlass-chips.karten .vorn{padding:16px 10px 16px 26px}
  .deko .gross-k.gold-karte{grid-template-columns:1fr 96px}
  .deko .gold-karte .abriss{padding:12px 10px 12px 6px;font-size:9px;letter-spacing:.12em}
  .deko .gold-karte .abriss img{height:74px}
  /* 07.10.2026: Kartentitel nie zerreißen – Größe so, dass das ganze Wort neben den Abriss passt (Textbreite ≈ 100vw − 180 px) */
  .deko .gross-k.gold-karte b{font-size:clamp(32px,11vw,44px)}
  .deko .gross-k.gold-karte.lang b{font-size:clamp(22px,calc((100vw - 180px) / 7.6),44px)}  /* „Weihnachtsfeier“; unter ~340 px Trennung an der Wortfuge (&shy; im HTML) */
}
/* 07.10.2026: sehr schmale Handys (≤ 340 px): Kopfleiste passt ohne Querscrollen */
@media (max-width:340px){
  .nav{padding-left:12px;padding-right:12px;gap:8px}
  .nav .rechts{gap:8px}
  .nav .anfragen{padding:8px 14px;font-size:14px}
}

/* ---------- Terminlisten (.dk-liste: /paare, /firmenfeier, /gastspiele): jede Vorstellung als Eintrittskarte, Datum = Abriss links ---------- */
.deko .dk-liste{border-top:0;display:grid;gap:14px}
.deko .dk-liste>li{--stub:118px;--luecke:24px;--pl:22px;--x:calc(var(--pl) + var(--stub) + var(--luecke) / 2);
  position:relative;isolation:isolate;padding:22px 24px 22px var(--pl);border-bottom:0}
.deko .dk-liste>li::before,.deko .eintrag::before,.deko .tb .zeile::before,.deko .abriss-kasten::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:12px;border:1px solid rgba(232,176,74,.26);
  background:linear-gradient(90deg,rgba(232,176,74,.13) 0 var(--x),rgba(243,237,228,.02) var(--x)),var(--feld);
  -webkit-mask:radial-gradient(circle at var(--x) 0,transparent 10px,#000 10.5px) top/100% 51% no-repeat,
               radial-gradient(circle at var(--x) 100%,transparent 10px,#000 10.5px) bottom/100% 51% no-repeat;
          mask:radial-gradient(circle at var(--x) 0,transparent 10px,#000 10.5px) top/100% 51% no-repeat,
               radial-gradient(circle at var(--x) 100%,transparent 10px,#000 10.5px) bottom/100% 51% no-repeat}
.deko .dk-liste>li::after,.deko .eintrag::after,.deko .tb .zeile::after{content:"";position:absolute;z-index:-1;top:14px;bottom:14px;left:calc(var(--x) - 1px);width:2px;
  background:repeating-linear-gradient(to bottom,rgba(232,176,74,.55) 0 5px,transparent 5px 10px)}
@media (max-width:760px){.deko .dk-liste>li{--stub:76px;--luecke:16px;--pl:16px;padding:20px 16px 20px var(--pl)}}

/* Spielplan: Einträge als Eintrittskarten (Datum = Abriss links); Grid-Spalten bleiben aus spielplan.css */
.deko .liste{display:grid;gap:12px;padding-top:14px}
.deko .eintrag{--stub:110px;--luecke:24px;--pl:20px;--x:calc(var(--pl) + var(--stub) + var(--luecke) / 2);
  position:relative;isolation:isolate;padding:20px 22px 20px var(--pl);border-bottom:0}
.deko .monat{border-bottom:0}
@media (max-width:1099px){.deko .eintrag{--stub:96px}}
@media (max-width:760px){.deko .eintrag{--stub:70px;--luecke:14px;--pl:14px;padding:18px 14px 18px var(--pl)}}

/* Startseite: Zeilen im Kasten „Danach“ als kleine Eintrittskarten, Abriss nach der Datums-/Bildspalte */
.deko .tb .zeile{--pl:14px;--x:calc(var(--pl) + 88px + 9px);position:relative;isolation:isolate;border-top:0;padding:14px 14px 14px var(--pl);margin-bottom:12px}
.deko .tb-weitere h4{padding-bottom:12px}
@media (max-width:899px){.deko .tb .zeile{--pl:12px;--x:calc(var(--pl) + 72px + 7px);padding:12px 12px 12px var(--pl)}}

/* ---------- Kasten mit Abriss (Preis /paare, Gage /gastspiele): Abriss-Leiste links, Inhalt rechts ---------- */
body.deko .abriss-kasten{--x:58px;position:relative;isolation:isolate;display:grid;grid-template-columns:var(--x) 1fr;column-gap:clamp(18px,2.4vw,30px);
  background:none;border:0;border-radius:0;padding:clamp(20px,2.6vw,32px) clamp(20px,2.6vw,32px) clamp(20px,2.6vw,32px) 0}
body.deko .abriss-kasten::before{border:1px solid rgba(232,176,74,.4);background:linear-gradient(135deg,rgba(232,176,74,.14),rgba(232,176,74,.03)),var(--bg-hell)}
body.deko .abriss-kasten>*{grid-column:2}
body.deko .abriss-kasten>.knopf{justify-self:start}
body.deko .abriss-kasten>.abriss{grid-column:1;grid-row:1 / span 9;writing-mode:vertical-rl;transform:rotate(180deg);display:flex;align-items:center;justify-content:center;
  border-left:2px dashed rgba(232,176,74,.55);margin:-6px 0;font:700 11px/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:var(--gelb)}
@media (max-width:560px){body.deko .abriss-kasten{--x:44px}}

/* ---------- Figur: kleine Scherenschnitt-Figur, rechts neben einer Überschrift (float) ---------- */
.deko .figur{float:right;width:clamp(78px,13vw,176px);margin:0 0 10px clamp(14px,3vw,40px);pointer-events:none}
.deko .figur img{display:block;width:100%;height:auto}
.deko .figur.breit{width:clamp(120px,18vw,220px)}
.deko .figur-nach{clear:both}
/* Figur mittig unter einem zentrierten Block (z. B. Startseite „Von klein bis groß“) */
.deko .figur-mitte{display:block;width:clamp(170px,26vw,300px);margin:clamp(30px,4vw,44px) auto 0;pointer-events:none}
.deko .figur-mitte img{display:block;width:100%;height:auto;opacity:.9}

/* ---------- Filmstreifen (Übergang): Band unrotiert + overflow:hidden, Rotation innen, Lauf nur mit .laeuft ---------- */
.deko .film-band{overflow:hidden;padding:clamp(34px,4vw,50px) 0 6px;text-align:center}
.deko .film{position:relative;transform:rotate(-2deg);margin:0 -6vw;background:#0a0908;padding:22px 0;box-shadow:0 20px 40px rgba(0,0,0,.5);pointer-events:none}
.deko .film::before,.deko .film::after{content:"";position:absolute;left:0;right:0;height:9px;
  background:repeating-linear-gradient(90deg,transparent 0 10px,rgba(243,237,228,.8) 10px 21px,transparent 21px 32px)}
.deko .film::before{top:7px}.deko .film::after{bottom:7px}
.deko .film .spur{display:flex;width:max-content}
.deko .film .reihe{display:flex;gap:8px;padding-right:8px}
.deko .film img{display:block;height:140px;width:auto;filter:sepia(.22) contrast(1.05)}
.deko .film-band.laeuft .spur{animation:tp-filmlauf 80s linear infinite}
.deko .film-band.angehalten .spur{animation-play-state:paused}
@keyframes tp-filmlauf{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.deko .film-band .spur{animation:none!important}}
.deko .film-halt{margin:clamp(22px,3vw,34px) auto 0;min-height:44px;padding:0 14px;background:none;border:0;color:var(--text-leise);
  font:500 14px/1 var(--sans);text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.deko .film-halt:hover{color:var(--gelb)}
.deko .film-halt:focus-visible{outline:2px solid var(--gelb);outline-offset:3px;border-radius:4px}
@media (max-width:760px){.deko .film img{height:100px}.deko .film{padding:18px 0}}

/* ---------- Polaroid mit Handschrift (nur wahre Beschriftung: Stückname) ---------- */
.deko .polaroid{position:relative;margin:0;width:min(240px,64vw);background:#f7f2ea;padding:12px 12px 50px;box-shadow:0 18px 40px rgba(0,0,0,.55);transform:rotate(3deg)}
.deko .polaroid::before{content:"";position:absolute;top:-12px;left:50%;width:88px;height:26px;transform:translateX(-50%) rotate(-4deg);background:rgba(232,176,74,.6)}
.deko .polaroid img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}
.deko .polaroid figcaption{position:absolute;left:8px;right:8px;bottom:9px;text-align:center;font:600 23px/1.1 var(--hand);color:#2a241d;white-space:nowrap}
.deko .polaroid.rechts{transform:rotate(-3deg)}
/* Text links, Polaroid rechts; unter 820 px untereinander */
.deko .mit-polaroid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(32px,5vw,72px);align-items:center;margin-bottom:34px}
.deko .mit-polaroid .lead{margin-bottom:0}
@media (max-width:819px){
  .deko .mit-polaroid{grid-template-columns:1fr;gap:34px}
  .deko .mit-polaroid .polaroid{justify-self:end;width:min(220px,62vw);margin-right:8px}
  .deko .polaroid figcaption{font-size:20px}
}

/* ---------- Publikum von hinten: Übergang zur Anfrage bzw. zum Seitenende ---------- */
.deko .publikum{max-width:1160px;margin:clamp(24px,4vw,48px) auto 0;padding:0 var(--rand);pointer-events:none}
.deko .publikum img{display:block;width:100%;height:auto;opacity:.85;
  -webkit-mask-image:linear-gradient(#000 40%,transparent 97%);mask-image:linear-gradient(#000 40%,transparent 97%)}
@media (max-width:600px){.deko .publikum img{height:96px;object-fit:cover;object-position:50% 0}}

/* 03.11.2026 Einzelwort-Regel (nie ein einzelnes Wort allein auf einer Zeile): Überschriften und kurze Texte ausbalancieren,
   Fließtext ohne einzelnes Wort in der letzten Zeile. Wirkt auf allen Seiten mit body.deko. */
.deko :is(h1,h2,h3,h4,summary,figcaption,dt,.abriss,.etikett,.knopf,label,.chip){text-wrap:balance}
.deko :is(p,li,dd,small,blockquote,address,.ort span,.von,.zus){text-wrap:pretty}
@media (max-width:430px){.deko .eintrag h3{font-size:23px;line-height:1.05}}