/* ==============================================================
   ERKLAER-BUEHNE -- die Startseite zeigt, wie es geht (23.09.)
   ==============================================================
   Louis 23.09.: "Vielleicht muss der Markt gar nicht hin. Wo wir dann
   einfach ne gute Animation haben, die erklaert was das ueberhaupt ist
   ... so simpel wie man was rausschicken kann und dann Match bekommt."

   Statt Brett und Faecherleiste: ein Geraet, in dem ein Satz getippt,
   gegen das Offene gehalten und zum Treffer wird. Die Karte im dritten
   Bild ist die echte .feed-karte aus dem Dashboard (pages.css) -- wer
   sich anmeldet, sieht dort dasselbe wieder.

   Ehrlich bleiben (PHILOSOPHIE.md, Ehrlichkeit vor Fuelle): das Geraet
   traegt sichtbar "Beispiel". Es behauptet keinen Bestand, es zeigt
   den Ablauf.
   ============================================================== */

/* Alte und neue Startseite liegen beide im HTML; hidden muss gegen die
   display-Regeln von .intl-board & Co. gewinnen. */
[data-alt-markt][hidden],
[data-neu-start][hidden] { display: none !important; }

:root {
  --erk-grund: hsl(40, 12%, 97.5%);
  --erk-geraet: hsl(0, 0%, 100%);
  --erk-rahmen: hsla(230, 10%, 13%, 0.14);
  --erk-linie: hsla(230, 10%, 13%, 0.09);
  --erk-leise: hsla(230, 10%, 13%, 0.045);
  --erk-gold: hsl(42, 55%, 44%);
  --erk-schatten: 0 1px 2px hsla(230, 10%, 13%, 0.05), 0 24px 60px -28px hsla(230, 10%, 13%, 0.35);
}
:root[data-theme="dark"] {
  --erk-grund: hsl(230, 8%, 10%);
  --erk-geraet: hsl(230, 7%, 12.5%);
  --erk-rahmen: hsla(40, 18%, 92%, 0.16);
  --erk-linie: hsla(40, 18%, 92%, 0.1);
  --erk-leise: hsla(40, 18%, 92%, 0.05);
  --erk-gold: hsl(42, 50%, 60%);
  --erk-schatten: 0 24px 60px -30px hsla(0, 0%, 0%, 0.7);
}

.erklaer {
  background: var(--erk-grund);
  border-top: 1px solid var(--erk-linie);
  scroll-margin-top: var(--header-height, 64px);
}
.erklaer__innen {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(40px, 5vw, 72px) 30px clamp(48px, 6vw, 80px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.erklaer__marke {
  margin: 0 0 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.erklaer__titel {
  margin: 0 0 clamp(20px, 3vw, 32px);
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(34px, 4.6vw, 58px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}
.erklaer__titel em {
  font-style: italic;
  color: var(--erk-gold);
}

/* -- Die drei Schritte -- */
.erklaer-schritte {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
}
.erklaer-schritt {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--erk-linie);
  opacity: 0.42;
  transition: opacity 0.4s var(--ease-out);
}
.erklaer-schritt--jetzt { opacity: 1; }
.erklaer-schritt__n {
  font-family: var(--font-serif);
  font-size: 28px;
  line-height: 1;
  color: var(--erk-gold);
  font-variant-numeric: lining-nums;
}
.erklaer-schritt__titel {
  margin: 0 0 4px;
  font-size: 17px;
  font-weight: 500;
  color: var(--text-primary);
}
.erklaer-schritt__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  max-width: 46ch;
  text-wrap: pretty;
}
/* Fortschritt unter dem aktiven Schritt -- zeigt, dass es weitergeht */
.erklaer-schritt__balken {
  grid-column: 2;
  height: 2px;
  margin-top: 12px;
  background: var(--erk-linie);
  border-radius: 2px;
  overflow: hidden;
  visibility: hidden;
}
.erklaer-schritt--jetzt .erklaer-schritt__balken { visibility: visible; }
.erklaer-schritt__balken::after {
  content: "";
  display: block;
  height: 100%;
  width: 100%;
  background: var(--text-primary);
  transform-origin: left;
  transform: scaleX(var(--fortschritt, 0));
}

.erklaer-cta:focus-visible {
  outline: 2px solid var(--erk-gold);
  outline-offset: 2px;
}

.erklaer-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  min-height: 48px;
  padding: 0 22px;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: var(--surface-0);
  font: 600 15px/1 var(--font-sans);
  text-decoration: none;
}
/* base.css faerbt im Dunkeln jeden Link gold (:root[data-theme] a,
   Spezifitaet 0-2-1) -- ohne :root davor gewann das gegen den Knopf. */
:root .erklaer a.erklaer-cta,
:root .erklaer a.erklaer-cta:hover { color: var(--surface-0); }
.erklaer-cta:hover { opacity: 0.88; }

/* ==============================================================
   Das Geraet
   ============================================================== */
.erklaer-geraet {
  position: relative;
  width: 100%;
  max-width: 400px;
  justify-self: center;
  height: 560px;
  border: 1px solid var(--erk-rahmen);
  border-radius: 34px;
  background: var(--erk-geraet);
  box-shadow: var(--erk-schatten);
  overflow: hidden;
  isolation: isolate;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: pan-y;
}
.erklaer-geraet * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.erklaer-geraet__kopf {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px 12px;
  border-bottom: 1px solid var(--erk-linie);
  background: var(--erk-geraet);
}
.erklaer-beispiel {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border: 1px dashed var(--erk-rahmen);
  border-radius: var(--radius-full);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.erklaer-fallname {
  min-width: 0;
  font-size: 12.5px;
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Drei Bilder liegen uebereinander und blenden durch. Feste Hoehe, damit
   die Seite beim Wechsel nicht springt. */
.erklaer-bild {
  position: absolute;
  inset: 55px 0 0 0;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  opacity: 0;
  visibility: hidden;
  /* Nach OBEN versetzt, nicht nach unten: so ragt ein ruhendes Bild nie
     ueber den unteren Rand des Geraets (pruefe-geraete meldete 7px). */
  transform: translateY(-6px);
  overflow: hidden;
  overflow: clip;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s 0.45s;
}
.erklaer-bild__inhalt {
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.45s var(--ease-out);
}
.erklaer-bild--an {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 0.45s var(--ease-out), transform 0.45s var(--ease-out), visibility 0s;
}
.erklaer-bild__zeile {
  margin: 0;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}

/* -- Bild 1: der Satz -- */
.erklaer-wahl {
  display: inline-flex;
  align-self: flex-start;
  padding: 3px;
  border: 1px solid var(--erk-linie);
  border-radius: var(--radius-full);
  background: var(--erk-leise);
}
.erklaer-wahl span {
  padding: 7px 14px;
  border-radius: var(--radius-full);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
}
.erklaer-wahl span.an { background: var(--primary); color: var(--surface-0); }
.erklaer-feld {
  min-height: 132px;
  padding: 16px;
  border: 1px solid var(--erk-rahmen);
  border-radius: 18px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-primary);
  overflow-wrap: break-word;
}
.erklaer-feld--leer::before {
  content: attr(data-leer);
  color: var(--text-tertiary);
}
.erklaer-schreibmarke {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  margin-left: 1px;
  vertical-align: -0.18em;
  background: var(--text-primary);
  animation: erk-blinken 1s steps(1) infinite;
}
@keyframes erk-blinken { 50% { opacity: 0; } }
.erklaer-senden {
  min-height: 48px;
  border: 0;
  border-radius: 14px;
  background: var(--primary);
  color: var(--surface-0);
  font: 600 15px/1 var(--font-sans);
  transition: transform 0.15s var(--ease-out), opacity 0.2s;
}
.erklaer-senden--druck { transform: scale(0.97); opacity: 0.85; }
.erklaer-hinweis {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-tertiary);
}
.erklaer-quittung {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--primary);
  color: var(--surface-0);
  font-size: 13.5px;
  line-height: 1.4;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out);
}
.erklaer-quittung--an { opacity: 1; transform: none; }
.erklaer-quittung::before {
  content: "";
  flex: 0 0 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--erk-gold);
}

/* -- Bild 2: der Richter liest die Kandidaten -- */
.erklaer-eigen {
  padding: 10px 14px;
  border-radius: 12px;
  background: var(--erk-leise);
  border: 1px solid var(--erk-linie);
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary);
}
.erklaer-eigen b {
  display: block;
  margin-bottom: 2px;
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-tertiary);
}
.erklaer-kandidaten { display: grid; gap: 8px; }
.erklaer-kand {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px 10px;
  align-items: start;
  padding: 12px 14px;
  border: 1px solid var(--erk-linie);
  border-radius: 14px;
  background: var(--erk-geraet);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.35s var(--ease-out), transform 0.35s var(--ease-out), border-color 0.3s;
}
.erklaer-kand--da { opacity: 1; transform: none; }
.erklaer-kand .art-etikett { justify-self: start; }
.erklaer-kand__text {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-primary);
  transition: color 0.3s;
}
.erklaer-kand__warum {
  grid-column: 1 / -1;
  margin: 0;
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-tertiary);
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s var(--ease-out);
}
.erklaer-kand--geurteilt .erklaer-kand__warum { max-height: 3em; }
.erklaer-urteil {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 21px;
  padding: 0 9px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: scale(0.85);
  transition: opacity 0.25s, transform 0.25s var(--ease-spring, var(--ease-out));
}
.erklaer-kand--geurteilt .erklaer-urteil { opacity: 1; transform: none; }
.erklaer-kand--nein .erklaer-urteil { border: 1px solid var(--erk-rahmen); color: var(--text-tertiary); }
.erklaer-kand--nein .erklaer-kand__text { color: var(--text-tertiary); }
.erklaer-kand--aehnlich { border-style: dashed; border-color: var(--karte-rand-stark, var(--erk-rahmen)); }
.erklaer-kand--aehnlich .erklaer-urteil { color: var(--karte-lila, hsl(272, 42%, 52%)); border: 1px solid currentColor; }
.erklaer-kand--treffer { border-color: var(--text-primary); }
.erklaer-kand--treffer .erklaer-urteil { background: var(--primary); color: var(--surface-0); }

/* -- Bild 3: die Karte, dann der Chat -- */
.erklaer-bild .feed-karte {
  transform: translateY(14px) scale(0.98);
  opacity: 0;
  transition: opacity 0.4s var(--ease-out), transform 0.5s var(--ease-spring, var(--ease-out));
}
.erklaer-bild .feed-karte.erklaer-karte--da { opacity: 1; transform: none; }
.erklaer-bild .feed-karte__innen { padding: 14px; }
.erklaer-bild .feed-karte__text { margin-top: 10px; font-size: 14.5px; }
.erklaer-bild .feed-karte__gesicht { cursor: default; }
.erklaer-bild .karten-knopf { flex: 1; cursor: default; }
.erklaer-bild .karten-knopf--druck { transform: scale(0.97); }
.erklaer-chat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}
.erklaer-blase {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 18px;
  font-size: 13.5px;
  line-height: 1.45;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s var(--ease-out), transform 0.3s var(--ease-out);
}
.erklaer-blase--da { opacity: 1; transform: none; }
.erklaer-blase--ich {
  align-self: flex-end;
  background: var(--primary);
  color: var(--surface-0);
  border-bottom-right-radius: 6px;
}
.erklaer-blase--du {
  align-self: flex-start;
  background: var(--erk-leise);
  border: 1px solid var(--erk-linie);
  color: var(--text-primary);
  border-bottom-left-radius: 6px;
}
.erklaer-tippt {
  display: inline-flex;
  gap: 4px;
  padding: 12px 14px;
}
.erklaer-tippt i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--text-tertiary);
  animation: erk-tippen 1s infinite;
}
.erklaer-tippt i:nth-child(2) { animation-delay: 0.15s; }
.erklaer-tippt i:nth-child(3) { animation-delay: 0.3s; }
@keyframes erk-tippen { 0%, 60%, 100% { opacity: 0.3; } 30% { opacity: 1; } }

/* Nur fuer Bildschirmleser: was das Geraet zeigt */
.erklaer-nur-lesen {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Laeuft nicht, solange es nicht zu sehen ist */
.erklaer--pausiert * { animation-play-state: paused !important; }

/* ==============================================================
   Handy: Schritte werden zu einer Zeile ueber dem Geraet
   ============================================================== */
@media (max-width: 899px) {
  .erklaer__innen {
    grid-template-columns: minmax(0, 1fr);
    padding: 44px 16px 56px;
    gap: 22px;
  }
  /* Feste Hoehe: sonst springt das Geraet, wenn ein Schritt zwei statt
     drei Zeilen hat. */
  .erklaer-schritte { min-height: 136px; align-content: start; }
  .erklaer-schritt { display: none; padding: 0; border: 0; }
  .erklaer-schritt--jetzt { display: grid; }
  .erklaer-schritt__n { font-size: 24px; }
  .erklaer-geraet { height: 540px; border-radius: 28px; }
  .erklaer-cta { justify-self: center; margin-top: 4px; }
  .erklaer__links { display: contents; }
  .erklaer__kopfteil { order: 0; }
  .erklaer-geraet { order: 1; }
  .erklaer-cta { order: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .erklaer-bild,
  .erklaer-kand,
  .erklaer-blase,
  .erklaer-quittung,
  .erklaer-bild .feed-karte { transition: none; }
  .erklaer-schreibmarke { animation: none; }
}

/* Verweis unter dem Eingabefeld oben: auf dem Handy endet der erste
   Bildschirm an der Eingabe -- ohne den Hinweis weiss niemand, dass
   darunter erklaert wird, was passiert. */
.erklaer-verweis {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 18px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text-secondary);
  text-decoration: none;
}
.erklaer-verweis:hover { color: var(--text-primary); }
.erklaer-verweis span { transition: transform 0.2s var(--ease-out); }
.erklaer-verweis:hover span { transform: translateY(2px); }

/* Stadtseiten: die Buehne ist auf dem Handy genau einen Bildschirm hoch --
   der Verweis ragte darunter heraus, in die Erklaerung hinein. Dort folgt
   sie ohnehin direkt unter dem Bild (24.09.). */
@media (max-width: 768px) {
  .intl-hero--stadt .erklaer-verweis { display: none; }
}