/* AssistUK Halloween — „Basteln & mehr" (12.10.2026): Startkachel, Unterseite, Grußkarte mit Buchstaben-Tafel,
   Gruselgeräusche und das Drucken auf Papier. Eigene Datei neben halloween.css (dort nur die gemeinsamen Grundlagen). */

/* --- Startbildschirm: vierte Kachel neben den Gruselstufen ------------------------------------------- */
.kachel-basteln { flex-direction: row; gap: 0.5em; justify-content: center; font-size: clamp(15px, 2.6vh, 30px);
  background: linear-gradient(150deg, #a8329e, #6a2a8f 60%, #3d1d66); }
.kachel-basteln svg { height: 62%; max-width: 32%; flex: none; color: #ffc04d; }
.kachel-basteln > span:not(.dwell-dot) { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.kachel-basteln small { display: block; }
.kachel-karte { background: linear-gradient(150deg, #3b2a6e, #a8329e 62%, #4b1d7a); }
.kachel-geraeusche { background: linear-gradient(150deg, #1f5a52, #3b2a6e 62%, #1a0b2e); }
.schirm-basteln .kachel-bild { width: min(80%, 40vh); }
:root[data-theme="kontrast"] .kachel-basteln { background: #111; }

/* --- Grußkarte: Vorschau links, Bildkarten rechts ---------------------------------------------------- */
.gk-vorschau { position: relative; min-height: 0; min-width: 0; display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius); border: 2px solid var(--rand); background: radial-gradient(circle at 50% 40%, #3d1d66, #160828); padding: 10px; }
.gk-karte { height: 100%; max-width: 100%; width: auto; aspect-ratio: 148 / 210; border-radius: 6px;
  box-shadow: 0 8px 28px rgba(0,0,0,0.55); background: #000; }
.gk-wahl .k-karte { position: relative; }
.gk-hg-bild { height: 70%; width: auto; aspect-ratio: 148 / 210; max-width: 92%; border-radius: 6px; flex: none; }
.gk-sticker .k-karte svg { height: 64%; }
.gk-nr { position: absolute; top: 6px; right: 8px; width: 1.6em; height: 1.6em; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--akzent); color: #1a0b2e; font-style: normal; font-weight: 900; font-size: 0.9em; }
.gk-gruss .k-karte { font-size: clamp(16px, 3vh, 34px); padding: 6px 10px; }
.gk-gruss-text { font-weight: 900; color: #ffc04d; line-height: 1.1; text-shadow: 0 2px 0 #1a0b2e; overflow-wrap: anywhere; }
:root[data-theme="kontrast"] .gk-gruss-text { color: var(--akzent); text-shadow: none; }
.schirm-karte .k-meldung svg { color: #c4520a; }

/* Buchstaben-Tafel: 10 × 3 Buchstaben, darunter Leerzeichen/Zeichen/Löschen, unten Abbrechen/Alles löschen/Fertig */
.gk-tafel { z-index: 55; background: var(--bg); }
.gk-tafel-titel { display: flex; align-items: center; gap: 0.4em; font-weight: 800; font-size: clamp(14px, 2.4vh, 26px); min-width: 0; }
.gk-tafel-titel svg { flex: none; color: var(--akzent); }
.gk-anzeige { display: flex; align-items: center; padding: 0 0.6em; min-width: 0; overflow: hidden; white-space: nowrap;
  border-radius: var(--radius); border: 3px solid var(--akzent); background: #fff; color: #1a0b2e;
  font-weight: 900; font-size: clamp(26px, 6vh, 64px); letter-spacing: 0.02em; }
.gk-anzeige::after { content: ''; display: inline-block; width: 0.08em; height: 1em; margin-left: 0.06em; background: #c4520a;
  animation: gk-blinken 1s steps(2) infinite; }
@keyframes gk-blinken { 50% { opacity: 0; } }
.gk-taste { font-size: clamp(22px, 5vh, 52px); font-weight: 900; padding: 2px; }
.gk-tafel .knopf svg { height: 40%; }

/* --- Gruselgeräusche: Reiter, Knöpfe 2 × 2 Zellen ---------------------------------------------------- */
.g-reiter { flex-direction: row; gap: 0.4em; font-size: clamp(13px, 2.2vh, 24px); }
.g-reiter svg { height: 60%; max-width: 30%; flex: none; }
.g-reiter.gewaehlt { background: linear-gradient(140deg, #e8620c, #ff9a2e); }
:root[data-theme="kontrast"] .g-reiter.gewaehlt { background: #111; }
/* Gruselgeräusche: fünf Zeilen statt sechs — Titel, Reiter, zwei hohe Knopf-Zeilen, unten links das eine „Zurück“
   (Lars 13.10.2026: „Zurück unten links“) */
.schirm-geraeusche { grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.9fr) minmax(0, 1.9fr) minmax(0, 1fr); }
.g-knopf { font-size: clamp(15px, 2.6vh, 30px); gap: 0.25em; }
.g-knopf svg { height: 52%; max-width: 70%; }
.g-knopf small { display: block; }
.g-knopf.g-schleife .g-an { padding: 0.1em 0.7em; border-radius: 1em; background: rgba(0,0,0,0.3); }
.g-knopf.gewaehlt .g-an { background: var(--akzent); color: #1a0b2e; }
.g-knopf.spielt { border-color: var(--akzent); }
.g-knopf.spielt svg { color: var(--akzent); animation: g-wackeln 0.5s ease-in-out infinite alternate; }
@keyframes g-wackeln { from { transform: rotate(-6deg) scale(1); } to { transform: rotate(6deg) scale(1.08); } }
.g-knopf.gesperrt { filter: grayscale(1); opacity: 0.45; }
.g-schloss { position: absolute; top: 0.35em; right: 0.45em; width: 1.4em; height: 1.4em; display: flex; }
.g-schloss svg { width: 100%; height: 100%; max-width: none; }
@media (orientation: portrait) { .g-reiter span { font-size: 0.85em; } .g-reiter svg { display: none; } }

/* --- Drucken auf Papier (js/druck.js): nur #druck kommt aufs Blatt -------------------------------------- */
#druck { display: none; }
@media print {
  html, body { height: auto !important; overflow: visible !important; background: #fff !important; color: #000 !important; }
  body:has(> #druck) > *:not(#druck) { display: none !important; }
  #druck { display: block; font-family: var(--schrift); color: #000; }
  #druck * { cursor: auto !important; }
  .druck-seite { box-sizing: border-box; display: flex; flex-direction: column; align-items: center; overflow: hidden;
    break-after: page; page-break-after: always; }
  .druck-seite:last-child { break-after: auto; page-break-after: auto; }
  .druck-hoch .druck-seite { height: calc(297mm - 2 * var(--druck-rand) - 1mm); }
  .druck-quer .druck-seite { height: calc(210mm - 2 * var(--druck-rand) - 1mm); }
  .druck-seite h1 { margin: 0 0 4mm; font-size: 20pt; color: #c4520a; }
  .druck-fuss { margin-top: auto; display: flex; align-items: center; gap: 3mm; font-size: 8pt; color: #555; }
  .druck-fuss img { height: 6mm; width: auto; filter: brightness(0); opacity: 0.7; }
  /* Kürbis: zwei Bilder, Schnitzvorlage */
  /* nebeneinander statt untereinander (Lars 12.10.2026: das zweite Bild fiel unten von der Seite, wenn der
     Druckdialog größere Ränder nahm — übrig blieb nur „Ohne Licht“) */
  .dk-bilder { display: flex; flex-direction: row; justify-content: center; align-items: flex-start; gap: 6mm; margin: auto 0; }
  .dk-bilder figure { margin: 0; text-align: center; }
  .dk-bilder img { width: 84mm; height: 84mm; object-fit: cover; border-radius: 3mm; border: 0.3mm solid #ccc; }
  .dk-bilder figcaption { font-size: 11pt; font-weight: 700; margin-top: 1mm; }
  .dk-passt { margin: 0 0 3mm; font-size: 11pt; }
  .dk-vorlage-box { flex: 0 1 auto; display: flex; justify-content: center; }
  .dk-vorlage { display: block; }
  .dk-mass { display: flex; align-items: center; gap: 3mm; margin: 4mm 0 2mm; font-size: 9pt; }
  .dk-schritte { margin: 2mm 0 0; padding-left: 6mm; font-size: 10.5pt; line-height: 1.4; max-width: 170mm; }
  /* Klappkarte: A4 quer, links Rückseite, rechts Vorderseite; Mitte = Falz */
  .druck-klappkarte { flex-direction: row; align-items: stretch; width: 100%; }
  .dg-hinten, .dg-vorne-box { flex: 1 1 0; min-width: 0; position: relative; }
  .dg-hinten { display: flex; flex-direction: column; align-items: center; justify-content: center; }
  .dg-vermerk { display: flex; flex-direction: column; align-items: center; gap: 2mm; text-align: center; font-size: 10pt; color: #444; }
  .dg-vermerk p { margin: 0; }
  .dg-vermerk .druck-fuss { margin-top: 1mm; }
  .dg-falten { position: absolute; right: 2mm; font-size: 7pt; color: #999; }
  .dg-falten::after { content: ''; position: absolute; right: -2mm; top: 50%; width: 4mm; border-top: 0.3mm dashed #999; transform: translateX(100%); }
  .dg-falten-oben { top: 0; }
  .dg-falten-unten { bottom: 0; }
  .dg-vorne { display: block; width: 100%; height: 100%; }
}

/* --- Basteln & mehr: vier Kacheln (2 × 2), Bild links, Text rechts ------------------------------------ */
.schirm-basteln .kachel { flex-direction: row; gap: 0.8em; justify-content: flex-start; padding-left: 1em; text-align: left;
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 0.8em; align-items: center; }
.schirm-basteln .kachel .kachel-bild { grid-column: 1; grid-row: 1 / 5; height: 86%; width: auto; max-height: 30vh; align-self: center; }
.schirm-basteln .kachel > span:not(.dwell-dot) { grid-column: 2; grid-row: 2; text-align: left; }
.schirm-basteln .kachel > small { grid-column: 2; grid-row: 3; text-align: left; }
.kachel-suesses { background: linear-gradient(150deg, #e8620c, #7a2a6a 62%, #3d1d66); }

/* --- Süßes oder Saures! (js/suesses.js) ------------------------------------------------------------------- */
.su-titel svg { color: var(--akzent); flex: none; }
.su-zaehler { display: flex; align-items: center; justify-content: center; gap: 0.3em; min-width: 0; border-radius: var(--radius);
  background: var(--bg2); border: 2px solid var(--rand); }
.su-zaehler-bild { display: flex; height: 70%; }
.su-zaehler-bild svg { height: 100%; width: auto; }
.su-zaehler b { font-size: clamp(26px, 5vh, 50px); font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.su-zaehler.hupf { animation: su-hupf 0.5s ease-out; }
@keyframes su-hupf { 40% { transform: scale(1.18); border-color: var(--akzent); } }
.su-hinweis { display: flex; align-items: center; justify-content: center; text-align: center; font-weight: 800;
  font-size: clamp(16px, 3vh, 32px); color: var(--text-leise); }
/* Häuser der Straße: je 2 Spalten, Nachthimmel dahinter */
.su-haus { padding: 4px 4px 6px; gap: 0.2em; justify-content: flex-end;
  background: linear-gradient(180deg, #0f1638 0%, #2a1458 60%, #3d1d66 100%); }
.su-haus .su-haus-bild { flex: 1 1 auto; min-height: 0; width: 100%; height: auto; max-width: none; }
.su-haus > span:not(.dwell-dot) { font-size: clamp(15px, 2.6vh, 28px); font-weight: 800; }
.su-haus.fertig .su-haus-bild { opacity: 0.5; filter: saturate(0.5); }
.su-haken { position: absolute; top: 0.5em; right: 0.5em; width: 2.6em; height: 2.6em; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: var(--akzent); color: #1a0b2e; }
.su-haken svg { width: 70%; height: 70%; max-width: none; }
/* An der Tür: Szene links, Karten rechts */
.su-szene { position: relative; min-height: 0; min-width: 0; overflow: hidden; border-radius: var(--radius); border: 2px solid var(--rand);
  background: linear-gradient(180deg, #0f1638 0%, #2a1458 70%, #1d1040 100%); display: flex; align-items: flex-end; justify-content: center; }
.su-szene-bild { width: 100%; height: 100%; display: block; }
.su-blatt { transform-box: fill-box; transform-origin: left center; transition: transform 0.9s ease-in-out, filter 0.9s; }
.su-szene.offen .su-blatt { transform: scaleX(0.1); filter: brightness(0.7); }
.su-szene.klopft .su-blatt { animation: su-klopf 0.16s ease-in-out 5; }
@keyframes su-klopf { 50% { transform: translateX(1.5px); } }
.su-glut, .su-gesicht-an { opacity: 0; transition: opacity 0.7s; }
.su-szene.licht-an .su-glut, .su-szene.licht-an .su-gesicht-an { opacity: 1; }
.su-blase { position: absolute; left: 4%; right: 4%; top: 3%; z-index: 2; padding: 0.5em 0.8em; border-radius: 18px;
  background: #fff; color: #1a0b2e; border: 3px solid var(--akzent); font-weight: 800; font-size: clamp(16px, 3vh, 32px); line-height: 1.2;
  text-align: center; box-shadow: 0 6px 24px rgba(0,0,0,0.45); }
.su-blase::after { content: ''; position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%); border: 14px solid transparent;
  border-top-color: var(--akzent); border-bottom: 0; }
.su-blase[hidden] { display: none; }
.su-blase.neu { animation: sag-auf 0.35s ease-out; }
.su-wahl { display: grid; gap: var(--luecke); min-height: 0; min-width: 0; grid-template-rows: minmax(0, 1fr); }
.su-wahl.su-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.su-wahl.su-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.su-wahl.su-eins { grid-template-columns: minmax(0, 1fr); }
.su-karte { gap: 0.3em; padding: 8px; font-size: clamp(16px, 3vh, 34px); font-weight: 800; }
.su-karte img, .su-bildbox { width: 92%; max-height: 68%; aspect-ratio: 1; object-fit: contain; border-radius: 12px; background: #fff; flex: none; }
.su-bildbox { display: flex; align-items: center; justify-content: center; }
.su-bildbox svg { height: 74%; width: auto; max-width: none; }
.su-wahl.su-3 .su-karte { font-size: clamp(14px, 2.6vh, 28px); }
.su-gesagt, .su-warte { display: flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 0; padding: 10px 24px 10px 10px;
  border-radius: var(--radius); font-weight: 900; font-size: clamp(22px, 5vh, 54px); line-height: 1.1; }
.su-gesagt { background: #fff; color: #1a0b2e; border: 4px solid var(--akzent); box-shadow: 0 8px 30px rgba(0,0,0,0.5); animation: sag-auf 0.35s ease-out; }
.su-gesagt img { height: 80%; max-width: 50%; aspect-ratio: 1; object-fit: contain; flex: none; border-radius: 10px; }
.su-gesagt span { min-width: 0; overflow-wrap: anywhere; }
.su-warte { color: var(--text-leise); background: var(--bg2); border: 2px dashed var(--rand); }
.su-warte svg { height: 40%; width: auto; animation: su-warten 1.2s ease-in-out infinite alternate; }
@keyframes su-warten { from { opacity: 0.45; } to { opacity: 1; } }
/* fliegende Süßigkeit, flatternde Fledermaus */
.su-flug { position: fixed; left: 0; top: 0; z-index: 80; width: 100px; height: 60px; pointer-events: none; }
.su-flug svg, .su-fledermaus svg { width: 100%; height: 100%; }
.su-fledermaus { position: absolute; left: 0; top: 0; z-index: 3; width: 120px; height: 72px; pointer-events: none; }
/* Ende */
.su-ende-bild { display: flex; align-items: center; justify-content: center; min-height: 0; border-radius: var(--radius);
  background: radial-gradient(circle at 50% 45%, #5b2a8f, #1d1040 75%); border: 2px solid var(--rand); }
.su-ende-bild svg { height: 92%; width: auto; max-width: 100%; }
.su-ende-text { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3em; text-align: center; min-height: 0; }
.su-ende-text strong { font-size: clamp(26px, 5.4vh, 58px); color: var(--akzent); line-height: 1.1; }
.su-ende-text > span { font-size: clamp(20px, 3.8vh, 40px); font-weight: 800; }
.su-ende-text small { display: flex; align-items: center; gap: 0.4em; font-size: clamp(15px, 2.4vh, 26px); font-weight: 700; color: var(--text-leise); }
.su-ende-text small svg { height: 1.5em; width: auto; color: var(--akzent); }
/* Ruhige Bewegung: Tür springt auf statt zu schwingen, kein Wackeln */
.schirm-suesses.ruhig .su-blatt { transition: none; }
.schirm-suesses.ruhig .su-szene.klopft .su-blatt, .schirm-suesses.ruhig .su-warte svg, .schirm-suesses.ruhig .su-gesagt,
.schirm-suesses.ruhig .su-blase.neu { animation: none; }
:root[data-theme="kontrast"] .su-haus, :root[data-theme="kontrast"] .su-szene, :root[data-theme="kontrast"] .kachel-suesses { background: #000; }
@media (orientation: portrait) {
  .su-wahl.su-3 { grid-template-columns: minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); }
  .su-wahl.su-3 .su-karte { flex-direction: row; }
  .su-wahl.su-3 .su-karte img { width: auto; height: 90%; max-height: none; }
}