/* ECHO · Leinwand. Eine freie, kreative Fläche für den Beamer an der Rückwand.
   Schriften und Farben wie software/canvas: Handschrift für Stimmen, Cormorant für ECHO. */

:root {
  --bg: #0E0F12;
  --fg: #F3EEE4;
  --muted: rgba(243, 238, 228, 0.55);
  --leise: rgba(243, 238, 228, 0.3);
  --strich: rgba(243, 238, 228, 0.22);
  --akzent: #E8B04B;
  --font-stimme: "Caveat", "Segoe Print", "Bradley Hand", cursive;
  --font-text: "Cormorant Garamond", Georgia, serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background:
    radial-gradient(ellipse 75% 60% at 50% 52%, rgba(232, 176, 75, 0.045), transparent 70%),
    var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  overflow: hidden;
  cursor: none;
}

/* Die Fläche hat immer 1920 × 1080 und wird skaliert (wand.js) */
#rahmen { position: fixed; inset: 0; transition: opacity 2.6s ease-in-out; }
/* Während die Präsentation läuft, ist die Leinwand dunkel */
body.dunkel #rahmen, body.dunkel #buehne { opacity: 0; }
#buehne { transition: opacity 2.6s ease-in-out; }
#leinwand {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  transition: opacity 1.4s, filter 1.4s;
}
body.buehne-an #leinwand { opacity: 0.14; filter: blur(2px); }

/* ── Kopf ── */

header {
  position: absolute;
  inset: 0 0 auto 0;
  display: flex;
  align-items: baseline;
  gap: 40px;
  padding: 34px 64px 0;
  pointer-events: none;
}
.marke { font-size: 17px; letter-spacing: 0.5em; color: var(--muted); }
#frage {
  flex: 1;
  margin: 0;
  font-weight: 400;
  font-style: italic;
  font-size: 40px;
  line-height: 1.15;
  color: var(--fg);
  transition: opacity 1.2s;
}
#frage.wechsel { opacity: 0; }
#puls {
  display: flex;
  gap: 10px;
  align-items: center;
  color: var(--leise);
  font-size: 17px;
  font-style: italic;
  white-space: nowrap;
}
#puls .punkt {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--fg);
  opacity: 0.3;
  animation: atmen 6s ease-in-out infinite;
}
#puls[data-telefon="offline"] .punkt { animation: none; opacity: 0.1; }
#puls[data-telefon="klingeln"] .punkt { background: var(--akzent); animation: atmen 0.3s steps(2) infinite; }
#puls[data-telefon="gespraech"] .punkt { background: var(--akzent); opacity: 0.9; animation: atmen 1.6s ease-in-out infinite; }
@keyframes atmen {
  0%, 100% { opacity: 0.2; transform: scale(0.85); }
  50% { opacity: 0.9; transform: scale(1.1); }
}

/* ── Elemente auf der Leinwand ── */

.el {
  position: absolute;
  left: 0;
  top: 0;
  transition: transform 2.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.6s;
  will-change: transform;
}
.el.weg { opacity: 0; }
/* gestaffelter Auftritt: --start setzt wand.js je Element */
.el.auftritt { animation: auftreten 1.6s ease-out var(--start, 0s) both; }
@keyframes auftreten { from { opacity: 0; filter: blur(9px); } to { opacity: 1; filter: none; } }
/* jedes Element schwebt ein wenig, versetzt */
.el > .innen { animation: schweben var(--dauer, 22s) ease-in-out var(--verz, 0s) infinite alternate; }
/* leicht schräg wie von Hand, und ein ganz leichtes Atmen um diese Neigung */
@keyframes schweben {
  from { transform: translate(-4px, 3px) rotate(var(--dreh, 0deg)); }
  to { transform: translate(4px, -4px) rotate(calc(var(--dreh, 0deg) + 0.8deg)); }
}

/* Ein dunkler Hof hinter der Schrift: Striche, die durchlaufen, verschwinden darunter */
.stimme .innen, .notiz:not(.zettel) .innen {
  text-shadow: 0 0 3px var(--bg), 0 0 8px var(--bg), 0 0 16px var(--bg), 2px 3px 6px rgba(0, 0, 0, 0.7);
}
.stimme .innen {
  max-width: 340px;
  font-family: var(--font-stimme);
  line-height: 1.08;
  text-align: center;
  text-wrap: balance;
  color: var(--fg);
  transition: color 7s ease-out;
}
.stimme.g1 .innen { font-size: 46px; max-width: 420px; }
.stimme.g2 .innen { font-size: 37px; }
.stimme.g3 .innen { font-size: 30px; color: rgba(243, 238, 228, 0.8); }
.stimme.neu .innen { color: var(--akzent); }
.stimme.frisch .innen { animation: tinte 2.4s ease-out both, schweben var(--dauer, 22s) ease-in-out 2.4s infinite alternate; }
@keyframes tinte { from { opacity: 0; filter: blur(10px); } }

/* Thema: ein längliches Post-it in der Stiftfarbe, über die Kante des Rahmens geklebt */
.titel .innen {
  position: relative;
  padding: 7px 30px 9px;
  font-family: var(--font-stimme);
  font-weight: 600;
  font-size: 32px;
  line-height: 1.05;
  color: #1A1B1F;
  white-space: nowrap;
  background: var(--stift, var(--akzent));
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.08);
}
.titel .innen::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 18px;
  width: 54px;
  height: 20px;
  transform: rotate(-6deg);
  background: rgba(243, 238, 228, 0.32);
}

.notiz .innen {
  max-width: 270px;
  font-family: var(--font-stimme);
  font-weight: 500;
  font-size: 27px;
  line-height: 1.1;
  color: var(--stift, var(--akzent));
  opacity: 0.85;
}

.bild .innen img {
  display: block;
  width: var(--groesse, 240px);
  height: var(--groesse, 240px);
  object-fit: contain;
  mix-blend-mode: screen; /* der schwarze Grund des Bildes verschwindet in der Wand */
  opacity: 0.9;
  animation: tinte 3s ease-out both;
}
.skizze .innen svg { display: block; width: var(--groesse, 120px); height: var(--groesse, 120px); overflow: visible; }
/* KI-Skizze als Pfade: erst die Konturen ziehen, dann füllt sich die Kreide */
.bild .innen svg.ki { display: block; width: var(--groesse, 260px); height: var(--groesse, 260px); overflow: visible; }
.bild svg.ki .zug { fill: none; stroke: var(--stift, var(--fg)); stroke-opacity: 0.8; stroke-width: 1.2; stroke-linecap: round; stroke-linejoin: round; animation-duration: 1.6s; }
.bild svg.ki .fuellung { fill: var(--stift, var(--fg)); fill-opacity: 0.8; fill-rule: evenodd; opacity: 0; animation: fuellen 2.4s ease-out forwards; }
@keyframes fuellen { to { opacity: 1; } }

/* ── Motive bewegen sich, sobald sie gezeichnet sind ── */
.skizze .teil { transform-box: view-box; transform-origin: 50px 50px; }
.skizze svg[data-motiv="herz"] .teil { animation: pochen 1.8s ease-in-out 3s infinite; }
@keyframes pochen { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.09); } 30% { transform: scale(0.98); } 45% { transform: scale(1.05); } }
.skizze svg[data-motiv="tasse"] .t2, .skizze svg[data-motiv="tasse"] .t3, .skizze svg[data-motiv="tasse"] .t4 { animation: dampf 3.2s ease-in-out 3s infinite; }
.skizze svg[data-motiv="tasse"] .t3 { animation-delay: 3.6s; }
.skizze svg[data-motiv="tasse"] .t4 { animation-delay: 4.2s; }
@keyframes dampf { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(-9px); opacity: 0.1; } 71% { transform: translateY(4px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } }
.skizze svg[data-motiv="ohr"] .t2 { transform-origin: 55px 42px; animation: lauschen 4s ease-in-out 3s infinite; }
@keyframes lauschen { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }
.skizze svg[data-motiv="auge"] .teil { animation: blinzeln 6s ease-in-out 3s infinite; }
@keyframes blinzeln { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.08); } }
.skizze svg[data-motiv="gluehbirne"] { animation: gluehen 3.5s ease-in-out 3s infinite; }
@keyframes gluehen { 0%, 100% { filter: none; } 50% { filter: drop-shadow(0 0 6px rgba(232, 176, 75, 0.9)); } }
.skizze svg[data-motiv="sprechblase"] .t1, .skizze svg[data-motiv="sprechblase"] .t2 { animation: tippen 3s steps(1) 3s infinite; }
.skizze svg[data-motiv="sprechblase"] .t2 { animation-delay: 3.5s; }
@keyframes tippen { 0%, 100% { opacity: 1; } 60% { opacity: 0.15; } }
.skizze svg[data-motiv="uhr"] .t1 { animation: drehen 12s linear 3s infinite; }
.skizze svg[data-motiv="uhr"] .t2 { animation: drehen 90s linear 3s infinite; }
@keyframes drehen { to { transform: rotate(360deg); } }
.skizze svg[data-motiv="welle"] .teil { animation: wellen 4s ease-in-out 3s infinite alternate; }
.skizze svg[data-motiv="welle"] .t1 { animation-delay: 3.8s; }
@keyframes wellen { to { transform: translateX(-7px) translateY(2px); } }
.skizze svg[data-motiv="mensch"] .t3 { transform-origin: 50px 42px; animation: winken 2.4s ease-in-out 3s infinite; }
@keyframes winken { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-55deg); } 50% { transform: rotate(-35deg); } 75% { transform: rotate(-55deg); } }
.skizze svg[data-motiv="hand"] .teil { transform-origin: 45px 86px; animation: winken-hand 2.6s ease-in-out 3s infinite; }
@keyframes winken-hand { 0%, 100% { transform: rotate(0deg); } 25% { transform: rotate(-12deg); } 75% { transform: rotate(10deg); } }
.skizze svg[data-motiv="sonne"] .teil:not(.t0) { animation: drehen 30s linear 3s infinite; }
.skizze svg[data-motiv="pfeil"] .teil { animation: stupsen 2.2s ease-in-out 3s infinite; }
@keyframes stupsen { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -3px); } }
.skizze svg[data-motiv="bruecke"] .teil:not(.t0) { animation: tragen 5s ease-in-out 3s infinite; }
@keyframes tragen { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1.5px); } }
.skizze svg[data-motiv="haus"] .t2 { animation: licht 5s steps(1) 3s infinite; }
@keyframes licht { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
.skizze svg[data-motiv="baum"] .t1, .skizze svg[data-motiv="baum"] .t2 { transform-origin: 50px 91px; animation: wiegen 5s ease-in-out 3s infinite; }
@keyframes wiegen { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
.skizze svg[data-motiv="stern"] .teil { animation: funkeln 2.8s ease-in-out 3s infinite; }
@keyframes funkeln { 0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; } 50% { transform: scale(0.86) rotate(8deg); opacity: 0.6; } }
.skizze svg[data-motiv="spirale"] .teil { animation: drehen 14s linear 3s infinite; }
.skizze svg[data-motiv="telefon"] .teil { animation: klingeln 4s ease-in-out 3s infinite; }
@keyframes klingeln { 0%, 30%, 100% { transform: rotate(0deg); } 4%, 12%, 20% { transform: rotate(-9deg); } 8%, 16%, 24% { transform: rotate(9deg); } }
.skizze svg[data-motiv="wolke"] .teil { animation: ziehen 9s ease-in-out 3s infinite alternate; }
@keyframes ziehen { to { transform: translateX(8px); } }

.skizze path { fill: none; stroke: var(--stift, var(--fg)); stroke-opacity: 0.75; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Striche ── */

#striche { position: absolute; left: 0; top: 0; overflow: visible; }
#striche path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
#striche .umriss { stroke: var(--strich); stroke-width: 1.6; }
#striche .linie { stroke: rgba(243, 238, 228, 0.42); stroke-width: 1.4; }
#striche .pfeil { stroke: rgba(232, 176, 75, 0.55); stroke-width: 1.5; stroke-opacity: 0.8; }
/* Stiftstriche: körnig und unruhig an den Rändern */
#striche g.hand { filter: url(#stift); }
#striche text { font-family: var(--font-stimme); font-size: 23px; fill: rgba(243, 238, 228, 0.72); }

/* neue Striche zeichnen sich selbst */
.zeichnen { stroke-dasharray: 1; stroke-dashoffset: 1; animation: zeichnen 2.8s ease-out forwards; }
@keyframes zeichnen { to { stroke-dashoffset: 0; } }
.einblenden { animation: einblenden 2s ease-out both; }
@keyframes einblenden { from { opacity: 0; } }

/* ── Bühne für die neue Stimme ── */

#buehne {
  position: fixed;
  inset: 22vh 8vw 18vh 8vw;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
#live {
  margin: 0;
  font-family: var(--font-stimme);
  font-size: clamp(2.2rem, 5.6vw, 7rem);
  line-height: 1.1;
  text-align: center;
  max-width: 78vw;
  text-wrap: balance;
  transition: opacity 1.4s, transform 1.4s;
}
#live.roh { font-size: clamp(1.6rem, 3.4vw, 4.2rem); color: var(--muted); }
#live.geht { opacity: 0; transform: scale(0.8); }
#live .wort { opacity: 0; animation: erscheinen 0.9s ease-out forwards; }
@keyframes erscheinen { from { opacity: 0; filter: blur(6px); } to { opacity: 1; filter: blur(0); } }

/* Striche in Skizzen beginnen erst, wenn ihr Element an der Reihe ist (--start) */
.skizze path.zeichnen, .bild svg.ki .zug, .bild svg.ki .fuellung { animation-delay: calc(var(--start, 0s) + var(--d, 0s)); }
.skizze svg[data-motiv] .teil { animation-delay: calc(var(--start, 0s) + 3s); }

/* Manche Notizen kleben als Zettel an der Tafel: Papier in der Stiftfarbe, dunkle Schrift, ein Streifen Klebeband */
.notiz.zettel .innen {
  position: relative;
  max-width: 230px;
  padding: 18px 18px 22px;
  background: var(--stift, var(--akzent));
  color: #1A1B1F;
  opacity: 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.45), inset 0 -10px 18px rgba(0, 0, 0, 0.08);
}
.notiz.zettel .innen::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 70px;
  height: 22px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(243, 238, 228, 0.35);
}

/* ── Stempel: das Motiv klein neben dem Titel, wenn das Thema schon ein Bild hat ── */
.skizze.stempel path { stroke-width: 3.4; stroke-opacity: 0.85; }
.skizze.stempel path.ring { stroke-width: 2.6; stroke-opacity: 0.5; }

/* ── Zwei Ansichten: Leinwand und Auswertung, in der Steuerung umgeschaltet ── */

#auswertung {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s, visibility 0s linear 1.4s, filter 1.4s;
}
body[data-ansicht="auswertung"] #auswertung { opacity: 1; visibility: visible; transition: opacity 1.4s 0.6s, visibility 0s, filter 1.4s; }
body[data-ansicht="auswertung"] #leinwand { opacity: 0; visibility: hidden; transition: opacity 1.2s, visibility 0s linear 1.2s; }
body.buehne-an #auswertung { opacity: 0.14; filter: blur(2px); }

/* ── Dritte Ansicht: Stationen in Zürich (Nachmittag, stationen.js) ── */

#stationen {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.4s, visibility 0s linear 1.4s;
}
body[data-ansicht="stationen"] #stationen { opacity: 1; visibility: visible; transition: opacity 1.4s 0.6s, visibility 0s; }
body[data-ansicht="stationen"] #leinwand { opacity: 0; visibility: hidden; transition: opacity 1.2s, visibility 0s linear 1.2s; }

.s-kopf { position: absolute; left: 64px; right: 64px; top: 34px; display: flex; align-items: baseline; gap: 40px; }
.s-titel { font-style: italic; font-size: 40px; }
.s-summe { margin-left: auto; font-family: var(--font-stimme); font-weight: 600; font-size: 34px; color: var(--akzent); }
.s-leer { position: absolute; left: 0; right: 0; top: 470px; text-align: center; font-style: italic; font-size: 40px; color: var(--muted); }

.s-raster {
  position: absolute;
  left: 64px;
  right: 64px;
  top: 128px;
  bottom: 56px;
  display: grid;
  grid-template-columns: repeat(var(--spalten, 3), 1fr);
  grid-auto-rows: 1fr;
  gap: 32px;
}
.s-karte {
  position: relative;
  overflow: hidden;
  padding: 26px 30px;
  border: 1px solid var(--strich);
  border-top: 3px solid var(--stift, var(--akzent));
  border-radius: 6px;
  background: rgba(243, 238, 228, 0.025);
  animation: auftreten 1.6s ease-out var(--start, 0s) both;
}
.s-gruppe { margin: 0; font-size: 15px; letter-spacing: 0.4em; text-transform: uppercase; color: var(--muted); }
.s-objekt { margin: 6px 0 0; font-family: var(--font-stimme); font-weight: 600; font-size: 52px; line-height: 1; color: var(--stift, var(--akzent)); }
.s-ort { margin: 4px 0 0; font-style: italic; font-size: 24px; color: var(--muted); }
.s-zahlen { margin: 14px 0 0; font-family: var(--font-stimme); font-weight: 600; font-size: 28px; color: var(--fg); }
.s-kurz { margin: 12px 0 0; font-style: italic; font-size: 25px; line-height: 1.25; color: rgba(243, 238, 228, 0.85); }
.s-zitat { margin: 14px 0 0; font-family: var(--font-stimme); font-size: 30px; line-height: 1.12; color: rgba(243, 238, 228, 0.92); }
.s-themen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.s-thema {
  padding: 3px 14px 5px;
  font-family: var(--font-stimme);
  font-weight: 600;
  font-size: 24px;
  color: #1A1B1F;
  background: var(--stift, var(--akzent));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
}

/* alles in der Auswertung tritt gestaffelt auf (--start setzt auswertung.js) */
#auswertung > div { position: absolute; animation: auftreten 1.6s ease-out var(--start, 0s) both; }
#auswertung > svg.a-striche { position: absolute; left: 0; top: 0; overflow: visible; }
.a-striche path { fill: none; stroke-linecap: round; stroke-linejoin: round; }

.a-kopf { left: 64px; right: 64px; top: 34px; display: flex; align-items: baseline; gap: 40px; }
.a-marke { font-size: 17px; letter-spacing: 0.5em; color: var(--muted); }
.a-summe { font-style: italic; font-size: 40px; color: var(--fg); }
#auswertung g.hand { filter: url(#stift); }

.a-abschnitt { font-style: italic; font-size: 30px; color: var(--fg); white-space: nowrap; }
.a-abschnitt::before { content: ""; display: inline-block; width: 40px; height: 1px; margin: 0 14px 9px 0; background: var(--leise); }
.a-hinweis { font-style: italic; font-size: 19px; color: var(--muted); }

/* Matrix: Themen im Lauf des Tages */
.a-spalte { text-align: center; }
.a-spalte-frage {
  font-style: italic;
  font-size: 18px;
  line-height: 1.15;
  color: rgba(243, 238, 228, 0.78);
  height: 64px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  text-wrap: balance;
}
.a-spalte-n { margin-top: 6px; font-family: var(--font-stimme); font-weight: 600; font-size: 24px; color: var(--akzent); }
.a-thema {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 4px 16px 6px;
  font-family: var(--font-stimme);
  font-weight: 600;
  font-size: 25px;
  line-height: 1.05;
  color: #1A1B1F;
  background: var(--stift);
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.45);
  transform: rotate(var(--dreh, 0deg));
}
.a-thema.lose { background: none; color: var(--muted); box-shadow: none; font-weight: 500; }
.a-zelle { width: 60px; text-align: center; font-family: var(--font-stimme); font-weight: 600; font-size: 30px; line-height: 1.2; color: var(--fg); text-shadow: 0 0 6px var(--bg); }
.a-zeilensumme { width: 50px; text-align: right; font-family: var(--font-stimme); font-weight: 600; font-size: 34px; line-height: 1.2; }
.a-striche path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.a-striche .a-hof { opacity: 0.16; }
.a-striche .a-faden { stroke-opacity: 0.35; }
.a-striche .a-zeit { stroke: rgba(243, 238, 228, 0.35); }
.a-striche .a-kreis { stroke-opacity: 0.9; }
.a-striche .schraffur { stroke-width: 1.4; stroke-opacity: 0.55; }
.a-striche .a-pfeil { stroke-opacity: 0.8; }

/* Haltungen */
.a-haltung { font-family: var(--font-stimme); font-weight: 600; font-size: 29px; line-height: 1; white-space: nowrap; }
.a-balkenzahl { font-family: var(--font-stimme); font-weight: 600; font-size: 30px; line-height: 1; }

/* Vom Erwarten zum Mitnehmen */
.a-v-spalte { width: 740px; }
.a-v-kopf { font-size: 18px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.a-zitat { font-family: var(--font-stimme); font-size: 30px; line-height: 1.15; color: rgba(243, 238, 228, 0.9); margin-bottom: 8px; }
.a-zitat .bleibt { color: var(--akzent); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; text-decoration-color: rgba(232, 176, 75, 0.5); }
.a-legende { left: 120px; top: 1036px; font-style: italic; font-size: 19px; color: var(--muted); }

/* Feedbackschlaufe oben rechts in der Auswertung */
.a-schritt { font-family: var(--font-stimme); font-weight: 600; font-size: 24px; line-height: 1; color: var(--akzent); }
.a-schritt.a-schlaufe-titel { font-size: 19px; opacity: .6; }
.a-striche .a-schlaufe { stroke-opacity: 0.75; }