/* ============================================================
   SPURENSUCHE-HINWEISE — gilt nur, wenn body.spurensuche-solved
   ============================================================
   Fünf CSS-getriebene Hervorhebungen für die fünf Codewörter.
   Werden alle nur aktiv, wenn das Spurensuche-Token gültig ist.
   Inhalts-/Logik-Veränderungen (Phoenix-Stempel, Girlande aus-
   klappen) passieren in script.js — alles rein Visuelle hier.
   ============================================================ */

/* PHOENIX — Frauenkirche-Akte: geblurrter Platzhalter-Stempel.
   .photo-overlay-note ist die existierende Stempel-Klasse; mit
   .photo-overlay-note-blurred drüber wird der Text unscharf. Die
   Position/Geometrie kommt unverändert aus der existierenden Regel,
   nur der Text-Filter ist neu. */
.photo-overlay-note-blurred {
  filter: blur(7px);
  -webkit-filter: blur(7px);
  user-select: none;
}

/* ZWINGER — Morsecode-Trennlinie im Hero. Standard ist gedämpfter
   Tinten-Strich (opacity 0.5, color: var(--line-strong)). Mit Token
   wird die Linie satt rot, voll deckend, und etwas dicker — fällt
   sofort ins Auge. */
body.spurensuche-solved .hero-rule {
  color: var(--stamp-red);
  opacity: 1;
  height: 8px;
  filter: drop-shadow(0 0 3px rgba(184, 39, 39, 0.4));
}

/* KUPPEL — Aufkleber auf dem versiegelten Brief.
   Statt eines auffälligen roten Kreises wirkt der Sticker, als wäre
   er teilweise abgerissen: nur noch der QR-Code-Bereich klebt,
   der rechte Text-Teil ("Archiv-Ref." etc.) ist weg, die Bruch-
   kante ist unregelmäßig wie aus Papier gerissen. Das fällt auf,
   ohne plakativ zu sein — der Spieler denkt "an dem Brief stimmt
   was nicht" und schaut genauer hin. */
body.spurensuche-solved .env-archive-text {
  /* visibility statt display:none — der Text bleibt unsichtbar, sein
     Platz wird aber im Layout reserviert. Ohne das würde der Sticker
     schrumpfen und der QR-Code (rechts angedockt via right:26px)
     nach rechts wandern. So bleibt der QR-Code exakt da, wo er ohne
     Token wäre. */
  visibility: hidden;
}
body.spurensuche-solved .env-archive-sticker {
  /* clip-path setzt die Riss-Kante etwa in der Mitte des Stickers
     an — also kurz rechts vom QR-Bereich, dort wo der Text-Block
     beginnt. Dieser unsichtbare Bereich wird einfach weggeschnitten,
     der QR-Bereich bleibt unverändert sichtbar.
     Punkte sind nicht symmetrisch — echte Risse sehen unregelmäßig
     aus. Border und box-shadow gehen durch clip-path verloren —
     ein abgerissenes Stück Papier hat keinen sauberen Rand. */
  clip-path: polygon(
    0% 0%,
    47% 0%,
    51% 8%,
    44% 18%,
    50% 28%,
    46% 38%,
    49% 50%,
    43% 60%,
    48% 72%,
    45% 84%,
    50% 92%,
    47% 100%,
    0% 100%
  );
  border: none;
}

/* DOCTOWER — Klebeband auf Post-it #02. Das Tape wird im <canvas>
   gezeichnet; statt das Canvas neu zu rendern, schicken wir es per
   CSS-Filter durch eine Hue-Rotation + Sättigung. Aus dem dezenten
   gelblichen Tape wird ein deutlich rötlich-pinkes Band, das aus
   dem Pergament-Hintergrund herausspringt.
   Wichtig: die existierende Regel auf .process-step.rubbel-target
   .postit-tape setzt filter:drop-shadow(...) — wir müssen die
   Spezifität matchen UND den drop-shadow mit übernehmen, sonst
   überschreibt der CSS-Filter-Stack einander gegenseitig. */
body.spurensuche-solved .process-step.rubbel-target .postit-tape {
  filter: hue-rotate(-55deg) saturate(2.8) brightness(1.05)
          drop-shadow(0 2px 3px rgba(0,0,0,0.1));
  -webkit-filter: hue-rotate(-55deg) saturate(2.8) brightness(1.05)
                  drop-shadow(0 2px 3px rgba(0,0,0,0.1));
}

/* PFERD — die Girlande wird in script.js ausgeklappt. Hier reicht
   die Basis-Sichtbarkeit, kein zusätzliches CSS nötig. (Falls man
   später visuell noch was hervorheben will, hier andocken.) */


/* Notiz im "schon gelöst"-Zustand. Titel rot durchgestrichen wie
   eine erledigte Akte. Trigger bleibt klickbar — ein Klick öffnet
   den Reset-Dialog (statt aufzuklappen). Der existierende
   wireTicketMemo-Handler returnt früh bei is-solved, der externe
   Reset-Handler in wireSpurensuche übernimmt. */
.ticket-memo.is-solved .ticket-memo-trigger {
  cursor: pointer;
  opacity: 0.65;
}
.ticket-memo.is-solved .ticket-memo-trigger:hover {
  opacity: 0.85;
  background: rgba(0, 0, 0, 0.02);
}
.ticket-memo.is-solved .memo-title {
  text-decoration: line-through;
  text-decoration-color: rgba(184, 39, 39, 0.7);
  text-decoration-thickness: 1.5px;
  color: var(--ink-faint);
}
.ticket-memo.is-solved .memo-chevron {
  opacity: 0.3;
}


/* Erfolgs-Overlay — vollflächig, zentriertes Karten-Modal.
   Tonalität bewusst ruhig (Pergament + dezenter Goldakzent), nicht
   grell, damit's zum Dossier-Stil passt. Ein Stempel oben, ein
   großer Reload-Button als einzige Aktion. Kein "Schließen" — wir
   wollen, dass der User wirklich neu lädt, weil die freigeschal-
   teten Hinweise erst nach dem Reload sichtbar werden. */
.spurensuche-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.spurensuche-overlay.is-open {
  display: flex;
  animation: spurensuche-overlay-in 0.4s ease-out;
}
@keyframes spurensuche-overlay-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.spurensuche-overlay-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 2.5rem 2.5rem 2.2rem;
  max-width: 540px;
  width: 100%;
  position: relative;
  text-align: center;
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
  animation: spurensuche-card-in 0.5s cubic-bezier(.22,1,.36,1);
}
@keyframes spurensuche-card-in {
  from { transform: translateY(20px) scale(0.96); opacity: 0; }
  to   { transform: translateY(0) scale(1);       opacity: 1; }
}
.spurensuche-overlay-card::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px;
  width: 26px; height: 26px;
  border-left: 3px solid var(--stamp-red);
  border-top: 3px solid var(--stamp-red);
}
.spurensuche-overlay-card::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 26px; height: 26px;
  border-right: 3px solid var(--stamp-red);
  border-bottom: 3px solid var(--stamp-red);
}
.spurensuche-overlay-title {
  /* Special Elite — gleiche Schriftart wie alle Section-Headlines
     auf der Seite ("Aktueller Hinweis", "Die zwölf Fallakten" etc.).
     Vorher war's Cinzel Decorative, was sich vom Rest der Seite
     abhob. */
  font-family: var(--font-display);
  font-size: 1.7rem;
  margin: 0 0 1rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.spurensuche-overlay-text {
  /* IBM Plex Mono — die gleiche Schreibmaschinen-Schrift wie der
     Body-Text auf der ganzen Seite. Vorher war's Cormorant Garamond
     (Serif), passte stilistisch nicht zur Seite. */
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--ink-soft);
  margin: 0 0 1.8rem;
}
.spurensuche-overlay-btn {
  background: var(--ink);
  color: var(--paper);
  border: none;
  padding: 1rem 2rem;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
}
.spurensuche-overlay-btn:hover { background: var(--stamp-red); }
@media (max-width: 600px) {
  .spurensuche-overlay-card { padding: 2rem 1.4rem 1.7rem; }
  .spurensuche-overlay-title { font-size: 1.35rem; }
  .spurensuche-overlay-text { font-size: 1rem; }
}

/* Confirm-Dialog für Hilfe-Modus zurücksetzen. Optisch ähnlich wie
   das Erfolgs-Overlay (gleicher Pergament-Look, gleiche Eck-
   Markierungen), aber ruhiger — keine Stempel-Farbe oben, keine
   Animation. Zwei Buttons: Abbrechen (sekundär) und Bestätigen
   (rot, primär als Warnung dass die Aktion irreversibel ist). */
.spurensuche-confirm {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: rgba(20, 14, 8, 0.78);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.spurensuche-confirm.is-open {
  display: flex;
  animation: spurensuche-overlay-in 0.25s ease-out;
}
.spurensuche-confirm-card {
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 2rem 2.2rem 1.6rem;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 18px 48px rgba(0,0,0,0.35);
  animation: spurensuche-card-in 0.3s cubic-bezier(.22,1,.36,1);
}
.spurensuche-confirm-card::before {
  content: "";
  position: absolute;
  left: -1px; top: -1px;
  width: 22px; height: 22px;
  border-left: 3px solid var(--ink);
  border-top: 3px solid var(--ink);
}
.spurensuche-confirm-card::after {
  content: "";
  position: absolute;
  right: -1px; bottom: -1px;
  width: 22px; height: 22px;
  border-right: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
}
.spurensuche-confirm-title {
  font-family: var(--font-display, 'Cinzel Decorative', serif);
  font-size: 1.35rem;
  margin: 0 0 0.9rem;
  letter-spacing: 0.04em;
  color: var(--ink);
}
.spurensuche-confirm-text {
  font-family: var(--font-serif, 'Cormorant Garamond', serif);
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--ink-soft);
  margin: 0 0 1.4rem;
}
.spurensuche-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
  flex-wrap: wrap;
}
.spurensuche-confirm-cancel,
.spurensuche-confirm-ok {
  border: none;
  padding: 0.7rem 1.3rem;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  cursor: pointer;
}
.spurensuche-confirm-cancel {
  background: transparent;
  color: var(--ink-soft);
  border: 1px solid var(--line-strong);
}
.spurensuche-confirm-cancel:hover {
  background: rgba(0,0,0,0.04);
  color: var(--ink);
}
.spurensuche-confirm-ok {
  background: var(--stamp-red);
  color: var(--paper);
}
.spurensuche-confirm-ok:hover {
  background: var(--stamp-red-deep, #851818);
}
@media (max-width: 600px) {
  .spurensuche-confirm-card { padding: 1.6rem 1.4rem 1.3rem; }
  .spurensuche-confirm-title { font-size: 1.15rem; }
  .spurensuche-confirm-text { font-size: 0.98rem; }
}


/* --- How it works --- */
.process-section {
  max-width: 1280px;
  margin: 7rem auto 0;
  padding: 0 2rem;
}
.process-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  max-width: 1080px;
  margin: 0 auto;
  padding-top: 14px;
}
.process-step {
  /* Illustriertes Notizblatt (assets/notizzettel.webp) statt CSS-Flaeche.
     background-size 100% 100% streckt das 3:4-Blatt auf die Kartenmasse
     (nah genug am Original-Seitenverhaeltnis).
     WICHTIG: KEINE background-color darunter — eine Fallback-Flaeche
     fuellt das rechteckige Element und ragt als gerader heller Rand
     hinter den unregelmaessigen Papierkanten hervor (genau dieser Bug
     stand hier schon einmal). Faellt das Bild aus, steht der Text eben
     direkt auf dem Seitenbeige — verschmerzbar. drop-shadow statt
     box-shadow, damit der Schatten den Papierkanten folgt. */
  background-image: url("/assets/notizzettel.webp");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  border: none;
  padding: 2rem 1.5rem 1.5rem;
  position: relative;
  /* GPU-Ebene gegen Chromium-Filter-Artefakte (siehe .hero-teaser) */
  will-change: filter;
  filter: drop-shadow(0 4px 8px rgba(26, 22, 19, 0.14));
  cursor: default;
}
/* Each note gets a distinct tilt so they feel human-placed */
.process-step:nth-child(1) { transform: rotate(-1.6deg); }
.process-step:nth-child(2) { transform: rotate(0.9deg); }
.process-step:nth-child(3) { transform: rotate(-0.7deg); }
.process-step:nth-child(4) { transform: rotate(1.4deg); }

/* Klebestreifen at the top — illustriertes Vintage-Klebeband
   (assets/klebeband.webp, gerissene Enden). ACHTUNG: Dasselbe Asset
   zeichnet auch der Rubbel-Canvas auf Zettel 2 (js/12-qr-rubbel.js),
   dort horizontal GESPIEGELT als versteckter Hinweis — Optik hier und
   dort muss zusammenpassen. */
.process-step::before {
  content: "";
  position: absolute;
  top: -11px;
  left: 50%;
  width: 78px;
  height: 24px;
  background: url("/assets/klebeband.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.14));
  pointer-events: none;
}
.process-step:nth-child(1)::before { transform: translateX(-50%) rotate(-4deg); left: 48%; }
.process-step:nth-child(2)::before { transform: translateX(-50%) rotate(3deg); left: 52%; width: 72px; }
.process-step:nth-child(3)::before { transform: translateX(-50%) rotate(-2deg); left: 49%; width: 84px; }
.process-step:nth-child(4)::before { transform: translateX(-50%) rotate(5deg); left: 51%; }

.process-num {
  font-family: var(--font-display);
  font-size: 3rem;
  color: var(--stamp-red);
  line-height: 1;
  margin-bottom: 0.75rem;
  opacity: 0.8;
}
.process-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
  margin-bottom: 0.5rem;
}
.process-desc {
  font-family: var(--font-type);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.6;
}