/* Grundlage – wird Stück für Stück ergänzt */

:root {
  /* warmes Tiefschwarz: dunkel genug für Editorial, aber sichtbar „Farbe“, kein ausgeschalteter Bildschirm */
  --tinte: #1f1d1a;
  --papier: #ffffff;
  /* Display-Schrift: von script.js gesetzt (wählbar per ?schrift=…) */
  --display: "Fraunces", Georgia, serif;
  --display-gewicht: 700;
  --display-stil: normal;

  /* Rand der Buchstaben zur Bahnkante – oben/unten und links gleich */
  --rand: clamp(12px, 2.2vw, 44px);
  /* von script.js nach dem Vermessen der Schrift gesetzt */
  --zeichen-em: 1.1;  /* breitester Buchstabe, Tintenbreite pro em */
  --kappe-em: 0.7;    /* Versalhöhe pro em */
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  /* Tinte statt Weiß: wo am Bildrand ein Bruchteil-Pixel frei bleibt, blitzt nichts Helles durch */
  background: var(--tinte);
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.nur-vorlesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Bahnen: 4 gerade, gleich breite Balken schieben sich von rechts nach links ins Bild,
   abwechselnd von unten und von oben, und tragen je einen Buchstaben (Anzahl: script.js) */
/* Bis VELD in der Mitte steht, wird nicht gescrollt */
html.gesperrt {
  overflow: hidden;
}

/* Keine Bildlaufleiste: sie würde als graue Kante am Rand stehen und das Bild verschieben */
html {
  scrollbar-width: none;
}

html::-webkit-scrollbar {
  display: none;
}

/* Scroll-Strecke: die Bühne bleibt stehen, während das Feld nach hinten zieht */
.strecke {
  height: 260vh;
  height: 260svh;
}

@media (prefers-reduced-motion: reduce) {
  .strecke { height: auto; }
}

.bahnen {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* Überstand der Balken über ihre Bahn und den Bildrand. Bewegte Ebenen werden an
     Bruchteil-Pixeln weichgezeichnet – bei 1 px blieben feine Linien sichtbar */
  --ueber: 4px;
}

/* Shader-Hintergrund, liegt unter den Balken */
.shader {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Tinten-Decke über dem Shader: erscheint, wenn die Balken die Fläche gefüllt haben.
   Die Maus stanzt Löcher hinein (script.js, „Durchblick“) */
.decke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
}

/* Laufband: zwei große Zeilen hinter dem Feld, in Gegenrichtung (script.js baut die Spuren).
   Erst zu sehen, wenn das Feld sich beim Scrollen zurückzieht. „difference“ hält sie
   auf hellem wie dunklem Shader lesbar. */
.laufband {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2.4vh;
  overflow: hidden;
  pointer-events: none;
  color: var(--papier);
  mix-blend-mode: difference;
  opacity: 0;
}

.bahnen.voll .laufband {
  opacity: 1;
}

.zeile {
  white-space: nowrap;
  line-height: 1;
}

.spur {
  display: inline-flex;
  will-change: transform;
}

.haelfte {
  display: inline-flex;
  align-items: center;
  white-space: pre;
}

/* Runder Tintenpunkt zwischen den Sätzen – ruhiger als Strich oder Mittelpunkt */
.trenner {
  display: inline-block;
  flex: none;
  width: 0.16em;
  height: 0.16em;
  margin: 0 0.6em;
  border-radius: 50%;
  background: currentColor;
}

.zeile-serif {
  font-family: var(--display);
  font-weight: var(--display-gewicht);
  font-style: var(--display-stil);
  font-size: 16vh;
  font-size: 16svh;
  letter-spacing: -0.015em;
}

.zeile-serif .trenner {
  transform: translateY(0.12em);          /* auf Höhe der Kleinbuchstaben-Mitte */
}

.zeile-mono {
  font-family: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-weight: 700;
  font-size: 8.5vh;
  font-size: 8.5svh;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.zeile-mono .trenner {
  width: 0.22em;
  height: 0.22em;
  margin: 0 0.9em;
}

/* Karte: Vorderseite = Feld, Rückseite = graues Knitterpapier. Zieht beim Scrollen zurück
   (Maßstab aus script.js) und dreht sich beim Klick um. */
.karte {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  perspective: 2600px;
  will-change: transform;
  outline: none;
}

.dreher {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Anklickbar: Zeiger als Hand, Karte hebt sich beim Hover leicht an */
.karte.klickbar {
  cursor: pointer;
}

.karte.klickbar:hover .dreher,
.karte.klickbar:focus-visible .dreher {
  transform: scale(1.025);
}

.rueckseite {
  position: absolute;
  inset: 0;
  background: #9a968f url("medien/papier-grau.jpg") center / cover no-repeat;
  transform: rotateY(180deg);
  backface-visibility: hidden;
}

/* Balken liegen nach dem Füllen unsichtbar über allem – sie dürfen keine Klicks abfangen */
.bahnen.voll .bahn {
  pointer-events: none;
}

/* Pfeile: von Hand gezeichnet wirkend, zeigen auf die vier Ecken der Karte.
   Lage (--l/--r/--t/--b) und Zeichenfortschritt (--zeichnen/--spitze/--schrift) aus script.js */
.pfeile {
  --l: 0px;
  --r: 0px;
  --t: 0px;
  --b: 0px;
  --zeichnen: 0;
  --spitze: 0;
  --schrift: 0;
  --pw: clamp(84px, 7.6vw, 150px);
  --ph: calc(var(--pw) * 0.75);
  --abstand: clamp(6px, 0.6vw, 12px);
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--papier);
  mix-blend-mode: difference;
}

.ecke {
  position: absolute;
  width: var(--pw);
  height: var(--ph);
}

.ecke svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: translate 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.ecke path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
}

.ecke .schaft  { stroke-dashoffset: calc(1 - var(--zeichnen)); }
.ecke .spitze  { stroke-dashoffset: calc(1 - var(--spitze)); }

.ecke.ol { left: calc(var(--l) - var(--pw) - var(--abstand)); top: calc(var(--t) - var(--ph) - var(--abstand)); }
.ecke.or { left: calc(var(--r) + var(--abstand));             top: calc(var(--t) - var(--ph) - var(--abstand)); }
.ecke.ul { left: calc(var(--l) - var(--pw) - var(--abstand)); top: calc(var(--b) + var(--abstand)); }
.ecke.ur { left: calc(var(--r) + var(--abstand));             top: calc(var(--b) + var(--abstand)); }

.ecke.ol svg { transform: rotate(var(--neigung)); }
.ecke.or svg { transform: scaleX(-1) rotate(var(--neigung)); }
.ecke.ul svg { transform: scaleY(-1) rotate(var(--neigung)); }
.ecke.ur svg { transform: scale(-1, -1) rotate(var(--neigung)); }

/* Beim Hover rücken die Pfeile ein Stück auf die Karte zu */
.pfeile.hover .ecke.ol svg { translate: 7px 6px; }
.pfeile.hover .ecke.or svg { translate: -7px 6px; }
.pfeile.hover .ecke.ul svg { translate: 7px -6px; }
.pfeile.hover .ecke.ur svg { translate: -7px -6px; }

/* „hier klicken“ in Handschrift, am Schwanz des Pfeils; schreibt sich von links nach rechts */
.klick-text {
  position: absolute;
  font-family: "Caveat", "Segoe Print", cursive;
  font-weight: 600;
  font-size: clamp(20px, 1.7vw, 32px);
  line-height: 1;
  white-space: nowrap;
  clip-path: inset(-30% calc((1 - var(--schrift)) * 100%) -30% -30%);
}

.ecke.ol .klick-text { left: -18%; top: -0.95em; rotate: -6deg; }
.ecke.or .klick-text { right: -18%; top: -0.95em; rotate: 5deg; }
.ecke.ul .klick-text { left: -18%; bottom: -0.95em; rotate: 4deg; }
.ecke.ur .klick-text { right: -18%; bottom: -0.95em; rotate: -5deg; }

/* Frage auf dem Papier: getippte Frage oben, darunter zwei von Hand umrandete Felder */
.umfrage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 8vh, 110px) clamp(16px, 4vw, 72px) clamp(16px, 5vh, 64px);
  gap: clamp(24px, 6vh, 80px);
  color: var(--tinte);
}

.frage {
  margin: 0;
  min-height: 1.05em;
  text-align: center;
  font-family: "Fraunces", Georgia, serif;
  font-style: italic;
  font-weight: 400;
  font-synthesis: none;
  font-size: clamp(34px, 5.4vw, 104px);
  line-height: 1.05;
  letter-spacing: -0.015em;
}

/* In der Serife ein schmaler Schreibstrich statt Block */
.frage .cursor {
  width: 0.055em;
  margin-left: 0.07em;
}

.antworten {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 56px);
}

.antwort {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tinte);
  font: inherit;
  cursor: default;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

.umfrage.fertig .antwort {
  cursor: pointer;
}

.antwort svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* Umrandung zeichnet sich wie mit dem Stift */
.antwort .rand {
  fill: none;
  stroke: var(--tinte);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.75s cubic-bezier(0.45, 0, 0.25, 1);
}

.antwort.gezeichnet .rand {
  stroke-dashoffset: 0;
}

/* Tintenfüllung bei Hover / Fokus / Auswahl */
.antwort .flaeche {
  fill: var(--tinte);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.antwort-text {
  position: relative;
  font-family: var(--display);
  font-weight: var(--display-gewicht);
  font-size: clamp(64px, 13vw, 260px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-box: trim-both cap alphabetic;
  clip-path: inset(-20% 100% -20% -20%);
  transition: clip-path 0.6s cubic-bezier(0.45, 0, 0.25, 1), color 0.35s ease;
}

.antwort.beschriftet .antwort-text {
  clip-path: inset(-20% -20% -20% -20%);
}

.umfrage.fertig .antwort:hover .flaeche,
.umfrage.fertig .antwort:focus-visible .flaeche,
.antwort.gewaehlt .flaeche {
  opacity: 1;
}

.umfrage.fertig .antwort:hover .antwort-text,
.umfrage.fertig .antwort:focus-visible .antwort-text,
.antwort.gewaehlt .antwort-text {
  color: #ece8e0;
}

/* Nach der Wahl tritt das andere Feld zurück */
.antworten.entschieden .antwort:not(.gewaehlt) {
  opacity: 0.4;
}

.antwort {
  transition: opacity 0.4s ease;
}

/* Feld = Tinten-Decke + Wort. Zieht sich beim Scrollen als Ganzes nach hinten */
.feld {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform-origin: 50% 50%;
  will-change: transform;
}

.shader {
  transform-origin: 50% 50%;
}

/* Scroll-Hinweis: klein, in der Stimme der Ansage – getippt, Cursor wartet blinkend */
.hinweis {
  position: absolute;
  left: 50%;
  bottom: calc(var(--rand) + 6px);
  width: 9ch;
  margin: 0;
  transform: translateX(-50%);
  font-family: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(13px, 0.85vw, 16px);
  line-height: 1.2;
  color: var(--papier);
  white-space: pre;
  pointer-events: none;
}

.bahnen.voll .decke {
  display: block;
}

/* Ansage: Computerschrift auf dem Shader, bevor die Balken kommen.
   Feste Breite (längste Zeile + Cursor), links bündig – nichts verrutscht beim Tippen.
   „difference“ hält sie lesbar, egal ob der Shader darunter hell oder dunkel ist. */
.ansage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 22ch;
  margin: 0;
  transform: translate(-50%, -50%);
  font-family: "Space Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: clamp(18px, 1.6vw, 30px);
  line-height: 1.2;
  color: #fff;
  mix-blend-mode: difference;
  white-space: pre;
}

.cursor {
  display: inline-block;
  width: 0.6em;
  height: 1.05em;
  margin-left: 0.08em;
  vertical-align: -0.2em;
  background: currentColor;
  animation: blinken 1.06s steps(1, end) infinite;
}

.cursor.tippt {
  animation: none;
}

@keyframes blinken {
  50% { opacity: 0; }
}

.bahn {
  position: absolute;
  top: calc(-1 * var(--ueber));
  bottom: calc(-1 * var(--ueber));
  margin-left: calc(-1 * var(--ueber));   /* Breite + 2× Überstand: script.js */
  background: var(--tinte);
  will-change: transform;
}

.bahn.hoch   { transform: translateY(100%); }
.bahn.runter { transform: translateY(-100%); }

/* Buchstabe: so breit wie die Bahn abzüglich Rand, gemeinsame Größe für alle.
   .wort ist das Ziel: dieselben Buchstaben als zentriertes Wort */
.zeichen,
.wort {
  margin: 0;
  color: var(--papier);
  font-family: var(--display);
  font-weight: var(--display-gewicht);
  font-style: var(--display-stil);
  font-synthesis: none;
  font-size: min(
    calc((100vw / 4 - 2 * var(--rand)) / var(--zeichen-em)),
    calc(40svh / var(--kappe-em))
  );
  line-height: 1;
  text-box: trim-both cap alphabetic;  /* Kante = Versalhöhe bzw. Grundlinie */
}

.zeichen {
  position: absolute;
  left: var(--rand);
  will-change: transform;
}

.zeichen.weg {
  visibility: hidden;
}

/* Mitte: Versalhöhe vertikal zentriert, Tinte (nicht Laufweite) horizontal zentriert */
.wort {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%) translateX(var(--wort-versatz, 0em));
  white-space: nowrap;
  visibility: hidden;
}

.wort.da {
  visibility: visible;
}

/* Rand zum Bildrand, nicht zur (überstehenden) Balkenkante */
.bahn.hoch .zeichen   { top: calc(var(--rand) + var(--ueber)); }     /* kommt von unten, landet oben */
.bahn.runter .zeichen { bottom: calc(var(--rand) + var(--ueber)); }  /* kommt von oben, landet unten */
.zeichen { left: calc(var(--rand) + var(--ueber)); }

/* Endzustand: ganze Fläche Tinte */
.bahnen.voll {
  background: var(--tinte);
}

/* Fläche ist jetzt durchgehend Tinte – Balken werden unsichtbar,
   damit kein Balken einen wandernden Buchstaben verdeckt */
.bahnen.voll .bahn {
  background: transparent;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}