@charset "utf-8";
/* =====================================================================
   MrPetzAI KI-News – Onlinezeitung
   Design-System: Mr.PetzAI (Tokens identisch zu css/style-ds.css)
   Prefix: .mz-  (kapselt alle Zeitungs-Komponenten)
   Regeln: Master-Skill Design_Layout_QA – keine neuen Farben, keine
   Emojis, kein horizontaler Overflow, Gold-Hover, Focus sichtbar.
   ===================================================================== */

/* ---------- 1. Tokens ---------- */
:root{
  --dk:#082B46; --dk2:#0b4a63; --dk3:#061F33;
  --tl:#087d8f; --tl2:#18b7c9;
  --cr:#EEF2F6; --ink:#1D2733; --muted:#4E5D6C; --bd:#E3E9EF; --white:#fff;
  --gd:#D8BE7C;
  --mp-gold:#D8BE7C;
  --mp-gold-soft:rgba(216,190,124,.16);
  --mp-gold-border:rgba(216,190,124,.68);
  --mp-gold-shadow:rgba(216,190,124,.22);
  --sig:#c81020;                 /* Signalrot nur fuer "Eilmeldung" */
  --shadow:0 14px 45px rgba(8,43,70,.14);
  --shadow-s:0 8px 26px rgba(8,43,70,.06);
  --r:8px;
  --nav:64px;
  --top:36px;
  --wrap:1280px;
  --gap:1.4rem;
  --mz-scale:1;                  /* zentrale Schriftgroessen-Steuerung */
  /* Schriftfamilien. Fehlte bisher: --ff-h wurde benutzt, war aber nie
     definiert - die Ueberschrift des Abo-Bandes fiel still auf Inter
     zurueck statt Manrope zu nehmen. */
  --ff-h:'Manrope',system-ui,-apple-system,'Segoe UI',sans-serif;
  --ff-t:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
/* KEINE Aufweitung auf 1440px mehr. S7: die Spalte ist so breit wie der
   Satz. Bei 1440er-Satzspiegel wuchsen die Karten auf ~870px, waehrend
   der Teaser bei 56ch endete - die rechte Kartenhaelfte blieb weiss.
   1280px ist die groesste Breite, die die Schriftgroessen dieses Systems
   fuellen koennen.

   Nachtrag 01.09.2026: "regelkonform bei 56ch" stimmte nicht. 56ch ergeben
   rund 560px und liegen unter der Hausbreite aus §14 des Master-Skills
   (Fliesstext 680-760px, grosse Einleitungen 760-920px). Die verbreitete
   Regel "65 Zeichen je Zeile" fuehrt genau in diesen Fehler. Alle Textmasse
   stehen deshalb jetzt in px, nicht in ch: ch haengt an der Schrift und
   trifft die Hausbreite nicht verlaesslich. */
@media(min-width:1600px){ :root{ --nav:70px } }

/* ---------- 2. Basis ---------- */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0;
  font-family:'Inter',system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--white); color:var(--ink); line-height:1.65;
  overflow-x:clip;              /* Ursachen werden behoben, dies ist nur Sicherung */
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
p{margin:0 0 1rem;color:var(--muted)}
h1,h2,h3,h4{margin:0;color:var(--dk);font-family:'Manrope',system-ui,-apple-system,sans-serif;line-height:1.15;letter-spacing:-.012em}
/* overflow-wrap:anywhere in Ueberschriften und Vorzeilen: lange deutsche
   Komposita bestimmen sonst die Mindestbreite der Rasterspalte und
   erzeugen auf schmalen Geraeten waagerechtes Scrollen. */
.mz-kicker,.mz-teaser{overflow-wrap:break-word}
ul{margin:0;padding:0;list-style:none}
button{font:inherit}
:focus-visible{outline:3px solid var(--tl2);outline-offset:2px;border-radius:4px}
.mz-wrap{width:min(var(--wrap),calc(100% - 40px));margin:0 auto}
.mz-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mz-skip{position:absolute;left:-9999px;top:0;z-index:2000;background:var(--gd);color:var(--dk);padding:.7rem 1.1rem;font-weight:700;border-radius:0 0 var(--r) 0}
.mz-skip:focus{left:0}

/* ---------- 3. Kopfleiste (Datum / Ausgabe / Sprache) ---------- */
.mz-top{background:var(--dk3);color:rgba(255,255,255,.72);font-size:.78rem}
.mz-top-in{height:var(--top);display:flex;align-items:center;gap:1rem;flex-wrap:nowrap;overflow:hidden}
.mz-top-date{letter-spacing:.1em;text-transform:uppercase;font-weight:600;white-space:nowrap}
.mz-top-edition{color:var(--gd);font-weight:700;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mz-top-sep{width:1px;height:14px;background:rgba(255,255,255,.18);flex:0 0 auto}
.mz-lang{margin-left:auto;display:flex;align-items:center;gap:3px;flex:0 0 auto}
.mz-lang a,.mz-lang span{display:inline-flex;align-items:center;height:24px;padding:0 .5rem;border-radius:5px;font-size:.74rem;font-weight:700;letter-spacing:.04em;color:rgba(255,255,255,.62);transition:background .16s,color .16s}
.mz-lang a:hover{background:var(--mp-gold-soft);color:var(--gd)}
.mz-lang a.is-active{background:var(--tl2);color:var(--dk3)}
.mz-lang span{color:rgba(255,255,255,.32);cursor:default}
.mz-lang span::after{content:"";display:inline-block;width:5px;height:5px;margin-left:.35rem;border-radius:50%;background:rgba(255,255,255,.25)}
@media(max-width:720px){.mz-top-edition,.mz-top-sep{display:none}}

/* ---------- 4. Navigation ---------- */
.mz-burger{display:none;margin-left:auto;width:44px;height:44px;border:0;background:transparent;flex-direction:column;justify-content:center;align-items:center;gap:5px;cursor:pointer;border-radius:6px}
.mz-burger:hover{background:rgba(255,255,255,.1)}
.mz-burger span{display:block;width:22px;height:2px;background:#fff;border-radius:2px;transition:transform .2s,opacity .2s}
.mz-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.mz-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.mz-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mz-mobile{display:none;background:var(--dk);padding:.6rem 0 1rem}
.mz-mobile.is-open{display:block}
.mz-mobile a{display:block;padding:.75rem .2rem;color:rgba(255,255,255,.85);border-bottom:1px solid rgba(255,255,255,.07);font-size:1rem;font-weight:500}
.mz-mobile a:hover{color:var(--gd)}
@media(max-width:1100px){
  .mz-ressorts-liste{display:none}
  .mz-burger{display:flex}
}
/* Kopfzeile auf kleinen Geraeten.
   Ohne diese Regeln schiebt der nicht umbrechende Markenschriftzug die Zeile
   ueber die Bildschirmbreite hinaus – waagerechtes Scrollen auf jeder Seite.
   Das Logo traegt die Marke bereits, der Schriftzug daneben ist doppelt.
   Der Sprachumschalter wird nicht mehr abgeschnitten, sondern das Datum
   weicht zurueck; verstecken statt bedienbar machen waere keine Loesung. */
@media(max-width:640px){
  .mz-top-in{overflow:visible}
  .mz-top-date{min-width:0;overflow:hidden;text-overflow:ellipsis}

}

/* ---------- 5. Steuerleiste: Rollenfilter + Schriftgroesse ---------- */
.mz-ctrl{background:var(--cr);border-bottom:1px solid var(--bd)}
.mz-ctrl-in{display:flex;align-items:center;gap:1.2rem;padding:.75rem 0;flex-wrap:wrap}
.mz-ctrl-label{display:inline-flex;align-items:center;gap:.5rem;color:var(--dk);font-size:.84rem;font-weight:700;white-space:nowrap}
.mz-ctrl-label svg{width:18px;height:18px;color:var(--tl);flex:0 0 auto}
.mz-chips{display:flex;gap:.4rem;flex-wrap:wrap;min-width:0}
.mz-chip{display:inline-flex;align-items:center;min-height:36px;padding:.35rem .85rem;border:1px solid var(--bd);border-radius:999px;background:#fff;color:var(--dk);font-size:.84rem;font-weight:600;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.mz-chip:hover{background:var(--mp-gold-soft);border-color:var(--mp-gold-border)}
.mz-chip[aria-pressed="true"]{background:var(--tl);border-color:var(--tl);color:#fff}
.mz-fontctl{display:inline-flex;background:#fff;border:1px solid var(--bd);border-radius:999px;padding:4px;gap:3px;flex:0 0 auto}
.mz-fontctl button{min-height:32px;padding:.3rem .8rem;border:0;border-radius:999px;background:transparent;color:var(--dk);font-size:.84rem;font-weight:700;cursor:pointer;transition:background .16s,color .16s}
.mz-fontctl button:hover{background:var(--mp-gold-soft)}
.mz-fontctl button[aria-pressed="true"]{background:var(--tl);color:#fff}


/* ---------- 6. Aufmacher: die zwei Top-Meldungen ---------- */
.mz-lead{background:
  radial-gradient(900px 520px at 84% -10%,rgba(24,183,201,.18),transparent 60%),
  radial-gradient(700px 460px at 4% 118%,rgba(216,190,124,.10),transparent 55%),
  linear-gradient(180deg,var(--dk2) 0%,var(--dk) 52%,var(--dk3) 100%);
  padding:2.6rem 0 3rem;position:relative;overflow:hidden}
.mz-lead::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;
  background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:48px 48px;
  -webkit-mask-image:radial-gradient(circle at 72% 18%,#000,transparent 76%);
  mask-image:radial-gradient(circle at 72% 18%,#000,transparent 76%)}
.mz-lead-head{position:relative;display:flex;align-items:center;gap:.9rem;margin-bottom:1.5rem;flex-wrap:wrap}
.mz-eyebrow{display:inline-flex;align-items:center;gap:.55rem;color:var(--gd);font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.mz-eyebrow::before{content:"";width:26px;height:2px;background:var(--gd);flex:0 0 auto}
.mz-live{display:inline-flex;align-items:center;gap:.45rem;padding:.28rem .65rem;border-radius:999px;background:rgba(200,16,32,.16);border:1px solid rgba(200,16,32,.5);color:#ff8f99;font-size:.7rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mz-live i{width:7px;height:7px;border-radius:50%;background:var(--sig);box-shadow:0 0 0 3px rgba(200,16,32,.25)}
.mz-lead-grid{position:relative;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.mz-top-card{display:flex;flex-direction:column;min-width:0;overflow:hidden;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:var(--r);transition:border-color .18s,transform .18s,box-shadow .18s}
.mz-top-card .mz-top-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:1.6rem}
.mz-top-card:hover{border-color:var(--mp-gold-border);transform:translateY(-3px);box-shadow:0 18px 44px rgba(0,0,0,.3)}
.mz-top-card .mz-flag{align-self:flex-start}
.mz-top-card h2{color:#fff;font-size:calc(clamp(1.45rem,2.4vw,2.1rem) * var(--mz-scale));line-height:1.14;margin:.9rem 0 0}
.mz-top-card:hover h2{color:var(--gd)}
.mz-top-card .mz-kicker{color:var(--tl2)}
.mz-top-card .mz-teaser{color:rgba(255,255,255,.78);font-size:calc(1rem * var(--mz-scale));margin:.8rem 0 0;max-width:640px}
.mz-top-card .mz-meta{margin-top:auto;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.14);color:rgba(255,255,255,.6)}
.mz-top-card .mz-meta a{color:var(--tl2);font-weight:700}
.mz-top-card .mz-meta a:hover{color:var(--gd);text-decoration:underline}
@media(max-width:900px){.mz-lead-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 9a. Bildmarke der Meldung ----------
   Die Grafik wird aus den Angaben der Meldung gezeichnet (inc/grafik.php).
   Festes Seitenverhaeltnis, damit beim Laden nichts springt. */
.mz-media{display:block;position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--dk3);border-bottom:1px solid rgba(255,255,255,.1)}
.mz-media .mz-vis{display:block;width:100%;height:100%}
.mz-card .mz-media{border-bottom:1px solid var(--bd)}
.mz-card .mz-media::after,.mz-top-card .mz-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,31,51,0) 60%,rgba(6,31,51,.28) 100%);pointer-events:none}
.mz-top-card:hover .mz-vis,.mz-card:hover .mz-vis{transform:scale(1.018)}
.mz-vis{transition:transform .3s ease}
@media(prefers-reduced-motion:reduce){.mz-vis{transition:none}.mz-top-card:hover .mz-vis,.mz-card:hover .mz-vis{transform:none}}

/* Bildmarke im Kopf der Meldungsseite */
/* margin:0 ist noetig: der Browser gibt <figure> von sich aus 40px Aussenabstand
   links und rechts. Zusammen mit width:100% ragt die Flaeche sonst aus dem
   Container heraus und erzeugt waagerechtes Scrollen. */
.mz-art-media{width:100%;aspect-ratio:21/8;overflow:hidden;border-radius:var(--r);border:1px solid rgba(255,255,255,.16);margin:1.4rem 0 0;background:var(--dk3)}
.mz-art-media .mz-vis{display:block;width:100%;height:100%}
@media(max-width:640px){.mz-art-media{aspect-ratio:16/9}}

/* Laender-Kennung statt Emoji-Flagge */
.mz-flag{display:inline-flex;align-items:center;gap:.5rem;padding:.3rem .7rem;border-radius:999px;background:var(--mp-gold-soft);border:1px solid var(--mp-gold-border);color:var(--gd);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap}
.mz-flag b{font-weight:800}
.mz-flag.on-light{background:rgba(8,125,143,.09);border-color:rgba(8,125,143,.32);color:var(--tl)}
.mz-kicker{display:block;font-size:.76rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--tl)}
.mz-teaser{color:var(--muted);line-height:1.6}
.mz-meta{display:flex;align-items:center;gap:.55rem;flex-wrap:wrap;font-size:.78rem;color:var(--muted)}
.mz-meta .dot{width:3px;height:3px;border-radius:50%;background:currentColor;opacity:.5;flex:0 0 auto}

/* ---------- 7. Kennzahlenband ---------- */
.mz-figures{background:var(--dk3);border-top:1px solid rgba(255,255,255,.08);padding:1.5rem 0}
.mz-figures-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.1);border-radius:var(--r);overflow:hidden}
.mz-fig{background:rgba(255,255,255,.03);padding:1.1rem 1.2rem;min-width:0}
.mz-fig strong{display:block;color:var(--tl2);font-family:'Manrope',system-ui,sans-serif;font-size:1.7rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.mz-fig span{display:block;margin-top:.3rem;color:rgba(255,255,255,.66);font-size:.8rem;line-height:1.4}
.mz-fig em{display:block;margin-top:.35rem;color:rgba(255,255,255,.38);font-size:.7rem;font-style:normal;letter-spacing:.04em}
@media(max-width:900px){.mz-figures-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.mz-figures-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 8. Laender-Ressorts ---------- */
.mz-sec{padding:3.4rem 0;border-bottom:1px solid var(--bd)}
.mz-sec.alt{background:var(--cr)}
.mz-sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;margin-bottom:1.8rem}
.mz-sec-head h2{font-size:calc(clamp(1.5rem,2.6vw,2.05rem) * var(--mz-scale));display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.mz-rank{display:inline-flex;align-items:center;justify-content:center;min-width:30px;height:30px;padding:0 .5rem;border-radius:7px;background:var(--dk);color:var(--gd);font-family:'Manrope',system-ui,sans-serif;font-size:.9rem;font-weight:800;flex:0 0 auto}
.mz-sec-head p{margin:.5rem 0 0;font-size:.95rem;max-width:860px}
.mz-sec-more{display:inline-flex;align-items:center;gap:.45rem;min-height:40px;padding:.5rem 1rem;border:1px solid var(--bd);border-radius:999px;background:#fff;color:var(--tl);font-size:.84rem;font-weight:700;white-space:nowrap;transition:background .16s,border-color .16s,color .16s}
.mz-sec-more:hover{background:var(--mp-gold-soft);border-color:var(--mp-gold-border);color:var(--dk)}
.mz-sec-more svg{width:15px;height:15px;transition:transform .16s}
.mz-sec-more:hover svg{transform:translateX(3px)}

/* Alle Rasterspalten mit minmax(0,…). Ein blosses 1fr laesst die Spalte
   breiter werden als ihr Container, sobald eine lange Ueberschrift darin
   steht – daraus entsteht waagerechtes Scrollen auf schmalen Geraeten. */
.mz-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:var(--gap);align-items:start}
.mz-col-side{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem;
  /* Die Zeilen teilen sich die volle Hoehe der Spalte. Ohne das endete
     die Randspalte oberhalb der grossen Karte, und darunter stand ein
     weisses Loch von mehreren hundert Pixeln. */
  grid-auto-rows:1fr}
.mz-col-side .mz-row{align-content:center}
@media(max-width:980px){.mz-grid{grid-template-columns:minmax(0,1fr)}}

/* Karte gross (Ressort-Aufmacher) */
.mz-card{display:flex;flex-direction:column;min-width:0;height:100%;overflow:hidden;background:#fff;border:1px solid var(--bd);border-radius:var(--r);box-shadow:var(--shadow-s);transition:transform .18s,box-shadow .18s,border-color .18s}
.mz-card .mz-card-body{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:1.5rem}
.mz-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--mp-gold-border)}
.mz-card h3{font-size:calc(1.42rem * var(--mz-scale));line-height:1.2;margin:.55rem 0 0}
.mz-card:hover h3{color:var(--tl)}
.mz-card .mz-teaser{margin:.7rem 0 0;font-size:calc(.96rem * var(--mz-scale))}
.mz-card .mz-meta{margin-top:auto;padding-top:1rem}
.mz-card.is-lead h3{font-size:calc(1.62rem * var(--mz-scale))}
.mz-sec.alt .mz-card{background:#fff}

/* Kompaktzeile (Nebenmeldung) */
.mz-row{display:grid;grid-template-columns:46px minmax(0,1fr);gap:.9rem;align-items:start;padding:.95rem 1.1rem;background:#fff;border:1px solid var(--bd);border-radius:var(--r);transition:border-color .18s,transform .18s,background .18s}
.mz-row:hover{border-color:var(--mp-gold-border);transform:translateX(3px)}
.mz-row-no{display:grid;place-items:center;height:46px;border-radius:7px;background:var(--cr);color:var(--tl);font-family:'Manrope',system-ui,sans-serif;font-weight:800;font-size:.95rem}
.mz-row:hover .mz-row-no{background:var(--mp-gold-soft);color:var(--dk)}
.mz-row h3{font-size:calc(1rem * var(--mz-scale));line-height:1.3;margin:.3rem 0 0}
.mz-row:hover h3{color:var(--tl)}
.mz-row .mz-meta{margin-top:.5rem;font-size:.74rem}

/* Rollen-Marker */
.mz-roles{display:flex;gap:.35rem;flex-wrap:wrap;margin-top:.8rem}
.mz-role{display:inline-flex;align-items:center;padding:.2rem .55rem;border-radius:5px;background:rgba(8,125,143,.09);color:var(--tl);font-size:.68rem;font-weight:700;letter-spacing:.03em;white-space:nowrap}
.mz-top-card .mz-role{background:rgba(24,183,201,.16);color:var(--tl2)}

/* Quelle */
.mz-src{display:inline-flex;align-items:center;gap:.4rem;font-weight:700;color:var(--tl)}
.mz-src:hover{color:var(--gd)}

/* ---------- 9. Richtung / Ausblick ---------- */
.mz-outlook{background:var(--dk);padding:3.6rem 0;color:#fff}
.mz-outlook h2{color:#fff;font-size:calc(clamp(1.5rem,2.6vw,2.05rem) * var(--mz-scale))}
.mz-outlook .mz-sec-head p{color:rgba(255,255,255,.7)}
.mz-out-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.mz-out{display:flex;flex-direction:column;min-width:0;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);border-radius:var(--r);padding:1.5rem;transition:border-color .18s,transform .18s}
.mz-out:hover{border-color:var(--mp-gold-border);transform:translateY(-3px)}
.mz-out-h{display:flex;align-items:center;gap:.7rem;margin-bottom:.9rem}
.mz-out-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:9px;background:rgba(24,183,201,.14);color:var(--tl2);flex:0 0 auto}
.mz-out-ic svg{width:19px;height:19px}
.mz-out-h b{color:var(--gd);font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mz-out h3{color:#fff;font-size:calc(1.14rem * var(--mz-scale));line-height:1.28}
.mz-out p{color:rgba(255,255,255,.74);font-size:calc(.94rem * var(--mz-scale));margin:.65rem 0 0}
.mz-out-tag{margin-top:1.1rem;padding-top:.9rem;border-top:1px solid rgba(255,255,255,.13);color:rgba(255,255,255,.5);font-size:.76rem}
@media(max-width:980px){.mz-out-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 10. Newsletter ---------- */
.mz-nl{background:var(--cr);padding:3.4rem 0}
.mz-nl-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:2.4rem;align-items:center;background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:2rem;box-shadow:var(--shadow-s)}
.mz-nl-box h2{font-size:calc(1.6rem * var(--mz-scale))}
.mz-nl-form{display:grid;gap:.7rem}
.mz-nl-form label{display:grid;gap:.3rem;color:var(--dk);font-size:.74rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}
.mz-nl-form input{width:100%;min-height:46px;padding:.7rem .9rem;border:1.5px solid var(--bd);border-radius:6px;background:#fff;color:var(--ink);font:inherit}
.mz-nl-form input:focus{border-color:var(--tl);box-shadow:0 0 0 3px rgba(8,125,143,.12);outline:none}
.mz-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:46px;padding:.75rem 1.3rem;border:1.5px solid transparent;border-radius:6px;font-size:.9rem;font-weight:700;cursor:pointer;transition:background .18s,color .18s,border-color .18s,box-shadow .18s,transform .18s}
.mz-btn-primary{background:var(--tl);border-color:var(--tl);color:#fff}
.mz-btn-primary:hover{background:var(--gd);border-color:var(--gd);color:var(--dk3);box-shadow:0 8px 22px var(--mp-gold-shadow);transform:translateY(-1px)}
.mz-btn-outline{background:#fff;border-color:var(--bd);color:var(--dk)}
.mz-btn-outline:hover{border-color:var(--mp-gold-border);background:var(--mp-gold-soft)}
.mz-btn-ghost{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.28);color:#fff}
.mz-btn-ghost:hover{background:var(--mp-gold-soft);border-color:var(--mp-gold-border);color:var(--gd)}
.mz-btn.full{width:100%}
.mz-note{font-size:.78rem;color:var(--muted);margin:0}
.mz-note a{color:var(--tl);font-weight:700}
.mz-note a:hover{color:var(--gd);text-decoration:underline}
@media(max-width:900px){.mz-nl-box{grid-template-columns:minmax(0,1fr);gap:1.6rem;padding:1.5rem}}

/* ---------- 11. Ressort-/Artikelseiten ---------- */
.mz-phead{background:linear-gradient(135deg,var(--dk2) 0%,var(--dk) 60%,var(--dk3) 100%);padding:2.6rem 0 2.4rem;color:#fff}
/* KEIN max-width am Baustein: die Ueberschrift lief bei 24ch nur 620px
   weit, waehrend das Foto darunter 960px laeuft - sie wirkte wie zu
   frueh umbrochen. Der Satzspiegel der Seite begrenzt sie (S7). */
.mz-phead h1{color:#fff;font-size:calc(clamp(1.8rem,3.4vw,2.9rem) * var(--mz-scale));line-height:1.12}
.mz-phead p{color:rgba(255,255,255,.76);max-width:860px;margin:.9rem 0 0;font-size:calc(1.02rem * var(--mz-scale))}
.mz-crumb{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;margin-bottom:1.1rem;font-size:.8rem;color:rgba(255,255,255,.6)}
.mz-crumb a:hover{color:var(--gd);text-decoration:underline}
.mz-crumb span{opacity:.5}

.mz-article{padding:3rem 0 3.6rem}
.mz-art-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:3rem;align-items:start}
@media(max-width:1000px){.mz-art-grid{grid-template-columns:minmax(0,1fr);gap:2rem}}
.mz-art-body{min-width:0;max-width:860px}
.mz-art-lead{font-size:calc(1.18rem * var(--mz-scale));line-height:1.6;color:var(--ink);font-weight:500;margin:0 0 1.6rem}
.mz-art-body p{font-size:calc(1.04rem * var(--mz-scale));line-height:1.75;color:#2f3a45;margin:0 0 1.15rem}
.mz-art-body h2{font-size:calc(1.42rem * var(--mz-scale));margin:2.2rem 0 .8rem}
.mz-decide{margin:2rem 0;background:var(--cr);border:1px solid var(--bd);border-left:4px solid var(--tl);border-radius:0 var(--r) var(--r) 0;padding:1.5rem}
.mz-decide h3{font-size:calc(1.06rem * var(--mz-scale));margin-bottom:.9rem}
.mz-decide ul{display:grid;gap:.65rem}
.mz-decide li{position:relative;padding-left:1.5rem;color:#2f3a45;font-size:calc(.98rem * var(--mz-scale));line-height:1.6}
.mz-decide li::before{content:"";position:absolute;left:0;top:.55rem;width:.55rem;height:.55rem;border-radius:50%;background:var(--tl)}
.mz-srcbox{margin-top:2rem;padding:1.2rem 1.4rem;border:1px solid var(--bd);border-radius:var(--r);background:#fff}
.mz-srcbox b{display:block;color:var(--dk);font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.5rem}
/* word-break:break-word an dieser Stelle liess den Quellennamen im
   inline-flex-Kasten Buchstabe fuer Buchstabe umbrechen ("C N B C").
   Der Name bleibt jetzt zusammen, das Symbol bekommt die Groesse des
   uebrigen Icon-Systems. */
.mz-srcbox a{display:inline-flex;align-items:center;gap:.45rem;max-width:100%;color:var(--tl);font-weight:700}
.mz-srcbox a svg{width:16px;height:16px;flex:0 0 auto}
.mz-srcbox a:hover{color:var(--gd);text-decoration:underline}
.mz-aside{position:sticky;top:calc(var(--nav) + 18px);display:grid;gap:.9rem;min-width:0}
@media(max-width:1000px){.mz-aside{position:static}}
.mz-aside-h{display:flex;align-items:center;gap:.55rem;color:var(--dk);font-family:'Manrope',system-ui,sans-serif;font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.mz-aside-h::before{content:"";width:22px;height:2px;background:var(--gd)}

.mz-list{display:grid;grid-template-columns:minmax(0,1fr);gap:.9rem}
.mz-empty{padding:2rem;border:1px dashed var(--bd);border-radius:var(--r);color:var(--muted);text-align:center}

/* ---------- 12. Quellen-Transparenz ---------- */
.mz-trust{padding:3rem 0;background:#fff;border-top:1px solid var(--bd)}
.mz-trust-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.mz-trust-card{background:var(--cr);border:1px solid var(--bd);border-radius:var(--r);padding:1.4rem}
.mz-trust-card h3{font-size:calc(1.04rem * var(--mz-scale));margin-bottom:.5rem}
.mz-trust-card p{font-size:.92rem;margin:0}
@media(max-width:900px){.mz-trust-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 13. Footer ---------- */
.mz-foot{background:var(--dk);color:#fff;padding:3rem 0 1.4rem}
.mz-foot-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:2.2rem}
.mz-foot-brand img{height:52px;width:auto;margin-bottom:1rem}
.mz-foot-brand p{color:rgba(255,255,255,.58);font-size:.9rem;max-width:none}
.mz-foot h3{color:#fff;font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.8rem}
.mz-foot a{display:block;color:rgba(255,255,255,.58);font-size:.88rem;margin:.42rem 0;transition:color .16s}
.mz-foot a:hover{color:var(--gd)}
/* Als-App-Block in der Fusszeile: erklaert die Installation ohne App-Store.
   In der installierten App selbst ist er ueberfluessig und verschwindet. */
.mz-foot-app{display:flex;align-items:center;gap:1.6rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.1)}
.mz-foot-app>div{flex:1 1 420px}
.mz-foot-app p{color:rgba(255,255,255,.58);font-size:.88rem;margin:0}
.mz-foot-app .mz-btn{flex:0 0 auto;white-space:nowrap}
@media(display-mode: standalone){.mz-foot-app{display:none}}
.mz-foot-bottom{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:2.2rem;padding-top:1.1rem;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.42);font-size:.78rem}
.mz-foot-bottom a{display:inline;color:rgba(255,255,255,.42)}
@media(max-width:900px){.mz-foot-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:560px){.mz-foot-grid{grid-template-columns:minmax(0,1fr)}}

/* ---------- 14. Filterzustand ---------- */
.mz-hidden{display:none!important}
.mz-filterinfo{margin:0 0 1.2rem;padding:.7rem 1rem;border-radius:var(--r);background:var(--mp-gold-soft);border:1px solid var(--mp-gold-border);color:var(--dk);font-size:.86rem;font-weight:600}

/* ---------- 14b. Hilfsklassen (ersetzen Inline-Styles) ---------- */
.mz-mt-s{margin-top:.9rem}
.mz-mt-m{margin-top:1.4rem}
.mz-art-kicker{color:var(--tl2);margin:.9rem 0 .5rem}
.mz-art-meta{color:rgba(255,255,255,.66);margin-top:1.1rem}
.mz-out-tag b{color:var(--gd)}
.mz-noscript{padding:1.2rem;text-align:center;color:var(--muted)}

/* ---------- 15. Responsive Feinschliff ---------- */
@media(max-width:720px){
  :root{--gap:1rem}
  .mz-wrap{width:min(100% - 28px,var(--wrap))}
  .mz-lead{padding:2rem 0 2.2rem}
  .mz-top-card{padding:1.25rem}
  .mz-sec{padding:2.6rem 0}
  .mz-article{padding:2.2rem 0 2.6rem}
  .mz-btn{width:100%}
  .mz-nl-form .mz-btn{width:100%}
}

/* Offenlegung unter jeder Meldung. Ruhig, klein, aber vorhanden – wer
   automatisch veroeffentlicht, sagt das an der Meldung und nicht im Kleingedruckten. */
.mz-autohint{margin:1.4rem 0 0;padding-top:1rem;border-top:1px solid var(--bd);color:var(--muted);font-size:.84rem;line-height:1.55}
.mz-autohint a{color:var(--tl);font-weight:700}
.mz-autohint a:hover{color:var(--gd);text-decoration:underline}

/* ---------- 15a. Quellenverzeichnis ----------
   Eine Liste, keine Kartenwueste: der Name traegt den Link, die Einrichtung
   steht ruhig darunter. Gold-Hover wie ueberall. */
.mz-quellen{display:grid;gap:.1rem;margin:.6rem 0 0}
.mz-quellen li{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;padding:.6rem .8rem;border-radius:6px;border-bottom:1px solid var(--bd)}
.mz-quellen li:hover{background:var(--mp-gold-soft);border-color:var(--mp-gold-border)}
.mz-quellen li a{color:var(--tl);font-weight:700}
.mz-quellen li:hover a{color:var(--dk)}
.mz-quellen li span{color:var(--muted);font-size:.86rem}
@media print{.mz-quellen li:hover{background:none}}

/* ---------- 16. Drucklayout ---------- */
@media print{
  :root{--mz-scale:1}
  .mz-top,.mz-ressorts,.mz-mobile,.mz-ctrl,.mz-nl,.mz-foot,.mz-burger,.mz-sec-more,.mz-btn{display:none!important}
  body{background:#fff;color:#000;font-size:11pt;line-height:1.45}
  .mz-wrap{width:100%}
  .mz-lead,.mz-outlook,.mz-figures,.mz-phead{background:#fff!important;color:#000;padding:0 0 12pt}
  .mz-lead::before{display:none}
  .mz-lead h2,.mz-outlook h2,.mz-outlook h3,.mz-phead h1,.mz-out h3{color:#000!important}
  .mz-top-card,.mz-out,.mz-fig{border:1px solid #bbb;background:#fff}
  .mz-top-card .mz-teaser,.mz-out p,.mz-fig span{color:#333}
  .mz-fig strong{color:#000}
  .mz-card,.mz-row{break-inside:avoid;page-break-inside:avoid;box-shadow:none;border:1px solid #bbb}
  .mz-sec{border-bottom:none;padding:10pt 0}
  /* Nur die Originalquelle bekommt im Ausdruck ihre Adresse mitgegeben.
     Bei jedem Link stuende das Blatt voller interner Adressen. */
  .mz-srcbox a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;color:#555;word-break:break-all}
  .mz-card .mz-media{display:none}
  .mz-art-media{aspect-ratio:21/8;break-inside:avoid}
  .mz-art-grid{grid-template-columns:1fr}
  .mz-aside{display:none}
}

/* =====================================================================
   19. Newsletter – Anmeldeseite, Bestaetigung, Abmeldung
   Eigener Namensraum .mz-abo-, weil .mz-nl- bereits vom kleinen
   Newsletter-Kasten in der Fusszeile belegt ist. Keine neuen
   Farben, Gold nur im Hover, Fokus bleibt sichtbar.
   ===================================================================== */
.mz-abo-hero{
  background:
    radial-gradient(120% 90% at 82% 10%,rgba(24,183,201,.20) 0%,rgba(24,183,201,0) 58%),
    linear-gradient(160deg,var(--dk) 0%,var(--dk3) 100%);
  color:#fff;padding:3.5rem 0 4rem;
}
.mz-abo-augen{
  display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gd);border:1px solid var(--mp-gold-border);
  background:var(--mp-gold-soft);border-radius:999px;padding:.3rem .9rem;margin-bottom:1.25rem;
}
.mz-abo-hero h1{color:#fff;font-size:calc(2.5rem * var(--mz-scale));line-height:1.14;max-width:none}
.mz-abo-hero p{color:rgba(255,255,255,.86);font-size:calc(1.12rem * var(--mz-scale));max-width:none;margin:.9rem 0 0}

.mz-abo-grid{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:2rem;
  margin:-2.4rem 0 3.5rem;align-items:start;
}
@media(max-width:900px){.mz-abo-grid{grid-template-columns:minmax(0,1fr);margin-top:-1.8rem}}

.mz-abo-form{
  background:#fff;border:1px solid var(--bd);border-radius:var(--r);
  padding:1.9rem 2rem;box-shadow:var(--shadow);min-width:0;
}
@media(max-width:600px){.mz-abo-form{padding:1.3rem 1.1rem}}
.mz-abo-form h2{font-size:calc(1.4rem * var(--mz-scale))}
.mz-abo-sub{margin:.35rem 0 1.5rem;font-size:calc(.95rem * var(--mz-scale))}
.mz-abo-fieldset{border:0;padding:0;margin:1.4rem 0 0;min-width:0}
.mz-abo-feld{display:block;margin-bottom:1.1rem}
.mz-abo-lab{display:block;font-size:.85rem;font-weight:700;color:var(--dk);margin-bottom:.4rem}
.mz-abo-opt{font-style:normal;font-weight:400;color:#8296A6}
.mz-abo-form input[type=text],.mz-abo-form input[type=email]{
  width:100%;font:inherit;font-size:.98rem;padding:.7rem .8rem;
  border:1px solid var(--bd);border-radius:var(--r);background:#fff;color:var(--ink);
}
.mz-abo-form input[type=text]:hover,.mz-abo-form input[type=email]:hover{border-color:var(--mp-gold-border)}
.mz-abo-zwei{display:grid;grid-template-columns:1fr 1fr;gap:.9rem}
@media(max-width:520px){.mz-abo-zwei{grid-template-columns:1fr}}
/* Honigtopf: nicht display:none, sonst fuellen manche Skripte ihn trotzdem
   nicht aus. Aus dem Blickfeld geschoben, fuer Vorleseprogramme versteckt. */
.mz-abo-falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.mz-abo-takt{display:grid;gap:.6rem}
.mz-abo-opt-karte{
  position:relative;display:flex;gap:.8rem;align-items:flex-start;
  border:1px solid var(--bd);border-radius:var(--r);padding:.8rem .95rem;
  cursor:pointer;background:#fff;transition:border-color .16s,background .16s,box-shadow .16s;
}
.mz-abo-opt-karte:hover{border-color:var(--mp-gold-border);background:var(--mp-gold-soft)}
.mz-abo-opt-karte.is-aktiv{border-color:var(--tl);background:#F2F8F9;box-shadow:0 0 0 1px var(--tl)}
.mz-abo-opt-karte input{position:absolute;opacity:0;width:1px;height:1px}
.mz-abo-opt-karte input:focus-visible ~ .mz-abo-punkt{outline:3px solid var(--tl2);outline-offset:2px}
.mz-abo-punkt{
  flex:0 0 18px;height:18px;margin-top:2px;border-radius:50%;
  border:2px solid #B9C7D3;background:#fff;position:relative;
}
.mz-abo-opt-karte.is-aktiv .mz-abo-punkt{border-color:var(--tl)}
.mz-abo-opt-karte.is-aktiv .mz-abo-punkt::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--tl)}
.mz-abo-txt{min-width:0}
.mz-abo-txt b{display:block;font-size:.98rem;color:var(--dk);font-weight:700}
.mz-abo-txt span{display:block;font-size:.88rem;color:var(--muted);line-height:1.45;margin-top:.15rem}
.mz-abo-marke{
  position:absolute;top:.6rem;right:.8rem;font-size:.66rem;font-weight:700;
  letter-spacing:.09em;text-transform:uppercase;color:var(--tl);
  background:rgba(8,125,143,.10);border-radius:999px;padding:.15rem .55rem;
}
.mz-abo-opt-karte.is-warte .mz-abo-marke{color:#8a6d2f;background:var(--mp-gold-soft)}
@media(max-width:720px){
  .mz-abo-opt-karte:has(.mz-abo-marke){padding-top:2rem}
  .mz-abo-marke{top:.55rem;left:.95rem;right:auto}
}
.mz-abo-rollen{margin-top:.2rem}

.mz-abo-ok{
  display:flex;gap:.7rem;align-items:flex-start;font-size:.88rem;color:var(--muted);
  line-height:1.5;margin:1.4rem 0 1.2rem;cursor:pointer;
}
.mz-abo-ok input{position:absolute;opacity:0;width:1px;height:1px}
.mz-abo-ok input:focus-visible ~ .mz-abo-box{outline:3px solid var(--tl2);outline-offset:2px}
.mz-abo-box{
  flex:0 0 18px;height:18px;margin-top:2px;border:2px solid #B9C7D3;border-radius:4px;
  background:#fff;position:relative;transition:background .16s,border-color .16s;
}
.mz-abo-ok input:checked ~ .mz-abo-box{background:var(--tl);border-color:var(--tl)}
.mz-abo-ok input:checked ~ .mz-abo-box::after{
  content:"";position:absolute;left:4px;top:0;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg);
}
.mz-abo-ok a{color:var(--tl);border-bottom:1px solid rgba(8,125,143,.35)}
.mz-abo-ok a:hover{color:var(--dk);border-bottom-color:var(--mp-gold-border)}
.mz-abo-senden{width:100%}
.mz-abo-hinweis{font-size:.8rem;margin:.9rem 0 0;line-height:1.5}
.mz-abo-meldung{margin:1rem 0 0;padding:.8rem 1rem;border-radius:var(--r);font-size:.9rem}
.mz-abo-meldung.is-ok{background:#F2F8F9;border-left:3px solid var(--tl);color:var(--dk)}
.mz-abo-meldung.is-fehler{background:var(--mp-gold-soft);border-left:3px solid var(--gd);color:#6d5624}

.mz-abo-neben{display:grid;gap:1rem;min-width:0}
.mz-abo-karte{background:#fff;border:1px solid var(--bd);border-radius:var(--r);padding:1.4rem 1.5rem}
.mz-abo-karte h2{font-size:calc(1.08rem * var(--mz-scale));margin-bottom:.6rem}
.mz-abo-karte p{font-size:.92rem;margin:0 0 .6rem}
.mz-abo-karte p:last-child{margin-bottom:0}
.mz-abo-karte.is-dunkel{background:var(--dk);border-color:var(--dk)}
.mz-abo-karte.is-dunkel h2{color:#fff}
.mz-abo-karte.is-dunkel p{color:rgba(255,255,255,.8)}
.mz-abo-zahlen{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1.1rem;margin-top:.4rem}
@media(max-width:380px){.mz-abo-zahlen{grid-template-columns:1fr}}
.mz-abo-zahlen b{
  display:block;font-family:'Manrope',system-ui,sans-serif;font-weight:800;
  font-size:1.5rem;color:var(--tl2);line-height:1.1;
}
.mz-abo-zahlen span{display:block;font-size:.78rem;color:rgba(255,255,255,.72);margin-top:.2rem;line-height:1.4}
.mz-abo-mehr{margin-top:.9rem;font-size:.86rem}
.mz-abo-mehr a{color:var(--tl);border-bottom:1px solid rgba(8,125,143,.35)}
.mz-abo-karte.is-dunkel .mz-abo-mehr a{color:var(--tl2);border-bottom-color:rgba(24,183,201,.4)}
.mz-abo-mehr a:hover{color:var(--dk);border-bottom-color:var(--mp-gold-border)}
.mz-abo-karte.is-dunkel .mz-abo-mehr a:hover{color:var(--gd);border-bottom-color:var(--mp-gold-border)}
.mz-abo-liste li{display:flex;gap:.6rem;font-size:.92rem;color:var(--muted);margin-bottom:.55rem;line-height:1.5}
.mz-abo-liste li:last-child{margin-bottom:0}
.mz-abo-liste svg{flex:0 0 17px;height:17px;margin-top:3px;color:var(--tl)}
.mz-abo-probe-titel{color:var(--dk);font-weight:700;font-size:.98rem;margin-bottom:.3rem}
.mz-abo-probe-text{font-size:.88rem}
.mz-abo-probe-meta{font-size:.78rem;color:#8296A6;margin-top:.6rem}

.mz-abo-quittung{padding:3rem 0 4rem}
.mz-abo-quittung-box{
  max-width:none;margin:0;background:#fff;border:1px solid var(--bd);
  border-left:4px solid var(--bd);border-radius:var(--r);padding:2rem 2.2rem;box-shadow:var(--shadow-s);
}
.mz-abo-quittung-box.is-ok{border-left-color:var(--tl)}
.mz-abo-quittung-box h1{font-size:calc(1.8rem * var(--mz-scale));margin-bottom:.8rem}
.mz-abo-quittung-zusatz{font-size:.92rem}
.mz-abo-quittung-knopf{display:flex;gap:.7rem;flex-wrap:wrap;margin:1.6rem 0 0}
/* Der Newsletter-Kasten in der Fusszeile traegt keine Eingabefelder mehr,
   sondern nur noch Text und eine Schaltflaeche. */
.mz-nl-tat{display:grid;gap:.7rem;align-content:center}
.mz-nl-tat .mz-note{margin:0}

/* ---------- 20. Kopfbild der Laenderseiten ----------
   Das Bild liegt hinter dem Text, nicht als Hintergrund: so tragen srcset
   und fetchpriority, und der Browser laedt die passende Groesse. Der
   Verlauf darueber ist kein Geschmack, sondern Pflicht - ohne ihn steht
   weisse Schrift auf beliebigem Foto und der Kontrast ist Gluecksache. */
.mz-phead.has-bild{position:relative;isolation:isolate;padding:3.6rem 0 3rem;overflow:hidden}
.mz-phead-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:-2;
}
.mz-phead.has-bild::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(90deg,rgba(6,31,51,.94) 0%,rgba(6,31,51,.86) 42%,rgba(6,31,51,.55) 100%),
    linear-gradient(180deg,rgba(6,31,51,.35) 0%,rgba(6,31,51,.20) 45%,rgba(6,31,51,.70) 100%);
}
@media(max-width:760px){
  /* Schmale Geraete: der Text liegt ueber der ganzen Breite, also deckt der
     Verlauf auch die ganze Breite. */
  .mz-phead.has-bild::after{
    background:linear-gradient(180deg,rgba(6,31,51,.80) 0%,rgba(6,31,51,.88) 100%);
  }
}
.mz-phead.has-bild .mz-wrap{position:relative}
.mz-phead-credit{
  margin:1.4rem 0 0;font-size:.72rem;color:rgba(255,255,255,.55);letter-spacing:.02em;
}
.mz-phead-credit a{color:rgba(255,255,255,.62);border-bottom:1px solid rgba(255,255,255,.22)}
.mz-phead-credit a:hover{color:var(--gd);border-bottom-color:var(--mp-gold-border)}
@media print{ .mz-phead-bild,.mz-phead.has-bild::after,.mz-phead-credit{display:none!important} }

/* ---------- 21. Meldungsbild (Foto statt Datengrafik) ----------
   Die Kennzeichnung sitzt im Bild und nicht nur in der Unterschrift: eine
   Bildunterschrift geht beim Weiterverbreiten verloren, das Bild nicht.
   Deshalb auch ein Verlauf darunter - auf hellen Motiven waere weisse
   Schrift sonst nicht lesbar. */
.mz-fotorahmen{position:relative;display:block;overflow:hidden}
.mz-foto{width:100%;height:100%;object-fit:cover;display:block}
.mz-fotomarke{
  position:absolute;left:10px;bottom:10px;z-index:2;
  font-size:.62rem;font-weight:800;letter-spacing:.1em;
  color:#fff;background:rgba(6,31,51,.78);
  border:1px solid rgba(255,255,255,.30);border-radius:4px;
  padding:.22rem .5rem;line-height:1.2;white-space:nowrap;
  backdrop-filter:saturate(140%) blur(2px);
}
.mz-fotorahmen::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:64px;z-index:1;
  background:linear-gradient(180deg,rgba(6,31,51,0) 0%,rgba(6,31,51,.55) 100%);
  pointer-events:none;
}
.mz-art-media .mz-fotomarke{font-size:.68rem;left:14px;bottom:14px;padding:.28rem .6rem}
.mz-fotohinweis{
  margin:.7rem 0 0;font-size:.78rem;color:var(--muted);line-height:1.5;
}
@media print{ .mz-fotomarke{background:none;color:#000;border-color:#000} .mz-fotorahmen::after{display:none} }

/* Die Bildfläche der Meldungsseite trug bisher Seitenverhältnis, Rahmen und
   overflow:hidden selbst. Mit einem Foto darin verschluckt sie die
   Bildunterschrift und schneidet die Kennzeichnung ab. Deshalb wandern
   diese Eigenschaften eine Ebene tiefer – auf das Bild, nicht auf die
   Figur. Die Unterschrift steht dann darunter im Freien. */
.mz-art-media{aspect-ratio:auto;overflow:visible;border:0;border-radius:0;background:none}
.mz-art-media > .mz-fotorahmen,
.mz-art-media > .mz-vis{
  display:block;width:100%;aspect-ratio:21/8;overflow:hidden;
  border-radius:var(--r);border:1px solid rgba(255,255,255,.16);background:var(--dk3);
}
.mz-art-media > .mz-fotorahmen .mz-foto{height:100%}
@media(max-width:640px){
  .mz-art-media > .mz-fotorahmen,
  .mz-art-media > .mz-vis{aspect-ratio:16/9}
}
@media print{ .mz-art-media > .mz-fotorahmen,.mz-art-media > .mz-vis{aspect-ratio:21/8} }

/* ===================================================================
   22 · Abo-Band
   Der Kasten ueber der Fusszeile faengt die Leser ab, die bis unten
   kommen. Das Band steht weiter oben, wo die meisten aufhoeren. Es
   traegt bewusst kein Formular: die Einwilligung wird an genau einer
   Stelle eingesammelt, sonst laesst sie sich nicht sauber belegen.
   =================================================================== */
.mz-aboband{background:var(--dk2);border-block:1px solid rgba(255,255,255,.10)}
.mz-aboband.is-dunkel{background:var(--dk3)}
.mz-aboband-in{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;gap:clamp(1rem,3vw,2.4rem);
  padding-block:clamp(1.6rem,3.4vw,2.6rem);
}
.mz-aboband-txt h2{
  font-family:var(--ff-h);font-weight:800;line-height:1.16;
  font-size:calc(clamp(1.25rem,2.3vw,1.75rem) * var(--mz-scale));color:#fff;margin:.35rem 0 .5rem;
}
.mz-aboband-txt p{
  color:rgba(255,255,255,.78);margin:0;
  font-size:calc(.97rem * var(--mz-scale));line-height:1.6;
}
.mz-aboband-tat{display:flex;flex-direction:column;align-items:flex-end;gap:.55rem;flex:0 0 auto}
.mz-aboband-knopf{white-space:nowrap}
.mz-aboband-note{
  margin:0;font-size:calc(.76rem * var(--mz-scale));
  color:rgba(255,255,255,.62);text-align:right;max-width:261px;
}

/* Die kleine Ausgabe: kein Foto, sondern aus denselben Bausteinen gebaut
   wie die Zeitung. Sie zeigt, was man bekommt - das ueberzeugt mehr als
   ein weiterer Satz Text. Fuer Vorleseprogramme ist sie ausgeblendet, sie
   traegt keine eigene Aussage. */
.mz-abo-probe{
  display:flex;flex-direction:column;gap:.5rem;width:132px;padding:.7rem;
  background:#fff;border-radius:4px;
  box-shadow:0 14px 34px rgba(0,0,0,.34);
  transform:rotate(-2.4deg);transition:transform .2s,box-shadow .2s;
}
.mz-aboband-probe:hover .mz-abo-probe,
.mz-aboband-probe:focus-visible .mz-abo-probe{
  transform:rotate(-1deg) translateY(-3px);box-shadow:0 18px 42px rgba(0,0,0,.42);
}
.mz-abo-probe-kopf{display:flex;flex-direction:column;gap:.16rem;border-bottom:1px solid #d8dfe6;padding-bottom:.36rem}
.mz-abo-probe-kopf b{font-family:var(--ff-h);font-size:.52rem;font-weight:800;color:var(--dk);letter-spacing:-.01em}
.mz-abo-probe-kopf i{font-size:.4rem;font-style:normal;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.mz-abo-probe-zeilen{display:flex;flex-direction:column;gap:.2rem}
.mz-abo-probe-zeilen i{display:block;height:2px;border-radius:1px;background:#c9d3dc}
.mz-abo-probe-zeilen i:nth-child(2){width:82%}
.mz-abo-probe-zeilen i:nth-child(3){width:64%}
.mz-abo-probe-zeilen u{display:block;height:22px;border-radius:2px;background:var(--dk2);opacity:.22;margin:.16rem 0}
.mz-abo-probe-zeilen i:last-child{width:74%}
.mz-abo-probe-fuss{font-size:.4rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--tl)}

@media(max-width:1024px){
  .mz-aboband-in{grid-template-columns:auto minmax(0,1fr)}
  .mz-aboband-tat{grid-column:1 / -1;align-items:flex-start}
  .mz-aboband-note{text-align:left}
}
@media(max-width:640px){
  .mz-aboband-in{grid-template-columns:1fr}
  .mz-aboband-probe{display:none}   /* auf dem Telefon zaehlt die Zeile, nicht das Bildchen */
  .mz-aboband-knopf{width:100%;text-align:center;justify-content:center}
  .mz-aboband-tat{width:100%}
}
@media print{ .mz-aboband{display:none} }

/* ===================================================================
   23 · Rueckweg zur Hauptseite
   Die Zeitung liegt unter mrpetzai.de, aber sie sieht aus wie ein
   eigener Ort. Ohne diesen Verweis kommt man aus ihr nicht mehr
   heraus, ausser ueber die Fusszeile - und dahin scrollt kaum jemand.
   =================================================================== */
.mz-top-heim{
  display:inline-flex;align-items:center;gap:.34rem;flex:0 0 auto;
  color:rgba(255,255,255,.72);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .16s,border-color .16s;
}
.mz-top-heim:hover,.mz-top-heim:focus-visible{
  color:var(--gd);border-bottom-color:var(--mp-gold-border);
}
.mz-top-heim span[aria-hidden]{font-size:1.05em;line-height:1}
@media(max-width:720px){ .mz-top-heim .mz-heim-lang{display:none} }
@media print{ .mz-top-heim{display:none} }

.mz-mobile .mz-heim{
  margin-top:.4rem;padding-top:.9rem;
  border-top:1px solid rgba(255,255,255,.12);color:var(--gd);
}

/* ===================================================================
   24 · Zeitungskopf und Ressortleiste

   Der Name der Zeitung ist das Label, nicht eine Beschriftung neben dem
   Logo. Er steht deshalb gross und mittig in einer eigenen Zeile - so wie
   auf jedem gedruckten Titelblatt. Das Signet des Herausgebers sitzt links
   davon, die Handlungen rechts; die drei Spalten sind 1fr auto 1fr, damit
   der Titel unabhaengig von der Breite der Seitenspalten wirklich mittig
   steht und nicht nur ungefaehr.
   =================================================================== */
.mz-kopf{
  background:linear-gradient(180deg,var(--dk) 0%,var(--dk2) 100%);
  border-bottom:1px solid rgba(255,255,255,.10);
}
.mz-kopf-in{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:clamp(.8rem,2vw,2rem);padding:clamp(1.1rem,2.2vw,1.9rem) 0;
}
.mz-signet{justify-self:start;display:flex;align-items:center;min-width:0}
/* Gleiche Groesse wie in der Kopfleiste von mrpetzai.de: dort 66 px, auf
   dem Telefon 56 px. Die Zeitung ist keine eigene Marke, sie ist ein Teil
   des Hauses - dann muss das Signet auch gleich gross sein. */
.mz-signet img{height:66px;width:auto;opacity:.92;transition:opacity .16s}
.mz-signet:hover img{opacity:1}
@media(max-width:720px){ .mz-signet img{height:56px} }

.mz-titel{
  justify-self:center;text-align:center;display:flex;flex-direction:column;
  align-items:center;gap:.42rem;min-width:0;
}
.mz-titel-name{
  font-family:var(--ff-h);font-weight:800;color:#fff;
  font-size:calc(clamp(1.55rem,5.2vw,3.4rem) * var(--mz-scale));
  line-height:1;letter-spacing:-.022em;white-space:nowrap;
}
/* Die Unterzeile traegt zwei Haarlinien - das ist der Griff, mit dem eine
   Zeitung ihren Kopf vom Rest der Seite abhebt. */
.mz-titel-claim{
  display:flex;align-items:center;gap:.7rem;
  font-size:calc(clamp(.6rem,.9vw,.72rem) * var(--mz-scale));
  font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  color:var(--gd);white-space:nowrap;max-width:100%;
}
.mz-titel-claim::before,.mz-titel-claim::after{
  content:"";height:1px;width:clamp(14px,3vw,42px);
  background:var(--mp-gold-border);flex:0 0 auto;
}

.mz-kopf-tat{justify-self:end;display:flex;align-items:center;gap:.5rem;min-width:0}

/* Der Abo-Knopf ist der wichtigste Knopf der Zeitung. Er traegt deshalb
   Gold - die einzige Stelle im Kopf, die es traegt - und nennt den Preis
   gleich mit: "kostenlos" ist das Argument, nicht ein Kleingedrucktes. */
.mz-btn-abo{
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  padding:.42rem 1.05rem;border-radius:var(--r);
  background:var(--gd);color:var(--dk3)!important;
  border:1px solid var(--gd);line-height:1.1;white-space:nowrap;
  transition:transform .16s,box-shadow .16s,background .16s;
}
.mz-btn-abo-h{font-weight:800;font-size:calc(.92rem * var(--mz-scale))}
.mz-btn-abo-k{
  font-size:calc(.66rem * var(--mz-scale));font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(6,31,51,.72);
}
.mz-btn-abo:hover,.mz-btn-abo:focus-visible{
  background:#e6cf92;transform:translateY(-1px);
  box-shadow:0 10px 24px var(--mp-gold-shadow);
}
.mz-kopf-cta{
  display:inline-flex;align-items:center;height:42px;padding:0 1rem;
  border-radius:var(--r);border:1px solid rgba(255,255,255,.34);
  color:rgba(255,255,255,.92)!important;font-size:calc(.86rem * var(--mz-scale));
  font-weight:600;white-space:nowrap;transition:background .16s,border-color .16s,color .16s;
}
.mz-kopf-cta:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff!important}

/* --- Ressortleiste: bleibt beim Blaettern oben, der Kopf darf gehen --- */
.mz-ressorts{
  position:sticky;top:0;z-index:900;
  background:rgba(6,31,51,.97);backdrop-filter:saturate(140%) blur(6px);
  box-shadow:0 10px 30px rgba(6,31,51,.22);
  border-bottom:1px solid rgba(255,255,255,.08);
}
.mz-ressorts-in{min-height:var(--nav);display:flex;align-items:center;gap:.6rem}
.mz-ressorts-liste{display:flex;align-items:center;gap:.1rem;min-width:0;flex-wrap:wrap}
.mz-ressorts-liste a{
  display:inline-flex;align-items:center;height:40px;padding:0 .78rem;border-radius:6px;
  font-size:calc(.94rem * var(--mz-scale));font-weight:500;
  color:rgba(255,255,255,.88);white-space:nowrap;transition:background .16s,color .16s;
}
.mz-ressorts-liste a:hover{background:var(--mp-gold-soft);color:var(--gd)}
.mz-ressorts-liste a.is-active{background:rgba(255,255,255,.12);color:#fff;font-weight:600}

.mz-ressort-abo{
  margin-left:auto;flex:0 0 auto;
  display:inline-flex;align-items:center;height:36px;padding:0 .95rem;
  border-radius:999px;border:1px solid var(--mp-gold-border);
  background:var(--mp-gold-soft);color:var(--gd)!important;
  font-size:calc(.82rem * var(--mz-scale));font-weight:800;
  letter-spacing:.02em;white-space:nowrap;
  transition:background .16s,color .16s,box-shadow .16s;
}
.mz-ressort-abo:hover,.mz-ressort-abo:focus-visible{
  background:var(--gd);color:var(--dk3)!important;box-shadow:0 6px 18px var(--mp-gold-shadow);
}
.mz-mobil-abo{
  color:var(--gd)!important;font-weight:800;
}
/* App-Knopf in der Ressortleiste: zweite Stimme neben dem Abo-Knopf.
   Bietet der Browser die Installation an, loest er sie direkt aus;
   sonst fuehrt er zur Erklaerung in der Fusszeile (#alsapp).
   In der installierten App ist er ueberfluessig und verschwindet. */
.mz-ressort-app{
  flex:0 0 auto;display:inline-flex;align-items:center;height:36px;padding:0 .95rem;
  border-radius:999px;border:1px solid rgba(255,255,255,.32);
  background:transparent;color:rgba(255,255,255,.85)!important;
  font-size:calc(.82rem * var(--mz-scale));font-weight:800;
  letter-spacing:.02em;white-space:nowrap;
  transition:background .16s,color .16s,border-color .16s;
}
.mz-ressort-app:hover,.mz-ressort-app:focus-visible{
  border-color:var(--mp-gold-border);background:var(--mp-gold-soft);color:var(--gd)!important;
}
@media(max-width:640px){.mz-ressort-app{display:none}}
@media(display-mode:standalone){.mz-ressort-app,.mz-mobil-app{display:none}}

/* Die Regel steht hier und nicht weiter oben: sie muss NACH der Definition
   von .mz-ressorts-liste stehen, sonst gewinnt bei gleicher Spezifitaet die
   spaetere Regel und die Liste bleibt sichtbar. Genau das war passiert. */
@media(max-width:1100px){
  .mz-ressorts-liste{display:none}
  .mz-ressort-abo{margin-left:0}
  .mz-ressorts-in{justify-content:space-between}
  .mz-burger{display:flex}
}

/* Unter 1200 px wandern Signet und Handlungen ueber und unter den Titel.
   Grund: bei "1fr auto 1fr" muessen beide Randspalten so breit werden wie
   die breitere von beiden - die Knopfspalte. Zusammen mit dem Titel, der
   nicht umbricht, ergab das mehr als die Seitenbreite, und der Titel lief
   unter den Knopf. Der Titel bleibt gross; er ist der Grund fuer den Umbau. */
@media(max-width:1200px){
  .mz-kopf-in{grid-template-columns:1fr;justify-items:center;gap:.9rem;text-align:center}
  .mz-signet{justify-self:center}
  .mz-kopf-tat{justify-self:center}
}
@media(max-width:420px){
  .mz-titel-name{white-space:normal;line-height:1.06}
  .mz-kopf-cta{display:none}      /* zwei Knoepfe nebeneinander sind hier zu viel */
}
@media print{
  .mz-kopf{background:none!important;border-bottom:1pt solid #000;padding:0 0 6pt}
  .mz-kopf-in{padding:0;grid-template-columns:1fr}
  .mz-titel-name{color:#000!important;font-size:20pt}
  .mz-titel-claim{color:#000!important}
  .mz-titel-claim::before,.mz-titel-claim::after{background:#000}
  .mz-kopf-tat,.mz-signet{display:none!important}
}

/* ===================================================================
   25 · Satzregeln als Grundschicht

   Der Auftraggeber hat zu Recht denselben Fehler zum zweiten Mal gefunden:
   "DER GROESSTE ANBIETERWECHSEL DES JAHRES FINDET IM PREISGEFUEGE / STATT".
   Ein Wort allein auf der letzten Zeile.

   Die Ursache war nicht dieser eine Selektor, sondern das Prinzip: der
   Umbruch wurde bisher je Baustein vergeben (h1 hatte text-wrap:balance,
   der Kicker nicht), und jeder neue Baustein fiel still aus der Regel.
   Deshalb steht die Regel jetzt einmal fuer alle Ebenen - Ueberschriften
   ausgewogen, Fliesstext ohne Schusterjungen. Neue Bausteine erben sie,
   ohne dass jemand daran denken muss.

   R12 des Hausstandards.
   =================================================================== */
/* "pretty" statt "balance": balance macht Zeilen GLEICH lang und liess
   dafuer die erste Zeile 120px vor dem Rand enden ("Meta" haette noch
   gepasst - der Auftraggeber hat es gemessen richtig gesehen). pretty
   fuellt jede Zeile so weit wie moeglich und verhindert trotzdem das
   einzelne Wort auf der letzten Zeile - beides zugleich. */
h1,h2,h3,h4,
.mz-kicker,.mz-eyebrow,.mz-titel-name,
.mz-aside-h,.mz-sec-sub{ text-wrap:pretty }

/* Der Kicker der Meldungsseite ist ein voller Satz und laeuft ueber den
   ganzen Satzspiegel. "pretty" laesst dort bis zu 525px Leerraum stehen,
   weil es die Zeilen ausgleicht statt sie zu fuellen. */
.mz-phead .mz-art-kicker,
.mz-art-kicker{ text-wrap:wrap; max-width:none }

p,li,figcaption,dd,
.mz-teaser,.mz-note,.mz-meta,.mz-fig span,.mz-fig em{ text-wrap:pretty }

/* Deutsche Silbentrennung, R9. Ohne sie erledigt overflow-wrap den
   Notbruch - und der trennt mitten im Wort statt an der Sprechsilbe.
   ABER: Trennung ohne Mindestlaengen ist schlimmer als keine Trennung.
   "geschrieben" wurde zu "ge- / schrieben" - zwei Buchstaben am
   Zeilenende, die der Leser erst im naechsten Wort wiederfindet. Der
   Satz verlangt mindestens vier Zeichen vor und drei nach dem
   Trennstrich, und Woerter unter sieben Zeichen werden gar nicht
   getrennt. */
/* Silbentrennung NUR auf schmalen Spalten.
   Auf dem Telefon verhindert sie Loecher in der Zeile und ueberlaufende
   Komposita - dort ist sie noetig. Auf breiten Spalten bringt sie nichts
   und kostet Ruhe: "Weiterleitun-gen" ist zwar regelkonform getrennt,
   sieht aber schlecht aus, und der Leser stolpert. Ab 640 px ist die
   Spalte breit genug, dass deutsche Komposita ohne Trennung passen.
   Wo getrennt wird, gilt: mindestens fuenf Zeichen vor und fuenf nach
   dem Strich, Woerter unter zwoelf Zeichen bleiben ganz. */
.mz-art-body,.mz-teaser,.mz-lead-sub,.mz-abo-sub,
.mz-quellen li,.mz-trust-card p,.mz-abo-karte p,.mz-decide li,
.mz-out p,.mz-fig span,.mz-fig em{
  hyphens:manual;-webkit-hyphens:manual;
}
@media(max-width:640px){
  .mz-art-body,.mz-teaser,.mz-lead-sub,.mz-abo-sub,
  .mz-quellen li,.mz-trust-card p,.mz-abo-karte p,.mz-decide li,
  .mz-out p{
    hyphens:auto;-webkit-hyphens:auto;
    hyphenate-limit-chars:12 5 5;
    -webkit-hyphenate-limit-before:5;
    -webkit-hyphenate-limit-after:5;
  }
}
/* Notbruch mitten im Wort ist schlimmer als jede Trennung: er setzt keinen
   Strich, der Leser sieht nur ein zerhacktes Wort. Nur noch dort, wo sonst
   etwas aus dem Gefaess laufen wuerde. */
.mz-kicker,.mz-teaser{ overflow-wrap:break-word }

/* Ueberschriften trennen nicht, sie brechen am Leerraum. "anywhere" hat
   dort mitten im Wort gebrochen; break-word tut es nur in der Not. */
h1,h2,h3,h4{ overflow-wrap:break-word }

/* --- Zeilenlaenge, R2: 60 bis 75 Zeichen ---------------------------
   ch misst die Ziffernbreite, nicht den Durchschnittsbuchstaben. 76ch
   ergaben gemessene 90 Zeichen je Zeile - ein Drittel zu lang. */
.mz-art-body{ max-width:860px }
.mz-card .mz-teaser{ max-width:720px }

/* --- Kontrast, WCAG AA ---------------------------------------------
   Gold auf Weiss ergibt 1,81:1. Das ist keine zurueckhaltende Farbe
   mehr, das ist unsichtbar. Auf hellem Grund traegt die Augenbraue
   deshalb Petrol; Gold bleibt dem dunklen Grund vorbehalten. */
.mz-nl .mz-eyebrow,.mz-trust .mz-eyebrow,
.mz-sec:not(.alt) .mz-eyebrow,.mz-abo-karte:not(.is-dunkel) .mz-eyebrow{ color:var(--tl) }

.mz-fig em{ color:rgba(255,255,255,.72) }
.mz-top-card .mz-role{ color:rgba(255,255,255,.72) }
.mz-top-card .mz-kicker{ color:#5ed3e2 }
.mz-top-card .mz-meta{ color:rgba(255,255,255,.74) }
.mz-flag{ color:rgba(255,255,255,.78) }
.mz-foot-bottom{ color:rgba(255,255,255,.68) }
.mz-lang span{ color:rgba(255,255,255,.55) }
.mz-abo-opt,.mz-abo-probe-meta{ color:var(--muted) }

/* --- Schriftgroessen-Umschalter: die Nachzuegler --------------------
   Kicker, Meta und Kennzahlen blieben bei A++ stehen, waehrend der
   Fliesstext wuchs - die Hierarchie kippte, der Teaser wurde groesser
   als die Ueberschrift daneben. */
.mz-kicker{ font-size:calc(.76rem * var(--mz-scale)) }
.mz-meta{ font-size:calc(.82rem * var(--mz-scale)) }
.mz-flag{ font-size:calc(.7rem * var(--mz-scale)) }
.mz-aside-h{ font-size:calc(.78rem * var(--mz-scale)) }

/* Unterzeile im Abo-Kopf: der alte Satz bleibt als Versprechen stehen,
   aber die Ueberschrift nennt jetzt zuerst das Angebot und den Preis. */
.mz-abo-hero-sub{
  font-family:var(--ff-h);font-weight:700;
  font-size:calc(clamp(1.02rem,1.6vw,1.28rem) * var(--mz-scale));
  color:var(--gd);margin:.7rem 0 0;line-height:1.35;max-width:none;
}

/* ===================================================================
   26 · Nachtrag aus der Satzpruefung
   =================================================================== */

/* Die Aufmacherkarte trug auf dem Telefon doppelten Rand: die Regel zielte
   auf die Karte, das Polster liegt aber laengst im Textteil. Ergebnis waren
   46 px Abstand statt 24 wie bei jeder anderen Karte - und ein Bild, das
   nicht mehr randabfallend sass. */
@media(max-width:720px){
  .mz-top-card{padding:0}
  .mz-top-card .mz-top-body{padding:1.25rem}
}

/* Die Abo-Ueberschrift war als einzige Ueberschrift der Zeitung fest
   eingestellt statt mitzuwachsen. Bei A++ brach sie mitten im Wort. */
.mz-abo-hero h1{ font-size:calc(clamp(1.7rem,3.4vw,2.5rem) * var(--mz-scale)) }

/* Das Quellenverzeichnis schlug 12,8 px rechts der Ueberschriftenkante an,
   weil die Hover-Flaeche den Text mit einrueckte. Die Flaeche bleibt, der
   Text kehrt an die Kante zurueck. */
.mz-quellen li{ padding-left:0;margin-left:0 }
.mz-quellen li:hover{ background:var(--cr) }

/* Herkunftsland einer Meldung. Steht nur da, wenn es vom Ressort abweicht -
   im Ressort Brüssel (EU) also "Schweden", im Ressort USA nie. Es traegt
   Gold, weil es die einzige Angabe der Zeile ist, die der Leser sucht,
   bevor er weiterliest. */
.mz-flag-herkunft{
  font-style:normal;font-weight:800;color:var(--gd);
}
.mz-flag-herkunft::before{
  content:"·";margin:0 .42em;color:rgba(255,255,255,.42);font-weight:400;
}
.mz-flag.on-light .mz-flag-herkunft{color:var(--tl)}
.mz-flag.on-light .mz-flag-herkunft::before{color:var(--muted)}
.mz-meta-herkunft{font-weight:800;color:var(--tl)}
.mz-top-card .mz-meta-herkunft,
.mz-sec.alt .mz-meta-herkunft{color:var(--gd)}

/* Abo-Kopf: zwei Sätze, zwei feste Zeilen. Der Preis steht als eigener
   Block und kann nicht mehr an den ersten Satz rutschen. */
.mz-abo-hero h1{display:flex;flex-direction:column;gap:.1em}
.mz-abo-satz,.mz-abo-preis{display:block}
.mz-abo-preis{color:var(--gd)}
/* Die Unterzeile gibt das Gold ab - einmal Gold je Blickfeld genügt. */
.mz-abo-hero-sub{color:rgba(255,255,255,.92)}

/* ===================================================================
   27 · R15: Die Spalte ist so breit wie der Satz

   Die Zeilenlaenge wurde nach R2 auf 64ch gekuerzt - aber das Raster
   der Meldungsseite blieb auf voller Breite. Ergebnis: zwischen Text
   und Randspalte klaffte ein leeres Drittel, die Seite las sich wie
   ein dreispaltiges Layout mit fehlender Mittelspalte.

   Die Regel dahinter: WER DIE ZEILENLAENGE AENDERT, AENDERT DAS RASTER.
   Eine Textspalte endet dort, wo die naechste Spalte beginnt - nie im
   Leeren. Deshalb ist der Satzspiegel der Meldungsseite jetzt an die
   Zeilenlaenge gekoppelt: 64ch Text + Zwischenraum + 320px Randspalte.
   Kopf, Steuerleiste und Artikel teilen dieselbe Kante.
   =================================================================== */
body[data-page="article"] :is(.mz-phead,.mz-ctrl,.mz-article) > .mz-wrap,
body[data-page="about"] :is(.mz-phead,.mz-ctrl,.mz-article) > .mz-wrap{
  width:min(var(--wrap), calc(100% - 48px));
}

/* Meldungsseite: Fliesstext 860 px, daneben die Entscheider-Kernsaetze.
   Die Liste "Mehr aus diesem Land" steht unter dem Artikel, nicht neben
   ihm - sie ist Navigation und hat im Lesefluss nichts zu suchen. */
body[data-page="article"] .mz-art-grid{ grid-template-columns:minmax(0,1fr) }
body[data-page="article"] .mz-art-body{ max-width:none }
body[data-page="article"] .mz-art-body > .mz-decide{ max-width:none; margin:2rem 0 }
body[data-page="article"] .mz-art-grid > .mz-aside{ margin-top:2.5rem }

/* Die Laenderseite war hier mit aufgefuehrt - zu Unrecht. Die Regel oben
   koppelt das Raster an eine Zeilenlaenge von 64 Zeichen. Auf der
   Laenderseite steht links aber kein Fliesstext, sondern eine Liste von
   Meldungskarten. Dort gibt es keine Zeilenlaenge, an die zu koppeln
   waere - stattdessen schrumpfte der Satzspiegel auf 1010 statt 1280 px
   und die Randspalte auf 320 statt 484. Die Laenderseite bekommt darum
   dasselbe Raster wie die Startseite. */
body[data-page="section"] .mz-art-grid{
  /* Die Randspalte traegt Sprungmarken, keinen Lesestoff - sie braucht eine
     feste, ausreichende Breite und nicht mehr. Alles Uebrige gehoert der
     Meldungsspalte, die tatsaechlich gelesen wird. Feste 360 px statt eines
     Verhaeltnisses: so waechst links jede zusaetzliche Bildschirmbreite mit,
     rechts nichts. Die Teaser sind ohnehin auf 56 Zeichen begrenzt, die
     Zeilen werden also nicht zu lang. */
  grid-template-columns:minmax(0,1fr) 360px;
  gap:var(--gap);
}
@media(max-width:980px){ body[data-page="section"] .mz-art-grid{ grid-template-columns:minmax(0,1fr) } }

/* Seiten ueber das Portal selbst (Grundsaetze, Recht) tragen keine
   Meldungsspalte: der Gegenstand ist das Blatt, nicht die Ausgabe. */
.mz-art-grid--solo{ grid-template-columns:minmax(0,1fr) }


/* Bei grosser Schrift (A+/A++) kippt der dreispaltige Kopf frueher in die
   einspaltige Anordnung: der Titel waechst mit, die Knoepfe nicht - ab
   etwa 1500px Breite lief er sonst unter den Abo-Knopf. Die Klasse setzt
   der Schriftgroessen-Umschalter. */
/* Bei grosser Schrift (A+/A++) kippt der Kopf auf JEDER Breite in die
   einspaltige Anordnung - der Titel waechst mit, die Randspalten nicht,
   und bei 1920px lief er sonst unter den Abo-Knopf. */
.mz-gross .mz-kopf-in{grid-template-columns:1fr;justify-items:center;gap:.9rem;text-align:center}
.mz-gross .mz-signet,.mz-gross .mz-kopf-tat{justify-self:center}

/* Unter 480px darf die Unterzeile des Zeitungskopfs umbrechen; die beiden
   Haarlinien entfallen dort - nowrap lief bei 320px aus dem Bild. */
@media(max-width:480px){
  .mz-titel-claim{white-space:normal;display:block}
  .mz-titel-claim::before,.mz-titel-claim::after{display:none}
}

/* Vorgemerkte Sprachmarken (FR/ES) schon ab 840px ausblenden: zwischen 641
   und 830px liefen sie rechts aus der Kopfleiste, und overflow:hidden hat
   sie stumm verschluckt - fuer die Messung unsichtbar, fuer den Leser weg. */
@media(max-width:840px){ .mz-lang span{display:none} }

/* E-Mail-Adressen brechen an jeder Stelle - sie haben keine Silben. */
a[href^="mailto:"]{overflow-wrap:anywhere}

/* Unter 480px duerfen auch Ueberschriften und Kicker trennen - dort zwingen
   lange Komposita ("Rechenleistung") sonst den Notbruch ohne Trennstrich. */
@media(max-width:480px){
  h1,h2,h3,.mz-kicker{
    hyphens:auto;-webkit-hyphens:auto;
    hyphenate-limit-chars:8 4 4;
    -webkit-hyphenate-limit-before:4;-webkit-hyphenate-limit-after:4;
  }
}

/* Die Ausblick-Karten sind auf jeder Bildschirmbreite schmal - dort ist
   Trennung immer noetig, sonst durchstoesst ein langes Kompositum den
   Kartenrand. */
.mz-out p{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}

/* Der Teaser der grossen Karte laeuft auf 66ch - drei bis vier Zeilen
   vertragen mehr Breite als Fliesstext, und die Karte wirkt gefuellt. */
.mz-card.is-lead .mz-teaser{max-width:760px}



/* ===================================================================
   Zusatzfunktionen der Steuerleiste
   -------------------------------------------------------------------
   Das Drucklayout gab es von Anfang an - acht @media-print-Bloecke weiter
   oben. Nur fehlte der Knopf, der es aufruft. Dieselbe Zeile traegt jetzt
   auch Teilen und Link kopieren, wie auf mrpetzai.de.
   Gold ist hier Hover-Akzent (--gd), nicht Grundfarbe.
   =================================================================== */
.mz-tools{
  display:flex;align-items:center;gap:.4rem;
  margin-left:auto;                     /* rueckt an die rechte Kante der Leiste */
}
.mz-tool{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:38px;min-width:38px;padding:0 .6rem;
  border:1px solid var(--bd);border-radius:var(--r);
  background:#fff;color:var(--dk);
  font-family:'Manrope',system-ui,sans-serif;font-size:.82rem;font-weight:700;
  line-height:1;cursor:pointer;text-decoration:none;
  transition:border-color .16s ease,color .16s ease,box-shadow .16s ease,background-color .16s ease;
}
.mz-tool svg{width:18px;height:18px;flex:0 0 auto}
.mz-tool-txt{letter-spacing:.02em}
.mz-tool:hover,.mz-tool:focus-visible{
  border-color:var(--gd);color:var(--gd);
  box-shadow:0 2px 10px rgba(216,190,124,.22);
}
.mz-tool:focus-visible{outline:2px solid var(--gd);outline-offset:2px}
.mz-tool.is-fertig{border-color:var(--tl);color:var(--tl)}

/* Bis 720px bleiben nur die Sinnbilder - die Zeile traegt sonst um. */
@media(max-width:720px){
  .mz-tools{margin-left:0;width:100%;justify-content:flex-start}
  .mz-tool-txt{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}

@media print{
  .mz-tools{display:none!important}
}

/* ===================================================================
   Seite "KI und Recht"
   -------------------------------------------------------------------
   Eigene Bausteine nur dort, wo vorhandene nicht tragen. Der Kasten
   "Was das fuer Sie heisst" ist der bestehende .mz-decide - kein
   zweites System fuer dieselbe Aufgabe.
   Gold bleibt Akzent: Punkt und Rahmen, nie Flaeche.
   =================================================================== */

/* Haftungsausschluss. Steht oben und muss auffallen, ohne zu schreien. */
.mz-hinweis{
  margin:0 0 2rem;padding:1.4rem 1.5rem;
  background:var(--cr);border:1px solid var(--bd);
  border-left:4px solid var(--gd);border-radius:0 var(--r) var(--r) 0;
}
.mz-hinweis-h{
  margin:0 0 .6rem;font-size:calc(1.06rem * var(--mz-scale));
  font-family:'Manrope',system-ui,sans-serif;color:var(--dk)
}
.mz-hinweis p{margin:0 0 .6rem;font-size:calc(.97rem * var(--mz-scale));line-height:1.65;color:#2f3a45}
.mz-hinweis p:last-child{margin-bottom:0}

/* Ampel vor der Zwischenueberschrift: drei Zustaende, ein Punkt. */
.mz-stand{
  display:inline-flex;align-items:center;gap:.45rem;
  margin-right:.7rem;vertical-align:middle;
  padding:.2rem .6rem;border:1px solid var(--bd);border-radius:999px;
  background:#fff;
  font-family:'Manrope',system-ui,sans-serif;
  font-size:.66rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--dk);white-space:nowrap
}
.mz-stand::before{content:"";width:.5rem;height:.5rem;border-radius:50%;background:currentColor;flex:0 0 auto}
.mz-stand--gilt{color:var(--tl);border-color:rgba(24,183,201,.42)}
.mz-stand--frist{color:#8a6d2f;border-color:var(--gold-border,rgba(216,190,124,.68))}
.mz-stand--offen{color:#5a6c7b}

.mz-stand-zeile{font-size:calc(.86rem * var(--mz-scale));color:#5a6c7b;margin:0 0 1.6rem}

/* Inhaltsverzeichnis: bei einer langen Seite Pflicht, nicht Zierde. */
.mz-inhalt{
  display:grid;gap:.1rem;margin:0 0 2.4rem;padding:1.1rem 1.3rem;
  background:var(--cr);border:1px solid var(--bd);border-radius:var(--r)
}
.mz-inhalt a{
  display:block;padding:.42rem 0;
  font-size:calc(.95rem * var(--mz-scale));line-height:1.45;
  color:var(--dk);text-decoration:none;
  border-bottom:1px solid rgba(0,0,0,.05)
}
.mz-inhalt a:last-child{border-bottom:0}
.mz-inhalt a:hover,.mz-inhalt a:focus-visible{color:var(--gd)}
.mz-inhalt a:focus-visible{outline:2px solid var(--gd);outline-offset:2px}

.mz-quelle{
  margin:.2rem 0 2.2rem;font-size:calc(.86rem * var(--mz-scale));
  line-height:1.6;color:#5a6c7b
}
.mz-quelle a{color:var(--tl);text-decoration:underline;text-underline-offset:2px}
.mz-quelle a:hover,.mz-quelle a:focus-visible{color:var(--gd)}

.mz-verweis{margin:2.4rem 0 0;padding-top:1.2rem;border-top:1px solid var(--bd)}
.mz-verweis a{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:'Manrope',system-ui,sans-serif;font-weight:700;
  color:var(--dk);text-decoration:none
}
.mz-verweis a::after{content:"\2192";transition:transform .16s ease}
.mz-verweis a:hover,.mz-verweis a:focus-visible{color:var(--gd)}
.mz-verweis a:hover::after{transform:translateX(3px)}

/* Ressortleiste: KI-Recht ist keine sechste Landesrubrik. */
.mz-ressorts-trenner{
  width:1px;height:20px;margin:0 .35rem;
  background:rgba(255,255,255,.18);flex:0 0 auto
}
.mz-ressort-recht{
  position:relative;
  color:var(--gd)!important;
  font-weight:800;
  border:1px solid var(--gold-border,rgba(216,190,124,.68));
  border-radius:999px;
  padding:.34rem .9rem!important;
  white-space:nowrap
}
.mz-ressort-recht:hover,.mz-ressort-recht:focus-visible{
  background:rgba(216,190,124,.16);
  box-shadow:0 2px 12px rgba(216,190,124,.22)
}
.mz-mobil-recht{color:var(--gd)!important;font-weight:800}

@media print{
  .mz-inhalt{display:none!important}
  .mz-hinweis{break-inside:avoid;page-break-inside:avoid}
  .mz-quelle a{text-decoration:none}
}

/* -------------------------------------------------------------------
   Einspaltige Portalseiten: Satzspiegel = Textspalte
   -------------------------------------------------------------------
   Dieselbe Regel wie oben bei der Meldungsseite, nur andersherum. Faellt
   die Randspalte weg, darf der Satzspiegel nicht bei 1010 px stehen
   bleiben - sonst endet der Text bei 640 px und rechts steht ein leeres
   Drittel. Zugleich wird die Textspalte auf die Hausbreite gebracht:
   76ch ergeben hier rund 640 px und liegen damit unter den 680 bis 760 px,
   die fuer Fliesstext gelten.
   ------------------------------------------------------------------- */
/* Portalseiten nutzen den vollen Satzspiegel der Zeitung. Der Fliesstext
   bleibt trotzdem bei rund 860 px - laengere Zeilen liest niemand gern.
   Die Breite daneben steht nicht leer, sondern traegt die Sprungmarken. */
body[data-page="about"] :is(.mz-phead,.mz-ctrl,.mz-article) > .mz-wrap{
  width:min(var(--wrap),calc(100% - 40px));
}
.mz-art-grid--solo{ grid-template-columns:minmax(0,1fr) 300px }
@media(max-width:1000px){ .mz-art-grid--solo{ grid-template-columns:minmax(0,1fr) } }
.mz-art-grid--solo .mz-art-body{ max-width:860px }

/* Sprungmarken: bleibt beim Blaettern stehen, damit die Gliederung einer
   langen Seite jederzeit sichtbar ist. Wird von zeitung.js gefuellt; ohne
   JavaScript bleibt die Spalte leer und faellt nicht auf. */
.mz-sprung{
  position:sticky;top:calc(var(--nav) + 18px);
  align-self:start;min-width:0;
  /* Eigene Flaeche: auf dem weissen Grund der Seite schwebte die Liste
     ohne Halt, und ein Mouseover war darauf kaum zu erkennen. */
  padding:1.2rem 1.1rem;
  background:var(--cr);border:1px solid var(--bd);border-radius:var(--r)
}
.mz-sprung:empty{display:none}
.mz-sprung-h{
  display:flex;align-items:center;gap:.55rem;margin:0 0 .9rem;
  color:var(--dk);font-family:'Manrope',system-ui,sans-serif;
  font-size:.78rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase
}
.mz-sprung-h::before{content:"";width:22px;height:2px;background:var(--gd)}
.mz-sprung a{
  display:block;padding:.6rem .7rem;border-radius:var(--r);
  font-size:calc(.9rem * var(--mz-scale));line-height:1.35;
  color:#2f3a45;text-decoration:none;
  border-left:2px solid transparent;
  transition:background-color .16s ease,color .16s ease,border-color .16s ease
}
/* Trennlinien zwischen den Eintraegen. Ein zweizeiliger Eintrag war sonst
   von zwei einzeiligen kaum zu unterscheiden - man sah die Liste, aber
   nicht, wo ein Eintrag endet. Die Linie liegt im Zwischenraum und
   verschwindet, sobald ein Eintrag seine eigene Flaeche bekommt. */
.mz-sprung a + a{ margin-top:1px }
.mz-sprung a + a::before{
  content:"";position:absolute;left:.7rem;right:.7rem;top:-1px;
  height:1px;background:rgba(6,31,51,.09)
}
.mz-sprung a{position:relative}
.mz-sprung a:hover::before,.mz-sprung a:focus-visible::before,
.mz-sprung a.is-aktiv::before,
.mz-sprung a:hover + a::before,.mz-sprung a.is-aktiv + a::before{ opacity:0 }
/* Mouseover: eigene Flaeche, nicht nur eine andere Schriftfarbe. */
.mz-sprung a:hover,.mz-sprung a:focus-visible{
  background:var(--gold-soft,rgba(216,190,124,.16));
  color:#8a6d2f;border-left-color:var(--gd)
}
.mz-sprung a:focus-visible{outline:2px solid var(--gd);outline-offset:2px}
/* Der laufende Abschnitt hebt sich weiss von der Flaeche ab. */
.mz-sprung a.is-aktiv{
  background:#fff;color:var(--tl);border-left-color:var(--tl);font-weight:700;
  box-shadow:0 1px 4px rgba(6,31,51,.06)
}
@media(max-width:1000px){ .mz-sprung{position:static;margin-top:2.4rem} }

/* Funktionsschau: Bildschirmfotos ueber die volle Breite. Zwei Spalten,
   weil ein Bild und sein Satz zusammengehoeren und nebeneinander nicht
   auseinanderfallen. */
.mz-funk{padding:3.2rem 0 3.6rem;background:var(--cr);border-top:1px solid var(--bd)}
.mz-funk-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem 2.4rem;margin-top:2rem}
@media(max-width:900px){ .mz-funk-grid{grid-template-columns:minmax(0,1fr)} }
.mz-funk figure{margin:0}
/* Die Ausschnitte sind klein. Sie werden nicht auf Kartenbreite gezogen -
   ein hochskalierter Screenshot sieht billig aus. Stattdessen stehen sie
   in ihrer echten Groesse auf einer Platte, alle gleich hoch. */
.mz-funk-bild{
  display:flex;align-items:center;justify-content:center;
  min-height:200px;padding:1.4rem;
  background:#fff;border:1px solid var(--bd);border-radius:var(--r);
  overflow:hidden
}
.mz-funk img{display:block;max-width:100%;height:auto;border-radius:8px}
.mz-funk figcaption{margin-top:.9rem}
.mz-funk h3{
  margin:0 0 .35rem;font-size:calc(1.06rem * var(--mz-scale));
  font-family:'Manrope',system-ui,sans-serif;color:var(--dk)
}
.mz-funk p{margin:0;font-size:calc(.96rem * var(--mz-scale));line-height:1.65;color:#2f3a45}

@media print{
  .mz-sprung{display:none!important}
  .mz-funk{display:none!important}
}

/* Quellenverzeichnis am Seitenende: eigener Abschnitt, damit der Uebergang
   von der Funktionsschau zum Nachschlagewerk sichtbar ist. */
.mz-quellenteil{padding:3rem 0 3.4rem;border-top:1px solid var(--bd)}
.mz-quellenteil .mz-art-body{padding-top:0}

/* -------------------------------------------------------------------
   Sprungziele unter der stehenden Ressortleiste
   -------------------------------------------------------------------
   Die Ressortleiste bleibt beim Blaettern oben stehen. Ohne Vorhalt
   springt der Browser die Ueberschrift exakt an den oberen Rand - und
   die Leiste deckt sie zu. Man landet mitten im Text und sieht nicht,
   wo der Abschnitt beginnt. Der Vorhalt entspricht der Leistenhoehe
   plus etwas Luft und gilt fuer jedes Sprungziel im Hauptteil.
   ------------------------------------------------------------------- */
main [id]{ scroll-margin-top:calc(var(--nav) + 26px) }

/* =====================================================================
   Worterklaerungen
   ---------------------------------------------------------------------
   Gepunktete Unterlinie statt Farbe: eine Erklaerung ist kein Link, und
   sie soll den Lesefluss nicht unterbrechen. Wer den Begriff kennt,
   liest darueber hinweg.
   ===================================================================== */
.mz-erkl{
  border-bottom:1px dotted currentColor; cursor:help; position:relative;
  text-decoration:none; outline:none;
}
.mz-erkl:hover,.mz-erkl:focus-visible{ border-bottom-style:solid; color:var(--tl) }
.mz-erkl:focus-visible{ box-shadow:0 0 0 3px var(--mp-gold-soft); border-radius:3px }

.mz-erkl::after{
  content:attr(data-erkl);
  position:absolute; left:0; top:calc(100% + 10px); z-index:60;
  width:max-content; max-width:320px;
  background:var(--dk); color:#fff;
  font-size:.86rem; font-weight:400; line-height:1.5; letter-spacing:0;
  text-transform:none; text-align:left;
  padding:.7rem .9rem; border-radius:10px;
  border:1px solid rgba(216,190,124,.35);
  box-shadow:0 10px 28px rgba(8,43,70,.28);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .14s, transform .14s, visibility .14s;
  pointer-events:none;
}
.mz-erkl:hover::after,.mz-erkl:focus-visible::after,.mz-erkl.is-offen::after{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* Am rechten Rand nach innen klappen, sonst laeuft der Kasten hinaus. */
.mz-erkl:nth-last-child(-n+2)::after{ left:auto; right:0 }

@media (max-width:640px){
  .mz-erkl::after{ max-width:min(280px, calc(100vw - 48px)) }
}
@media print{
  .mz-erkl{ border-bottom:none }
  .mz-erkl::after{ display:none }
}

/* =====================================================================
   Weiterlesen-Hinweis auf den Meldungskarten
   ---------------------------------------------------------------------
   Die ganze Karte ist ein Link, aber nichts sagt es. Der Hinweis steht
   am Fuss der Karte und ruecht beim Ueberfahren nach rechts.
   ===================================================================== */
.mz-card-body::after,.mz-top-body::after{
  content:"Weiterlesen \00A0→";
  display:block; margin-top:.9rem;
  font-size:.82rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tl); transition:transform .16s, color .16s;
}
.mz-top-body::after{ color:var(--gd) }
body[data-lang="en"] .mz-card-body::after,
body[data-lang="en"] .mz-top-body::after{ content:"Read on \00A0→" }
.mz-card:hover .mz-card-body::after{ transform:translateX(4px); color:var(--dk) }
.mz-top-card:hover .mz-top-body::after{ transform:translateX(4px); color:var(--mp-gold) }
@media print{ .mz-card-body::after,.mz-top-body::after{ display:none } }


/* =====================================================================
   Laenderblock mit nur einer Meldung
   ---------------------------------------------------------------------
   Ohne Randspalte stand die Karte auf halber Breite und rechts blieb ein
   Loch. Sie legt sich dort jetzt quer: Bild links, Text rechts.
   ===================================================================== */
.mz-grid--solo{ grid-template-columns:minmax(0,1fr) }
.mz-grid--solo .mz-card.is-lead{
  display:grid; grid-template-columns:minmax(0,56%) minmax(0,44%); align-items:stretch;
}
.mz-grid--solo .mz-card.is-lead .mz-media{ height:100%; display:block }
.mz-grid--solo .mz-card.is-lead .mz-media img,
.mz-grid--solo .mz-card.is-lead .mz-media .mz-fotorahmen{ height:100%; width:100% }
.mz-grid--solo .mz-card.is-lead .mz-media img{ object-fit:cover }
.mz-grid--solo .mz-card.is-lead .mz-card-body{
  display:flex; flex-direction:column; justify-content:center; padding:2rem 2.2rem;
}
@media(max-width:900px){
  .mz-grid--solo .mz-card.is-lead{ display:block }
  .mz-grid--solo .mz-card.is-lead .mz-card-body{ padding:1.4rem }
}


/* =====================================================================
   Laender- und Ressortseiten: Karten fuellen ihr Gefaess
   ---------------------------------------------------------------------
   Dort ist die Karte fast 900 px breit. Ein Teaser mit 720 px liess
   170 px leer, die Ueberschrift blieb durch "pretty" 130 px vor dem Rand
   stehen. Beides ist hier falsch: der Container gibt die Breite vor.
   ===================================================================== */
body[data-page="section"] .mz-card .mz-teaser,
body[data-page="section"] .mz-card.is-lead .mz-teaser{ max-width:none }
body[data-page="section"] .mz-card h3,
body[data-page="section"] .mz-card .mz-kicker{ text-wrap:wrap }


/* Grundsaetze und KI-Recht: derselbe volle Satzspiegel wie die Meldung. */
body[data-page="about"] .mz-art-body{ max-width:none }
body[data-page="about"] .mz-art-grid{ grid-template-columns:minmax(0,1fr) }


/* ==========================================================================
   Archiv - alle Ausgaben zum Stoebern
   Eine Zeile je Ausgabe: Nummer, Datum, Umfang, darunter die Schlagzeilen.
   ========================================================================== */
.mz-archiv{ list-style:none; margin:0; padding:0; display:grid; gap:1rem }
.mz-archiv-zeile{
  border:1px solid var(--bd); border-radius:var(--r); background:var(--white);
  box-shadow:var(--shadow-s); overflow:hidden;
  transition:box-shadow .18s ease, border-color .18s ease, transform .18s ease;
}
.mz-archiv-zeile:hover{ border-color:var(--mp-gold-border); box-shadow:0 10px 30px var(--mp-gold-shadow); transform:translateY(-1px) }
.mz-archiv-zeile.is-aktuell{ border-color:var(--mp-gold-border); background:linear-gradient(180deg,var(--mp-gold-soft),transparent 62%) }

.mz-archiv-kopf{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center;
  gap:1.1rem; padding:1.1rem 1.3rem; text-decoration:none; color:var(--ink);
}
.mz-archiv-kopf:focus-visible{ outline:3px solid var(--tl2); outline-offset:-3px }

.mz-archiv-nr{
  display:inline-grid; place-items:center; width:52px; height:52px; flex:none;
  border-radius:50%; background:var(--dk); color:var(--white);
  font-family:var(--ff-h); font-weight:800; font-size:calc(1.15rem * var(--mz-scale)); letter-spacing:-.02em;
}
.mz-archiv-zeile.is-aktuell .mz-archiv-nr{ background:var(--tl) }

.mz-archiv-txt{ display:grid; gap:.15rem; min-width:0 }
.mz-archiv-datum{
  font-family:var(--ff-h); font-weight:700; font-size:calc(1.02rem * var(--mz-scale));
  color:var(--dk); line-height:1.3;
}
.mz-archiv-zahl{ font-size:calc(.86rem * var(--mz-scale)); color:var(--muted) }
.mz-archiv-zahl b{ color:var(--tl); font-weight:700 }

.mz-archiv-pfeil{
  font-size:1.15rem; color:var(--muted); flex:none;
  transition:transform .18s ease, color .18s ease;
}
.mz-archiv-kopf:hover .mz-archiv-pfeil{ transform:translateX(4px); color:var(--gd) }

.mz-archiv-schlag{
  list-style:none; margin:0; padding:0 1.3rem 1.15rem;
  border-top:1px solid var(--bd); padding-top:.9rem;
  display:grid; gap:.5rem;
}
.mz-archiv-zeile.is-aktuell .mz-archiv-schlag{ border-top-color:var(--mp-gold-border) }
.mz-archiv-schlag li{ position:relative; padding-left:1.05rem }
.mz-archiv-schlag li::before{
  content:""; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--tl2);
}
.mz-archiv-schlag a{
  color:var(--ink); text-decoration:none; font-size:calc(.94rem * var(--mz-scale));
  line-height:1.5; border-bottom:1px solid transparent; transition:color .15s ease, border-color .15s ease;
}
.mz-archiv-schlag a:hover{ color:var(--dk2); border-bottom-color:var(--gd) }
.mz-archiv-schlag a:focus-visible{ outline:2px solid var(--tl2); outline-offset:2px }

@media (max-width:640px){
  .mz-archiv-kopf{ grid-template-columns:auto minmax(0,1fr); gap:.85rem; padding:.95rem 1rem }
  .mz-archiv-pfeil{ display:none }
  .mz-archiv-nr{ width:44px; height:44px }
  .mz-archiv-schlag{ padding:.85rem 1rem 1rem }
}

/* Der kurze Draht in der Fusszeile. Die Nummer ist Christians Argument -
   sie darf nicht wie eine Fussnote aussehen. Deshalb etwas Abstand nach oben,
   eine goldene Trennlinie und Ziffern, die auf einer Linie sitzen. */
.mz-foot-draht{
  margin:1.15rem 0 0; padding-top:1rem;
  border-top:1px solid var(--mp-gold-border, rgba(216,190,124,.28));
  font-size:.9rem; line-height:1.55; color:rgba(255,255,255,.58);
  font-variant-numeric:tabular-nums;
}
.mz-foot-draht .mz-draht-kopf{ display:block; margin-bottom:.3rem }
/* Untereinander statt nebeneinander: in der schmalen Markenspalte brach die
   Nummer sonst um und der Trenner stand allein auf der naechsten Zeile. */
.mz-foot-draht a{
  display:inline-block; color:var(--gd);
  border-bottom:1px solid transparent; transition:border-color .18s ease;
}
.mz-foot-draht a + a{ display:block; margin-top:.2rem }
.mz-foot-draht a:hover,
.mz-foot-draht a:focus-visible{ border-bottom-color:var(--gd) }