/* Magazin von triebwerk.fm, Übersicht und Artikel (13.10.2026).
 *
 * Vorbild für das Raster ist thepioneer.de, die Farben kommen aus site.css:
 * Navy #0B1620 statt Lila, Gold statt Rot. Keine neue Schrift, keine neue
 * Farbe. Was hier steht, ordnet nur an.
 *
 * Eigene Datei statt Stilblock in der Seite, weil Übersicht und Artikel
 * dieselben Karten zeigen. Zwei Kopien derselben Regeln laufen auseinander,
 * sobald jemand nur eine anfasst. */

.mz-seite{background:#0B1620}

/* ── Kopf in der Bühnensprache, wie /gaeste/ ─────────────────────────────
 * Ein sehr grosses Wort hinter dem Inhalt, davor der Aufmacherblock, der die
 * Unterkante der Buchstaben verdeckt.
 *
 * Nachgerechnet: Roboto Black setzt MAGAZIN mit Laufweite .045em auf etwa das
 * 4,9-fache des Schriftgrads (GÄSTE: 3,413). Damit das Wort auf jeder Breite
 * so weit über den Wrapper läuft wie GÄSTE auf /gaeste/, steht hier rund
 * 26 / 4,9 × 3,413 ≈ 18vw statt 26vw. */
.mz-kopf{position:relative;overflow:clip;padding:150px 0 90px;
  --mz-wort:clamp(44px, 18vw, 320px)}
@media(max-width:960px){.mz-kopf{--mz-wort:clamp(40px, 16.6vw, 200px)}}
@media(max-width:600px){.mz-kopf{--mz-wort:clamp(36px, 15.4vw, 110px);padding:130px 0 64px}}
.mz-kopf::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(102deg,rgba(11,22,32,.94) 0%,rgba(11,22,32,.82) 40%,rgba(13,26,38,.58) 74%,rgba(16,32,46,.46) 100%),
    linear-gradient(to bottom,rgba(11,22,32,0) 0%,rgba(11,22,32,.6) 46%,rgba(11,22,32,.9) 100%)}
.mz-kopf > .container{position:relative;z-index:2}

.mz-eb{display:block;font-size:12.5px;font-weight:700;letter-spacing:.22em;
  text-transform:uppercase;color:var(--gold,#C2A677);margin-bottom:18px}
.mz-l{margin:0;font-size:clamp(16px,2vw,19px);line-height:1.6;color:rgba(255,255,255,.8);max-width:56ch}

.mz-buehne{position:relative;z-index:2;display:flex;justify-content:center;
  margin:clamp(26px,4vh,54px) 0 calc(var(--mz-wort) * -0.24)}
.mz-kopf{padding-bottom:0}
/* Das Wort steht seit der zweiten Fassung allein im Kopf und sitzt auf der
   Unterkante auf, wie ein Schriftzug über einem Eingang. */
.mz-kopf .mz-buehne{margin-bottom:-.12em;font-size:var(--mz-wort);
  transition:font-size .8s cubic-bezier(.65,0,.2,1)}
/* Das Wort zieht sich nach dem Laden zusammen (13.10.2026). Erst steht es
   gross da wie auf der Startseite, dann macht es Platz für die Beiträge, ohne
   dass man scrollen muss. Animiert wird die Schriftgrösse und nicht ein
   transform: Nur so schrumpft auch die Fläche, und die Beiträge rücken nach.
   Bei reduzierter Bewegung steht gleich die kleine Fassung. */
/* 30 % der Anfangsgrösse, aber nie unter 36px: Auf dem Telefon wären 30 %
   nur noch Fliesstextgrösse, und das Wort wäre keine Überschrift mehr. */
.mz-kopf.ist-klein .mz-buehne{font-size:max(36px, calc(var(--mz-wort) * .3))}
@media(prefers-reduced-motion:reduce){.mz-kopf .mz-buehne{transition:none}}
.mz-kopf .mz-buehne .mz-wort{font-size:1em}
.mz-leer{padding-bottom:80px}
.mz-wort{margin:0;font-family:var(--display,var(--sans));font-weight:900;font-size:var(--mz-wort);
  line-height:.92;letter-spacing:.045em;text-transform:uppercase;white-space:nowrap;
  color:rgba(255,255,255,.88);user-select:none}

.mz-leer{position:relative;z-index:3;max-width:560px}
.mz-leer p{margin:0 0 26px;font-size:17px;line-height:1.7;color:rgba(255,255,255,.78)}

/* ── Raster ──────────────────────────────────────────────────────────────
 * Zwei Spalten wie bei Pioneer: links gross, rechts zwei Karten
 * übereinander. Variante b dreht die Seiten, damit nicht jeder Block gleich
 * aussieht. Unter 900px eine Spalte. */
.mz-raster{position:relative;z-index:3;display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr);gap:32px}
.mz-raster-b{grid-template-columns:minmax(0,1fr) minmax(0,1.62fr)}
.mz-raster-b .mz-haupt{order:2}
.mz-neben{display:flex;flex-direction:column;gap:28px}
.mz-neben .mz-karte + .mz-karte{padding-top:28px;border-top:1px solid var(--mz-linie)}
/* Ein Block ohne Nebenkarten nimmt die ganze Breite. */
.mz-raster:has(.mz-neben:empty), .mz-raster:not(:has(.mz-neben)){grid-template-columns:1fr}
@media(max-width:900px){
  .mz-raster,.mz-raster-b{grid-template-columns:1fr;gap:28px}
  .mz-raster-b .mz-haupt{order:0}
}
.mz-reihe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 32px}
@media(max-width:900px){.mz-reihe{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.mz-reihe{grid-template-columns:1fr}}

/* ── Blöcke, abwechselnd dunkel und hell ─────────────────────────────── */
.mz-block{padding:84px 0 92px;
  --mz-text:#fff;--mz-text-2:rgba(255,255,255,.66);--mz-linie:rgba(255,255,255,.12)}
.mz-kopf{--mz-text:#fff;--mz-text-2:rgba(255,255,255,.66);--mz-linie:rgba(255,255,255,.12)}
@media(max-width:600px){.mz-block{padding:60px 0 68px}}
.mz-block.ist-dunkel{background:#0B1620}
.mz-block.ist-hell{background:var(--bg,#F6F6F4);
  --mz-text:var(--ink,#111A22);--mz-text-2:var(--ink-mute,#5A6470);--mz-linie:var(--line,#E4E2D8)}

/* Rubriktitel mit Strich, wie bei Pioneer. Rechtsbündig mit Strich rechts,
   wenn der Block gespiegelt ist. */
/* Doppelte Klasse mit Absicht: chrome.php begrenzt section > .container > h2
   auf 22 Zeichen. Ein rechtsbündiger Titel stünde dann mitten im Block. */
.mz-block .mz-rubrik{max-width:none;margin:0 0 36px;font-size:clamp(22px,2.6vw,28px);font-weight:800;letter-spacing:-.01em;
  color:var(--mz-text);border-left:3px solid var(--gold,#C2A677);padding:2px 0 2px 14px;line-height:1.15}
.mz-block .mz-rubrik.ist-rechts{text-align:right;border-left:0;border-right:3px solid var(--gold,#C2A677);padding:2px 14px 2px 0}
@media(max-width:900px){.mz-block .mz-rubrik.ist-rechts{text-align:left;border-right:0;border-left:3px solid var(--gold,#C2A677);padding:2px 0 2px 14px}}

/* ── Karten ──────────────────────────────────────────────────────────── */
.mz-bild{display:block;position:relative;overflow:hidden;border-radius:12px;aspect-ratio:16/10;
  background:#13263A}
.mz-bild img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ease,cubic-bezier(.2,.7,.2,1))}
/* Ohne Titelbild: eine ruhige Fläche mit der Rubrik als Schrift, kein
   Symbolfoto. */
.mz-ohne{display:flex;align-items:flex-end;padding:18px 20px;
  background:radial-gradient(120% 90% at 85% 10%,rgba(194,166,119,.22),transparent 60%),
             linear-gradient(140deg,#183D6A 0%,#0F3144 55%,#0B1620 100%)}
.mz-ohne span{font-size:clamp(20px,3vw,34px);font-weight:900;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(255,255,255,.18);line-height:1}

.mz-oben{display:block;font-size:12.5px;font-weight:600;color:var(--mz-text-2);margin:0 0 6px}
.mz-titel{margin:0;color:var(--mz-text);font-weight:800;letter-spacing:-.01em;line-height:1.25}
.mz-meta{display:flex;align-items:center;gap:12px;font-size:12.5px;color:var(--mz-text-2);margin-top:12px}
.mz-meta .mz-lz{display:inline-flex;align-items:center;gap:6px}
.mz-meta time{padding-left:12px;border-left:1px solid var(--mz-linie)}

.mz-karte{display:block;text-decoration:none;color:inherit}
.mz-karte .mz-bild{margin-bottom:16px}
.mz-karte .mz-titel{font-size:19px;transition:color .2s}
.mz-karte:hover .mz-titel,.mz-karte:focus-visible .mz-titel{color:var(--gold,#C2A677)}
.mz-block.ist-hell .mz-karte:hover .mz-titel{color:var(--gold-deep,#A88A56)}
.mz-karte:hover img{transform:scale(1.03)}
.mz-karte .mz-teaser{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
  margin-top:10px;font-size:15px;line-height:1.6;color:var(--mz-text-2)}
.mz-alle{padding-top:72px}
.mz-alle .mz-bild{box-shadow:0 14px 34px -18px rgba(11,22,32,.45)}

/* Grosse Karte: Text im Bild, unten, auf einem Verlauf, der ihn lesbar hält. */
.mz-gross{position:relative;display:block;text-decoration:none;color:#fff;border-radius:14px;overflow:hidden;
  box-shadow:0 24px 60px -24px rgba(0,0,0,.6)}
/* Der Aufmacher ist so hoch wie die Spalte daneben, wie bei Pioneer. Das
   Bild füllt dann die Karte, der Text steht unten. */
.mz-haupt{display:flex}
.mz-gross{display:flex;flex-direction:column;justify-content:flex-end;width:100%;min-height:clamp(380px,40vw,560px)}
.mz-gross .mz-bild{position:absolute;inset:0;border-radius:0;aspect-ratio:auto;height:100%}
.mz-gross .mz-ohne{align-items:flex-start}
.mz-gross .mz-bild::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(8,16,24,.94) 0%,rgba(8,16,24,.72) 34%,rgba(8,16,24,.1) 66%,rgba(8,16,24,0) 100%)}
.mz-gross-text{position:relative;padding:28px 30px 26px;z-index:2;
  --mz-text:#fff;--mz-text-2:rgba(255,255,255,.72);--mz-linie:rgba(255,255,255,.22)}
.mz-gross .mz-titel{font-size:clamp(23px,2.7vw,34px);line-height:1.18;max-width:24ch}
.mz-gross .mz-teaser{display:block;margin-top:10px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.8);max-width:56ch;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.mz-gross:hover img{transform:scale(1.025)}
.mz-gross:hover .mz-titel,.mz-gross:focus-visible .mz-titel{color:var(--gold,#C2A677)}
.mz-gross:focus-visible,.mz-karte:focus-visible{outline:2px solid var(--gold,#C2A677);outline-offset:4px}
@media(max-width:600px){
  .mz-gross{min-height:440px}
  .mz-gross-text{padding:20px 20px 18px}
}

/* ── Hörband am Schluss ──────────────────────────────────────────────── */
.mz-hoeren{background:var(--bg,#F6F6F4);padding:0 0 90px}
.mz-block.ist-hell + .mz-hoeren{padding-top:0}
.mz-block.ist-dunkel + .mz-hoeren, .mz-kopf + .mz-hoeren{padding-top:90px}
.mz-hoeren-innen{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;flex-wrap:wrap;
  padding:30px 34px;border-radius:16px;border:1px solid rgba(194,166,119,.38);
  background:linear-gradient(135deg,rgba(194,166,119,.16),rgba(194,166,119,.05))}
.mz-hoeren .mz-eb{color:var(--gold-deep,#A88A56);margin-bottom:8px}
.mz-hoeren p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2,#19272E);max-width:58ch}

/* ══ Artikel ═════════════════════════════════════════════════════════════ */
.ar-vorschau{position:sticky;top:0;z-index:200;background:var(--gold,#C2A677);color:#0B1620;
  text-align:center;font-size:13.5px;font-weight:700;padding:9px 16px}
.ar-vorschau a{color:#0B1620;margin-left:10px}

.ar-w{max-width:760px}
.ar-kopf{position:relative;background:#0B1620;padding:150px 0 64px;overflow:clip}
.ar-kopf::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(820px 460px at 86% 4%,rgba(194,166,119,.10),transparent 62%)}
.ar-kopf > .container{position:relative;z-index:2}
.ar-kopf.mit-bild{padding-bottom:calc(64px + 12vw)}
@media(min-width:1240px){.ar-kopf.mit-bild{padding-bottom:210px}}
@media(max-width:820px){.ar-kopf{padding-top:118px}}
.ar-krume{font-size:13px;color:rgba(255,255,255,.5);margin:0 0 22px}
.ar-krume a{color:rgba(255,255,255,.72);text-decoration:none;border-bottom:1px solid transparent}
.ar-krume a:hover{color:#fff;border-bottom-color:var(--gold,#C2A677)}
.ar-kopf h1{color:#fff;font-size:clamp(31px,5vw,56px);line-height:1.08;letter-spacing:-.02em;font-weight:900;margin:0}
.ar-teaser{margin:22px 0 0;font-size:clamp(17.5px,2.1vw,21px);line-height:1.55;color:rgba(255,255,255,.8)}
.ar-zeile{display:flex;align-items:center;flex-wrap:wrap;gap:12px 14px;margin-top:30px;
  --mz-text-2:rgba(255,255,255,.6);--mz-linie:rgba(255,255,255,.2)}
.ar-zeile .mz-meta{margin:0}
.ar-autor-bild{width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px rgba(194,166,119,.5)}
.ar-autor{display:flex;flex-direction:column;font-size:14px;line-height:1.3;color:#fff;padding-right:14px;
  border-right:1px solid rgba(255,255,255,.2)}
.ar-autor span{color:rgba(255,255,255,.6);font-size:12.5px}
@media(max-width:600px){.ar-autor{border-right:0}}

/* Das Titelbild liegt über der Kante zwischen dunklem Kopf und hellem Text.
   Die Fläche dahinter wechselt auf halber Höhe von Dunkel nach Hell, so
   steht die obere Bildhälfte im Kopf und die untere im Text. */
.ar-bild{position:relative;z-index:3;margin:calc(-12vw - 10px) 0 0;
  background:linear-gradient(to bottom,transparent 0,transparent 50%,var(--bg,#F6F6F4) 50%)}
@media(min-width:1240px){.ar-bild{margin-top:-156px}}
.ar-bild img{display:block;width:100%;height:auto;max-height:680px;object-fit:cover;border-radius:16px;
  box-shadow:0 30px 70px -30px rgba(0,0,0,.55)}
.ar-bild figcaption{font-size:12.5px;color:var(--ink-mute,#5A6470);margin-top:10px;text-align:right}

.ar-koerper{background:var(--bg,#F6F6F4);padding:58px 0 90px}
.ar-bild + .ar-koerper{padding-top:44px}

/* Lesetext. 68 Zeichen je Zeile, Roboto, grosszügiger Zeilenabstand. */
.ar-text{max-width:720px;margin:0 auto;font-size:18.5px;line-height:1.78;color:var(--ink-2,#19272E)}
@media(max-width:600px){.ar-text{font-size:17px;line-height:1.72}}
.ar-text > :first-child{margin-top:0}
.ar-text p{margin:0 0 1.15em}
.ar-text h2{font-size:clamp(23px,2.6vw,28px);line-height:1.25;font-weight:800;letter-spacing:-.01em;
  color:var(--ink,#111A22);margin:1.8em 0 .6em;scroll-margin-top:110px}
.ar-text h3{font-size:20px;line-height:1.35;font-weight:700;color:var(--ink,#111A22);margin:1.5em 0 .5em}
.ar-text a{color:var(--gold-deep,#A88A56);font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.ar-text a:hover{color:var(--ink,#111A22)}
.ar-text strong{color:var(--ink,#111A22)}
.ar-text ul,.ar-text ol{margin:0 0 1.2em;padding-left:1.3em}
.ar-text li{margin:0 0 .45em;padding-left:.2em}
.ar-text li::marker{color:var(--gold-deep,#A88A56);font-weight:700}
.ar-text blockquote{margin:1.6em 0;padding:.1em 0 .1em 24px;border-left:3px solid var(--gold,#C2A677);
  font-size:clamp(20px,2.4vw,24px);line-height:1.5;font-weight:500;color:var(--ink,#111A22)}
.ar-text blockquote p:last-child{margin-bottom:0}
.ar-text img{display:block;width:100%;height:auto;border-radius:12px;margin:1.6em 0}
.ar-text hr{border:0;border-top:1px solid var(--line,#E4E2D8);margin:2.2em 0}
.ar-text pre{background:#0B1620;color:#E8EEF6;border-radius:10px;padding:16px 18px;font-size:14px;overflow:auto}

.ar-schluss{max-width:720px;margin:46px auto 0}
.ar-folge{display:block;padding:22px 24px;border-radius:14px;background:#0B1620;text-decoration:none;
  transition:transform .2s var(--ease,ease)}
.ar-folge:hover{transform:translateY(-2px)}
.ar-folge .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold,#C2A677)}
.ar-folge .t{display:block;font-size:19px;font-weight:800;color:#fff;margin:8px 0 10px;line-height:1.3}
.ar-folge .l{font-size:14px;font-weight:700;color:var(--gold,#C2A677)}

.ar-autorbox{display:flex;align-items:center;gap:16px;margin:30px 0 0;padding:22px 0;
  border-top:1px solid var(--line,#E4E2D8);border-bottom:1px solid var(--line,#E4E2D8)}
.ar-autorbox img{width:64px;height:64px;border-radius:50%;object-fit:cover}
.ar-autorbox .k{display:block;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute,#5A6470);margin-bottom:3px}
.ar-autorbox b{display:block;font-size:18px;color:var(--ink,#111A22)}
.ar-autorbox span:not(.k){font-size:14.5px;color:var(--ink-mute,#5A6470)}

.ar-banner{margin:40px 0 0;padding:28px 30px;border-radius:16px;
  background:linear-gradient(135deg,rgba(194,166,119,.16),rgba(194,166,119,.05));border:1px solid rgba(194,166,119,.38)}
.ar-banner h2{margin:0 0 8px;font-size:21px;line-height:1.3;font-weight:800;color:var(--ink,#111A22)}
.ar-banner p{margin:0 0 20px;font-size:16px;line-height:1.65;color:var(--ink-2,#19272E)}

.ar-alle{margin:40px 0 0;font-size:15px}
.ar-alle a{color:var(--gold,#C2A677);font-weight:700;text-decoration:none}