/* ==========================================================================
   CALIGO - Handy-Lesbarkeit (05.11.2026, Nacht)
   Wird NACH mobile.css geladen. Gilt nur bis 768 px Breite.
   Problem: Seitenränder von main, section, .wrap und Karten summierten sich auf ca. 75 px pro Seite
   (Text nur 58 % der Breite). Jetzt: ein einziger Rand pro Seite.
   ========================================================================== */
@media (max-width: 768px) {
  :root { --m-gutter: clamp(14px, 4.2vw, 28px); }

  /* 0) Die alte Tab-Leiste liegt hinter der neuen unteren Navigation (mobile-bottom-nav). Nur ihr hochgesetzter Kreis ragte als "Play-Knopf" hervor -> weg. */
  .tabbar { display: none !important; }

  /* 1) Ränder: nur noch auf der Section, nicht zusätzlich auf main und .wrap */
  main, main#top { padding-left: 0 !important; padding-right: 0 !important; }
  .section { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }
  .wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  /* Chronik-Bereiche: ein Rand */
  .chronik-wrap { padding-left: var(--m-gutter) !important; padding-right: var(--m-gutter) !important; }

  /* 2) Karten und Kästen: weniger Innenabstand */
  .kunst-intro-card { padding: 16px 14px !important; }
  .kic-body, .kic-lead { font-size: 1rem; line-height: 1.6; }
  .kic-title { font-size: clamp(1.25rem, 6vw, 1.6rem) !important; letter-spacing: .01em; }
  .panel, .section .card, .feature { padding-left: 14px !important; padding-right: 14px !important; }

  /* Anleitung: verschachtelte Innenabstände (guide > panels > panel) verkleinern */
  .guide { padding-left: 8px !important; padding-right: 8px !important; }
  .panels { padding-left: 0 !important; padding-right: 0 !important; }
  .panel { padding-left: 12px !important; padding-right: 12px !important; }

  /* 3) Fließtext: gut lesbar, nicht größer als nötig */
  .section p, .section li { line-height: 1.62; }
  .section .sub, .section .lead { font-size: 1rem; }
  .panel p, .panel li { font-size: 1rem; line-height: 1.62; }
  h2 { font-size: clamp(1.5rem, 7vw, 2rem); line-height: 1.18; }
  h3 { line-height: 1.22; }

  /* 4) Reiter der Anleitung (1 Ziel, 2 Karten, ...): nicht abgeschnitten, Wisch-Hinweis */
  .steps {
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-left: 4px; padding-right: 28px;
    mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
  }
  .steps button { scroll-snap-align: center; min-width: 76px; }

  /* 5) Schwebe-Knöpfe (Feuer und Musik): klein, am Rand, verdecken den Text kaum */
  .floating-quick-dock {
    right: 6px !important;
    bottom: calc(var(--tab, 64px) + 12px) !important;
    gap: 8px !important;
    transition: opacity .25s ease, transform .25s ease;
  }
  .floating-quick-dock .campfire-quick-btn,
  .floating-quick-dock > * { width: 36px !important; height: 36px !important; font-size: 1rem !important; opacity: .72; }
  html.is-scrolling .floating-quick-dock { opacity: 0; pointer-events: none; transform: translateX(10px); }

  /* 6) Chronik */
  .ch-scene { padding: 1.2rem 1rem; }
  .ch-scene blockquote { font-size: 1.15rem; max-width: none; }
  .chronik .ch-lead { font-size: 1.12rem; max-width: none; }
  .chronik .ch-text { max-width: none; }
  .ch-chapter { padding: 3rem 0; }
  .chronik h2.ch-title { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .ch-prolog h1 { font-size: clamp(2.8rem, 15vw, 4.4rem); }
  .ch-prolog .ch-h1-sub { font-size: clamp(1.1rem, 5vw, 1.4rem); }

  /* 7) Welt-Fenster: kompakter, Bild nicht höher als der halbe Bildschirm */
  .wz-body { padding-left: var(--m-gutter); padding-right: var(--m-gutter); }
  .wz-fig-img { max-width: min(300px, 62vw); }
  .wz-city h2, .wz-fig h2 { font-size: clamp(1.8rem, 9vw, 2.5rem); }
}

/* ==========================================================================
   Fließende Raster statt fester Spaltenzahlen: die Spaltenzahl ergibt sich aus der verfügbaren Breite.
   Gilt für alle Bildschirmgrößen (Handy, Falt-Handy, Tablet, PC).
   ========================================================================== */
.ch-cities { grid-template-columns: repeat(auto-fit, minmax(clamp(250px, 30%, 420px), 1fr)); }
.ch-faces  { grid-template-columns: repeat(auto-fit, minmax(clamp(140px, 22%, 300px), 1fr)); }
.wz-grid   { grid-template-columns: repeat(auto-fit, minmax(clamp(130px, 20%, 260px), 1fr)); }
.wz-places { grid-template-columns: repeat(auto-fit, minmax(clamp(230px, 30%, 420px), 1fr)); }
.ch-steps  { grid-template-columns: repeat(auto-fit, minmax(clamp(200px, 30%, 360px), 1fr)); }
.ch-game   { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* Fließtext: Zeilenlänge begrenzen (gut lesbar), Schrift wächst sanft mit der Breite */
.chronik .ch-text, .kic-lead, .panel p { font-size: clamp(1rem, .94rem + .3vw, 1.12rem); }
/* Sicherheitsabstand für Notch und Gesten-Leiste */
.wz-body { padding-left: max(var(--m-gutter, 16px), env(safe-area-inset-left)); padding-right: max(var(--m-gutter, 16px), env(safe-area-inset-right)); }

/* Städte-Karten auf schmalen Bildschirmen: Bild oben, Text darunter (kein Text auf hellen Bildern) */
@media (max-width: 560px) {
  .ch-city { aspect-ratio: auto !important; display: flex; flex-direction: column; background: #0b0d18; }
  .ch-city::after { display: none !important; }
  .ch-city > img { position: static; width: 100%; height: auto; aspect-ratio: 16/10; object-fit: cover; flex: none; }
  .ch-city .ch-alt { position: relative !important; inset: auto !important; aspect-ratio: 16/10; flex: none; width: 100%; }
  .ch-city > div { position: static !important; padding: .9rem 1rem 1.1rem; }
  .ch-city-empty { min-height: 200px; }
  .ch-city-empty .ch-gem { top: 10%; }
  .ch-city h3 { font-size: 1.2rem; }
  .ch-city p { font-size: .95rem; line-height: 1.5; }
}