/* ============================================================================
   SEITEN · alle oeffentlichen Seiten ausser Startseite, Admin und den Danke-
   Tor-Seiten (Stand 08.10.2026, v2). Gegenstueck: assets/js/seiten.js.
   Die gemeinsame Huelle (Laufband, Kopf, Leiste "Alles von The Assaulter",
   Fuss) steht in assets/css/marke.css; hier stehen
     1. die alten Kopf- und Fusszeilen (verborgen, bleiben im HTML),
     2. die Seitenkopf-Buehne je Seitentyp (Produkt, Inhalt, Service/Recht):
        roter Schleier, HUD-Ecken, HUD-Text, gestaffelter Aufstieg,
     3. Lagetisch-Karten fuer /buch und /ebook, "Passt dazu", /hilfe,
     4. Bausteine im Shop-Stil (Knoepfe, Karten, Abschnitte) und die
        Bewegungssprache (Fortschritt, Korn, Einblenden).
   Kaufbereiche (/buch .editions, [data-pp-tier], /ebook .eb-produkt, #ebBald,
   #ebKauf, #ebFertig, Formulare) bekommen hier nur Layout von aussen, keine
   Regel greift in ihre Knoepfe oder Felder. Bewegung nur ueber transform und
   opacity; bei prefers-reduced-motion steht alles still (unten).
   ============================================================================ */

:root{ --mk-g:clamp(20px, 4vw, 56px); }

/* =========================================================================
   1. Alte Kopf- und Fusszeilen: verborgen, nicht geloescht
   ========================================================================= */
.c-nav, .legal-nav, body > nav.nav, .c-foot, .legal-foot, body > footer:not(.st-fuss){ display:none !important; }
/* Fuss der Huelle gegen Element-Regeln einzelner Seiten (404, /buch: footer{...}) */
footer.st-fuss{ display:block; gap:normal; font-size:16px; line-height:1.6; letter-spacing:normal; text-transform:none; }
.mk-alles, .st-hdr, .st-laufband{ line-height:normal; }
/* Sprungziele nicht unter den klebenden Kopf */
html{ scroll-padding-top:calc(var(--st-hdr-h) + 16px); }
body{ background-color:var(--mk-ink); }

/* =========================================================================
   2. Bausteine im Shop-Stil
   ========================================================================= */
.mk-kick{ display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; font:500 11px/1.4 var(--mk-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mk-steel); }
.mk-kick::before{ content:""; width:22px; height:1px; background:var(--mk-blood); flex:0 0 auto; }
.mk-btn{ position:relative; display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:52px; padding:0 26px; border:1px solid transparent;
  font:500 12px/1 var(--mk-mono); letter-spacing:.2em; text-transform:uppercase; white-space:nowrap; text-decoration:none;
  transition:background .25s var(--mk-ease), border-color .25s var(--mk-ease), color .25s var(--mk-ease), box-shadow .3s var(--mk-ease); }
.mk-btn:active{ transform:translateY(1px); }
.mk-btn--primaer{ background:var(--mk-blood-ui); color:#fff; }
.mk-btn--primaer:hover{ background:var(--mk-blood); color:#fff; box-shadow:0 16px 36px -14px rgba(217,52,43,.75); }
.mk-btn--geist{ border-color:var(--mk-line-2); color:var(--mk-cream); background:transparent; }
.mk-btn--geist:hover{ border-color:var(--mk-cream); background:rgba(245,241,234,.04); color:var(--mk-cream); }
.mk-btn .arrow{ transition:transform .25s var(--mk-ease); }
.mk-btn:hover .arrow{ transform:translateX(4px); }
.mk-btn:focus-visible{ outline:2px solid var(--mk-blood-hi); outline-offset:3px; }
.mk-nb{ white-space:nowrap; }

/* Knoepfe der Seiten (nicht in Kaufbereichen): Pfeil und Glimmen wie im Shop */
:is(main, .mk-passt) :is(.btn, .knopf, .kaufen){ transition:background .25s var(--mk-ease), border-color .25s var(--mk-ease), color .25s var(--mk-ease), box-shadow .3s var(--mk-ease); }
:is(main, .mk-passt) :is(.btn, .knopf):not(.editions *, form *):hover{ box-shadow:0 16px 36px -14px rgba(217,52,43,.75); }
:is(main) :is(.btn, .kaufen) [aria-hidden="true"]:last-child{ display:inline-block; transition:transform .25s var(--mk-ease); }
:is(main) :is(.btn, .kaufen):hover [aria-hidden="true"]:last-child{ transform:translateX(4px); }

/* Abschnitte: kurze rote Marke vor Ueberschriften im Fliesstext (Recht, Service, Inhalt) */
main.legal-wrap > h2, main.legal-wrap > section > h2, main .c-prose > h2{ position:relative; padding-top:18px; }
main.legal-wrap > h2::before, main.legal-wrap > section > h2::before, main .c-prose > h2::before{ content:""; position:absolute; left:0; top:0; width:28px; height:2px; background:var(--mk-blood); }
/* Rechtliche Seiten: Reiter wie die Kategorien im Shop */
.legal-tabs{ gap:6px; }
.legal-tabs a{ border-color:var(--mk-line-2); transition:color .2s var(--mk-ease), border-color .2s var(--mk-ease), background .2s var(--mk-ease); }
.legal-tabs a.active{ color:#fff; background:var(--mk-blood-ui); border-color:var(--mk-blood-ui); }

/* =========================================================================
   3. SEITENKOPF-BUEHNE
   .mk-buehne (Recht/Service/Inhalt/Produkt) und .kopf (Blog). Ein Band ueber
   die volle Breite mit rotem Schleier und Haarlinien, darin ein HUD-Rahmen
   um den Kopf der Seite (Akte, Uhr Kabul, Koordinaten) und eine rote
   Horizontlinie. Der Inhalt steigt gestaffelt auf.
   ========================================================================= */
.mk-buehne{ position:relative; isolation:isolate; margin-bottom:clamp(36px, 5vw, 60px); padding:clamp(70px, 8vw, 104px) 0 clamp(62px, 7vw, 92px); }
.mk-buehne::before{ content:""; position:absolute; z-index:-2; top:0; bottom:0; left:50%; width:100vw; margin-left:-50vw; pointer-events:none;
  background:
    radial-gradient(44% 92% at 88% 6%, rgba(217,52,43,.2), transparent 70%),
    radial-gradient(34% 74% at 2% 100%, rgba(217,52,43,.12), transparent 72%),
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(168,176,181,.022) 3px 4px),
    linear-gradient(180deg, var(--mk-ink-deep) 0%, var(--mk-ink) 78%); }
/* Buehne in einer linksbuendigen Spalte (Pillar-Seite, Feedback): Band ab dem linken Fensterrand */
.c-wrap > .c-prose .mk-buehne::before{ left:calc(-1 * (max(0px, (100vw - 1080px) / 2) + var(--mk-g))); margin-left:0; }
.c-wrap > .c-prose .mk-buehne::after{ left:calc(-1 * (max(0px, (100vw - 1080px) / 2) + var(--mk-g))); margin-left:0; }
.mk-buehne::after, .kopf::after{ content:""; position:absolute; z-index:-1; left:50%; bottom:0; width:100vw; margin-left:-50vw; height:1px; pointer-events:none;
  background:linear-gradient(90deg, transparent 4%, rgba(217,52,43,.55) 30%, var(--mk-blood-hi) 50%, rgba(217,52,43,.55) 70%, transparent 96%);
  box-shadow:0 0 22px 1px rgba(217,52,43,.42); }
.kopf{ isolation:isolate;
  background:radial-gradient(44% 92% at 88% 6%, rgba(217,52,43,.2), transparent 70%) no-repeat,
    radial-gradient(34% 74% at 2% 100%, rgba(217,52,43,.12), transparent 72%) no-repeat,
    repeating-linear-gradient(90deg, transparent 0 3px, rgba(168,176,181,.022) 3px 4px),
    linear-gradient(180deg, var(--mk-ink-deep) 0%, var(--mk-ink) 78%); }
.kopf::after{ left:0; width:100%; margin-left:0; }
/* Luft unter der roten Unterkante wie unter .mk-buehne (Inhalt, Inhaltsverzeichnis und
   Leseleiste stiessen sonst direkt an die Linie) */
.kopf{ margin-bottom:clamp(36px, 5vw, 60px); }
.kopf--bild{ background:none; }
/* Abstaende: Platz fuer die HUD-Beschriftung oben und unten */
.kopf-innen{ position:relative; padding-top:70px; padding-bottom:64px; }
.kopf-uebersicht .kopf-innen{ padding-top:72px; padding-bottom:66px; }
.kopf--bild .kopf-innen{ padding-top:64px; }
main.legal-wrap:has(> .mk-buehne:first-child), main.thanks-wrap:has(> .mk-buehne:first-child), body > main:has(> .mk-buehne:first-child){ padding-top:0; }
.c-hero.mk-buehne{ padding:clamp(70px, 8vw, 104px) 0 clamp(62px, 7vw, 92px); }
.c-prose .mk-buehne{ padding-top:clamp(64px, 7vw, 96px); }
.c-prose:has(> .mk-buehne:first-child){ padding-top:0 !important; }
.mk-buehne--mitte{ text-align:center; }
.mk-buehne.mk-buehne--mitte h1{ font-size:clamp(2.125rem, 1rem + 3.4vw, 3.75rem); }

/* Ueberschrift: gross wie im Shop, roter Schleier (Schmiere) links */
.mk-buehne h1, .kopf h1{ position:relative; margin:0 0 20px; font-family:var(--mk-display); font-weight:800; font-size:clamp(2.125rem, 1.2rem + 4.6vw, 5.25rem); line-height:.98;
  letter-spacing:-.025em; color:var(--mk-cream); text-wrap:balance; overflow-wrap:break-word; text-shadow:-12px 0 9px rgba(217,52,43,.24); }
.kopf h1{ font-size:clamp(2.125rem, 1.25rem + 3.9vw, 4.5rem); line-height:1.02; }
.mk-buehne--service h1{ font-size:clamp(2.125rem, 1.2rem + 4vw, 4.5rem); }
.mk-buehne h1:last-child{ margin-bottom:0; }
.mk-buehne h1 :is(.accent, em), .kopf h1 .satz{ color:var(--mk-blood-hi); }
.mk-buehne h1 em{ font-style:italic; }
.mk-buehne :is(.lead, .lede){ max-width:46ch; margin:0 0 18px; font-size:clamp(16px, 1.1vw + 11px, 19px); line-height:1.6; color:var(--mk-cream-dim); }
.mk-buehne--mitte :is(.lead, .lede, p){ margin-left:auto; margin-right:auto; }
.mk-buehne .stand{ margin:14px 0 0; }

/* Augenbraue: roter Punkt mit Ping wie im Shop */
.mk-buehne :is(.eyebrow, .legal-eyebrow), .kopf .kopf-marke{ position:relative; display:inline-flex; align-items:center; gap:12px; margin:0 0 22px;
  font:500 11px/1.4 var(--mk-mono); letter-spacing:.2em; text-transform:uppercase; color:var(--mk-steel); }
.kopf .kopf-marke{ display:flex; color:var(--mk-blood-hi); }
.mk-buehne :is(.eyebrow, .legal-eyebrow)::before, .kopf .kopf-marke::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--mk-blood); flex:0 0 auto; animation:none; transform:none; }
.mk-buehne :is(.eyebrow, .legal-eyebrow)::after, .kopf .kopf-marke::after{ content:""; position:absolute; left:0; top:50%; width:7px; height:7px; margin-top:-3.5px; border-radius:50%;
  background:var(--mk-blood); opacity:0; animation:mk-ping 2.6s 1.4s var(--mk-ease-out) infinite; pointer-events:none; }
.mk-buehne--mitte .legal-eyebrow{ display:flex; width:max-content; max-width:100%; margin-left:auto; margin-right:auto; }

/* HUD: Rahmen, Akte, Uhr, Koordinaten */
.mk-buehne, .c-hero.mk-buehne, .kopf-innen{ position:relative; }
.mk-hud{ position:absolute; z-index:-1; top:16px; bottom:16px; left:calc(-1 * clamp(8px, 2vw, 28px)); right:calc(-1 * clamp(8px, 2vw, 28px)); pointer-events:none; }
/* Im Blog liegt der Rahmen im Kopf mit eigenem Innenabstand (--rand) */
.kopf-innen > .mk-hud{ left:calc(var(--rand, 20px) - clamp(8px, 2vw, 28px)); right:calc(var(--rand, 20px) - clamp(8px, 2vw, 28px)); }
.mk-hud i{ position:absolute; width:22px; height:22px; border:0 solid var(--mk-blood); }
.mk-hud i.tl{ top:0; left:0; border-top-width:2px; border-left-width:2px; }
.mk-hud i.tr{ top:0; right:0; border-top-width:2px; border-right-width:2px; }
.mk-hud i.bl{ bottom:0; left:0; border-bottom-width:2px; border-left-width:2px; }
.mk-hud i.br{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
.mk-ht{ position:absolute; font:400 10px/1 var(--mk-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--mk-cream); background:rgba(10,10,11,.78);
  padding:5px 7px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mk-ht b{ color:var(--mk-blood-hi); font-weight:500; }
.mk-ht.tl{ top:3px; left:32px; } .mk-ht.tr{ top:3px; right:32px; }
.mk-ht.bl{ bottom:3px; left:32px; } .mk-ht.br{ bottom:3px; right:32px; }
/* Abtastlinie: laeuft einmal von oben nach unten ueber die Buehne */
.mk-hud::after{ content:""; position:absolute; inset:0; transform-origin:50% 0; opacity:0;
  background:linear-gradient(180deg, rgba(240,86,75,0) 0%, rgba(240,86,75,.05) 92%, rgba(240,86,75,.7) 100%); }
@media (max-width:640px){
  .mk-hud{ top:10px; bottom:10px; }
  .mk-hud i{ width:15px; height:15px; }
  .mk-ht{ font-size:9px; padding:4px 6px; letter-spacing:.14em; }
  .mk-ht.tl, .mk-ht.bl{ left:22px; } .mk-ht.tr, .mk-ht.br{ right:22px; }
  .mk-ht.br{ display:none; }
  .mk-buehne, .c-hero.mk-buehne{ padding-top:62px; padding-bottom:58px; }
  .kopf-innen, .kopf-uebersicht .kopf-innen{ padding-top:60px; padding-bottom:56px; }
}
@media (max-width:359px){ .mk-ht.tr{ display:none; } }

/* Produkt-Buehne (/buch, /ebook): Text links, Lagetisch rechts */
.mk-buehne--produkt, .shop-hero.mk-buehne--produkt{ padding:clamp(36px, 5vw, 72px) 0 clamp(44px, 6vw, 80px); }
.mk-buehne--produkt h1{ font-size:clamp(2.5rem, 1rem + 3.4vw, 4rem); line-height:.98; }
.mk-buehne-raster{ display:grid; grid-template-columns:minmax(0, 1fr); gap:0; align-items:center; }
.mk-buehne-raster > *{ min-width:0; }
.mk-buehne--breit{ width:min(1320px, calc(100vw - 2 * var(--mk-g))); margin-left:calc((100% - min(1320px, calc(100vw - 2 * var(--mk-g)))) / 2); }
.mk-cta{ display:flex; flex-wrap:wrap; gap:12px; margin:26px 0 0; }
.mk-fakten{ list-style:none; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; max-width:560px; margin:30px 0 0; padding:18px 0 0; border-top:1px solid var(--mk-line); }
.mk-fakten li{ margin:0; max-width:none; }
.mk-fakten b{ display:block; font:800 clamp(19px, 1.5vw + 8px, 26px)/1.1 var(--mk-display); color:var(--mk-cream); }
.mk-fakten span{ display:block; margin-top:5px; font:400 10px/1.45 var(--mk-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mk-muted); }
@media (min-width:960px){
  .mk-buehne-raster{ grid-template-columns:minmax(0, .9fr) minmax(0, 1.1fr); column-gap:clamp(40px, 5vw, 84px); }
}
@media (max-width:959px){
  .mk-buehne-raster{ display:flex; flex-direction:column; align-items:stretch; }
  .mk-buehne-raster .mk-lage-spalte{ order:2; margin:6px 0 22px; }
  .mk-buehne-text{ display:contents; }
  .mk-buehne-text > :is(.eyebrow, .legal-eyebrow, h1){ order:1; }
  .mk-buehne-text > :not(.eyebrow, .legal-eyebrow, h1){ order:3; }
  .mk-fakten{ gap:10px; }
}

/* =========================================================================
   4. LAGETISCH (Produkt): Cover-Optik, Haarlinien-Raster, Gegenstaende,
   HUD. Gleiche Sprache wie der Lagetisch auf der Startseite und im Shop.
   ========================================================================= */
.mk-lage{ position:relative; aspect-ratio:1.16 / 1; width:100%; overflow:hidden; isolation:isolate; border:1px solid rgba(168,176,181,.2);
  background:
    radial-gradient(62% 58% at 0% 100%, rgba(229,71,47,.6), rgba(229,71,47,.2) 46%, rgba(229,71,47,0) 74%),
    radial-gradient(46% 40% at 100% 0%, rgba(229,71,47,.16), transparent 70%),
    radial-gradient(130% 110% at 34% 16%, #AEB8BC 0%, #8E9AA0 42%, #6A777D 76%, #525D63 100%);
  box-shadow:0 50px 100px -50px #000; }
.mk-lage-raster{ position:absolute; inset:0; z-index:0; pointer-events:none;
  background:
    linear-gradient(90deg, transparent calc(50% - .5px), rgba(194,44,36,.24) calc(50% - .5px), rgba(194,44,36,.24) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(0deg, transparent calc(50% - .5px), rgba(194,44,36,.24) calc(50% - .5px), rgba(194,44,36,.24) calc(50% + .5px), transparent calc(50% + .5px)),
    linear-gradient(rgba(10,10,11,.085) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(10,10,11,.085) 1px, transparent 1px) 0 0 / 32px 32px; }
.mk-lage-raster::before, .mk-lage-raster::after{ content:""; position:absolute; left:50%; top:50%; border:1px solid rgba(10,10,11,.08); border-radius:50%; transform:translate(-50%, -50%) rotate(-14deg); }
.mk-lage-raster::before{ width:52%; height:40%; }
.mk-lage-raster::after{ width:86%; height:66%; }
.mk-li{ position:absolute; z-index:2; }
.mk-li-in{ width:100%; height:100%; transform:rotate(var(--r, 0deg)); filter:drop-shadow(0 16px 18px rgba(10,10,11,.45)); animation:mk-land .95s var(--mk-ease-out) both; animation-delay:calc(var(--o, 0) * 1s); }
/* Buch (echtes Cover-Bild) */
.mk-li--buch{ z-index:4; }
.mk-li--buch :is(picture, img){ display:block; width:100%; height:auto; }
.mk-li--buch img{ border:0 !important; box-shadow:inset 0 0 0 1px rgba(0,0,0,.35), 5px 5px 0 -1px #e2dbcd, 6px 6px 0 -1px rgba(0,0,0,.35) !important; }
.mk-li--buch .mk-li-in::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(115deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.18) 52%, rgba(255,255,255,0) 66%); }
.mk-li--buch .mk-li-in{ position:relative; }
/* Abzug (Foto mit rotem Klebestreifen) */
.mk-abzug{ position:relative; display:block; width:100%; height:100%; padding:5%; background:#E9E3D8; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 30px -12px rgba(0,0,0,.75); }
.mk-abzug img{ display:block; width:100%; height:100%; object-fit:cover; }
.mk-abzug::before{ content:""; position:absolute; z-index:1; left:50%; top:-6%; width:28%; height:10%; transform:translateX(-50%) rotate(-3deg); background:rgba(217,52,43,.78); box-shadow:0 2px 6px rgba(0,0,0,.35); }
/* Lesegeraet mit aufgeschlagener Seite (wie auf der Startseite) */
.mk-geraet{ position:relative; display:block; width:100%; height:100%; padding:7% 6% 13%; border-radius:8% / 6%; container-type:inline-size;
  background:linear-gradient(145deg, #2a2c30, #0d0e10 60%); box-shadow:0 30px 60px -20px rgba(0,0,0,.9), inset 0 0 0 1px rgba(255,255,255,.08); }
.mk-geraet::after{ content:""; position:absolute; left:50%; bottom:4.6%; width:20%; height:1.6%; margin-left:-10%; border-radius:4px; background:rgba(255,255,255,.14); }
.mk-schirm{ position:relative; display:flex; flex-direction:column; width:100%; height:100%; padding:9% 9% 7%; overflow:hidden; background:linear-gradient(160deg, #f1ece2, #e2dbcd); }
.mk-schirm::after{ content:""; position:absolute; inset:0; background:linear-gradient(120deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 42%); }
.mk-schirm-kopf{ font:500 5.2cqw/1 var(--mk-mono); letter-spacing:.2em; text-transform:uppercase; color:#5f5f64; }
.mk-schirm-titel{ margin:7cqw 0 5cqw; font:900 15cqw/1 var(--mk-display); color:#B0261F; }
.mk-schirm-zeilen{ display:grid; gap:3.4cqw; }
.mk-schirm-zeilen i{ display:block; height:2.2cqw; background:rgba(42,42,44,.32); border-radius:1px; }
.mk-schirm-zeilen i:nth-child(3n){ width:82%; } .mk-schirm-zeilen i:last-child{ width:56%; }
.mk-schirm-fuss{ margin-top:auto; font:500 4.4cqw/1 var(--mk-mono); letter-spacing:.14em; text-transform:uppercase; color:#6c6c72; }
/* Zettel (Lieferschein, Exemplar) */
.mk-zettel{ display:block; width:100%; padding:7% 8% 8%; container-type:inline-size; background:#F1ECE2; color:#2a2a2c; box-shadow:0 1px 0 rgba(255,255,255,.6) inset, 0 18px 30px -12px rgba(0,0,0,.7);
  background-image:repeating-linear-gradient(0deg, transparent 0 13cqw, rgba(42,42,44,.09) 13cqw calc(13cqw + 1px)); }
.mk-zettel b{ display:block; margin:0 0 6cqw; font:600 6.2cqw/1 var(--mk-mono); letter-spacing:.24em; text-transform:uppercase; color:#B0261F; }
.mk-zettel span{ display:block; font:500 5.6cqw/2.33 var(--mk-mono); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mk-zettel span i{ font-style:normal; color:#B0261F; }
/* HUD des Lagetischs */
.mk-lage-hud{ position:absolute; inset:0; z-index:6; pointer-events:none; animation:mk-blende .8s .9s ease both; }
.mk-lage-hud i{ position:absolute; width:22px; height:22px; border:0 solid var(--mk-blood); }
.mk-lage-hud i.tl{ top:12px; left:12px; border-top-width:2px; border-left-width:2px; }
.mk-lage-hud i.tr{ top:12px; right:12px; border-top-width:2px; border-right-width:2px; }
.mk-lage-hud i.bl{ bottom:12px; left:12px; border-bottom-width:2px; border-left-width:2px; }
.mk-lage-hud i.br{ bottom:12px; right:12px; border-bottom-width:2px; border-right-width:2px; }
.mk-lage-hud span{ position:absolute; font:400 10px/1 var(--mk-mono); letter-spacing:.18em; text-transform:uppercase; color:var(--mk-cream); background:rgba(10,10,11,.78); padding:5px 7px; white-space:nowrap; font-variant-numeric:tabular-nums; }
.mk-lage-hud span b{ color:var(--mk-blood-hi); font-weight:500; }
.mk-lage-hud .tl{ top:16px; left:40px; } .mk-lage-hud .tr{ top:16px; right:40px; }
.mk-lage-hud .bl{ bottom:16px; left:40px; } .mk-lage-hud .br{ bottom:16px; right:40px; }
@media (max-width:640px){
  .mk-lage-hud span{ font-size:9px; padding:4px 6px; }
  .mk-lage-hud .tl, .mk-lage-hud .bl{ left:30px; } .mk-lage-hud .tr, .mk-lage-hud .br{ right:30px; }
  .mk-lage-hud .tl, .mk-lage-hud .tr{ top:12px; } .mk-lage-hud .bl, .mk-lage-hud .br{ bottom:12px; }
  .mk-lage-hud .bl{ display:none; }
  .mk-lage-hud i{ width:16px; height:16px; }
  .mk-lage-hud i.tl, .mk-lage-hud i.tr{ top:8px; } .mk-lage-hud i.bl, .mk-lage-hud i.br{ bottom:8px; }
  .mk-lage-hud i.tl, .mk-lage-hud i.bl{ left:8px; } .mk-lage-hud i.tr, .mk-lage-hud i.br{ right:8px; }
}
/* Legende unter dem Tisch */
.mk-legende{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); border:1px solid var(--mk-line); border-top:0; background:#0E0F11; }
.mk-legende li{ margin:0; max-width:none; padding:11px 14px 12px; }
.mk-legende li + li{ border-left:1px solid var(--mk-line); }
.mk-legende i{ display:block; font:500 10px/1 var(--mk-mono); font-style:normal; letter-spacing:.1em; color:var(--mk-blood-hi); }
.mk-legende b{ display:block; margin-top:4px; font:800 15px/1.2 var(--mk-display); color:var(--mk-cream); }
.mk-legende span{ display:block; margin-top:2px; font:400 10.5px/1.35 var(--mk-mono); letter-spacing:.06em; color:var(--mk-muted); }

/* ---------------------------------------------------------------- /buch */
.shop-hero.mk-buehne{ margin-bottom:0; }
.shop-hero.mk-buehne::before{ left:0; width:100%; margin-left:0; }
.shop-hero.mk-buehne::after{ left:0; width:100%; margin-left:0; }
.shop-hero.mk-buehne > .wrap{ position:relative; max-width:1320px; }
.shop-hero .mk-buehne-text .lede{ margin-bottom:0; }
/* Cover-Spalte liegt jetzt als Lagetisch in der Buehne */
.shop-hero .cover-col{ position:relative; top:auto; max-width:none; margin:0; }
.shop-hero .cover-frame{ position:relative; }
.shop-hero .cover-cap{ display:none; }
.mk-lage--buch .mk-li--buch{ left:9%; top:8%; width:43%; --r:-4deg; --o:.2; }
.mk-lage--buch .mk-li--geraet{ right:7%; top:13%; width:24%; aspect-ratio:.72; --r:7deg; --o:.45; z-index:3; }
.mk-lage--buch .mk-li--zettel{ right:9%; bottom:9%; width:33%; --r:-3deg; --o:.65; z-index:5; }
/* Kaufkarten: zwei Ausgaben nebeneinander, darunter die Hinweise (nur Anordnung) */
.shop-grid{ padding-top:clamp(40px, 6vw, 80px); }
.shop-hero ~ main .shop-grid{ grid-template-columns:minmax(0, 1fr); }
.shop-hero ~ main .editions{ display:grid; grid-template-columns:minmax(0, 1fr); gap:0 20px; max-width:1180px; margin:0 auto; }
@media (min-width:880px){
  .shop-hero ~ main .editions{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .shop-hero ~ main .editions > :not(.prod){ grid-column:1 / -1; }
}
.mk-bestellen-kopf{ width:100%; max-width:1180px; margin:0 auto 22px; }
.mk-bestellen-kopf h2{ margin:0; font:800 clamp(28px, 3.4vw, 46px)/1.02 var(--mk-display); letter-spacing:-.02em; color:var(--mk-cream); }
.mk-bestellen-kopf h2 em{ font-style:italic; color:var(--mk-blood-hi); }
#bestellen{ scroll-margin-top:calc(var(--st-hdr-h) + 12px); }

/* ---------------------------------------------------------------- /ebook */
.mk-lage--ebook .mk-li--geraet{ left:36%; top:9%; width:31%; aspect-ratio:.72; --r:-5deg; --o:.25; z-index:4; }
.mk-lage--ebook .mk-li--cover{ left:8%; top:20%; width:27%; aspect-ratio:.714; --r:-9deg; --o:.45; z-index:3; }
.mk-lage--ebook .mk-li--zettel{ right:7%; top:44%; width:31%; --r:5deg; --o:.65; z-index:5; }
.mk-lage--ebook .mk-li--cover .mk-abzug{ padding:4%; }
.mk-kauf{ scroll-margin-top:calc(var(--st-hdr-h) + 12px); }

/* =========================================================================
   5. "Passt dazu" (unter dem Kaufbereich von /buch und /ebook)
   ========================================================================= */
.mk-passt{ position:relative; max-width:1180px; margin:clamp(56px, 8vw, 96px) auto 0; }
body > .mk-passt{ max-width:1180px; margin:0 auto clamp(56px, 8vw, 96px); padding:0 var(--mk-g); }
main.legal-wrap > .mk-passt{ width:min(1180px, calc(100vw - 2 * var(--mk-g))); margin-left:calc((100% - min(1180px, calc(100vw - 2 * var(--mk-g)))) / 2); }
.mk-passt-kopf{ display:flex; align-items:flex-end; justify-content:space-between; gap:12px 24px; flex-wrap:wrap; margin:0 0 22px; }
.mk-passt-kopf h2{ margin:0; padding:0; font:800 clamp(28px, 3.4vw, 46px)/1.02 var(--mk-display); letter-spacing:-.02em; color:var(--mk-cream); }
.mk-passt-kopf h2::before{ display:none; }
.mk-passt-kopf h2 em{ font-style:italic; color:var(--mk-blood-hi); }
.mk-passt-kopf p:not(.mk-kick){ margin:0; font:400 11px/1.6 var(--mk-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mk-muted); }
.mk-passt-liste{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fit, minmax(230px, 1fr)); gap:0; border-top:1px solid var(--mk-line); border-left:1px solid var(--mk-line); }
.mk-passt-liste > li{ display:flex; margin:0; max-width:none; background:var(--mk-ink-deep); border-right:1px solid var(--mk-line); border-bottom:1px solid var(--mk-line); }
.mk-passt-liste > li[hidden]{ display:none; }
.mk-karte{ position:relative; display:flex; flex-direction:column; width:100%; color:var(--mk-cream-dim); text-decoration:none; border:0 !important; transition:background .3s var(--mk-ease); }
.mk-karte::before{ content:""; position:absolute; z-index:2; left:0; right:0; top:-1px; height:2px; background:var(--mk-blood); transform:scaleX(0); transform-origin:left; transition:transform .45s var(--mk-ease-out); }
.mk-karte:hover{ background:rgba(217,52,43,.06); color:var(--mk-cream-dim); }
.mk-karte:hover::before, .mk-karte:focus-visible::before{ transform:scaleX(1); }
.mk-karte:focus-visible{ outline:2px solid var(--mk-blood-hi); outline-offset:-2px; }
.mk-karte-bild{ position:relative; display:block; aspect-ratio:4 / 3; overflow:hidden; isolation:isolate;
  background:radial-gradient(70% 70% at 0% 100%, rgba(229,71,47,.42), transparent 70%), radial-gradient(130% 110% at 34% 16%, #AEB8BC 0%, #8E9AA0 42%, #6A777D 76%, #525D63 100%); }
.mk-karte-ding{ position:absolute; left:50%; top:52%; width:42%; transform:translate(-50%, -50%) rotate(var(--r, -4deg)); transition:transform .6s var(--mk-ease-out); filter:drop-shadow(0 14px 16px rgba(10,10,11,.45)); }
.mk-karte:hover .mk-karte-ding{ transform:translate(-50%, -56%) rotate(calc(var(--r, -4deg) + 3deg)) scale(1.04); }
.mk-karte-ding--geraet{ width:30%; aspect-ratio:.72; }
.mk-karte-ding--buch img{ display:block; width:100%; height:auto; box-shadow:5px 5px 0 -1px #e2dbcd, 6px 6px 0 -1px rgba(0,0,0,.35); }
.mk-karte-ding--abzug{ width:46%; aspect-ratio:4 / 5; }
.mk-karte-ding--zettel{ width:54%; }
.mk-karte-ding--symbol{ width:30%; color:#1B1D21; filter:none; }
.mk-karte-ding--symbol svg{ display:block; width:100%; height:auto; fill:none; stroke:currentColor; stroke-width:1.2; stroke-linecap:round; stroke-linejoin:round; opacity:.55; }
.mk-karte-text{ position:relative; display:flex; flex-direction:column; gap:6px; flex:1 1 auto; padding:18px 20px 20px; }
.mk-karte-kick{ font:500 10px/1 var(--mk-mono); letter-spacing:.14em; text-transform:uppercase; color:var(--mk-blood-hi); }
.mk-karte-text > b{ font:800 20px/1.15 var(--mk-display); color:var(--mk-cream); }
.mk-karte-t{ font:400 13.5px/1.5 var(--mk-body); color:var(--mk-cream-dim); }
.mk-karte-fuss{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:auto; padding-top:10px; font:500 11px/1 var(--mk-mono); letter-spacing:.12em; text-transform:uppercase; color:var(--mk-cream); }
.mk-karte-fuss .arrow{ color:var(--mk-muted); transition:transform .3s var(--mk-ease), color .3s; }
.mk-karte:hover .mk-karte-fuss .arrow{ transform:translateX(4px); color:var(--mk-blood-hi); }
@media (max-width:1023px){ .mk-passt-liste{ grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@media (max-width:359px){ .mk-passt-liste{ grid-template-columns:minmax(0, 1fr); } }
@media (max-width:520px){
  .mk-karte-text{ padding:14px 14px 16px; }
  .mk-karte-text > b{ font-size:17px; }
  .mk-karte-t{ font-size:13px; }
}

/* =========================================================================
   6. /hilfe: Kachelraster der Sprungmarken, Akkordeon
   ========================================================================= */
.hilfe-inhalt{ counter-reset:hk; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)) !important; gap:0 !important; background:none; border-top:1px solid var(--mk-line); border-left:1px solid var(--mk-line); }
.hilfe-inhalt li{ display:flex; margin:0; max-width:none; background:var(--mk-ink-deep); counter-increment:hk; border-right:1px solid var(--mk-line); border-bottom:1px solid var(--mk-line); }
.hilfe-inhalt li[hidden]{ display:none; }
.hilfe-inhalt a{ position:relative; display:flex !important; flex-direction:column; justify-content:space-between; gap:18px; width:100%; min-height:96px; padding:14px 16px 16px !important;
  border:0 !important; background:transparent !important; font:500 11.5px/1.45 var(--mk-mono) !important; letter-spacing:.14em !important; color:var(--mk-cream) !important; padding-right:40px !important; }
.hilfe-inhalt a::before{ content:counter(hk, decimal-leading-zero); font:500 10px/1 var(--mk-mono); letter-spacing:.12em; color:var(--mk-blood-hi); }
.hilfe-inhalt a::after{ content:"→"; position:absolute; right:14px; bottom:14px; font:400 15px/1 var(--mk-body); color:var(--mk-muted); transition:transform .3s var(--mk-ease), color .3s; }
.hilfe-inhalt a:hover{ background:rgba(217,52,43,.07) !important; }
.hilfe-inhalt a:hover::after{ transform:translateX(4px); color:var(--mk-blood-hi); }
.hilfe-inhalt a:focus-visible{ outline:2px solid var(--mk-blood-hi); outline-offset:-2px; }
@media (max-width:520px){
  .hilfe-inhalt{ grid-template-columns:repeat(2, minmax(0, 1fr)) !important; }
  .hilfe-inhalt a{ min-height:92px; padding:12px 12px 14px !important; padding-right:28px !important; font-size:10.5px !important; letter-spacing:.1em !important; }
  .hilfe-inhalt a::after{ right:10px; bottom:12px; }
}
.hilfe-teil{ border-top:1px solid var(--mk-line); }
.hilfe-teil:last-of-type{ border-bottom:1px solid var(--mk-line); }
.hilfe-teil > h2{ margin:0 !important; padding:0 !important; font-size:clamp(20px, 2.2vw, 25px) !important; }
.hilfe-teil > h2::before{ display:none !important; }
.hilfe-teil > h2 > .hilfe-knopf{ display:flex; align-items:center; gap:16px; width:100%; min-height:64px; padding:16px 2px; margin:0; border:0; background:none; color:var(--mk-cream);
  font:inherit; text-align:left; cursor:pointer; }
.hilfe-knopf::after{ content:""; flex:0 0 auto; width:11px; height:11px; margin-left:auto; border-right:1.5px solid var(--mk-steel); border-bottom:1.5px solid var(--mk-steel); transform:translateY(-3px) rotate(45deg); transition:transform .3s var(--mk-ease); }
.hilfe-knopf[aria-expanded="true"]::after{ transform:translateY(3px) rotate(-135deg); border-color:var(--mk-blood-hi); }
.hilfe-knopf:hover{ color:var(--mk-blood-hi); }
.hilfe-knopf:focus-visible{ outline:2px solid var(--mk-blood-hi); outline-offset:2px; }
.hilfe-teil > .hilfe-panel{ padding:2px 0 22px; }
.hilfe-panel > :last-child{ margin-bottom:0; }
.hilfe-panel.is-auf{ animation:mk-auf .5s var(--mk-ease-out) both; }
.hilfe-wert{ color:var(--mk-cream); font-weight:500; }

/* =========================================================================
   7. Inhaltsseiten: Autorenportraet als Abzug mit HUD, Karten im Shop-Raster
   ========================================================================= */
.author-portrait picture{ position:relative; padding:4.5%; background:#E9E3D8; transform:rotate(-1.4deg); box-shadow:0 30px 60px -28px rgba(0,0,0,.9); transition:transform .6s var(--mk-ease-out); }
.author-portrait picture::before{ content:""; position:absolute; z-index:1; left:50%; top:-12px; width:30%; height:24px; transform:translateX(-50%) rotate(-3deg); background:rgba(217,52,43,.8); box-shadow:0 2px 6px rgba(0,0,0,.35); }
.author-portrait img{ border:0 !important; }
.author-portrait:hover picture{ transform:rotate(0deg) translateY(-4px); }
.author-portrait{ padding:14px; }
.author-portrait::before, .author-portrait::after{ content:""; position:absolute; width:22px; height:22px; border:0 solid var(--mk-blood); pointer-events:none; }
.author-portrait::before{ left:0; top:0; border-top-width:2px; border-left-width:2px; }
.author-portrait::after{ right:0; bottom:0; border-bottom-width:2px; border-right-width:2px; }
.author-grid .author-portrait{ position:sticky; top:calc(var(--st-hdr-h) + 24px); }
@media (max-width:820px){ .author-grid .author-portrait{ position:relative; top:auto; } }
.stat-chip{ background:var(--mk-ink-deep); border-color:var(--mk-line-2); }
.c-cta{ position:relative; background:radial-gradient(60% 120% at 100% 0%, rgba(217,52,43,.12), transparent 62%), var(--mk-ink-deep); border-color:rgba(217,52,43,.4); }
.c-cta::before, .c-cta::after{ content:""; position:absolute; width:22px; height:22px; border:0 solid var(--mk-blood); pointer-events:none; }
.c-cta::before{ left:10px; top:10px; border-top-width:2px; border-left-width:2px; }
.c-cta::after{ right:10px; bottom:10px; border-bottom-width:2px; border-right-width:2px; }

/* =========================================================================
   8. Bewegungssprache: Fortschritt, Korn, Links, Karten, Einblenden
   ========================================================================= */
/* Fortschritt beim Scrollen: rote Linie am oberen Rand (wie .bel-fortschritt) */
.sei-fortschritt{ position:fixed; z-index:61; left:0; top:0; height:2px; width:100%; pointer-events:none;
  background:linear-gradient(90deg, rgba(217,52,43,.4), #D9342B 70%, #F0564B); box-shadow:0 0 12px rgba(217,52,43,.55);
  transform-origin:0 50%; transform:scaleX(var(--sei-p, 0)); }
/* Filmkorn ueber der ganzen Seite: sehr leise, faengt keine Klicks ab */
.sei-korn{ position:fixed; z-index:59; inset:0; pointer-events:none; opacity:.035; background-image:var(--sei-korn); background-size:120px 120px; }
.sei-hud{ display:none; }
/* Links im Fliesstext: rote Unterstreichung waechst beim Hover von links */
main :is(p, li, dd, td, address) a:not(.btn, .btn-ghost, .knopf, .eb-knopf, .mk-btn, [class*="knopf"], [class*="card"], [class*="karte"]):not(.editions a, #kaufen a, .eb-produkt a, #ebKauf a, form a){
  background-image:linear-gradient(#D9342B, #D9342B); background-repeat:no-repeat; background-position:0 100%; background-size:0 1px;
  transition:background-size .35s cubic-bezier(.16,1,.3,1), color .2s ease, border-color .2s ease; }
main :is(p, li, dd, td, address) a:not(.btn, .btn-ghost, .knopf, .eb-knopf, .mk-btn, [class*="knopf"], [class*="card"], [class*="karte"]):not(.editions a, #kaufen a, .eb-produkt a, #ebKauf a, form a):hover{
  background-size:100% 1px; }
/* Karten: ruhiger Hub, Schatten, rote Kante oben */
a.blog-card, a.karte, .author-box, .c-more, .toc, .stat-chip, .lesekarte{ transition:border-color .3s ease, box-shadow .35s ease, transform .35s cubic-bezier(.16,1,.3,1); }
a.blog-card:hover, a.karte:hover{ box-shadow:inset 0 2px 0 #D9342B, 0 22px 44px -28px rgba(0,0,0,.95); }
.author-box:hover, .c-more:hover, .toc:hover, .stat-chip:hover{ border-color:rgba(217,52,43,.4); }
/* Einblenden beim Scrollen (nur, was seiten.js beim Start unterhalb findet) */
.sei-an .sei-auf{ opacity:0; transition:opacity .8s ease, transform .9s cubic-bezier(.16,1,.3,1), clip-path 1s cubic-bezier(.16,1,.3,1); }
.sei-an .sei-auf:not(h2){ transform:translateY(18px); }
.sei-an h2.sei-auf{ clip-path:inset(0 0 100% 0); }
.sei-an .sei-auf.sei-in{ opacity:1; transform:none; clip-path:inset(-.3em -.3em -.4em -.3em); }

/* =========================================================================
   9. Auftritt beim Laden: gestaffelter Aufstieg, Schleier, HUD, Tisch
   (reine CSS-Animationen, ohne Skript; bei reduzierter Bewegung aus)
   ========================================================================= */
@media (prefers-reduced-motion:no-preference){
  :where(.mk-buehne > :not(.mk-hud, .wrap, .mk-buehne-raster), .mk-buehne > .wrap > :not(.mk-hud, .mk-buehne-raster), .mk-buehne-text > *, .kopf-innen > :not(.mk-hud)){
    animation:mk-auf .9s var(--mk-ease-out) both; animation-delay:calc(.06s + var(--mk-i, 0) * .09s); }
  :is(.mk-buehne, .mk-buehne > .wrap, .mk-buehne-text, .kopf-innen) > :nth-child(2){ --mk-i:0; }
  :is(.mk-buehne, .mk-buehne > .wrap, .mk-buehne-text, .kopf-innen) > :nth-child(3){ --mk-i:1; }
  :is(.mk-buehne, .mk-buehne > .wrap, .mk-buehne-text, .kopf-innen) > :nth-child(4){ --mk-i:2; }
  :is(.mk-buehne, .mk-buehne > .wrap, .mk-buehne-text, .kopf-innen) > :nth-child(5){ --mk-i:3; }
  :is(.mk-buehne, .mk-buehne > .wrap, .mk-buehne-text, .kopf-innen) > :nth-child(n+6){ --mk-i:4; }
  .mk-buehne-text > :first-child{ --mk-i:0; }
  .mk-buehne h1, .kopf h1{ animation:mk-auf .9s var(--mk-ease-out) both, mk-schmier 2.4s var(--mk-ease-out) both; animation-delay:calc(.06s + var(--mk-i, 0) * .09s), .2s; }
  .mk-hud i{ animation:mk-ecke .9s var(--mk-ease-out) .25s both; }
  .mk-hud i.tl{ --dx:-10px; --dy:-10px; } .mk-hud i.tr{ --dx:10px; --dy:-10px; } .mk-hud i.bl{ --dx:-10px; --dy:10px; } .mk-hud i.br{ --dx:10px; --dy:10px; }
  .mk-ht{ animation:mk-blende .7s .75s ease both; }
  .mk-hud::after{ animation:mk-scan 1.5s .15s var(--mk-ease-out) both; }
  .mk-buehne::after, .kopf::after{ animation:mk-horizont 1.4s .35s var(--mk-ease-out) both; }
  .mk-buehne::before{ animation:mk-schleier 7s 1.5s ease-in-out infinite alternate; }
  .shop-hero.mk-buehne::before{ animation:mk-schleier 7s 1.5s ease-in-out infinite alternate; }
  .mk-lage{ animation:mk-blende .6s .05s ease both; }
}
@keyframes mk-auf{ from{ opacity:0; transform:translate3d(0, 22px, 0); } to{ opacity:1; transform:none; } }
@keyframes mk-blende{ from{ opacity:0; } to{ opacity:1; } }
@keyframes mk-schmier{ from{ text-shadow:-40px 0 24px rgba(217,52,43,0); } 35%{ text-shadow:-22px 0 14px rgba(217,52,43,.42); } to{ text-shadow:-12px 0 9px rgba(217,52,43,.24); } }
@keyframes mk-ecke{ from{ opacity:0; transform:translate(var(--dx, 0), var(--dy, 0)); } to{ opacity:1; transform:none; } }
@keyframes mk-scan{ 0%{ opacity:1; transform:scaleY(0); } 80%{ opacity:1; } 100%{ opacity:0; transform:scaleY(1); } }
@keyframes mk-horizont{ from{ opacity:0; transform:scaleX(0); } to{ opacity:1; transform:none; } }
@keyframes mk-schleier{ from{ opacity:1; } to{ opacity:.78; } }
@keyframes mk-ping{ 0%{ opacity:.7; transform:scale(1); } 70%, 100%{ opacity:0; transform:scale(3.4); } }
@keyframes mk-land{ from{ opacity:0; transform:rotate(calc(var(--r, 0deg) - 7deg)) translateY(-28px) scale(1.09); } to{ opacity:1; transform:rotate(var(--r, 0deg)); } }
@keyframes sei-linie{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }

@media (max-width:600px){ .sei-korn{ opacity:.03; } }

/* Reduzierte Bewegung: alles steht, alles ist sofort sichtbar */
@media (prefers-reduced-motion:reduce){
  .sei-an .sei-auf, .sei-an h2.sei-auf{ opacity:1 !important; transform:none !important; clip-path:none !important; transition:none !important; }
  .mk-buehne *, .kopf *, .mk-buehne::before, .mk-buehne::after, .kopf::after, .mk-lage *, .mk-lage, .mk-passt *, .hilfe-panel{ animation:none !important; }
  .mk-li-in{ transform:rotate(var(--r, 0deg)) !important; opacity:1 !important; }
  .mk-buehne :is(.eyebrow, .legal-eyebrow)::after, .kopf .kopf-marke::after{ display:none; }
  .mk-hud::after{ display:none; }
  a.blog-card, a.karte, .mk-karte, .mk-karte-ding, .author-portrait picture{ transition:none !important; }
}
@media print{
  .sei-fortschritt, .sei-korn, .sei-hud, .mk-hud, .mk-passt, .mk-lage-hud{ display:none !important; }
  .sei-an .sei-auf{ opacity:1 !important; transform:none !important; clip-path:none !important; }
  .mk-buehne::before, .mk-buehne::after, .kopf::after{ display:none; }
}