/* =========================================================
   .post-it — base styles (used inside .evidence-board)
   ========================================================= */
.post-it {
  position: relative;
  padding: 1.6rem 1.1rem 1.35rem;
  transform: rotate(var(--tilt, 0deg));
  /* Haftnotiz-Illustration als Hintergrund (Farbklassen unten setzen
     das jeweilige background-image). 100% 100% streckt den Zettel auf
     die textabhaengige Hoehe — das Motiv ist bewusst streckungs-
     tolerant (ruhige Flaeche, Klebstreifen oben skaliert einfach mit).
     drop-shadow statt box-shadow: die Unterkante der Illustration ist
     leicht wellig, ein Rechteck-Schatten wuerde dort hervorblitzen. */
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* Nur EIN drop-shadow + GPU-Ebene — siehe Chromium-Workaround-
     Kommentar bei .hero-teaser (gestapelte drop-shadows erzeugen
     dort Kompositing-Artefakte). */
  will-change: filter;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.24));
  font-family: 'Kalam', 'Patrick Hand', cursive;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ink);
  min-height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 2;
  cursor: default;
}
.post-it p { margin: 0; }
.post-it em {
  font-style: italic;
  color: var(--stamp-red);
  font-weight: 400;
}
.post-it strong { font-weight: 600; }

/* Haftnotiz-Illustration in vier Farben — Pink/Blau/Gruen sind per
   Hue/Saettigungs-Mapping aus dem gelben Original erzeugt (Zieltoene
   = die Mitten der frueheren CSS-Gradients), Papierstruktur und
   Klebstreifen daher ueber alle Farben identisch. */
.post-it-yellow { background-image: url("/assets/postit-gelb.webp"); }
.post-it-pink   { background-image: url("/assets/postit-pink.webp"); }
.post-it-blue   { background-image: url("/assets/postit-blau.webp"); }
.post-it-green  { background-image: url("/assets/postit-gruen.webp"); }

/* Push-pin — illustrierter Nadelkopf (assets/pin-*.webp, Gravur-Stil).
   Farbvarianten sind per Hue-Shift aus derselben roten Illustration
   erzeugt, daher identische Form/Glanzpunkt ueber alle Farben. */
.post-it::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 17px;
  height: 17px;
  background: url("/assets/pin-rot.webp") center / contain no-repeat;
  filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.4));
  z-index: 10;
}
/* Alternating pin colors for visual variety */
.post-it:nth-child(3n+1)::before { background-image: url("/assets/pin-rot.webp"); }
.post-it:nth-child(3n+2)::before { background-image: url("/assets/pin-blau.webp"); }
.post-it:nth-child(3n)::before   { background-image: url("/assets/pin-gruen.webp"); }
.post-it:nth-child(5n)::before   { background-image: url("/assets/pin-gelb.webp"); }
.post-it:nth-child(7n)::before   { background-image: url("/assets/pin-lila.webp"); }

/* Small pin shadow on the note */
.post-it::after {
  content: "";
  position: absolute;
  top: 4px;
  left: calc(50% - 1px);
  width: 2px;
  height: 8px;
  background: rgba(0, 0, 0, 0.12);
  transform: rotate(8deg);
  border-radius: 1px;
  pointer-events: none;
}

/* --- Footer --- */
footer {
  max-width: 1280px;
  margin: 7rem auto 0;
  padding: 3rem 2rem 2.5rem;
  border-top: 2px solid var(--ink);
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 2rem;
}
footer h3 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.22em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
footer p, footer a {
  font-family: var(--font-type);
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.7;
  text-decoration: none;
}
footer ul { list-style: none; }
footer li { padding: 4px 0; border-bottom: 1px dotted var(--line); }
footer a:hover { color: var(--stamp-red); }

.footer-bottom {
  grid-column: 1 / -1;
  padding-top: 2rem;
  border-top: 1px dashed var(--line-strong);
  display: flex;
  justify-content: space-between;
  /* Oberkanten buendig: Texte und Fallblatt-Widget starten auf
     gleicher Hoehe (Widget haengt dann nach unten raus). */
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  color: var(--ink-faint);
  text-transform: uppercase;
  margin-top: 2rem;
}
/* Beide Text-Spans gleich breit strecken, damit das mittlere
   Fallblatt-Widget exakt zentriert sitzt (nicht nur "irgendwo
   zwischen" zwei unterschiedlich breiten Texten). */
.footer-bottom > span {
  flex: 1;
}
.footer-bottom > span:last-child {
  text-align: right;
}
@media (max-width: 720px) {
  /* Mobil: Texte oben nebeneinander, Widget rutscht als eigene
     zentrierte Zeile darunter. */
  .footer-bottom { flex-wrap: wrap; }
  .footer-bottom .dfb-footer {
    order: 3;
    width: 100%;
    margin-top: 1.6rem;
  }
}

/* --- Entry animations --- */
/* .reveal kept as no-op class so existing markup stays valid; sections are visible on load */
.reveal { }

/* --- Responsive --- */
@media (max-width: 1024px) {
  .files-grid { grid-template-columns: repeat(4, 1fr); }
  .tickets-grid, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .clue-body { grid-template-columns: 1fr; }
  .hero-main { grid-template-columns: 1fr; gap: 2.5rem; }
  .hero-teaser-wrap { justify-self: center; margin-top: 0; width: 500px; max-width: 100%; }
  .hero-teaser { width: 100%; }
  footer { grid-template-columns: 1fr 1fr; }
}

/* ============================================================
   TABLET: Header entzerren (721px–1140px)
   ------------------------------------------------------------
   In diesem Band ist die Desktop-Nav mit allen 7 Links plus dem
   "Elbeschiffahrt feiern"-Button zu breit — der Button wurde
   rechts abgeschnitten. Der Burger übernimmt erst ≤720px, also
   müssen die Zwischenbreiten kompakter werden: engere Abstände
   und kleinere Mono-Schrift, ab 960px nur noch das Schiffs-Icon
   ohne Button-Text (gleiches Muster wie bisher erst ab 800px).
   ============================================================ */
@media (max-width: 1140px) {
  .header-inner { gap: 1.25rem; padding: 1.1rem 1.25rem; }
  .site-nav { gap: 1.05rem; font-size: 0.72rem; letter-spacing: 0.08em; }
  .elbe-saison-btn { font-size: 0.64rem; letter-spacing: 0.12em; padding: 0.4rem 0.6rem; }
}
@media (max-width: 960px) and (min-width: 721px) {
  .site-nav { gap: 0.85rem; font-size: 0.7rem; letter-spacing: 0.05em; }
  .elbe-saison-btn span { display: none; }
  .elbe-saison-btn { padding: 0.45rem 0.55rem; }
}

/* ============================================================
   TABLET: Hero zentrieren (721px–1024px)
   ------------------------------------------------------------
   Ab 1024px bricht .hero-main auf eine Spalte um und die Akte
   (hero-teaser) rückt zentriert unter den Text. Der Textblock
   blieb aber linksbündig — das wirkte gegenüber der zentrierten
   Akte schief. In diesem Band wird der komplette Hero-Content
   deshalb zentriert. Bewusst mit min-width 721px gescopet, damit
   das Mobile-Layout (≤720px) unverändert bleibt.
   ============================================================ */
@media (max-width: 1024px) and (min-width: 721px) {
  .hero-content {
    text-align: center;
    max-width: 680px;
    margin: 0 auto;
  }
  /* Countdown-Box: inline-flex → flex + margin auto, damit die
     Box (Breite = Inhalt) mittig sitzt — gleiche Technik wie im
     Mobile-Block weiter unten. */
  .hero-countdown {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  /* Ornament-Linie und Stats haben max-width < Contentbreite und
     würden sonst links kleben. */
  .hero-rule { margin-left: auto; margin-right: auto; }
  .hero-stats { margin-left: auto; margin-right: auto; }
  /* Tagline hat max-width: 550px < Contentbreite — ohne auto-Margins
     würde sie trotz text-align: center links kleben. */
  .hero-tagline { margin-left: auto; margin-right: auto; }
  .stat { align-items: center; text-align: center; }
}

/* Burger-Button — auf Desktop versteckt */
.site-nav-burger { display: none; }

@media (max-width: 720px) {
  .header-inner {
    padding: 0.9rem 1rem;
    gap: 0.75rem;
    flex-wrap: nowrap;
  }
  .monogram-letters { width: 36px; height: 36px; font-size: 0.85rem; }
  .monogram-name strong { font-size: 0.95rem; }
  .monogram-name span { font-size: 0.7rem; }

  /* Burger-Icon sichtbar machen — ganz rechts im Header.
     Im HTML steht der Burger VOR den .header-actions; auf Mobile
     werden beide per order getauscht: Feier-Button (order 2) links,
     Burger (order 3) außen. margin-left: auto wandert dafür vom
     Burger auf .header-actions, damit das Paar rechts andockt. */
  .site-nav-burger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    width: 38px;
    height: 38px;
    padding: 9px 8px;
    background: transparent;
    border: 1px solid rgba(95, 70, 30, 0.4);
    border-radius: 3px;
    cursor: pointer;
    order: 3;
    flex-shrink: 0;
  }
  .header-actions {
    order: 2;
    margin-left: auto;
  }
  .site-nav-burger .burger-line {
    height: 2px;
    background: var(--ink, #2a1f0f);
    border-radius: 1px;
    transition: transform 200ms ease, opacity 200ms ease;
  }
  .site-nav-burger[aria-expanded="true"] .burger-line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .site-nav-burger[aria-expanded="true"] .burger-line:nth-child(2) {
    opacity: 0;
  }
  .site-nav-burger[aria-expanded="true"] .burger-line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* Nav als Dropdown unter dem Header */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--paper, #efe7d7);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
    border-bottom: 1px solid rgba(60, 40, 20, 0.18);
    z-index: 49;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 250ms ease;
  }
  .site-nav.is-open {
    max-height: 500px;
  }
  .site-nav a {
    padding: 0.95rem 1.5rem;
    text-align: left;
    width: 100%;
    border-bottom: 1px solid rgba(60, 40, 20, 0.07);
    font-size: 0.95rem;
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a::after { display: none; }

  /* Header-Actions (Elbe-Saison-Button): bleibt auf Mobile bewusst
     sichtbar (icon-only, geregelt in css/14-elbe-saison.css). Die
     display:none-Regel, die früher hier stand, war ohnehin wirkungslos
     — 14-elbe-saison.css lädt später und seine Basis-Regel
     `display: flex` gewinnt bei gleicher Spezifität. */

  /* Hero kompakter */
  .hero { padding: 2.5rem 1.25rem 1rem; }
  .hero-title { font-size: 3.25rem; }
  .hero-teaser-wrap { width: 100%; max-width: 420px; }

  /* Hero-Inhalt durchgehend zentrieren — Countdown-Box und Stats
     waren bereits mittig, Titel und Tagline standen aber noch
     linksbündig daneben. Eine einheitlich zentrierte Spalte wirkt
     auf schmalen Screens deutlich aufgeräumter (gleiche Entscheidung
     wie im Tablet-Band weiter oben). */
  .hero-content { text-align: center; }

  /* Morse-Ornament (.hero-rule): Die SVG hat viewBox 252×4 mit
     preserveAspectRatio="none" und wurde mit width:100% auf volle
     Contentbreite gestreckt — auf schmalen Screens werden die
     Striche und Punkte dadurch in die Breite gezogen und wirken
     klobig. Auf die natürliche viewBox-Breite begrenzen, flacher
     machen und zentrieren; der versteckte Morse-Text bleibt damit
     auch proportional lesbar. */
  .hero-rule {
    max-width: 252px;
    height: 4px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Countdown-Box zentrieren — auf Mobile hat .hero-content
     keine Breitenbegrenzung, wodurch die Box linksbündig
     wirkt. Wechsel von inline-flex zu flex damit margin: auto
     die Zentrierung übernehmen kann. */
  .hero-countdown {
    display: flex;
    width: max-content;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  /* Brief-Bereich (Aktueller Hinweis im locked-Zustand)
     — die großen Top/Bottom-Abstände sind auf Mobile
     verschwendete Bildschirmfläche. */
  .current-clue-section { margin-top: 3rem; }
  .current-clue-section.locked .clue-sealed {
    padding: 1rem 0.5rem 0.5rem;
    margin-bottom: 1rem;
  }

  /* Timer-Adjacent-Abstände kürzen — auf Mobile ist Vertikalplatz
     knapp. Title→Tagline-Abstand bleibt unverändert (1.5rem default),
     nur Tagline→Timer und Timer→Stats werden kompakter. */
  .hero-tagline { margin-bottom: 0.75rem; margin-left: auto; margin-right: auto; }
  .hero-countdown { margin-bottom: 0.75rem; }
  .hero-stats { padding-top: 0.75rem; }

  /* Meta-Zeile "DOSSIER · DRESDEN | FALL 1 · AKTE 04" verstecken — auf
     Mobile ist die obere Bildschirmfläche zu wertvoll für sekundäre
     Meta-Info, die auch im hero-teaser-tab steht. */
  .hero-meta-top { display: none; }

  /* Kaffeeflecken auf Mobile entfernen — sie nehmen 50% der Lesefläche
     ein und stören die Hero-Texte. Die Atmosphäre kommt auf Mobile durch
     andere Elemente (Schreibmaschinenschrift, Notizzettel, Stempel)
     ohnehin genug rüber. */
  /* (fruehere .coffee-ring-Regel entfernt — die Papier-Spuren
     heissen jetzt .trace-slot und werden zentral ueber die
     .bg-trace-Regel in 01-base-nav-hero.css <=1024px versteckt) */

  /* Countdown deutlich kleiner und kompakter — passt mit 3 Einheiten
     komfortabel auf 360px-Viewports rein. */
  .countdown-display { gap: 0.25rem; padding: 0.7rem 0.6rem; }
  .cd-unit { min-width: 56px; }
  .cd-num { font-size: 1.5rem; }
  .cd-unit-label { font-size: 0.6rem; }
  .cd-sep { font-size: 1.1rem; transform: translateY(-4px); }

  /* Stats: nebeneinander statt untereinander */
  .hero-stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }
  .stat { align-items: center; text-align: center; }
  .stat-num { font-size: 1.6rem; }
  .stat-label { font-size: 0.7rem; }

  /* ============================================================
     FALLAKTEN: Karussell statt Grid auf Mobile
     ------------------------------------------------------------
     Free-Scroll mit leichtem Snap. Die .file-tab-Karten bleiben
     1:1 erhalten — wir verändern nur das Container-Layout. Die
     vorhandenen Tilts (--stack-tilt etc.) wirken weiter, weil
     transform additiv ist und wir hier keinen drauflegen.
     ============================================================ */
  .file-cabinet { position: relative; }

  /* Tabs (Monatsakten/Finalakten): Die Mobile-Regeln leben in
     css/15-cabinet-tabs-finale.css (ganz unten) — Regeln HIER wären
     wirkungslos, weil 15-cabinet-tabs-finale.css später lädt und
     seine gleichspezifischen Basis-Regeln (.cabinet-tabs absolute/
     top/transform) in der Kaskade gewinnen. Genau dieser Fehler
     stand früher hier und ließ die Reiter auf Mobile in voller
     Breite über dem Sektions-Untertitel kleben. */

  .files-grid {
    display: flex;
    grid-template-columns: none;
    gap: 18px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* Padding so dass die erste/letzte Akte mittig snappen kann.
       240px Karten-Breite — bleibt identisch zu Desktop. */
    padding: 28px calc((100% - 240px) / 2) 8px;
    scrollbar-width: none;
  }
  .files-grid::-webkit-scrollbar { display: none; }
  .files-grid .file-tab {
    flex: 0 0 240px;
    height: 240px;
    scroll-snap-align: center;
    /* Auf Mobile keine Tilts/Offsets — die Akten stehen sauber
       in einer Reihe. Die --stack-tilt und --stack-x/y Variablen
       bleiben gesetzt, werden hier aber im transform überschrieben. */
    transform: translateZ(0);
  }
  /* Stack-Mode (Jagd nicht aktiv): auch hier kein Tilt mehr —
     die "Akten liegen aufeinander"-Optik macht in einer horizontalen
     Reihe ohnehin keinen Sinn. */
  .file-cabinet.stack-mode .files-grid:not(.finale-grid) .file-tab {
    transform: translateZ(0);
  }
  .file-cabinet.stack-mode .files-grid:not(.finale-grid) .file-tab:hover {
    transform: translateZ(0);
  }
  /* Hover-Lift auf Mobile rausnehmen — gibt's nicht und stört bei
     der GPU-Layer-Komposition während des Scrollens. */
  .files-grid .file-tab:hover {
    transform: translateZ(0);
    box-shadow:
      inset 0 1px 0 rgba(255, 250, 230, 0.35),
      0 2px 4px rgba(0, 0, 0, 0.18),
      0 4px 10px rgba(0, 0, 0, 0.1);
  }

  /* Big-Number-Overlay: erscheint bei jedem Active-Wechsel,
     verschwindet 700ms später wieder. Pointer-events off,
     darüber gerendert. Nur auf Mobile sichtbar. */
  .files-bignum {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.55);
    font-family: var(--font-display);
    font-size: 9.5rem;
    font-weight: 400;
    color: rgba(184, 39, 39, 0);
    pointer-events: none;
    z-index: 10;
    transition: opacity 220ms ease,
                transform 400ms cubic-bezier(0.34, 1.56, 0.64, 1),
                color 220ms ease;
    letter-spacing: -0.04em;
    text-shadow: 5px 5px 0 rgba(0, 0, 0, 0.18);
    user-select: none;
    white-space: nowrap;
  }
  .files-bignum.is-showing {
    color: rgba(184, 39, 39, 0.92);
    transform: translate(-50%, -50%) scale(1);
  }

  /* Swipe-Hint für Akten-Karussell — analog zum Hinweis-Karussell.
     Erscheint nur beim ersten Besuch (eigener localStorage-Token
     filesSwipeShown), verschwindet nach erstem Scroll. */
  .files-swipe-hint:not(.is-hidden) {
    display: block;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 1px;
    height: 1px;
    transform: translate(-50%, -10%);
    z-index: 5;
    overflow: visible;
  }
  .files-swipe-finger {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(60px);
    color: var(--ink, #2a1f15);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25));
    animation: clueSwipeFinger 2.4s cubic-bezier(0.4, 0, 0.4, 1) infinite;
  }
  .files-swipe-finger svg { display: block; }

  .tickets-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .process-grid { grid-template-columns: 1fr; }
  .folder { aspect-ratio: auto; height: 85vh; }
  .folder-stage { zoom: 1 !important; transform: none !important; width: 100%; height: 85vh; aspect-ratio: auto; }
  .folder-book { grid-template-columns: 1fr; perspective: none; }
  .folder-book::before { display: none; }

  /* On mobile: disable 3D flip — the leaf flows normally and pages show/hide based on data-page.
     js/09 haengt .book-leaf hier zurueck in .folder-book; die Desktop-
     Blatt-Ebene ist dann leer und wird samt Falz-Linie versteckt. */
  .book-leaf-layer { display: none; }
  .book-leaf {
    position: static !important;
    top: auto; left: auto; right: auto; bottom: auto;
    width: auto;
    transform: none !important;
    transform-style: flat;
  }
  .folder-page.leaf-face {
    position: relative;
    inset: auto;
    transform: none !important;
    backface-visibility: visible;
    box-shadow: none;
  }
  .folder-page.leaf-face-front::after { display: none !important; }

  /* Page 1 → Metadata + Beweismaterial */
  .folder-book[data-page="1"] .book-page-static.folder-page-left  { display: block; }
  .folder-book[data-page="1"] .book-page-static.folder-page-right { display: none; }
  .folder-book[data-page="1"] .leaf-face-front { display: block; }
  .folder-book[data-page="1"] .leaf-face-back  { display: none; }
  /* Page 2 → Auswertung + Notizen */
  .folder-book[data-page="2"] .book-page-static.folder-page-left  { display: none; }
  .folder-book[data-page="2"] .book-page-static.folder-page-right { display: block; }
  .folder-book[data-page="2"] .leaf-face-front { display: none; }
  .folder-book[data-page="2"] .leaf-face-back  { display: block; }
  .folder-page-left { border-right: none; border-bottom: 1px dashed var(--line); }
  .photo-stack { width: 90%; aspect-ratio: 4 / 3.2; }
  .polaroid { padding: 10px 10px 32px; }
  .polaroid-caption { font-size: 0.88rem; bottom: 6px; }
  .folder-page-nav-wrap { padding: 0 0.75rem; gap: 0.5rem; height: 48px; }
  .folder-page-nav { padding: 0.35rem 0.7rem; font-size: 0.62rem; letter-spacing: 0.15em; }
  .folder-page-nav span { display: none; }
  .folder-page-indicator { font-size: 0.62rem; letter-spacing: 0.18em; }
  .folder-notes-page { padding: 0; }
  .notes-title { font-size: 1.7rem; margin-bottom: 1rem; }
  .note-entry { font-size: 1rem; }
  .note-entry.big { font-size: 1.2rem; }
  .note-entry.small { font-size: 0.85rem; }
  .lightbox-close { top: 0.9rem; right: 0.9rem; width: 40px; height: 40px; }
  footer { grid-template-columns: 1fr; }
  .clue-document {
    padding: 1.25rem 1rem 1rem;
    min-height: auto;
    /* Kein Tilt auf Mobile — die schräge Ausrichtung sieht im engen
       Container nicht hochwertig aus, sondern verzogen. */
    transform: none;
  }
  /* Schreibtisch-Deko (Stift, Klebebandrolle, Klammern) komplett weg.
     Auf Mobile reine visuelle Last ohne Funktion. */
  .clue-prop-pen,
  .clue-prop-paperclip-pile { display: none; }
  /* Auf Mobile kein zoom-in-Cursor — Lightbox ist auf Mobile
     deaktiviert (siehe openLightbox Click-Handler). */
  .clue-photo { cursor: default; }
  /* Pfeile weg — Swipe-Geste ersetzt sie */
  .clue-nav { display: none; }
  /* Photo-Wrap braucht keine fixierten Höhen mehr ohne Deko drumrum */
  .clue-body.clue-body-centered .clue-photo-wrap {
    min-height: auto;
    max-width: 100%;
  }
  .clue-body { min-height: auto; padding: 0.5rem 0; }
  /* Placeholder fluid — vorher 340px hardcoded, das sprengte den
     Container auf 360px-Phones. */
  .clue-photo-placeholder {
    width: 100%;
    min-height: 180px;
    padding: 2rem 1rem;
  }
  .current-clue-section, .dossier-section, .tickets-section, .process-section, .rules-section { padding: 0 1.25rem; }
  .ticket-memo::before { left: 32px; }
  .ticket-memo-trigger { padding: 1.1rem 1.25rem 1.1rem 2.75rem; gap: 0.75rem; grid-template-columns: 1fr auto; }
  .memo-stamp { display: none; }
  .memo-title { font-size: 1.15rem; }
  .memo-content { padding: 1.25rem 1.25rem 1.5rem 2.75rem; font-size: 1rem; }
  .clue-carousel { gap: 0.4rem; }
  .clue-nav { width: 40px; height: 40px; }
  .clue-nav svg { width: 18px; height: 18px; }
  .hints-track { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .chronik-card { min-height: 48px; padding: 6px 2px 4px; }
  .chronik-card-num { font-size: 1.1rem; margin-top: 6px; }
  .chronik-card-label { font-size: 0.44rem; letter-spacing: 0.12em; }
  .chronik-card::before { top: 7px; }
  .chronik-card .chronik-ig-dot { width: 14px; height: 14px; top: -3px; right: -3px; }
  .chronik-card .chronik-vault-dot { width: 12px; height: 16px; top: -3px; right: -3px; }
  .clue-meta { flex-wrap: wrap; gap: 0.5rem; font-size: 0.62rem; }
  /* "Schatz 02 / 12"-Anzeige auf Mobile weg — die Info gibt es schon
     in der Chronik-Leiste unten und auf der Akte selbst. */
  #clue-index { display: none; }
  /* Chronik-Header mit "0/12 geborgen" weg auf Mobile — die Akten-
     Tabs darunter sind selbsterklärend genug. */
  .hints-timeline-label { display: none; }
  .clue-solved-stamp { font-size: 1.4rem; top: 0.8rem; right: 1rem; padding: 0.25rem 0.8rem 0.3rem; }
  .file-tab .mini-stamp { font-size: 1.1rem; padding: 0.25rem 0.75rem 0.35rem; border-width: 2px; }
  .file-tab .ig-sticker { margin-top: 0.7rem; gap: 3px; }
  .file-tab .ig-sticker img { width: 32px; height: 32px; border-radius: 8px; }
  .file-tab .ig-sticker-label { font-size: 0.54rem; padding: 1.5px 6px; }
  .file-tab .vault-sticker { margin-top: 0.7rem; }
  .file-tab .vault-sticker img { width: 50px; height: 64px; }
}