/* ══════════════════════════════════════════════════════════════════════════
   MOBIL-START — Handy- und Tablet-Regeln NUR für die Startseite
   (index.html + en/index.html). Wird als letztes Stylesheet geladen und
   überschreibt gezielt, was site.css/hero-tafeln.css unterhalb 1024 px
   falsch macht. Kopf und Fuß bleiben unangetastet (eigene Datei site.css).
   Umbruchpunkte wie in site.css: 900 (Hero/Türen/Zweispalter), 560 (Handy).
   ══════════════════════════════════════════════════════════════════════════ */

/* ── 1. HERO: Werk und Text stapeln ─────────────────────────────────────
   site.css:1349 setzt `section.split{grid-template-columns:1.02fr .98fr}`
   und schlägt damit die Handy-Regel `.split{grid-template-columns:1fr}`
   (site.css:1613) — der Hero blieb bei 390 px zweispaltig, das Werk war
   89 px schmal und der Text stand halb darüber. Hier mit gleicher
   Spezifität und späterer Ladung: eine Spalte, Werk oben, Text darunter. */
@media(max-width:900px){
  section.split{grid-template-columns:1fr; min-height:0; gap:0}
  section.split > .split-buehne{order:-1; min-height:0}
  section.split > .split-buehne > .werk{height:auto; min-height:380px}
  /* Innenabstand wie .wrap (clamp(1.25rem,4vw,2.5rem)), damit die Kante
     des Textes mit dem Rest der Seite fluchtet. */
  section.split > .split-txt{padding:2.4rem clamp(1.25rem,4vw,2.5rem) 3rem}
  section.split .split-txt .innen{margin-left:0; max-width:36rem}
  section.split .split-akt{margin-top:1.8rem}
  /* Tippfläche des Prüflauf-Knopfs auf 44 px (verify: 118×34) */
  .werk .tf-sprung{min-height:44px; padding-block:.55rem}
  /* Ersatzbild (drei Glastafeln, wenn kein 3D läuft): die Tafeln waren
     300 px breit und damit höher als die 380-px-Bühne — oben und unten
     abgeschnitten, unten lagen sie zudem unter der Taktzeile „Anflug".
     Jetzt: Welt endet 22 % über dem Boden (Platz für die Taktzeile), Tafel
     nimmt die Welthöhe und leitet die Breite aus dem Seitenverhältnis ab. */
  .werk-ersatz .tf-welt{inset:10% 6% 26% 6%; width:auto; height:auto}
  /* (raum.css gibt .rm-welt width/height 100 % — das schlägt den inset,
     deshalb hier beides auf auto.) */
  .werk-ersatz .tf-e{width:auto; height:100%; aspect-ratio:5/6.2}
}
@media(max-width:560px){
  section.split > .split-buehne > .werk{min-height:340px}
  section.split > .split-txt{padding:2rem clamp(1.25rem,4vw,2.5rem) 2.6rem}
  section.split .split-txt h1{font-size:clamp(2rem,9vw,2.5rem)}
  .werk-takt{max-width:min(20rem,66%); padding:.5rem .9rem .55rem 1.4rem}
  .werk-takt b{font-size:.9rem}
  .werk-takt small{font-size:.72rem}
}

/* ── 2. DREI BEREICHE („Türen") ────────────────────────────────────────────
   Seit 17.09. steht die Grafik auch am Desktop im Fluss (site.css,
   „Bereichskarten"); die Regeln hier ordnen sie nur noch anders an:
   Tablet nebeneinander, Handy gestapelt. */

/* Tablet 561–900: Grafik RECHTS neben dem Text. Die Nummer „01" bleibt
   oben links über dem Text, deshalb rechts und nicht links. */
@media(max-width:900px){
  .sek-bereiche .tuer{display:grid; grid-template-columns:minmax(0,1fr) clamp(150px,26vw,210px);
    grid-template-rows:auto auto auto; column-gap:clamp(1.2rem,3vw,2rem); row-gap:0;
    align-items:center; align-content:center; justify-content:stretch;
    min-height:0; text-align:left; padding:3.2rem 1.8rem 1.8rem 1.9rem}
  .sek-bereiche .tuer .grafik-feld{position:static; transform:none; width:100%;
    grid-column:2; grid-row:1 / 4; align-self:center}
  .sek-bereiche .tuer .grafik-feld .ob{width:100%; height:auto}
  .sek-bereiche .tuer h2,.sek-bereiche .tuer p,.sek-bereiche .tuer .mehr{grid-column:1}
  .sek-bereiche .tuer h2{margin-bottom:.5rem}
  .sek-bereiche .tuer p{margin-bottom:.9rem}
  .sek-bereiche .tuer .mehr{justify-content:flex-start; justify-self:start}
  .sek-bereiche .tuer:hover{transform:none}
  .sek-bereiche .tueren{gap:1.1rem}
}
/* Handy ≤560: Grafik OBEN mit fester Höhe, Text darunter — nichts liegt
   übereinander. */
@media(max-width:560px){
  .sek-bereiche .tuer{display:flex; flex-direction:column; justify-content:flex-start;
    align-items:stretch; text-align:center; min-height:0; padding:3.2rem 1.4rem 1.7rem}
  .sek-bereiche .tuer .grafik-feld{position:static; transform:none; width:100%;
    height:190px; margin:0 auto 1.1rem; display:grid; place-items:center}
  .sek-bereiche .tuer .grafik-feld .ob{width:auto; height:100%; max-width:100%}
  .sek-bereiche .tuer h2{font-size:1.35rem}
  .sek-bereiche .tuer .mehr{justify-content:center; align-self:center}
}
/* 901–1024 (schmales Tablet quer): drei Spalten bleiben, aber die Karten
   sind nur ~300 px breit — die Grafik (74 %) reichte bis in die Überschrift.
   Kleinere Grafik, mehr Mindesthöhe. */
@media(min-width:901px) and (max-width:1024px){
  .sek-bereiche .tuer{min-height:30rem; padding-inline:1.3rem}
  .sek-bereiche .tuer .grafik-feld{width:min(58%,11rem)}
  .sek-bereiche .tuer h2{font-size:1.3rem}
  .sek-bereiche .tuer p{font-size:.9rem}
}

/* ── 3. SCHAUSTÜCK (Scrollytelling) ───────────────────────────────────────
   Klebende Bühne von 100svh: am Tablet lagen Grafik (451 px) + sechs Kapitel
   + Knopf bei 940 px in 1024 px — der feste Kopf (64 px) schnitt oben an.
   Grafik etwas kleiner, dann bleibt Luft. */
@media(min-width:561px) and (max-width:900px){
  .anlage-story .sz{max-height:38svh}
  .anlage-story .hb{min-height:280px}
  .as-kapitel p{font-size:.95rem}
  .as-buehne{padding-top:56px}
}
@media(max-width:560px){
  .as-buehne{padding-top:56px}
}

/* ── 4. NACHWEISE: 4 Kacheln, auto-fit ergab am Tablet 3 + 1 (Waise) ─── */
@media(max-width:1024px){ .nachweise{grid-template-columns:1fr 1fr} }
@media(max-width:560px){ .nachweise{grid-template-columns:1fr} }

/* ── 5. AUFRUF: Telefonlink als 44-px-Tippfläche (verify: 138×26) ──────── */
@media(max-width:1024px){
  .aufruf-tel{display:inline-flex; align-items:center; min-height:44px}
}