/* =====================================================================
   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;
  --rot:         #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%;
}

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(--rot);  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;
  display: flex; align-items: center; gap: .8rem;
  padding: .55rem .9rem; 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; }

.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; }

.buehne {
  display: flex; align-items: center; justify-content: center;
  padding: 1.2rem .6rem 5.5rem; min-height: calc(100vh - 56px);
  perspective: 2800px;              /* Tiefe: laesst das Blatt wirklich kippen */
  perspective-origin: 50% 42%;
}
.doppelseite {
  display: flex; position: relative;
  transform-style: preserve-3d;
  box-shadow: var(--schatten-gross);
  background: var(--papier);
  border-radius: 3px;
}
.blatt { position: relative; background: var(--papier); line-height: 0; }
.blatt canvas { display: block; max-width: 100%; height: auto; }

/* 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;
  background: var(--papier); 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; }
.flaeche.link       { background: rgba(0,143,196,0); transition: background .15s; border-radius: 3px; z-index: 2; }
.flaeche.link:hover { background: rgba(0,143,196,.18); outline: 2px solid var(--blau); }

/* Antippen eines Artikels öffnet ihn im Lesemodus */
.flaeche.artikel {
  z-index: 1; border-radius: 5px;
  background: rgba(0,143,196,0); transition: background .16s;
}
.flaeche.artikel:hover { background: rgba(0,143,196,.13); outline: 2px solid rgba(0,143,196,.55); }
.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);
}
.flaeche.artikel: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;
  border: 2px dashed rgba(0,143,196,.55);
  background: rgba(0,143,196,.06);
  transition: background .18s, border-color .18s;
  display: flex; align-items: flex-start; justify-content: flex-start;
}
.videofeld:hover { background: rgba(0,143,196,.16); border-color: var(--blau); }
.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;
}

/* ---------------- 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); }
.lesetext .zitat {
  font-size: 1.35em; line-height: 1.35; font-weight: 700; font-style: normal;
  color: var(--rot); border: 0; border-top: 3px solid var(--rot);
  border-bottom: 3px solid var(--rot); padding: 1rem 0; margin: 1.9rem 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); }

/* 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:hover { background: rgba(227,6,19,.10); outline: 2px solid rgba(227,6,19,.5); }
.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);
}
.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;
}
.grossansicht .blatt { box-shadow: 0 10px 40px rgba(0,0,0,.5); }

/* ---------------- 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);
}

/* ---------------- 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; }
}