/* ==========================================================================
   FADN · MAGAZIN
   Das Magazin als blätterbares Buch, auf der Startseite über „Just Dropped".
   Kein Kasten, kein dunkler Rahmen: Das Buch steht direkt auf dem Papierton,
   die Bedienung ist eine dünne Zeile darunter.
   Die Seiten liegen als schlanke WebP unter assets/magazin/ (Manifest daneben),
   StPageFlip liegt lokal unter assets/js/vendor/. Die Seite lädt nichts von
   außen, damit der Rest des Shops sauber bleibt.
   ========================================================================== */

.mag {
  display: block;
  position: relative;
  z-index: 1;                /* damit das Wort über dem Abschnitt darüber liegt */
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(22px, 3vw, 40px) clamp(16px, 3vw, 40px) 0;
}

/* Die echte Überschrift steht nur für Suchmaschinen und Screenreader im
   Text. Sichtbar ist stattdessen das große Wort hinter dem Buch. */
.mag__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Der Leser
   Bühne, Bedienzeile und Miniaturen liegen zusammen in .mag__viewer, damit
   der Vollbildmodus die Bedienung mitnimmt statt sie abzuschneiden.
   ========================================================================== */
.mag__viewer { position: relative; }

/* Bühne mit Perspektive. Das Buch liegt leicht gekippt im Raum und zieht
   sich beim Hover gerade, weil sich flach besser blättern lässt. */
.mag__stage {
  position: relative;
  perspective: 2200px;
  perspective-origin: 50% 24%;
  display: grid;
  place-items: center;
  min-height: min(60vh, 660px);
  padding: clamp(30px, 4vw, 58px) clamp(48px, 8vw, 110px) clamp(34px, 4vw, 52px);
}

/* ---------- Der Titel als Bühnenbild ----------
   „MAGAZIN" in der Hausschrift, schräg hinter dem Buch. Es ragt bewusst nach
   oben in den Abschnitt darüber hinein, bleibt dabei aber vollständig lesbar.
   Genau dafür hat die Bühne kein overflow: hidden — nur im Vollbild wird
   geschnitten, dort ist der Platz begrenzt.
   Kontur statt Fläche, sonst kämpft das Wort mit dem Cover um die
   Aufmerksamkeit. */
.mag__word {
  position: absolute;
  /* Ragt über die Abschnittskante hinaus. Der Wert wirkt groß, weil in der
     Zeilenbox über den Versalien noch Schriftvorschub steckt.
     Die 20px nach links gleichen aus, dass das geschlossene Buch rechts der
     Mitte steht — optisch sitzt das Wort dadurch mittiger. */
  top: clamp(-100px, -5.5vw, -34px);
  left: calc(50% - 20px);
  z-index: 0;
  transform: translateX(-50%) rotate(-6.5deg);
  transform-origin: 50% 0;
  /* Header-Schrift. Space Mono ist dicktengleich, das „I" bekommt also
     genauso viel Platz wie das „M". Bei dieser Größe reißt das Wort dadurch
     auseinander, deshalb wird die Laufweite kräftig zusammengezogen. */
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: clamp(58px, 11.5vw, 164px);
  line-height: .82;
  letter-spacing: -.085em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 1.6px var(--ink);
  opacity: .5;
  pointer-events: none;
  user-select: none;
}
/* Browser ohne Konturschrift bekommen eine sehr helle Fläche */
@supports not (-webkit-text-stroke: 1px #000) {
  .mag__word { color: var(--ink); opacity: .1; -webkit-text-stroke: 0; }
}

/* kleines Mono-Label, liegt im selben Winkel auf dem Wort */
.mag__tag {
  position: absolute;
  top: clamp(118px, 14vw, 182px);
  left: clamp(10px, 3vw, 40px);
  z-index: 3;
  transform: rotate(-6.5deg);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--red);
  pointer-events: none;
  user-select: none;
}

.mag__float {
  position: relative;
  z-index: 2;                /* liegt über dem Wort im Hintergrund */
  transform-style: preserve-3d;
  transform: rotateX(13deg);
  transition: transform .8s cubic-bezier(.22, 1, .36, 1);
  animation: magHover 7s ease-in-out infinite;
}
.mag__viewer:hover .mag__float { transform: rotateX(0deg); animation-play-state: paused; }
.mag__viewer.is-flat .mag__float { transform: none; animation: none; }
@keyframes magHover {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -9px; }
}

/* Bodenschatten. Auf dem hellen Papier deutlich zurückhaltender als auf
   dunklem Grund, sonst sieht es nach Aufkleber aus. */
.mag__float::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 82%;
  height: 34px;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, rgba(11, 11, 11, .3), transparent 70%);
  filter: blur(9px);
  pointer-events: none;
}

.mag__book {
  position: relative;
  margin: 0 auto;
  filter: drop-shadow(0 14px 26px rgba(11, 11, 11, .22));
}
.mag__book img { user-select: none; }

/* Seitenstapel links und rechts, damit das Buch dick wirkt. Die Kanten
   verschwinden, wo kein Papier mehr dahinter liegt (Cover und Rückseite). */
.mag__book::before,
.mag__book::after {
  content: "";
  position: absolute;
  top: 3px;
  bottom: 3px;
  width: 7px;
  z-index: 0;
  background: repeating-linear-gradient(to right, #fdfdfd 0 1px, #cfccc5 1px 2px);
  box-shadow: 0 2px 6px rgba(11, 11, 11, .22);
}
.mag__book::before { left: -6px; border-radius: 3px 0 0 3px; }
.mag__book::after { right: -6px; border-radius: 0 3px 3px 0; }
.mag__book.no-left-edge::before { display: none; }
.mag__book.no-right-edge::after { display: none; }

/* ---------- Magazinseiten ---------- */
.flip-page { background: #fff; overflow: hidden; }
.flip-page img {
  width: 100%;
  height: 100%;
  object-fit: contain;   /* nie beschneiden, es ist ein Magazin */
  pointer-events: none;
  display: block;
}
/* Falz zur Buchmitte plus ein Hauch Papierglanz außen */
.flip-page::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.flip-page--left::after {
  background:
    linear-gradient(to right, rgba(255, 255, 255, .06), transparent 12%),
    linear-gradient(to right, transparent 88%, rgba(0, 0, 0, .15));
}
.flip-page--right::after {
  background:
    linear-gradient(to left, rgba(255, 255, 255, .06), transparent 12%),
    linear-gradient(to left, transparent 88%, rgba(0, 0, 0, .17));
}

/* ---------- Ladeanzeige ---------- */
.mag__loader {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  color: var(--ink);
  z-index: 6;
}
.mag__loader[hidden] { display: none; }
.mag__loader p { font-family: var(--font-ui); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.mag__loaderbar { width: 220px; height: 1px; margin: 16px auto 0; background: var(--line); overflow: hidden; }
.mag__loaderbar i { display: block; width: 0%; height: 100%; background: var(--red); transition: width .25s ease; }

/* ---------- Blätterflächen links und rechts ----------
   Große unsichtbare Zonen neben dem Buch, damit man einfach daneben klicken
   kann statt eine Ecke treffen zu müssen. */
.mag__side {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(44px, 8vw, 110px);
  z-index: 4;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  color: var(--muted);
  opacity: .45;
  cursor: pointer;
  transition: opacity .25s ease, color .25s ease;
}
.mag__side--prev { left: 0; }
.mag__side--next { right: 0; }
.mag__side:hover { opacity: 1; color: var(--red); }
.mag__side:disabled { opacity: .12; pointer-events: none; }
.mag__side svg { width: 28px; height: 28px; }

/* ==========================================================================
   Bedienzeile · eine Haarlinie mit Text darauf, kein Balken
   Die Linie selbst ist die Fortschrittsanzeige: grau als Spur, rot gefüllt.
   ========================================================================== */
.mag__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(6px, 1.2vw, 16px);
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  padding: 15px 4px 0;
  border-top: 1px solid var(--line);
}
.mag__bar[hidden] { display: none; }
.mag__progress {
  position: absolute;
  top: -1px;
  left: 0;
  height: 1px;
  width: 0%;
  background: var(--red);
  transition: width .4s ease;
}

.mag__counter {
  min-width: 104px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11.5px;
  letter-spacing: .1em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Textknöpfe statt Kästen. Der Hover ist die rote Naht, die auch die
   Navigation im Header benutzt (siehe .stitch-link in fadn.css). */
.mag__btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 4px 7px;
  background: none;
  border: 0;
  color: var(--muted);
  font-family: var(--font-ui);
  font-size: 10.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color .22s ease;
}
.mag__btn svg { width: 14px; height: 14px; }
.mag__btn::after {
  content: "";
  position: absolute;
  left: 4px; right: 4px; bottom: 1px;
  height: 2px;
  background: repeating-linear-gradient(to right, var(--red) 0 5px, transparent 5px 9px);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s cubic-bezier(.22, 1, .36, 1);
}
.mag__btn:hover { color: var(--ink); }
.mag__btn:hover::after { transform: scaleX(1); }
.mag__btn.is-on { color: var(--red); }
.mag__btn.is-on::after { transform: scaleX(1); }

/* ---------- Miniaturen ---------- */
.mag__thumbs {
  display: none;
  gap: 9px;
  max-width: 1100px;
  margin: 14px auto 0;
  padding: 4px 2px 10px;
  overflow-x: auto;
  scrollbar-width: thin;
}
.mag__thumbs.is-open { display: flex; }
.mag__thumb {
  flex: 0 0 auto;
  width: 58px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  cursor: pointer;
  opacity: .5;
  transition: opacity .22s ease, border-color .22s ease, transform .22s ease;
}
.mag__thumb img { width: 100%; display: block; background: #fff; box-shadow: 0 2px 8px rgba(11, 11, 11, .1); }
.mag__thumb span {
  display: block;
  font-family: var(--font-ui);
  font-size: 9.5px;
  color: var(--muted);
  padding-top: 4px;
}
.mag__thumb:hover { opacity: 1; transform: translateY(-3px); }
.mag__thumb.is-current { opacity: 1; border-color: var(--red); }

/* ---------- Tippfläche über dem Buch ----------
   Nur auf Touchgeräten. Ein Tipp öffnet die Leseansicht, statt eine Seite
   weiterzublättern. Auf zwei Seiten à 390 Pixel ist Lesen wichtiger als
   Blättern, und beides auf dieselbe Geste zu legen erzeugt nur Fehlgriffe. */
/* Die Klasse input-touch kommt von FADN.input in fadn.js und richtet sich
   nach dem pointerType des letzten Ereignisses, nicht nach der Breite.
   Ein Touch-Notebook bekommt die Fläche also erst, sobald jemand tippt,
   und verliert sie wieder, sobald die Maus bewegt wird. Mit Maus ist die
   Fläche unnötig, dort blättert der Klick und der Lupe-Knopf vergrößert. */
.mag__tap { display: none; }
html.input-touch .mag__tap {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 5;
  background: none;
  border: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

/* ==========================================================================
   Leseansicht · aktuelle Doppelseite bildschirmfüllend, mit Zoom
   ========================================================================== */
.mag__zoom {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: none;
  place-items: center;
  padding: clamp(10px, 3vw, 42px);
  background: rgba(11, 11, 11, .95);
  overflow: hidden;
  overscroll-behavior: contain;
}
.mag__zoom.is-open { display: grid; }

/* Breite und Höhe setzt fitZoom() in magazin.js, damit die Doppelseite beim
   Öffnen immer vollständig ins Bild passt. Der Zoom multipliziert nur darauf. */
.mag__zoom-inner {
  display: flex;
  gap: 0;
  transform-origin: 50% 50%;
  touch-action: none;          /* Zoom und Schieben machen wir selbst */
  will-change: transform;
  cursor: zoom-in;
}
.mag__zoom.is-zoomed .mag__zoom-inner { cursor: grab; }
.mag__zoom.is-zoomed .mag__zoom-inner:active { cursor: grabbing; }
.mag__zoom-inner img {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  object-fit: contain;
  background: #fff;
  user-select: none;
  -webkit-user-drag: none;
}

.mag__zoom-close {
  position: absolute;
  top: clamp(10px, 2vw, 26px);
  right: clamp(10px, 2vw, 26px);
  z-index: 3;
  width: 42px; height: 42px;
  display: grid; place-items: center;
  background: rgba(11, 11, 11, .5);
  border: 1px solid rgba(255, 255, 255, .25);
  color: #fff;
  cursor: pointer;
  transition: background .22s ease, color .22s ease;
}
.mag__zoom-close:hover { background: #fff; color: var(--ink); }
.mag__zoom-close svg { width: 18px; height: 18px; }

/* Blättern in der Leseansicht */
.mag__zoom-bar {
  position: absolute;
  left: 50%;
  bottom: clamp(12px, 2.5vh, 30px);
  transform: translateX(-50%);
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  background: rgba(11, 11, 11, .55);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mag__zoom-nav {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  background: none; border: 0;
  color: rgba(255, 255, 255, .85);
  cursor: pointer;
  transition: color .2s ease;
}
.mag__zoom-nav:hover { color: var(--red); }
.mag__zoom-nav svg { width: 20px; height: 20px; }
.mag__zoom-counter {
  min-width: 96px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .8);
  font-variant-numeric: tabular-nums;
}

/* Kurzer Hinweis beim Öffnen, blendet sich von selbst wieder aus */
.mag__zoom-note {
  position: absolute;
  left: 50%;
  top: clamp(14px, 3vh, 34px);
  transform: translateX(-50%);
  z-index: 3;
  padding: 7px 14px;
  background: rgba(11, 11, 11, .6);
  font-family: var(--font-ui);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .4s ease;
  pointer-events: none;
}
.mag__zoom-note.is-visible { opacity: 1; }

/* ---------- Vollbild ----------
   Die Bühne bekommt flex: 1 1 0 statt einer Mindesthöhe, damit ihre Höhe
   vom Bildschirm kommt und nicht vom Buch. Sonst misst sizeBook() sich an
   der eigenen Ausgabe fest und das Buch bleibt klein. */
.mag__viewer:fullscreen { display: flex; flex-direction: column; background: var(--paper); padding-bottom: 16px; }
.mag__viewer:fullscreen .mag__stage {
  flex: 1 1 0;
  min-height: 0;
  overflow: hidden;
  padding-block: clamp(18px, 2.5vh, 34px);
}
/* Im Vollbild zählt jeder Pixel für das Buch, da bleibt der Titel draußen */
.mag__viewer:fullscreen .mag__word,
.mag__viewer:fullscreen .mag__tag { display: none; }
.mag__viewer:fullscreen .mag__bar { flex: 0 0 auto; }
.mag__viewer:fullscreen .mag__thumbs { flex: 0 0 auto; max-height: 22vh; }

/* ---------- Tablet quer und kleiner Desktop ---------- */
@media (max-width: 1100px) {
  .mag__stage { padding-inline: clamp(40px, 6vw, 80px); }
  .mag__word { font-size: clamp(58px, 12.5vw, 128px); }
  .mag__tag { top: clamp(92px, 13vw, 130px); }
}

/* ---------- Tablet hoch und großes Handy ---------- */
@media (max-width: 860px) {
  /* Schmale Ränder, damit von der Doppelseite möglichst viel übrig bleibt.
     Die Pfeile rücken dafür halb über den Buchrand. */
  .mag { padding-inline: 8px; }
  .mag__stage { padding-inline: 34px; min-height: 54vh; }
  .mag__side { width: 34px; }
  .mag__side svg { width: 22px; height: 22px; }
  /* Hier wird es zwischen Wort und Buch eng, das Label liefe über das
     Cover. Das große Wort sagt ohnehin schon alles. */
  .mag__tag { display: none; }
  .mag__bar { gap: 4px; padding-top: 13px; }
  .mag__btn { padding-inline: 7px; font-size: 10px; letter-spacing: .08em; }
  .mag__thumb { width: 52px; }
}

/* ---------- Handy ---------- */
@media (max-width: 620px) {
  .mag__stage { padding-inline: 26px; min-height: 48vh; }
  .mag__side { width: 28px; }
  .mag__side svg { width: 19px; height: 19px; }
  .mag__bar { gap: 2px; }
  .mag__btn { padding-inline: 5px; font-size: 9.5px; letter-spacing: .06em; }
  .mag__btn svg { width: 13px; height: 13px; }
  /* Seitenzahl auf eine eigene Zeile, sonst brechen die Knöpfe unschön um */
  .mag__counter { min-width: 0; flex: 1 0 100%; order: -1; margin-bottom: 6px; font-size: 11px; }
  .mag__thumb { width: 46px; }
  /* Vollbild bringt auf dem Handy nichts, dafür gibt es die Leseansicht */
  #magFsBtn { display: none; }
  .mag__zoom-note { font-size: 9px; letter-spacing: .1em; }
}

@media (prefers-reduced-motion: reduce) {
  .mag__float { animation: none; transform: none; transition: none; }
  .mag__progress, .mag__thumb, .mag__btn, .mag__btn::after, .mag__side { transition: none; }
}