/* ═══ Schwarzglas · Geräte- & Format-Optimierung ═══
   Macht die Anthologie auf Telefon, Tablet und Desktop in Hoch- wie Querformat
   komfortabel — rein additiv, der abgenommene Look bleibt unangetastet.
   Nach anthologie.css geladen, damit gezielte Anpassungen greifen. */

/* ── Dynamische Viewport-Höhe ──
   Auf Mobil schrumpft/wächst die Glasfläche mit den ein-/ausfahrenden
   Browser-Leisten, statt unter ihnen abgeschnitten zu werden. */
@supports (height: 100dvh){
  html, body{ height: 100dvh; }
}

/* ── Touch-Treffflächen für die Rahmen-Tasten ──
   Die Register-Tasten (Sprachstufe) und die Power-Taste sind als echte
   Hardware-Knöpfe nur wenige Pixel hoch — auf dem Finger kaum zu treffen.
   Eine großzügige, unsichtbare Hitbox (überwiegend nach oben, ins Letterbox)
   plus Druck-Feedback macht sie auf jedem Touchscreen bedienbar. */
.dev-btn.vol-up, .dev-btn.vol-down{ cursor: pointer; }
.dev-btn.vol-up::after, .dev-btn.vol-down::after{
  content:""; position:absolute; inset:-26px -5px -14px;
}
.dev-btn.vol-up:hover, .dev-btn.vol-down:hover{ filter: brightness(1.4); }
.dev-btn.vol-up:active, .dev-btn.vol-down:active{ transform: translateY(1px); filter: brightness(.8); }
.dev-btn.vol-up:focus-visible, .dev-btn.vol-down:focus-visible{ outline:2px solid var(--accent); outline-offset:5px; }

/* ── Telefon: Rahmen schlanker → mehr Glas fürs Lesen ── */
@media (max-width: 680px){
  body{ padding: clamp(6px, 1.6vmin, 14px); }
  .device{ --bezw: clamp(8px, 1.5vmin, 14px); --rad: clamp(20px, 3.6vmin, 34px); }
  /* Lange deutsche Komposita dürfen in schmalen Spalten brechen statt zu überlaufen */
  .scene p, .coldopen .co-text, .theory p, .theory li, .testimony p,
  .mirrormoment p, .postcredits p, .titlecard .tc-syn,
  .bb-syn, .bb-sub, .step p, .tier .td{
    -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word;
  }
}
@media (max-width: 430px){
  body{ padding: 5px; }
  .device{ --rimw: 2.5px; --bezw: 8px; --rad: 22px; }
}

/* ── Kurzes Querformat (Telefon liegend): Hero/Titel nicht höher als der Schirm ── */
@media (max-height: 560px) and (orientation: landscape){
  .billboard,
  body[data-bb="diptychon"] .billboard,
  body[data-bb="im spalt"] .billboard{ min-height: 100%; }
  .titlecard{ min-height: 80%; }
}

/* ── Notch / Safe-Area ──
   Nur relevant, wenn der Rahmen abgeschaltet ist (Vollbild-Lesen): dann sitzt
   der Inhalt direkt an der Display-Kante und muss um Dynamic Island / Home-Bar herum. */
body.no-frame .status{ padding-top: calc(1.1rem + env(safe-area-inset-top, 0px)); }
body.no-frame .chrome{ padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
body.no-frame .scenes{ padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }
body.no-frame .rows{ padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px)); }

/* ── Touch-Geräte: Schwung-Scroll in den Reihen, kein Hover-Zoom auf Karten ── */
.r-scroll{ -webkit-overflow-scrolling: touch; }
@media (hover: none){
  .epcard:hover{
    transform: none;
    box-shadow: inset 0 0 0 1px oklch(0.5 0.05 var(--th) / .35), 0 18px 40px -20px oklch(0 0 0 / .9);
  }
}

/* ═══ Universal: große Displays, hohe Auflösungen, faltbare Geräte ═══
   Rein additiv. Normale Laptops/Desktops (≤1920 px) bleiben unverändert. */

/* Lesemaß in rem statt fixen px, damit die Spaltenbreite auf hochauflösenden
   Schirmen mit der Schrift mitwächst, statt optisch zu schrumpfen.
   47.5rem × 16px = 760px → auf Standardschirmen identisch zum abgenommenen Look. */
.scenes{ max-width: 47.5rem; }

/* Hohe Auflösungen / große Schirme & Beamer: die Wurzelgröße skaliert sämtliche
   rem-Maße proportional mit. Der Geräterahmen skaliert ohnehin über vmin. */
@media (min-width: 2000px){ html{ font-size: 18px; } }
@media (min-width: 2560px){ html{ font-size: 21px; } }
@media (min-width: 3200px){ html{ font-size: 25px; } }
@media (min-width: 5000px){ html{ font-size: 34px; } }

/* Verortungs-Kartoffelgrafik bleibt auf schmalen Schirmen lesbar */
@media (max-width: 560px){
  .kgraf{ margin-left: 2.6rem; }
  .kgraf .kworld{ font-size: .46rem; letter-spacing: .1em; }
  .kgraf .ksub{ font-size: .38rem; letter-spacing: .06em; }
}

/* Sehr schmale / faltbare Geräte */
@media (max-width: 360px){
  body{ padding: 4px; }
  .kgraf{ margin-left: 2.3rem; }
}

/* ═══ Schmales Hochformat: rahmenloser Lesefluss ═══
   Problem: Im iPad-Rahmen scrollt ein INNERER Container (.reader) — auf iOS
   klappt dann die Safari-Leiste nie ein, der Seitenfuß bleibt verdeckt und das
   Touch-Scrollen im verschachtelten Container hakt: die Geschichte ist im
   Hochformat kaum lesbar. Lösung: Auf schmalen Hochformat-Telefonen den Rahmen
   weglassen und die SEITE nativ scrollen lassen — volle Breite, native Leiste,
   alles erreichbar. Der iPad-Look bleibt im Querformat und auf größeren
   Schirmen unangetastet. Die mode-abhängige Fortschritts-/Uhr-Logik in
   anthologie.js liest passend von der Fenster- statt der Container-Position. */
.pframe{ display: none; }   /* schlanker Geräterand — nur im schmalen Hochformat sichtbar */
@media (orientation: portrait) and (max-width: 680px){
  html, body{ height: auto; min-height: 100dvh; overflow: visible; }
  body{ padding: 0; }

  /* Rahmen-Kulisse entfällt */
  .device{ position: static; width: 100%; height: auto; min-height: 100dvh;
    --rimw: 0px; --bezw: 0px; --rad: 0px; }
  .dev-rim, .dev-bezel, .dev-cam, .dev-sensor, .dev-mic, .dev-btn, .stage-bed{ display: none; }
  .dev-screen{ position: static; inset: auto; height: auto; min-height: 100dvh;
    border-radius: 0; overflow: visible; box-shadow: none; }

  /* Der aktive Screen fließt in die Seite statt als fixer Innen-Scroller zu sitzen */
  .screen.on{ position: relative; min-height: 100dvh; }
  .reader, #home{ overflow: visible; overscroll-behavior: auto; }

  /* Reader-Kopf bleibt beim Scrollen erreichbar (Zurück + Register) */
  .chrome.on{ position: sticky; }
  .status{ padding-top: calc(1.1rem + env(safe-area-inset-top, 0px)); }
  .chrome{ padding-top: calc(.8rem + env(safe-area-inset-top, 0px)); }
  .scenes{ padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px)); }

  /* Schlanker Geräterand: dünne, feste Metall-/Glas-Kante am Display-Rand,
     liegt als pointer-events-freie Hülle über dem nativ scrollenden Inhalt. */
  .pframe{
    display: block;
    position: fixed; inset: 0; z-index: 60; pointer-events: none;
    border-radius: 22px;
    box-shadow:
      inset 0 0 0 2px oklch(0.66 0.007 235),         /* helle Aluminiumkante außen */
      inset 0 0 0 6px oklch(0.12 0.004 245),         /* schwarze Glas-Blende */
      inset 0 0 0 7px oklch(0.5 0.018 235 / .6),     /* polierter Glas-Lichtsaum */
      inset 0 2px 1px oklch(0.9 0.01 230 / .12),     /* Glanz an der Oberkante */
      inset 0 0 30px oklch(0 0 0 / .55);             /* sanfte Display-Vignette */
  }
}

/* ── Sanfter „quer drehen"-Hinweis ──
   Im schmalen Hochformat liest die Geschichte rahmenlos und komfortabel; der
   iPad-Look entfaltet sich im Querformat. Dieser dezente, wegklickbare Hinweis
   verweist sanft darauf (echtes Auto-Drehen ist im Browser nicht möglich).
   Sichtbarkeit steuert JS via body.show-rotate-hint (gleiches matchMedia). */
.rotate-hint{
  position: fixed; z-index: 130; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: none; align-items: center; gap: .6em;
  max-width: calc(100vw - 24px);
  padding: .5em .5em .5em .95em; border-radius: 999px;
  background: oklch(0.17 0.012 245 / .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 10px 34px -10px oklch(0 0 0 / .8), 0 0 0 1px oklch(0.95 0.01 240 / .12);
  font-family: var(--f-mono); font-size: .6rem; letter-spacing: .04em; color: var(--ink);
}
body.show-rotate-hint .rotate-hint{ display: inline-flex; }
.rotate-hint .rh-rot{ font-size: 1.3em; line-height: 1; color: var(--accent); display: inline-block;
  animation: rotHintSpin 3.6s ease-in-out infinite; }
.rotate-hint .rh-label{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rotate-hint .rh-close{
  flex: none; border: none; cursor: pointer; background: oklch(0.95 0.01 240 / .1); color: var(--mut);
  width: 1.8em; height: 1.8em; border-radius: 50%; font-size: 1em; line-height: 1; padding: 0;
}
.rotate-hint .rh-close:hover{ background: oklch(0.95 0.01 240 / .2); color: var(--ink); }
@keyframes rotHintSpin{ 0%, 60%, 100%{ transform: rotate(0deg); } 76%, 90%{ transform: rotate(-90deg); } }
@media (prefers-reduced-motion: reduce){ .rotate-hint .rh-rot{ animation: none; } }