/* Magazin-Leser „Blockaden verstehen“ – Helfen statt Blockieren
   Ergänzt die Stile des Magazins (inline im Kopf der Seite). Alle eigenen Klassen beginnen mit ml-.
   Ohne JavaScript (kein .ml-js an <html>) stehen die Seitenbilder untereinander. */

:root{--ml-stage:#00163a;--ml-paper:#ffffff;--ml-line:rgba(169,198,236,.32);--ml-soft:#a9c6ec;--ml-text:#e9edf5;--ml-muted:#b4c0d6}

/* Kopfzeile der Website */
.ml-site{background:var(--ml-stage);border-bottom:1px solid rgba(169,198,236,.14)}
.ml-site-in{max-width:1240px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ml-brand{font:800 17px/1.2 var(--f-display);color:#fff;text-decoration:none;letter-spacing:-.005em}
.ml-site-nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.ml-site-nav a{color:var(--ml-text);text-decoration:none;font:500 15px/1 var(--f-text);padding:8px 6px;border-radius:999px}
.ml-site-nav a:hover{color:#fff;text-decoration:underline}
.ml-langs{display:flex;gap:2px}
.ml-langs a{padding:8px 9px}
.ml-langs a[aria-current]{background:rgba(169,198,236,.2);color:#fff}
.ml-site a:focus-visible,.ml-stage a:focus-visible,.ml-stage button:focus-visible,.ml-stage summary:focus-visible{outline:2px solid var(--ml-soft);outline-offset:3px}

/* Bühne */
.ml-stage{position:relative;padding:18px 16px 20px;color:var(--ml-text);
  background:radial-gradient(70% 60% at 50% 46%,rgba(59,111,182,.30),transparent 72%),var(--ml-stage)}
.ml-head{max-width:1240px;margin:0 auto 14px;display:flex;align-items:baseline;justify-content:space-between;gap:8px 20px;flex-wrap:wrap}
.ml-title{margin:0;color:#fff;font:800 clamp(22px,3vw,30px)/1.1 var(--f-display);letter-spacing:-.015em;max-width:none}
.ml-skip{color:var(--ml-soft);font:500 15px/1.3 var(--f-text)}
.ml-skip:hover{color:#fff}

.ml-sizer{position:relative;margin:0 auto;max-width:100%}
.ml-book{position:relative;margin:0 auto}
.ml-book:focus{outline:none}
.ml-book:focus-visible{outline:3px solid var(--ml-soft);outline-offset:6px;border-radius:2px}
.ml-page{background:var(--ml-paper);overflow:hidden}
.ml-page img{display:block;width:100%;height:100%;object-fit:cover;user-select:none;-webkit-user-drag:none}

/* ohne JavaScript: Seiten untereinander */
html:not(.ml-js) .ml-needs-js{display:none!important}
.ml-js .ml-nojs-only{display:none}
html:not(.ml-js) .ml-book{display:flex;flex-direction:column;gap:18px;max-width:640px}
html:not(.ml-js) .ml-page{box-shadow:0 18px 40px rgba(0,0,0,.35)}
html:not(.ml-js) .ml-page img{height:auto}

/* mit JavaScript */
.ml-js .ml-sizer::after{content:"";position:absolute;left:6%;right:6%;bottom:-18px;height:30px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(0,0,0,.55),transparent 70%);z-index:-1}
.ml-js .ml-sizer{z-index:0}
.ml-js .ml-book .stf__item{background:var(--ml-paper)}
.ml-js .ml-book.ml-spread::after{content:"";position:absolute;top:0;bottom:0;left:calc(50% - 28px);width:56px;pointer-events:none;z-index:5;
  background:linear-gradient(90deg,transparent,rgba(0,0,0,.10) 44%,rgba(0,0,0,.20) 50%,rgba(0,0,0,.08) 56%,transparent)}
.ml-js .ml-book.ml-flipping::after{opacity:0}

/* ruhige Fassung (prefers-reduced-motion oder Bibliothek fehlt): Seiten ohne Animation tauschen */
.ml-static{display:grid;grid-template-columns:minmax(0,1fr);touch-action:pan-y}
.ml-static.ml-land{grid-template-columns:repeat(2,minmax(0,1fr))}
.ml-static .ml-page{display:none;aspect-ratio:1240/1754;box-shadow:0 18px 40px rgba(0,0,0,.35)}
.ml-static .ml-page.is-on{display:block}
.ml-static.ml-land .ml-page.is-on.ml-right{grid-column:2}
.ml-static.ml-land .ml-page.is-on.ml-left{grid-column:1}
.ml-static .ml-page img{cursor:pointer}

/* Kapitelleiste: Breite je Kapitel = Seitenzahl */
.ml-rail{display:flex;gap:3px;max-width:1240px;margin:26px auto 0;height:22px}
.ml-seg{--f:0;flex:1 1 0;min-width:10px;display:flex;align-items:center;justify-content:center;text-decoration:none;border-radius:3px;
  background:linear-gradient(90deg,rgba(169,198,236,.55) calc(var(--f)*100%),rgba(169,198,236,.14) 0);
  color:var(--ml-muted);font:600 12px/1 var(--f-cond);letter-spacing:.04em;font-variant-numeric:tabular-nums;overflow:hidden}
.ml-seg.is-here{color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55)}
.ml-seg:hover{color:#fff}
.ml-seg span{pointer-events:none}

/* Bedienleiste */
.ml-bar{max-width:1240px;margin:14px auto 0;display:flex;align-items:center;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.ml-nav,.ml-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ml-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--ml-line);
  background:transparent;color:var(--ml-text);font:500 15px/1 var(--f-text);text-decoration:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ml-btn svg{fill:currentColor;flex:0 0 auto}
.ml-btn small{font-size:13px;color:var(--ml-muted)}
.ml-btn:hover{background:rgba(169,198,236,.14);color:#fff}
.ml-btn[disabled]{opacity:.38;cursor:default;background:transparent}
.ml-count{margin:0;min-width:11.5em;text-align:center;font:600 17px/1.2 var(--f-cond);letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums}
.ml-hint{max-width:1240px;margin:12px auto 0;font-size:14px;line-height:1.45;color:var(--ml-muted)}

/* Inhaltsverzeichnis im Leser */
.ml-toc{position:relative}
.ml-toc summary{list-style:none}
.ml-toc summary::-webkit-details-marker{display:none}
.ml-toc[open] summary{background:rgba(169,198,236,.18);color:#fff}
.ml-toc-list{position:absolute;z-index:40;right:0;bottom:calc(100% + 10px);width:min(420px,calc(100vw - 32px));max-height:min(70vh,560px);overflow:auto;
  margin:0;padding:8px;list-style:none;background:#fff;color:var(--ink);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.4)}
.ml-toc-list li{margin:0}
.ml-toc-list a{display:grid;grid-template-columns:2.2em minmax(0,1fr) auto;gap:10px;align-items:baseline;padding:10px 12px;border-radius:10px;
  color:var(--ink);text-decoration:none;font:500 16px/1.3 var(--f-text)}
.ml-toc-list a:hover,.ml-toc-list a:focus-visible{background:#eef4fb;outline:none}
.ml-toc-list a:focus-visible{box-shadow:inset 0 0 0 2px var(--blue-accent)}
.ml-toc-list a[aria-current]{background:#eef4fb;font-weight:600}
.ml-toc-no{font:700 15px/1 var(--f-cond);color:var(--blue-accent)}
.ml-toc-p{font:600 14px/1 var(--f-cond);color:var(--ink-muted);font-variant-numeric:tabular-nums}

/* Vollbild (echtes Vollbild und Ersatz für Geräte ohne Fullscreen-API) */
.ml-stage:fullscreen{overflow:auto;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
.ml-stage.ml-isfull{position:fixed;inset:0;z-index:1000;overflow:auto;display:flex;flex-direction:column;justify-content:center;padding:14px 16px}
.ml-stage:fullscreen > *,.ml-stage.ml-isfull > *{width:100%;flex:0 0 auto}
.ml-stage:fullscreen .ml-head,.ml-stage.ml-isfull .ml-head{margin-bottom:10px;justify-content:center}
.ml-stage:fullscreen .ml-skip,.ml-stage.ml-isfull .ml-skip,.ml-stage:fullscreen .ml-hint,.ml-stage.ml-isfull .ml-hint{display:none}
.ml-stage:fullscreen .ml-title,.ml-stage.ml-isfull .ml-title{font-size:18px}
html.ml-lock,html.ml-lock body{overflow:hidden}

/* Volltext unter dem Leser */
.ml-textintro{padding:56px 0 0}
.ml-textintro p{font-size:clamp(18px,2vw,21px);line-height:1.5;max-width:60ch}
.ml-chlist{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr));gap:4px 28px}
.ml-chlist li{margin:0}
.ml-chlist a{display:block;padding:7px 0;font-weight:500}
.ml-chlist a[aria-current]{font-weight:600;text-decoration:none}
.ml-volltext > section:first-child,.ml-volltext > div:first-child{margin-top:40px}
.hero .ml-was-h1{color:#fff;font-weight:800;font-size:clamp(40px,8.6vw,100px);line-height:1;letter-spacing:-.02em;margin:0 0 22px;hyphens:none;max-width:none}
.ml-chlinks{display:flex;flex-wrap:wrap;gap:6px 22px;margin:14px 0 0;font-size:16px}
.ml-chlinks a{font-weight:500}
.tone-dark .ml-chlinks a,.hero .ml-chlinks a{color:var(--ml-soft)}
.tone-dark .ml-chlinks a:hover{color:#fff}

/* Kapitelseiten */
.ml-art > section:first-child{padding-top:56px}
.ml-art > section.tone-dark:first-child{padding-top:96px}
.ml-art-h1{font-weight:800;font-size:clamp(32px,5vw,56px);line-height:1.06;letter-spacing:-.02em;max-width:22ch}
.tone-dark .ml-art-h1{color:#fff}
.ml-srcs{padding:56px 0 24px}
.ml-srcs h2{font-size:clamp(24px,3vw,32px)}
.ml-srcs ul{max-width:80ch;font-size:15.5px;line-height:1.5;color:var(--ink-muted)}
.ml-chnav{background:var(--sand);padding:44px 0 56px;margin-top:24px}
.ml-chnav .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ml-chnav .wrap > .ml-chlist,.ml-chnav .wrap > p{grid-column:1 / -1}
.ml-chnav-prev,.ml-chnav-next{display:block;padding:18px 20px;border-radius:20px;background:#fff;text-decoration:none;font:600 18px/1.3 var(--f-display);color:var(--navy)}
.ml-chnav-next{text-align:right}
.ml-chnav small{display:block;font:500 14px/1.3 var(--f-text);color:var(--ink-muted);margin-bottom:6px}
.ml-chnav .ml-chlist{margin-top:18px}

@media (max-width:700px){
  .ml-stage{padding:14px 16px 18px}
  .ml-bar{justify-content:center}
  .ml-nav{width:100%;justify-content:space-between;flex-wrap:nowrap}
  .ml-count{min-width:0;flex:1 1 auto;font-size:16px}
  .ml-btn{padding:0 14px}
  .ml-nav .ml-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ml-tools{width:100%;justify-content:center}
  .ml-toc{position:static}
  .ml-toc-list{position:fixed;left:12px;right:12px;bottom:12px;width:auto;max-height:72vh;z-index:1001}
  .ml-site-in{flex-wrap:nowrap;gap:8px;padding:8px 12px}
  .ml-brand{font-size:15px}
  .ml-site-nav{gap:4px;flex-wrap:nowrap}
  .ml-site-nav a{font-size:14px;padding:8px 5px}
  .ml-langs a{padding:8px 6px}
  .ml-stage{overflow:visible}
  .ml-head{margin-bottom:10px}
  .ml-skip{font-size:14px}
  .ml-rail{height:18px}
  .ml-chnav .wrap{grid-template-columns:minmax(0,1fr)}
  .ml-chnav-next{text-align:left}
  .ml-rail{margin-top:20px}
}
@media (prefers-reduced-motion:reduce){
  .ml-btn,.ml-seg{transition:none}
}

/* Korrektur zum Magazin-HTML: Die hochgestellten Fußnotenzeichen der Tabelle „Wer sanktioniert wen“ sind absolut
   positioniert. Ohne Animation (prefers-reduced-motion) fehlte ihnen ein Bezugsrahmen, und die Seite lief seitlich über. */
.mxwrap{position:relative}