/* Schaltpult: Werkzeug 13 „Tageskarte & Kundenstopper“ (Präfix spk-).
   Farben nur aus dem Siegel (Tokens aus site.css und schaltpult.css), Grafik nur aus Logo-Elementen (Plakette, Funkeln).
   Die Karte und die Bühne zeichnet schaltpult-tageskarte.js auf ein Canvas. Druck: benannte Seiten (@page spk-…) mit den
   Maßen aus Models/SchaltpultTageskarte.cs; beim Drucken steht nur die Karte auf dem Blatt. */

.spk [hidden]{display:none!important}
/* Die Vorschau bleibt beim Einstellen im Blick: clip statt hidden, damit position:sticky (schaltpult.css) wirkt */
.sp-werkzeug[data-werkzeug="tageskarte"]{overflow:clip}
.spk-feld{display:flex;flex-direction:column;gap:8px;min-width:0}
.spk-feld-name{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0;font-weight:600}
.spk-feld-name small{font-weight:400;font-size:13px;color:var(--muted);font-family:var(--f-mono);white-space:nowrap}

/* ---------- Klick 1: Gerichte mit Preis-Regler ---------- */
.spk-posten{display:flex;flex-direction:column;gap:12px}
.spk-gruppe{display:flex;flex-direction:column;gap:6px;min-width:0}
.spk-gruppe-name{display:flex;align-items:center;gap:8px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--brass)}
.spk-gruppe-name::after{content:"";flex:1;height:1px;background:var(--line)}
.spk-liste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.spk-zeile{display:flex;flex-direction:column;gap:2px;min-width:0}
.spk-haken>span{min-height:52px;padding-top:5px;padding-bottom:5px}
.spk-haken img{flex:none;width:40px;height:40px;border-radius:10px;object-fit:cover}
.spk-siegel{flex:none;width:40px;height:40px;border-radius:10px;background:var(--logo-gruen) url("../img/logo-klein.webp") center/74% no-repeat;box-shadow:inset 0 0 0 2px var(--logo-gold)}
.spk-haken-text{display:flex;flex-direction:column;align-items:flex-start;min-width:0;line-height:1.2}
.spk-haken-text b{font-weight:700;overflow-wrap:anywhere}
.spk-haken-text small{font-weight:400;font-size:12.5px;color:var(--muted)}
.spk-marke{display:inline-flex;align-items:center;gap:5px;margin-top:3px;padding:1px 8px 1px 6px;border-radius:999px;font-style:normal;font-size:11.5px;font-weight:700;background:var(--brass-soft);color:var(--fg)}
.spk-marke::before{content:"";width:10px;height:10px;border-radius:50%;background:var(--logo-gold);box-shadow:0 0 0 2px color-mix(in srgb,var(--logo-gold) 35%,transparent)}
.spk-marke-kalt::before{border-radius:0;background:var(--blau);box-shadow:none;-webkit-mask:url("../img/grafik/funkel.svg") center/contain no-repeat;mask:url("../img/grafik/funkel.svg") center/contain no-repeat}
.spk-zeile.ist-gesperrt .spk-haken>span{opacity:.55}
.spk-preis{margin:0 4px 4px 52px;padding:2px 12px 0;border-left:3px solid var(--sp-farbe);animation:spk-auf .3s ease}
.spk-preis .sp-regler-kopf{font-size:13px;color:var(--muted)}
.spk-preis output{font-size:17px}
.spk-preis input[type=range]{height:34px}
@keyframes spk-auf{from{opacity:0;transform:translateY(-6px)}}
[data-spk-anzahl-tipp].ist-warnung{color:var(--rot);font-weight:600}

/* ---------- Klick 2: Format, Look, Störer, Wetter ---------- */
.spk-formate{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:22px}
.spk-formate label>span{flex-direction:column;gap:2px;line-height:1.1;padding:6px 4px;min-height:64px;border-radius:18px}
.spk-formate b{font-family:var(--f-display);font-size:19px;line-height:1}
.spk-formate small{display:block;font-size:11px;font-weight:600;opacity:.9;text-wrap:balance}
.spk-form{display:block;flex:none;border:2px solid currentColor;border-radius:3px;opacity:.85;margin-bottom:2px}
.spk-form-a1{width:15px;height:21px;border-radius:2px 2px 0 0;position:relative}
.spk-form-a1::after{content:"";position:absolute;left:-4px;right:-4px;bottom:-5px;height:3px;border:solid currentColor;border-width:0 2px;border-radius:0}
.spk-form-a4{width:14px;height:20px}
.spk-form-a5{width:11px;height:15px}
.spk-form-tv{width:22px;height:13px}
.spk-form-insta{width:15px;height:19px;border-radius:4px}
.spk-form-story{width:11px;height:20px;border-radius:4px}

.spk-muster{flex:none;width:22px;height:22px;border-radius:50%;margin-left:-4px;border:2px solid var(--logo-gold)}
.spk-muster-kreide{background:radial-gradient(circle at 35% 35%,rgba(249,239,220,.35) 0 2px,transparent 3px),radial-gradient(circle at 65% 60%,rgba(249,239,220,.25) 0 1.5px,transparent 2.5px),var(--logo-gruen)}
.spk-muster-papier{background:var(--logo-creme);box-shadow:inset 0 0 0 2px var(--logo-creme),inset 0 0 0 3px var(--gold-gross)}
.spk-muster-band{background:linear-gradient(var(--logo-creme) 0 30%,var(--logo-lila) 30% 70%,var(--logo-creme) 70%)}

.spk-stoerer-liste{display:grid;grid-template-columns:minmax(0,1fr);gap:2px}
.spk-schalter{align-items:flex-start;padding:4px 0}
.spk-schalter .sp-schalter-bahn{margin-top:4px}
.spk-schalter-text{display:flex;align-items:flex-start;gap:8px;min-width:0;line-height:1.25}
.spk-schalter-text>span{min-width:0}
.spk-schalter small{line-height:1.3;margin-top:2px}
.spk-schalter input:disabled~.spk-schalter-text{opacity:.5}
.spk-schalter input:disabled+.sp-schalter-bahn{opacity:.5;cursor:not-allowed}
.spk-schalter.ist-wartet small{color:var(--rot)}
/* Mini-Plakette mit Siegel-Rand */
.spk-plakette{position:relative;flex:none;width:26px;height:26px;margin-top:1px;background:var(--logo-gold);-webkit-mask:url("../img/grafik/plakette.svg") center/contain no-repeat;mask:url("../img/grafik/plakette.svg") center/contain no-repeat}
.spk-plakette::after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--spk-pl,var(--logo-gruen))}
.spk-pl-gruen{--spk-pl:var(--logo-gruen)}
.spk-pl-gruenhell{--spk-pl:#1F5A3A}
.spk-pl-blau{--spk-pl:#2A3FB0}
.spk-pl-rot{--spk-pl:#B0090D}
.spk-pl-lila{--spk-pl:#5B1A62}
.spk-pl-braun{--spk-pl:#A8561B}
.sp-schalter input:checked~.spk-schalter-text .spk-plakette{animation:spk-pop .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes spk-pop{from{transform:scale(.3) rotate(-60deg)}}

.spk-wetter{gap:6px}
.spk-wetter-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-radius:20px}
.spk-wetter-seg label>span{flex-direction:column;gap:1px;line-height:1.1;min-height:58px;padding:4px 2px;border-radius:16px}
.spk-wetter-seg b{font-size:13px}
.spk-wetter-seg small{font-family:var(--f-mono);font-size:11px;font-weight:500;opacity:.85}
.spk-ws{display:block;flex:none;width:18px;height:18px;margin-bottom:2px}
.spk-ws-sonne{border-radius:50%;background:radial-gradient(circle,var(--logo-gold) 0 40%,transparent 43%),url("../img/grafik/funkel.svg") center/100% no-repeat}
.spk-ws-wolken{width:22px;height:14px;margin-top:2px;margin-bottom:4px;border-radius:999px;background:var(--muted);box-shadow:inset 0 0 0 2px var(--surface)}
.spk-ws-regen{width:13px;height:13px;margin:3px 0 4px;border-radius:50% 0 50% 50%;background:var(--blau);transform:rotate(-45deg)}
.spk-ws-kalt{background:var(--blau);-webkit-mask:url("../img/grafik/funkel.svg") center/contain no-repeat;mask:url("../img/grafik/funkel.svg") center/contain no-repeat}
.sp-segment input:checked+span .spk-ws-regen,.sp-segment input:checked+span .spk-ws-kalt{background:var(--sp-auf)}
.sp-segment input:checked+span .spk-ws-wolken{background:var(--sp-auf);box-shadow:none}
.spk-wetter.ist-aus .spk-wetter-seg{opacity:.75}

.spk-hintergruende img{border-radius:8px!important;width:34px!important;height:26px!important}
.spk-gehweg{flex:none;width:34px;height:26px;margin-left:-6px;border-radius:8px;background:repeating-linear-gradient(90deg,var(--logo-lila) 0 6px,var(--logo-creme) 6px 12px) top/100% 9px no-repeat,linear-gradient(var(--logo-creme) 0 9px,var(--brass-soft) 9px)}

/* ---------- Klick 3: Raus damit ---------- */
.spk-raus{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.spk-knopf{justify-content:flex-start;gap:10px;min-height:58px;padding:6px 16px;border-radius:18px;text-align:left;line-height:1.2}
.spk-knopf>span{display:flex;flex-direction:column;min-width:0}
.spk-knopf b{font-weight:700}
.spk-knopf small{font-size:12px;font-weight:500;opacity:.85;overflow-wrap:anywhere}
.btn-gold.spk-knopf small{opacity:1}
.spk-zeichen{flex:none;position:relative;width:24px;height:22px}
.spk-zeichen-druck{border:2.5px solid currentColor;border-radius:4px;height:14px;margin-top:4px}
.spk-zeichen-druck::before{content:"";position:absolute;left:3px;right:3px;top:-8px;height:7px;border:2px solid currentColor;border-bottom:0;border-radius:2px 2px 0 0}
.spk-zeichen-druck::after{content:"";position:absolute;left:4px;right:4px;bottom:-6px;height:6px;border:2px solid currentColor;border-top:0;background:transparent}
.spk-zeichen-bild{border:2.5px solid currentColor;border-radius:5px;overflow:hidden}
.spk-zeichen-bild::before{content:"";position:absolute;left:2px;bottom:1px;width:14px;height:9px;background:currentColor;clip-path:polygon(0 100%,45% 10%,70% 55%,85% 35%,100% 100%)}
.spk-zeichen-bild::after{content:"";position:absolute;right:3px;top:3px;width:5px;height:5px;border-radius:50%;background:currentColor}
.spk-knopf.ist-beschaeftigt{cursor:progress;opacity:.75}
.spk-raus-text{min-height:1.4em}
.spk-laden{align-self:flex-start;display:inline-flex;align-items:center;min-height:44px;padding:0 4px;color:var(--fg);font-weight:700;text-decoration:underline;text-decoration-color:var(--sp-farbe);text-decoration-thickness:2px;text-underline-offset:4px}
.spk-laden:focus-visible{outline:3px solid var(--brass);outline-offset:3px;border-radius:6px}
.spk .sp-schritt [data-kanalvorschau]{margin-top:4px}

/* ---------- Vorschau: Bühne ---------- */
.spk-buehne{display:flex;flex-direction:column;gap:12px}
.spk-status{position:relative;z-index:1;margin:0;font-size:14px;line-height:1.45;color:var(--logo-creme)}
.spk-szene{position:relative;z-index:1;border-radius:14px;overflow:hidden;box-shadow:0 26px 40px -26px #000;background:#06150E}
.spk-leinwand{display:block;width:100%;height:auto;aspect-ratio:4/5}
.spk-text{position:relative;z-index:1;border-radius:12px;background:rgba(249,239,220,.07);color:var(--logo-creme);font-size:13px;line-height:1.45}
.spk-text summary{min-height:44px;display:flex;align-items:center;padding:8px 14px;font-weight:700;cursor:pointer}
.spk-text summary:focus-visible{outline:3px solid var(--logo-creme);outline-offset:2px;border-radius:12px}
.spk-text-inhalt{padding:0 14px 12px}
.spk-text-inhalt p{margin:6px 0 2px}
.spk-text-inhalt ul{margin:0;padding-left:20px}

/* ---------- Kanal-Vorschau: die Karte im Format des Kanals ---------- */
.spk .sp-kv-bild.ist-eigen{background:#06150E}
.spk .kv-instagram .sp-kv-bild.ist-eigen,.spk .kv-facebook .sp-kv-bild.ist-eigen,.spk .kv-google .sp-kv-bild.ist-eigen{aspect-ratio:4/5}
.spk .kv-tiktok .sp-kv-bild.ist-eigen,.spk .kv-whatsapp .sp-kv-bild.ist-eigen{aspect-ratio:9/16}
.spk .kv-tv .sp-kv-bild.ist-eigen,.spk .kv-website .sp-kv-bild.ist-eigen,.spk .kv-newsletter .sp-kv-bild.ist-eigen{aspect-ratio:16/9}
.spk-kv{position:absolute;inset:0;display:block;width:100%;height:100%}

/* ---------- Druck: nur die Karte, im richtigen Format ---------- */
.spk-druck{display:none}
@page spk-a4{size:210mm 297mm;margin:0}
@page spk-a5{size:148mm 210mm;margin:0}
@page spk-a1{size:594mm 841mm;margin:0}
@page spk-quer{size:297mm 210mm;margin:10mm}
@page spk-hoch{size:210mm 297mm;margin:10mm}
@media print{
  html.spk-druckt,html.spk-druckt body{margin:0!important;padding:0!important;background:#fff!important;min-height:0!important}
  html.spk-druckt body>*:not(.spk-druck),html.spk-druckt body::before{display:none!important}
  html.spk-druckt .spk-druck{display:flex;justify-content:center;align-items:center;margin:0;padding:0;break-inside:avoid}
  .spk-druck canvas{display:block;max-width:none}
  .spk-seite-a4{page:spk-a4}
  .spk-seite-a5{page:spk-a5}
  .spk-seite-a1{page:spk-a1}
  .spk-seite-quer{page:spk-quer}
  .spk-seite-hoch{page:spk-hoch}
}

/* ---------- Schmale Bildschirme ---------- */
/* Einspaltig: die Bühne zuerst, dann die drei Klicks */
@media (max-width:1060px){
  .spk>.sp-vorschau{order:-1}
}
@media (max-width:520px){
  .spk-raus{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:420px){
  .spk-formate small{font-size:10px}
  .spk-wetter-seg b{font-size:12px}
  .spk-haken img,.spk-siegel{width:34px;height:34px}
  .spk-preis{margin-left:12px}
}

@media (prefers-reduced-motion: reduce){
  .spk-preis,.sp-schalter input:checked~.spk-schalter-text .spk-plakette{animation:none}
}