/* =====================================================================
   Der erfolgreiche Weg - Magazin-Leser
   Farben: Hauptfarbe #008fc4 (wie im Startbrief genannt).
   Alle Farben stehen hier oben - Aendern an einer Stelle genuegt.
   ===================================================================== */

/* Die Hausfarben stammen nicht aus einer Vorgabe, sondern aus der PDF selbst:
   Rot #e30613 ist die Farbe der Kopf- und Fussleiste und der Schlagzeilen,
   #ffe9c0 die Flaeche der Infokaesten. So sieht der Lesemodus aus wie das Heft. */
:root {
  --rot:         #e30613;
  --rot-dunkel:  #b40410;
  --rot-hell:    #fdeaec;
  --creme:       #ffe9c0;
  --creme-rand:  #f4d69b;

  --blau:        #e30613;   /* Bedienelemente in der Hausfarbe */
  --blau-dunkel: #b40410;
  --blau-hell:   #fdeaec;
  --tinte:       #1b1f23;
  --grau:        #5b6670;
  --grau-hell:   #eceef0;
  --linie:       #d7dbdf;
  --papier:      #ffffff;
  --hintergrund: #f4f6f8;
  --gruen:       #2e8b57;
  --gelb:        #c9860a;
  /* Hier stand noch einmal --rot mit einem anderen Wert (#b3261e) und hat
     das Heft-Rot von oben ueberschrieben. Deshalb war das Rot im Lesemodus
     stumpfer als im gedruckten Heft. Fuer Fehlermeldungen gibt es jetzt
     eine eigene Farbe. */
  --warnrot:     #b3261e;

  --schrift: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --radius: 10px;
  --schatten: 0 2px 10px rgba(0,0,0,.10);
  --schatten-gross: 0 8px 34px rgba(0,0,0,.20);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--schrift);
  color: var(--tinte);
  background: var(--hintergrund);
  -webkit-text-size-adjust: 100%;
  /* iPad: kein graublauer Kasten beim Antippen, und die Seite darf am
     Rand nicht federn ("Gummiband"), sonst wackelt beim Wischen alles. */
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}

/* Beim Blaettern soll ueberhaupt nichts scrollen. Die Ansicht ist genau
   so hoch wie der Bildschirm - dann kann sich der weisse Hintergrund
   nicht mitbewegen. Im Lesemodus wird natuerlich weiter gescrollt. */
html.blaettert, body.blaettert { overflow: hidden; height: 100%; }

button, input, select { font-family: inherit; font-size: inherit; }

button {
  cursor: pointer; border: 0; border-radius: var(--radius);
  padding: .65rem 1.1rem; background: var(--blau); color: #fff;
  font-weight: 600; transition: background .15s ease, transform .05s ease;
}
button:hover  { background: var(--blau-dunkel); }
button:active { transform: translateY(1px); }
button:disabled { background: var(--linie); color: var(--grau); cursor: not-allowed; }

button.leise {
  background: transparent; color: var(--tinte);
  border: 1px solid var(--linie);
}
button.leise:hover { background: var(--grau-hell); }
button.leise.an { background: var(--blau); color: #fff; border-color: var(--blau); }

/* ---------------- Anmeldung ---------------- */
.anmelde-seite {
  display: flex; align-items: center; justify-content: center;
  min-height: 100%; padding: 1.5rem;
  background: linear-gradient(160deg, var(--blau) 0%, var(--blau-dunkel) 100%);
}
.anmelde-karte {
  background: var(--papier); border-radius: 16px; box-shadow: var(--schatten-gross);
  padding: 2.4rem 2.2rem; width: 100%; max-width: 430px;
}
.anmelde-karte h1 { margin: 0 0 .2rem; font-size: 1.5rem; line-height: 1.25; }
.anmelde-karte .unter { color: var(--grau); margin: 0 0 1.6rem; font-size: .95rem; }
.feld { margin-bottom: 1rem; }
.feld label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .92rem; }
.feld input {
  width: 100%; padding: .8rem .9rem; border: 1px solid var(--linie);
  border-radius: var(--radius); font-size: 1.05rem;
}
.feld input:focus { outline: 2px solid var(--blau); border-color: var(--blau); }
.anmelde-karte button { width: 100%; padding: .85rem; font-size: 1.05rem; }

.meldung { padding: .8rem .9rem; border-radius: var(--radius); margin-bottom: 1rem; font-size: .93rem; }
.meldung.fehler  { background: #fdecea; color: var(--warnrot); border: 1px solid #f5c6c2; }
.meldung.hinweis { background: #fff8e6; color: var(--gelb); border: 1px solid #f0dcb0; }
.meldung.ok      { background: #e9f6ee; color: var(--gruen); border: 1px solid #bfe3cd; }

.testhilfe {
  margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--linie);
  font-size: .86rem; color: var(--grau);
}
.testhilfe b { color: var(--tinte); }
.testhilfe code {
  background: var(--grau-hell); padding: .15rem .4rem; border-radius: 5px;
  font-size: .95em; cursor: pointer;
}
.testhilfe code:hover { background: var(--blau-hell); }

/* ---------------- Kopfzeile ---------------- */
.kopf {
  position: sticky; top: 0; z-index: 40;
  /* Umbrechen erlaubt: auf einem schmalen Bildschirm rutschten die letzten
     Knoepfe sonst aus dem Bild - man sah sie einfach nicht. */
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  /* Oben zusaetzlich so viel Platz, wie das Geraet fuer seine eigene
     Leiste braucht (iPad: Uhrzeit und Akku). Ohne das liegt unsere
     Kopfzeile darunter und es sieht aus wie ein heller Streifen. */
  padding: calc(.55rem + env(safe-area-inset-top, 0px)) .9rem .55rem;
  background: var(--papier);
  border-bottom: 1px solid var(--linie); box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.kopf .marke { font-weight: 700; font-size: 1rem; white-space: nowrap; }
.kopf .marke span { color: var(--blau); }
.kopf .ausgabe { color: var(--grau); font-size: .88rem; white-space: nowrap; }
.kopf .luecke { flex: 1; }
.kopf button { padding: .5rem .85rem; font-size: .9rem; }

/* Die Fassung des Programms - klein, aber immer sichtbar. Bei „hat sich
   nichts geaendert" ist das die erste Frage: kommt die neue Fassung
   ueberhaupt auf dem Geraet an? */
.standmarke {
  background: var(--rot); color: #fff; font-weight: 700; font-size: .78rem;
  padding: .25rem .6rem; border-radius: 999px; white-space: nowrap;
}

.umschalter { display: flex; gap: .3rem; background: var(--grau-hell); padding: .22rem; border-radius: var(--radius); }
.umschalter button { background: transparent; color: var(--grau); padding: .45rem .95rem; font-size: .9rem; }
.umschalter button.an { background: var(--papier); color: var(--blau); box-shadow: var(--schatten); }

/* ---------------- Blaettern ---------------- */
#blaettern { display: none; }
#blaettern.an {
  display: block; overflow: hidden;
  /* Der Finger blaettert um - er soll nicht die Seite verschieben.
     'touch-action: none' nimmt dem Browser genau diese Eigenmaechtigkeit. */
  touch-action: none;
  -webkit-user-select: none; user-select: none;
}
/* Ist das Heft groesser gezogen, kommt man an den Rand nur heran, wenn man
   schieben darf. Dann uebernimmt wieder der Browser - der kann das besser
   als jedes selbstgebaute Schieben. Geblaettert wird erst wieder in
   Originalgroesse. */
#blaettern.an.gezoomt { touch-action: pan-x pan-y; overflow: auto; }
#blaettern.an.gezoomt .buehne {
  align-items: flex-start; justify-content: flex-start;
  height: auto; min-height: calc(100dvh - var(--kopfhoehe, 56px));
  width: max-content; min-width: 100%;
}
/* Ohne das bliebe die Seite auf Fensterbreite begrenzt - dann liesse sie
   sich gar nicht groesser ziehen, egal wie weit man die Finger spreizt. */
#blaettern.an.gezoomt .blatt canvas { max-width: none; }

.buehne {
  display: flex; align-items: center; justify-content: center;
  padding: 1rem .6rem 5rem; box-sizing: border-box;
  /* Die Hoehe der Kopfleiste wird gemessen, nicht geraten - sonst bleiben
     ein paar Pixel uebrig und das iPad faengt an zu federn. */
  height: calc(100vh - var(--kopfhoehe, 56px));
  height: calc(100dvh - var(--kopfhoehe, 56px));   /* iPad: rechnet die Leisten mit */
  perspective: 2800px;              /* Tiefe: laesst das Blatt wirklich kippen */
  perspective-origin: 50% 42%;
}
/* Wichtig fuer Safari auf dem iPad:

   Diese Flaeche war dauerhaft eine 3D-Ebene ("preserve-3d") und trug
   gleichzeitig den grossen Schatten. Safari rechnet Schatten auf 3D-Ebenen
   anders als andere Browser und legt dabei einen hellen Schleier ueber die
   Kante - auf der randlos roten Titelseite faellt das oben sofort auf.

   Jetzt ist die Flaeche im Ruhezustand ganz normal und flach. Der
   Schatten haengt nicht mehr daran, sondern am Blatt selbst.

   Zweiter Anlauf am 17.08.2026: Sie wurde beim Umblaettern kurzzeitig zur
   3D-Ebene und danach wieder flach. Genau dieses Hin und Her hat Safari
   jedes Mal veranlasst, die ganze Buehne neu aufzubauen - beim langsamen
   Wischen sah man eine Seite deutlich aufblitzen.

   Gebraucht wurde das nie: Die Tiefe kommt von 'perspective' weiter oben,
   und die zwei Seiten des umschlagenden Blattes bringen ihr eigenes
   'preserve-3d' mit (siehe .flipblatt). Die Buehne bleibt deshalb
   dauerhaft flach - nichts wird mehr umgeschaltet, nichts blitzt. */
.doppelseite {
  display: flex; position: relative;
  transform-style: flat;
  transform-origin: 50% 50%;
  background: transparent;
}

.blatt {
  /* Kein weisser Untergrund mehr.

     Die gezeichnete Seite ist um Bruchteile eines Punktes kleiner als
     ihr Rahmen - beim Runden geht das nicht anders. Durch diesen Spalt
     schaute das Weiss des Rahmens hervor: oben ein heller Streifen ueber
     der randlos roten Anzeige. Alexander am 18.08.2026: "der Hintergrund
     von der Werbung ohne Schatten, transparent."

     Ist der Rahmen durchsichtig, kann nichts mehr hervorschauen. Eine
     Seite, die noch nicht gezeichnet ist, bekommt ihr Weiss weiterhin
     ueber .blatt.leer. */
  position: relative; background: transparent; line-height: 0;
  /* Kein Schlagschatten mehr - nirgends.

     Erst war er ueberall, dann nur noch auf Geraeten ohne Maus. Auf dem
     iPad blieb er trotzdem sichtbar: ein iPad meldet sich haeufig als
     Rechner ("Website fuer Desktop"), dann greift so eine Regel nicht.
     Alexander hat es viermal gemeldet.

     Der Schatten war Zierde. Ein heller Saum um eine Kundenanzeige ist
     ein Fehler. Also weg - ohne Wenn und Aber. */
  box-shadow: none;
}
/* Der Platzhalter neben der Titelseite ist unsichtbar - er darf auch
   keinen Schatten werfen. */
.blatt.leer { box-shadow: none; background: var(--papier); }
.blatt canvas { display: block; max-width: 100%; height: auto; vertical-align: top; }

/* Bundsteg: der leichte Schatten in der Heftmitte, wie bei gebundenem Papier */
.doppelseite::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: 50%;
  width: 34px; margin-left: -17px; pointer-events: none; z-index: 3;
  background: linear-gradient(to right,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.13) 42%, rgba(0,0,0,.22) 50%,
      rgba(0,0,0,.13) 58%, rgba(0,0,0,0) 100%);
}
.doppelseite.einzeln::after { display: none; }

/* --- Das umschlagende Blatt --- */
.flipblatt {
  position: absolute; top: 0; z-index: 6;
  transform-style: preserve-3d;
  will-change: transform;
}
.flipblatt .seite {
  position: absolute; inset: 0;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  /* Auch hier kein weisser Untergrund: waehrend des Umblaetterns wuerde
     sonst an der Kante derselbe helle Saum aufblitzen. */
  background: transparent; overflow: hidden;
  box-shadow: 0 0 22px rgba(0,0,0,.28);
}
.flipblatt .seite.hinten { transform: rotateY(180deg); }
.flipblatt .seite canvas { display: block; }

/* Schattierung, die ueber das kippende Blatt wandert - das macht die Rundung */
.flipblatt .schattierung {
  position: absolute; inset: 0; pointer-events: none;
  transition: opacity .18s linear;
}
.flipblatt .seite.vorn  .schattierung { background: linear-gradient(to left,  rgba(0,0,0,.30), rgba(0,0,0,0) 55%); }
.flipblatt .seite.hinten .schattierung { background: linear-gradient(to right, rgba(0,0,0,.34), rgba(0,0,0,0) 55%); }

/* Der Schatten, den das Blatt auf die Seite darunter wirft */
.wurfschatten {
  position: absolute; top: 0; bottom: 0; z-index: 5; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,.30), rgba(0,0,0,0));
  transition: opacity .25s linear;
}

/* Klickflaechen und Video-Fenster liegen genau auf der Seite */
.flaeche { position: absolute; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.flaeche:focus, .flaeche:focus-visible { outline: none; }
.flaeche.link       { background: transparent; transition: background .15s; border-radius: 3px; z-index: 2; }

/* Antippen eines Artikels öffnet ihn im Lesemodus */
.flaeche.artikel {
  z-index: 1; border-radius: 5px;
  background: transparent; transition: background .16s;
}
.flaeche.artikel .marke {
  position: absolute; left: 8px; top: 8px; opacity: 0; transition: opacity .16s;
  background: var(--blau); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .22rem .6rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); font-family: var(--schrift);
}

/* Die Seite soll aussehen wie im gedruckten Heft.

   Frueher waren alle anklickbaren Stellen blass rot unterlegt, damit man
   sieht, dass da etwas geht. Am Bildschirm sah das aus wie ein Fehler im
   Layout - Frau Knell am 17.08.2026: "Verlinkte Textfelder, Textfelder
   ueber einem Bild und gruppierte Objekte sollen ihren transparenten
   Hintergrund behalten. Keine farbliche Hinterlegung."

   Geblieben ist: der Mauszeiger wird zur Hand, beim Darueberfahren
   erscheint ein kleines Schild mit dem Ziel, und im Moment des Tippens
   blitzt es kurz auf. Nichts davon faerbt die Seite dauerhaft ein. */
@media (hover: hover) and (pointer: fine) {
  .flaeche.link:hover { box-shadow: inset 0 -2px 0 rgba(227,6,19,.45); }
  .flaeche.artikel:hover .marke { opacity: 1; }
}

/* ---------------- Anklickbares Inhaltsverzeichnis ---------------- */
.flaeche.inhalt {
  z-index: 4; border-radius: 4px;
  background: transparent;
  transition: background .15s, box-shadow .15s;
}
.flaeche.inhalt:active {
  background: rgba(227,6,19,.17);
  box-shadow: inset 0 -2px 0 var(--rot);
}
@media (hover: hover) and (pointer: fine) {
  .flaeche.inhalt:hover { box-shadow: inset 0 -2px 0 rgba(227,6,19,.45); }
}
.flaeche.inhalt.hinweis { border-radius: 999px; }
.flaeche.inhalt .marke {
  position: absolute; left: 50%; bottom: 100%; transform: translate(-50%, -4px);
  opacity: 0; pointer-events: none; transition: opacity .15s;
  background: var(--rot); color: #fff; font-size: .72rem; font-weight: 700;
  padding: .2rem .55rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); font-family: var(--schrift);
}
@media (hover: hover) and (pointer: fine) {
  .flaeche.inhalt:hover .marke { opacity: 1; }
}

.videofeld { z-index: 3; }

/* Video-Klickflaeche: liegt genau auf dem Bereich, den die Redaktion in der
   PDF verlinkt hat. Sie bleibt durchsichtig, damit sie den Text darunter
   nicht verdeckt - nur ein kleiner Knopf zeigt an, dass es ein Video gibt. */
.videofeld {
  position: absolute; cursor: pointer; border-radius: 4px;
  background: transparent;
  transition: background .18s;
  display: flex; align-items: flex-start; justify-content: flex-start;
  -webkit-tap-highlight-color: transparent;
}
/* Frueher lag hier ein blau gestrichelter Rahmen. Auf dem Bildschirm sah
   das aus, als waere das Foto kaputt umrandet. Der Abspielknopf in der Ecke
   sagt ohnehin deutlich genug, dass ein Video dahinter liegt. */
@media (hover: hover) and (pointer: fine) {
  .videofeld:hover { box-shadow: inset 0 0 0 2px rgba(227,6,19,.35); }
}
.videoknopf {
  display: flex; align-items: center; gap: .45rem; margin: 6px;
  background: rgba(17,17,17,.86); color: #fff; border-radius: 999px;
  padding: .3rem .7rem .3rem .35rem; font-size: .78rem; font-weight: 700;
  box-shadow: 0 2px 10px rgba(0,0,0,.4); white-space: nowrap;
}
.videoknopf svg { width: 26px; height: 19px; flex: none; }

/* Abspielfenster ueber der Seite */
.videofenster {
  position: fixed; inset: 0; z-index: 200; display: flex;
  align-items: center; justify-content: center; padding: 2rem;
  background: rgba(0,0,0,.82);
}
.videofenster .rahmen { width: min(1000px, 92vw); }
.videofenster .kopfzeile {
  display: flex; align-items: center; gap: .8rem; color: #fff;
  margin-bottom: .6rem; font-size: .9rem;
}
.videofenster .kopfzeile .luecke { flex: 1; }
.videofenster iframe {
  width: 100%; aspect-ratio: 16/9; border: 0; border-radius: 10px;
  background: #000; display: block;
}
.videofenster button { background: #fff; color: #111; }
.videofenster button:hover { background: #e3e6e9; }

/* Steuerleiste unten */
.steuerung {
  position: fixed; left: 50%; bottom: 1rem; transform: translateX(-50%);
  display: flex; align-items: center; gap: .5rem; z-index: 50;
  background: var(--papier); border: 1px solid var(--linie);
  border-radius: 999px; padding: .4rem .55rem; box-shadow: var(--schatten-gross);
}
.steuerung button { border-radius: 999px; padding: .5rem .8rem; }
.steuerung .seitenzahl {
  min-width: 108px; text-align: center; font-size: .9rem; color: var(--grau); font-weight: 600;
}

/* ---------------- Ausgaben: alle Hefte nebeneinander ----------------
   Wie die Auslage am Kiosk: man sieht die Bilder, tippt eines an und liest.
   Die Bilder werden aus der gezeichneten Seite ausgeschnitten - so stimmen
   Ausschnitt und Farben genau wie im Heft. */
#uebersicht { display: none; }
#uebersicht.an { display: block; }

.uebersicht-kopf { padding: 1.2rem 1.2rem .2rem; max-width: 1400px; margin: 0 auto; }
.uebersicht-kopf h2 { margin: 0 0 .2rem; font-size: 1.25rem; }
.uebersicht-kopf p { margin: 0 0 .8rem; color: var(--grau); font-size: .88rem; }

/* Die Ausgaben nebeneinander - wie die Hefte am Kiosk.
   Ein Tipp auf ein Titelbild oeffnet diese Ausgabe. */
.heftfeld {
  display: grid; gap: 1.2rem; padding: 0 1.2rem 1rem;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  max-width: 1400px; margin: 0 auto;
}
.heft {
  cursor: pointer; text-align: center;
  transition: transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.heft:active { transform: translateY(1px); }
@media (hover: hover) and (pointer: fine) {
  .heft:hover { transform: translateY(-4px); }
  .heft:hover img { box-shadow: 0 10px 30px rgba(0,0,0,.28); }
}
.heft img, .heft .platzhalter {
  width: 100%; aspect-ratio: 595/842; object-fit: cover; display: block;
  background: var(--grau-hell); border-radius: 4px;
  box-shadow: var(--schatten-gross); transition: box-shadow .12s ease;
}
.heft .platzhalter {
  display: flex; align-items: center; justify-content: center;
  color: var(--grau); font-size: .85rem; text-align: center; padding: 1rem;
}
.heft .name { margin-top: .55rem; font-weight: 700; font-size: .95rem; }
.heft .zusatz { font-size: .78rem; color: var(--grau); }
.heft.aktuell img { outline: 3px solid var(--rot); outline-offset: 3px; }
.heft.aktuell .name::after {
  content: ' · geöffnet'; color: var(--rot); font-weight: 400; font-size: .8rem;
}

@media (hover: hover) and (pointer: fine) {
}

/* ---------------- Lesemodus ---------------- */
#lesen { display: none; }
#lesen.an { display: block; }

/* Der Lesetext bekommt die ganze Seite. Die Artikelliste faehrt nur auf
   Wunsch von links ein - beim Lesen stoert sie. */
.lese-huelle { display: block; max-width: none; margin: 0; padding: 1rem; }

.listenschatten {
  position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 55;
  opacity: 0; pointer-events: none; transition: opacity .22s;
}
.listenschatten.an { opacity: 1; pointer-events: auto; }

.artikelliste {
  position: fixed; left: 0; top: 0; bottom: 0; width: 330px; z-index: 60;
  background: var(--papier); border-right: 1px solid var(--linie);
  overflow-y: auto; box-shadow: 6px 0 26px rgba(0,0,0,.18);
  transform: translateX(-101%); transition: transform .25s ease;
  padding-top: 0;
}
.artikelliste.offen { transform: none; }
.artikelliste h3 { position: sticky; top: 0; background: var(--papier); z-index: 2; }
.artikelliste h3 { margin: 0; padding: .9rem 1rem; font-size: .82rem; text-transform: uppercase;
  letter-spacing: .07em; color: var(--grau); border-bottom: 1px solid var(--linie); }
.artikelliste a {
  display: block; padding: .7rem 1rem; border-bottom: 1px solid var(--grau-hell);
  color: var(--tinte); text-decoration: none; font-size: .93rem; line-height: 1.35;
}
.artikelliste a:hover { background: var(--blau-hell); }
.artikelliste a.an { background: var(--blau-hell); border-left: 4px solid var(--blau); font-weight: 600; }
.artikelliste .seitezahl { display: block; font-size: .76rem; color: var(--grau); margin-top: .18rem; }

/* ---- Lesetext im Heft-Look ---- */
.lesetext {
  flex: 1; background: var(--papier); border: 1px solid var(--linie);
  border-radius: var(--radius); padding: 0 0 3rem; min-height: 60vh;
  overflow: hidden;
  scroll-margin-top: 74px;      /* sonst rutscht die rote Leiste unter die Kopfzeile */
}
/* Rote Kopfleiste wie oben auf jeder Heftseite */
.lesetext .heftleiste {
  background: var(--rot); color: #fff; padding: .5rem 1.4rem;
  font-size: .82rem; font-weight: 700; letter-spacing: .02em;
  display: flex; gap: .8rem; align-items: baseline;
}
.lesetext .heftleiste .klein { font-weight: 400; opacity: .85; }
.lesetext .inhalt { padding: 2.4rem 3.2rem 0; max-width: 54rem; margin: 0 auto; }

.lesetext h1 {
  font-size: 2.7rem; line-height: 1.06; margin: 0 0 .9rem;
  font-weight: 800; letter-spacing: -.015em;
}
.lesetext h1 .rot { color: var(--rot); }
.lesetext .vorspann {
  font-size: 1.22rem; line-height: 1.42; font-weight: 400;
  color: #3d4348; margin: 0 0 1.1rem;
}
.lesetext .quelle {
  color: var(--grau); font-size: .8rem; margin: 0 0 1.8rem;
  text-transform: uppercase; letter-spacing: .06em;
}
.lesetext p { line-height: 1.72; margin: 0 0 1.15rem; }
.lesetext h2 {
  color: var(--rot); font-size: 1.18rem; font-weight: 800;
  margin: 2rem 0 .7rem; line-height: 1.25;
}
/* Infokasten wie im Heft: cremefarbene Flaeche, roter Text */
.lesetext .kasten {
  background: var(--creme); border: 1px solid var(--creme-rand);
  color: var(--rot-dunkel);
  padding: 1.2rem 1.4rem; border-radius: 6px; margin: 1.8rem 0;
}
.lesetext .kasten p { margin-bottom: .7rem; }
.lesetext .kasten p:last-child { margin-bottom: 0; }
.lesetext .kasten a { color: var(--rot-dunkel); }
/* Zitat: im Heft grosse rote Schrift.

   So gewuenscht von Frau Knell am 17.08.2026: ein zusammenhaengender
   Absatz, kursiv, groesser als der Fliesstext, etwas eingerueckt, und
   der Zeilenabstand wie im Fliesstext. Die dicken Linien oben und unten
   sind weg - sie haben den Lesefluss zerschnitten. */
.lesetext .zitat {
  font-size: 1.25em; line-height: 1.5; font-weight: 400; font-style: italic;
  color: var(--rot); border: 0; border-left: 3px solid var(--rot);
  padding: .2rem 0 .2rem 1.2rem; margin: 1.6rem 0 1.6rem .8rem;
}

/* Fettgedrucktes bleibt fett - mit seinen Zeilenumbruechen. */
.lesetext .fett { font-weight: 700; }

/* Aufzaehlungen stehen untereinander, nicht als Fliesstext. */
.lesetext .aufzaehlung { margin: 1.1rem 0; padding-left: 1.4rem; }
.lesetext .aufzaehlung li { margin: .35rem 0; }
/* Bilder aus der Seite */
.lesetext figure { margin: 1.8rem 0; text-align: center; }
.lesetext figure img {
  max-width: 100%; max-height: 58vh; width: auto; height: auto;
  display: inline-block; border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,.13);
}
.lesetext figcaption { font-size: .82rem; color: var(--grau); margin-top: .45rem; }
.lesetext .video-im-text { margin: 1.8rem 0; }
.lesetext .video-im-text iframe {
  width: 100%; aspect-ratio: 16/9; border: 0;
  border-radius: 0 0 var(--radius) var(--radius); display: block; background: #000;
}
.lesetext .videoleiste {
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  background: #21262b; color: #e6e9ec; padding: .5rem .7rem;
  border-radius: var(--radius) var(--radius) 0 0;
}
.lesetext .videoleiste button {
  background: #3a4249; color: #fff; padding: .38rem .8rem; font-size: .85rem;
}
.lesetext .videoleiste button:hover { background: var(--rot); }
.lesetext .videoleiste .quelleart { color: #9aa4ad; }

/* Vorlese-Leiste */
.hoerleiste {
  display: flex; align-items: center; gap: .7rem; flex-wrap: wrap;
  background: var(--grau-hell); border-radius: var(--radius);
  padding: .7rem .9rem; margin-bottom: 1.8rem;
}
.hoerleiste .quelleart { font-size: .82rem; color: var(--grau); flex-basis: 100%; }
.hoerleiste.ohneton { background: transparent; border: 1px dashed var(--linie); }
/* Fortschrittsleiste in unserer eigenen Form - der eingebaute Abspieler
   des Browsers sieht auf jedem Geraet anders aus. */
.hoerleiste .hoerbalken {
  flex: 1; min-width: 120px; height: 8px; border-radius: 99px;
  background: #d8dcdf; cursor: pointer; overflow: hidden;
}
.hoerleiste .hoerbalken.ohne { opacity: .4; cursor: default; }
.hoerleiste .hoerbalken i { display: block; height: 100%; width: 0; background: var(--rot); }
.hoerleiste .hoerzeit {
  font-size: .82rem; color: var(--grau); font-variant-numeric: tabular-nums;
  min-width: 5.5rem; text-align: right;
}
.hoerleiste audio { display: none; }

/* Einstellungen im Lesemodus */
.leseeinstellungen {
  display: none; gap: 1.4rem; flex-wrap: wrap; align-items: center;
  background: var(--papier); border-bottom: 1px solid var(--linie); padding: .8rem 1.2rem;
}
.leseeinstellungen.an { display: flex; }
.leseeinstellungen .gruppe { display: flex; align-items: center; gap: .45rem; }
.leseeinstellungen .titel { font-size: .82rem; color: var(--grau); font-weight: 600; }

/* Lese-Farbschemata */
.lesetext.thema-hell   { background: #fff;    color: #1b1f23; }
.lesetext.thema-sepia  { background: #f7f0e2; color: #40372a; border-color: #e6dcc6; }
.lesetext.thema-dunkel { background: #21262b; color: #e6e9ec; border-color: #2f363d; }
.lesetext.thema-dunkel .quelle { color: #9aa4ad; }
.lesetext.thema-dunkel .kasten { background: #2b3238; border-left-color: var(--blau); }
.lesetext.thema-dunkel .zitat  { color: #7fd0ef; }

.lesetext.serif { font-family: Georgia, "Times New Roman", serif; }

/* Anzeigenflaeche: ein Tipp zeigt die Anzeige gross */
.flaeche.anzeige {
  z-index: 1; background: rgba(227,6,19,0); transition: background .16s;
}
.flaeche.anzeige .marke {
  position: absolute; left: 10px; top: 10px; opacity: 0; transition: opacity .16s;
  background: var(--rot); color: #fff; font-size: .74rem; font-weight: 700;
  padding: .24rem .65rem; border-radius: 999px; white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,.3); font-family: var(--schrift);
}
@media (hover: hover) and (pointer: fine) {
  .flaeche.anzeige:hover { outline: 2px solid rgba(227,6,19,.35); }
  .flaeche.anzeige:hover .marke { opacity: 1; }
}

/* Grossansicht einer Anzeige */
.grossansicht {
  position: fixed; inset: 0; z-index: 205; display: flex; flex-direction: column;
  background: #2b2f33;
}
.grossansicht .leiste {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--rot); color: #fff; padding: .55rem .9rem;
}
.grossansicht .leiste button.zurueck {
  background: #fff; color: var(--rot); font-weight: 700; font-size: 1rem; padding: .55rem 1.1rem;
}
.grossansicht .leiste .hinweis { font-size: .85rem; opacity: .92; }
.grossansicht .flaeche-gross {
  flex: 1; overflow: auto; display: flex; align-items: flex-start;
  justify-content: center; padding: 1rem;
}
/* Die Anzeige steht ohne Schatten da.

   Der Schlagschatten sollte sie vom dunklen Hintergrund abheben. Auf dem
   Bildschirm sah er aus wie ein grauer Rand um die Anzeige herum -
   Alexander am 18.08.2026: "der Hintergrund von der Werbung ohne
   Schatten, transparent". Die Anzeige gehoert dem Kunden; sie soll
   aussehen wie gedruckt und nicht wie ein Bild in einem Rahmen. */
.grossansicht .blatt { box-shadow: none; }

/* ---------------- Shop im Magazin ----------------
   Anzeigen und Seminarlinks oeffnen sich nicht in einem fremden Tab,
   sondern hier drin - mit einem Zurueck-Knopf, den man sieht. */
.aussenfenster {
  position: fixed; inset: 0; z-index: 210; display: flex; flex-direction: column;
  background: var(--papier);
}
.aussenfenster .leiste {
  display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
  background: var(--rot); color: #fff; padding: .55rem .9rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}
.aussenfenster .leiste button.zurueck {
  background: #fff; color: var(--rot); font-weight: 700; font-size: 1rem;
  padding: .55rem 1.1rem;
}
.aussenfenster .leiste button.zurueck:hover { background: #ffe3e5; }
.aussenfenster .leiste .adresse {
  font-size: .85rem; opacity: .92; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; flex: 1; min-width: 0;
}
.aussenfenster .leiste a.extern { color: #fff; font-size: .82rem; opacity: .9; }
.aussenfenster iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.aussenfenster .notfall {
  display: none; padding: 2rem; text-align: center; color: var(--grau);
}

/* ---------------- Vorschau-Balken der Redaktion ---------------- */
.vorschauleiste {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 120;
  background: var(--gelb); color: #241a00;
  padding: .6rem 1rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
  justify-content: center; font-size: .9rem; text-align: center;
  box-shadow: 0 -2px 12px rgba(0,0,0,.2);
}
.vorschauleiste button {
  background: #241a00; color: #fff; padding: .45rem .9rem; font-size: .88rem;
}
/* Die Steuerleiste des Lesers muss darueber rutschen, sonst liegt sie darunter. */
.mitvorschauleiste .steuerung { bottom: 4.6rem; }

/* ---------------- Ladeanzeige ---------------- */
.laden {
  position: fixed; inset: 0; background: rgba(255,255,255,.94); z-index: 100;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.1rem;
}
.laden.weg { display: none; }
.laden .ring {
  width: 46px; height: 46px; border: 4px solid var(--grau-hell);
  border-top-color: var(--blau); border-radius: 50%; animation: dreh .9s linear infinite;
}
@keyframes dreh { to { transform: rotate(360deg); } }
.laden .text { color: var(--grau); font-size: .95rem; }
.laden .balken { width: 260px; height: 6px; background: var(--grau-hell); border-radius: 99px; overflow: hidden; }
.laden .balken i { display: block; height: 100%; background: var(--blau); width: 0; transition: width .25s ease; }

/* ---------------- Handy und Tablet ---------------- */
@media (max-width: 900px) {
  .lese-huelle { flex-direction: column; padding: .7rem; }
  .artikelliste { width: 100%; flex: none; position: static; max-height: 300px; }
  .lesetext { padding: 1.6rem 1.3rem; }
  .lesetext h1 { font-size: 1.5rem; }
  .kopf .ausgabe { display: none; }
  .buehne { padding: .6rem .3rem 5rem; }
}

/* ---------------- Weiterlesen am Artikelende ----------------
   Zwei Felder mit Titelbild und Ueberschrift des Ziels. Vorher endete
   ein Artikel im Nichts - man musste zurueck in die Liste. */
.lesetext .weiterlesen {
  display: flex; gap: 1rem; flex-wrap: wrap;
  margin: 2.6rem 0 1rem; padding-top: 1.6rem;
  border-top: 1px solid var(--linie);
}
.lesetext .weiterlesen .nachbar {
  flex: 1 1 220px; display: flex; flex-direction: column; gap: .5rem;
  text-decoration: none; color: var(--tinte); cursor: pointer;
  background: var(--grau-hell); border-radius: 12px; padding: .9rem 1rem;
  transition: background .15s;
}
.lesetext .weiterlesen .nachbar:hover { background: var(--rot-hell); }
.lesetext .weiterlesen .nachbar.vor { text-align: right; }
.lesetext .weiterlesen .richtung {
  font-size: .8rem; font-weight: 700; color: var(--rot);
  text-transform: uppercase; letter-spacing: .04em;
}
.lesetext .weiterlesen .bildchen img {
  width: 100%; max-height: 130px; object-fit: cover;
  border-radius: 8px; display: block;
}
.lesetext .weiterlesen .wohin { font-weight: 700; line-height: 1.3; }

/* ---------------- Schriftgroesse am Handy ----------------
   Zwei schwebende Knoepfe im Lesemodus. Nur auf schmalen Bildschirmen -
   am PC stehen sie oben in der Leiste. */
.schriftschweber { display: none; }
@media (max-width: 900px) {
  #lesen.an .schriftschweber {
    display: flex; gap: .4rem; position: fixed; z-index: 60;
    right: calc(.8rem + env(safe-area-inset-right, 0px));
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
  }
  .schriftschweber button {
    width: 3rem; height: 3rem; border-radius: 50%; padding: 0;
    font-weight: 700; box-shadow: 0 4px 14px rgba(0,0,0,.28);
  }
}

/* ---------------- Bildquelle ----------------
   Steht im Heft winzig im oder am Bild. Hier erscheint sie erst beim
   Antippen - sonst stuende unter jedem Bild eine graue Zeile. */
.lesetext figure .bildquelle {
  display: none; font-size: .78rem; color: var(--grau);
  margin-top: .45rem; text-align: right; font-style: italic;
}
.lesetext figure.quelle-an .bildquelle { display: block; }

/* =====================================================================
   HANDY  (bis 560 Punkt Breite)

   Am 18.08.2026 gemessen: Auf einem iPhone belegte allein die Kopfzeile
   158 Punkt - fast ein Viertel des Bildschirms. Die Heftseite blieb
   294 Punkt breit, links und rechts standen leere Raender. Alexander:
   "am PC gut, am iPad gut, aber nicht auf dem iPhone. Es muss responsive
   zu allen Geraeten werden."

   Grundsatz hier: Die Heftseite bekommt den Platz. Alles andere wird
   kleiner - aber nicht so klein, dass man es mit dem Finger verfehlt.
   Knoepfe bleiben mindestens 40 Punkt hoch.
   ===================================================================== */
@media (max-width: 560px) {

  /* ---- Kopfzeile: aus drei Reihen wird eine schmale ---- */
  .kopf {
    gap: .35rem;
    padding: calc(.35rem + env(safe-area-inset-top, 0px)) .45rem .35rem;
  }
  .kopf .marke { font-size: .74rem; }
  .kopf .ausgabe { display: none; }          /* steht schon im Auswahlfeld */
  .kopf .luecke { display: none; }           /* kein Platz zum Auseinanderschieben */
  .kopf button { padding: .4rem .55rem; font-size: .75rem; border-radius: 8px; }
  .kopf select { max-width: 7.2rem; font-size: .72rem !important; padding: .28rem .3rem !important; }
  .umschalter { padding: .15rem; gap: .15rem; }
  .umschalter button { padding: .38rem .5rem; font-size: .75rem; }
  .standmarke { font-size: .64rem; padding: .15rem .38rem; }

  /* ---- Blaettern: die Seite bekommt die volle Breite ---- */
  .buehne { padding: .35rem .15rem 4.4rem; }

  /* ---- Steuerung unten: schmaler, aber gut zu treffen ---- */
  .steuerung {
    gap: .25rem; padding: .3rem .35rem;
    left: 50%; right: auto; transform: translateX(-50%);
    max-width: calc(100vw - .6rem);
  }
  .steuerung button { padding: .5rem .7rem; font-size: 1rem; min-width: 2.6rem; }
  .steuerung .seitenzahl { font-size: .82rem; }
  /* Anfang, Ende und die Lupe braucht am Handy niemand: gewischt wird
     mit dem Finger, vergroessert mit zwei Fingern. */
  #ersteSeite, #letzteSeite, #kleiner, #groesser { display: none; }
  /* Das Eingabefeld fuer die Seitenzahl wurde am Handy immer
     abgeschnitten ("Seit"). Geblaettert wird hier mit dem Finger oder
     den zwei Pfeilen - das Feld ist der Platz nicht wert. */
  #seitenSprung { display: none; }

  /* ---- Lesemodus ---- */
  .lese-huelle { padding: .4rem; gap: .5rem; }
  /* Auf dem Handy bleibt die Artikelliste eine Schublade, die ueber den
     Knopf "Artikel" aufgeht. Die Regel fuer Tablets macht daraus sonst
     einen fest stehenden Block - auf einem iPhone war das ein grosses
     graues Feld, in dem nichts stand. */
  .artikelliste {
    position: fixed; left: 0; top: 0; bottom: 0;
    width: min(330px, 88vw); max-height: none; flex: none;
    transform: translateX(-101%);
  }
  .artikelliste.offen { transform: none; }
  /* Die zwei schwebenden Knoepfe reichen - oben braucht es sie nicht noch
     einmal, dort ist der Platz knapper. */
  #schriftLeiste { display: none !important; }
  .lesetext { padding: 1.1rem .9rem; }
  .lesetext h1 { font-size: 1.35rem; line-height: 1.2; }
  .lesetext .weiterlesen { gap: .6rem; }
  .lesetext .weiterlesen .nachbar { flex: 1 1 100%; }

  /* ---- Anmeldung ---- */
  .anmelde-seite { padding: .8rem; }
  .anmelde-karte { padding: 1.6rem 1.2rem; border-radius: 14px; }
  .anmelde-karte h1 { font-size: 1.25rem; }

  /* ---- Ausgaben-Uebersicht ---- */
  .uebersicht-kopf { padding: .8rem .8rem 0; }
  .heftfeld { padding: .8rem; gap: .8rem; }

  /* ---- Grossansicht einer Anzeige ---- */
  .grossansicht .leiste { padding: .5rem .6rem; gap: .5rem; }
  .grossansicht .leiste .hinweis { display: none; }
  .grossansicht .flaeche-gross { padding: .3rem; }
}

/* Querformat auf dem Handy: da ist die Hoehe knapp. Kopfzeile und
   Steuerung ruecken zusammen, damit die Seite hoch genug bleibt. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .kopf { padding: .2rem .45rem; gap: .3rem; }
  .kopf button, .umschalter button { padding: .3rem .5rem; font-size: .78rem; }
  .buehne { padding: .2rem .15rem 3.4rem; }
  .steuerung { padding: .2rem .3rem; }
  .steuerung button { padding: .35rem .55rem; }
}

/* =====================================================================
   Kein Schlagschatten auf Geraeten mit Finger-Bedienung.

   Am 18.08.2026: "auf dem PC sind die Schatten nicht da, aber auf dem
   iPad." Safari auf iOS rechnet Schatten an einer Seite, die gleichzeitig
   bewegt und neu gezeichnet wird, anders als ein Rechner-Browser - es
   bleibt ein heller Saum stehen, besonders an randlos farbigen Anzeigen.

   Auf dem Papier-Eindruck kostet uns das wenig; ein falscher heller Rand
   um eine Kundenanzeige kostet mehr. Am PC bleibt der Schatten.
   ===================================================================== */
@media (hover: none) and (pointer: coarse) {
  .blatt,
  .flipblatt .seite,
  .grossansicht .blatt { box-shadow: none; }
  .wurfschatten { display: none; }
}