/* ==============================================================
   magazin.css  ·  Besitzer: P3 Rundmagazin (K22)
   Teil 1: K22 Rundmagazin (neu, v4 „Passer“, 25.09.2026), Markup aus
           includes/magazin.php, Verhalten aus assets/js/magazin.js.
   Teil 2: ALTBESTAND Lichttisch-Filmstreifen (v3, CSS_VER 56), am
           24.09.2026 von P0 verhaltensneutral aus style.css geloest.
           Bleibt, solange eine Seite includes/lichttisch.php einbindet
           (heute /zuhause bis P13). Danach kann P14 Teil 2 streichen.
   ============================================================== */
/* ==============================================================
   TEIL 1 · K22 RUNDMAGAZIN
   Material (Plan 4): Leinwandbild = Bogen (bogen.css), Dias = kleine
   Leuchtkasten-Rahmen mit Platte am gewaehlten Dia, Teller = Haarlinie
   mit versetzter Platte (Fehlregister), Nabe = Passerkreuz.
   Umbrueche nur fuer die Spaltenzahl (Plan 7):
     < 48rem  Snap-Reihe der Dias ueber der Leinwand, kein 3D
     48rem    Ring (3D) ueber der Leinwand; Karte zweispaltig (Bild | Text)
     64rem    Ring neben der Leinwand (0,9 : 1,1), Karte einspaltig
   Ohne JS (.magazin ohne .is-an): <ol> aller Karten, ab 56rem zweispaltig.
   Bewegung: transform der Dias kommt aus JS-Custom-Properties (kein
   CSS-Uebergang darauf), Hover nur ueber translate am Rahmen-Inneren.
   ============================================================== */

/* Der Bereichs-Umschalter entscheidet, welche Gruppe erscheint. Ohne
   Umschalter (Fuer Zuhause) steht, was die Seite ausgibt. */
body:has(#zg-privat:checked)  .magazin-sektion[data-zg="gewerbe"],
body:has(#zg-gewerbe:checked) .magazin-sektion[data-zg="privat"]{display:none}

/* Die Weiter-Zeile gehoert zur Sektion (Plan 4 Regel 3) und schliesst sie ab. */
.magazin-sektion:has(> .weiter){padding-bottom:0}
.magazin-sektion > .weiter{padding-top:clamp(2rem, 1.4rem + 2vw, 3rem)}

.magazin-kopf{margin-bottom:clamp(1.75rem, 1.2rem + 2vw, 3rem)}
.magazin-kopf .lead{margin:0}
/* Der Tipp beschreibt die Bedienung - er erscheint erst, wenn es sie gibt. */
.magazin-tipp{display:none;margin:.9rem 0 0;color:var(--muted);max-width:60ch}
.magazin-sektion.is-an .magazin-tipp{display:block}

/* ---- Karten (ohne JS: alle; mit JS: die Leinwand) ------------------ */
.dias{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr);
  gap:clamp(2.75rem, 2rem + 3vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 3rem)}
@media (min-width:56rem){
  .magazin:not(.is-an) .dias{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.dia{min-width:0;display:grid;grid-template-columns:minmax(0,1fr);gap:1.1rem;align-content:start}
.dia-bild{position:relative;min-width:0;isolation:isolate}
.dia-bogen{margin-top:8px}
.dia-bogen .bogen-bild img{aspect-ratio:16/10;object-fit:cover}

.dia-info{min-width:0}
.dia-etikett{margin:0 0 .5rem}
.dia-etikett span{color:var(--accent-text)}
.dia-info h3{margin:0 0 .55rem}
.dia-formate{margin:0 0 .85rem;color:var(--text)}
.dia-text{margin:0 0 1.2rem;max-width:60ch}
.dia-daten{
  margin:0 0 1.4rem;display:grid;gap:0 1.4rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,9.5rem),1fr));
}
.dia-daten div{min-width:0;border-top:1px solid var(--line);padding:.55rem 0 .4rem}
.dia-daten .breit{grid-column:1 / -1}
.dia-daten dt{
  font-family:var(--schrift-titel);font-weight:620;font-stretch:96%;
  font-size:.875rem;line-height:1.3;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
}
.dia-daten dd{margin:.15rem 0 0;font-weight:540;line-height:1.45}
.dia-knoepfe{gap:.5rem 1.4rem}
.dia-mehr{
  display:inline-flex;align-items:center;gap:.45rem;min-height:44px;
  font-family:var(--schrift-titel);font-weight:640;font-stretch:96%;line-height:1.25;
  color:var(--accent-text);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.22em;
}
.dia-mehr .pfeil{display:inline-block;transition:translate var(--t-kurz) var(--ease)}
@media (hover:hover) and (pointer:fine){
  .dia-mehr:hover{text-decoration-thickness:2px}
  .dia-mehr:hover .pfeil{translate:4px 0}
}

.magazin-fuss{margin:clamp(2rem, 1.5rem + 2vw, 3rem) 0 0;color:var(--muted);max-width:66ch}

/* ---- Mit JS: Ring + Leinwand --------------------------------------- */
.magazin.is-an{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(1.5rem, 1rem + 2vw, 3rem)}
.rund-wrap,.leinwand{min-width:0}
.leinwand{position:relative}
/* Alle Karten im selben Feld: die Leinwand ist so hoch wie die laengste,
   beim Wechsel springt nichts (Katrins fitRead, ohne Messung). Die nicht
   gewaehlten sind unsichtbar UND fuer Screenreader/Tab weg. */
.magazin.is-an .dias{grid-template-columns:minmax(0,1fr);gap:0}
.magazin.is-an .dia{grid-area:1 / 1}
.magazin.is-an .dia:not(.ist-aktiv){visibility:hidden}
/* Warmer Lichtschein (Plan 5.2 --licht) nur hinter dem Leinwandbild, nie hinter Text */
.magazin.is-an .dia-bild::before{
  content:"";position:absolute;inset:-7% -4%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,var(--licht) 30%,transparent);
}
@media (min-width:48rem) and (max-width:63.99rem){
  .magazin.is-an .dia{grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:clamp(1.5rem, 3vw, 2.5rem);align-items:start}
}
/* Ab 64rem: Kopf und Ring links, Leinwand rechts ueber beide Zeilen
   (0,9 : 1,1). .magazin loest sich dafuer in das Raster der Sektion auf
   (display:contents; es traegt keine Rolle, nur data-Attribute). */
@media (min-width:64rem){
  .magazin-sektion.is-an > .wrap{
    display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);
    grid-template-areas:"kopf lein" "ring lein" "fuss fuss";grid-template-rows:auto 1fr;
    column-gap:clamp(2rem, 4vw, 4.5rem);
  }
  .magazin-sektion.is-an .magazin{display:contents}
  .magazin-sektion.is-an .magazin-kopf{grid-area:kopf}
  .magazin-sektion.is-an .rund-wrap{grid-area:ring;align-self:center}
  .magazin-sektion.is-an .leinwand{grid-area:lein;align-self:start}
  .magazin-sektion.is-an .magazin-fuss{grid-area:fuss}
}

/* Buehne */
.rund{position:relative}
.teller,.nabe{display:none}

/* Dia = kleiner Leuchtkasten-Rahmen, Name darunter */
.rahmen{
  display:flex;flex-direction:column;align-items:center;gap:.45rem;
  margin:0;padding:0;border:0;background:none;color:var(--text);
  font:inherit;text-align:center;cursor:pointer;-webkit-tap-highlight-color:transparent;
}
.rahmen-dia{
  display:block;width:100%;padding:0 7px 7px;
  background:var(--flaeche-licht);border-radius:var(--r-bogen);
  box-shadow:0 0 0 1px var(--line),var(--sh-1);
  transition:translate var(--t-mittel) var(--ease),box-shadow var(--t-mittel) var(--ease);
}
/* Grund des Fensters hell (Haarlinien-Ton): solange das Bild laedt, kein schwarzes Loch */
.fenster{display:block;aspect-ratio:3 / 2;overflow:hidden;border-radius:2px;background:var(--line)}
.fenster picture,.fenster img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
/* Oberer Rand des Rahmens: hier steht der KI-Hinweis (wie die Beschriftung
   auf einem Diarahmen). Oben, weil im Ring nur der untere Teil verdeckt wird. */
.rahmen-rand{
  display:block;min-height:calc(1.3em + .9rem);padding:.45rem 0;
  font-family:var(--schrift-mono);font-size:.875rem;line-height:1.3;color:var(--text);white-space:nowrap;
}
.rahmen-name{
  display:block;max-width:100%;padding:.1rem .4rem;border-radius:var(--r-chip);
  background:var(--flaeche-papier);
  font-family:var(--schrift-titel);font-weight:620;font-stretch:92%;font-size:.9375rem;line-height:1.25;
  text-wrap:balance;
}
/* gewaehltes Dia: die Platte der Buehne tritt hervor (Cyan privat, Magenta gewerbe) */
.rahmen[aria-current="true"] .rahmen-dia{
  box-shadow:var(--versatz) var(--versatz) 0 var(--platte),0 0 0 1px var(--line),var(--sh-2);
}
.rahmen[aria-current="true"] .rahmen-name{color:var(--accent-text)}
/* hinten im Ring verdeckt der Vordermann den Namen ohnehin: dort ausblenden */
.rund.ist-ring .rahmen.ist-hinten .rahmen-name{visibility:hidden}
.rahmen:focus-visible{outline:none}
.rahmen:focus-visible .rahmen-dia{outline:3px solid var(--fokus);outline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .rahmen:hover .rahmen-dia{translate:0 -4px}
}

/* Ring (ab 48rem, JS setzt ist-ring + Masse) */
.rund.ist-ring{height:var(--h,24rem);touch-action:pan-y;-webkit-user-select:none;user-select:none;cursor:grab}
.rund.ist-ring.zieht{cursor:grabbing}
.rund.ist-ring .rahmen{
  position:absolute;left:0;top:0;width:var(--dia,150px);
  transform:translate(var(--x,0px),var(--y,0px)) scale(var(--s,1));transform-origin:50% 50%;
  z-index:var(--z,1);
}
.rund.ist-ring .fenster img{opacity:var(--o,1)}
.rund.ist-ring .teller{
  display:block;position:absolute;left:var(--tx);top:var(--ty);width:var(--tw);height:var(--th);
  border:1px solid var(--line-2);border-radius:50%;pointer-events:none;
}
/* zweite Platte des Tellers, verrutscht (Fehlregister) */
.rund.ist-ring .teller::after{
  content:"";position:absolute;inset:-1px;border-radius:50%;translate:5px 4px;
  border:1px solid color-mix(in oklch, var(--platte) 55%, transparent);
}
/* Nabe = Passerkreuz in beiden Platten */
.rund.ist-ring .nabe{
  display:block;position:absolute;left:var(--nx);top:var(--ny);width:40px;height:40px;margin:-20px 0 0 -20px;
  z-index:5;pointer-events:none;
}
.rund.ist-ring .nabe::before,.rund.ist-ring .nabe::after{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(circle,transparent 9px,currentColor 9.5px 11px,transparent 11.5px),
    linear-gradient(currentColor,currentColor) 50% 0 / 1.5px 100% no-repeat,
    linear-gradient(currentColor,currentColor) 0 50% / 100% 1.5px no-repeat;
}
.rund.ist-ring .nabe::before{color:var(--platte);translate:2px 2px}
.rund.ist-ring .nabe::after{color:var(--haar)}

/* Reihe (unter 48rem): waagerechte Snap-Reihe, randlos bis an den Schirm */
.rund.ist-reihe{
  display:flex;gap:.9rem;overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;scroll-padding-inline:var(--gut);
  margin-inline:calc(var(--gut) * -1);padding:.5rem var(--gut) calc(var(--versatz) + .6rem);
  scrollbar-width:thin;scrollbar-color:var(--line-2) transparent;
}
.rund.ist-reihe .rahmen{flex:0 0 8.75rem;scroll-snap-align:start}

/* Steuerung */
.rund-steuer{display:flex;align-items:center;justify-content:center;gap:.9rem;margin-top:.5rem}
.rund-knopf{
  display:grid;place-items:center;width:48px;height:48px;padding:0;
  border:2px solid var(--border-feld);border-radius:var(--r-knopf);
  background:var(--flaeche-licht);color:var(--text);cursor:pointer;
  transition:translate var(--t-kurz) var(--ease),background-color var(--t-kurz) var(--ease);
}
@media (hover:hover) and (pointer:fine){
  .rund-knopf:hover{background-color:var(--wash);translate:0 -2px}
}
.rund-knopf:active{scale:.97}
.rund-zaehler{margin:0;min-width:6.5rem;text-align:center;color:var(--muted)}

/* Zweiter axe-Lauf ohne Deko */
.ohne-deko .rund .teller::after,.ohne-deko .rund .nabe,.ohne-deko .magazin .dia-bild::before{display:none}

/* TEIL 2 (Altbestand Lichttisch-Filmstreifen, v3) zurueckgebaut: fix2, 25.09.2026 -
   seit P13 bindet keine oeffentliche Route includes/lichttisch.php mehr ein.
   Sicherung: _backups-vor-aenderung-2026-09-25-fix2. */

/* ##############################################################
   NACHBESSERUNG 25.09.2026 (Design-Jury Befunde 5, 10; QA Gewicht)
   ############################################################## */
/* Befund 5: ab 64rem steht der Kopf ueber beiden Spalten, Ring und Leinwand
   beginnen auf derselben Hoehe - Steuerung und Leinwandbild passen bei
   1440x900 in denselben Bildschirm, ein Klick auf „Weiter“ wechselt das Bild
   im Blick. Leinwandbild 16:9 statt 16:10. */
@media (min-width:64rem){
  .magazin-sektion.is-an > .wrap{grid-template-areas:"kopf kopf" "ring lein" "fuss fuss";grid-template-rows:auto auto auto}
  .magazin-sektion.is-an .rund-wrap{align-self:start}
  .magazin-sektion .magazin-kopf{max-width:46rem}
  .magazin.is-an .dia-bogen .bogen-bild img{aspect-ratio:16 / 9}
  /* der Teller als Magazin lesbar: kraeftigerer Strich */
  .rund.ist-ring .teller{border-width:2px}
}
/* Befund 10: der KI-Hinweis auf dem Rahmen bleibt trotz Ring-Skalierung
   (--s 0,76-1) wirksam immer >= 14 px (Plan 6, Hausregel KI-Hinweis). */
.rund.ist-ring .rahmen-rand{font-size:calc(14px / var(--s, 1))}
/* fix2 (QA/Web-Review): der hochgerechnete Hinweis darf umbrechen statt aus
   dem Rahmen zu ragen (1024: 2 px, hinteres Dia 18 px Schrift: 10 px), und die
   Namen der seitlichen Dias bleiben wirksam >= 14 px (Gewerbe: 13,8 px). */
.rund.ist-ring .rahmen-rand{white-space:normal;text-wrap:balance;overflow-wrap:anywhere}
.rund.ist-ring .rahmen-name{font-size:max(.9375rem, calc(14px / var(--s, 1)))}
.rund.ist-ring .rahmen{width:calc(var(--dia, 150px) + 12px)}
/* QA Gewicht: das Leinwandbild der nicht gewaehlten Dias wird nicht geladen
   (display:none an <picture> -> loading=lazy laedt erst beim Umschalten).
   Der Rahmen behaelt sein Seitenverhaeltnis, die Leinwand springt nicht. */
.magazin.is-an .dia:not(.ist-aktiv) .dia-bogen .bogen-bild{aspect-ratio:16 / 10;background:var(--line)}
@media (min-width:64rem){
  .magazin.is-an .dia:not(.ist-aktiv) .dia-bogen .bogen-bild{aspect-ratio:16 / 9}
}
.magazin.is-an .dia:not(.ist-aktiv) .dia-bogen .bogen-bild picture{display:none}
/* Vor dem Start von magazin.js (html.js setzt js-an.js im Kopf) laedt der
   Browser lazy-Bilder schon ~2500 px vor dem Blick - die Leinwandbilder der
   Dias 2-6 kamen so trotzdem (gemessen 25.09.: 5 Bilder, ~75 KB). Mit JS
   bleibt darum nur das erste Leinwandbild im Dokument sichtbar. Ohne JS
   (keine .js-Klasse) steht die Liste mit allen Bildern wie bisher. */
.js .magazin:not(.is-an) .dia:not(:first-child) .dia-bogen .bogen-bild{aspect-ratio:16 / 10;background:var(--line)}
.js .magazin:not(.is-an) .dia:not(:first-child) .dia-bogen .bogen-bild picture{display:none}

/* ##############################################################
   KI-SAMMELHINWEIS AM RING (26.09.2026, beide Textversionen)
   Statt "KI-Symbolbild" auf jedem kleinen Dia steht im Ring EIN Hinweis
   ueber der Buehne als Legende; auf dem Rahmen der KI-Dias nur die Marke
   „KI“ (gleiche Stelle und Groesse wie vorher der Hinweis, >= 14 px), per
   aria-describedby mit dem Hinweis verbunden (magazin.js). Zeichen davor =
   kleiner Diarahmen mit versetzter Platte (Material der Dias).
   Die Leinwand behaelt ihren Hinweis, die mobile Reihe die Einzelhinweise.
   ############################################################## */
.rund-ki{
  margin:0 auto .5rem;max-width:30rem;text-align:center;text-wrap:balance;
  font-family:var(--schrift-mono);font-size:.9375rem;line-height:1.45;color:var(--text);
}
.rund-ki::before{
  content:"";display:inline-block;width:.85em;height:.65em;margin-right:.55em;vertical-align:-.02em;
  border:1.5px solid var(--text);border-radius:2px;box-shadow:2px 2px 0 var(--platte);
}
.rund-ki[hidden]{display:none}
.ohne-deko .rund-ki::before{box-shadow:none}