/* =======================================================================
   Magazin-Layout für Logbuch-Artikel (Okt. 2026)
   Gilt nur für body.mz. Markup aus magazin_build.py, Verhalten in artikel.js.
   Leseführung: Kernaussagen oben, Inhaltsverzeichnis, ruhige Zeilenlänge,
   wenige, klar unterscheidbare Hervorhebungen, Bilder zur Situation.
   ======================================================================= */
body.mz { --mz-text: #2c3b49; --mz-measure: 68ch; }
/* style.css setzt overflow-x: hidden auf html und body, das schaltet position: sticky ab.
   clip verhindert seitliches Scrollen genauso, ohne einen Scroll-Container zu bilden. */
html:has(body.mz), body.mz { overflow-x: clip; overflow-y: visible; }

/* ---- Kopf und Titelbild ---- */
body.mz .page-hero { padding-bottom: clamp(26px, 3.4vw, 40px); }
.mz-hero { position: relative; max-width: 1100px; margin: clamp(26px, 3.4vw, 40px) auto 0; }
.mz-hero img, .mz-hero video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 18px; background: var(--mist); box-shadow: 0 30px 70px -40px rgba(12, 32, 51, 0.45); }
.mz-hero figcaption, .mz-figure figcaption {
  padding: 10px 4px 0; font-size: 14px; line-height: 1.5; color: var(--muted); background: var(--paper);
}
.mz-credit { font-size: 12px; color: #56636f; white-space: nowrap; }
.mz-pause {
  position: absolute; right: 14px; top: 14px; z-index: 3; min-height: 40px; padding: 8px 14px;
  font: 600 13px var(--body); letter-spacing: 0.04em; color: #fff; cursor: pointer;
  background: rgba(12, 32, 51, 0.55); border: 1px solid rgba(255, 255, 255, 0.45); border-radius: 6px;
}
.mz-pause:hover, .mz-pause:focus-visible { background: rgba(12, 32, 51, 0.8); outline: none; border-color: #fff; }

/* ---- Raster: Inhaltsverzeichnis links, Text rechts ---- */
.mz-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; max-width: 760px; margin: 0 auto; }
@media (min-width: 1180px) {
  .mz-layout { grid-template-columns: 232px minmax(0, 720px); gap: 64px; max-width: 1016px; }
}
body.mz .mz-prose { max-width: none; margin: 0; }

/* ---- Inhaltsverzeichnis: Seitenleiste ab 1180 px, sonst offen unter den Kernaussagen ---- */
.mz-aside { display: none; }
.mz-toc-h { margin: 0 0 10px !important; font: 600 11.5px/1.3 var(--body) !important; letter-spacing: 0.13em; text-transform: uppercase; color: var(--muted) !important; }
.mz-toc ol { list-style: none; margin: 0; padding: 0; counter-reset: mz-toc; max-width: none; }
.mz-toc li { counter-increment: mz-toc; margin: 0 !important; font-size: inherit !important; line-height: inherit !important; }
.mz-toc a {
  display: grid; grid-template-columns: 24px 1fr; gap: 6px; padding: 8px 0 8px 10px; margin-left: -12px;
  border-left: 2px solid transparent; font-size: 15px; line-height: 1.4; color: var(--muted) !important; text-decoration: none !important;
}
.mz-toc a::before { content: counter(mz-toc, decimal-leading-zero); font-variant-numeric: tabular-nums; font-size: 12px; color: var(--gold-text); padding-top: 2px; }
.mz-toc a:hover { color: var(--blau) !important; }
.mz-toc a[aria-current="true"] { color: var(--ink) !important; font-weight: 600; border-left-color: var(--blau); }
.mz-toc-inline { margin: 0 0 34px; padding: 18px 20px 12px 22px; border: 1px solid var(--line); border-radius: 12px; background: var(--card-bg); }
@media (min-width: 1180px) {
  .mz-aside { display: block; }
  .mz-toc-side { position: sticky; top: calc(var(--nav-h, 72px) + 28px); max-height: calc(100vh - var(--nav-h, 72px) - 56px); overflow-y: auto; }
  .mz-toc-side a { font-size: 14px; padding: 7px 0 7px 10px; }
  .mz-toc-inline { display: none; }
}

/* ---- Fließtext ---- */
body.mz .mz-prose > p, body.mz .mz-prose > ul > li, body.mz .mz-prose > ol > li { font-size: 18px; line-height: 1.68; color: var(--mz-text); }
body.mz .mz-prose > p { max-width: var(--mz-measure); margin-bottom: 20px; }
body.mz .mz-prose > p:first-child { font-size: 20px; line-height: 1.65; color: var(--ink); }
body.mz .mz-prose h2 {
  position: relative; scroll-margin-top: calc(var(--nav-h, 72px) + 24px);
  margin: clamp(48px, 6vw, 64px) 0 18px; padding-top: 22px;
  font-family: var(--display); font-size: clamp(26px, 2.6vw, 32px); line-height: 1.18; color: var(--ink);
}
body.mz .mz-prose h2::before { content: ""; position: absolute; left: 0; top: 0; width: 34px; height: 3px; border-radius: 3px; background: var(--gold-dekor); }
body.mz .mz-prose h3 { font-size: 21px; margin: 30px 0 10px; color: var(--ink); }
body.mz .mz-prose > ul, body.mz .mz-prose > ol { max-width: var(--mz-measure); }
body.mz .mz-prose > ul:not([class]) > li { margin-bottom: 12px; }
body.mz .mz-prose strong { color: var(--ink); }
body.mz .mz-prose a { color: var(--blau); text-decoration-thickness: 1px; text-underline-offset: 3px; }
body.mz .mz-prose a:hover { color: var(--blau-deep); }

/* ---- Das Wichtigste in Kürze ---- */
.mz-kurz { margin: 28px 0 34px; padding: clamp(20px, 2.6vw, 28px); background: var(--sand-bg); border-radius: 14px; border-left: 4px solid var(--gold-dekor); }
.mz-kurz-h { margin: 0 0 12px; font: 600 12px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold-text); }
.mz-kurz ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.mz-kurz li { position: relative; padding-left: 28px; margin: 0; font-size: 17px; line-height: 1.6; color: var(--ink); }
.mz-kurz li::before { content: ""; position: absolute; left: 2px; top: 7px; width: 14px; height: 8px; border-left: 2px solid var(--blau); border-bottom: 2px solid var(--blau); transform: rotate(-45deg); }

/* ---- Hinweiskästen: Stand, Merksatz, Beispiel, Achtung, Tipp ---- */
body.mz .mz-callout { position: relative; margin: 30px 0; padding: 20px 22px 20px 24px; border-radius: 12px; background: var(--card-bg); border: 1px solid var(--line); border-left: 4px solid var(--blau); max-width: none; }
body.mz .mz-callout p { margin: 0 0 10px; font-size: 16.5px; line-height: 1.65; color: var(--mz-text); }
body.mz .mz-callout p:last-child { margin-bottom: 0; }
.mz-callout-h { font: 600 12px/1.3 var(--body) !important; letter-spacing: 0.13em; text-transform: uppercase; color: var(--blau) !important; margin-bottom: 8px !important; }
body.mz .mz-merke { background: var(--blau-tint); border-color: #cfdbf7; border-left-color: var(--blau); }
body.mz .mz-merke p:not(.mz-callout-h) { font-family: var(--display); font-size: 20px; line-height: 1.45; color: var(--ink); }
body.mz .mz-beispiel { background: #fff; border-left-color: var(--gold-dekor); }
body.mz .mz-beispiel .mz-callout-h { color: var(--gold-text) !important; }
body.mz .mz-achtung { background: var(--gold-tint); border-color: #ead8b4; border-left-color: #b8862f; }
body.mz .mz-achtung .mz-callout-h { color: var(--gold-text) !important; }
body.mz .mz-tipp { background: #f3f7f4; border-color: #d7e4da; border-left-color: #3d7a55; }
body.mz .mz-tipp .mz-callout-h { color: #2f6145 !important; }
body.mz .mz-stand { background: var(--paper); border-left-color: var(--silber-tief); }
body.mz .mz-stand p { font-size: 15px; color: var(--muted); }
body.mz .mz-stand strong { color: var(--ink); }
.mz-zahl { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.mz-zahl strong { font: 700 clamp(34px, 4vw, 44px)/1 var(--display); color: var(--ink); font-variant-numeric: tabular-nums; }
.mz-zahl span { font-size: 15px; color: var(--muted); max-width: 40ch; }

/* ---- Zitat aus dem Text ---- */
.mz-zitat { margin: 40px 0; padding: 6px 0 6px 26px; border-left: 3px solid var(--gold-dekor); }
.mz-zitat blockquote { margin: 0; }
.mz-zitat p { margin: 0; font: italic 500 clamp(22px, 2.4vw, 27px)/1.38 var(--display); color: var(--ink); max-width: 30ch; }

/* ---- Bilder im Text ---- */
.mz-figure { position: relative; margin: 30px 0 34px; }
.mz-figure img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 14px; background: var(--mist); }

/* ---- Listenstile ---- */
body.mz .mz-stufen { list-style: none; padding: 0; margin: 20px 0 26px; counter-reset: mz-stufe; display: grid; gap: 12px; max-width: none; }
body.mz .mz-stufen > li { counter-increment: mz-stufe; position: relative; margin: 0; padding: 16px 18px 16px 64px; background: var(--card-bg); border: 1px solid var(--line); border-radius: 12px; font-size: 17px; }
body.mz .mz-stufen > li::before { content: counter(mz-stufe); position: absolute; left: 18px; top: 15px; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 700 15px/1 var(--display); color: #fff; background: var(--navy-900); }
body.mz .mz-fehler { list-style: none; padding: 0; margin: 18px 0 26px; display: grid; gap: 10px; max-width: none; }
body.mz .mz-fehler > li { position: relative; margin: 0; padding: 14px 16px 14px 50px; border-radius: 12px; background: #fbf8f3; border: 1px solid var(--line-warm, #e7dfcf); font-size: 17px; }
body.mz .mz-fehler > li::before, body.mz .mz-fehler > li::after { content: ""; position: absolute; left: 21px; top: 24px; width: 14px; height: 2px; border-radius: 2px; background: #b8862f; transform: rotate(45deg); }
body.mz .mz-fehler > li::after { transform: rotate(-45deg); }
body.mz .mz-check { list-style: none; padding: 0; margin: 18px 0 8px; display: grid; gap: 8px; max-width: none; }
body.mz .mz-check > li { margin: 0; font-size: 17px; }
.mz-check label { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card-bg); cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease; }
.mz-check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--blau); cursor: pointer; }
.mz-check label:hover { border-color: var(--blau); }
.mz-check input:checked + span { color: var(--muted); text-decoration: line-through; text-decoration-color: rgba(76, 92, 107, 0.5); }
.mz-check-stand { margin: 6px 0 28px !important; font-size: 14px !important; color: var(--muted) !important; }

/* ---- Der Seelotse (Newsletter) ---- */
.mz-seelotse {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 20px; margin: 44px 0;
  padding: clamp(22px, 3vw, 32px); border-radius: 16px; color: #fff;
  background: radial-gradient(120% 140% at 0% 0%, #1a4bbf 0%, var(--navy-900) 62%);
  box-shadow: 0 30px 60px -40px rgba(12, 32, 51, 0.7);
}
.mz-sl-mark { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(240, 195, 124, 0.45); }
.mz-sl-mark svg { width: 34px; height: 34px; fill: none; stroke: var(--gold-on-dark, #f0c37c); stroke-width: 1.5; stroke-linecap: round; }
.mz-seelotse p { color: #dbe4ef; max-width: none; }
.mz-sl-kicker { margin: 0 0 6px !important; font: 600 12px/1.3 var(--body); letter-spacing: 0.14em; text-transform: uppercase; color: #f0c37c !important; }
.mz-sl-title { margin: 0 0 8px !important; font: 600 clamp(22px, 2.4vw, 27px)/1.2 var(--display) !important; color: #fff !important; }
.mz-sl-text { margin: 0 0 16px !important; font-size: 16px !important; line-height: 1.6 !important; }
.mz-sl-form { display: flex; gap: 10px; flex-wrap: wrap; }
.mz-sl-form input[type="email"] { flex: 1 1 240px; min-height: 50px; padding: 10px 14px; font: 500 16px var(--body); color: var(--ink); background: #fff; border: 1px solid transparent; border-radius: 8px; }
.mz-sl-form input[type="email"]:focus { outline: 3px solid rgba(240, 195, 124, 0.7); outline-offset: 1px; }
.mz-sl-form .btn { flex: 0 0 auto; background: #fff; color: var(--navy-900); box-shadow: none; }
.mz-sl-form .btn:hover { background: #f0c37c; color: var(--navy-900); }
.mz-sl-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; opacity: 0; }
.mz-sl-note { margin: 12px 0 0 !important; font-size: 13px !important; color: #d3def0 !important; }
.mz-sl-note a { color: #fff !important; }
.mz-sl-msg { margin: 12px 0 0 !important; font-size: 14.5px !important; color: #fff !important; }
@media (max-width: 560px) {
  .mz-seelotse { grid-template-columns: 1fr; gap: 14px; }
  .mz-sl-mark { width: 52px; height: 52px; }
  .mz-sl-form .btn { width: 100%; justify-content: center; }
}

/* Hinweis mitten im Text, die Anmeldung selbst steht am Ende */
body.mz .mz-prose > p.mz-sl-hinweis { margin: 34px 0; padding: 14px 18px; border: 1px dashed var(--silber); border-radius: 10px; font-size: 15.5px; line-height: 1.55; color: var(--muted); background: var(--paper); }
.mz-sl-hinweis-k { display: inline-block; margin-right: 6px; font: 600 11.5px/1.3 var(--body); letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-text); }
.mz-sl-hinweis a { font-weight: 600; white-space: nowrap; }

/* Inhalt-Knopf auf dem Handy */
.mz-totop {
  position: fixed; right: 14px; bottom: 104px; z-index: 90; min-height: 44px; padding: 10px 16px;
  display: inline-flex; align-items: center; gap: 8px; border-radius: 8px;
  font: 600 13px var(--body); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none !important;
  color: #fff !important; background: var(--navy-900); box-shadow: 0 10px 26px -12px rgba(12, 32, 51, 0.6);
}
.mz-totop::before { content: ""; width: 8px; height: 8px; border-left: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg) translate(2px, 2px); }
.mz-totop[hidden] { display: none; }
@media (min-width: 1180px) { .mz-totop { display: none !important; } }

/* ---- Verwandte Artikel ---- */
body.mz .mz-rel h2::before { display: none; }
body.mz .mz-rel h2 { padding-top: 0; font-size: 24px; }
.mz-rel-weit { max-width: 1016px; }
.mz-rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.mz-rel-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card-bg); text-decoration: none !important; color: inherit; transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease; }
.mz-rel-card:hover { border-color: rgba(14, 76, 204, 0.45); box-shadow: 0 16px 36px -22px rgba(12, 32, 51, 0.4); }
.mz-rel-media { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); }
.mz-rel-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mz-rel-body { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px 16px; flex: 1; }
.mz-rel-cat { font: 600 11px/1.3 var(--body); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-text); }
.mz-rel-title { font: 600 16.5px/1.3 var(--display); color: var(--ink); }
.mz-rel-card:hover .mz-rel-title { color: var(--blau); }
.mz-rel-meta { margin-top: auto; font-size: 12.5px; color: var(--muted); }
@media (max-width: 760px) { .mz-rel-grid { grid-template-columns: 1fr; } }

@media (prefers-reduced-motion: no-preference) {
  .mz-rel-card:hover { transform: translateY(-3px); }
}
@media (max-width: 640px) {
  body.mz .mz-prose > p, body.mz .mz-prose > ul > li, body.mz .mz-prose > ol > li { font-size: 17px; }
  body.mz .mz-prose > p:first-child { font-size: 18.5px; }
  .mz-hero img, .mz-hero video { border-radius: 12px; }
  .mz-zitat { padding-left: 18px; }
}
/* ---- Wissen-Artikel (leichtere Variante) ---- */
body.mz-wissen section[id] { scroll-margin-top: calc(var(--nav-h, 72px) + 16px); }
.mz-wissen-intro { padding-top: clamp(28px, 4vw, 44px) !important; padding-bottom: clamp(28px, 4vw, 44px) !important; }
.mz-wi-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(18px, 2.6vw, 32px); align-items: start; max-width: 1100px; margin: 0 auto; }
.mz-wi-grid .mz-kurz { margin: 0; }
.mz-toc-wissen { padding: 20px 22px 14px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-bg); }
.mz-wissen-sl .mz-seelotse { max-width: 820px; margin: 0 auto; }
@media (max-width: 900px) { .mz-wi-grid { grid-template-columns: 1fr; } }

/* ---- Seite „Der Seelotse“ ---- */
.sl-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; }
.sl-box, .sl-box-unten { margin: 0; }
.sl-box-unten { max-width: 820px; margin: 0 auto; }
.sl-drei { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.sl-punkt { padding: 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--card-bg); }
.sl-punkt h3 { margin: 6px 0 8px; font-size: 19px; }
.sl-punkt p { color: var(--muted); font-size: 15.5px; line-height: 1.6; margin: 0; }
.sl-punkt .sl-zahl { font: 700 34px/1 var(--display); color: var(--blau); margin: 0; }
.sl-schritte { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; counter-reset: sl; }
.sl-schritte li { counter-increment: sl; position: relative; padding: 24px 24px 24px 76px; border-radius: 14px; background: var(--card-bg); border: 1px solid var(--line); }
.sl-schritte li::before { content: counter(sl); position: absolute; left: 22px; top: 22px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font: 700 16px/1 var(--display); color: #fff; background: var(--navy-900); }
.sl-schritte h3 { margin: 4px 0 6px; font-size: 18px; }
.sl-schritte p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.sl-mehr { margin-top: 22px; text-align: center; }
.sl-kurzseite { padding-bottom: clamp(60px, 8vw, 110px); }
@media (max-width: 900px) {
  .sl-hero-grid, .sl-drei, .sl-schritte { grid-template-columns: 1fr; }
}

@media print {
  .mz-aside, .mz-toc-inline, .mz-seelotse, .mz-sl-hinweis, .mz-pause, .mz-totop { display: none !important; }
}