/* Bauart „pruefstand“: Graphit mit Teilungsbild. Aufbau angelehnt an die freie Framer-Vorlage „Torqvera“, Code eigen. */
@font-face{font-family:"Hanken Grotesk";src:url("schrift/hanken-grotesk-var-latin.woff2?v=38c3847fad") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Hanken Grotesk";src:url("schrift/hanken-grotesk-var-latin-ext.woff2?v=2cba32d0c1") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:"Inter";src:url("schrift/inter-latin.woff2?v=f11d729bb0") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:"Inter";src:url("schrift/inter-latin-ext.woff2?v=cf3eb50fb2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap;unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
:root{
  --grund:#0c0c0d;--grund2:#131316;--flaeche:#18181b;--nacht:#070708;--linie:#27272a;
  --text:#f4f4f5;--leise:#a1a1aa;--akzent:#c93a2e;--akzent-d:#a92f25;--akzent-t:#f47a6e;--auf:#ffffff;
  --f-titel:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--f-text:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--f-marke:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --g-titel:500;--g-ueber:600;--g-marke:800;--lauf:-0.03em;
  --rand:clamp(16px,4.2vw,40px);--breit:1200px;--abstand:clamp(64px,7.5vw,104px);
  --k-aus:cubic-bezier(.16,1,.3,1);--k-weich:cubic-bezier(.65,0,.35,1);
}
*,*::before,*::after{box-sizing:border-box;min-width:0}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--f-text);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,dl,dd,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
.rahmen{width:100%;max-width:calc(var(--breit) + 2 * var(--rand));margin:0 auto;padding:0 var(--rand)}
.unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung{position:absolute;left:-9999px;top:8px;z-index:100;background:var(--akzent);color:var(--auf);padding:10px 16px}
.sprung:focus{left:8px}
.ohne-umbruch{white-space:nowrap}
.wort{display:inline-block;max-width:100%}
.musterband{background:var(--akzent);color:var(--auf);text-align:center;font-size:13px;padding:6px 12px;position:relative;z-index:60}
.sym{width:18px;height:18px;flex:none}
:focus-visible{outline:2px solid var(--akzent-t);outline-offset:3px}

/* Schrift */
.t-h1{font-family:var(--f-titel);font-weight:var(--g-titel);font-size:clamp(42px,5vw,72px);line-height:1.04;letter-spacing:var(--lauf);text-wrap:balance;overflow-wrap:break-word}
.t-h1--seite{font-size:clamp(38px,4.4vw,64px)}
.t-h2{font-family:var(--f-titel);font-weight:var(--g-titel);font-size:clamp(32px,3.4vw,48px);line-height:1.1;letter-spacing:calc(var(--lauf) * .85);text-wrap:balance;overflow-wrap:break-word}
.t-h3{font-family:var(--f-titel);font-weight:var(--g-ueber);font-size:clamp(20px,1.7vw,24px);line-height:1.25;letter-spacing:-.015em;overflow-wrap:break-word}
.t-lead{font-size:clamp(17px,1.35vw,19px);line-height:1.6;color:var(--leise);max-width:560px}
.t-text{color:var(--leise);max-width:640px}
.t-klein{font-size:15px;line-height:1.6;color:var(--leise)}
.etikett{display:flex;align-items:center;gap:14px;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-t);margin-bottom:18px}
.etikett__strich{width:32px;height:1px;background:var(--akzent-t);flex:none}
.etikett--mitte{justify-content:center}
.marke{font-family:var(--f-marke);font-weight:var(--g-marke);font-size:17px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;line-height:1.2}

/* Knöpfe */
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:32px}
.knoepfe--mitte{justify-content:center}
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 26px;border-radius:4px;font-size:15px;font-weight:500;text-decoration:none;line-height:1.2;text-align:center;border:1px solid transparent;transition:background-color .18s,color .18s,border-color .18s,transform .18s var(--k-aus)}
.knopf:hover{transform:translateY(-1px)}
.knopf--akzent{background:var(--akzent);color:var(--auf)}
.knopf--akzent:hover{background:var(--akzent-d)}
.knopf--hell{background:var(--text);color:var(--grund)}
.knopf--hell:hover{background:#fff}
.knopf--rand{border-color:var(--linie);color:var(--text);background:rgba(255,255,255,.02)}
.knopf--rand:hover{border-color:var(--akzent-t)}
.knopf--klein{min-height:42px;padding:9px 20px;font-size:14px}
.pfeillink{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-size:15px;font-weight:500;color:var(--text);text-decoration:none;border-bottom:1px solid var(--akzent);padding-bottom:3px}
.pfeillink .sym{width:16px;height:16px;transition:transform .18s var(--k-aus)}
.pfeillink:hover .sym{transform:translateX(3px)}

/* Kopf */
.kopf{position:fixed;inset:0 0 auto;z-index:50;transition:background-color .3s,border-color .3s,transform .35s var(--k-aus);border-bottom:1px solid transparent}
.seite-index .kopf:not(.ist-fest){background:linear-gradient(180deg,rgba(7,7,8,.78),rgba(7,7,8,0))}
.kopf.ist-fest,body:not(.seite-index) .kopf{background:rgba(7,7,8,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom-color:var(--linie)}
.kopf.ist-weg{transform:translateY(-100%)}
.kopf__innen{display:flex;align-items:center;gap:24px;height:76px}
.kopf__marke{text-decoration:none;flex:none;max-width:42%}
.kopf__marke .marke{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kopf__nav{display:flex;gap:26px;margin:0 auto;flex-wrap:wrap;justify-content:center}
.kopf__nav a{font-size:15px;color:var(--leise);text-decoration:none;padding:6px 0;position:relative}
.kopf__nav .om{margin-right:-10px}
.kopf__nav .om .om-knopf{color:var(--leise)}
.kopf__nav a:hover,.kopf__nav a[aria-current]{color:var(--text)}
.kopf__nav a[aria-current]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--akzent-t)}
.kopf__rechts{display:flex;align-items:center;gap:18px;flex:none}
.kopf__tel{display:inline-flex;align-items:center;gap:8px;font-size:15px;text-decoration:none;color:var(--text)}
.kopf__tel .sym{color:var(--akzent-t)}
.kopf__menue{display:none;background:none;border:1px solid var(--linie);color:var(--text);width:44px;height:44px;border-radius:4px;cursor:pointer;align-items:center;justify-content:center}
.menue{position:fixed;inset:0;z-index:70;background:var(--nacht);overflow-y:auto}
.menue[hidden]{display:none}
.menue__innen{min-height:100%;display:flex;flex-direction:column;padding-top:16px;padding-bottom:32px}
.menue__kopf{display:flex;justify-content:space-between;align-items:center;height:60px}
.menue__zu{background:none;border:1px solid var(--linie);color:var(--text);width:44px;height:44px;border-radius:4px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer}
.menue__nav{display:flex;flex-direction:column;margin:32px 0}
.menue__nav a{display:flex;align-items:baseline;gap:16px;padding:14px 0;border-bottom:1px solid var(--linie);font-family:var(--f-titel);font-weight:var(--g-titel);font-size:30px;letter-spacing:var(--lauf);text-decoration:none}
.menue__nav a[aria-current]{color:var(--akzent-t)}
.menue__nr{font-family:var(--f-text);font-size:12px;letter-spacing:.14em;color:var(--akzent-t)}
.menue__fuss{margin-top:auto;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.menue__tel{display:inline-flex;align-items:center;gap:10px;font-size:22px;text-decoration:none}
.menue__zeit{color:var(--leise);font-size:15px}
.menue__fuss .knopf{margin-top:12px;width:100%}
html.menue-offen{overflow:hidden}

/* Bühne mit Teilungsbild */
@property --teil{syntax:"<percentage>";inherits:true;initial-value:54%}
.held{position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:120px;background:var(--nacht);isolation:isolate;--teil:54%}
.held__buehne{position:absolute;inset:0;z-index:-1;overflow:hidden}
.held__bild{width:100%;height:100%;object-fit:cover;object-position:var(--pos,70% 50%)}
.held__matt{position:absolute;inset:76px calc(100% - var(--teil)) 0 0;-webkit-backdrop-filter:grayscale(1) brightness(.5) contrast(.92);backdrop-filter:grayscale(1) brightness(.5) contrast(.92);background:rgba(7,7,8,.18)}
.held__mess{position:absolute;top:76px;bottom:0;left:var(--teil);width:1px;background:var(--akzent)}
.held__skala{position:absolute;top:0;bottom:0;left:-6px;width:13px;background:repeating-linear-gradient(to bottom,transparent 0 23px,var(--akzent) 23px 24px);-webkit-mask:linear-gradient(to right,#000 0 6px,transparent 6px 7px,#000 7px);mask:linear-gradient(to right,#000 0 6px,transparent 6px 7px,#000 7px);opacity:.7}
.held__marke{position:absolute;top:44%;left:-9px;width:19px;height:19px;border:1px solid var(--akzent);border-radius:50%;background:var(--nacht);box-shadow:0 0 0 6px rgba(0,0,0,.25)}
.held__marke::after{content:"";position:absolute;inset:6px;border-radius:50%;background:var(--akzent)}
.held__schleier{position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,7,8,.82) 0%,rgba(7,7,8,.45) 38%,rgba(7,7,8,0) 64%),linear-gradient(0deg,rgba(7,7,8,.95) 0%,rgba(7,7,8,0) 34%),linear-gradient(180deg,rgba(7,7,8,.6) 0%,rgba(7,7,8,0) 18%)}
.held__inhalt{padding-bottom:56px}
.held__inhalt .t-h1{max-width:min(760px,46vw)}
.held__inhalt .t-h1--lang{font-size:clamp(36px,4.2vw,60px)}
.held__text{max-width:min(560px,44vw)}
.held__zweit{color:var(--leise)}
.held__text{margin-top:24px}
.held__leiste{display:flex;justify-content:space-between;align-items:center;gap:16px 32px;flex-wrap:wrap;padding-top:22px;padding-bottom:28px;border-top:1px solid rgba(255,255,255,.14);background-clip:content-box}
.held__tel{display:inline-flex;align-items:center;gap:10px;font-size:18px;text-decoration:none}
.held__tel .sym{color:var(--akzent-t)}
.held__info{display:flex;flex-wrap:wrap;gap:8px 26px;font-size:15px;color:var(--leise)}
.held__info span{display:inline-flex;align-items:center;gap:8px}
.held__info .sym{width:16px;height:16px;color:var(--akzent-t)}
@keyframes teilen{from{--teil:0%}to{--teil:54%}}
@keyframes einblenden{from{opacity:0}to{opacity:1}}
html.js .held{animation:teilen 1.6s var(--k-weich) .2s both}
html.js .held__mess{animation:einblenden .6s ease .2s both}

/* Laufband */
.lauf{border-bottom:1px solid var(--linie);background:var(--grund);overflow:hidden;padding:26px 0}
.lauf__spur{display:flex;width:max-content;animation:lauf 60s linear infinite}
.lauf__reihe{display:flex;flex:none}
.lauf__reihe li{display:flex;align-items:center;font-family:var(--f-titel);font-weight:var(--g-ueber);font-size:clamp(20px,1.8vw,26px);letter-spacing:-.02em;white-space:nowrap}
.lauf__reihe li::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--akzent);margin:0 36px}
.lauf:hover .lauf__spur{animation-play-state:paused}
@keyframes lauf{to{transform:translateX(-50%)}}

/* Willkommen */
.willkommen{padding:var(--abstand) 0}
.willkommen__innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:center}
.willkommen--ohne .willkommen__innen{grid-template-columns:minmax(0,1fr);max-width:calc(820px + 2 * var(--rand))}
.willkommen__bild{border-radius:8px;overflow:hidden;aspect-ratio:5/4;background:var(--flaeche);border:1px solid var(--linie)}
.willkommen__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.willkommen__text .t-h2{margin-bottom:28px}
@media (min-width:800px){
  .willkommen:not(.willkommen--ohne){padding:0}
  .willkommen:not(.willkommen--ohne) .willkommen__innen{max-width:none;padding:0;gap:0;align-items:stretch}
  .willkommen:not(.willkommen--ohne) .willkommen__bild{aspect-ratio:auto;min-height:clamp(520px,46vw,720px);border-radius:0;border:0;position:relative}
  .willkommen:not(.willkommen--ohne) .willkommen__bild img{position:absolute;inset:0}
  .willkommen:not(.willkommen--ohne) .willkommen__text{align-self:center;padding:var(--abstand) var(--rand) var(--abstand) clamp(40px,6vw,96px);max-width:calc(600px + 2 * var(--rand))}
}
.willkommen__text .t-text+.t-text{margin-top:18px}
.willkommen__text .knopf{margin-top:34px}

/* Zahlen */
.zahlen{padding:0 0 var(--abstand)}
.zahlen__innen{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:24px}
.zahl{border-top:1px solid var(--linie);padding-top:28px}
.zahl__wert{font-family:var(--f-titel);font-weight:300;font-size:clamp(40px,4vw,56px);line-height:1;letter-spacing:-.03em}
.zahl__text{margin-top:22px;font-size:14px;color:var(--leise)}

/* Leistungen: Liste schaltet Bild */
.angebot{padding:var(--abstand) 0;background:var(--grund2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kopfzeile{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 64px;flex-wrap:wrap;margin-bottom:56px}
.kopfzeile__text{max-width:440px}
.wahl{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(32px,5vw,80px);align-items:start}
.wahl--ohne{grid-template-columns:minmax(0,1fr)}
.wahl--ohne .wahl__liste{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));column-gap:48px}
.wahl__punkt{border-top:1px solid var(--linie)}
.wahl__liste>.wahl__punkt:last-child{border-bottom:1px solid var(--linie)}
.wahl__punkt a{display:grid;grid-template-columns:44px minmax(0,1fr) 24px;align-items:center;gap:16px;padding:24px 0;text-decoration:none}
.wahl__nr{font-size:12px;letter-spacing:.14em;color:var(--akzent-t);font-weight:600}
.wahl__titel{font-family:var(--f-titel);font-weight:var(--g-ueber);font-size:clamp(20px,1.9vw,26px);letter-spacing:-.02em;line-height:1.25;color:var(--leise);transition:color .25s}
.wahl__pfeil{color:var(--leise);transition:transform .25s var(--k-aus),color .25s}
.wahl__text{display:none;padding:0 40px 26px 60px;color:var(--leise);font-size:15px;max-width:560px}
.wahl__punkt.ist-aktiv .wahl__titel,.wahl__punkt a:hover .wahl__titel{color:var(--text)}
.wahl__punkt.ist-aktiv .wahl__pfeil{color:var(--akzent-t);transform:translateX(4px)}
.wahl__punkt.ist-aktiv .wahl__text{display:block;animation:einblenden .4s ease both}
.wahl--ohne .wahl__text{display:block}
.wahl__bilder{position:sticky;top:110px;aspect-ratio:4/5;border-radius:8px;overflow:hidden;background:var(--flaeche);border:1px solid var(--linie)}
.wahl--kurz .wahl__bilder{aspect-ratio:1/1}
.wahl__bild{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--k-aus),transform .9s var(--k-aus);transform:scale(1.04)}
.wahl__bild.ist-aktiv{opacity:1;transform:none}
.wahl__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.wahl__mess{position:absolute;inset:18px;pointer-events:none;background:linear-gradient(var(--akzent),var(--akzent)) 0 0/22px 1px,linear-gradient(var(--akzent),var(--akzent)) 0 0/1px 22px,linear-gradient(var(--akzent),var(--akzent)) 100% 0/22px 1px,linear-gradient(var(--akzent),var(--akzent)) 100% 0/1px 22px,linear-gradient(var(--akzent),var(--akzent)) 0 100%/22px 1px,linear-gradient(var(--akzent),var(--akzent)) 0 100%/1px 22px,linear-gradient(var(--akzent),var(--akzent)) 100% 100%/22px 1px,linear-gradient(var(--akzent),var(--akzent)) 100% 100%/1px 22px;background-repeat:no-repeat;opacity:.9}

/* Galerie */
.galerie{padding:0;background:var(--grund)}
.galerie__reihe{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.galerie__reihe--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.galerie__reihe--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.galerie__bild{aspect-ratio:3/4;overflow:hidden;background:var(--flaeche)}
.galerie__bild img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--k-aus)}
.galerie__bild:hover img{transform:scale(1.04)}

/* Hinweise der Branche (Über uns) */
.tipps{padding:var(--abstand) 0;background:var(--grund2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.tipps .kopfzeile{margin-bottom:40px}
.tipps__liste{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tipp{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:28px}
.tipp__nr{display:block;font-size:12px;letter-spacing:.14em;color:var(--akzent-t);font-weight:600;margin-bottom:28px}
.tipp .t-h3{margin-bottom:10px}

/* Kein doppelter Leerraum, wenn ein Zugabe-Block folgt */
main>section:not([data-lb-band]):has(+ section[data-lb-band]){padding-bottom:calc(var(--abstand) * .5)}
main>section[data-lb-band]+section:not([data-lb-band]):not(.willkommen):not(.galerie){padding-top:calc(var(--abstand) * .6)}

/* Ablauf */
.ablauf{padding:var(--abstand) 0;background:var(--grund)}
.mitte{text-align:center;display:flex;flex-direction:column;align-items:center}
.mitte .t-text{margin-top:20px}
.schritte{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin:56px 0 48px;counter-reset:s}
.schritte--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.schritte--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.schritt{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:30px 28px 34px;min-height:250px;transition:border-color .3s}
.schritt:hover{border-color:var(--akzent-d)}
.schritt__strich{display:block;width:32px;height:2px;background:var(--akzent);margin-bottom:14px;transform-origin:left;transition:width .4s var(--k-aus)}
.schritt:hover .schritt__strich{width:56px}
.schritt__nr{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-t);font-weight:600}
.schritt .t-h3{margin:44px 0 12px}
.ablauf--knapp .schritte{margin-bottom:0}

/* Stimmen */
.stimmen{padding:var(--abstand) 0;background:var(--grund2);border-top:1px solid var(--linie)}
.stimmen__wertung{display:flex;align-items:center;gap:12px;margin-top:20px;color:var(--leise);font-size:15px;flex-wrap:wrap;justify-content:center}
.sterne{color:#f4b63f;letter-spacing:.12em;font-size:15px}
.stimmen__karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:52px}
.stimmen__karten--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.stimmen__karten--1{grid-template-columns:minmax(0,720px);justify-content:center}
.stimme{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:30px;display:flex;flex-direction:column;gap:20px}
.stimme blockquote{font-size:16px;line-height:1.65;color:var(--text);flex:1}
.stimme figcaption{font-weight:600;font-size:15px;display:flex;flex-direction:column;gap:2px;border-top:1px solid var(--linie);padding-top:16px}
.stimme figcaption span{font-weight:400;color:var(--leise);font-size:13px}
.stimmen__rechtlich{margin:32px auto 0;max-width:760px;text-align:center;font-size:12.5px;line-height:1.55;color:var(--leise)}

/* Fragen */
.fragen{padding:var(--abstand) 0;background:var(--nacht)}
.fragen__innen{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(36px,6vw,96px);align-items:start}
.fragen__kopf{position:sticky;top:110px}
.fragen__kopf .t-text{margin-top:20px}
.fragen__kopf .knopf{margin-top:30px}
.fragen__liste{display:flex;flex-direction:column;gap:10px}
.frage{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;transition:border-color .25s}
.frage[open]{border-color:var(--akzent-d)}
.frage summary{list-style:none;display:grid;grid-template-columns:auto minmax(0,1fr) 24px;gap:14px;align-items:center;padding:20px 22px;cursor:pointer;font-weight:500;font-size:17px;line-height:1.4}
.frage summary::-webkit-details-marker{display:none}
.frage__nr{font-size:13px;color:var(--akzent-t);font-variant-numeric:tabular-nums}
.frage__plus{color:var(--leise);transition:transform .3s var(--k-aus)}
.frage[open] .frage__plus{transform:rotate(45deg);color:var(--akzent-t)}
.frage>.t-text{padding:0 22px 22px 58px;max-width:none}

/* Aufruf */
.aufruf{padding:var(--abstand) 0;background:var(--grund)}
.aufruf--schmal{padding:calc(var(--abstand) * .7) 0}
.aufruf__karte{position:relative;border-radius:16px;border:1px solid var(--linie);overflow:hidden;min-height:420px;display:flex;align-items:center;justify-content:center;isolation:isolate;background:var(--nacht)}
.aufruf--schmal .aufruf__karte{min-height:320px}
.aufruf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.aufruf__schleier{position:absolute;inset:0;z-index:-1;background:rgba(7,7,8,.76)}
.aufruf__karte--raster,.seitenkopf--raster{background-color:var(--nacht);background-image:radial-gradient(ellipse 60% 70% at 70% 30%,color-mix(in srgb,var(--akzent) 14%,transparent),transparent 70%),linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:auto,48px 48px,48px 48px}
.aufruf__karte--raster .aufruf__schleier,.seitenkopf--raster .seitenkopf__schleier{background:linear-gradient(0deg,var(--nacht),transparent 60%)}
.aufruf__inhalt{text-align:center;padding:56px clamp(20px,5vw,64px);max-width:760px;display:flex;flex-direction:column;align-items:center}
.aufruf__inhalt .t-text{margin-top:20px;color:#d4d4d8}
.aufruf__karte .knopf--rand,.held .knopf--rand{border-color:rgba(255,255,255,.32);background:rgba(7,7,8,.35)}

/* Seitenkopf der Unterseiten */
.seitenkopf{position:relative;min-height:min(62vh,600px);display:flex;align-items:flex-end;padding:140px 0 64px;isolation:isolate;background:var(--nacht);border-bottom:1px solid var(--linie)}
.seitenkopf__bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;object-position:var(--pos,50% 50%);filter:grayscale(.35)}
.seitenkopf__schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,7,8,.88),rgba(7,7,8,.4)),linear-gradient(0deg,rgba(7,7,8,.9),transparent 55%)}
.seitenkopf__inhalt{position:relative}
.seitenkopf .t-lead{margin-top:22px}
.seitenkopf--schlicht{min-height:0;padding:150px 0 56px}
.pfad{display:flex;gap:10px;font-size:13px;color:var(--leise);margin-bottom:26px}
.pfad a{text-decoration:none}
.pfad a:hover{color:var(--text)}

/* Unternavigation Leistungen */
.unternav{position:sticky;top:76px;z-index:30;background:rgba(12,12,13,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--linie);transition:top .35s var(--k-aus)}
.kopf-weg .unternav{top:0}
.unternav__innen{display:flex;align-items:center;gap:28px;height:60px}
.unternav__innen>a:not(.knopf){font-size:14px;color:var(--leise);text-decoration:none}
.unternav__innen>a:not(.knopf):hover{color:var(--text)}
.unternav__knopf{margin-left:auto}

/* Leistungsliste */
.leistungsliste{padding:calc(var(--abstand) * .7) 0 var(--abstand)}
.leistung{display:grid;grid-template-columns:110px minmax(0,1fr) minmax(0,1.35fr);gap:24px 40px;padding:44px 0;border-top:1px solid var(--linie);scroll-margin-top:150px}
.leistung:last-child{border-bottom:1px solid var(--linie)}
.leistung--bild{grid-template-rows:auto 1fr;grid-template-columns:90px minmax(0,1fr) minmax(0,1.15fr);grid-template-areas:"nr kopf bild" "nr text bild";align-items:start}
.leistung--bild .leistung__nr{grid-area:nr}.leistung--bild .leistung__kopf{grid-area:kopf}.leistung--bild .leistung__text{grid-area:text}
.leistung--links{grid-template-columns:minmax(0,1.15fr) 90px minmax(0,1fr);grid-template-areas:"bild nr kopf" "bild nr text"}
.leistung__bild{grid-area:bild;position:relative;border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--flaeche);border:1px solid var(--linie)}
.leistung__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.leistung__nr{font-family:var(--f-titel);font-weight:300;font-size:44px;line-height:1;color:var(--akzent-t);letter-spacing:-.03em}
.leistung__titel{font-size:clamp(22px,2vw,28px)}
.leistung__text .t-text{max-width:none}
.haken{margin-top:18px;display:grid;gap:8px}
.haken li{display:flex;gap:10px;color:var(--leise);font-size:15px}
.haken .sym{color:var(--akzent-t);width:16px;height:16px;margin-top:4px}

/* Über uns */
.vorstellung{padding:var(--abstand) 0}
.einstieg{font-family:var(--f-titel);font-weight:var(--g-titel);font-size:clamp(26px,2.7vw,38px);line-height:1.3;letter-spacing:calc(var(--lauf) * .6);max-width:980px;margin-bottom:clamp(48px,6vw,80px);color:var(--text)}
@supports (animation-timeline:view()){
  html.js .einstieg{background:linear-gradient(90deg,var(--text) 0 50%,color-mix(in srgb,var(--text) 34%,var(--grund)) 50% 100%) 100% 0/200% 100% no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;animation:fuellen linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
  @keyframes fuellen{to{background-position:0 0}}
}
.vorstellung__reihe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,6vw,88px);align-items:start}
.vorstellung--ohne .vorstellung__reihe{grid-template-columns:minmax(0,1fr);max-width:820px}
.vorstellung__bild{border-radius:8px;overflow:hidden;aspect-ratio:5/4;border:1px solid var(--linie);background:var(--flaeche)}
.vorstellung__bild img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 50%)}
.vorstellung__text .t-text+.t-text{margin-top:18px}
.fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:40px}
.fakten div{border-top:1px solid var(--linie);padding-top:16px}
.fakten dt{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--akzent-t);font-weight:600}
.fakten dd{margin-top:8px;font-size:17px;overflow-wrap:anywhere}
.fakten a{text-decoration:none}
.kurzliste{padding:var(--abstand) 0;background:var(--grund2);border-top:1px solid var(--linie);border-bottom:1px solid var(--linie)}
.kurzliste .kopfzeile{margin-bottom:36px}
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chips a{display:inline-flex;align-items:center;gap:10px;padding:11px 18px;border-radius:999px;background:var(--flaeche);border:1px solid var(--linie);text-decoration:none;font-size:15px;transition:border-color .2s}
.chips a:hover{border-color:var(--akzent-t)}
.chips__punkt{width:6px;height:6px;border-radius:50%;background:var(--akzent);flex:none}

/* Kontakt */
.kontaktwege{padding:calc(var(--abstand) * .8) 0}
.kontaktwege__innen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.weg{position:relative;display:flex;flex-direction:column;gap:6px;padding:30px 28px;background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;text-decoration:none;min-height:220px;transition:border-color .25s}
a.weg:hover,.weg--haupt{border-color:var(--akzent-d)}
.weg__sym{width:44px;height:44px;border-radius:50%;border:1px solid var(--linie);display:flex;align-items:center;justify-content:center;color:var(--akzent-t);margin-bottom:22px}
.weg__etikett{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--leise);font-weight:600}
.weg__wert{font-family:var(--f-titel);font-weight:var(--g-ueber);font-size:20px;line-height:1.35;letter-spacing:-.01em}
.weg__wert--mail{overflow-wrap:anywhere;font-size:18px}
.weg__pfeil{position:absolute;top:30px;right:28px;color:var(--akzent-t)}
.weg .pfeillink{margin-top:auto;padding-top:14px;align-self:flex-start}
.weg__zeiten{display:grid;gap:6px;font-size:15px;margin-top:4px}
.weg__zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 12px}
.weg__zeiten dt{color:var(--leise)}
.weg__zeiten dd{margin:0}
.hinweise{padding:0 0 var(--abstand)}
.hinweise__innen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.hinweis{border-top:1px solid var(--akzent-d);padding:26px 0 0}
.hinweis .t-text{margin-top:12px}

/* Rechtliches */
.recht{padding:64px 0 var(--abstand)}
.recht__text{max-width:calc(820px + 2 * var(--rand));color:var(--leise)}
.recht__text h2,.recht__text h3,.recht__titel{color:var(--text);font-family:var(--f-titel);font-weight:var(--g-ueber);font-size:24px;letter-spacing:-.01em;margin:40px 0 14px;line-height:1.3}
.recht__text p,.recht__text ul{margin:0 0 14px}
.recht__text a{color:var(--text);overflow-wrap:anywhere}
.recht__zurueck{margin-top:32px}

/* Fuß */
.fuss{background:var(--nacht);border-top:1px solid var(--linie);padding:clamp(56px,7vw,88px) 0 28px;font-size:15px}
.fuss__spalten{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1.2fr);gap:40px}
.fuss__marke{display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.marke--fuss{font-size:20px}
.fuss__text{color:var(--leise);max-width:300px}
.fuss__spalte{display:flex;flex-direction:column;gap:10px}
.fuss__titel{font-family:var(--f-titel);font-weight:var(--g-ueber);font-size:17px;margin-bottom:8px;letter-spacing:-.01em}
.fuss__spalte a{color:var(--leise);text-decoration:none}
.fuss__spalte a:hover,.fuss__spalte a[aria-current]{color:var(--text)}
.fuss__zeile{display:flex;gap:10px;align-items:flex-start;color:var(--leise)}
.fuss__zeile .sym{width:16px;height:16px;margin-top:4px;color:var(--akzent-t)}
.fuss__mail span{overflow-wrap:anywhere}
.fuss__zeit{color:var(--leise);font-size:14px}
.fuss__zeit span{color:var(--text)}
.fuss__unten{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 28px;margin-top:56px;padding-top:24px;border-top:1px solid var(--linie);font-size:13px;color:var(--leise)}
.fuss__links{display:flex;flex-wrap:wrap;gap:6px 22px}
.fuss__links a{text-decoration:none}
.fuss__links a:hover{color:var(--text)}
.fuss__hinweis{flex-basis:100%;font-size:12.5px}

/* Feste Anrufleiste am Handy */
.schnell{display:none}

/* Erscheinen */
html.js [data-auftritt]{opacity:0;transform:translateY(24px);transition:opacity .7s var(--k-aus) var(--verz,0s),transform .7s var(--k-aus) var(--verz,0s)}
html.js [data-auftritt].ist-da{opacity:1;transform:none}

@media (max-width:1100px){
  .kopf__tel{display:none}
  .kopf__nav{gap:20px}
  .schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fuss__spalten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:999px){
  .kopf__nav,.kopf__knopf{display:none}
  .kopf__menue{display:inline-flex}
  .kopf__rechts{margin-left:auto}
  .kopf__marke{max-width:70%}
}
@media (max-width:799px){
  body{font-size:16px}
  .kopf__innen{height:64px}
  .held{min-height:0;padding-top:96px;--teil:44%}
  @keyframes teilen{from{--teil:0%}to{--teil:44%}}
  .held__buehne{bottom:auto;height:54vh;min-height:340px}
  .held__termin{display:none}
  .held__tel{display:none}
  .held__bild{object-position:var(--pos-handy,72% 50%)}
  .held__schleier{background:linear-gradient(0deg,var(--nacht) 0%,rgba(7,7,8,.55) 32%,rgba(7,7,8,0) 60%),linear-gradient(180deg,rgba(7,7,8,.6),rgba(7,7,8,0) 30%)}
  .held__inhalt{padding-top:calc(54vh - 220px);padding-bottom:28px}
  .held__leiste{flex-direction:column;align-items:flex-start}
  .held__inhalt .t-h1,.held__text{max-width:none}
  .knoepfe .knopf{flex:1 1 220px}
  .willkommen__innen,.wahl,.fragen__innen,.vorstellung__reihe{grid-template-columns:minmax(0,1fr)}
  .willkommen__bild,.vorstellung__bild{aspect-ratio:4/3}
  .wahl__bilder{position:relative;top:0;aspect-ratio:16/11;order:-1}
  .wahl__text{padding:0 0 22px 60px}
  .wahl--ohne .wahl__liste{grid-template-columns:minmax(0,1fr)}
  .fragen__kopf{position:static}
  .frage>.t-text{padding:0 18px 20px}
  .frage summary{padding:18px}
  .schritte,.schritte--3,.schritte--2,.stimmen__karten,.stimmen__karten--2{grid-template-columns:minmax(0,1fr)}
  .schritt{min-height:0}
  .schritt .t-h3{margin-top:24px}
  .leistung,.leistung--bild,.leistung--links{grid-template-columns:minmax(0,1fr);gap:12px;padding:34px 0}
  .leistung--bild,.leistung--links{grid-template-areas:"bild" "nr" "kopf" "text"}
  .tipps__liste{grid-template-columns:minmax(0,1fr)}
  .galerie__reihe,.galerie__reihe--3,.galerie__reihe--4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .leistung__nr{font-size:32px}
  .seitenkopf{min-height:0;padding:120px 0 44px}
  .unternav{top:64px}
  /* am Handy nicht klebend: umgebrochen war die Leiste bis 165 px hoch und deckte mit der Anrufleiste ein Drittel
     des Bildschirms (Gegenprüfung Block 15.11.2026); eine wischbare Zeile wertet die Messung als abgeschnitten */
  .unternav{position:static}
  .unternav__innen{gap:8px 18px;height:auto;padding-top:12px;padding-bottom:12px;flex-wrap:wrap}
  .unternav__knopf{display:none}
  .kopfzeile{margin-bottom:36px}
  .aufruf__karte{min-height:360px}
  .fuss__spalten{grid-template-columns:minmax(0,1fr)}
  .fuss{padding-bottom:96px}
  .schnell{display:grid;grid-template-columns:1fr 1.4fr;gap:8px;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:rgba(7,7,8,.94);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-top:1px solid var(--linie)}
  .schnell a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:4px;text-decoration:none;font-weight:500;font-size:15px;text-align:center;line-height:1.2;padding:4px 10px}
  .schnell__tel{background:var(--akzent);color:var(--auf)}
  .schnell__termin{border:1px solid var(--linie);color:var(--text)}
  html.js [data-auftritt]{transform:translateY(16px)}
}
@media (max-width:520px){
  .t-h1,.t-h2,.einstieg,.wahl__titel{-webkit-hyphens:auto;hyphens:auto}
  .wahl__punkt a{grid-template-columns:34px minmax(0,1fr) 20px;gap:12px}
  .wahl__text{padding-left:46px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important;scroll-behavior:auto!important}
  .lauf__spur{animation:none}
  html.js .held{animation:none}
  html.js [data-auftritt]{opacity:1;transform:none}
  html.js .einstieg{animation:none;background:none;color:var(--text)}
}

/* Ergänzte Seiten (Ortsseiten, Einzugsgebiet): Bühne so dunkel wie die eigene Bühne, damit das Etikett auf hellen Fotos lesbar bleibt (Probe RAW-OFFROAD 09.11.2026: 4,45 statt 4,5) */
.eg-buehne .eg-schleier{background:linear-gradient(90deg,rgba(7,7,8,.9) 0%,rgba(7,7,8,.72) 45%,rgba(7,7,8,.4) 100%),linear-gradient(0deg,rgba(7,7,8,.7) 0%,rgba(7,7,8,0) 55%)}

/* Runde 3 (Nachprüfung 10.11.2026). Studio-Objekte der Branche (bildwahl) dort, wo kein eigenes Foto ist: freigestellt
   auf dem Graphit wie die Produktbilder im Vorbild, mit weichem Bodenschatten. Jedes Objekt einmal je Website. */
.objekt{position:relative;margin:0;width:100%;height:100%;min-height:120px}
.objekt img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 34px 38px rgba(0,0,0,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.objekt__marke{position:absolute;right:10px;bottom:10px;font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--leise)}
.seitenkopf--objekt{min-height:min(64vh,620px);overflow:hidden}
.seitenkopf__objekt{position:absolute;right:max(var(--rand),calc((100vw - var(--breit)) / 2));top:112px;bottom:36px;width:min(40vw,520px);z-index:-1;pointer-events:none}
.seitenkopf__objekt img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;object-position:50% 50%}
.seitenkopf__objekt::before{content:"";position:absolute;inset:8% 4% 2%;background:radial-gradient(ellipse 50% 46% at 50% 54%,color-mix(in srgb,var(--text) 9%,transparent),transparent 72%);z-index:-1}
.seitenkopf__objekt .objekt__marke{bottom:0;right:0}
.seitenkopf--objekt .seitenkopf__schleier{background:linear-gradient(90deg,var(--nacht) 0,color-mix(in srgb,var(--nacht) 70%,transparent) 42%,transparent 70%),linear-gradient(0deg,var(--nacht),transparent 40%)}
.seitenkopf--objekt .seitenkopf__inhalt{max-width:calc(var(--breit) + 2 * var(--rand))}
.seitenkopf--objekt .t-h1--seite,.seitenkopf--objekt .t-lead{max-width:min(660px,54vw)}
.seitenkopf--objekt .t-h1--seite{font-size:clamp(34px,3.9vw,56px)}
.objekt__marke{opacity:.9}
.leistung__bild--objekt,.vorstellung__bild--objekt{display:grid;place-items:center;padding:clamp(18px,3vw,40px);background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--text) 7%,var(--flaeche)),var(--flaeche) 70%)}
.leistung__bild--objekt .objekt,.vorstellung__bild--objekt .objekt{width:100%;height:100%}
.leistung__bild--objekt .wahl__mess{opacity:.6}
/* Ortsmenü im Kopf: der Pfeil sitzt dicht am Wort, danach derselbe Abstand wie zwischen allen Punkten
   (Nachprüfung 10.11.2026: sichtbar größere Lücke vor „Kontakt“) */
.kopf__nav .om{margin-right:0}
.kopf__nav .om>a{padding-right:20px!important}
.kopf__nav .om.om-innen .om-knopf,.kopf__nav .om .om-knopf{width:18px;right:0!important;left:auto!important}
/* Lange Firmennamen aus einem Wort (SACHVERSTÄNDIGENBÜRO) laufen im Fuß nie über den Rand (Probe Sweers, 320 px) */
.marke--fuss{overflow-wrap:anywhere;max-width:100%}
/* Über uns: Leistungen als Chips links, ein Studio-Objekt rechts (zweites Bild im Inhalt, kein Foto der Startseite) */
.kurzliste--objekt .kurzliste__innen{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.kurzliste__bild{position:relative;aspect-ratio:4/3;border-radius:8px;border:1px solid var(--linie);overflow:hidden;display:grid;place-items:center;padding:clamp(18px,3vw,36px);background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--text) 7%,var(--flaeche)),var(--flaeche) 70%)}
.kurzliste__bild .objekt{width:100%;height:100%}
.kurzliste--objekt .kopfzeile{flex-wrap:wrap;gap:20px}
@media (max-width:799px){
  .kurzliste--objekt .kurzliste__innen{grid-template-columns:minmax(0,1fr)}
  .seitenkopf--objekt{padding-top:110px;flex-direction:column;align-items:stretch}
  .seitenkopf__objekt{position:relative;right:auto;top:auto;bottom:auto;width:min(78vw,400px);height:min(52vw,250px);margin:0 auto 12px;order:-1;z-index:0}
  .seitenkopf--objekt .t-h1--seite,.seitenkopf--objekt .t-lead{max-width:none}
  .seitenkopf--objekt .seitenkopf__schleier{background:linear-gradient(0deg,var(--nacht),transparent 60%)}
}
@media (max-width:520px){
  .marke{letter-spacing:.08em}
  .marke--fuss{font-size:17px}
}
/* Bildwahl (Mert 10.11.2026): neben einer Leistung steht nur ihr Bild aus bildwahl, freigestellt auf dem Graphit; ohne
   eindeutiges Bild zeigt die Bildfläche die Nummer der Leistung auf einer Messskala, nie ein fremdes Foto */
.wahl__bilder--objekt{background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--text) 7%,var(--flaeche)),var(--flaeche) 70%)}
.wahl__bilder--objekt .wahl__bild{display:grid;place-items:center;padding:clamp(28px,4vw,56px)}
.wahl__bilder--objekt .wahl__bild .objekt{width:100%;height:100%}
.wahl__bild--nr{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:22px}
.wahl__gross{font-family:var(--f-titel);font-weight:200;font-size:clamp(96px,12vw,180px);line-height:1;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--akzent-t) 70%,transparent)}
.wahl__skala{width:min(70%,320px);height:14px;background:repeating-linear-gradient(90deg,var(--akzent) 0 1px,transparent 1px 16px) 0 100%/100% 8px no-repeat,repeating-linear-gradient(90deg,var(--akzent) 0 1px,transparent 1px 80px) 0 100%/100% 14px no-repeat;opacity:.55}
/* ohne Bild das Zeichen der Leistung statt der bloßen Nummer (Mert 14.11.2026, bildwahl.zeichen_fuer) */
.wahl__zeichen{width:clamp(120px,15vw,210px);height:auto;color:var(--akzent-t);stroke-width:.7}
.leistung__bild--zeichen{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;min-height:260px}
/* Mindesthöhe plus Seitenverhältnis 4/3 machte die Karte am Handy 347 px breit (Block 15.11.2026, 320 px) */
@media (max-width:560px){.leistung__bild--zeichen{min-height:0}}
.willkommen--objekt .willkommen__innen{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.willkommen__bild--objekt{position:relative;display:grid;place-items:center;padding:clamp(24px,4vw,52px);background:radial-gradient(ellipse 70% 60% at 50% 45%,color-mix(in srgb,var(--text) 7%,var(--flaeche)),var(--flaeche) 70%)}
.willkommen__bild--objekt .objekt{width:100%;height:100%}
@media (max-width:799px){
  .willkommen--objekt .willkommen__innen{grid-template-columns:minmax(0,1fr)}
  .wahl__gross{font-size:clamp(72px,24vw,120px)}
}
/* Etikett: der Text ist EIN Flex-Element, sonst wird jedes Wort einzeln gestaucht (Probe Jessi, 320 px: „Kfz-Werkstatt in
   Langelsheim-Palandsmühle“, das erste Wort auf 69 statt 91 px gedrückt) */
.etikett__text{min-width:0;flex:0 1 auto}

/* Ergänzte Seiten und Fußzeile (bauarten/ergaenzung.py): Farben und Schriften der Variante, Kontrast im Motor gerechnet */
.eg-main,.eg-buehne,.eg-abschnitt,.eg-band,.eg-fuss{--eg-grund:#0c0c0d;--eg-text:#f4f4f5;--eg-karte:#18181b;--eg-band:#070708;--eg-band-text:#f4f4f5;--eg-akzent:#f47a6e;--eg-knopf:#c93a2e;--eg-knopf-text:#ffffff;--eg-linie:#27272a;--eg-leise:#a1a1aa}
.eg-main{display:block;background:var(--eg-grund);color:var(--eg-text)}
.eg-in{width:100%;max-width:1184px;margin:0 auto;padding:0 clamp(16px,4vw,48px);box-sizing:border-box}
.eg-buehne{position:relative;isolation:isolate;overflow:hidden;background:var(--eg-band);color:#fff;min-height:clamp(420px,62vh,640px);display:flex;align-items:flex-end;padding:clamp(130px,16vw,190px) 0 clamp(44px,7vw,84px)}
.eg-buehne--klein{min-height:clamp(340px,46vh,480px)}
.eg-buehne--ohne{min-height:0}
.eg-buehne .eg-hg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.eg-schleier{position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(0,0,0,.82) 0%,rgba(0,0,0,.6) 45%,rgba(0,0,0,.28) 100%),linear-gradient(0deg,rgba(0,0,0,.55) 0%,rgba(0,0,0,0) 55%)}
.eg-buehne-in{position:relative}
.eg-etikett{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;margin:0 0 14px;opacity:1}
.eg-etikett--dunkel{color:var(--eg-akzent);opacity:1}
.eg-h1{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(30px,5.0vw,72px);font-weight:400;text-transform:none;font-style:normal;letter-spacing:-0.04em;line-height:1.04;margin:0 0 18px;max-width:22ch;color:#fff;overflow-wrap:break-word}
.eg-lead{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(17px,1.6vw,20px);line-height:1.55;max-width:58ch;margin:0;color:rgba(255,255,255,.92)}
.eg-knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.eg-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:10px 22px;border-radius:4px;background:var(--eg-knopf);color:var(--eg-knopf-text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:500;font-size:15px;text-transform:none;letter-spacing:0em;box-sizing:border-box;text-decoration:none;border:1px solid transparent;transition:transform .2s ease,background-color .2s ease}
.eg-knopf:hover{transform:translateY(-1px)}
.eg-knopf--rand{background:transparent;color:#fff;border-color:rgba(255,255,255,.7)}
.eg-knopf--band{background:#c93a2e;color:#ffffff;white-space:nowrap}
.eg-abschnitt{background:var(--eg-grund);color:var(--eg-text);padding:clamp(52px,8.89vw,128px) 0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.6}
.eg-abschnitt--karte{background:var(--eg-karte)}
.eg-abschnitt--knapp{padding:clamp(28px,4vw,44px) 0}
.eg-abschnitt p{margin:0 0 1em;max-width:68ch}
.eg-h2{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(26px,3.33vw,48px);font-weight:400;text-transform:none;letter-spacing:-0.034em;line-height:1.1;text-wrap:balance;margin:0 0 clamp(22px,3vw,36px);color:inherit;max-width:30ch;overflow-wrap:break-word}
.eg-h3{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(18px,1.67vw,24px);font-weight:500;text-transform:none;letter-spacing:-0.015em;line-height:1.2;margin:0 0 10px;color:inherit;overflow-wrap:break-word;hyphens:auto}
.eg-raster{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(14px,2vw,24px);--eg-sp:clamp(14px,2vw,24px)}
/* Keine leeren Rasterplätze (05.11.2026, Qualitätsrunde): zwei Karten füllen die Zeile, eine Restzeile steht mittig statt
   mit Loch rechts. Vorher auto-fill: 2 Karten im Dreierraster, 3+2 mit leerem Feld. */
.eg-raster>*{flex:1 1 260px;min-width:0;max-width:calc((100% - 2 * var(--eg-sp)) / 3);box-sizing:border-box}
.eg-raster>:first-child:nth-last-child(-n+2),.eg-raster>:first-child:nth-last-child(-n+2)~*{max-width:none}
@media (max-width:900px){.eg-raster>*{max-width:calc((100% - var(--eg-sp)) / 2)}}
@media (max-width:600px){.eg-raster>*{max-width:none;flex-basis:100%}}
.eg-karte{display:block;background:var(--eg-grund);color:var(--eg-text);border:1px solid var(--eg-linie);border-radius:8px;padding:clamp(20px,2.4vw,30px);text-decoration:none}
.eg-abschnitt--karte .eg-karte{background:var(--eg-grund)}
.eg-abschnitt:not(.eg-abschnitt--karte) .eg-karte{background:var(--eg-karte)}
.eg-karte p{margin:0 0 .6em}
.eg-pfeil{color:var(--eg-akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.eg-leistung{padding:0 0 clamp(26px,3vw,40px);margin:0 0 clamp(26px,3vw,40px);border-bottom:1px solid var(--eg-linie)}
.eg-leistung:last-child{border-bottom:0;margin-bottom:0}
.eg-leistung .eg-h2{font-size:clamp(23px,2.07vw,30px);margin-bottom:12px}
.eg-foto{margin:0 0 clamp(26px,3vw,40px)}
.eg-foto img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px}
.eg-foto--breit img{aspect-ratio:21/9}
.eg-zwei{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:start}
.eg-zwei--ohne{grid-template-columns:1fr}
.eg-zwei .eg-foto{margin:0}
.eg-text p{font-size:clamp(17px,1.5vw,19px)}
.eg-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:clamp(16px,2vw,28px)}
.eg-schritte li{display:flex;gap:16px;align-items:flex-start}
.eg-nr{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--eg-akzent);color:var(--eg-akzent);font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:18px}
.eg-fragen{display:grid;gap:10px;max-width:860px}
.eg-frage{border:1px solid var(--eg-linie);border-radius:8px;background:var(--eg-grund);padding:0 20px}
.eg-abschnitt:not(.eg-abschnitt--karte) .eg-frage{background:var(--eg-karte)}
.eg-frage summary{cursor:pointer;padding:16px 36px 16px 0;font-weight:600;list-style:none;position:relative}
/* Eigenes Plus statt nacktem Browser-Dreieck (05.11.2026, Qualitätsrunde) */
.eg-frage summary::-webkit-details-marker{display:none}
.eg-frage summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:22px;font-weight:400;line-height:1;color:var(--eg-akzent)}
.eg-frage[open] summary::after{content:"\2212"}
.eg-frage p{margin:0 0 16px}
.eg-wertung{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(20px,2vw,26px);margin:0 0 22px;color:var(--eg-akzent)}
.eg-stimme{margin:0;background:var(--eg-grund);border:1px solid var(--eg-linie);border-radius:8px;padding:clamp(20px,2.4vw,30px)}
.eg-abschnitt:not(.eg-abschnitt--karte) .eg-stimme{background:var(--eg-karte)}
.eg-zitat{margin:0 0 12px;font-size:17px;line-height:1.6}
.eg-zitat p{margin:0}
.eg-stimme figcaption{font-size:14px;color:var(--eg-leise)}
.eg-band{background:var(--eg-band);color:var(--eg-band-text);padding:clamp(44px,6vw,72px) 0}
.eg-band-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 40px}
.eg-band .eg-h2{margin:0;color:var(--eg-band-text)}
.eg-band p{margin:10px 0 0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.eg-zeiten{margin:0;display:grid;gap:6px}
.eg-zeiten div{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 16px}
.eg-zeiten dt{font-weight:600}
.eg-zeiten dd{margin:0}
.eg-gross{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(22px,2.4vw,30px);color:var(--eg-akzent);text-decoration:none;white-space:nowrap}
.eg-haken{margin:0;padding:0 0 0 1.2em;display:grid;gap:8px}
.eg-klein{font-size:14px;color:var(--eg-leise)}
.eg-orteliste{display:flex;flex-wrap:wrap;gap:10px 18px;align-items:baseline;margin:0}
.eg-orteliste a{color:var(--eg-akzent);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.eg-ortkarte strong{display:block;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(21px,2vw,26px);margin-top:6px;overflow-wrap:anywhere}
.eg-ortkarte:hover{border-color:var(--eg-akzent)}
.eg-ortkarte--heim{border-color:var(--eg-akzent)}
.eg-fuss{grid-column:1/-1;flex:1 1 100%;order:999;width:100%;max-width:1184px;margin:20px auto 0;padding:14px clamp(16px,4vw,48px) 18px;box-sizing:border-box;border-top:1px solid currentColor;border-top-color:color-mix(in srgb,currentColor 14%,transparent);font-size:12.5px;line-height:1.55;letter-spacing:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:6px 32px;text-align:left}
/* Eine Schlussleiste: links Bildhinweis, rechts Orte und Rückverweise (Mert 05.11.2026) */
.eg-fuss p{margin:0;max-width:none}
.eg-fuss-bild{flex:0 1 auto}
.eg-fuss-bild:empty{display:none}
.eg-fuss-rechts{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-end;align-items:baseline;gap:3px 24px;margin-left:auto!important;text-align:right}
.eg-fuss-orte,.eg-fuss-marke{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 12px}
.eg-fuss span{font-weight:inherit}
.eg-fuss .eg-fuss-etikett{font-weight:500}
.eg-fuss a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;display:inline}
@media (max-width:640px){.eg-fuss{flex-direction:column;align-items:flex-start}.eg-fuss-rechts{align-items:flex-start;margin-left:0!important;text-align:left}.eg-fuss-orte,.eg-fuss-marke{justify-content:flex-start}}
.eg-main a,.eg-abschnitt a,.eg-fuss a{overflow-wrap:anywhere}
/* Lange Wörter (Ortsnamen, Kundenwörter in Bewertungen) brechen in allen ergänzten Seiten statt überzulaufen, 02.11.2026 */
.eg-main,.eg-abschnitt{overflow-wrap:break-word}
@media (max-width:760px){
  .eg-zwei{grid-template-columns:1fr}
  .eg-buehne{min-height:0}
  .eg-band-in{flex-direction:column;align-items:flex-start}
}
@media (max-width:520px){.eg-h1,.eg-h2,.eg-h3{hyphens:auto}.eg-knopf{width:100%;justify-content:center}.eg-knopf--band{white-space:normal}}
@media (prefers-reduced-motion:reduce){.eg-knopf{transition:none}.eg-knopf:hover{transform:none}}
/* Anfrageformular, das live.py beim Livegang in kontakt.html setzt (Klassen aus live.formular) */
.eg-formular #anfrage{background:var(--eg-karte,#f5f5f5);color:var(--eg-text,#111);padding:clamp(48px,7vw,96px) 0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.55}
.eg-formular{--eg-grund:#0c0c0d;--eg-text:#f4f4f5;--eg-karte:#18181b;--eg-linie:#27272a;--eg-knopf:#c93a2e;--eg-knopf-text:#ffffff}
.eg-formular .in{max-width:1160px;margin:0 auto;padding:0 clamp(16px,4vw,48px);display:grid;grid-template-columns:.8fr 1.2fr;gap:clamp(24px,4vw,64px);box-sizing:border-box}
.eg-formular h2{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(26px,3vw,40px);line-height:1.12;margin:0 0 14px}
.eg-formular .ey{display:block;font-size:13px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px}
.eg-formular .haken{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:8px}
.eg-formular .haken svg,.eg-formular .btn svg{width:18px;height:18px;flex:0 0 auto}
.eg-formular .haken li{display:flex;gap:10px;align-items:flex-start}
.eg-formular form{display:grid;gap:14px;background:var(--eg-grund);border:1px solid var(--eg-linie);border-radius:4px;padding:clamp(18px,3vw,32px)}
.eg-formular .zeile{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.eg-formular label{display:grid;gap:6px;font-weight:600;font-size:15px}
.eg-formular input,.eg-formular select,.eg-formular textarea{font:inherit;font-weight:400;width:100%;box-sizing:border-box;padding:11px 12px;border:1px solid var(--eg-linie);border-radius:4px;background:#fff;color:#111}
.eg-formular .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.eg-formular .klein{font-size:13px;margin:0}
.eg-formular .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:12px 22px;border:0;border-radius:4px;background:var(--eg-knopf);color:var(--eg-knopf-text);font:inherit;font-weight:600;cursor:pointer}
@media (max-width:760px){.eg-formular .in,.eg-formular .zeile{grid-template-columns:1fr}}
.eg-ds{padding-bottom:40px}
.eg-symbol{position:absolute;right:12px;bottom:10px;z-index:1;font-size:12px;letter-spacing:.04em;color:#fff;background:rgba(0,0,0,.66);padding:2px 8px;border-radius:3px}
.eg-symbol-zeile{font-size:12px;color:var(--eg-leise);margin-top:6px}

/* Muster aus der Qualitätsrunde 05.11.2026: ein langes Wort in einer Bewertung lief bei 900 px über die Spalte und hielt
   die Bauart an. Für jede Bauart: Zitate brechen lange Wörter. */
blockquote,q,figcaption{overflow-wrap:break-word}

/* Leere Platzhalter (Formular, Datenschutz-Formular) füllt erst live.py; bis dahin keine Lücke im Abstandsraster
   (Nachprüfung 05.11.2026: 440 px leeres Grün auf der Kontaktseite von kanzlei) */
.eg-formular:empty,.eg-ds:empty{display:none}

/* Feste Anrufleiste auf dem Handy für Bauarten ohne eigene (Nachprüfung 05.11.2026) */
.eg-fuss .eg-anruf{position:fixed;left:12px;right:12px;bottom:calc(10px + env(safe-area-inset-bottom));z-index:60;display:flex;align-items:center;justify-content:center;gap:10px;min-height:48px;border-radius:999px;background:var(--eg-knopf);color:var(--eg-knopf-text)!important;font-weight:600;font-size:16px;text-decoration:none!important;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.eg-anruf[hidden]{display:none}
@media (min-width:800px){.eg-fuss .eg-anruf{display:none!important}}

/* ★ Unterseiten im Stil ihrer Bauart (Mert 05.11.2026: „Unterseiten wirken noch wie fremde Vorlagen … Über uns dünn …
   das musst du alles überarbeiten“). Größen, Gewichte, Großschreibung, Knöpfe, Rundungen und Abstände kommen aus der
   gemessenen Startseite der Bauart (stil_messen.py → bauart.json eg_stil → motor.eg_stil). Dazu neue Bausteine:
   Leistungsliste statt kleiner Karten, Fotoband über die ganze Breite, Faktenleiste, großes Zitat, Kontaktzeile. */
.eg-liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--eg-linie)}
.eg-liste li{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr) auto;gap:8px clamp(20px,4vw,64px);align-items:baseline;padding:clamp(20px,2.4vw,32px) 0;border-bottom:1px solid var(--eg-linie)}
.eg-liste .eg-h3{margin:0;font-size:clamp(20px,2.07vw,30px)}
.eg-liste p{margin:0;color:var(--eg-text);opacity:.86}
.eg-liste .eg-pfeil{white-space:nowrap;font-size:15px}
.eg-liste--nr{counter-reset:egl}
.eg-liste--nr li{grid-template-columns:auto minmax(0,5fr) minmax(0,6fr) auto}
.eg-liste--nr li::before{counter-increment:egl;content:counter(egl,decimal-leading-zero);font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;color:var(--eg-akzent);letter-spacing:.04em;min-width:2.2em}
@media (max-width:760px){.eg-liste li,.eg-liste--nr li{grid-template-columns:1fr}.eg-liste--nr li::before{margin-bottom:2px}}
.eg-kopfzeile{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:12px 32px;margin-bottom:clamp(22px,3vw,40px)}
.eg-kopfzeile .eg-h2{margin:0}
.eg-fotoband{position:relative;margin:0;background:var(--eg-band);line-height:0}
.eg-fotoband img{display:block;width:100%;height:clamp(260px,38vw,560px);object-fit:cover}
.eg-fotoband .eg-symbol{line-height:1.4}
.eg-satz{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:clamp(24px,2.67vw,38px);line-height:1.22;letter-spacing:-0.034em;max-width:30ch;margin:0 0 clamp(26px,3vw,44px);text-wrap:balance}
.eg-spalten{columns:2 340px;column-gap:clamp(28px,4vw,64px)}
.eg-spalten p{break-inside:avoid;max-width:none}
.eg-fakten{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:0;border-top:1px solid var(--eg-linie);border-bottom:1px solid var(--eg-linie)}
.eg-fakt{padding:clamp(18px,2.4vw,30px) clamp(12px,2vw,28px) clamp(18px,2.4vw,30px) 0;border-right:1px solid var(--eg-linie)}
.eg-fakt:last-child{border-right:0}
.eg-fakt strong{display:block;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:clamp(24px,2.6vw,38px);line-height:1.1;color:var(--eg-akzent);overflow-wrap:anywhere}
.eg-fakt span{display:block;margin-top:6px;font-size:14px;color:var(--eg-leise)}
/* Lange Ortsnamen in der Faktenleiste kleiner und ohne Bruch mitten im Wort (Gegenprüfung 05.11.2026: „Castrop-/Rauxel“) */
.eg-fakt strong.eg-fakt-lang{font-size:clamp(18px,1.7vw,24px);overflow-wrap:normal;hyphens:manual}
/* Handy: zwei Fakten je Zeile statt vier übereinander */
@media (max-width:600px){.eg-fakten{grid-template-columns:1fr 1fr}.eg-fakt{border-right:0;border-bottom:1px solid var(--eg-linie);padding-right:10px}.eg-fakt:nth-last-child(-n+2){border-bottom:0}.eg-fakt strong{font-size:24px}.eg-fakt strong.eg-fakt-lang{font-size:17px}}
.eg-grosszitat{margin:0;max-width:900px}
.eg-grosszitat blockquote{margin:0}
.eg-grosszitat p{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(22px,2.4vw,34px);line-height:1.3;margin:0 0 18px;max-width:none}
.eg-grosszitat figcaption{font-size:15px;color:var(--eg-leise)}
.eg-kontaktzeile{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:clamp(20px,3vw,48px)}
.eg-kontaktzeile h3{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:13px;font-weight:600;letter-spacing:0.14em;text-transform:uppercase;margin:0 0 10px;color:var(--eg-leise)}
.eg-kontaktzeile p{margin:0}
.eg-kontaktzeile a{color:inherit}
.eg-zwei--mitte{align-items:center}

/* Eingefügte Bänder (Orte „Auch in Ihrer Nähe“ aus ortsmenue.py, „Darauf können Sie sich verlassen“ aus kundenwunsch.py)
   erbten Farbe und Grund vom Umfeld. Bei raeumung ist der Seitengrund fast schwarz und die Schrift dunkel: beide Bänder
   waren unsichtbar (Gegenprüfung 05.11.2026). Für alle Bauarten tragen sie jetzt den Grund und die Schrift der Variante. */
.om-nah,.kw-band{background:#0c0c0d;color:#f4f4f5}
/* Etikett über dem Auftaktfoto in der Schriftfarbe der Überschrift (09.11.2026, Kontrastmessung Ortsseiten Werkstatt:
   „Kunden aus Lembruch“ in Akzentbraun 4,35 statt 4,5 auf dem neuen KI-Foto) */
.eg-buehne .eg-etikett:not(.eg-etikett--dunkel){color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5);display:inline-block;background:rgba(0,0,0,.42);padding:5px 11px;border-radius:999px;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* ★ Lebendigkeits-Schicht (leben.py, Mert 06.11.2026: „so animierte Grafiken … die das Ganze lebendig machen, bei
   allen“). Farben der Variante, Formsprache der Bauart. Ohne Bewegung steht alles fertig da. */
.lb-band,.lb-umgebung,.lb-lauf{--eg-grund:#0c0c0d;--eg-text:#f4f4f5;--eg-karte:#18181b;--eg-band:#070708;--eg-band-text:#f4f4f5;--eg-akzent:#f47a6e;--eg-knopf:#c93a2e;--eg-knopf-text:#ffffff;--eg-linie:#27272a;--eg-leise:#a1a1aa;--lb-akzent:#c93a2e}
.lb-band{position:relative;overflow:hidden;isolation:isolate;background:var(--eg-band);color:var(--eg-band-text);padding:clamp(56px,8vw,128px) 0}
.lb-band::before{content:"";position:absolute;z-index:-1;width:min(70vw,900px);aspect-ratio:1;right:-14%;top:-40%;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--lb-akzent) 22%,transparent),transparent 65%);pointer-events:none}
.lb-band .eg-h2,.lb-band .eg-etikett{color:var(--eg-band-text)}
/* Neben einem dunklen Band der Vorlage hell, sonst verschmelzen zwei dunkle Flächen (Gegenprüfung 06.11.2026) */
.lb-band--hell::before{display:none}
.lb-band--hell{background:var(--eg-karte);color:var(--eg-text);--lb-akzent:#f47a6e}
.lb-band--hell .eg-h2,.lb-band--hell .eg-etikett{color:var(--eg-text)}
.lb-band--hell .eg-knopf--band{background:var(--eg-knopf);color:var(--eg-knopf-text)}
.lb-band--hell .lb-chips a:is(:hover,:focus-visible){color:#18181b}
.lb-umgebung{background:var(--eg-karte);color:var(--eg-text);padding:clamp(56px,8vw,128px) 0;--lb-akzent:#f47a6e}
.lb-zwei{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,4vw,64px);align-items:center}
.lb-zwei--karte{grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.lb-text .eg-h2{margin:0 0 22px;text-wrap:balance}
.lb-chips{list-style:none;margin:0 0 26px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.lb-chips :is(a,span){display:inline-block;padding:9px 16px;border:1px solid color-mix(in srgb,currentColor 32%,transparent);border-radius:4px;color:inherit;text-decoration:none;font-size:15px;line-height:1.2}
.lb-chips a{transition:background-color .35s ease,color .35s ease,border-color .35s ease}
.lb-chips a:hover,.lb-chips a:focus-visible,.lb-chips a[aria-current]{background:var(--lb-akzent);border-color:var(--lb-akzent);color:#ffffff}
.lb-umgebung .lb-chips a:hover,.lb-umgebung .lb-chips a:focus-visible,.lb-umgebung .lb-chips a[aria-current]{color:#18181b}
.lb-szene{margin:0;position:relative;min-width:0}
.lb-szene .ez{display:block;width:100%;height:auto;overflow:visible}
.lb-radar figcaption{margin-top:8px;font-size:12px;color:var(--eg-leise);text-align:right}
@media (max-width:860px){.lb-zwei,.lb-zwei--karte{grid-template-columns:1fr}.lb-szene{order:-1;max-width:640px}}

/* Linienszene in currentColor: auf dem Band hell, auf der Karte dunkel */
.lb-szene .ez :where(path,circle,rect,polygon,ellipse){vector-effect:non-scaling-stroke}
.lb-szene .ez-raster path{stroke:currentColor;stroke-opacity:.07;stroke-width:1;fill:none}
.lb-szene .ez-linie :where(path,circle){fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.lb-szene .ez-linie .ez-k3{stroke-opacity:.55;stroke-width:1.2}
.lb-szene .ez-felge{fill:none;stroke:currentColor;stroke-opacity:.5;stroke-width:1.2;stroke-dasharray:4 7}
.lb-szene .ez-mass path{fill:none;stroke:currentColor;stroke-opacity:.3;stroke-width:1}
.lb-szene :is(.ez-punkt,.ez-kern,.ez-messpunkte circle,.ez-faehrt,.ez-funkeln path){fill:var(--lb-akzent)}
.lb-szene .ez-schaden .ez-ring{fill:none;stroke:var(--lb-akzent);stroke-width:1.4;stroke-dasharray:6 6}
.lb-szene :is(.ez-schaden,.ez-ziel) .ez-puls{fill:var(--lb-akzent);fill-opacity:.12;stroke:var(--lb-akzent);stroke-opacity:.6;stroke-width:1}
.lb-szene .ez-schaden .ez-kreuz{stroke:var(--lb-akzent);stroke-width:1.4;fill:none}
.lb-szene .ez-leitung{fill:none;stroke:var(--lb-akzent);stroke-opacity:.8;stroke-width:1.2;stroke-dasharray:3 5}
.lb-szene .ez-karte rect{fill:currentColor;fill-opacity:.05;stroke:currentColor;stroke-opacity:.4;stroke-width:1}
.lb-szene .ez-karte path{stroke:currentColor;stroke-opacity:.45;stroke-width:4;stroke-linecap:round}
.lb-szene .ez-karte circle{fill:var(--lb-akzent)}
.lb-szene .ez-fenster{fill:currentColor;fill-opacity:.035;stroke:currentColor;stroke-opacity:.32;stroke-width:1}
.lb-szene .ez-maler .ez-fenster{fill:var(--lb-akzent);fill-opacity:.38;stroke:none}
.lb-szene .ez-seil{stroke:currentColor;stroke-opacity:.45;stroke-width:1}
.lb-szene .ez-korb path{fill:currentColor;fill-opacity:.06;stroke:currentColor;stroke-width:1.4;stroke-linejoin:round}
.lb-szene .ez-route{fill:none;stroke:currentColor;stroke-opacity:.55;stroke-width:1.4;stroke-dasharray:2 9;stroke-linecap:round}
.lb-szene .ez-faehrt{opacity:0}
.lb-szene .ez-kiste :is(polygon,rect){stroke:currentColor;stroke-opacity:.75;stroke-width:1.2;stroke-linejoin:round}
.lb-szene .ez-kiste .ez-f1{fill:currentColor;fill-opacity:.2}.lb-szene .ez-kiste .ez-f2{fill:currentColor;fill-opacity:.09}.lb-szene .ez-kiste .ez-f3{fill:currentColor;fill-opacity:.03}
.lb-szene .ez-maler .ez-kiste .ez-f1{fill:var(--lb-akzent);fill-opacity:.7}
.lb-szene .ez-kiste .ez-band{stroke:currentColor;stroke-opacity:.5;stroke-width:3;fill:none}
.lb-szene :is(.ez-felge,.ez-ring,.ez-puls,.ez-funkeln path,.ez-messpunkte circle,.ez-kiste,.lb-ort-puls){transform-box:fill-box;transform-origin:center}
/* Umgebungskarte */
.lb-radar .lb-sweep path{stroke:var(--lb-akzent);stroke-opacity:.55;stroke-width:2;fill:none}
.lb-radar .lb-sweep{transform-origin:500px 310px}
.lb-radar text{fill:currentColor;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:22px}
.lb-radar .lb-heim text{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:30px}
.lb-radar .lb-ort-kern{fill:currentColor}
.lb-radar .lb-ort-puls{fill:var(--lb-akzent);fill-opacity:0;stroke:none}
.lb-radar .lb-ort--aktiv .lb-ort-kern{fill:var(--lb-akzent)}
.lb-radar .lb-ort--aktiv text{font-weight:700}
@media (max-width:600px){.lb-radar text{font-size:34px}.lb-radar .lb-heim text{font-size:38px}.lb-radar .lb-ort-kern{r:8px}}

/* Laufband: große Wörter, abwechselnd voll und als Kontur */
/* Weiche Ränder als Verlauf in der eigenen Grundfarbe, nicht als Maske: die Maske ließ den dunklen Seitengrund als
   Keile durchscheinen (raeumung, handwerk, Gegenprüfung 06.11.2026) */
.lb-lauf{position:relative;overflow:hidden;background:var(--eg-grund);color:var(--eg-text);border-block:1px solid var(--eg-linie);padding:clamp(18px,2.6vw,30px) 0}
.lb-lauf::before,.lb-lauf::after{content:"";position:absolute;top:0;bottom:0;width:7%;z-index:1;pointer-events:none}
.lb-lauf::before{left:0;background:linear-gradient(90deg,var(--eg-grund),transparent)}
.lb-lauf::after{right:0;background:linear-gradient(270deg,var(--eg-grund),transparent)}
.lb-lauf-in{display:flex;width:max-content}
.lb-lauf span{display:inline-flex;align-items:center;gap:clamp(20px,3vw,40px);padding-right:clamp(20px,3vw,40px);white-space:nowrap;
  font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:400;font-size:clamp(26px,3.4vw,46px);line-height:1.1;letter-spacing:-0.034em;text-transform:none;color:var(--eg-akzent)}
.lb-lauf span:nth-child(even){color:transparent;-webkit-text-stroke:1.2px var(--eg-akzent)}
.lb-lauf span::after{content:"";width:10px;height:10px;border-radius:50%;background:var(--eg-akzent);opacity:.8}

/* Karten heben sich leicht, Fotos atmen */
.eg-karte,.eg-stimme{transition:transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.eg-karte:hover,.eg-stimme:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(0,0,0,.45)}}

@media (prefers-reduced-motion:no-preference){
  .lb-lauf-in{animation:lb-laufen 48s linear infinite}
  .lb-lauf:hover .lb-lauf-in{animation-play-state:paused}
  .eg-fotoband img{animation:lb-atmen 26s ease-in-out infinite alternate}
  .lb-szene .ez-zieh{stroke-dasharray:1;animation:lb-zeichnen 2.4s cubic-bezier(.65,0,.35,1) both}
  .lb-szene .ez-k1{animation-delay:.2s}.lb-szene .ez-k2{animation-delay:.9s}.lb-szene .ez-k3{animation-delay:1.4s}
  .lb-szene .ez-mass .ez-zieh{animation-delay:1.8s}
  .lb-szene .ez-leitung{animation:lb-zeichnen 1s ease both 2.8s,lb-marsch 1.2s linear 3.8s infinite}
  .lb-szene .ez-felge{animation:lb-drehen 9s linear infinite}
  .lb-szene .ez-scanner{animation:lb-scannen 5.5s cubic-bezier(.65,0,.35,1) 2.4s infinite}
  .lb-szene .ez-schaden{animation:lb-ein .8s ease 2.6s both}
  .lb-szene .ez-schaden .ez-ring{animation:lb-drehen 12s linear infinite}
  .lb-szene .ez-puls{animation:lb-pulsen 2.6s cubic-bezier(.16,1,.3,1) 3s infinite}
  .lb-szene .ez-messpunkte circle{animation:lb-auf .6s cubic-bezier(.16,1,.3,1) both}
  .lb-szene .ez-messpunkte circle:nth-child(2){animation-delay:2.15s}.lb-szene .ez-messpunkte circle:nth-child(1){animation-delay:2s}
  .lb-szene .ez-messpunkte circle:nth-child(3){animation-delay:2.3s}.lb-szene .ez-messpunkte circle:nth-child(4){animation-delay:2.45s}
  .lb-szene .ez-punkt{animation:lb-wandern 7s cubic-bezier(.65,0,.35,1) 2.5s infinite alternate}
  .lb-szene .ez-karte{animation:lb-schweben 1s cubic-bezier(.16,1,.3,1) 3.1s both}
  .lb-szene .ez-karte path{stroke-dasharray:160;animation:lb-tippen 1.4s cubic-bezier(.16,1,.3,1) 3.4s both}
  .lb-szene .ez-fenster{animation:lb-putzen 1.4s ease both;animation-delay:calc(var(--d) + 1.2s)}
  .lb-szene .ez-maler .ez-fenster{transform-box:fill-box;transform-origin:top;animation:lb-streichen 1.3s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--d) + 1.2s)}
  .lb-szene .ez-wischer{animation:lb-wischen 6s cubic-bezier(.65,0,.35,1) 1.2s infinite}
  .lb-szene .ez-maler .ez-wischer{animation:lb-rollen 5s cubic-bezier(.65,0,.35,1) 1.2s infinite alternate}
  .lb-szene .ez-seil{transform-box:view-box;transform-origin:0 74px;animation:lb-seil 16s cubic-bezier(.65,0,.35,1) 1s infinite alternate}
  .lb-szene .ez-korb{animation:lb-korb 16s cubic-bezier(.65,0,.35,1) 1s infinite alternate}
  .lb-szene .ez-funkeln path{animation:lb-funkeln 4.2s ease-in-out infinite;animation-delay:var(--d)}
  .lb-szene .ez-route{animation:lb-ein 1.6s ease both 1.2s,lb-marsch 1.4s linear 2.8s infinite}
  .lb-szene .ez-kiste{animation:lb-fallen .9s cubic-bezier(.34,1.4,.64,1) both;animation-delay:var(--d)}
  @supports (offset-path:path('M0 0')){
    .lb-szene .ez-faehrt{offset-path:path('M300 200 C 420 70, 600 70, 720 170');offset-rotate:0deg;animation:lb-fahren 4.4s cubic-bezier(.65,0,.35,1) 2.6s infinite}
  }
  .lb-radar .lb-sweep{animation:lb-drehen 7s linear infinite}
  .lb-radar .lb-ort{animation:lb-auf .7s cubic-bezier(.16,1,.3,1) both;animation-delay:var(--d)}
  .lb-radar .lb-ort-puls{animation:lb-ortpuls 3.2s ease-out infinite;animation-delay:calc(var(--d) + 1s)}
  .lb-radar .lb-ort--aktiv .lb-ort-puls{animation-duration:1.8s}
  /* Szene und Karte zeichnen sich neu, wenn sie ins Bild kommen (vorher liefen sie ungesehen) */
  .lb-szene.lb-los .ez-zieh{animation-name:lb-zeichnen2}
  /* Hereingleiten, wenn ein Abschnitt ins Bild kommt; ohne Skript und im ersten Bildschirm steht alles still da */
  /* Wartend = schon im Startzustand (Gegenprüfung 06.11.2026: sichtbar, dann auf 0, dann herein, das blitzte) */
  .lb-js .lb-warte:not(.lb-los):is(.lb-auf,.eg-fotoband,.eg-liste,.lb-ein){opacity:0}
  .lb-js .eg-schritte.lb-warte:not(.lb-los) li{opacity:0}
  .lb-js h2.lb-warte:not(.lb-los) .lb-w>span{transform:translateY(105%)}
  .lb-js .lb-warte.lb-los:is(.eg-abschnitt,.lb-auf,.eg-fotoband,.eg-liste){animation:lb-herein 1.5s cubic-bezier(.16,1,.3,1) both}
  .lb-js .eg-schritte.lb-warte.lb-los li{opacity:1;animation:lb-herein 1.3s cubic-bezier(.16,1,.3,1) both}
  .lb-js .eg-schritte.lb-los li:nth-child(2){animation-delay:.28s}.lb-js .eg-schritte.lb-los li:nth-child(3){animation-delay:.56s}
  .lb-js .eg-schritte.lb-los li:nth-child(4){animation-delay:.84s}.lb-js .eg-schritte.lb-los li:nth-child(5){animation-delay:1.12s}
  .lb-js .eg-schritte.lb-los .eg-nr{animation:lb-nr 1.2s cubic-bezier(.34,1.4,.64,1) both;animation-delay:inherit}
  /* Apple-Muster (Recherche 06.11.2026): Wörter gleiten hoch, Inhalte gestaffelt herein, Fotos öffnen sich */
  /* Polster oben (11.11.2026): ohne schnitt die Maske bei engem Zeilenabstand die Punkte von Ä Ö Ü ab ("Uberzeugen", blattwerk mit Newsreader; kraftwerk hatte es schon einzeln geflickt). Gilt für jede Bauart. */
  .lb-w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em;padding-top:.3em;margin-top:-.3em}
  .lb-w>span{display:inline-block}
  .lb-js h2.lb-warte.lb-los .lb-w>span{animation:lb-wort 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 95ms)}
  .lb-js .lb-ein.lb-warte.lb-los{animation:lb-herein 1.25s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j) * 160ms)}
  .lb-js img.lb-ein.lb-warte.lb-los{animation:lb-oeffnen 1.8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j) * 160ms)}
  .lb-zoom{transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
  :is(a,article,figure,.eg-karte):hover>.lb-zoom,:is(a,article,figure,.eg-karte):hover .lb-zoom{transform:scale(1.045)}
  .lb-tief{will-change:transform;transform:scale(1.12)}
  .lb-band .lb-szene{animation:lb-schweben-leicht 6s ease-in-out infinite alternate}
  /* Seitenwechsel: weiche Überblendung mit leichtem Zoom (Chrome, Edge, Safari 18) */
  @view-transition{navigation:auto}
  ::view-transition-old(root){animation:lb-vt-aus .32s cubic-bezier(.4,0,1,1) both}
  ::view-transition-new(root){animation:lb-vt-ein .45s cubic-bezier(.16,1,.3,1) both}
}
@keyframes lb-wort{from{transform:translateY(105%)}to{transform:none}}
@keyframes lb-oeffnen{from{opacity:0;clip-path:inset(8% 6% round 18px);transform:scale(1.06)}to{opacity:1;clip-path:inset(0 round 0);transform:none}}
@keyframes lb-schweben-leicht{from{transform:translateY(-6px)}to{transform:translateY(6px)}}
@keyframes lb-vt-aus{to{opacity:0;transform:scale(.985)}}
@keyframes lb-vt-ein{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}
@keyframes lb-laufen{to{transform:translateX(-50%)}}
@keyframes lb-atmen{from{transform:scale(1.02)}to{transform:scale(1.1) translate3d(-1.5%,-1%,0)}}
@keyframes lb-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lb-zeichnen2{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes lb-marsch{to{stroke-dashoffset:-11}}
@keyframes lb-drehen{to{transform:rotate(360deg)}}
@keyframes lb-scannen{0%{transform:translateX(0)}55%{transform:translateX(1160px)}100%{transform:translateX(1160px)}}
@keyframes lb-auf{from{opacity:0;transform:scale(.4)}to{opacity:1;transform:none}}
@keyframes lb-pulsen{0%{transform:scale(.5);opacity:1}100%{transform:scale(1.7);opacity:0}}
@keyframes lb-wandern{from{transform:translateX(-380px)}to{transform:translateX(380px)}}
@keyframes lb-schweben{from{opacity:0;transform:translate(800px,182px)}to{opacity:1;transform:translate(800px,160px)}}
@keyframes lb-tippen{from{stroke-dashoffset:160}to{stroke-dashoffset:0}}
@keyframes lb-putzen{0%{fill-opacity:.035}45%{fill-opacity:.5}100%{fill-opacity:.12}}
@keyframes lb-streichen{from{transform:scaleY(0)}to{transform:none}}
@keyframes lb-wischen{0%{transform:translateY(0)}70%{transform:translateY(560px)}100%{transform:translateY(560px)}}
@keyframes lb-rollen{from{transform:translateY(0)}to{transform:translateY(300px)}}
@keyframes lb-seil{from{transform:scaleY(1)}to{transform:scaleY(13)}}
@keyframes lb-korb{from{transform:translateY(0)}to{transform:translateY(312px)}}
@keyframes lb-funkeln{0%,100%{transform:scale(0);opacity:0}45%{transform:scale(1.15) rotate(20deg);opacity:1}60%{transform:scale(1);opacity:.9}}
@keyframes lb-fahren{0%{offset-distance:0%;opacity:0}10%{opacity:1}85%{offset-distance:100%;opacity:1}100%{offset-distance:100%;opacity:0}}
@keyframes lb-fallen{from{opacity:0;transform:translateY(-240px)}to{opacity:1;transform:none}}
@keyframes lb-ein{from{opacity:0}to{opacity:1}}
@keyframes lb-ortpuls{0%{transform:scale(.4);fill-opacity:.5}100%{transform:scale(2.4);fill-opacity:0}}
@keyframes lb-herein{from{opacity:0;transform:translateY(46px)}to{opacity:1;transform:none}}
@keyframes lb-nr{from{transform:scale(.3)}to{transform:none}}

/* ── Mockups (Mert 06.11.2026): Handy und Blatt aus CSS, Farben der Variante, Bewegung nur ohne reduzierte Bewegung */
.lb-mock{--eg-grund:#0c0c0d;--eg-text:#f4f4f5;--eg-karte:#18181b;--eg-band:#070708;--eg-band-text:#f4f4f5;--eg-akzent:#f47a6e;--eg-knopf:#c93a2e;--eg-knopf-text:#ffffff;--eg-linie:#27272a;--eg-leise:#a1a1aa;
  background:var(--eg-grund);color:var(--eg-text);padding:clamp(56px,8vw,128px) 0;overflow:hidden}
.lb-zwei--mock{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
.lb-mock-text{max-width:46ch;color:var(--eg-leise);margin:0 0 24px;font-size:17px;line-height:1.6}
.lb-mock-buehne{position:relative;display:flex;justify-content:center;align-items:center;min-height:clamp(420px,46vw,600px);isolation:isolate}
.lb-mock-buehne::before{content:"";position:absolute;inset:8% 4%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--eg-akzent) 16%,transparent),transparent)}
.lb-handy{position:relative;width:min(290px,78vw);aspect-ratio:9/18.5;border-radius:44px;background:#0d0d0f;padding:11px;box-shadow:0 40px 80px -30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;transform:rotate(-3deg)}
.lb-handy-kerbe{position:absolute;top:18px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0d0d0f;z-index:2}
.lb-handy-schirm{height:100%;border-radius:34px;overflow:hidden;background:var(--eg-karte);color:var(--eg-text);padding:54px 14px 18px;display:flex;flex-direction:column;gap:14px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.lb-handy-kopf{display:flex;align-items:center;gap:10px;font-size:14px;padding:0 4px}
.lb-handy-kopf b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-handy-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--eg-knopf);color:var(--eg-knopf-text);font-weight:700}
.lb-meldungen{display:flex;flex-direction:column;gap:10px}
.lb-meldung{display:flex;gap:10px;align-items:flex-start;background:var(--eg-grund);border-radius:16px;padding:12px;box-shadow:0 8px 20px -14px rgba(0,0,0,.4);font-size:13px;line-height:1.35}
.lb-meldung b{display:block;font-weight:600}
.lb-meldung small{display:block;color:var(--eg-leise);font-size:12px;margin-top:2px}
.lb-meldung-nr{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--eg-akzent);color:#18181b;font-weight:700;font-size:12px}
.lb-meldung--stimme .lb-zitat{margin:0 0 6px;font-size:12.5px;line-height:1.4;color:var(--eg-text)}
.lb-meldung--stimme b{font-size:12px;color:var(--eg-leise);font-weight:500}
.lb-handy--anruf .lb-handy-schirm{background:var(--eg-band);color:var(--eg-band-text);align-items:center;text-align:center;padding-top:70px}
.lb-anruf-zeile{margin:0;font-size:13px;opacity:.75;letter-spacing:.08em;text-transform:uppercase}
.lb-anruf-av{position:relative;width:96px;height:96px;margin:26px 0 18px;display:grid;place-items:center}
.lb-anruf-av b{position:relative;z-index:1;width:96px;height:96px;border-radius:50%;display:grid;place-items:center;background:var(--eg-knopf);color:var(--eg-knopf-text);font-size:40px;font-weight:700}
.lb-anruf-av span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--eg-band-text);opacity:0}
.lb-anruf-name{margin:0;font-size:19px;font-weight:600;max-width:100%;overflow-wrap:anywhere}
.lb-anruf-nr{margin:6px 0 0;font-size:15px;opacity:.85;font-variant-numeric:tabular-nums}
.lb-anruf-knoepfe{margin-top:auto;display:flex;gap:26px;padding-bottom:10px}
.lb-anruf-knoepfe i{width:52px;height:52px;border-radius:50%;background:color-mix(in srgb,var(--eg-band-text) 18%,transparent)}
.lb-anruf-knoepfe .lb-anruf-gruen{background:#2f9e5b}
.lb-blaetter{position:relative;width:min(380px,80vw);aspect-ratio:1/1.32}
.lb-blatt{position:absolute;inset:0;background:#fff;color:#1d1d1f;border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);padding:30px 28px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.lb-blatt--2{transform:rotate(4deg) translate(14px,8px);opacity:.75}
.lb-blatt--3{transform:rotate(-5deg) translate(-16px,12px);opacity:.5}
.lb-muster{position:absolute;top:18px;right:18px;padding:4px 10px;border:1.5px solid var(--eg-akzent);border-radius:6px;color:var(--eg-akzent);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;transform:rotate(6deg)}
.lb-blatt-kopf{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b70;max-width:70%}
.lb-blatt-titel{margin:0;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:22px;font-weight:700;line-height:1.15}
.lb-blatt-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.lb-blatt-fotos span{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(135deg,#e7e7ea,#cfcfd4)}
.lb-blatt-zeilen{display:flex;flex-direction:column;gap:9px}
.lb-blatt-zeilen i{display:block;height:7px;border-radius:4px;background:#e4e4e8;width:var(--b)}
.lb-blatt-fuss{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}
.lb-blatt-fuss i{width:38%;height:7px;border-radius:4px;background:#e4e4e8}
.lb-blatt-fuss svg{width:110px;height:28px}
.lb-blatt-fuss path{fill:none;stroke:var(--eg-akzent);stroke-width:2;stroke-linecap:round}
@media (max-width:860px){.lb-zwei--mock{grid-template-columns:1fr}.lb-mock-buehne{min-height:0;padding:20px 0}.lb-handy{transform:none}}
@media (prefers-reduced-motion:no-preference){
  .lb-handy:not(.lb-handy--anruf){animation:lb-schweben-leicht 5s ease-in-out infinite alternate}
  .lb-meldung{animation:lb-meldung 9s cubic-bezier(.16,1,.3,1) infinite both;animation-delay:calc(var(--k) * .7s)}
  .lb-anruf-av span{animation:lb-ring 2.4s ease-out infinite}
  .lb-anruf-av span:nth-child(2){animation-delay:1.2s}
  .lb-blatt-zeilen i{transform-origin:left;animation:lb-schreiben 1.1s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--z) * .22s + .4s)}
  .lb-blatt-fotos span{animation:lb-auf .6s cubic-bezier(.16,1,.3,1) both}
  .lb-blatt-fotos span:nth-child(2){animation-delay:.15s}.lb-blatt-fotos span:nth-child(3){animation-delay:.3s}
  .lb-blatt-fuss path{stroke-dasharray:1;animation:lb-zeichnen 1.6s cubic-bezier(.65,0,.35,1) 2.2s both}
  .lb-muster{animation:lb-stempel .5s cubic-bezier(.34,1.6,.64,1) 2.8s both}
  .lb-mock.lb-los .lb-blatt-zeilen i{animation-name:lb-schreiben2}
  .lb-mock.lb-los .lb-blatt-fuss path{animation-name:lb-zeichnen2}
}
@keyframes lb-meldung{0%{opacity:0;transform:translateY(16px) scale(.97)}8%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes lb-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
@keyframes lb-schreiben{from{transform:scaleX(0)}to{transform:none}}
@keyframes lb-schreiben2{from{transform:scaleX(0)}to{transform:none}}
@keyframes lb-stempel{from{opacity:0;transform:rotate(6deg) scale(1.8)}to{opacity:1;transform:rotate(6deg)}}

/* ★ TEMPO (Mert 09.11.2026: „Die Animationen sind sehr schnell … etwas langsamer, damit der Kunde sieht, wie lebendig
   sich alles bewegt. Da, wo es Sinn macht, schnell zu bleiben, kann es schnell bleiben.“)
   Langsam: was beim Scrollen hereinkommt (Abschnitte 1,5 s, Wörter 95 ms Abstand, Listen 0,28 s Staffel, Zahlen 2,4 s),
   und jede Mockup-Bewegung, die erst startet, wenn ihr Abschnitt im Bild ist (vorher lief sie ungesehen ab).
   Schnell bleiben: Hover, Knöpfe, Menüs, Seitenwechsel, alles, worauf der Kunde wartet. */
@media (prefers-reduced-motion:no-preference){
  .lb-js .lb-mock.lb-warte:not(.lb-los) *,.lb-js .lb-mock.lb-warte:not(.lb-los) *::before,.lb-js .lb-mock.lb-warte:not(.lb-los) *::after{animation-play-state:paused!important}
  .lb-js .lb-mock.lb-los .lb-mock-buehne{animation:lb-buehne 1.9s cubic-bezier(.16,1,.3,1) .25s both}
  @supports (animation-timeline:view()){
    /* Bühne hängt am Scrollen: steigt beim Hereinscrollen und kippt leicht, so sieht man die Bewegung im eigenen Tempo */
    .lb-js .lb-mock.lb-los .lb-mock-buehne{animation:lb-buehne-scroll linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    .lb-js .lb-mock .lb-text{animation:lb-text-scroll linear both;animation-timeline:view();animation-range:entry 5% cover 35%}
  }
}
@keyframes lb-buehne{from{opacity:0;transform:translateY(70px) scale(.94)}to{opacity:1;transform:none}}
@keyframes lb-buehne-scroll{from{opacity:.2;transform:translateY(110px) scale(.9) rotate(-2deg)}to{opacity:1;transform:none}}
@keyframes lb-text-scroll{from{opacity:.35;transform:translateX(-36px)}to{opacity:1;transform:none}}

/* ★ SCROLL-GESCHICHTE (leben.geschichte, Mert 09.11.2026: „Scroll-Driven Animations, Storytelling“, „animierte
   Mauszeiger, die von Geisterhand klicken, Ladebalken, die sich füllen“). Links steht die App-Karte (sticky), rechts
   scrollen die Schritte. Kein overflow:hidden am Abschnitt, sonst klebt nichts. Ohne Skript: Liste, Karte zeigt Schritt 1. */
.lb-story{--eg-grund:#0c0c0d;--eg-text:#f4f4f5;--eg-karte:#18181b;--eg-band:#070708;--eg-band-text:#f4f4f5;--eg-akzent:#f47a6e;--eg-knopf:#c93a2e;--eg-knopf-text:#ffffff;--eg-linie:#27272a;--eg-leise:#a1a1aa;
  background:var(--eg-grund);color:var(--eg-text);padding:clamp(64px,9vw,128px) 0}
.lb-story-kopf{max-width:720px;margin:0 0 clamp(28px,4vw,56px)}
.lb-story-kopf .eg-h2{margin:0;text-wrap:balance}
.lb-story-raster{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:clamp(28px,5vw,88px);align-items:start}
/* Karte nur mit Bewegung (Gegenprüfung 09.11.2026: bei „weniger Bewegung“ stand sie dauerhaft auf 1 von 4) */
.lb-story-buehne{position:sticky;top:clamp(90px,16vh,160px);display:none;justify-content:center}
.lb-js .lb-story-buehne{display:flex}
@media (prefers-reduced-motion:reduce){.lb-js .lb-story-buehne{display:none}}
.lb-story-karte{width:min(440px,100%);border-radius:20px;background:var(--eg-karte);box-shadow:0 40px 90px -40px rgba(0,0,0,.45),0 0 0 1px var(--eg-linie);overflow:hidden}
.lb-story-leiste{display:flex;align-items:center;gap:7px;padding:13px 16px;border-bottom:1px solid var(--eg-linie);font-size:13px;color:var(--eg-leise)}
.lb-story-leiste i{width:10px;height:10px;border-radius:50%;background:var(--eg-linie)}
.lb-story-leiste span{margin-left:8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb-story-inhalt{position:relative;padding:clamp(22px,3vw,34px);display:grid;gap:20px;justify-items:start}
.lb-story-ring{position:relative;width:118px;height:118px;display:grid;place-items:center;align-content:center}
.lb-story-ring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.lb-story-ring circle{fill:none;stroke-width:7}
.lb-story-ring-grund{stroke:var(--eg-linie)}
.lb-story-ring-fort{stroke:var(--eg-akzent);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - (var(--k, 0) + 1) / var(--n));transition:stroke-dashoffset 1.4s cubic-bezier(.65,0,.35,1)}
.lb-story-nr{position:relative;font-size:38px;line-height:1;font-variant-numeric:tabular-nums}
.lb-story-ring small{position:relative;font-size:12px;color:var(--eg-leise)}
.lb-story-punkte{display:flex;gap:8px}
.lb-story-punkte i{width:30px;height:6px;border-radius:3px;background:var(--eg-linie);transition:background-color .8s ease,width .8s cubic-bezier(.16,1,.3,1)}
.lb-story-punkte i.lb-an{background:var(--eg-akzent);width:54px}
.lb-story-titel{display:grid;min-height:2.6em;font-size:clamp(20px,2.2vw,26px);font-weight:600;line-height:1.25}
.lb-story-t{grid-area:1/1;opacity:0;transform:translateY(18px);transition:opacity .9s ease,transform 1.1s cubic-bezier(.16,1,.3,1)}
.lb-story-t.lb-an{opacity:1;transform:none}
.lb-story-lade{width:100%;height:6px;border-radius:3px;background:var(--eg-linie);overflow:hidden}
.lb-story-lade i{display:block;height:100%;width:100%;background:var(--eg-akzent);border-radius:inherit}
.lb-story-knopfzeile{position:relative;display:inline-block}
.lb-story-knopf{display:inline-block;padding:10px 18px;border-radius:999px;background:transparent;color:var(--eg-text);border:1.5px solid var(--eg-linie);font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:border-color .25s ease,background-color .25s ease}
.lb-story-knopf:hover{border-color:var(--eg-akzent)}
/* Zeiger am Knopf ausgerichtet (Spitze landet auf dem Knopf, Gegenprüfung 09.11.2026: 4 px daneben) */
.lb-story-zeiger{position:absolute;width:26px;height:26px;left:calc(100% - 22px);top:calc(50% - 6px);fill:var(--eg-text);stroke:var(--eg-karte);stroke-width:1.4;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25));opacity:0}
.lb-story-schritte{list-style:none;margin:0;padding:0;display:grid;gap:clamp(18px,3vw,28px)}
.lb-story-schritt{padding:clamp(22px,3vw,34px);border-radius:18px;border:1px solid var(--eg-linie);background:var(--eg-grund);transition:border-color .8s ease,box-shadow .8s ease,opacity .8s ease}
.lb-story-schritt h3{margin:0 0 8px;font-size:clamp(19px,1.8vw,23px)}
.lb-story-schritt p{margin:0;color:var(--eg-leise);line-height:1.6;max-width:52ch}
.lb-story-zahl{display:block;margin-bottom:10px;font-size:13px;font-weight:700;letter-spacing:.14em;color:var(--eg-akzent)}
@media (max-width:860px){
  .lb-story-raster{grid-template-columns:1fr}
  /* Handy: Karte klebt unten über der Anrufleiste, die Schritte lesen sich oben frei (Probe 09.11.2026: Karte oben verdeckte den aktiven Schritt) */
  .lb-story-buehne{order:2;top:auto;bottom:var(--lb-unten,92px);z-index:2;align-self:end}
  .lb-story-schritte{order:1}
  .lb-story-karte{width:100%}
  .lb-story-inhalt{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 18px;padding:18px}
  .lb-story-ring{width:78px;height:78px}.lb-story-nr{font-size:26px}.lb-story-ring small{font-size:10px}
  .lb-story-titel{font-size:18px;min-height:2.5em}
  .lb-story-lade{grid-column:1/-1}.lb-story-knopf,.lb-story-zeiger{display:none}
  .lb-story-punkte{grid-column:1/-1}
}
@media (prefers-reduced-motion:no-preference){
  /* Mit Skript: der Schritt in der Bildmitte ist hell, die anderen treten zurück; jeder Schritt bekommt Raum zum Scrollen */
  /* Raum zum Scrollen kommt aus den Abständen, nicht aus leeren Kästen (Probe 09.11.2026: halbleere Karten) */
  .lb-js .lb-story-schritte{gap:clamp(70px,22vh,220px);padding-block:4vh 18vh}
  .lb-js .lb-story-schritt{opacity:.38}
  .lb-js .lb-story-schritt.lb-an{opacity:1;border-color:var(--eg-akzent);box-shadow:0 24px 60px -36px rgba(0,0,0,.35)}
  .lb-js .lb-story-lade i{transform-origin:left;transform:scaleX(0)}
  .lb-js .lb-story.lb-los .lb-story-lade i,.lb-js .lb-story:not(.lb-warte) .lb-story-lade i{animation:lb-story-laden 3.2s cubic-bezier(.65,0,.35,1) both}
  .lb-js .lb-story.lb-neu .lb-story-lade i{animation-name:lb-story-laden2}
  .lb-js .lb-story:is(.lb-los,:not(.lb-warte)) .lb-story-zeiger{animation:lb-story-zeiger 3.2s cubic-bezier(.65,0,.35,1) .4s both}
  .lb-js .lb-story:is(.lb-los,:not(.lb-warte)) .lb-story-knopf{animation:lb-story-klick 3.2s ease .4s both}
  .lb-js .lb-story.lb-neu .lb-story-zeiger{animation-name:lb-story-zeiger2}.lb-js .lb-story.lb-neu .lb-story-knopf{animation-name:lb-story-klick2}
}
@keyframes lb-story-laden{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lb-story-laden2{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lb-story-zeiger{0%{opacity:0;transform:translate(150px,40px)}20%{opacity:1}62%{transform:translate(0,0)}70%{transform:translate(0,0) scale(.82)}78%{transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes lb-story-zeiger2{0%{opacity:0;transform:translate(150px,40px)}20%{opacity:1}62%{transform:translate(0,0)}70%{transform:translate(0,0) scale(.82)}78%{transform:translate(0,0)}100%{opacity:1;transform:translate(0,0)}}
@keyframes lb-story-klick{0%,64%{transform:none}70%{transform:scale(.94);filter:brightness(1.15)}80%,100%{transform:none}}
@keyframes lb-story-klick2{0%,64%{transform:none}70%{transform:scale(.94);filter:brightness(1.15)}80%,100%{transform:none}}

@media (max-width:860px){.lb-js .lb-story-schritte{gap:clamp(56px,16vh,150px)}}
/* Begleittext auf getönten Bändern in voller Textfarbe (09.11.2026, Kontrastmessung Werkstatt: „Lembruch hat den Sitz
   in …“ 4,35 statt 4,5 auf der Kartenfläche jedes zweiten Mockup-Bands) */
.lb-mock:nth-of-type(even) .lb-mock-text{color:var(--eg-text)}
/* Ohne Karte (reduzierte Bewegung, ohne Skript) steht die Geschichte als volle Liste, ohne leere Spalte (10.11.2026) */
.lb-story-raster{grid-template-columns:1fr}
.lb-js .lb-story-raster{grid-template-columns:minmax(0,5fr) minmax(0,6fr)}
@media (prefers-reduced-motion:reduce){.lb-js .lb-story-raster{grid-template-columns:1fr}}
@media (max-width:860px){.lb-js .lb-story-raster{grid-template-columns:1fr}}
/* ★ Mockup-Bibliothek (mockups.py, Mert 07.11.2026). Geräte und Blätter aus CSS in den Farben der Variante.
   Ohne Bewegung steht jedes Mockup fertig da; jede Bewegung nur unter prefers-reduced-motion: no-preference. */
.lb-mock{--mk-akzent:#f47a6e;--mk-knopf:#c93a2e;--mk-knopf-text:#ffffff;--mk-band:#070708;--mk-band-text:#f4f4f5;--mk-karte:#18181b;--mk-grund:#0c0c0d;--mk-text:#f4f4f5;--mk-leise:#a1a1aa;--mk-linie:#27272a}
.lb-mock:nth-of-type(even){background:var(--mk-karte)}
.lb-mock .lb-mock-buehne{perspective:1400px}
.mk-muster{display:inline-block;padding:3px 9px;border:1.5px solid var(--mk-akzent);border-radius:6px;color:var(--mk-akzent);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}

/* Handy */
.mk-handy{position:relative;width:min(290px,78vw);aspect-ratio:9/18.5;border-radius:44px;background:#0d0d0f;padding:11px;box-shadow:0 40px 80px -30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06) inset;transform:rotate(-3deg)}
.mk-kerbe{position:absolute;top:18px;left:50%;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#0d0d0f;z-index:2}
.mk-schirm{position:relative;height:100%;border-radius:34px;overflow:hidden;background:var(--mk-karte);color:var(--mk-text);padding:54px 14px 18px;display:flex;flex-direction:column;gap:14px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.mk-handy-kopf{display:flex;align-items:center;gap:10px;font-size:14px;padding:0 4px}
.mk-handy-kopf b{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-av{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-weight:700}
.mk-meldungen{display:flex;flex-direction:column;gap:10px}
.mk-meldung{display:flex;gap:10px;align-items:flex-start;background:var(--mk-grund);border-radius:16px;padding:12px;box-shadow:0 8px 20px -14px rgba(0,0,0,.4);font-size:13px;line-height:1.35}
.mk-meldung b{display:block;font-weight:600}
.mk-meldung small{display:block;color:var(--mk-leise);font-size:12px;margin-top:2px}
.mk-nr{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--mk-akzent);color:var(--mk-karte);font-weight:700;font-size:12px}
.mk-meldung--stimme .mk-zitat{margin:0 0 6px;font-size:12.5px;line-height:1.4;color:var(--mk-text)}
.mk-meldung--stimme b{font-size:12px;color:var(--mk-leise);font-weight:500}
/* Anruf mit Sprachwelle */
.mk-handy--anruf .mk-schirm{background:var(--mk-band);color:var(--mk-band-text);align-items:center;text-align:center;padding-top:64px}
.mk-anruf-zeile{margin:0;font-size:13px;opacity:.75;letter-spacing:.08em;text-transform:uppercase}
.mk-anruf-av{position:relative;width:92px;height:92px;margin:22px 0 14px;display:grid;place-items:center}
.mk-anruf-av b{position:relative;z-index:1;width:92px;height:92px;border-radius:50%;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:38px;font-weight:700}
.mk-anruf-av span{position:absolute;inset:0;border-radius:50%;border:2px solid var(--mk-band-text);opacity:0}
.mk-anruf-name{margin:0;font-size:18px;font-weight:600;max-width:100%;overflow-wrap:anywhere}
.mk-anruf-nr{margin:6px 0 0;font-size:15px;opacity:.85;font-variant-numeric:tabular-nums}
.mk-welle{display:flex;align-items:center;gap:5px;height:34px;margin-top:22px}
.mk-welle i{width:4px;height:8px;border-radius:2px;background:var(--mk-band-text);opacity:.8}
.mk-anruf-knoepfe{margin-top:auto;display:flex;gap:26px;padding-bottom:10px}
.mk-anruf-knoepfe i{width:50px;height:50px;border-radius:50%;background:color-mix(in srgb,var(--mk-band-text) 18%,transparent)}
.mk-anruf-knoepfe .mk-gruen{background:#2f9e5b}
/* Chat mit Tipp-Punkten */
.mk-chat{display:flex;flex-direction:column;gap:8px;font-size:12.5px;line-height:1.4}
.mk-blase{max-width:86%;padding:9px 12px;border-radius:16px}
.mk-blase--frage{align-self:flex-end;background:var(--mk-knopf);color:var(--mk-knopf-text);border-bottom-right-radius:4px}
.mk-blase--antwort{align-self:flex-start;background:var(--mk-grund);border-bottom-left-radius:4px;box-shadow:0 6px 16px -12px rgba(0,0,0,.4)}
.mk-tippt{align-self:flex-start;display:none;gap:4px;padding:10px 12px;border-radius:14px;background:var(--mk-grund)}
.mk-tippt i{width:6px;height:6px;border-radius:50%;background:var(--mk-leise)}
/* Navigation */
.mk-handy--navi .mk-schirm{padding:0;background:var(--mk-grund)}
.mk-karte{position:absolute;inset:0;width:100%;height:100%}
.mk-strassen{fill:none;stroke:var(--mk-linie);stroke-width:14;stroke-linecap:round}
.mk-route{fill:none;stroke:var(--mk-akzent);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.mk-pin path{fill:var(--mk-knopf)}.mk-pin-loch{fill:var(--mk-knopf-text)}.mk-pin-puls{fill:var(--mk-akzent);opacity:.2;transform-box:fill-box;transform-origin:center}
.mk-ich{fill:#2f7de1;stroke:#fff;stroke-width:3}
.mk-navi-karte{position:absolute;left:12px;right:12px;bottom:14px;background:var(--mk-karte);border-radius:16px;padding:12px 14px;box-shadow:0 10px 30px -14px rgba(0,0,0,.5);font-size:12.5px}
.mk-navi-karte b{display:block;font-size:13.5px}.mk-navi-karte small{color:var(--mk-leise)}
/* App-Fenster mit Reitern (Vorbild eviral.de) */
.mk-fenster{width:min(520px,92vw);border-radius:14px;background:var(--mk-grund);box-shadow:0 40px 80px -36px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie);overflow:hidden;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;transform:rotateY(-8deg) rotateX(4deg)}
.mk-fenster-leiste{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--mk-karte);border-bottom:1px solid var(--mk-linie);font-size:12px;color:var(--mk-leise)}
.mk-fenster-leiste i{width:11px;height:11px;border-radius:50%;background:#e2675d}.mk-fenster-leiste i:nth-child(2){background:#e7b84a}.mk-fenster-leiste i:nth-child(3){background:#5fbf62}
.mk-fenster-leiste span{margin-left:10px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-fenster-inhalt{padding:20px 22px 24px;position:relative}
.mk-reiter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.mk-reiter span{padding:7px 12px;border-radius:999px;font-size:12px;background:var(--mk-karte);color:var(--mk-text)}
.mk-reiter span:first-child{background:var(--mk-knopf);color:var(--mk-knopf-text)}
.mk-tafeln{position:relative;min-height:150px}
.mk-tafel{position:absolute;inset:0;opacity:0}.mk-tafel:first-child{opacity:1}
.mk-tafel b{display:block;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:21px;margin-bottom:8px}
.mk-tafel p{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--mk-leise)}
.mk-tafel i{display:block;height:8px;border-radius:4px;background:var(--mk-linie);margin-top:9px;width:80%}.mk-tafel i+i{width:56%}
.mk-leiste-fortschritt{height:6px;border-radius:3px;background:var(--mk-karte);overflow:hidden;margin-bottom:18px}
.mk-leiste-fortschritt i{display:block;height:100%;width:100%;background:var(--mk-akzent);transform-origin:left}
.mk-zeitreihe{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mk-zeitreihe li{display:grid;grid-template-columns:30px 1fr;column-gap:12px;font-size:13.5px}
.mk-zeitreihe span{grid-row:span 2;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--mk-karte);font-weight:700;font-size:13px}
.mk-zeitreihe small{color:var(--mk-leise);font-size:12.5px}
/* Mail */
.mk-mail-feld{display:flex;gap:12px;align-items:baseline;margin:0;padding:9px 0;border-bottom:1px solid var(--mk-linie);font-size:14px}
.mk-mail-feld small{width:58px;color:var(--mk-leise)}
.mk-tippen{display:inline-block;overflow:hidden;white-space:nowrap;border-right:2px solid var(--mk-akzent);padding-right:2px}
.mk-mail-zeilen{padding:16px 0 18px}.mk-mail-zeilen i{display:block;height:8px;border-radius:4px;background:var(--mk-linie);margin-bottom:10px;width:92%}.mk-mail-zeilen i:nth-child(2){width:74%}.mk-mail-zeilen i:nth-child(3){width:48%}
.mk-senden{display:inline-block;padding:9px 18px;border-radius:999px;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:13px;font-weight:600}
/* Klemmbrett */
.mk-klemmbrett{position:relative;width:min(340px,82vw);padding:46px 28px 30px;border-radius:16px;background:#fff;color:#1d1d1f;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);transform:rotate(2deg)}
.mk-klemme{position:absolute;top:-14px;left:50%;width:120px;height:34px;margin-left:-60px;border-radius:10px;background:var(--mk-band)}
.mk-klemm-titel{margin:0 0 16px;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:20px;font-weight:700}
.mk-klemmbrett ul{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.mk-klemmbrett li{display:flex;gap:12px;align-items:center;font-size:14.5px;padding-bottom:12px;border-bottom:1px dashed #d9d9de}
.mk-klemmbrett svg{flex:none;width:24px;height:24px;border-radius:6px;background:color-mix(in srgb,var(--mk-akzent) 14%,#fff)}
.mk-klemmbrett path{fill:none;stroke:var(--mk-akzent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
/* Visitenkarte zum Umdrehen */
.mk-karte3d{position:relative;width:min(380px,84vw);aspect-ratio:1.7;transform-style:preserve-3d;transform:rotateY(-14deg) rotateX(8deg)}
.mk-vk{position:absolute;inset:0;border-radius:14px;padding:26px 28px;backface-visibility:hidden;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.mk-vk--vorn{background:var(--mk-band);color:var(--mk-band-text)}
.mk-vk--vorn b{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:22px;line-height:1.15}.mk-vk--vorn small{opacity:.8;margin-top:6px}
.mk-vk-zeichen{position:absolute;top:22px;left:26px;width:46px;height:46px;border-radius:12px;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-weight:800;font-size:22px}
.mk-vk--hinten{background:#fff;color:#1d1d1f;transform:rotateY(180deg)}
.mk-vk--hinten b{font-size:16px;margin-bottom:10px}.mk-vk--hinten ul{list-style:none;margin:0;padding:0;font-size:13.5px;line-height:1.7}
/* Ortsschild */
.mk-schild-buehne{display:flex;flex-direction:column;align-items:center}
.mk-ortsschild{min-width:min(340px,80vw);padding:26px 34px;border-radius:12px;background:#f6c800;color:#111;border:6px solid #111;box-shadow:inset 0 0 0 3px #f6c800,inset 0 0 0 6px #111,0 30px 60px -30px rgba(0,0,0,.5);text-align:center;transform-origin:50% 120%}
.mk-ortsschild span{display:block;font:800 clamp(28px,4vw,44px)/1.05 "DIN Alternate","Arial Narrow",Arial,sans-serif;letter-spacing:.01em;overflow-wrap:anywhere}
.mk-ortsschild small{display:block;margin-top:6px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.mk-pfosten{width:14px;height:140px;background:linear-gradient(90deg,#9a9a9e,#d6d6da,#8c8c90);border-radius:0 0 4px 4px}
/* Leistungsfächer */
.mk-faecher{position:relative;width:min(340px,82vw);height:340px}
.mk-fkarte{position:absolute;inset:0 0 auto 0;height:300px;padding:26px;border-radius:18px;background:var(--mk-grund);color:var(--mk-text);box-shadow:0 30px 60px -32px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie);
  transform:rotate(calc((var(--k) - (var(--n) - 1) / 2) * 6deg)) translateY(calc(var(--k) * 4px));transform-origin:50% 100%;display:flex;flex-direction:column;gap:10px}
.mk-fkarte span{font-size:13px;color:var(--mk-akzent);font-weight:700}
.mk-fkarte b{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:22px;line-height:1.2}
.mk-fkarte small{font-size:14px;line-height:1.5;color:var(--mk-leise)}
.mk-fkarte:last-child{background:var(--mk-band);color:var(--mk-band-text)}.mk-fkarte:last-child small{color:inherit;opacity:.8}.mk-fkarte:last-child span{color:inherit}
/* Uhr */
.mk-uhr-buehne{display:flex;flex-direction:column;align-items:center;gap:26px}
.mk-uhr{position:relative;width:min(240px,62vw);aspect-ratio:1;border-radius:50%;background:var(--mk-grund);box-shadow:0 30px 60px -30px rgba(0,0,0,.45),inset 0 0 0 10px var(--mk-band)}
.mk-uhr>i{position:absolute;left:50%;top:18px;width:3px;height:14px;margin-left:-1.5px;background:var(--mk-text);transform-origin:50% calc(min(240px,62vw) / 2 - 18px);transform:rotate(calc(var(--s) * 30deg))}
.mk-zeiger{position:absolute;left:50%;bottom:50%;transform-origin:50% 100%;border-radius:3px;background:var(--mk-text)}
.mk-zeiger--h{width:6px;height:26%;margin-left:-3px;transform:rotate(-60deg)}
.mk-zeiger--m{width:4px;height:36%;margin-left:-2px;transform:rotate(60deg)}
.mk-zeiger--s{width:2px;height:40%;margin-left:-1px;background:var(--mk-akzent)}
.mk-uhr-mitte{position:absolute;left:50%;top:50%;width:14px;height:14px;margin:-7px;border-radius:50%;background:var(--mk-akzent)}
.mk-zeiten{list-style:none;margin:0;padding:0;text-align:center;font-size:15px}.mk-zeiten b{display:block;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-leise)}
/* Kamera */
.mk-kamera{width:min(440px,88vw);padding:16px;border-radius:24px;background:#141416;box-shadow:0 40px 80px -36px rgba(0,0,0,.6);transform:rotate(-2deg)}
.mk-sucher{position:relative;aspect-ratio:4/3;border-radius:12px;overflow:hidden}
.mk-sucher img{width:100%;height:100%;object-fit:cover;display:block}
.mk-ecke{position:absolute;width:28px;height:28px;border:3px solid #fff}
.mk-ecke--1{left:22%;top:22%;border-right:0;border-bottom:0}.mk-ecke--2{right:22%;top:22%;border-left:0;border-bottom:0}
.mk-ecke--3{left:22%;bottom:22%;border-right:0;border-top:0}.mk-ecke--4{right:22%;bottom:22%;border-left:0;border-top:0}
.mk-blitz{position:absolute;inset:0;background:#fff;opacity:0}
.mk-rec{position:absolute;right:10px;bottom:10px;padding:3px 8px;border-radius:6px;background:rgba(0,0,0,.55);color:#fff;font-size:11px}
.mk-ausloeser{display:flex;justify-content:center;padding-top:14px}.mk-ausloeser i{width:54px;height:54px;border-radius:50%;border:4px solid #fff;background:var(--mk-knopf)}
/* Siegel */
.mk-siegel{position:relative;width:min(260px,66vw);aspect-ratio:1;display:grid;place-items:center}
.mk-siegel svg{position:absolute;inset:0;width:100%;height:100%}
.mk-siegel text{fill:var(--mk-text);font:700 15px/1 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;letter-spacing:.18em;text-transform:uppercase}
.mk-siegel b{width:46%;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:clamp(34px,5vw,54px);font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;box-shadow:0 20px 40px -20px rgba(0,0,0,.5)}
/* Orte-Kette */
.mk-kette ol{list-style:none;margin:0;padding:0;display:grid;gap:18px;position:relative}
.mk-kette ol::before{content:"";position:absolute;left:11px;top:10px;bottom:10px;width:2px;background:var(--mk-linie)}
.mk-kette li{position:relative;display:flex;align-items:center;gap:16px;font-size:17px}
.mk-kette li i{position:relative;z-index:1;width:24px;height:24px;border-radius:50%;background:var(--mk-grund);box-shadow:inset 0 0 0 3px var(--mk-akzent)}
.mk-kette-heim i{background:var(--mk-akzent)!important}.mk-kette-heim span{font-weight:700;font-size:20px}
/* Branchen: Gutachten-Blatt */
.mk-blaetter{position:relative;width:min(380px,80vw);aspect-ratio:1/1.32}
.mk-blatt{position:absolute;inset:0;background:#fff;color:#1d1d1f;border-radius:10px;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);padding:30px 28px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.mk-blatt--2{transform:rotate(4deg) translate(14px,8px);opacity:.75}.mk-blatt--3{transform:rotate(-5deg) translate(-16px,12px);opacity:.5}
.mk-blatt .mk-muster{position:absolute;top:18px;right:18px;transform:rotate(6deg)}
.mk-blatt-kopf{margin:0;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b70;max-width:70%;overflow-wrap:anywhere;hyphens:auto}
@media (max-width:420px){.mk-blatt-kopf{letter-spacing:.04em;font-size:10px}}
.mk-blatt-titel{margin:0;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:22px;font-weight:700;line-height:1.15}
.mk-blatt-fotos{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.mk-blatt-fotos span{aspect-ratio:4/3;border-radius:6px;background:linear-gradient(135deg,#e7e7ea,#cfcfd4)}
.mk-blatt-zeilen{display:flex;flex-direction:column;gap:9px}.mk-blatt-zeilen i{display:block;height:7px;border-radius:4px;background:#e4e4e8;width:var(--b);transform-origin:left}
.mk-blatt-fuss{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end}.mk-blatt-fuss i{width:38%;height:7px;border-radius:4px;background:#e4e4e8}
.mk-blatt-fuss svg{width:110px;height:28px}.mk-blatt-fuss path{fill:none;stroke:var(--mk-akzent);stroke-width:2;stroke-linecap:round}
/* Tablet mit Schadenaufnahme */
.mk-tablet{width:min(500px,92vw);padding:14px;border-radius:28px;background:#121214;box-shadow:0 40px 80px -36px rgba(0,0,0,.6);transform:rotateX(10deg) rotateZ(-2deg)}
.mk-tablet-schirm{border-radius:16px;background:var(--mk-grund);color:var(--mk-text);padding:18px 20px}
.mk-tablet-kopf{display:flex;justify-content:space-between;align-items:center;margin:0 0 6px;font-size:15px}
.mk-auto{width:100%;height:auto;display:block}
.mk-auto-linie{fill:none;stroke:var(--mk-text);stroke-width:2;stroke-linejoin:round}
.mk-rad{fill:none;stroke:var(--mk-text);stroke-width:2}
.mk-mpunkt{fill:var(--mk-akzent);transform-box:fill-box;transform-origin:center}
.mk-scan{fill:var(--mk-akzent);opacity:.12}
.mk-befund{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px}
.mk-befund li{display:flex;gap:10px;align-items:center}.mk-befund li i{width:12px;height:12px;border-radius:50%;background:var(--mk-akzent)}
.mk-befund li span{height:8px;border-radius:4px;background:var(--mk-linie);flex:1;max-width:calc(90% - var(--k) * 12%)}
/* Messgerät */
.mk-mess{position:relative;width:min(220px,58vw);padding:20px 18px 70px;border-radius:30px;background:linear-gradient(180deg,#2a2a2e,#151517);box-shadow:0 40px 80px -36px rgba(0,0,0,.6);transform:rotate(8deg)}
.mk-mess-schirm{border-radius:14px;background:#cfe3cf;color:#132013;padding:14px;text-align:center;font-family:ui-monospace,Menlo,monospace}
.mk-mess-schirm .mk-muster{color:#132013;border-color:#132013;font-size:9px}
.mk-mess-schirm small{display:block;font-size:11px;margin-top:6px}
.mk-mess-wert{display:flex;justify-content:center;font-size:44px;line-height:1.1;font-variant-numeric:tabular-nums}
.mk-mess-balken{height:8px;border-radius:4px;background:rgba(19,32,19,.15);margin-top:8px;overflow:hidden}.mk-mess-balken i{display:block;height:100%;width:62%;background:#132013}
.mk-mess-kopf{position:absolute;left:50%;bottom:-36px;width:56px;height:70px;margin-left:-28px;border-radius:12px 12px 28px 28px;background:#1d1d20}
/* Farbfächer */
.mk-faecherfarben{position:relative;width:min(360px,82vw);height:300px}
.mk-faecherfarben i{position:absolute;left:50%;bottom:30px;width:56px;height:240px;margin-left:-28px;border-radius:14px;transform-origin:50% 92%;box-shadow:0 10px 30px -14px rgba(0,0,0,.5);
  background:color-mix(in srgb,var(--mk-akzent) calc(100% - var(--k) * 13%),#fff);transform:rotate(calc((var(--k) - 3) * 14deg))}
.mk-faecherfarben b{position:absolute;left:50%;bottom:44px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#1d1d1f}
/* Kennzeichen */
.mk-kz{position:relative;display:flex;align-items:center;width:min(440px,88vw);height:110px;border-radius:12px;background:#fff;border:5px solid #111;box-shadow:0 30px 60px -30px rgba(0,0,0,.5);overflow:hidden}
.mk-kz-eu{width:60px;height:100%;display:grid;place-items:end center;padding-bottom:12px;background:#1f45b5;color:#fff;font-weight:700}
.mk-kz b{flex:1;text-align:center;font:700 clamp(30px,6vw,52px)/1 "DIN Alternate","Arial Narrow",Arial,sans-serif;letter-spacing:.06em;color:#111}
.mk-kz .mk-muster{position:absolute;right:8px;top:6px;font-size:9px}
/* Sauber: Abzieher über einer Scheibe */
.mk-scheibe{position:relative;width:min(400px,86vw);aspect-ratio:4/3;border-radius:14px;overflow:hidden;background:linear-gradient(160deg,#cfe6f5,#eaf4fb 55%,#d7e9f6);box-shadow:0 30px 60px -30px rgba(0,0,0,.45),inset 0 0 0 10px #f2f2f2}
.mk-schmutz{position:absolute;inset:10px;background:radial-gradient(circle at 30% 40%,rgba(120,110,90,.35),transparent 40%),radial-gradient(circle at 70% 65%,rgba(120,110,90,.3),transparent 45%);transform-origin:right;transform:scaleX(.18)}
.mk-abzieher{position:absolute;top:10px;bottom:10px;left:18%;width:14px;border-radius:7px;background:var(--mk-band)}
.mk-glanz{position:absolute;top:-20%;left:-30%;width:30%;height:140%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:rotate(20deg)}
/* Kartons */
.mk-kartons{position:relative;width:min(380px,84vw);height:280px;display:grid;grid-template-columns:repeat(3,1fr);align-content:end;gap:8px}
.mk-kartons i{aspect-ratio:1.2;border-radius:6px;background:linear-gradient(180deg,#c99a63,#b4834d);box-shadow:inset 0 10px 0 rgba(0,0,0,.08),0 10px 20px -12px rgba(0,0,0,.5)}
.mk-kartons i::after{content:"";display:block;margin:0 auto;width:20%;height:100%;background:rgba(255,255,255,.18)}
.mk-leer{position:absolute;right:0;top:20px;padding:6px 12px;border-radius:999px;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:13px;opacity:1}
/* Kundenstimmen als laufende Wand */
.mk-wand{width:100%;overflow:hidden;-webkit-mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(180deg,transparent,#000 12%,#000 88%,transparent);height:460px}
.mk-wand-spur{display:grid;gap:14px}
.mk-wandkarte{margin:0;padding:18px 20px;border-radius:16px;background:var(--mk-grund);box-shadow:0 10px 30px -20px rgba(0,0,0,.4),0 0 0 1px var(--mk-linie)}
.mk-wandkarte .mk-zitat{margin:0 0 8px;font-size:15px;line-height:1.5}
.mk-wandkarte figcaption{font-size:13px;color:var(--mk-leise)}
@media (max-width:860px){.mk-handy,.mk-fenster,.mk-klemmbrett,.mk-karte3d,.mk-kamera,.mk-tablet,.mk-mess{transform:none}.mk-wand{height:380px}}

@media (prefers-reduced-motion:no-preference){
  .mk-handy:not(.mk-handy--anruf),.mk-klemmbrett,.mk-siegel b,.mk-kz{animation:lb-schweben-leicht 5s ease-in-out infinite alternate}
  .mk-meldung{animation:mk-meldung 9s cubic-bezier(.16,1,.3,1) infinite both;animation-delay:calc(var(--k) * .7s)}
  .mk-anruf-av span{animation:mk-ring 2.4s ease-out infinite}.mk-anruf-av span:nth-child(2){animation-delay:1.2s}
  .mk-welle i{animation:mk-welle .9s ease-in-out infinite alternate;animation-delay:calc(var(--w) * -.11s)}
  .mk-blase,.mk-tippt{animation:mk-chat 12s ease infinite both;animation-delay:calc(var(--k) * .9s)}
  .mk-tippt{display:flex;animation-name:mk-tippt}.mk-tippt i{animation:mk-punkt 1s ease-in-out infinite}.mk-tippt i:nth-child(2){animation-delay:.15s}.mk-tippt i:nth-child(3){animation-delay:.3s}
  .mk-route{stroke-dasharray:1;animation:mk-zeichnen 2.6s cubic-bezier(.65,0,.35,1) .6s both}
  .mk-pin{animation:mk-pin .7s cubic-bezier(.34,1.6,.64,1) 2.8s both}.mk-pin-puls{animation:mk-ring 2s ease-out 3.2s infinite}
  .mk-ich{animation:mk-ich 2.6s cubic-bezier(.65,0,.35,1) .6s both}
  .mk-tafel{animation:mk-tafel calc(var(--n) * 3.2s) infinite;animation-delay:calc(var(--k) * 3.2s)}
  .mk-tafel:first-child{opacity:0}
  .mk-reiter span{animation:mk-reiter calc(var(--n) * 3.2s) infinite;animation-delay:calc(var(--k) * 3.2s)}
  .mk-reiter span:first-child{background:var(--mk-karte);color:var(--mk-text)}
  .mk-leiste-fortschritt i{animation:mk-fortschritt 6s cubic-bezier(.65,0,.35,1) infinite}
  .mk-zeitreihe li{animation:mk-meldung 6s cubic-bezier(.16,1,.3,1) infinite both;animation-delay:calc(var(--k) * 1.2s)}
  .mk-tippen{animation:mk-tippen 3.4s steps(8) infinite}
  .mk-senden{animation:mk-klick 3.4s ease infinite}
  .mk-klemmbrett path{stroke-dasharray:1;animation:mk-zeichnen .9s ease both;animation-delay:calc(var(--k) * .7s + .8s)}
  .mk-karte3d{animation:mk-drehen 9s cubic-bezier(.65,0,.35,1) infinite}
  .mk-ortsschild{animation:mk-schild 4s ease-in-out infinite alternate}
  .mk-fkarte{animation:mk-faecher 1.7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .24s + .3s)}
  .mk-zeiger--s{animation:lb-drehen 12s linear infinite}.mk-zeiger--m{animation:mk-minute 60s linear infinite}
  .mk-blitz{animation:mk-blitz 4s ease infinite}.mk-ecke{animation:mk-fokus 4s ease infinite}
  .mk-siegel svg{animation:lb-drehen 26s linear infinite}
  .mk-kette li{animation:lb-herein 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .32s + .3s)}
  .mk-kette ol::before{transform-origin:top;animation:lb-schreiben 2.6s cubic-bezier(.65,0,.35,1) both}
  .mk-blatt-zeilen i{animation:lb-schreiben 1.5s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--z) * .4s + .6s)}
  .mk-blatt-fotos span{animation:lb-auf .6s cubic-bezier(.16,1,.3,1) both}.mk-blatt-fotos span:nth-child(2){animation-delay:.15s}.mk-blatt-fotos span:nth-child(3){animation-delay:.3s}
  .mk-blatt-fuss path{stroke-dasharray:1;animation:mk-zeichnen 2.2s cubic-bezier(.65,0,.35,1) 3s both}
  .mk-blatt .mk-muster{animation:mk-stempel .7s cubic-bezier(.34,1.6,.64,1) 4.2s both}
  .mk-auto-linie{stroke-dasharray:1;animation:mk-zeichnen 2.4s cubic-bezier(.65,0,.35,1) both}
  .mk-mpunkt{animation:mk-punktauf 4.8s cubic-bezier(.34,1.6,.64,1) infinite both;animation-delay:calc(var(--k) * .5s + 1.6s)}
  .mk-scan{animation:mk-scan 4.8s cubic-bezier(.65,0,.35,1) 1.2s infinite}
  .mk-befund li{animation:lb-herein 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .45s + 2.6s)}
  .mk-mess-wert span{animation:mk-ziffer 2.4s steps(1) infinite}.mk-mess-wert span:nth-child(2){animation-delay:.2s}.mk-mess-wert span:nth-child(3){animation-delay:.4s}
  .mk-mess-balken i{transform-origin:left;animation:mk-messen 2.4s cubic-bezier(.65,0,.35,1) infinite}
  .mk-mess{animation:mk-wippen 2.4s ease-in-out infinite}
  .mk-faecherfarben i{animation:mk-faecherauf 1.7s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--k) * .2s + .3s)}
  .mk-abzieher{animation:mk-abziehen 5s cubic-bezier(.65,0,.35,1) infinite}.mk-schmutz{animation:mk-wischen 5s cubic-bezier(.65,0,.35,1) infinite}
  .mk-glanz{animation:mk-glanz 5s ease 2.6s infinite}
  .mk-kartons i{animation:mk-karton 6s cubic-bezier(.34,1.4,.64,1) infinite both;animation-delay:calc(var(--k) * .25s)}
  .mk-leer{animation:mk-leer 6s ease infinite}
  .mk-wand-spur{animation:mk-wand 34s linear infinite}.mk-wand:hover .mk-wand-spur{animation-play-state:paused}
}
@keyframes mk-meldung{0%{opacity:0;transform:translateY(16px) scale(.97)}8%,82%{opacity:1;transform:none}92%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes mk-ring{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.8);opacity:0}}
@keyframes mk-welle{from{height:6px}to{height:30px}}
@keyframes mk-chat{0%,4%{opacity:0;transform:translateY(10px)}9%,86%{opacity:1;transform:none}96%,100%{opacity:0}}
@keyframes mk-tippt{0%,4%{opacity:0;max-height:0;padding:0}6%,9%{opacity:1;max-height:40px;padding:10px 12px}11%,100%{opacity:0;max-height:0;padding:0}}
@keyframes mk-punkt{0%,100%{opacity:.3;transform:none}50%{opacity:1;transform:translateY(-3px)}}
@keyframes mk-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mk-pin{from{opacity:0;transform:translate(250px,60px)}to{opacity:1;transform:translate(250px,120px)}}
@keyframes mk-ich{0%{transform:translate(0,0)}25%{transform:translate(0,-70px)}50%{transform:translate(110px,-70px)}75%{transform:translate(110px,-190px)}100%{transform:translate(190px,-280px)}}
@keyframes mk-tafel{0%{opacity:0;transform:translateY(10px)}4%,22%{opacity:1;transform:none}26%,100%{opacity:0}}
@keyframes mk-reiter{0%,25%{background:var(--mk-knopf);color:var(--mk-knopf-text)}26%,100%{background:var(--mk-karte);color:var(--mk-text)}}
@keyframes mk-fortschritt{0%{transform:scaleX(0)}80%,100%{transform:scaleX(1)}}
@keyframes mk-tippen{0%{max-width:0}50%,90%{max-width:9em}100%{max-width:0}}
@keyframes mk-klick{0%,58%,72%,100%{transform:none;filter:none}64%{transform:scale(.94);filter:brightness(.9)}}
@keyframes mk-drehen{0%,40%{transform:rotateY(-14deg) rotateX(8deg)}50%,90%{transform:rotateY(166deg) rotateX(8deg)}100%{transform:rotateY(346deg) rotateX(8deg)}}
@keyframes mk-schild{from{transform:rotate(-1.5deg)}to{transform:rotate(1.5deg)}}
@keyframes mk-faecher{from{opacity:0;transform:rotate(0) translateY(40px)}}
@keyframes mk-minute{from{transform:rotate(60deg)}to{transform:rotate(420deg)}}
@keyframes mk-blitz{0%,70%,100%{opacity:0}72%{opacity:.85}}
@keyframes mk-fokus{0%,40%{transform:scale(1.3);opacity:.4}55%,100%{transform:none;opacity:1}}
@keyframes mk-stempel{from{opacity:0;transform:rotate(6deg) scale(1.8)}to{opacity:1;transform:rotate(6deg)}}
@keyframes mk-punktauf{0%,8%{transform:scale(0)}14%,90%{transform:scale(1)}100%{transform:scale(0)}}
@keyframes mk-scan{0%{transform:translateX(0)}60%,100%{transform:translateX(360px)}}
@keyframes mk-ziffer{0%{opacity:.25}20%,100%{opacity:1}}
@keyframes mk-messen{0%{transform:scaleX(0)}60%,100%{transform:scaleX(1)}}
@keyframes mk-wippen{0%,100%{transform:rotate(8deg)}50%{transform:rotate(4deg) translateY(-6px)}}
@keyframes mk-faecherauf{from{transform:rotate(0)}}
@keyframes mk-abziehen{0%,10%{left:18%}60%,100%{left:calc(100% - 28px)}}
@keyframes mk-wischen{0%,10%{transform:scaleX(.82)}60%,100%{transform:scaleX(.04)}}
@keyframes mk-glanz{0%{left:-30%}40%,100%{left:130%}}
@keyframes mk-karton{0%{opacity:0;transform:translateY(-120px)}10%,70%{opacity:1;transform:none}85%,100%{opacity:0;transform:translateX(120px)}}
@keyframes mk-leer{0%,80%{opacity:0}88%,100%{opacity:1}}
@keyframes mk-wand{to{transform:translateY(-50%)}}
/* Dashboard, Widget, Pinnwand, kleine Karte (07.11.2026) */
.mk-kacheln{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:18px}
.mk-kachel{padding:14px;border-radius:12px;background:var(--mk-karte)}
.mk-kachel b{display:block;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:30px;line-height:1.1;color:var(--mk-akzent)}
.mk-kachel b.mk-kachel-lang{font-size:17px;color:var(--mk-text);overflow-wrap:anywhere}
.mk-kachel small{font-size:12px;color:var(--mk-leise)}
.mk-balken{display:flex;align-items:flex-end;gap:8px;height:90px;padding-top:6px;border-top:1px solid var(--mk-linie)}
.mk-balken i{flex:1;height:var(--h);border-radius:6px 6px 2px 2px;background:color-mix(in srgb,var(--mk-akzent) calc(40% + var(--k) * 8%),var(--mk-karte));transform-origin:bottom}
.mk-handy--start .mk-schirm{background:linear-gradient(160deg,var(--mk-band),color-mix(in srgb,var(--mk-band) 70%,var(--mk-akzent)));padding-top:60px}
.mk-apps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;padding:0 6px}
.mk-apps i{aspect-ratio:1;border-radius:14px;background:rgba(255,255,255,.18)}
.mk-apps--unten{margin-top:auto}
.mk-widget{display:flex;align-items:center;gap:10px;padding:14px;border-radius:22px;background:rgba(255,255,255,.92);color:#1d1d1f;box-shadow:0 14px 30px -14px rgba(0,0,0,.6)}
.mk-widget b{display:block;font-size:14px}.mk-widget small{display:block;font-size:11px;color:#6b6b70;line-height:1.3}
.mk-widget-ruf{flex:none;margin-left:auto;width:38px;height:38px;border-radius:50%;background:#2f9e5b}
.mk-pinnwand{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:18px;width:min(420px,88vw)}
.mk-notiz{position:relative;min-height:130px;padding:26px 18px 18px;background:color-mix(in srgb,var(--mk-akzent) 16%,#fffdf4);color:#1d1d1f;box-shadow:0 18px 30px -18px rgba(0,0,0,.5);transform:rotate(calc((var(--k) - 1.5) * 2.5deg))}
.mk-notiz:nth-child(even){background:#fffdf4}
.mk-notiz i{position:absolute;top:8px;left:50%;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:var(--mk-knopf);box-shadow:0 3px 4px rgba(0,0,0,.3)}
.mk-notiz b{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.25}
.mk-radar{width:min(520px,92vw);color:var(--mk-text)}
@media (prefers-reduced-motion:no-preference){
  .mk-kachel{animation:lb-herein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .28s + .3s)}
  .mk-balken i{animation:mk-balken 3.6s cubic-bezier(.65,0,.35,1) infinite alternate;animation-delay:calc(var(--k) * .12s)}
  .mk-widget{animation:mk-widget 6s cubic-bezier(.16,1,.3,1) infinite}
  .mk-widget-ruf{animation:mk-ruf 1.6s ease-in-out infinite}
  .mk-notiz{animation:mk-notiz 1.2s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--k) * .32s + .3s)}
}
@keyframes mk-balken{from{transform:scaleY(.35)}to{transform:none}}
@keyframes mk-widget{0%{transform:translateY(30px) scale(.94);opacity:0}10%,90%{transform:none;opacity:1}100%{opacity:0}}
@keyframes mk-ruf{0%,100%{box-shadow:0 0 0 0 rgba(47,158,91,.5)}50%{box-shadow:0 0 0 10px rgba(47,158,91,0)}}
@keyframes mk-notiz{from{opacity:0;transform:translateY(-30px) rotate(0)}}
/* Gegenprüfung Pusch 07.11.2026: Zeichen des Kunden in den Kreisen, beschriftete Zeilen, Liste statt Diagramm, weniger Leerraum */
.lb-mock .marke-zeichen{display:grid!important;place-items:center;width:100%!important;height:100%!important;margin:0!important;border-radius:inherit;overflow:hidden;background:inherit;color:inherit;font:inherit}
.lb-mock .marke-zeichen img{width:100%;height:100%;object-fit:contain}
.lb-mock .lb-mock-buehne{min-height:0;padding:clamp(10px,2vw,30px) 0}
.mk-dashliste{list-style:none;margin:0;padding:12px 0 0;border-top:1px solid var(--mk-linie);display:grid;gap:9px;font-size:14px}
.mk-dashliste li{display:flex;align-items:center;gap:10px}.mk-dashliste i{width:9px;height:9px;border-radius:50%;background:var(--mk-akzent)}
.mk-blatt-zeile{margin:0;display:grid;grid-template-columns:42% 1fr;align-items:center;gap:10px;font-size:11.5px;color:#4b4b50}
.mk-blatt-zeile b{font-weight:600}.mk-blatt-zeile i{display:block;height:7px;border-radius:4px;background:#e4e4e8;width:var(--b);transform-origin:left}
.mk-befund li b{font-size:12.5px;font-weight:600;min-width:84px}
.mk-handy--kurz{aspect-ratio:9/15}
@media (prefers-reduced-motion:no-preference){
  .mk-blatt-zeile i{animation:lb-schreiben 1.5s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--z) * .42s + .6s)}
  .mk-dashliste li{animation:lb-herein 1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .26s + 1.2s)}
}
/* Schmale Handys: Gutachten-Blatt einspaltig (09.11.2026, Messung 320 px: „Schadenbeschreibung“ 125 statt 84 px,
   ganze Kfz-Bauart fiel zurück). Beschriftung über dem Balken, Blatt darf höher werden. */
@media (max-width:420px){
  .mk-blaetter{aspect-ratio:auto;min-height:0}
  .mk-blaetter .mk-blatt:not(.mk-blatt--2):not(.mk-blatt--3){position:relative;inset:auto;padding:22px 18px}
  .mk-blatt-zeile{grid-template-columns:1fr;gap:4px;font-size:12px}
  .mk-blatt-zeile b{overflow-wrap:anywhere}
}
/* Widget-Leistungszeile bricht um statt überzustehen (09.11.2026, Messung 320 px: „Unfall- und Schadengutachten ·
   Beweissicherung“ 98 statt 80 px, ganze Kfz-Bauart fiel zurück) */
.mk-widget>div{min-width:0;flex:1 1 auto}
.mk-widget small{overflow-wrap:anywhere;hyphens:auto}
/* Texte in Mockups brechen auf schmalen Handys um, statt überzustehen (10.11.2026: Widget, Navi-Karte, Dashboard-Liste
   hielten bei 320 px die Messung und damit ganze Bauarten an) */
.lb-mock [class*="mk-"] :is(b,small,strong,p,span){overflow-wrap:anywhere}
.mk-navi-karte,.mk-dashliste li{min-width:0}
/* ★ Explosionsansicht (explosion.py, Mert 09.11.2026, Vorbild apple.com). Reines CSS-3D: jedes Teil ist ein Quader
   aus sechs Flächen (oder Scheiben, Dach, Rahmen, Karton), Maße in Einheiten, eine Einheit = --u. Gesteuert über
   --e (Öffnung 0 bis 1), --w8 (Abflug), --dreh; ohne Skript stehen sie auf dem geöffneten Endbild.
   Bewegung nur unter prefers-reduced-motion: no-preference (Höhe und feste Bühne erst mit .ex-an aus dem Skript). */
.lb-explo{--eg-grund:#0c0c0d;--eg-text:#f4f4f5;--eg-karte:#18181b;--eg-band:#070708;--eg-band-text:#f4f4f5;--eg-akzent:#f47a6e;--eg-knopf:#c93a2e;--eg-knopf-text:#ffffff;--eg-linie:#27272a;--eg-leise:#a1a1aa;
  --ex-akz:#c93a2e;--ex-nass:#2f7fd6;
  position:relative;overflow-x:clip;color:var(--eg-text);padding:clamp(56px,8vw,110px) 0;
  background:radial-gradient(90% 80% at 72% 46%,color-mix(in srgb,var(--eg-karte) 86%,#fff) 0,var(--eg-karte) 70%)}
.ex-raster{display:grid;grid-template-columns:minmax(300px,3.4fr) minmax(0,8.6fr);gap:clamp(24px,3vw,48px);align-items:center;width:100%}
.ex-text{min-width:0}
.ex-text .eg-h2{margin:0 0 18px}
.ex-satz{max-width:42ch;margin:0 0 20px;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.6;color:var(--eg-leise)}
.ex-hinweis{white-space:nowrap;margin:0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:12px;letter-spacing:.02em;color:var(--eg-leise)}
.ex-sr{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.ex-spalte{min-width:0;container-type:inline-size}
.ex-szene{--tw:230px;--u:max(.3px,min(1.55px,calc((100cqi - var(--tw)) / var(--bx)),calc((100svh - 190px) / var(--by))));
  position:relative;height:calc(var(--by) * var(--u));perspective:calc(var(--per) * var(--u));
  perspective-origin:calc(var(--ox) * var(--u)) calc(var(--oy) * var(--u));font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
@supports not (width:1cqi){.ex-szene{--u:.62px}}
.ex-welt{position:absolute;left:calc(var(--ox) * var(--u));top:calc(var(--oy) * var(--u));width:0;height:0;transform-style:preserve-3d}

/* Teil: Bildschirmversatz (Öffnung, Abflug) nach der Drehung, damit die Beschriftungen exakt mitlaufen */
.ex-teil{--W:calc(var(--w) * var(--u));--D:calc(var(--d) * var(--u));--H:calc(var(--h) * var(--u));
  position:absolute;left:0;top:0;transform-style:preserve-3d;
  transform:translate3d(calc((var(--ex) * var(--e) + var(--fx) * var(--w8)) * var(--u)),calc((var(--ey) * var(--e) + var(--fy) * var(--w8)) * var(--u)),0) rotateX(var(--kipp)) rotateY(var(--dreh)) translate3d(calc(var(--x) * var(--u)),calc(var(--y) * var(--u)),calc(var(--z) * var(--u)))}
/* outline: glättet die Kanten und schließt die Pixellücken mitten in den Flächen (Gegenprüfung 09.11.2026: Pünktchen) */
.ex-f{outline:1px solid transparent;position:absolute;left:0;top:0;display:block;box-sizing:border-box;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  opacity:calc(1 - min(1,var(--w8) * 1.8) * var(--fade));--sh:.2;background:linear-gradient(rgba(0,0,0,var(--sh)),rgba(0,0,0,var(--sh))),var(--ms)}
/* Studiolicht von links oben: Oberseite hell mit Glanz, Seiten nach Drehwinkel schattiert */
.lb-explo{--sv:.12;--sr:.3;--sl:.2;--sb:.34}
@supports (width:calc(1px * sin(1deg))){.lb-explo{--sv:calc(.24 + .2 * sin(var(--dreh)));--sr:calc(.2 + .16 * cos(var(--dreh)));--sl:calc(.16 - .1 * sin(var(--dreh)))}}
.ex-o{background:linear-gradient(118deg,rgba(255,255,255,.42),rgba(255,255,255,0) 44%),var(--mo)}
.ex-v{--sh:var(--sv)}.ex-r{--sh:calc(var(--sr) * (1 - var(--steh,0) * .75))}.ex-l{--sh:var(--sl)}.ex-h,.ex-u{--sh:var(--sb)}
.ex-o,.ex-u,.ex-sch{width:var(--W);height:var(--D);margin:calc(var(--D) / -2) 0 0 calc(var(--W) / -2)}
.ex-o{transform:rotateX(90deg) translateZ(calc(var(--H) / 2))}
.ex-u{transform:rotateX(-90deg) translateZ(calc(var(--H) / 2))}
.ex-v,.ex-h{width:var(--W);height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--W) / -2)}
.ex-v{transform:translateZ(calc(var(--D) / 2))}
.ex-h{transform:rotateY(180deg) translateZ(calc(var(--D) / 2))}
.ex-r,.ex-l{width:var(--D);height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--D) / -2)}
.ex-r{transform:rotateY(90deg) translateZ(calc(var(--W) / 2))}
.ex-l{transform:rotateY(-90deg) translateZ(calc(var(--W) / 2))}
/* Scheiben (Reifen, Felge, Bremsscheibe, Nabe, Teller): gestapelte Kreise ergeben den Rand, mit --loch als Ring;
   die Innenkanten der gestapelten Ringe bilden die Innenwand */
.ex-form-rund[style*="--loch"] .ex-sch{-webkit-mask:radial-gradient(closest-side,transparent 0 var(--loch),#000 calc(var(--loch) + .6%));mask:radial-gradient(closest-side,transparent 0 var(--loch),#000 calc(var(--loch) + .6%))}
.ex-sch{border-radius:50%;--sh:.26;transform:rotateX(90deg) translateZ(calc(var(--H) * (.5 - var(--k))))}
.ex-sch.ex-o{--sh:0;background:linear-gradient(118deg,rgba(255,255,255,.42),rgba(255,255,255,0) 44%),var(--mo)}
/* Rahmen: Ober- und Unterseite mit Öffnung, dazu die vier Innenflächen */
.ex-form-rahmen{--RB:calc(var(--rb) * var(--u))}
.ex-form-rahmen :is(.ex-o,.ex-u){padding:var(--RB);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.ex-iv,.ex-ih{width:calc(var(--W) - 2 * var(--RB));height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--W) / -2 + var(--RB))}
.ex-iv{--sh:var(--sb);transform:translateZ(calc(var(--D) / 2 - var(--RB))) rotateY(180deg)}
.ex-ih{--sh:var(--sv);transform:translateZ(calc(var(--D) / -2 + var(--RB)))}
.ex-ir,.ex-il{width:calc(var(--D) - 2 * var(--RB));height:var(--H);margin:calc(var(--H) / -2) 0 0 calc(var(--D) / -2 + var(--RB))}
.ex-ir{--sh:var(--sb);transform:translateX(calc(var(--W) / 2 - var(--RB))) rotateY(-90deg)}
.ex-il{--sh:var(--sl);transform:translateX(calc(var(--W) / -2 + var(--RB))) rotateY(90deg)}
/* Karton: offen, Klappen öffnen sich mit --e */
.ex-form-karton .ex-f{backface-visibility:visible;-webkit-backface-visibility:visible}
.ex-form-karton{--kl:calc(-90deg - 122deg * min(1,var(--e) * 1.8))}
/* Seitenklappen öffnen nur bis knapp über senkrecht: so bleibt die rechte Klappe im Blick (Abnahme 09.11.2026) */
.ex-form-karton{--kls:calc(-90deg - 100deg * min(1,var(--e) * 1.8))}
.ex-kl{--sh:.04;background:linear-gradient(rgba(0,0,0,var(--sh)),rgba(0,0,0,var(--sh))),var(--mo);transform-origin:50% 0}
.ex-kl-v,.ex-kl-h{width:var(--W);height:calc(var(--D) / 2);margin:0 0 0 calc(var(--W) / -2)}
.ex-kl-r,.ex-kl-l{width:var(--D);height:calc(var(--W) / 2);margin:0 0 0 calc(var(--D) / -2)}
.ex-kl-v{transform:translate3d(0,calc(var(--H) / -2),calc(var(--D) / 2)) rotateX(var(--kl))}
.ex-kl-h{transform:rotateY(180deg) translate3d(0,calc(var(--H) / -2),calc(var(--D) / 2)) rotateX(var(--kl))}
.ex-kl-r{--sh:.1;transform:rotateY(90deg) translate3d(0,calc(var(--H) / -2),calc(var(--W) / 2)) rotateX(var(--kls))}
.ex-kl-l{--sh:.1;transform:rotateY(-90deg) translate3d(0,calc(var(--H) / -2),calc(var(--W) / 2)) rotateX(var(--kls))}

/* ── Werkstoffe: --mo Oberseite, --ms Seiten */
.ex-m-klarlack{--mo:linear-gradient(135deg,rgba(255,255,255,.72),rgba(226,238,252,.3) 52%,rgba(255,255,255,.6));--ms:rgba(214,230,246,.6)}
.ex-m-klarlack .ex-f,.ex-m-glas .ex-f,.ex-m-deck .ex-f{box-shadow:inset 0 0 0 1px rgba(255,255,255,.85)}
.ex-m-basislack{--mo:radial-gradient(circle,rgba(255,255,255,.22) 0 .6px,transparent 1.2px) 0 0/5px 5px,linear-gradient(135deg,color-mix(in srgb,var(--ex-lack) 62%,#fff),var(--ex-lack) 42%,color-mix(in srgb,var(--ex-lack) 62%,#000));--ms:color-mix(in srgb,var(--ex-lack) 78%,#000)}
.ex-m-fueller{--mo:linear-gradient(135deg,#eef0f2,#cdd1d5);--ms:#c3c7cb}
.ex-m-ktl{--mo:linear-gradient(135deg,#636a73,#363a40);--ms:#3b3f45}
.ex-m-blech{--mo:linear-gradient(112deg,#d6dae0 0,#f7f8fa 20%,#a7aeb7 46%,#e6e9ec 68%,#b5bbc3);--ms:linear-gradient(90deg,#949ba4,#c8cdd3 60%,#a3a9b1)}
.ex-m-glas{--mo:linear-gradient(135deg,rgba(255,255,255,.62),rgba(196,228,222,.26) 46%,rgba(255,255,255,.5));--ms:rgba(64,146,124,.66)}
.ex-m-pvb{--mo:linear-gradient(135deg,rgba(250,248,240,.82),rgba(232,228,214,.76));--ms:rgba(214,208,190,.9)}
.ex-m-sensor{--mo:radial-gradient(circle at 50% 46%,#07080a 0 12%,#3f5068 13% 17%,#1a1c1f 18% 21%,transparent 22%),linear-gradient(135deg,#3b3e44,#16181b);--ms:#1f2125}
.ex-m-scheibe{--mo:radial-gradient(circle,transparent 0 33%,rgba(0,0,0,.22) 33.5% 35%,transparent 35.5%),conic-gradient(from 30deg,rgba(255,255,255,.45),rgba(255,255,255,0) 18%,rgba(0,0,0,.1) 30%,rgba(255,255,255,0) 45%,rgba(255,255,255,.5) 55%,rgba(255,255,255,0) 70%,rgba(0,0,0,.12) 85%,rgba(255,255,255,.45)),repeating-radial-gradient(circle,#c3c8ce 0 1px,#b2b8bf 1px 2.4px),radial-gradient(circle,#9aa0a7 0 34%,#c4c9cf 35%);--ms:linear-gradient(90deg,#7e848b,#a9aeb4)}
.ex-m-reifen{--mo:radial-gradient(closest-side,transparent 0 63%,#1b1c1f 64% 67%,#2b2d31 68% 86%,#232427 87% 92%,#18191b 93%),repeating-conic-gradient(rgba(255,255,255,.05) 0 2deg,transparent 2deg 6deg);--ms:repeating-conic-gradient(#202124 0 4deg,#161719 4deg 8deg)}
.ex-m-felge{--mo:conic-gradient(from 20deg,rgba(255,255,255,.55),rgba(255,255,255,0) 20%,rgba(0,0,0,.12) 35%,rgba(255,255,255,.4) 55%,rgba(255,255,255,0) 72%,rgba(0,0,0,.1) 88%,rgba(255,255,255,.55)),radial-gradient(closest-side,#33373d 0 9%,#d9dde1 10% 100%);--ms:linear-gradient(90deg,#9ca3ab,#d3d7db)}
/* Felge: unten nur Felgenbett und Nabe (hohl), oben drei Lagen mit fünf Speichen, dazwischen echte Öffnungen */
.ex-m-felge{--ms:linear-gradient(90deg,#6f757d,#a3a9b0)}
.ex-m-felge .ex-sch{-webkit-mask:radial-gradient(closest-side,#000 0 20%,transparent 20.6% 87%,#000 87.6%);mask:radial-gradient(closest-side,#000 0 20%,transparent 20.6% 87%,#000 87.6%)}
.ex-m-felge .ex-sch:nth-last-child(-n+3){-webkit-mask:radial-gradient(closest-side,#000 0 24%,transparent 24.6% 85%,#000 85.6%),repeating-conic-gradient(from -7deg,#000 0 14deg,transparent 14deg 72deg);mask:radial-gradient(closest-side,#000 0 24%,transparent 24.6% 85%,#000 85.6%),repeating-conic-gradient(from -7deg,#000 0 14deg,transparent 14deg 72deg)}
.ex-m-scheibe{--mo:radial-gradient(closest-side,transparent 0 46%,rgba(0,0,0,.22) 47% 49%,transparent 50%),conic-gradient(from 30deg,rgba(255,255,255,.45),rgba(255,255,255,0) 18%,rgba(0,0,0,.1) 30%,rgba(255,255,255,0) 45%,rgba(255,255,255,.5) 55%,rgba(255,255,255,0) 70%,rgba(0,0,0,.12) 85%,rgba(255,255,255,.45)),repeating-radial-gradient(circle,#c3c8ce 0 1px,#b2b8bf 1px 2.4px);--ms:linear-gradient(90deg,#7e848b,#a9aeb4)}
.ex-m-abstand{--mo:linear-gradient(135deg,#c9ced4,#8e959d);--ms:#8a9098}
.ex-m-nabe{--mo:var(--bz),radial-gradient(circle,#2c3036 0 14%,#9aa1a8 14.5% 18%,transparent 18.5%),radial-gradient(circle,#ccd1d6,#878d94);--ms:#767c83}
.ex-m-deck{--mo:linear-gradient(135deg,rgba(255,255,255,.82),rgba(232,240,252,.5) 50%,rgba(255,255,255,.75));--ms:rgba(236,242,250,.85)}
.ex-m-toenung{--mo:linear-gradient(135deg,rgba(56,60,70,.84),rgba(14,16,20,.9));--ms:rgba(12,13,16,.92)}
.ex-m-kleber{--mo:linear-gradient(135deg,rgba(252,246,222,.72),rgba(240,230,196,.66));--ms:rgba(230,218,180,.85)}
.ex-m-kennzeichen{--mo:#fbfbf8;--ms:#cfcfca}
.ex-m-kennzeichen .ex-o{box-shadow:inset 0 0 0 calc(3 * var(--u)) #1d1d1f;border-radius:calc(5 * var(--u))}
.ex-kz{position:absolute;inset:calc(3 * var(--u));display:flex;align-items:stretch;overflow:hidden;border-radius:calc(3 * var(--u))}
.ex-kz b{flex:none;width:12%;display:flex;align-items:flex-end;justify-content:center;padding-bottom:calc(6 * var(--u));background:#1f47a8;color:#fff;font-size:calc(15 * var(--u));font-weight:700;font-family:system-ui,sans-serif}
.ex-kz span{flex:1;display:grid;place-items:center;color:#151515;font:700 calc(44 * var(--u))/1 "DIN Alternate","Arial Narrow",system-ui,sans-serif;letter-spacing:.08em}
.ex-m-papier{--mo:linear-gradient(#cfe1c6,#cfe1c6) 0 0/100% 16% no-repeat,repeating-linear-gradient(transparent 0 9%,rgba(40,80,40,.15) 9% 10%),#e7f0e1;--ms:#d3ddcb}
.ex-m-papier-weiss{--mo:linear-gradient(var(--ex-akz),var(--ex-akz)) 0 0/100% 12% no-repeat,repeating-linear-gradient(transparent 0 10%,rgba(0,0,0,.1) 10% 11%),#fbfbf8;--ms:#e0e0da}
.ex-m-papier .ex-o,.ex-m-papier-weiss .ex-o{padding:calc(14 * var(--u)) calc(9% + 2px) 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.ex-blatt{position:absolute;right:8%;top:calc(3 * var(--u));font:700 calc(12 * var(--u))/1.6 system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:rgba(0,0,0,.55)}
.ex-m-papier-weiss .ex-blatt{color:#fff}
.ex-m-wandfarbe{--mo:linear-gradient(135deg,color-mix(in srgb,var(--ex-akz) 46%,#fff),color-mix(in srgb,var(--ex-akz) 64%,#fff));--ms:color-mix(in srgb,var(--ex-akz) 72%,#fff)}
.ex-m-grundierung{--mo:linear-gradient(135deg,#fbfaf7,#ecebe6);--ms:#e4e2dc}
.ex-m-putz{--mo:radial-gradient(circle at 30% 40%,rgba(0,0,0,.07) 0 1px,transparent 1.6px) 0 0/7px 7px,radial-gradient(circle at 70% 70%,rgba(255,255,255,.5) 0 1px,transparent 1.6px) 0 0/11px 11px,linear-gradient(135deg,#efe9e0,#dfd7cb);--ms:radial-gradient(circle,rgba(0,0,0,.06) 0 1px,transparent 1.6px) 0 0/6px 6px,#d9d0c3}
.ex-m-mauer{--mo:#b65a40;--ms:repeating-linear-gradient(180deg,transparent 0 calc(18 * var(--u)),#d8cfc2 calc(18 * var(--u)) calc(21 * var(--u))),repeating-linear-gradient(90deg,#b0553c 0 calc(40 * var(--u)),#d8cfc2 calc(40 * var(--u)) calc(43 * var(--u)),#bd6347 calc(43 * var(--u)) calc(83 * var(--u)),#d8cfc2 calc(83 * var(--u)) calc(86 * var(--u)))}
.ex-m-holz,.ex-m-dielen{--mo:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.06)),repeating-linear-gradient(90deg,#c99a66 0 11%,#ad8053 11% 11.7%,#d4a876 11.7% 22.3%,#ad8053 22.3% 23%);--ms:#a47a4f}
.ex-m-dielen{--mo:linear-gradient(180deg,rgba(255,255,255,.14),rgba(0,0,0,.04)),repeating-linear-gradient(90deg,#d8b88f 0 9%,#bd9b72 9% 9.6%,#e0c39c 9.6% 18.6%,#bd9b72 18.6% 19.2%)}
.ex-m-estrich,.ex-m-estrich-nass{--mo:radial-gradient(circle,rgba(0,0,0,.08) 0 1px,transparent 1.5px) 0 0/8px 8px,linear-gradient(135deg,#cdc8bf,#b7b2a9);--ms:radial-gradient(circle,rgba(0,0,0,.08) 0 1px,transparent 1.5px) 0 0/7px 7px,#b4afa6}
.ex-m-estrich-nass{--mo:radial-gradient(ellipse 60% 50% at 62% 58%,color-mix(in srgb,var(--ex-nass) 40%,transparent),transparent 70%),radial-gradient(circle,rgba(0,0,0,.08) 0 1px,transparent 1.5px) 0 0/8px 8px,linear-gradient(135deg,#c6c3bd,#aeaba5);--ms:linear-gradient(180deg,transparent 30%,color-mix(in srgb,var(--ex-nass) 52%,transparent)),#b1aca3}
.ex-m-daemmung,.ex-m-daemmung-nass{--mo:linear-gradient(135deg,#f4df93,#e5c66a);--ms:repeating-linear-gradient(90deg,#ead07a 0 3px,#d9b95a 3px 6px)}
.ex-m-daemmung-nass{--mo:radial-gradient(ellipse 70% 60% at 50% 55%,color-mix(in srgb,var(--ex-nass) 62%,transparent),color-mix(in srgb,var(--ex-nass) 26%,transparent) 60%,transparent 80%),linear-gradient(135deg,#f0dc98,#ddc271);--ms:linear-gradient(180deg,color-mix(in srgb,var(--ex-nass) 34%,transparent),color-mix(in srgb,var(--ex-nass) 66%,transparent)),repeating-linear-gradient(90deg,#e5cd80 0 3px,#d3b660 3px 6px)}
.ex-m-abdichtung{--mo:linear-gradient(135deg,#3b3b40,#202024);--ms:#19191c}
.ex-m-beton{--mo:radial-gradient(circle,rgba(0,0,0,.09) 0 1.2px,transparent 1.8px) 0 0/10px 10px,radial-gradient(circle,rgba(255,255,255,.3) 0 1px,transparent 1.6px) 3px 5px/13px 13px,linear-gradient(135deg,#bdbfc1,#a2a4a7);--ms:radial-gradient(circle,rgba(0,0,0,.09) 0 1px,transparent 1.6px) 0 0/8px 8px,#9c9ea1}
.ex-m-fliese{--mo:linear-gradient(90deg,rgba(0,0,0,.1) 0 1.2%,transparent 1.2%) 0 0/25% 25%,linear-gradient(rgba(0,0,0,.1) 0 1.2%,transparent 1.2%) 0 0/25% 25%,linear-gradient(135deg,#f2f0ec,#dedad3);--ms:#cfcac2}
.ex-m-dichtung{--mo:linear-gradient(135deg,#3a3b40,#1d1e21);--ms:#18191b}
.ex-m-rahmen{--mo:linear-gradient(135deg,#ffffff,#e9e9e6);--ms:#e1e1dd}
.ex-m-wand,.ex-m-wand-seite{--mo:#e6e0d6;--ms:linear-gradient(180deg,#f3eee7,#e6dfd4)}
.ex-m-schrank{--mo:linear-gradient(135deg,#bf946a,#a57950);--ms:linear-gradient(90deg,#a87c53,#b98d63)}
.ex-m-schrank .ex-v{background:linear-gradient(rgba(0,0,0,var(--sh)),rgba(0,0,0,var(--sh))),radial-gradient(circle at 45% 50%,#e7d3b3 0 1.6%,transparent 2%),radial-gradient(circle at 55% 50%,#e7d3b3 0 1.6%,transparent 2%),linear-gradient(90deg,transparent 49.4%,rgba(0,0,0,.3) 49.4% 50.6%,transparent 50.6%),linear-gradient(135deg,#c69a6f,#a97d54)}
.ex-m-geraet{--mo:linear-gradient(135deg,#fbfbfc,#e3e6e9);--ms:#dcdfe2}
.ex-m-geraet .ex-v{background:linear-gradient(rgba(0,0,0,var(--sh)),rgba(0,0,0,var(--sh))),radial-gradient(circle at 50% 60%,#5f6a75 0 20%,#9aa4ad 20.5% 24%,#d8dce0 24.5% 30%,transparent 30.5%),linear-gradient(#e2e5e8 0 17%,#f5f6f7 17%)}
.ex-m-sofa{--stoff:color-mix(in srgb,var(--ex-akz) 32%,#8e939a);--mo:linear-gradient(90deg,transparent 33%,rgba(0,0,0,.16) 33% 33.8%,transparent 33.8% 66.2%,rgba(0,0,0,.16) 66.2% 67%,transparent 67%),linear-gradient(135deg,color-mix(in srgb,var(--stoff) 80%,#fff),var(--stoff));--ms:var(--stoff)}
.ex-m-karton{--mo:linear-gradient(90deg,transparent 42%,rgba(255,255,255,.4) 42% 58%,transparent 58%),linear-gradient(135deg,#d2a879,#bf9464);--ms:#b88c5b}
.ex-m-pappe{--mo:linear-gradient(135deg,#d6ae80,#c49a6a);--ms:radial-gradient(ellipse 9% 7% at 50% 20%,#5b4128 0 92%,transparent 100%),linear-gradient(180deg,#cba074,#b88d5d)}
.ex-m-pappe .ex-kl{background:linear-gradient(rgba(0,0,0,var(--sh)),rgba(0,0,0,var(--sh))),linear-gradient(90deg,transparent 40%,rgba(255,255,255,.28) 40% 60%,transparent 60%),linear-gradient(135deg,#dbb689,#c79d6c)}
.ex-m-stoff{--mo:repeating-linear-gradient(100deg,transparent 0 18%,rgba(0,0,0,.07) 18% 20%),linear-gradient(135deg,color-mix(in srgb,var(--ex-akz) 22%,#fff),color-mix(in srgb,var(--ex-akz) 40%,#d9d9d9));--ms:color-mix(in srgb,var(--ex-akz) 36%,#c9c9c9)}
.ex-m-geschirr{--mo:radial-gradient(circle,#ffffff 0 28%,#e7eaee 29% 31%,#ffffff 32% 58%,#d9dee3 59% 61%,#f6f7f8 62% 100%);--ms:#ebe4d6}
.ex-m-buecher{--mo:repeating-linear-gradient(90deg,#f4eddd 0 8.5%,#d6ccb7 8.5% 9.5%);--ms:repeating-linear-gradient(90deg,#2f4a6b 0 9%,#8c3b2f 9% 18%,#3d6b4f 18% 27%,#c9a24a 27% 36%,#4b4c56 36% 45%)}

/* ── Bodenschatten und Beschriftungen */
.ex-boden{position:absolute;left:calc((var(--ox) - var(--sbr) * .5) * var(--u));width:calc(var(--sbr) * var(--u));height:calc(var(--sbr) * .2 * var(--u));
  top:calc((var(--oy) + var(--sy) + var(--sey) * var(--e)) * var(--u));transform:translateY(-35%) scaleX(calc(1 - var(--e) * .18));opacity:calc(.95 - var(--e) * .4);
  border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.26),rgba(0,0,0,.1) 55%,transparent);pointer-events:none}
.ex-schild{position:absolute;left:calc((var(--ox) + var(--lx)) * var(--u));top:calc((var(--oy) + var(--ly)) * var(--u));width:0;height:0;pointer-events:none;color:var(--eg-text)}
.ex-punkt{position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--eg-akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--eg-akzent) 18%,transparent),0 0 0 1px #fff;opacity:var(--op)}
.ex-strich{position:absolute;left:0;top:0;width:calc(var(--len) * var(--u));height:1px;background:linear-gradient(90deg,var(--eg-akzent),color-mix(in srgb,var(--eg-text) 40%,transparent));transform-origin:0 0;transform:rotate(calc(var(--wi) * 1deg)) scaleX(var(--op));opacity:min(1,calc(var(--op) * 3))}
.ex-txt{position:absolute;left:calc(var(--tx) * var(--u));top:calc(var(--ty) * var(--u));width:max-content;max-width:calc(var(--tw) - 18px);opacity:var(--op);transform:translate(calc(12px + (1 - var(--op)) * 10px),-50%)}
.ex-txt b{display:block;font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.005em;hyphens:manual;overflow-wrap:normal;word-break:normal}
.ex-kurz{display:none}
.ex-txt small{display:block;margin-top:3px;font-size:13px;line-height:1.35;color:var(--eg-leise)}

@media (max-width:860px){
  .ex-raster{grid-template-columns:minmax(0,1fr);gap:22px}
  .ex-satz{font-size:15.5px;margin-bottom:12px}
  .ex-szene{--tw:150px;--u:max(.3px,min(1px,calc((100cqi - var(--tw)) / var(--bx)),calc((100svh - 330px) / var(--by))))}
  .ex-txt b{font-size:13px}.ex-txt small{font-size:11.5px}
}
@media (max-width:520px){
  .ex-szene{--tw:124px}
  .ex-txt small{display:none}
  .ex-lang{display:none}.ex-kurz{display:inline}
  .ex-txt{transform:translate(calc(8px + (1 - var(--op)) * 10px),-50%)}
  .ex-txt b{font-size:12.5px;line-height:1.2}
  .ex-hinweis{font-size:11px;white-space:normal}
}

/* Bewegung: hoher Abschnitt, feste Bühne. Nur mit Skript (.ex-an) und ohne Wunsch nach reduzierter Bewegung. */
@media (prefers-reduced-motion:no-preference){
  .lb-explo.ex-an{padding:0}
  .ex-an .ex-lauf{position:relative;height:250vh}
  .ex-an .ex-buehne{position:sticky;top:0;height:100vh;height:100svh;display:flex;align-items:center;padding:clamp(24px,5vh,60px) 0;box-sizing:border-box}
}
@media (prefers-reduced-motion:no-preference) and (max-width:860px){
  .ex-an .ex-lauf{height:190vh}
  .ex-an .ex-buehne{align-items:stretch;padding:clamp(70px,10svh,96px) 0 clamp(64px,9svh,90px)}
  .ex-an .ex-raster{height:100%;grid-template-rows:auto minmax(0,1fr);align-content:stretch}
  .ex-an .ex-spalte{align-self:center}
}
/* ★ Bewegungs-System (effekte.py, Mert 09.11.2026: „lebendige Seite, aber seriös“). Jede Regel greift erst, wenn das
   Skript die Klasse ef-js setzt, und nur ohne Wunsch nach reduzierter Bewegung. Ohne Skript steht alles wie gebaut da. */
:root{--ef-akz:#f47a6e;--ef-akz-hell:#c93a2e;--ef-toen-basis:#f47a6e;--ef-grund:#0c0c0d;--ef-karte:#18181b;--ef-k-aus:cubic-bezier(.16,1,.3,1);--ef-k-weich:cubic-bezier(.65,0,.35,1)}
/* Fokus immer sichtbar (ohne Gewicht, die Vorlage darf ihren eigenen Fokus behalten) */
:where(main,.lb-band,.lb-mock) :where(a,button,[tabindex]):focus-visible{outline:2px solid var(--ef-akz);outline-offset:3px}
.ef-fortschritt{display:none}

@media (prefers-reduced-motion:no-preference){
  /* 1 Lesefüllung (weiche Kante: die Füllung läuft in einem Verlauf aus, deshalb wächst sie bis 140 %): Grau (Deckung mind. 3:1, im Skript gemessen) füllt sich Zeile für Zeile zur Textfarbe */
  .ef-js .ef-lese-an .ef-lese{color:transparent;-webkit-text-fill-color:transparent;-webkit-background-clip:text;background-clip:text;
    background-image:linear-gradient(90deg,var(--ef-voll) 72%,transparent),linear-gradient(var(--ef-leise),var(--ef-leise));
    background-repeat:no-repeat;background-size:var(--ef-p,0%) 100%,100% 100%;-webkit-box-decoration-break:slice;box-decoration-break:slice}
  .ef-js .ef-lese-an .ef-lese ::selection,.ef-js .ef-lese-an .ef-lese::selection{-webkit-text-fill-color:var(--ef-voll);color:var(--ef-voll)}
  @supports (animation-timeline:view()){
    .ef-js .ef-lese-an{view-timeline-name:--ef-lese}
    .ef-js .ef-lese-an .ef-lese{animation:ef-fuellen linear both;animation-timeline:--ef-lese;animation-range:cover 10% cover 52%}
  }
  @keyframes ef-fuellen{from{background-size:0% 100%,100% 100%}to{background-size:140% 100%,100% 100%}}

  /* 2 Gestapelte Karten: die Karten der Vorlage bleiben, wie sie sind, und kleben nur gestaffelt (Abschnitt bleibt gleich hoch) */
  .ef-js .ef-stapel-an>*{position:sticky;top:calc(var(--ef-oben,24px) + var(--ef-i,0) * var(--ef-versatz,16px));z-index:calc(1 + var(--ef-i,0))}

  /* 3 Farbwechsel: der Abschnitt blendet von der Farbe des Vorgängers zu seiner eigenen, danach steht die Kante wie gebaut */
  .ef-js .ef-fw{transition:background-color 1.2s var(--ef-k-weich)}

  /* 4 Seitenübergänge: Kopfleiste und Logo stehen (der alte Schnappschuss wird ausgeblendet, sonst doppelt),
     benannte Karten gleiten in ihren Eintrag */
  ::view-transition-old(*.ef-fest){animation:none;opacity:0}
  ::view-transition-new(*.ef-fest){animation:none}
  ::view-transition-group(*.ef-fest){animation-duration:.45s;animation-timing-function:var(--ef-k-aus)}
  ::view-transition-group(*.ef-karte){animation-duration:.75s;animation-timing-function:var(--ef-k-aus)}
  ::view-transition-old(*.ef-karte){animation-duration:.3s}
  ::view-transition-new(*.ef-karte){animation-duration:.55s}

  /* 5 Feine Knöpfe und Kartenneigung, nur mit Maus */
  @media (hover:hover) and (pointer:fine){
    .ef-js .ef-mag{transition:translate .45s var(--ef-k-aus)}
    .ef-js .ef-mag.ef-zieht{transition:translate .12s linear}
    .ef-js .ef-neig-an{perspective:1400px}
    .ef-js .ef-neig-an>*{transition:rotate .5s var(--ef-k-aus),box-shadow .5s var(--ef-k-aus)}
    .ef-js .ef-neig-an>.ef-kippt{transition:rotate .14s linear,box-shadow .35s var(--ef-k-aus)}
  }

  /* 6 Lesefortschritt: dünne Linie oben, nur auf langen Seiten */
  .ef-js .ef-fortschritt{display:block;position:fixed;left:0;top:0;width:100%;height:var(--ef-dicke,2px);z-index:2147483000;pointer-events:none;
    background:var(--ef-linie,var(--ef-akz));transform-origin:0 50%;scale:var(--ef-f,0) 1}
  @supports (animation-timeline:scroll()){
    .ef-js .ef-fortschritt{animation:ef-fort linear both;animation-timeline:scroll(root)}
  }
  @keyframes ef-fort{from{scale:0 1}to{scale:1 1}}
}
/* ★ Bühnen (buehnen.py, Mert 09.11.2026: „lebendige Seite, aber seriös … ganz normaler Inhalt in ganz anderer Art“).
   Grundzustand = fertig gelesen: ohne Skript, auf dem Handy und bei reduzierter Bewegung stehen alle Inhalte als ruhige
   Liste da. Die Bühnenform (sticky, zeichnen, fahren) gilt nur mit .bn-js (setzt eg_buehnen.js, nie bei reduzierter
   Bewegung), jede Bewegung nur unter prefers-reduced-motion: no-preference. Farben nur über die --bn-Tokens. */
.lb-buehne{--bn-grund:#0c0c0d;--bn-text:#f4f4f5;--bn-karte:#18181b;--bn-band:#070708;--bn-band-text:#f4f4f5;--bn-akzent:#f47a6e;--bn-knopf:#c93a2e;--bn-knopf-text:#ffffff;--bn-linie:#27272a;--bn-leise:#a1a1aa;--bn-rund:8px;
  --bn-titel:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--bn-schrift:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--bn-weich:cubic-bezier(.16,1,.3,1);
  position:relative;background:var(--bn-grund);color:var(--bn-text);padding:clamp(64px,9vw,152px) 0;overflow-x:clip;font-family:var(--bn-schrift)}
.lb-buehne *,.lb-buehne *::before,.lb-buehne *::after{box-sizing:border-box;min-width:0}
.bn-kopf{max-width:760px;margin:0 0 clamp(28px,4vw,56px)}
.bn-kopf .bn-h2{margin:0 0 14px;text-wrap:balance}
.bn-begleit{margin:0;max-width:56ch;color:var(--bn-leise);font-size:clamp(16px,1.2vw,18px);line-height:1.6}
.bn-muster,.bn-symbolbild{display:inline-block;padding:4px 10px;border:1.5px solid currentColor;border-radius:6px;font-family:var(--bn-schrift);font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;line-height:1.2}
.bn-muster{color:var(--bn-akzent)}
.bn-unsichtbar{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lb-buehne svg{display:block;overflow:visible}

/* ── Linienmotive (Leistungs-Bühne) ─────────────────────────────────────────────────────────────────────── */
.bn-motiv{width:96%;max-width:560px;height:auto;margin:auto}
.bn-motiv :where(path,circle,rect,ellipse){vector-effect:non-scaling-stroke}
.bn-m-l{fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.bn-m-dick{stroke-width:9}
.bn-m-d{stroke-dasharray:3 7;stroke-width:1.4;opacity:.6}
.bn-m-f{fill:currentColor;fill-opacity:.07;stroke:none}
.bn-m-f2{fill:currentColor;fill-opacity:.16;stroke:none}
.bn-m-a,.bn-m-a path{fill:none;stroke:var(--bn-akzent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.bn-m-a:is(circle){fill:var(--bn-akzent);stroke:none}
.bn-m-a circle{fill:var(--bn-akzent);stroke:none}
.bn-m-a .bn-m-ring{fill:none;stroke:var(--bn-akzent);stroke-width:2;stroke-dasharray:4 5}
.bn-m-a2,.bn-m-a2 *{fill:var(--bn-akzent);fill-opacity:.55;stroke:none}

/* ── 1. Leistungs-Bühne: Grundform (Liste mit Bild je Leistung) ─────────────────────────────────────────── */
.bn-l-liste{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:bn}
.bn-l-punkt{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);grid-template-areas:"t b" "x b";column-gap:clamp(24px,4vw,64px);align-items:center;padding:clamp(22px,3vw,36px) 0;border-top:1px solid var(--bn-linie)}
.bn-l-punkt:last-child{border-bottom:1px solid var(--bn-linie)}
.bn-l-titel{grid-area:t;align-self:end;display:flex;align-items:baseline;gap:.55em;margin:0 0 10px;font-family:var(--bn-titel);font-weight:400;font-size:clamp(22px,2.3vw,32px);line-height:1.15;letter-spacing:-0.034em;color:var(--bn-text);overflow-wrap:break-word;hyphens:manual}
.bn-l-nr{flex:none;display:inline-block;font-family:var(--bn-schrift);font-size:13px;font-weight:600;letter-spacing:.12em;color:var(--bn-akzent)}
.bn-l-text{grid-area:x;align-self:start;margin:0;max-width:48ch;color:var(--bn-leise);font-size:17px;line-height:1.6}
.bn-l-bild{grid-area:b;margin:0;position:relative;aspect-ratio:4/3;display:grid;place-items:center;color:var(--bn-text);isolation:isolate;
  background:radial-gradient(56% 50% at 50% 50%,color-mix(in srgb,var(--bn-akzent) 9%,transparent),transparent 72%)}
.bn-l-bild--foto{border-radius:max(var(--bn-rund),10px);overflow:hidden;background:none;box-shadow:0 40px 80px -50px rgba(0,0,0,.45)}
.bn-l-bild::after{content:"";position:absolute;left:18%;right:18%;bottom:17%;height:7%;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--bn-text) 14%,transparent),transparent);z-index:-1}
.bn-l-bild--foto::after{display:none}
.bn-l-bild img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:899px){
  .bn-l-punkt{grid-template-columns:1fr;grid-template-areas:"b" "t" "x";row-gap:0}
  .bn-l-bild{margin-bottom:18px;max-width:560px}
}
/* Bühnenform (Aevion): links die Titel, Mitte das große Bild, rechts der Text; der Abschnitt hält beim Scrollen an */
@media (min-width:900px){
  .bn-js .bn-l-raster{position:relative;height:calc(var(--n) * 46vh + 100vh)}
  .bn-js .bn-l-halt{position:sticky;top:0;height:100vh;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3.4vh,40px);padding-top:clamp(56px,8vh,90px)}
  .bn-js .bn-l-halt .bn-kopf{margin:0}
  .bn-js .bn-l-titel:focus-visible{outline:2px solid var(--bn-akzent);outline-offset:4px;border-radius:4px}
  .bn-js .bn-l-liste{position:relative;width:100%;grid-template-columns:minmax(0,3.6fr) minmax(0,6.6fr) minmax(0,3fr);grid-template-rows:repeat(var(--n),auto);column-gap:clamp(28px,3.6vw,64px);row-gap:clamp(10px,1.6vh,20px);align-items:center;padding-left:22px}
  .bn-js .bn-l-liste::before{content:"";position:absolute;left:0;top:6%;height:88%;width:2px;border-radius:2px;background:var(--bn-linie)}
  .bn-js .bn-l-liste::after{content:"";position:absolute;left:0;top:6%;height:88%;width:2px;border-radius:2px;background:var(--bn-akzent);transform-origin:top;transform:scaleY(calc(var(--p,0) * .98 + .02))}
  .bn-js .bn-l-punkt{display:contents}
  .bn-js .bn-l-titel{grid-column:1;margin:0;font-size:clamp(22px,2.1vw,34px);color:color-mix(in srgb,var(--bn-text) 42%,var(--bn-grund));cursor:pointer;align-self:center}
  .bn-js .bn-l-punkt:nth-child(1) .bn-l-titel{grid-row:1}.bn-js .bn-l-punkt:nth-child(2) .bn-l-titel{grid-row:2}.bn-js .bn-l-punkt:nth-child(3) .bn-l-titel{grid-row:3}
  .bn-js .bn-l-punkt:nth-child(4) .bn-l-titel{grid-row:4}.bn-js .bn-l-punkt:nth-child(5) .bn-l-titel{grid-row:5}.bn-js .bn-l-punkt:nth-child(6) .bn-l-titel{grid-row:6}
  .bn-js .bn-l-punkt.bn-an .bn-l-titel{color:var(--bn-text)}
  .bn-js .bn-l-nr{color:inherit}
  .bn-js .bn-l-punkt.bn-an .bn-l-nr{color:var(--bn-akzent)}
  .bn-js .bn-l-bild{grid-column:2;grid-row:1 / -1;align-self:center;width:100%;max-height:56vh;opacity:0;visibility:hidden}
  .bn-js .bn-l-text{grid-column:3;grid-row:1 / -1;align-self:center;opacity:0;visibility:hidden;font-size:clamp(16px,1.2vw,18px)}
  .bn-js .bn-l-punkt.bn-an :is(.bn-l-bild,.bn-l-text){opacity:1;visibility:visible}
}

/* ── 2. Ablauf am Branchenobjekt ─────────────────────────────────────────────────────────────────────────── */
.bnb-ablauf{background:var(--bn-karte)}
.bn-a-zeichnung{margin:0 calc(clamp(16px,4vw,48px) * -.5) clamp(8px,1.5vw,18px)}
.bn-a-svg{width:100%;height:auto}
.bn-a-grund{fill:none;stroke:color-mix(in srgb,var(--bn-text) 14%,transparent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bn-a-pfad{fill:none;stroke:var(--bn-akzent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.bn-a-strasse{stroke:color-mix(in srgb,var(--bn-text) 11%,var(--bn-karte));stroke-width:44}
.bn-a-mitte{fill:none;stroke:var(--bn-karte);stroke-width:2.5;stroke-dasharray:16 18;stroke-linecap:round}
.bn-a-pfad--strasse{stroke-width:5}
.bn-a-bahn{stroke:color-mix(in srgb,var(--bn-text) 7%,transparent);stroke-width:42}
.bn-a-pfad--farbbahn{stroke-width:42;stroke:color-mix(in srgb,var(--bn-akzent) 70%,var(--bn-karte))}
.bn-a-rohr{stroke:color-mix(in srgb,var(--bn-text) 16%,var(--bn-karte));stroke-width:30;stroke-linecap:butt}
.bn-a-rohr-glanz{fill:none;stroke:var(--bn-karte);stroke-opacity:.55;stroke-width:4;transform:translateY(-7px)}
.bn-a-pfad--rohr{stroke-width:12;stroke-linecap:butt}
.bn-a-hahn path{fill:color-mix(in srgb,var(--bn-text) 30%,var(--bn-karte))}
.bn-a-weg{stroke-dasharray:2 12;stroke-width:3.5;stroke:color-mix(in srgb,var(--bn-text) 30%,transparent)}
.bn-a-wisch{stroke:color-mix(in srgb,var(--bn-text) 6%,transparent);stroke-width:64}
.bn-a-pfad--wischspur{stroke:color-mix(in srgb,var(--bn-akzent) 26%,var(--bn-karte));stroke-width:64}
.bn-a-glas{fill:color-mix(in srgb,var(--bn-akzent) 6%,var(--bn-karte));stroke:color-mix(in srgb,var(--bn-text) 22%,transparent);stroke-width:2}
.bn-a-glanz{fill:var(--bn-grund);opacity:.55}
.bn-a-haeuser{fill:color-mix(in srgb,var(--bn-text) 4%,transparent);stroke:color-mix(in srgb,var(--bn-text) 24%,transparent);stroke-width:1.6;stroke-linejoin:round}
.bn-a-boden{stroke:color-mix(in srgb,var(--bn-text) 30%,transparent);stroke-width:2}
.bn-a-hof{fill:var(--bn-karte)}
.bn-a-ring{fill:var(--bn-karte);stroke:color-mix(in srgb,var(--bn-text) 22%,transparent);stroke-width:2.5}
.bn-a-kern{fill:color-mix(in srgb,var(--bn-text) 30%,transparent)}
.bn-a-knoten.bn-an .bn-a-ring,.bn-a-knoten:not([class*="bn-"]) .bn-a-ring{stroke:var(--bn-akzent)}
.bn-a-knoten .bn-a-ring,.bn-a-knoten .bn-a-kern{transform-box:fill-box;transform-origin:center}
html:not(.bn-js) .bn-a-ring{stroke:var(--bn-akzent)}
html:not(.bn-js) .bn-a-kern,.bn-a-knoten.bn-an .bn-a-kern{fill:var(--bn-akzent)}
.bn-a-kopf :is(path,rect,circle){fill:var(--bn-text);stroke:none}
.bn-a-kopf .bn-a-auto-k{fill:var(--bn-akzent)}
.bn-a-kopf .bn-a-auto-g{fill:var(--bn-karte);opacity:.8}
.bn-a-kopf .bn-a-auto-r{fill:var(--bn-text)}
.bn-a-kopf .bn-a-auto-f{fill:var(--bn-karte);opacity:.85}
.bn-a-kopf .bn-a-roller path,.bn-a-kopf .bn-a-abzieher path{fill:none;stroke:var(--bn-text);stroke-width:4;stroke-linecap:round}
.bn-a-kopf .bn-a-wasser circle,.bn-a-kopf .bn-a-punkt circle{fill:var(--bn-akzent)}
.bn-a-ziel :is(path,circle){fill:var(--bn-akzent)}
.bn-a-ziel .bn-a-fahne path:first-child{fill:none;stroke:var(--bn-text);stroke-width:3}
.bn-a-ziel .bn-a-haus path{fill:none;stroke:var(--bn-text);stroke-width:3;stroke-linejoin:round}
.bn-a-ziel .bn-a-haus path:first-child{fill:color-mix(in srgb,var(--bn-akzent) 22%,var(--bn-karte))}
html:not(.bn-js) .bn-a-kopf{display:none}
.bn-a-schritte{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:clamp(14px,2vw,28px)}
.bn-a-schritt{text-align:center;padding:0 4px}
.bn-a-nr{display:inline-grid;place-items:center;width:34px;height:34px;margin-bottom:12px;border-radius:50%;font-size:13px;font-weight:700;color:var(--bn-akzent);box-shadow:0 0 0 1.5px currentColor inset;font-variant-numeric:tabular-nums}
.bn-a-schritt.bn-an .bn-a-nr{background:var(--bn-akzent);color:var(--bn-karte);box-shadow:none}
.bn-a-schritt h3{margin:0 0 8px;font-family:var(--bn-titel);font-weight:500;font-size:clamp(18px,1.5vw,22px);line-height:1.25;color:var(--bn-text)}
.bn-a-schritt p{margin:0 auto;max-width:30ch;color:var(--bn-leise);font-size:15.5px;line-height:1.55}
@media (max-width:760px){
  .bn-a-zeichnung{margin:0 0 18px}
  .bn-a-schritte{grid-template-columns:1fr;gap:0;position:relative;padding-left:52px}
  .bn-a-schritte::before{content:"";position:absolute;left:16px;top:10px;bottom:10px;width:2px;background:color-mix(in srgb,var(--bn-text) 14%,transparent)}
  .bn-a-schritt{text-align:left;position:relative;padding:0 0 26px}
  .bn-a-nr{position:absolute;left:-52px;top:-4px;background:var(--bn-karte)}
  .bn-a-schritt p{margin:0;max-width:none}
}

/* ── 3. Teilungsbild ─────────────────────────────────────────────────────────────────────────────────────── */
.bnb-teilung{background:var(--bn-band);color:var(--bn-band-text)}
.bnb-teilung :is(.bn-h2,.bn-etikett){color:var(--bn-band-text)}
.bnb-teilung .bn-begleit{color:color-mix(in srgb,var(--bn-band-text) 76%,transparent)}
.bn-t-buehne{--bn-x:50%;position:relative;margin:0;aspect-ratio:1200/640;border-radius:max(var(--bn-rund),14px);overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#f3f2ef,#e3e1dc);box-shadow:0 50px 100px -50px rgba(0,0,0,.6);color:#1d1d1f;user-select:none;-webkit-user-select:none}
.bn-t-ebene{position:absolute;inset:0}
.bn-t-ebene svg{width:100%;height:100%}
.bn-t-ebene--nach{clip-path:inset(0 0 0 var(--bn-x))}
.bn-t-trenner{position:absolute;top:0;bottom:0;left:var(--bn-x);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.06),0 0 24px rgba(0,0,0,.25);z-index:2;pointer-events:none}
.bn-t-trenner span{position:absolute;top:50%;left:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;background:#fff;box-shadow:0 10px 30px -8px rgba(0,0,0,.45)}
.bn-t-trenner span::before,.bn-t-trenner span::after{content:"";position:absolute;top:50%;width:9px;height:9px;margin-top:-5px;border:solid #1d1d1f;border-width:0 0 2px 2px}
.bn-t-trenner span::before{left:12px;transform:rotate(45deg)}.bn-t-trenner span::after{right:12px;transform:rotate(-135deg)}
.bn-t-schild{position:absolute;bottom:clamp(10px,2vw,22px);z-index:3;padding:7px 14px;border-radius:999px;background:rgba(255,255,255,.88);color:#1d1d1f;font-size:13px;font-weight:600;letter-spacing:.02em;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.bn-t-schild--links{left:clamp(10px,2vw,22px)}.bn-t-schild--rechts{right:clamp(10px,2vw,22px)}
.bn-t-buehne .bn-symbolbild{position:absolute;top:clamp(10px,2vw,20px);right:clamp(10px,2vw,20px);z-index:3;color:#1d1d1f;background:rgba(255,255,255,.82);border-color:rgba(0,0,0,.35)}
.bn-t-regler{position:absolute;inset:0;z-index:4;margin:0}
.bn-t-regler[hidden]{display:none}
.bn-t-regler input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;-webkit-appearance:none;appearance:none;touch-action:pan-y}
.bn-t-buehne:has(input:focus-visible) .bn-t-trenner span{outline:3px solid var(--bn-akzent);outline-offset:3px}
/* Zeichnungen: ruhige Studiofarben, Akzent der Seite für das Ergebnis */
.bn-t-svg :where(path,circle,rect,ellipse){vector-effect:non-scaling-stroke}
.bn-t-boden{stroke:rgba(0,0,0,.16);stroke-width:2}
.bn-t-schatten{fill:rgba(0,0,0,.14)}
.bn-t-koerper-alt{fill:#a9adb1;stroke:#2b2d30;stroke-width:2.5;stroke-linejoin:round}
.bn-t-koerper-neu{fill:var(--bn-akzent);stroke:#1d1d1f;stroke-width:2.5;stroke-linejoin:round}
.bn-t-koerper-plan{fill:#fff;stroke:var(--bn-akzent);stroke-width:2.5;stroke-dasharray:10 6;stroke-linejoin:round}
.bn-t-fenster{fill:#2f3a44;opacity:.85}
.bn-t-fenster-klar{fill:#cfe0ea;stroke:#1d1d1f;stroke-width:2}
.bn-t-fenster-dunkel{fill:#14181c;stroke:#1d1d1f;stroke-width:2}
.bn-t-linie{fill:none;stroke:rgba(0,0,0,.28);stroke-width:2;stroke-linecap:round}
.bn-t-reifen{fill:#1f2124}
.bn-t-felge{fill:#d5d8dc;stroke:#9a9ea4;stroke-width:2}
.bn-t-speichen path{stroke:#9a9ea4;stroke-width:9;stroke-linecap:round}
.bn-t-nabe{fill:#5d6167}
.bn-t-licht{fill:#fff4cf;stroke:#1d1d1f;stroke-width:1.5}
.bn-t-heck{fill:#c8473d;stroke:#1d1d1f;stroke-width:1.5}
.bn-t-spiegel-a{fill:#2b2d30}
.bn-t-fenster-plan{fill:#fff;stroke:var(--bn-akzent);stroke-width:2;stroke-dasharray:8 6}
.bn-t-marken .bn-t-reiter{fill:#fff;stroke:var(--bn-akzent);stroke-width:2;stroke-dasharray:none}
.bn-t-marken .bn-t-reiter-zeile{stroke:var(--bn-akzent);stroke-width:3;stroke-linecap:round;opacity:.6}
.bn-t-svg--gutachten .bn-t-koerper-plan~:is(.bn-t-reifen){fill:#fff;stroke:var(--bn-akzent);stroke-width:2.5;stroke-dasharray:8 6}
.bn-t-svg--gutachten .bn-t-koerper-plan~:is(.bn-t-felge){fill:none;stroke:var(--bn-akzent);stroke-width:1.5}
.bn-t-svg--gutachten .bn-t-koerper-plan~.bn-t-speichen path{stroke:var(--bn-akzent);stroke-width:1.5}
.bn-t-svg--gutachten .bn-t-koerper-plan~:is(.bn-t-nabe,.bn-t-heck,.bn-t-licht,.bn-t-spiegel-a){fill:none;stroke:var(--bn-akzent);stroke-width:1.5}
.bn-t-glanzlicht--dach{opacity:.4}
.bn-t-delle{fill:rgba(0,0,0,.26)}
.bn-t-delle2{fill:rgba(0,0,0,.32)}
.bn-t-knick{fill:none;stroke:#26282b;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.bn-t-kratzer--dunkel{stroke:#3b3f44;stroke-width:3.5;opacity:1}
.bn-t-kratzer{fill:none;stroke:#f4f4f4;stroke-width:3;stroke-linecap:round;opacity:.9}
.bn-t-grundierung{fill:#c8c3b8;stroke:#2b2d30;stroke-width:2}
.bn-t-mass{fill:none;stroke:var(--bn-akzent);stroke-width:2}
.bn-t-marken circle{fill:color-mix(in srgb,var(--bn-akzent) 14%,transparent);stroke:var(--bn-akzent);stroke-width:3;stroke-dasharray:8 6}
.bn-t-marken path{fill:none;stroke:var(--bn-akzent);stroke-width:2}
.bn-t-glanzlicht{fill:#fff;opacity:.26}
.bn-t-wand-alt{fill:#cfc8bb}
.bn-t-wand-neu{fill:color-mix(in srgb,var(--bn-akzent) 16%,#fbfaf7)}
.bn-t-boden-flaeche{fill:#b9a68e}
.bn-t-leiste{stroke:#fff;stroke-width:14}
.bn-t-rahmen{fill:#e9eef1;stroke:#fff;stroke-width:14}
.bn-t-rahmen--dick{stroke-width:22}
.bn-t-sprosse{stroke:#fff;stroke-width:10;fill:none}
.bn-t-bild{fill:#fff;stroke:#3a3a3c;stroke-width:6}
.bn-t-bild-linie{fill:none;stroke:var(--bn-akzent);stroke-width:4;stroke-linejoin:round}
.bn-t-riss{fill:none;stroke:#6f675a;stroke-width:2.5;stroke-linecap:round}
.bn-t-fleck{fill:#a99d86;opacity:.6}
.bn-t-abblaetter{fill:#e8e2d6;stroke:#9b927f;stroke-width:1.5}
.bn-t-feuchte{fill:#8f8676;opacity:.35}
.bn-t-sporen circle{fill:#3b3a35;opacity:.75}
.bn-t-karosse{fill:#c9ccd1;stroke:#2b2d30;stroke-width:2.5}
.bn-t-glas{fill:#cfdde6;stroke:#2b2d30;stroke-width:2.5}
.bn-t-wischer{stroke:#202225;stroke-width:6;stroke-linecap:round}
.bn-t-spiegel{fill:#2b2d30}
.bn-t-svg .bn-t-riss circle{fill:#fff;stroke:#6f675a}
.bn-t-svg--scheibe .bn-t-riss path{fill:none;stroke:#5b6670;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.bn-t-svg--scheibe .bn-t-riss circle{fill:#fff;stroke:#5b6670;stroke-width:3}
.bn-t-svg--scheibe .bn-t-riss .bn-t-riss-hof{fill:#fff;fill-opacity:.35;stroke:#5b6670;stroke-opacity:.35;stroke-width:1.5}
.bn-t-schmutz path{fill:#9d927c;opacity:.4}.bn-t-schmutz circle{fill:#8a816f;opacity:.5}
.bn-t-bank{fill:#fff;stroke:rgba(0,0,0,.12)}
.bn-t-zeug :is(rect,path){fill:#c5b49b;stroke:#6f6352;stroke-width:2.5}
.bn-t-zeug rect:nth-child(odd){fill:#d8c9b1}
.bn-t-himmel{fill:#eef2f3}
.bn-t-rasen{fill:#c9d6b8}
.bn-t-gruen{fill:#6f8f5a;stroke:#3f5a33;stroke-width:2.5}
.bn-t-zweige{fill:none;stroke:#3f5a33;stroke-width:4;stroke-linecap:round}
@media (max-width:600px){
  .bnb-teilung--wand .bn-t-buehne,.bnb-teilung--schimmel .bn-t-buehne,.bnb-teilung--fenster .bn-t-buehne,.bnb-teilung--raum .bn-t-buehne,.bnb-teilung--hecke .bn-t-buehne{aspect-ratio:4/3.4}
  .bn-t-schild{font-size:12px;padding:6px 11px}
  .bn-t-trenner span{width:44px;height:44px;margin:-22px 0 0 -22px}
}

/* ── 4. Messskala ────────────────────────────────────────────────────────────────────────────────────────── */
.bn-s-feld{position:relative;text-align:center}
.bn-s-skala{position:relative;width:min(720px,100%);margin:0 auto}
.bn-s-svg{width:100%;height:auto}
.bn-s-svg :where(path,circle){vector-effect:non-scaling-stroke}
/* Linien mit pathLength und Strichmuster ohne non-scaling-stroke: sonst rechnet Chrome das Muster in Bildpunkten und die Füllung bleibt hinter dem Zeiger */
.lb-buehne [pathLength]{vector-effect:none}
.bn-s-bogen{fill:none;stroke:var(--bn-linie);stroke-width:1.5}
.bn-s-fuell{fill:none;stroke:var(--bn-akzent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--w))}
.bn-s-strich{stroke:color-mix(in srgb,var(--bn-text) 34%,transparent);stroke-width:1.5;stroke-linecap:round}
.bn-s-strich--gross{stroke:color-mix(in srgb,var(--bn-text) 70%,transparent);stroke-width:2.5}
.bn-s-zeiger{transform-origin:320px 320px;transform:rotate(calc(-90deg + var(--w) * 180deg))}
.bn-s-zeiger path{stroke:var(--bn-text);stroke-width:3;stroke-linecap:round}
.bn-s-zeiger circle{fill:var(--bn-akzent);transform-box:fill-box;transform-origin:center}
.bn-s-nabe{fill:var(--bn-grund);stroke:var(--bn-linie);stroke-width:1.5}
.bn-s-nabe-kern{fill:var(--bn-text)}
.bn-s-bez{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px 14px;margin:52px 0 0;font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--bn-leise)}
.bn-s-ende{position:absolute;bottom:-26px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--bn-leise)}
.bn-s-ende--links{left:2%}.bn-s-ende--rechts{right:2%}
.bn-s-zaehler{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--bn-linie);border-bottom:1px solid var(--bn-linie)}
.bn-s-zelle{padding:clamp(22px,3.4vw,44px) 10px;display:flex;flex-direction:column;align-items:center;gap:10px}
.bn-s-zelle+.bn-s-zelle{border-left:1px solid var(--bn-linie)}
.bn-s-zelle b{font-family:var(--bn-titel);font-weight:300;font-size:clamp(34px,5vw,64px);line-height:1;letter-spacing:-.02em;color:var(--bn-text);font-variant-numeric:tabular-nums;white-space:nowrap}
.bn-s-einheit{font-size:.5em;margin-left:.2em;letter-spacing:0;color:var(--bn-leise)}
.bn-s-zelle small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bn-leise)}
.bn-s-leistung{margin:18px 0 0;font-size:14px;color:var(--bn-leise)}
@media (max-width:600px){.bn-s-zelle{padding:18px 4px;gap:6px}.bn-s-zelle b{font-size:clamp(26px,8.4vw,34px)}.bn-s-zelle small{font-size:11px;letter-spacing:.06em;text-align:center}
  .bn-s-bez{margin-top:40px}.bn-s-ende{font-size:11px}}

/* ── 5. Erreichbarkeit und Postleitzahl ──────────────────────────────────────────────────────────────────── */
.bnb-erreichbar{background:var(--bn-karte)}
.bn-e-raster{display:grid;gap:clamp(16px,2.4vw,28px)}
.bn-e-raster--zwei{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:860px){.bn-e-raster--zwei{grid-template-columns:1fr}}
.bn-e-raster:not(.bn-e-raster--zwei) .bn-e-karte--plz:not(.bn-e-karte--ohne-orte){display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:start}
@media (max-width:760px){.bn-e-raster:not(.bn-e-raster--zwei) .bn-e-karte--plz{grid-template-columns:1fr}}
.bn-e-karte{background:var(--bn-grund);border-radius:max(var(--bn-rund),16px);padding:clamp(22px,3vw,40px);box-shadow:0 0 0 1px var(--bn-linie),0 30px 60px -44px rgba(0,0,0,.35)}
.bn-e-titel{margin:0 0 18px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--bn-akzent)}
.bn-e-reihen{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.bn-e-reihe{display:grid;gap:4px}
.bn-e-bez{font-size:13px;font-weight:600;color:var(--bn-leise)}
.bn-e-satz{font-size:17px;line-height:1.5;color:var(--bn-text)}
.bn-e-status{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:2px 0 4px}
.bn-e-status[hidden]{display:none}
.bn-e-punkt{position:relative;flex:none;width:12px;height:12px;border-radius:50%;background:#9a9ca0}
.bn-e-offen .bn-e-punkt{background:#2f9e5b}
.bn-e-jetzt{font-family:var(--bn-titel);font-weight:400;font-size:clamp(22px,2.2vw,30px);line-height:1.15;color:var(--bn-text)}
.bn-e-naechst{font-size:14px;color:var(--bn-leise)}
.bn-e-hinweis{margin:14px 0 0;font-size:12px;color:var(--bn-leise)}
.bn-e-knopf{display:inline-flex;align-items:center;justify-content:center;min-height:50px;margin-top:24px;padding:0 24px;border-radius:4px;background:var(--bn-knopf);color:var(--bn-knopf-text);font-weight:600;font-size:16px;text-decoration:none;max-width:100%;text-align:center}
.bn-e-orte{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.bn-e-orte li{padding:8px 14px;border-radius:999px;font-size:14px;line-height:1.2;box-shadow:0 0 0 1px var(--bn-linie) inset}
.bn-e-orte li.bn-an{background:var(--bn-akzent);color:var(--bn-karte);box-shadow:none}
.bn-e-form label{display:block;margin:0 0 8px;font-size:13px;font-weight:600;color:var(--bn-leise)}
.bn-e-form[hidden]{display:none}
.bn-e-feld{display:flex;gap:8px;max-width:420px}
.bn-e-feld input{flex:1;min-width:0;height:52px;padding:0 16px;border:1.5px solid var(--bn-linie);border-radius:12px;background:var(--bn-karte);color:var(--bn-text);font:inherit;font-size:20px;letter-spacing:.12em;font-variant-numeric:tabular-nums}
.bn-e-feld input:focus-visible{outline:none;border-color:var(--bn-akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--bn-akzent) 24%,transparent)}
.bn-e-feld button{flex:none;height:52px;padding:0 20px;border:0;border-radius:12px;background:var(--bn-knopf);color:var(--bn-knopf-text);font:inherit;font-size:16px;font-weight:600;cursor:pointer}
.bn-e-antwort{min-height:1.6em;margin:14px 0 6px;font-size:17px;line-height:1.5;font-weight:600}
.bn-e-antwort.bn-ja{color:var(--bn-text)}
.bn-e-antwort.bn-ja::before{content:"";display:inline-block;width:10px;height:10px;margin-right:10px;border-radius:50%;background:#2f9e5b;vertical-align:.1em}
.bn-e-antwort.bn-frage{color:var(--bn-text);font-weight:500}
.bn-e-antwort a{color:inherit;font-weight:700;text-decoration:underline;text-underline-offset:3px}
.bn-e-fein{display:block;font-size:12px;color:var(--bn-leise)}

/* ── Bewegung: nur ohne reduzierte Bewegung, Start erst im Bild (bn-los setzt das Skript) ────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* Leistungen: Bild und Text blenden weich um, das Motiv zeichnet sich */
  .bn-js .bn-l-titel{transition:color .6s ease}
  .bn-js .bn-l-bild{transition:opacity .9s var(--bn-weich),transform 1.2s var(--bn-weich),visibility 0s linear .9s;transform:scale(1.035)}
  .bn-js .bn-l-text{transition:opacity .22s ease,transform .9s var(--bn-weich),visibility 0s linear .22s;transform:translateY(14px)}
  .bn-js .bn-l-punkt.bn-an .bn-l-bild{transform:none;transition-delay:0s}
  .bn-js .bn-l-punkt.bn-an .bn-l-text{transform:none;transition:opacity .7s var(--bn-weich) .26s,transform .9s var(--bn-weich) .26s,visibility 0s linear 0s}
  .bn-js .bn-l-liste::after{transition:transform .25s linear}
  .bn-js .bn-l-punkt .bn-m-l{stroke-dasharray:1 1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.65,0,.35,1)}
  .bn-js .bn-l-punkt.bn-an .bn-m-l{stroke-dashoffset:0}
  .bn-js .bn-l-punkt :is(.bn-m-f,.bn-m-f2,.bn-m-a,.bn-m-a2){opacity:0;transition:opacity .9s ease .7s}
  .bn-js .bn-l-punkt.bn-an :is(.bn-m-f,.bn-m-f2,.bn-m-a,.bn-m-a2){opacity:1}
  .bn-js .bn-l-punkt.bn-an .bn-m-f{opacity:.5}
  @media (max-width:899px){
    .bn-js .bn-l-punkt .bn-m-l{stroke-dashoffset:0}
    .bn-js .bn-l-punkt :is(.bn-m-f,.bn-m-f2,.bn-m-a,.bn-m-a2){opacity:1}
    .bn-js .bnb-leistungen:not(.bn-los) .bn-m-l{stroke-dashoffset:1}
    .bn-js .bnb-leistungen.bn-los .bn-m-l{animation:bn-zeichnen 2.2s cubic-bezier(.65,0,.35,1) both}
  }
  /* Ablauf: die Linie zeichnet sich mit dem Scrollen (Skript setzt stroke-dashoffset), Knoten springen an */
  .bn-js .bnb-ablauf .bn-a-pfad{stroke-dasharray:1 1;stroke-dashoffset:1}
  .bn-js .bn-a-knoten .bn-a-ring{transition:stroke .4s ease,transform .6s cubic-bezier(.34,1.56,.64,1)}
  .bn-js .bn-a-knoten.bn-an .bn-a-ring{animation:bn-ploppen .7s cubic-bezier(.34,1.56,.64,1) both}
  .bn-js .bn-a-kern{transition:fill .4s ease}
  .bn-js .bn-a-nr{transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}
  .bn-js .bnb-ablauf .bn-a-ziel{opacity:0;transform-box:fill-box;transform-origin:center bottom;transition:opacity .6s ease}
  .bn-js .bnb-ablauf.bn-fertig .bn-a-ziel{opacity:1}
  .bn-js .bnb-ablauf.bn-fertig .bn-a-tropfen{animation:bn-tropfen 2.6s cubic-bezier(.55,0,.75,.4) .2s infinite}
  .bn-js .bnb-ablauf.bn-fertig .bn-a-funkeln{animation:bn-funkeln 2.8s ease-in-out infinite}
  .bn-js .bnb-ablauf.bn-fertig .bn-a-fahne path:last-child{transform-box:fill-box;transform-origin:left center;animation:bn-wehen 3s ease-in-out infinite alternate}
  /* Teilung: Trenner folgt dem Scrollen weich (Skript), Schilder blenden ein */
  .bn-js .bnb-teilung:not(.bn-los) .bn-t-schild{opacity:0;transform:translateY(8px)}
  .bn-js .bnb-teilung .bn-t-schild{transition:opacity .8s ease .6s,transform 1s var(--bn-weich) .6s}
  /* Skala: Striche, Füllung, Zeiger laufen in gut zwei Sekunden auf den Musterwert */
  .bn-js .bnb-skala:not(.bn-los) .bn-s-zeiger{transform:rotate(-90deg)}
  .bn-js .bnb-skala:not(.bn-los) .bn-s-fuell{stroke-dashoffset:1}
  .bn-js .bnb-skala:not(.bn-los) .bn-s-strich{opacity:0}
  .bn-js .bnb-skala .bn-s-zeiger{transition:transform 2.3s cubic-bezier(.22,1,.36,1) .35s}
  .bn-js .bnb-skala .bn-s-fuell{transition:stroke-dashoffset 2.3s cubic-bezier(.22,1,.36,1) .35s}
  .bn-js .bnb-skala .bn-s-strich{transition:opacity .5s ease;transition-delay:calc(var(--i) * 16ms)}
  .bn-js .bnb-skala:not(.bn-los) .bn-s-zelle{opacity:0;transform:translateY(16px)}
  .bn-js .bnb-skala .bn-s-zelle{transition:opacity 1s ease,transform 1.2s var(--bn-weich);transition-delay:calc(.6s + var(--k) * .18s)}
  .bn-js .bnb-skala.bn-los .bn-s-zeiger circle{animation:bn-puls 2.4s ease-out 2.7s 2}
  /* Erreichbarkeit: der grüne Punkt atmet */
  .bn-e-offen .bn-e-punkt::after{content:"";position:absolute;inset:0;border-radius:50%;background:#2f9e5b;animation:bn-atmen 2.4s ease-out infinite}
  .bn-e-antwort{animation:bn-herein .5s var(--bn-weich) both}
  .bn-e-orte li{transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
  .bn-t-trenner span{transition:transform .3s var(--bn-weich)}
  .bn-t-buehne:hover .bn-t-trenner span{transform:scale(1.08)}
}
@keyframes bn-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes bn-ploppen{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
@keyframes bn-tropfen{0%{transform:translateY(-10px) scale(.6);opacity:0}20%{opacity:1;transform:translateY(0) scale(1)}80%{transform:translateY(54px);opacity:1}100%{transform:translateY(64px);opacity:0}}
@keyframes bn-funkeln{0%,100%{transform:scale(.7) rotate(0);opacity:.5}50%{transform:scale(1.1) rotate(20deg);opacity:1}}
@keyframes bn-wehen{from{transform:skewY(0)}to{transform:skewY(-8deg)}}
@keyframes bn-puls{0%{transform:scale(1)}30%{transform:scale(1.6)}100%{transform:scale(1)}}
@keyframes bn-atmen{0%{transform:scale(1);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@keyframes bn-herein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
/* ★ Mockups für alle Branchen ohne Handy, Tablet, Anruf (mockups_mehr/allgemein.py, Mert 09.11.2026: „Inventar vergrößern“).
   Grundzustand ist das fertige Bild; Bewegung nur unter prefers-reduced-motion: no-preference; Farben nur über --mk-*. */
.mk-al-bento-raster,.mk-al-browser-fenster,.mk-al-kal-block,.mk-al-brief-buehne,.mk-al-pol-stapel,.mk-al-zitat-karte,
.mk-al-kuehl-tuer,.mk-al-kl-wand,.mk-al-ww-mast,.mk-al-plan-karte,.mk-al-lz-blatt,.mk-al-zs-strahl,.mk-al-pf-reihe,
.mk-al-akk-liste,.mk-al-sb-wolke,.mk-al-sm-maschine,.mk-al-kk-stapel{max-width:100%;box-sizing:border-box;color:var(--mk-text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-align:left}
.mk-al-bento-raster *,.mk-al-browser-fenster *,.mk-al-kal-block *,.mk-al-brief-buehne *,.mk-al-pol-stapel *,.mk-al-zitat-karte *,
.mk-al-kuehl-tuer *,.mk-al-kl-wand *,.mk-al-ww-mast *,.mk-al-plan-karte *,.mk-al-lz-blatt *,.mk-al-zs-strahl *,.mk-al-pf-reihe *,
.mk-al-akk-liste *,.mk-al-sb-wolke *,.mk-al-sm-maschine *,.mk-al-kk-stapel *{box-sizing:border-box}

/* 1 Bento-Raster */
.mk-al-bento-raster{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));grid-auto-rows:minmax(104px,auto);gap:12px;width:min(520px,100%)}
.mk-al-bk{position:relative;overflow:hidden;grid-column:span 2;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;padding:18px 18px 16px;border-radius:22px;
  background:var(--mk-grund);color:var(--mk-text);box-shadow:0 0 0 1px var(--mk-linie),0 22px 44px -34px rgba(0,0,0,.55);transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s}
.mk-al-bk:hover{transform:translateY(-6px);box-shadow:0 0 0 1px color-mix(in srgb,var(--mk-akzent) 40%,transparent),0 34px 50px -30px rgba(0,0,0,.55)}
.mk-al-bk b{font-size:15.5px;font-weight:650;line-height:1.25;overflow-wrap:break-word;hyphens:auto}
.mk-al-bk small{font-size:12.5px;line-height:1.45;color:var(--mk-leise)}
.mk-al-bk-nr{margin-bottom:auto;padding-bottom:10px;font-size:11.5px;font-weight:700;letter-spacing:.12em;color:var(--mk-akzent);font-variant-numeric:tabular-nums}
.mk-al-bk--1{grid-column:span 4;grid-row:span 2;padding:24px;background:var(--mk-band);color:var(--mk-band-text)}
.mk-al-bk--1::before{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;
  background:radial-gradient(circle at 40% 60%,color-mix(in srgb,var(--mk-knopf) 70%,transparent),transparent 68%);opacity:.75}
.mk-al-bk--1::after{content:"";position:absolute;right:26px;top:26px;width:58px;height:58px;border-radius:18px;border:1.5px solid color-mix(in srgb,var(--mk-band-text) 35%,transparent);transform:rotate(12deg)}
.mk-al-bk--1 b{position:relative;font-size:clamp(20px,2.3vw,26px);line-height:1.15;letter-spacing:-.01em}
.mk-al-bk--1 small{position:relative;color:inherit;opacity:.78;font-size:13.5px}
.mk-al-bk--1 .mk-al-bk-nr{color:inherit;opacity:.7}
.mk-al-bk--2{background:var(--mk-karte)}
.mk-al-bento-n4 .mk-al-bk--2{grid-row:span 2}
.mk-al-bento-n4 .mk-al-bk--3,.mk-al-bento-n4 .mk-al-bk--4{grid-column:span 3}
.mk-al-bento-n5 .mk-al-bk--2{grid-row:span 2}
.mk-al-bk-glanz{position:absolute;inset:0;background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.16) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
@media (max-width:560px){.mk-al-bento-raster{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:minmax(96px,auto)}
  .mk-al-bento-raster .mk-al-bk{grid-column:span 1;grid-row:auto}.mk-al-bento-raster .mk-al-bk--1{grid-column:span 2;min-height:170px}
  .mk-al-bento-n4 .mk-al-bk--4,.mk-al-bento-n6 .mk-al-bk--6{grid-column:span 2}}

/* 2 Browserfenster */
.mk-al-browser-fenster{width:min(500px,100%);border-radius:16px;overflow:hidden;background:var(--mk-grund);box-shadow:0 0 0 1px var(--mk-linie),0 50px 90px -46px rgba(0,0,0,.6)}
.mk-al-br-leiste{display:flex;align-items:center;gap:7px;padding:11px 14px;background:var(--mk-karte);border-bottom:1px solid var(--mk-linie)}
.mk-al-br-leiste>i{flex:none;width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--mk-text) 22%,transparent)}
.mk-al-br-adresse{flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:6px;margin:0 6% 0 10px;padding:5px 12px;border-radius:8px;background:var(--mk-grund);font-size:12px;color:var(--mk-leise);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-al-br-adresse svg{flex:none;width:10px;height:12px}.mk-al-br-adresse path{fill:none;stroke:currentColor;stroke-width:1.6}
.mk-al-br-schirm{position:relative;height:350px;overflow:hidden}
.mk-al-br-seite{padding-bottom:18px}
.mk-al-br-nav{display:flex;align-items:center;gap:10px;padding:12px 18px;font-size:13px}
.mk-al-br-nav b{flex:1;min-width:0;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-al-br-logo{flex:none;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-weight:800;font-size:13px;overflow:hidden}
.mk-al-br-menue{display:flex;gap:8px}.mk-al-br-menue i{width:22px;height:5px;border-radius:3px;background:var(--mk-linie)}
.mk-al-br-held{margin:0 12px;padding:28px 22px 24px;border-radius:14px;color:var(--mk-band-text);
  background:radial-gradient(circle at 85% 15%,color-mix(in srgb,var(--mk-knopf) 45%,transparent),transparent 55%),var(--mk-band)}
.mk-al-br-held small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.mk-al-br-held p{margin:8px 0 18px;font-size:clamp(19px,2.4vw,24px);font-weight:700;line-height:1.15;letter-spacing:-.01em;overflow-wrap:break-word}
.mk-al-br-knopf{position:relative;display:inline-block;padding:8px 16px;border-radius:999px;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:12.5px;font-weight:650}
.mk-al-br-zwischen{margin:0;padding:20px 22px 10px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--mk-leise)}
.mk-al-br-karten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:0 12px}
.mk-al-br-karte{display:flex;flex-direction:column;gap:10px;padding:14px 12px;border-radius:12px;background:var(--mk-karte);font-size:12.5px;font-weight:600;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
.mk-al-br-karte i{width:22px;height:22px;border-radius:7px;background:color-mix(in srgb,var(--mk-akzent) 22%,transparent)}
.mk-al-br-kontakt{display:grid;gap:4px;margin:14px 12px 0;padding:16px;border-radius:12px;background:var(--mk-band);color:var(--mk-band-text);font-size:12.5px;overflow-wrap:anywhere}
.mk-al-br-kontakt p{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;opacity:.75}
.mk-al-br-zeiger{position:absolute;left:104px;top:206px;width:18px;height:24px;background:#111;clip-path:polygon(0 0,0 80%,26% 62%,44% 100%,58% 94%,41% 58%,72% 58%);filter:drop-shadow(0 0 1px #fff) drop-shadow(0 2px 3px rgba(0,0,0,.4));pointer-events:none}
@media (min-width:861px){.mk-al-browser-fenster{transform:perspective(1600px) rotateY(-7deg) rotateX(3deg)}}

/* 3 Kalenderblatt */
.mk-al-kal-block{position:relative;width:min(350px,100%);padding-top:16px}
.mk-al-kal-ringe{position:absolute;z-index:4;top:0;left:16%;right:16%;display:flex;justify-content:space-between}
.mk-al-kal-ringe i{width:11px;height:34px;border-radius:6px;background:linear-gradient(90deg,#8e8f94,#eeeef0 45%,#9fa0a5);box-shadow:0 3px 4px rgba(0,0,0,.3)}
.mk-al-kal-blatt{position:relative;z-index:2;border-radius:18px;overflow:hidden;background:#fff;color:#1d1d1f;box-shadow:0 0 0 1px rgba(0,0,0,.05),0 40px 70px -40px rgba(0,0,0,.55)}
.mk-al-kal-kopf{margin:0;padding:30px 24px 16px;background:var(--mk-band);color:var(--mk-band-text);font-size:12.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.mk-al-kal-liste{list-style:none;margin:0;padding:8px 22px 4px}
.mk-al-kal-liste li{display:flex;flex-direction:column;gap:4px;padding:14px 0;border-bottom:1px dashed #e3e3e7}
.mk-al-kal-liste li:last-child{border-bottom:0}
.mk-al-kal-liste b{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--mk-akzent)}
.mk-al-kal-liste span{font-size:15px;line-height:1.45;color:#1d1d1f;font-variant-numeric:tabular-nums;overflow-wrap:break-word}
.mk-al-kal-fuss{margin:0;padding:10px 24px 20px;font-size:12px;color:#6b6b70;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-al-kal-deckel{display:none;position:absolute;z-index:3;left:0;right:0;top:16px;bottom:0;border-radius:18px;background:var(--mk-band);color:var(--mk-band-text);
  flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center;padding:20px;transform-origin:50% 0;backface-visibility:hidden}
.mk-al-kal-deckel span{width:64px;height:64px;border-radius:18px;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:28px;font-weight:800;overflow:hidden}
.mk-al-kal-deckel b{font-size:19px;line-height:1.2}
.mk-al-kal-unter{position:absolute;z-index:1;left:12px;right:12px;bottom:-9px;height:40px;border-radius:0 0 16px 16px;background:#ececef;box-shadow:0 14px 20px -14px rgba(0,0,0,.4)}

/* 5 Brief im Umschlag */
.mk-al-brief-buehne{position:relative;width:min(420px,100%);height:400px}
.mk-al-um-hinten{position:absolute;z-index:1;left:0;right:0;bottom:0;height:220px;border-radius:12px;background:color-mix(in srgb,var(--mk-band) 82%,#000)}
.mk-al-um-klappe{position:absolute;z-index:0;left:0;right:0;bottom:219px;height:112px;background:color-mix(in srgb,var(--mk-band) 70%,#000);clip-path:polygon(4% 100%,50% 4%,96% 100%);transform-origin:50% 100%}
.mk-al-um-klappe-zu{display:none}
.mk-al-brief-blatt{position:absolute;z-index:2;left:5%;right:5%;bottom:24px;height:346px;padding:24px 24px 20px;border-radius:8px;background:#fffefb;color:#1d1d1f;box-shadow:0 1px 0 rgba(0,0,0,.04),0 18px 36px -24px rgba(0,0,0,.5)}
.mk-al-brief-an{margin:0 0 50px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8a8a8f}
.mk-al-brief-adr{margin:0;font-size:14.5px;line-height:1.5;display:flex;flex-direction:column}
.mk-al-brief-adr b{font-size:clamp(16px,2vw,18px);line-height:1.25;margin-bottom:4px;overflow-wrap:break-word}
.mk-al-brief-kontakt{display:flex;flex-direction:column;margin:12px 0 0;padding-top:10px;border-top:1px solid #ececef;font-size:12.5px;color:#4b4b50;overflow-wrap:anywhere}
.mk-al-marke{position:absolute;top:18px;right:18px;width:50px;height:60px;padding:4px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);rotate:4deg}
.mk-al-marke>span{display:grid;place-items:center;width:100%;height:100%;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:22px;font-weight:800;overflow:hidden;outline:1.5px dashed color-mix(in srgb,var(--mk-knopf-text) 45%,transparent);outline-offset:-5px}
.mk-al-poststempel{position:absolute;top:30px;right:52px;width:96px;height:48px;opacity:.75;transform:rotate(-8deg)}
.mk-al-poststempel circle,.mk-al-poststempel path{fill:none;stroke:var(--mk-akzent);stroke-width:1.6}
.mk-al-poststempel text{fill:var(--mk-akzent);font-weight:700;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.mk-al-ps-ring{font-size:7px;letter-spacing:.06em}.mk-al-ps-plz{font-size:8px;text-anchor:middle}
.mk-al-um-vorn{position:absolute;z-index:3;left:0;right:0;bottom:0;height:136px;border-radius:0 0 12px 12px;
  background:linear-gradient(160deg,color-mix(in srgb,var(--mk-band) 92%,#fff),var(--mk-band));clip-path:polygon(0 0,50% 46%,100% 0,100% 100%,0 100%);
  filter:drop-shadow(0 -2px 0 rgba(0,0,0,.08))}
.mk-al-um-vorn::after{content:"";position:absolute;inset:0;background:linear-gradient(200deg,rgba(255,255,255,.08),transparent 40%)}

/* 6/7 Polaroids */
.mk-al-pol-stapel{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:18px 14px;width:min(460px,100%);padding:12px 4px}
.mk-al-pol{position:relative;margin:0;width:calc(50% - 10px);max-width:206px;padding:10px 10px 0;background:#fdfdfb;color:#1d1d1f;border-radius:3px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 22px 36px -22px rgba(0,0,0,.55);rotate:var(--r,0deg);translate:0 var(--y,0px);transition:rotate .35s cubic-bezier(.2,.8,.2,1),scale .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.mk-al-pol:nth-child(1){--r:-4deg}.mk-al-pol:nth-child(2){--r:3.5deg;--y:16px}.mk-al-pol:nth-child(3){--r:2.5deg;--y:-4px}.mk-al-pol:nth-child(4){--r:-3deg;--y:12px}
.mk-al-pol:hover{rotate:0deg;scale:1.05;z-index:2;box-shadow:0 1px 1px rgba(0,0,0,.08),0 34px 50px -24px rgba(0,0,0,.6)}
.mk-al-pol-bild{position:relative;overflow:hidden;aspect-ratio:1;display:flex;align-items:flex-end;padding:12px;
  background:linear-gradient(150deg,color-mix(in srgb,var(--mk-knopf) 78%,#fff),color-mix(in srgb,var(--mk-band) 92%,#000))}
.mk-al-pol:nth-child(2) .mk-al-pol-bild{background:linear-gradient(200deg,color-mix(in srgb,var(--mk-akzent) 55%,#fff),var(--mk-band))}
.mk-al-pol:nth-child(3) .mk-al-pol-bild{background:linear-gradient(120deg,var(--mk-band),color-mix(in srgb,var(--mk-knopf) 60%,#fff))}
.mk-al-pol:nth-child(4) .mk-al-pol-bild{background:linear-gradient(170deg,color-mix(in srgb,var(--mk-akzent) 35%,#f4f1ea),color-mix(in srgb,var(--mk-knopf) 85%,#000))}
.mk-al-pol-bild span{position:relative;z-index:1;font-size:clamp(34px,5vw,48px);font-weight:800;line-height:1;color:rgba(255,255,255,.92);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.mk-al-pol-bild i{position:absolute;inset:0;background:radial-gradient(circle at 78% 18%,rgba(255,255,255,.5),transparent 42%),radial-gradient(circle at 10% 100%,rgba(0,0,0,.22),transparent 50%)}
.mk-al-pol-bild::after{content:"";position:absolute;inset:0;z-index:2;background:#f3efe4;opacity:0;pointer-events:none}
.mk-al-pol figcaption{padding:12px 4px 16px;min-height:52px;font-size:14px;font-weight:650;line-height:1.25;text-align:center;overflow-wrap:break-word;hyphens:auto}
.mk-al-pol--stimme .mk-al-pol-bild{aspect-ratio:auto;min-height:170px;align-items:center;padding:16px 14px;background:color-mix(in srgb,var(--mk-akzent) 9%,#fff)!important}
.mk-al-pol--stimme .mk-al-pol-bild i{display:none}
.mk-al-pol--stimme blockquote{position:relative;z-index:1;margin:0;font-size:13.5px;line-height:1.5;color:#1d1d1f}
.mk-al-pol--stimme figcaption{font-weight:500;color:#5b5b60;font-size:13px}
@media (max-width:420px){.mk-al-pol-stapel--stimmen .mk-al-pol{width:100%;max-width:280px}.mk-al-pol-stapel--stimmen .mk-al-pol:nth-child(3){display:none}}

/* 8 Zitatkarte */
.mk-al-zitat-karte{position:relative;overflow:hidden;width:min(480px,100%);padding:clamp(26px,5vw,44px);border-radius:28px;background:var(--mk-grund);box-shadow:0 0 0 1px var(--mk-linie),0 44px 80px -50px rgba(0,0,0,.6)}
.mk-al-zitat-karte::before{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:radial-gradient(closest-side,color-mix(in srgb,var(--mk-akzent) 20%,transparent),transparent)}
.mk-al-zk-zeichen{position:relative;display:block;width:58px;height:44px;margin-bottom:18px}.mk-al-zk-zeichen path{fill:var(--mk-akzent)}
.mk-al-zk-stapel{position:relative;display:grid}
.mk-al-zk-stimme{grid-area:1/1;margin:0;opacity:0;visibility:hidden}.mk-al-zk-stimme:first-child{opacity:1;visibility:visible}
.mk-al-zk-stimme blockquote{margin:0;font-size:clamp(18px,2.2vw,23px);line-height:1.42;font-weight:500;letter-spacing:-.01em}
.mk-al-zk-stimme figcaption{display:flex;align-items:center;gap:10px;margin-top:20px;font-size:14px;color:var(--mk-leise)}
.mk-al-zk-stimme figcaption::before{content:"";width:22px;height:1.5px;background:var(--mk-akzent)}
.mk-al-zk-punkte{position:relative;display:flex;gap:8px;margin-top:28px}
.mk-al-zk-punkte i{position:relative;overflow:hidden;width:28px;height:4px;border-radius:2px;background:var(--mk-linie)}
.mk-al-zk-punkte i::after{content:"";position:absolute;inset:0;background:var(--mk-akzent);transform-origin:left;transform:scaleX(0)}
.mk-al-zk-punkte i:first-child::after{transform:none}

/* 10 Kühlschrank mit Zettel */
.mk-al-kuehl-tuer{position:relative;overflow:hidden;width:min(400px,100%);height:410px;display:grid;place-items:center;border-radius:28px;
  background:linear-gradient(100deg,#e4e6e9,#f7f8f9 38%,#e8eaed 62%,#f1f2f4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06),inset -24px 0 36px -26px rgba(0,0,0,.25),0 44px 80px -46px rgba(0,0,0,.55)}
.mk-al-kuehl-griff{position:absolute;right:22px;top:16%;height:46%;width:12px;border-radius:6px;background:linear-gradient(90deg,#a9acb2,#f6f6f7 50%,#a2a6ac);box-shadow:-3px 6px 10px -4px rgba(0,0,0,.35)}
.mk-al-kuehl-zettel{position:relative;width:min(254px,74%);padding:36px 24px 24px;color:#1d1d1f;transform-origin:50% 4px;rotate:-3deg;transition:rotate .35s cubic-bezier(.2,.8,.2,1),scale .35s;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mk-akzent) 10%,#fffbea),color-mix(in srgb,var(--mk-akzent) 16%,#fff6d8));
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 24px 30px -20px rgba(0,0,0,.45);clip-path:polygon(0 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%)}
.mk-al-kuehl-zettel::after{content:"";position:absolute;right:0;bottom:0;width:22px;height:22px;background:linear-gradient(135deg,rgba(0,0,0,.14),rgba(0,0,0,.04) 50%,transparent 50%)}
.mk-al-kuehl-tuer:hover .mk-al-kuehl-zettel{rotate:0deg;scale:1.03}
.mk-al-kuehl-magnet{position:absolute;top:10px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--mk-knopf) 45%,#fff),var(--mk-knopf) 62%);box-shadow:0 5px 8px -3px rgba(0,0,0,.45)}
.mk-al-kuehl-merk{margin:12px 0 10px;font-size:10.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#77777c}
.mk-al-kuehl-zettel b{display:block;font-size:17px;line-height:1.25;overflow-wrap:break-word}
@media (min-width:600px){.mk-al-kuehl-nr{white-space:nowrap}}
.mk-al-kuehl-nr{margin:12px 0 0;font-size:clamp(21px,4.6vw,27px);font-weight:800;letter-spacing:.01em;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mk-al-kuehl-strich{display:block;width:78%;height:12px;margin:2px 0 8px}.mk-al-kuehl-strich path{fill:none;stroke:var(--mk-akzent);stroke-width:3;stroke-linecap:round}
.mk-al-kuehl-zettel small{display:block;font-size:12.5px;color:#4b4b50;line-height:1.4}
.mk-al-kuehl-magnet2{position:absolute;left:13%;top:12%;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--mk-band) 55%,#fff),var(--mk-band) 64%);box-shadow:0 5px 8px -3px rgba(0,0,0,.4)}
.mk-al-kuehl-magnet3{position:absolute;left:16%;bottom:13%;width:34px;height:22px;border-radius:7px;rotate:-12deg;background:linear-gradient(160deg,color-mix(in srgb,var(--mk-akzent) 60%,#fff),var(--mk-akzent));box-shadow:0 5px 8px -3px rgba(0,0,0,.4)}

/* 11 Klingelschild */
.mk-al-kl-wand{position:relative;width:min(380px,100%);display:flex;flex-direction:column;align-items:center;gap:20px;padding:30px 24px 26px;border-radius:26px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mk-karte) 92%,#000),var(--mk-karte));box-shadow:inset 0 0 0 1px var(--mk-linie)}
.mk-al-kl-hausnr{padding:6px 20px 8px;border-radius:12px;background:var(--mk-band);color:var(--mk-band-text);font-size:52px;font-weight:800;line-height:1;letter-spacing:-.02em;
  box-shadow:inset 0 0 0 3px color-mix(in srgb,var(--mk-band-text) 25%,transparent),0 16px 26px -16px rgba(0,0,0,.55)}
.mk-al-kl-platte{width:min(300px,100%);padding:20px 18px;border-radius:18px;color:#1d1d1f;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.22) 0 1px,transparent 1px 3px),linear-gradient(180deg,#f3f3f4,#d2d3d6);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(0,0,0,.18),0 26px 40px -24px rgba(0,0,0,.55)}
.mk-al-kl-sprech{display:grid;grid-template-columns:repeat(6,7px);gap:7px;justify-content:center;margin:0 0 18px}
.mk-al-kl-sprech i{width:7px;height:7px;border-radius:50%;background:#6f7176;box-shadow:inset 0 1px 1px rgba(0,0,0,.5)}
.mk-al-kl-zeile{display:flex;align-items:center;gap:12px}
.mk-al-kl-schild{flex:1;min-width:0;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:10px;background:#fdfdf7;font-size:14px;font-weight:650;line-height:1.25;overflow-wrap:break-word;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 2px 4px rgba(0,0,0,.08)}
.mk-al-kl-zeichen{flex:none;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-size:12px;font-weight:800;overflow:hidden}
.mk-al-kl-knopf{position:relative;flex:none;width:52px;height:52px;border-radius:50%;cursor:pointer;background:radial-gradient(circle at 40% 32%,#fff,#c6c7ca 72%);
  box-shadow:inset 0 -2px 3px rgba(0,0,0,.25),0 3px 6px rgba(0,0,0,.25);transition:transform .2s,box-shadow .2s}
.mk-al-kl-knopf:hover{transform:scale(.93);box-shadow:inset 0 2px 4px rgba(0,0,0,.25),0 1px 2px rgba(0,0,0,.25)}
.mk-al-kl-knopf i{position:absolute;inset:13px;border-radius:50%;box-shadow:0 0 0 2px var(--mk-akzent),0 0 12px color-mix(in srgb,var(--mk-akzent) 55%,transparent)}
.mk-al-kl-knopf::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--mk-akzent);opacity:0}
.mk-al-kl-adr{margin:0;text-align:center;font-size:14px;line-height:1.5;color:var(--mk-text)}

/* 12 Wegweiser */
.mk-al-ww-mast{position:relative;width:min(400px,100%);display:flex;flex-direction:column;align-items:center;gap:12px;padding:6px 0 0;filter:drop-shadow(0 14px 18px rgba(0,0,0,.22))}
.mk-al-ww-pfahl{order:9;position:absolute;z-index:0;top:16px;bottom:16px;left:50%;width:14px;margin-left:-7px;border-radius:7px;background:linear-gradient(90deg,#76787d,#dadbde 45%,#86888d)}
.mk-al-ww-boden{order:10;position:relative;width:130px;height:16px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.25),transparent);margin-top:2px}
.mk-al-ww-kopf{position:relative;z-index:1;padding:10px 20px;border-radius:12px;background:var(--mk-band);color:var(--mk-band-text);font-weight:700;font-size:17px;text-align:center;max-width:80%;overflow-wrap:break-word}
.mk-al-ww-kopf small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;opacity:.7}
.mk-al-ww-schild{position:relative;z-index:1;display:block;min-width:58%;max-width:90%;padding:12px 26px;border-radius:10px;background:#fff;color:#1d1d1f;text-align:center;
  font-weight:700;font-size:clamp(15px,1.8vw,18px);line-height:1.2;overflow-wrap:break-word;box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--mk-akzent) 60%,#fff);
  rotate:var(--w,-1.2deg);transition:scale .3s cubic-bezier(.2,.8,.2,1)}
.mk-al-ww-schild:nth-of-type(even){--w:1.4deg}
.mk-al-ww-schild::before,.mk-al-ww-schild::after{content:"";position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;background:#b9bbc0}
.mk-al-ww-schild::before{left:10px}.mk-al-ww-schild::after{right:10px}
.mk-al-ww-schild:hover{scale:1.05}
.mk-al-ww-aktiv{background:var(--mk-knopf);color:var(--mk-knopf-text)}

/* 13 Stadtplan */
.mk-al-plan-karte{position:relative;width:min(440px,100%)}
.mk-al-plan-falt{position:relative;overflow:hidden;aspect-ratio:1;border-radius:20px;background:color-mix(in srgb,var(--mk-karte) 80%,var(--mk-grund));box-shadow:0 0 0 1px var(--mk-linie),0 44px 80px -48px rgba(0,0,0,.6)}
.mk-al-plan-falt svg{display:block;width:100%;height:100%}
.mk-al-plan-gruen{fill:color-mix(in srgb,var(--mk-akzent) 14%,transparent)}
.mk-al-plan-fluss{fill:none;stroke:color-mix(in srgb,var(--mk-akzent) 22%,transparent);stroke-width:20;stroke-linecap:round}
.mk-al-plan-strasse{fill:none;stroke:var(--mk-grund);stroke-width:11;stroke-linecap:round}
.mk-al-plan-ring{fill:color-mix(in srgb,var(--mk-akzent) 20%,transparent);transform-box:fill-box;transform-origin:center;opacity:.6}
.mk-al-plan-ring--2{opacity:0}
.mk-al-plan-nadel path{fill:var(--mk-knopf)}.mk-al-plan-nadel circle{fill:var(--mk-knopf-text)}
.mk-al-plan-nadel{filter:drop-shadow(0 6px 5px rgba(0,0,0,.3))}
.mk-al-plan-knick{position:absolute;top:0;bottom:0;width:30px;margin-left:-15px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(0,0,0,.05) 48%,rgba(255,255,255,.07) 52%,transparent)}
.mk-al-plan-knick--1{left:33.3%}.mk-al-plan-knick--2{left:66.6%}
.mk-al-plan-etikett{position:absolute;left:50%;top:calc(50% + 12px);transform:translateX(-50%);width:max-content;max-width:84%;padding:10px 14px;border-radius:14px;text-align:center;
  background:var(--mk-grund);box-shadow:0 18px 30px -18px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie)}
.mk-al-plan-etikett b{display:block;font-size:14px;line-height:1.25;overflow-wrap:break-word}.mk-al-plan-etikett span{display:block;margin-top:2px;font-size:12px;color:var(--mk-leise)}
.mk-al-plan-hinweis{display:block;margin-top:10px;text-align:right;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-leise)}

/* 14 Laufzettel (Funktion al_stempelkarte) */
.mk-al-lz-blatt{position:relative;width:min(400px,100%);padding:0 0 18px;background:#fffefa;color:#1d1d1f;border-radius:6px 6px 4px 4px;
  box-shadow:0 1px 1px rgba(0,0,0,.06),0 34px 60px -36px rgba(0,0,0,.55);font-variant-numeric:tabular-nums}
.mk-al-lz-blatt::before{content:"";position:absolute;left:0;right:0;top:-9px;height:10px;background:linear-gradient(-45deg,#fffefa 5px,transparent 0) 0 0/12px 10px repeat-x,linear-gradient(45deg,#fffefa 5px,transparent 0) 0 0/12px 10px repeat-x}
.mk-al-lz-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:22px 24px 14px;border-bottom:2px solid #1d1d1f}
.mk-al-lz-kopf span{font-size:11px;font-weight:800;letter-spacing:.24em;text-transform:uppercase}
.mk-al-lz-kopf b{min-width:0;font-size:13px;font-weight:600;color:#5b5b60;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-al-lz-liste{list-style:none;margin:0;padding:6px 24px 0}
.mk-al-lz-liste li{display:flex;align-items:center;gap:12px;padding:13px 0;border-bottom:1px solid #ececef;transition:background .25s}
.mk-al-lz-liste li:hover{background:color-mix(in srgb,var(--mk-akzent) 6%,transparent)}
.mk-al-lz-nr{flex:none;font-size:12px;font-weight:700;color:#8a8a8f}
.mk-al-lz-titel{min-width:0;font-size:15px;font-weight:650;line-height:1.3;overflow-wrap:break-word;hyphens:auto}
.mk-al-lz-punkte{flex:1;min-width:16px;align-self:flex-end;margin-bottom:6px;border-bottom:2px dotted #d4d4d8}
.mk-al-lz-haken{flex:none;width:26px;height:26px;border-radius:50%;background:color-mix(in srgb,var(--mk-akzent) 14%,#fff)}
.mk-al-lz-haken path{fill:none;stroke:var(--mk-akzent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-al-lz-fuss{display:flex;justify-content:space-between;align-items:center;padding:14px 24px 0}
.mk-al-lz-fuss span{width:96px;height:22px;border-bottom:1.5px solid #c9c9ce}
.mk-al-lz-fuss small{font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8a8a8f}

/* 15 Zeitstrahl */
.mk-al-zs-strahl{position:relative;width:min(500px,100%)}
.mk-al-zs-linie{position:absolute;left:50%;top:0;width:48px;height:100%;margin-left:-24px;overflow:visible}
.mk-al-zs-grund,.mk-al-zs-zug{fill:none;stroke-width:3;stroke-linecap:round}
.mk-al-zs-grund{stroke:var(--mk-linie)}.mk-al-zs-zug{stroke:var(--mk-akzent);stroke-width:3.5}
.mk-al-zs-strahl ol{position:relative;list-style:none;margin:0;padding:0}
.mk-al-zs-strahl li{display:grid;grid-template-columns:minmax(0,1fr) 48px minmax(0,1fr);align-items:center;column-gap:14px;height:110px}
.mk-al-zs-punkt{grid-column:2;grid-row:1;justify-self:center;position:relative;z-index:1;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;
  background:var(--mk-grund);box-shadow:inset 0 0 0 3px var(--mk-akzent),0 6px 14px -6px rgba(0,0,0,.4);font-size:13px;font-weight:800;color:var(--mk-akzent)}
.mk-al-zs-strahl li>div{grid-row:1;padding:13px 15px;border-radius:14px;background:var(--mk-karte);box-shadow:0 14px 28px -24px rgba(0,0,0,.5);transition:transform .3s}
.mk-al-zs-strahl li>div:hover{transform:translateY(-3px)}
.mk-al-zs-r>div{grid-column:3}.mk-al-zs-l>div{grid-column:1;text-align:right}
.mk-al-zs-strahl b{display:block;font-size:15px;line-height:1.25}
.mk-al-zs-strahl small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--mk-leise);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
@media (max-width:600px){.mk-al-zs-linie{left:0;margin-left:0}.mk-al-zs-strahl li{grid-template-columns:48px minmax(0,1fr)}
  .mk-al-zs-punkt{grid-column:1}.mk-al-zs-strahl .mk-al-zs-r>div,.mk-al-zs-strahl .mk-al-zs-l>div{grid-column:2;text-align:left}}

/* 16 Pfeil-Prozess */
.mk-al-pf-reihe{width:min(520px,100%)}
.mk-al-pf-reihe ol{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.mk-al-pf-reihe li{display:flex;flex-direction:column;gap:12px}
.mk-al-pf-chev{position:relative;display:grid;place-items:center;min-height:70px;padding:10px 28px 10px 32px;overflow:hidden;background:var(--mk-karte);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%,22px 50%)}
.mk-al-pf-reihe li:first-child .mk-al-pf-chev{padding-left:18px;clip-path:polygon(0 0,calc(100% - 22px) 0,100% 50%,calc(100% - 22px) 100%,0 100%);border-radius:14px 0 0 14px}
.mk-al-pf-reihe li:last-child .mk-al-pf-chev{border-radius:0 14px 14px 0}
.mk-al-pf-chev i{position:absolute;inset:0;background:var(--mk-knopf);transform-origin:left}
.mk-al-pf-reihe li:nth-child(2) .mk-al-pf-chev i{background:color-mix(in srgb,var(--mk-knopf) 86%,var(--mk-band))}
.mk-al-pf-reihe li:nth-child(3) .mk-al-pf-chev i{background:color-mix(in srgb,var(--mk-knopf) 72%,var(--mk-band))}
.mk-al-pf-chev b{position:relative;font-size:14px;font-weight:700;line-height:1.2;text-align:center;color:var(--mk-knopf-text);overflow-wrap:break-word;hyphens:auto;max-width:100%}
.mk-al-pf-reihe small{padding:0 8px;font-size:12.5px;line-height:1.45;color:var(--mk-leise)}
@media (max-width:520px){.mk-al-pf-reihe ol{grid-template-columns:1fr;gap:10px}
  .mk-al-pf-reihe li{flex-direction:row;align-items:center;gap:14px}
  .mk-al-pf-reihe .mk-al-pf-chev,.mk-al-pf-reihe li:first-child .mk-al-pf-chev{flex:none;width:46%;min-height:62px;padding:10px 26px 10px 16px;border-radius:12px 0 0 12px;clip-path:polygon(0 0,calc(100% - 20px) 0,100% 50%,calc(100% - 20px) 100%,0 100%)}
  .mk-al-pf-reihe small{padding:0}}

/* 17 Fragen zum Aufklappen (bedienbar) */
.mk-al-akk-liste{width:min(500px,100%);display:grid;gap:10px}
.mk-al-akk-frage{border-radius:18px;background:var(--mk-grund);box-shadow:0 0 0 1px var(--mk-linie),0 16px 34px -30px rgba(0,0,0,.5);transition:box-shadow .3s,transform .3s}
.mk-al-akk-frage:hover{transform:translateY(-2px)}
.mk-al-akk-frage[open]{box-shadow:0 0 0 1.5px var(--mk-akzent),0 24px 40px -30px rgba(0,0,0,.55)}
.mk-al-akk-frage summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:17px 20px;cursor:pointer;list-style:none;font-size:15.5px;font-weight:650;line-height:1.35;border-radius:18px}
.mk-al-akk-frage summary::-webkit-details-marker{display:none}
.mk-al-akk-frage summary:focus-visible{outline:2px solid var(--mk-akzent);outline-offset:2px}
.mk-al-akk-frage summary i{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--mk-karte);transition:transform .35s cubic-bezier(.34,1.5,.64,1),background .3s}
.mk-al-akk-frage summary i::before,.mk-al-akk-frage summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px -6px;border-radius:1px;background:var(--mk-text);transition:background .3s}
.mk-al-akk-frage summary i::after{transform:rotate(90deg)}
.mk-al-akk-frage[open] summary i{transform:rotate(45deg);background:var(--mk-knopf)}
.mk-al-akk-frage[open] summary i::before,.mk-al-akk-frage[open] summary i::after{background:var(--mk-knopf-text)}
.mk-al-akk-frage p{margin:0;padding:0 20px 18px;font-size:14.5px;line-height:1.6;color:var(--mk-leise)}

/* 18 Sprechblasen-Wolke */
.mk-al-sb-wolke{width:min(500px,100%);display:grid;gap:22px}
.mk-al-sb-blasen{display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px}
.mk-al-sb-blase{position:relative;max-width:100%;padding:12px 16px;border-radius:20px 20px 20px 6px;background:var(--mk-grund);color:var(--mk-text);
  box-shadow:0 0 0 1px var(--mk-linie),0 16px 30px -22px rgba(0,0,0,.5);font-size:14px;font-weight:600;line-height:1.35;overflow-wrap:break-word}
.mk-al-sb-blase:nth-child(even){border-radius:20px 20px 6px 20px;margin-top:16px}
.mk-al-sb-blase:first-child{background:var(--mk-knopf);color:var(--mk-knopf-text);box-shadow:0 16px 30px -18px color-mix(in srgb,var(--mk-knopf) 80%,transparent)}
.mk-al-sb-antworten{display:grid;padding:20px 22px;border-radius:22px;background:var(--mk-band);color:var(--mk-band-text)}
.mk-al-sb-antwort{grid-area:1/1;margin:0;font-size:14.5px;line-height:1.55;opacity:0;visibility:hidden}
.mk-al-sb-antwort:first-child{opacity:1;visibility:visible}
.mk-al-sb-antwort b{display:block;margin-bottom:8px;font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;opacity:.72;line-height:1.4}

/* 19 Schreibmaschine */
.mk-al-sm-maschine{position:relative;width:min(460px,100%);display:flex;flex-direction:column;align-items:center}
.mk-al-sm-papier{position:relative;z-index:1;width:84%;min-height:230px;padding:28px 26px 30px;background:linear-gradient(180deg,#fffdf7 85%,#ece8dc);color:#1d1d1f;border-radius:4px 4px 0 0;
  box-shadow:0 0 0 1px rgba(0,0,0,.04),0 20px 40px -28px rgba(0,0,0,.45);font-family:ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace}
.mk-al-sm-kopf{margin:0 0 18px;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#8a8a8f;overflow-wrap:anywhere}
.mk-al-sm-zeile{margin:0 0 12px;font-size:clamp(14px,1.9vw,16.5px);line-height:1.55;overflow-wrap:break-word}
.mk-al-sm-zeile:last-of-type::after{content:"";display:inline-block;width:.55em;height:1.05em;margin-left:2px;vertical-align:-.18em;background:var(--mk-akzent)}
.mk-al-sm-walze{position:relative;z-index:2;width:100%;height:30px;margin-top:-10px;border-radius:15px;background:linear-gradient(180deg,#3a3a3f,#5a5a60 35%,#1b1b1e);box-shadow:0 8px 14px -8px rgba(0,0,0,.6)}
.mk-al-sm-walze i{position:absolute;left:-8px;right:-8px;top:5px;bottom:5px;border-radius:10px;background:linear-gradient(90deg,#111 0 14px,transparent 14px calc(100% - 14px),#111 calc(100% - 14px))}
.mk-al-sm-koerper{position:relative;width:92%;height:96px;margin-top:-4px;border-radius:14px 14px 30px 30px;background:linear-gradient(180deg,color-mix(in srgb,var(--mk-band) 88%,#fff),var(--mk-band));
  box-shadow:0 34px 50px -34px rgba(0,0,0,.6)}
.mk-al-sm-koerper span{position:absolute;left:12%;right:12%;top:22px;bottom:20px;background-image:radial-gradient(circle,color-mix(in srgb,var(--mk-band-text) 28%,transparent) 5.5px,transparent 6px);background-size:28px 24px;background-repeat:space}

/* 20 Karteikarten */
.mk-al-kk-stapel{position:relative;display:grid;width:min(420px,100%);padding:8px 10px 18px}
.mk-al-kk-hinten{grid-area:1/1;border-radius:6px;background:#f6f5f0;box-shadow:0 14px 26px -18px rgba(0,0,0,.45);rotate:3deg;translate:10px 10px}
.mk-al-kk-hinten--2{background:#fbfaf6;rotate:-2.5deg;translate:-8px 14px}
.mk-al-kk-karte{grid-area:1/1;position:relative;z-index:1;min-height:236px;padding:0 24px 24px;border-radius:6px;color:#1d1d1f;opacity:0;visibility:hidden;
  background:linear-gradient(var(--mk-akzent),var(--mk-akzent)) 0 47px/100% 2px no-repeat,repeating-linear-gradient(180deg,transparent 0 25px,rgba(0,0,0,.07) 25px 26px) 0 64px/100% calc(100% - 64px) no-repeat,#fff;
  box-shadow:0 1px 1px rgba(0,0,0,.06),0 26px 40px -26px rgba(0,0,0,.5)}
.mk-al-kk-karte:nth-child(3){opacity:1;visibility:visible}
.mk-al-kk-karte .mk-al-kk-kopf{height:47px;display:flex;align-items:center;line-height:14px;margin:0 0 17px;font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#7a7a80}
.mk-al-kk-karte b{display:block;font-size:19px;line-height:26px;margin-bottom:0}
.mk-al-kk-karte p{margin:0;font-size:14.5px;line-height:26px;color:#3a3a3f}

/* ── Bewegung ─────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* Bento: Kacheln bauen sich nacheinander auf, Glanz zieht ruhig über die große Kachel */
  .mk-al-bk{animation:mk-al-kachel 1.5s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .32s + .2s)}
  .mk-al-bk--1 .mk-al-bk-glanz{animation:mk-al-glanz 9s cubic-bezier(.65,0,.35,1) 2.6s infinite}
  .mk-al-bk--1::after{animation:mk-al-kreisen 14s linear infinite}
  /* Browser: Seite scrollt, Zeiger klickt auf Anrufen */
  .mk-al-br-seite{animation:mk-al-scrollen 14s cubic-bezier(.65,0,.35,1) 1s infinite}
  .mk-al-br-zeiger{animation:mk-al-zeiger 14s cubic-bezier(.65,0,.35,1) 1s infinite}
  .mk-al-br-knopf{animation:mk-al-klick 14s ease 1s infinite}
  .mk-al-br-karte{animation:mk-al-auf 1.3s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .3s + .6s)}
  /* Kalender: Deckblatt schlägt auf, Markierung wandert durch die Zeilen */
  .mk-al-kal-liste span{animation:mk-al-auf 1.2s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .3s + 2.2s)}
  .mk-al-kal-deckel{display:flex;animation:mk-al-umschlagen 1.8s cubic-bezier(.65,0,.35,1) 1s both}
  /* Brief: Klappe öffnet, Blatt gleitet heraus und schwebt */
  .mk-al-um-klappe-zu{display:block;position:absolute;z-index:4;left:0;right:0;bottom:108px;height:112px;background:color-mix(in srgb,var(--mk-band) 76%,#000);
    clip-path:polygon(0 0,100% 0,50% 96%);transform-origin:50% 0;animation:mk-al-klappe-zu .8s cubic-bezier(.55,0,.8,.3) .8s both}
  .mk-al-um-klappe{animation:mk-al-klappe-auf .8s cubic-bezier(.2,.7,.3,1) 1.6s backwards}
  .mk-al-brief-blatt{animation:mk-al-herausziehen 2s cubic-bezier(.16,1,.3,1) 2.2s backwards,mk-al-schweben 7s ease-in-out 4.2s infinite alternate}
  .mk-al-poststempel{animation:mk-al-stempeln 1.2s cubic-bezier(.34,1.5,.64,1) 3.6s backwards}
  /* Polaroids: fallen hin und entwickeln sich */
  .mk-al-pol{animation:mk-al-fallen 1.4s cubic-bezier(.22,1.2,.36,1) backwards;animation-delay:calc(var(--k) * .38s + .2s)}
  .mk-al-pol-bild::after{animation:mk-al-entwickeln 2.4s ease-out backwards;animation-delay:calc(var(--k) * .38s + 1s)}
  .mk-al-pol-bild::after{opacity:0}
  /* Zitatkarte: Stimmen wechseln ruhig, Balken laufen mit */
  .mk-al-zk-zeichen{animation:mk-al-zeichen 1.4s cubic-bezier(.34,1.5,.64,1) .3s backwards}
  .mk-al-n2 .mk-al-zk-stimme{visibility:visible;animation:mk-al-wechsel2 14s ease infinite both;animation-delay:calc(var(--k) * 7s)}
  .mk-al-n3 .mk-al-zk-stimme{visibility:visible;animation:mk-al-wechsel3 21s ease infinite both;animation-delay:calc(var(--k) * 7s)}
  .mk-al-n2 .mk-al-zk-punkte i::after{transform:scaleX(0);animation:mk-al-punkt2 14s linear infinite both;animation-delay:calc(var(--k) * 7s)}
  .mk-al-n3 .mk-al-zk-punkte i::after{transform:scaleX(0);animation:mk-al-punkt3 21s linear infinite both;animation-delay:calc(var(--k) * 7s)}
  /* Kühlschrank: Zettel schwingt ein, Nummer wird unterstrichen */
  .mk-al-kuehl-zettel{animation:mk-al-einschwingen 2s cubic-bezier(.3,1.3,.5,1) .3s backwards,mk-al-pendeln 8s ease-in-out 2.4s infinite alternate}
  .mk-al-kuehl-tuer:hover .mk-al-kuehl-zettel{animation-play-state:paused}
  .mk-al-kuehl-magnet{animation:mk-al-magnet .6s cubic-bezier(.34,1.8,.64,1) 1.2s backwards}
  .mk-al-kuehl-strich path{stroke-dasharray:1;animation:mk-al-zeichnen 1.4s cubic-bezier(.65,0,.35,1) 2s backwards}
  .mk-al-kuehl-magnet2,.mk-al-kuehl-magnet3{animation:mk-al-magnet .6s cubic-bezier(.34,1.8,.64,1) backwards}
  .mk-al-kuehl-magnet2{animation-delay:.2s}.mk-al-kuehl-magnet3{animation-delay:.5s}
  /* Klingel: jemand klingelt, Schild leuchtet, Sprechanlage antwortet */
  .mk-al-kl-platte{animation:mk-al-auf 1.4s cubic-bezier(.16,1,.3,1) .2s backwards}
  .mk-al-kl-knopf{animation:mk-al-druecken 7s ease 2s infinite}
  .mk-al-kl-knopf::after{animation:mk-al-ring 7s ease-out 2s infinite}
  .mk-al-kl-schild{animation:mk-al-leuchten 7s ease 2s infinite}
  .mk-al-kl-sprech i{animation:mk-al-sprechen 7s ease 2s infinite}
  .mk-al-kl-sprech i:nth-child(3n+2){animation-delay:2.15s}.mk-al-kl-sprech i:nth-child(3n){animation-delay:2.3s}
  .mk-al-kl-hausnr{animation:mk-al-zeichen 1.3s cubic-bezier(.34,1.5,.64,1) .5s backwards}
  /* Wegweiser: Schilder klappen vom Pfahl aus, wiegen leicht im Wind */
  .mk-al-ww-kopf,.mk-al-ww-schild{animation:mk-al-ausklappen 1.4s cubic-bezier(.22,1.2,.36,1) backwards,mk-al-wind 9s ease-in-out infinite alternate;
    animation-delay:calc(var(--k) * .38s + .3s),calc(var(--k) * .5s + 2.2s)}
  /* Stadtplan: Karte faltet sich auf, Nadel fällt, Ringe pulsieren */
  .mk-al-plan-falt{animation:mk-al-entfalten 1.8s cubic-bezier(.65,0,.35,1) .3s backwards}
  .mk-al-plan-nadel{animation:mk-al-nadel 1.1s cubic-bezier(.34,1.6,.64,1) 2s backwards}
  .mk-al-plan-ring{animation:mk-al-puls 4s ease-out 2.6s infinite}.mk-al-plan-ring--2{animation-delay:4.6s}
  .mk-al-plan-etikett{animation:mk-al-auf 1.2s cubic-bezier(.16,1,.3,1) 2.6s backwards}
  /* Stempelkarte: ein Feld nach dem anderen wird gestempelt, dann von vorn */
  .mk-al-lz-liste li{animation:mk-al-auf 1.2s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .3s + .3s)}
  .mk-al-lz-haken path{stroke-dasharray:1;animation:mk-al-haken 12s cubic-bezier(.65,0,.35,1) infinite both;animation-delay:calc(var(--k) * .7s + 1.4s)}
  .mk-al-lz-haken{animation:mk-al-haken-grund 12s ease infinite both;animation-delay:calc(var(--k) * .7s + 1.4s)}
  /* Zeitstrahl: Linie zeichnet sich, Schritte kommen von der Seite */
  .mk-al-zs-zug{stroke-dasharray:1;animation:mk-al-zeichnen 2.6s cubic-bezier(.65,0,.35,1) .4s backwards}
  .mk-al-zs-punkt{animation:mk-al-zeichen 1.2s cubic-bezier(.34,1.5,.64,1) backwards;animation-delay:calc(var(--k) * .42s + .5s)}
  .mk-al-zs-r>div{animation:mk-al-von-rechts 1.4s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .42s + .7s)}
  .mk-al-zs-l>div{animation:mk-al-von-links 1.4s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .42s + .7s)}
  /* Pfeile: Fortschritt läuft durch die drei Schritte */
  .mk-al-pf-chev i{animation:mk-al-fuellen 9s cubic-bezier(.65,0,.35,1) infinite both;animation-delay:calc(var(--k) * 1.1s + .4s)}
  .mk-al-pf-chev b{animation:mk-al-schrift 9s cubic-bezier(.65,0,.35,1) infinite both;animation-delay:calc(var(--k) * 1.1s + .4s)}
  .mk-al-pf-reihe small{animation:mk-al-auf 1.3s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .4s + .8s)}
  /* Fragen: kommen nacheinander, Antwort gleitet beim Öffnen auf */
  .mk-al-akk-frage{animation:mk-al-auf 1.3s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--k) * .3s + .2s)}
  .mk-al-akk-frage[open] p{animation:mk-al-aufklappen-text .4s cubic-bezier(.16,1,.3,1)}
  /* Sprechblasen: schweben, die gerade beantwortete Frage leuchtet */
  .mk-al-sb-blase{animation:mk-al-schweben 6s ease-in-out infinite alternate;animation-delay:calc(var(--k) * -1.6s)}
  .mk-al-n2 .mk-al-sb-blase{animation:mk-al-schweben 6s ease-in-out infinite alternate,mk-al-an2 12s ease infinite;animation-delay:calc(var(--k) * -1.6s),calc(var(--k) * 6s)}
  .mk-al-n3 .mk-al-sb-blase{animation:mk-al-schweben 6s ease-in-out infinite alternate,mk-al-an3 18s ease infinite;animation-delay:calc(var(--k) * -1.6s),calc(var(--k) * 6s)}
  .mk-al-n4 .mk-al-sb-blase{animation:mk-al-schweben 6s ease-in-out infinite alternate,mk-al-an4 24s ease infinite;animation-delay:calc(var(--k) * -1.6s),calc(var(--k) * 6s)}
  .mk-al-n2 .mk-al-sb-antwort{visibility:visible;animation:mk-al-blende2 12s ease infinite both;animation-delay:calc(var(--k) * 6s)}
  .mk-al-n3 .mk-al-sb-antwort{visibility:visible;animation:mk-al-blende3 18s ease infinite both;animation-delay:calc(var(--k) * 6s)}
  .mk-al-n4 .mk-al-sb-antwort{visibility:visible;animation:mk-al-blende4 24s ease infinite both;animation-delay:calc(var(--k) * 6s)}
  /* Schreibmaschine: tippt Buchstabe für Buchstabe, Schreibmarke blinkt */
  .mk-al-sm-zeile{animation:mk-al-tippen var(--t) steps(var(--z),end) var(--t0) backwards}
  .mk-al-sm-zeile:last-of-type::after{animation:mk-al-blinken 1.1s steps(1) infinite}
  .mk-al-sm-papier{animation:mk-al-auf 1.3s cubic-bezier(.16,1,.3,1) backwards}
  /* Karteikarten: eine Karte nach der anderen wird nach links weggelegt */
  .mk-al-n2 .mk-al-kk-karte{visibility:visible;animation:mk-al-karte2 12s ease infinite both;animation-delay:calc(var(--k) * 6s)}
  .mk-al-n3 .mk-al-kk-karte{visibility:visible;animation:mk-al-karte3 18s ease infinite both;animation-delay:calc(var(--k) * 6s)}
  .mk-al-n4 .mk-al-kk-karte{visibility:visible;animation:mk-al-karte4 24s ease infinite both;animation-delay:calc(var(--k) * 6s)}
  @media (max-width:860px){.mk-al-browser-fenster{transform:none}}

  /* Scrollgebunden, wo der Browser es kann (Apple-Art): der Fortschritt folgt dem Daumen */
  @supports (animation-timeline:view()){
    .mk-al-zs-zug{animation:mk-al-zeichnen linear both;animation-timeline:view();animation-range:entry 30% cover 62%}
    .mk-al-plan-falt svg{animation:mk-al-zoom linear both;animation-timeline:view();animation-range:entry 0% exit 30%}
    .mk-al-pol-stapel .mk-al-pol:nth-child(even){animation:mk-al-fallen 1.4s cubic-bezier(.22,1.2,.36,1) backwards,mk-al-tiefe linear both;
      animation-delay:calc(var(--k) * .38s + .2s),0s;animation-timeline:auto,view();animation-range:normal,entry 0% exit 100%}
  }
}
@keyframes mk-al-auf{from{opacity:0;transform:translateY(22px)}}
@keyframes mk-al-kachel{from{opacity:0;transform:translateY(30px) scale(.93)}}
@keyframes mk-al-glanz{0%{transform:translateX(-120%)}35%,100%{transform:translateX(120%)}}
@keyframes mk-al-kreisen{to{transform:rotate(372deg)}}
@keyframes mk-al-scrollen{0%,14%{transform:none}44%,62%{transform:translateY(calc(-100% + 350px))}90%,100%{transform:none}}
@keyframes mk-al-zeiger{0%{transform:translate(160px,90px);opacity:0}6%{opacity:1}12%,14%{transform:none}16%{transform:scale(.86)}18%{transform:none}
  44%{transform:translate(120px,-60px)}62%{transform:translate(140px,-90px)}90%{transform:translate(160px,90px);opacity:1}96%,100%{opacity:0;transform:translate(160px,90px)}}
@keyframes mk-al-klick{0%,14%,19%,100%{transform:none;filter:none}16%{transform:scale(.94);filter:brightness(.88)}}
@keyframes mk-al-umschlagen{0%{transform:perspective(1000px) rotateX(0);opacity:1}70%{opacity:1}100%{transform:perspective(1000px) rotateX(108deg);opacity:0}}
@keyframes mk-al-zeilen{to{transform:translateY(calc(var(--n) * 100%))}}
@keyframes mk-al-wachsen{from{transform:scaleX(0)}}
@keyframes mk-al-klappe-zu{0%{transform:perspective(900px) rotateX(0)}99%{opacity:1}100%{transform:perspective(900px) rotateX(-90deg);opacity:0}}
@keyframes mk-al-klappe-auf{from{transform:perspective(900px) rotateX(90deg)}}
@keyframes mk-al-herausziehen{from{transform:translateY(170px);clip-path:inset(0 0 170px 0)}to{clip-path:inset(0)}}
@keyframes mk-al-schweben{from{transform:none}to{transform:translateY(-8px)}}
@keyframes mk-al-stempeln{from{opacity:0;transform:rotate(-10deg) scale(1.7)}}
@keyframes mk-al-fallen{from{opacity:0;transform:translateY(-70px) rotate(-14deg) scale(1.06)}}
@keyframes mk-al-entwickeln{from{opacity:1}to{opacity:0}}
@keyframes mk-al-zeichen{from{opacity:0;transform:scale(.5) rotate(-8deg)}}
@keyframes mk-al-blende2{0%,2%{opacity:0}6%,44%{opacity:1}48%,100%{opacity:0}}
@keyframes mk-al-blende3{0%,1.5%{opacity:0}4.5%,29%{opacity:1}32%,100%{opacity:0}}
@keyframes mk-al-blende4{0%,1%{opacity:0}3.5%,21.5%{opacity:1}24%,100%{opacity:0}}
@keyframes mk-al-wechsel2{0%{opacity:0;transform:translateY(14px)}5%,46%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes mk-al-wechsel3{0%{opacity:0;transform:translateY(14px)}4%,30%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes mk-al-wechsel4{0%{opacity:0;transform:translateY(14px)}3%,22%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateY(-8px)}}
@keyframes mk-al-punkt2{0%{transform:scaleX(0)}50%{transform:scaleX(1)}50.1%,100%{transform:scaleX(0)}}
@keyframes mk-al-punkt3{0%{transform:scaleX(0)}33.3%{transform:scaleX(1)}33.4%,100%{transform:scaleX(0)}}
@keyframes mk-al-aufklappen{from{transform:rotateX(0)}to{transform:rotateX(172deg)}}
@keyframes mk-al-wiegen{from{transform:rotateY(-5deg)}to{transform:rotateY(5deg)}}
@keyframes mk-al-einschwingen{0%{opacity:0;transform:translateY(-50px) rotate(-16deg)}45%{opacity:1;transform:rotate(7deg)}70%{transform:rotate(-3deg)}85%{transform:rotate(1.5deg)}100%{transform:none}}
@keyframes mk-al-pendeln{from{transform:none}to{transform:rotate(2.2deg)}}
@keyframes mk-al-magnet{from{opacity:0;transform:scale(1.8)}}
@keyframes mk-al-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mk-al-druecken{0%,30%,40%,100%{transform:none}34%{transform:scale(.9)}}
@keyframes mk-al-ring{0%,33%{opacity:0;transform:scale(1)}36%{opacity:.8}60%,100%{opacity:0;transform:scale(1.9)}}
@keyframes mk-al-leuchten{0%,34%,86%,100%{background:#fdfdf7;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12),inset 0 2px 4px rgba(0,0,0,.08)}
  40%,80%{background:#fffbe6;box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--mk-akzent) 50%,transparent),0 0 22px color-mix(in srgb,var(--mk-akzent) 30%,transparent)}}
@keyframes mk-al-sprechen{0%,46%,84%,100%{background:#6f7176}50%,58%,66%,74%{background:var(--mk-akzent)}54%,62%,70%,78%{background:#6f7176}}
@keyframes mk-al-ausklappen{from{opacity:0;transform:perspective(700px) rotateY(85deg)}}
@keyframes mk-al-wind{from{transform:none}to{transform:perspective(700px) rotateY(9deg)}}
@keyframes mk-al-entfalten{0%{clip-path:inset(0 66.6% 0 0 round 20px);opacity:.4}45%{clip-path:inset(0 33.3% 0 0 round 20px);opacity:1}100%{clip-path:inset(0 0 0 0 round 20px)}}
@keyframes mk-al-nadel{from{opacity:0;transform:translateY(-80px)}}
@keyframes mk-al-puls{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.4);opacity:0}}
@keyframes mk-al-zoom{from{transform:scale(1.14)}to{transform:none}}
@keyframes mk-al-tiefe{from{translate:0 34px}to{translate:0 -6px}}
@keyframes mk-al-haken{0%{stroke-dashoffset:1}6%,88%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
@keyframes mk-al-haken-grund{0%{transform:scale(.8)}5%{transform:scale(1.12)}8%,100%{transform:none}}
@keyframes mk-al-stempel{0%{opacity:0;transform:scale(1.9)}5%{opacity:1;transform:scale(.9)}7%,88%{opacity:1;transform:none}94%,100%{opacity:0;transform:none}}
@keyframes mk-al-von-rechts{from{opacity:0;transform:translateX(36px)}}
@keyframes mk-al-von-links{from{opacity:0;transform:translateX(-36px)}}
@keyframes mk-al-fuellen{0%{transform:scaleX(0)}12%,86%{transform:scaleX(1)}96%,100%{transform:scaleX(0)}}
@keyframes mk-al-schrift{0%{color:var(--mk-text)}10%,88%{color:var(--mk-knopf-text)}96%,100%{color:var(--mk-text)}}
@keyframes mk-al-aufklappen-text{from{opacity:0;transform:translateY(-8px)}}
@keyframes mk-al-an2{0%,46%{background:var(--mk-knopf);color:var(--mk-knopf-text)}50%,100%{background:var(--mk-grund);color:var(--mk-text)}}
@keyframes mk-al-an3{0%,30%{background:var(--mk-knopf);color:var(--mk-knopf-text)}33.3%,100%{background:var(--mk-grund);color:var(--mk-text)}}
@keyframes mk-al-an4{0%,22%{background:var(--mk-knopf);color:var(--mk-knopf-text)}25%,100%{background:var(--mk-grund);color:var(--mk-text)}}
@keyframes mk-al-tippen{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mk-al-blinken{0%{opacity:1}50%{opacity:0}}
@keyframes mk-al-karte2{0%{opacity:0;transform:translateX(40px) rotate(3deg)}5%,44%{opacity:1;transform:none}50%,100%{opacity:0;transform:translateX(-60px) rotate(-7deg)}}
@keyframes mk-al-karte3{0%{opacity:0;transform:translateX(40px) rotate(3deg)}4%,29%{opacity:1;transform:none}33.3%,100%{opacity:0;transform:translateX(-60px) rotate(-7deg)}}
@keyframes mk-al-karte4{0%{opacity:0;transform:translateX(40px) rotate(3deg)}3%,21%{opacity:1;transform:none}25%,100%{opacity:0;transform:translateX(-60px) rotate(-7deg)}}
/* Nummer passt sich der Zettelbreite an (10.11.2026: in breiten Schriften 216 statt 206 px, Messung hielt die Bauart an) */
.mk-al-kuehl-zettel{container-type:inline-size}
.mk-al-kuehl-nr{font-size:min(27px,10.5cqi);white-space:nowrap}
@supports not (font-size:1cqi){.mk-al-kuehl-nr{font-size:20px;white-space:normal}}
/* ★ Mockups Handwerk (mockups_mehr/handwerk.py, Mert 09.11.2026: „Inventar vergrößern“). Grundzustand = fertiges Bild,
   jede Bewegung nur unter prefers-reduced-motion: no-preference, Farben nur aus den Tokens der Variante. */
.mk-hw{position:relative;width:min(480px,100%);max-width:100%;margin:0 auto;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--mk-text)}
.mk-hw svg{display:block;width:100%;height:auto;overflow:visible}
.mk-hw text{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;fill:var(--mk-text)}
.mk-hw-tafel{position:relative;border-radius:22px;background:var(--mk-grund);box-shadow:0 44px 80px -44px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie);overflow:hidden}
.mk-hw-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--mk-linie);font-size:13px}
.mk-hw-kopf b{font-weight:650;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mk-hw-kopf .mk-muster{flex:none}
.mk-hw-ecke{position:absolute;top:14px;right:14px;z-index:3}
.mk-hw-fuss{display:flex;align-items:center;gap:10px;margin:18px auto 0;width:max-content;max-width:100%;padding:9px 16px 9px 12px;border-radius:999px;background:var(--mk-grund);
  box-shadow:0 14px 30px -18px rgba(0,0,0,.45),0 0 0 1px var(--mk-linie);font-size:13.5px}
.mk-hw-fuss b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-hw-punkt{flex:none;width:12px;height:12px;border-radius:50%;background:var(--mk-akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--mk-akzent) 18%,transparent)}

/* Farbrolle */
.mk-hw-fr-wand{position:relative;aspect-ratio:4/3.1;border-radius:22px;overflow:hidden;background:
  radial-gradient(circle at 20% 30%,rgba(0,0,0,.035) 0 1px,transparent 1.5px) 0 0/9px 9px,
  radial-gradient(circle at 60% 70%,rgba(255,255,255,.4) 0 1px,transparent 1.5px) 0 0/13px 13px,
  linear-gradient(160deg,var(--mk-karte),color-mix(in srgb,var(--mk-karte) 88%,#000));
  box-shadow:0 44px 80px -44px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie),inset 0 -30px 60px -40px rgba(0,0,0,.25)}
.mk-hw-fr-bahn{position:absolute;top:0;bottom:12%;left:calc(var(--k) * 33.2%);width:34.2%;transform-origin:top;
  background:repeating-linear-gradient(90deg,rgba(255,255,255,.06) 0 2px,transparent 2px 7px),
  linear-gradient(180deg,color-mix(in srgb,var(--mk-akzent) calc(58% - var(--k) * 5%),var(--mk-grund)),color-mix(in srgb,var(--mk-akzent) calc(72% - var(--k) * 5%),var(--mk-grund)))}
.mk-hw-fr-bahn:nth-child(2){border-radius:0 0 8px 6px/0 0 10px 6px}
.mk-hw-fr-nass{position:absolute;top:0;bottom:12%;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.28),transparent);opacity:0}
.mk-hw-fr-leiste{position:absolute;left:0;right:0;bottom:0;height:12%;background:linear-gradient(180deg,color-mix(in srgb,var(--mk-text) 14%,var(--mk-grund)),color-mix(in srgb,var(--mk-text) 24%,var(--mk-grund)));box-shadow:0 -1px 0 rgba(0,0,0,.08)}
.mk-hw-fr-rolle{position:absolute!important;width:30%!important;left:68.4%;top:46%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.28))}
.mk-hw-fr-walze{fill:color-mix(in srgb,var(--mk-akzent) 72%,var(--mk-grund));stroke:rgba(255,255,255,.55);stroke-width:2}
.mk-hw-fr-glanz{fill:#fff;opacity:.3}
.mk-hw-fr-buegel{fill:none;stroke:color-mix(in srgb,var(--mk-text) 55%,#888);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.mk-hw-fr-griff{fill:var(--mk-knopf);stroke:rgba(255,255,255,.35);stroke-width:2}

/* Wandaufbau als Explosionszeichnung */
.mk-hw-ws{padding:8px 0}
.mk-hw-ws-o{fill:var(--c);stroke:rgba(255,255,255,.35);stroke-width:1}
.mk-hw-ws-l{fill:color-mix(in srgb,var(--c) 84%,#000)}
.mk-hw-ws-r{fill:color-mix(in srgb,var(--c) 70%,#000)}
.mk-hw-ws-lage{transition:transform .3s cubic-bezier(.16,1,.3,1);cursor:default}
.mk-hw-ws-lage:nth-child(1){--c:color-mix(in srgb,var(--mk-text) 34%,var(--mk-grund))}
.mk-hw-ws-lage:nth-child(2){--c:color-mix(in srgb,var(--mk-text) 14%,var(--mk-grund))}
.mk-hw-ws-lage:nth-child(3){--c:color-mix(in srgb,var(--mk-akzent) 22%,var(--mk-grund))}
.mk-hw-ws-lage:nth-child(4){--c:color-mix(in srgb,var(--mk-akzent) 55%,var(--mk-grund))}
.mk-hw-ws-lage:nth-child(5){--c:var(--mk-akzent)}
.mk-hw-ws-schild path{stroke:var(--mk-linie);stroke-width:1.5;fill:none}
.mk-hw-ws-schild circle{fill:var(--mk-akzent)}
.mk-hw-ws-schild text{font-size:15px;font-weight:600}
.mk-hw-ws-lage:hover{transform:translateY(-6px)}
.mk-hw-ws-lage:hover .mk-hw-ws-schild text{fill:var(--mk-akzent)}
@media (max-width:420px){.mk-hw-ws-schild text{font-size:19px}}

/* Wasserwaage */
.mk-hw-ww{padding:40px 0 0}
.mk-hw-ww-latte{position:relative;height:74px;border-radius:12px;display:flex;align-items:center;justify-content:center;gap:18%;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mk-akzent) 80%,#fff),var(--mk-akzent) 46%,color-mix(in srgb,var(--mk-akzent) 78%,#000));
  box-shadow:0 30px 40px -26px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -2px 0 rgba(0,0,0,.15);transform:rotate(0);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.mk-hw-ww-skala{position:absolute;left:12px;right:12px;top:0;height:10px;background:repeating-linear-gradient(90deg,rgba(0,0,0,.35) 0 1px,transparent 1px 10px);
  -webkit-mask:linear-gradient(180deg,#000 60%,transparent);mask:linear-gradient(180deg,#000 60%,transparent)}
.mk-hw-ww-libelle{position:relative;width:34%;height:30px;border-radius:15px;overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.9),color-mix(in srgb,var(--mk-akzent) 26%,#f4ffe8) 40%,color-mix(in srgb,var(--mk-akzent) 40%,#e4f7c8));
  box-shadow:inset 0 0 0 3px rgba(0,0,0,.25),inset 0 4px 8px rgba(255,255,255,.7)}
.mk-hw-ww-strich{position:absolute;top:0;bottom:0;left:calc(50% - 22px);width:2px;background:rgba(0,0,0,.55)}
.mk-hw-ww-strich--r{left:calc(50% + 20px)}
.mk-hw-ww-blase{position:absolute;top:6px;left:calc(50% - 15px);width:30px;height:18px;border-radius:50%;
  background:radial-gradient(ellipse at 40% 35%,#fff,rgba(255,255,255,.75) 45%,rgba(255,255,255,.35));box-shadow:0 0 0 1px rgba(0,0,0,.12);transition:transform .35s cubic-bezier(.34,1.4,.64,1)}
.mk-hw-ww-end{width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.25);display:grid;place-items:center}
.mk-hw-ww-end i{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#fff,color-mix(in srgb,var(--mk-akzent) 30%,#eaffd8))}
.mk-hw-ww-anzeige{position:absolute;left:50%;top:-44px;transform:translateX(-50%);display:flex;align-items:center;gap:8px;padding:6px 12px;border-radius:10px;
  background:var(--mk-band);color:var(--mk-band-text);font-size:12px;white-space:nowrap;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.mk-hw-ww-anzeige b{font-size:16px;font-variant-numeric:tabular-nums}
.mk-hw-ww-anzeige .mk-muster{color:inherit;border-color:currentColor;font-size:9px;padding:2px 6px}
.mk-hw-ww-boden{display:flex;justify-content:space-between;margin-top:10px;height:22px;border-top:3px solid color-mix(in srgb,var(--mk-text) 30%,transparent)}
.mk-hw-ww-boden i{width:2px;height:12px;background:color-mix(in srgb,var(--mk-text) 30%,transparent)}
.mk-hw-ww:hover .mk-hw-ww-latte{transform:rotate(-2.2deg)}
.mk-hw-ww:hover .mk-hw-ww-blase{transform:translateX(-24px)}

/* Tapete */
.mk-hw-tp-wand{position:relative;aspect-ratio:4/3.1;border-radius:22px;overflow:hidden;background:linear-gradient(160deg,var(--mk-karte),color-mix(in srgb,var(--mk-karte) 90%,#000));
  box-shadow:0 44px 80px -44px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie)}
.mk-hw-tp-bahn{position:absolute;top:0;bottom:12%;left:calc(6% + var(--k) * 26%);width:26%;transform-origin:top;box-shadow:1px 0 0 rgba(0,0,0,.1),inset -1px 0 0 rgba(255,255,255,.5);
  background:radial-gradient(circle,color-mix(in srgb,var(--mk-akzent) 40%,transparent) 0 2px,transparent 2.5px) 0 0/22px 22px,
  radial-gradient(circle,color-mix(in srgb,var(--mk-akzent) 22%,transparent) 0 5px,transparent 5.5px) 11px 11px/22px 22px,
  linear-gradient(90deg,color-mix(in srgb,var(--mk-akzent) 10%,var(--mk-grund)),color-mix(in srgb,var(--mk-akzent) 16%,var(--mk-grund)))}
.mk-hw-tp-rolle{position:absolute;right:4%;bottom:12%;width:9%;aspect-ratio:1/3.2;border-radius:30px;transform:rotate(-8deg);transform-origin:bottom;
  background:linear-gradient(90deg,color-mix(in srgb,var(--mk-akzent) 14%,var(--mk-grund)),color-mix(in srgb,var(--mk-akzent) 30%,var(--mk-grund)) 50%,color-mix(in srgb,var(--mk-akzent) 14%,var(--mk-grund)));
  box-shadow:0 12px 16px -10px rgba(0,0,0,.4)}
.mk-hw-tp-leiste{position:absolute;left:0;right:0;bottom:0;height:12%;background:color-mix(in srgb,var(--mk-text) 20%,var(--mk-grund))}

/* Spachtel */
.mk-hw-sp-flaeche{position:relative;height:200px;overflow:hidden;background:
  radial-gradient(circle at 30% 40%,rgba(0,0,0,.14) 0 2px,transparent 3px) 0 0/17px 15px,
  radial-gradient(circle at 70% 60%,rgba(255,255,255,.5) 0 2px,transparent 3px) 0 0/23px 19px,
  repeating-linear-gradient(115deg,rgba(0,0,0,.05) 0 3px,transparent 3px 11px),
  color-mix(in srgb,var(--mk-text) 16%,var(--mk-grund))}
.mk-hw-sp-glatt{position:absolute;inset:0;background:radial-gradient(140% 90% at 0% 0%,rgba(255,255,255,.28),transparent 55%),repeating-radial-gradient(circle at -20% 120%,transparent 0 46px,rgba(0,0,0,.025) 46px 48px),linear-gradient(170deg,color-mix(in srgb,var(--mk-akzent) 4%,var(--mk-grund)),color-mix(in srgb,var(--mk-text) 9%,var(--mk-grund)));
  clip-path:inset(0 22% 0 0);box-shadow:inset -1px 0 0 rgba(0,0,0,.08)}
.mk-hw-sp-kelle{position:absolute!important;width:22%!important;left:69.2%;top:6%;filter:drop-shadow(0 12px 12px rgba(0,0,0,.3))}
.mk-hw-sp-griff{fill:var(--mk-band)}
.mk-hw-sp-hals{fill:color-mix(in srgb,var(--mk-text) 50%,#999)}
.mk-hw-sp-blatt{fill:#d9dce1}
.mk-hw-sp-kante{fill:#a4a8af}

/* Stuck */
.mk-hw-st-decke{aspect-ratio:4/3.1;display:grid;place-items:center;background:radial-gradient(circle at 50% 45%,var(--mk-grund),color-mix(in srgb,var(--mk-karte) 80%,#000) 130%)}
.mk-hw-st-rosette{width:62%!important}
.mk-hw-st-ring,.mk-hw-st-blatt,.mk-hw-st-pfad{fill:none;stroke:var(--mk-text);stroke-width:2.2;stroke-linejoin:round;opacity:.8}
.mk-hw-st-ring--2{stroke-width:1.2}
.mk-hw-st-blatt{fill:color-mix(in srgb,var(--mk-akzent) 10%,transparent);stroke:var(--mk-akzent);stroke-width:1.8;opacity:1}
.mk-hw-st-kern{fill:var(--mk-akzent)}
.mk-hw-st-profil{position:absolute!important;left:5%;bottom:6%;width:22%!important;padding:8px;border-radius:10px;background:var(--mk-grund);box-shadow:0 10px 24px -14px rgba(0,0,0,.5)}
.mk-hw-st-pfad{fill:color-mix(in srgb,var(--mk-akzent) 16%,transparent);stroke:var(--mk-akzent);opacity:1}
.mk-hw-st-zettel{position:absolute;left:5%;bottom:calc(6% + 30%);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mk-leise)}

/* Gerüst an der Fassade */
.mk-hw-gr .mk-hw-tafel{background:linear-gradient(180deg,color-mix(in srgb,var(--mk-band) 12%,var(--mk-grund)),var(--mk-grund) 70%)}
.mk-hw-gr-haus{fill:var(--mk-karte);stroke:color-mix(in srgb,var(--mk-text) 30%,transparent);stroke-width:2}
.mk-hw-gr-farbe{fill:color-mix(in srgb,var(--mk-akzent) 32%,var(--mk-grund));transform-box:fill-box;transform-origin:bottom}
.mk-hw-gr-fen{fill:color-mix(in srgb,var(--mk-band) 70%,#7fa7c9);stroke:#fff;stroke-width:3}
.mk-hw-gr-tuer{fill:var(--mk-band)}
.mk-hw-gr-dach{fill:none;stroke:var(--mk-band);stroke-width:10;stroke-linecap:round;stroke-linejoin:round}
.mk-hw-gr-stangen path,.mk-hw-gr-lage path{fill:none;stroke:color-mix(in srgb,var(--mk-text) 62%,#888);stroke-width:4;stroke-linecap:round}
.mk-hw-gr-lage .mk-hw-gr-brett{stroke:var(--mk-knopf);stroke-width:7}
.mk-hw-gr-lage .mk-hw-gr-diag{stroke-width:2.5;opacity:.7}
.mk-hw-gr-grund{stroke:color-mix(in srgb,var(--mk-text) 40%,transparent);stroke-width:3}

/* Aufmaß */
.mk-hw-am-blatt{padding:34px 18px 14px;background:linear-gradient(var(--mk-linie) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,var(--mk-linie) 1px,transparent 1px) 0 0/20px 20px,var(--mk-grund)}
.mk-hw-am-blatt .mk-muster{position:absolute;top:14px;left:18px}
.mk-hw-am-wand{fill:color-mix(in srgb,var(--mk-akzent) 14%,var(--mk-grund));stroke:var(--mk-text);stroke-width:2.5}
.mk-hw-am-aus{fill:var(--mk-grund);stroke:var(--mk-text);stroke-width:2;stroke-dasharray:6 4}
.mk-hw-am-mass path{fill:none;stroke:var(--mk-akzent);stroke-width:1.8}
.mk-hw-am-mass text{font-size:14px;font-weight:700;fill:var(--mk-akzent);text-anchor:middle;paint-order:stroke;stroke:var(--mk-grund);stroke-width:6px}
.mk-hw-am-senk{writing-mode:vertical-rl;text-anchor:middle}
.mk-hw-am-flaeche rect{fill:var(--mk-band)}
.mk-hw-am-flaeche text{fill:var(--mk-band-text);font-size:14px;font-weight:700;text-anchor:middle}

/* Feuchtemessgerät */
.mk-hw-fm{display:flex;flex-direction:column;align-items:center}
.mk-hw-fm-schirm{border-radius:16px;padding:12px 14px 10px;background:linear-gradient(180deg,#e9f1e4,#cfdcc8);color:#14200f;text-align:center;box-shadow:inset 0 2px 6px rgba(0,0,0,.25)}
.mk-hw-fm-schirm .mk-muster{color:#14200f;border-color:#14200f;font-size:9px;padding:2px 6px}
.mk-hw-fm-schirm small{display:block;margin-top:6px;font-size:11px;letter-spacing:.08em;text-transform:uppercase}
.mk-hw-fm-wert{display:flex;justify-content:center;align-items:flex-end;height:1em;margin:4px 0 6px;font:700 54px/1 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums;overflow:hidden}
.mk-hw-fm-wert em{font-style:normal;font-size:.5em;line-height:1.6;padding:0 2px}
.mk-hw-fm-rolle{display:flex;flex-direction:column;height:1em;transform:translateY(calc(var(--z) * -1em))}
.mk-hw-fm-rolle i{font-style:normal;height:1em;line-height:1}
.mk-hw-fm-skala{display:grid;grid-template-columns:repeat(10,1fr);gap:3px}
.mk-hw-fm-skala i{height:9px;border-radius:2px;background:rgba(20,32,15,.14)}
.mk-hw-fm-skala i.mk-hw-fm-an{background:#14200f}
.mk-hw-fm-schirm p{display:flex;justify-content:space-between;margin:5px 0 0;font-size:10.5px}
.mk-hw-fm .mk-hw-fuss{margin-top:22px}

/* Bautrockner */
.mk-hw-tr .mk-hw-tafel{background:radial-gradient(circle at 30% 60%,var(--mk-grund),color-mix(in srgb,var(--mk-karte) 85%,#000) 140%);padding:10px 8px 0}
.mk-hw-tr-boden{stroke:color-mix(in srgb,var(--mk-text) 22%,transparent);stroke-width:3}
.mk-hw-tr-koerper{fill:var(--mk-band);stroke:rgba(255,255,255,.14);stroke-width:2}
.mk-hw-tr-licht{fill:#fff;opacity:.12}
.mk-hw-tr-griff{fill:none;stroke:color-mix(in srgb,var(--mk-band) 70%,#888);stroke-width:12;stroke-linecap:round}
.mk-hw-tr-lam{fill:var(--mk-band-text);opacity:.22}
.mk-hw-tr-tank{fill:rgba(255,255,255,.1);stroke:rgba(255,255,255,.35);stroke-width:2}
.mk-hw-tr-wasser{fill:color-mix(in srgb,var(--mk-akzent) 60%,#7fb8e6);opacity:.9;transform-box:fill-box;transform-origin:bottom}
.mk-hw-tr-tropfen{fill:color-mix(in srgb,var(--mk-akzent) 60%,#7fb8e6);opacity:0}
.mk-hw-tr-rad{fill:#1c1c1f;stroke:#55555c;stroke-width:4}
.mk-hw-tr-luft{fill:none;stroke:var(--mk-akzent);stroke-width:3;stroke-linecap:round;stroke-dasharray:22 14;opacity:.75}

/* Wärmebild */
.mk-hw-wb-geraet{padding:12px;border-radius:26px;background:#141416;box-shadow:0 44px 80px -40px rgba(0,0,0,.65)}
.mk-hw-wb-scan{position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.55);box-shadow:0 0 18px 4px rgba(255,255,255,.25);opacity:0}
.mk-hw-wb-kreuz{position:absolute;left:55%;top:53%;width:54px;height:54px;margin:-27px;border:2px solid #fff;border-radius:50%}
.mk-hw-wb-kreuz::before,.mk-hw-wb-kreuz::after{content:"";position:absolute;background:#fff}
.mk-hw-wb-kreuz::before{left:50%;top:-12px;bottom:-12px;width:2px;margin-left:-1px}
.mk-hw-wb-kreuz::after{top:50%;left:-12px;right:-12px;height:2px;margin-top:-1px}
.mk-hw-wb-kreuz i{position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.5);opacity:0}
.mk-hw-wb-wert{position:absolute;left:14px;top:14px;display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:10px;background:rgba(0,0,0,.45);color:#fff;font-size:12px}
.mk-hw-wb-wert .mk-muster{color:#fff;border-color:#fff;font-size:9px;padding:2px 6px}
.mk-hw-wb-skala small{position:absolute;right:16px;color:#fff;font-size:10.5px;opacity:.85}
.mk-hw-wb-skala small:first-of-type{top:-2px}.mk-hw-wb-skala small:last-of-type{bottom:-2px}
.mk-hw-wb-leiste{display:flex;align-items:center;gap:10px;padding:12px 6px 2px;color:#fff;font-size:12px;letter-spacing:.1em;text-transform:uppercase}
.mk-hw-wb-leiste i{width:10px;height:10px;border-radius:50%;background:#e2675d}.mk-hw-wb-leiste i:first-of-type{margin-left:auto}.mk-hw-wb-leiste i+i{background:rgba(255,255,255,.3)}

/* Trocknungsverlauf */
.mk-hw-tk svg{padding:6px 10px 2px}
.mk-hw-tk-ziel{fill:color-mix(in srgb,var(--mk-akzent) 14%,transparent)}
.mk-hw-tk-ziellabel{font-size:12px;text-anchor:end;fill:var(--mk-akzent)!important;font-weight:600}
.mk-hw-tk-achse{fill:none;stroke:var(--mk-linie);stroke-width:2}
.mk-hw-tk-flaeche{fill:color-mix(in srgb,var(--mk-akzent) 10%,transparent)}
.mk-hw-tk-linie{fill:none;stroke:var(--mk-akzent);stroke-width:3.5;stroke-linejoin:round;stroke-linecap:round}
.mk-hw-tk-p{fill:var(--mk-grund);stroke:var(--mk-akzent);stroke-width:3;transform-box:fill-box;transform-origin:center}
.mk-hw-tk-ende{fill:var(--mk-akzent);opacity:.25;transform-box:fill-box;transform-origin:center}
.mk-hw-tk-tag{font-size:12px;text-anchor:middle;fill:var(--mk-leise)!important}
.mk-hw-tk-y{font-size:12px;fill:var(--mk-leise)!important}

/* Vorher und nachher */
.mk-hw-vn-bild{position:relative;aspect-ratio:4/3.1;border-radius:22px;overflow:hidden;box-shadow:0 44px 80px -44px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie)}
.mk-hw-vn-nach,.mk-hw-vn-vor{position:absolute;inset:0}
.mk-hw-vn-nach{background:linear-gradient(160deg,color-mix(in srgb,var(--mk-akzent) 8%,var(--mk-grund)),color-mix(in srgb,var(--mk-akzent) 16%,var(--mk-grund)))}
.mk-hw-vn-vor{clip-path:inset(0 50% 0 0);background:
  radial-gradient(circle at 30% 30%,rgba(0,0,0,.05) 0 1px,transparent 1.5px) 0 0/7px 7px,
  linear-gradient(160deg,color-mix(in srgb,var(--mk-text) 12%,var(--mk-grund)),color-mix(in srgb,var(--mk-text) 22%,var(--mk-grund)))}
.mk-hw-vn--rein .mk-hw-vn-nach,.mk-hw-vn--rein .mk-hw-vn-vor{background-image:linear-gradient(rgba(0,0,0,.09) 2px,transparent 2px),linear-gradient(90deg,rgba(0,0,0,.09) 2px,transparent 2px)}
.mk-hw-vn--rein .mk-hw-vn-nach{background-size:52px 52px;background-color:color-mix(in srgb,var(--mk-akzent) 6%,#fbfbfb)}
.mk-hw-vn--rein .mk-hw-vn-vor{background-size:52px 52px;background-color:color-mix(in srgb,var(--mk-text) 18%,var(--mk-grund))}
.mk-hw-vn--rein .mk-hw-vn-nach::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.55) 50%,transparent 60%)}
.mk-hw-vn-trenner{position:absolute;top:0;bottom:0;left:50%;width:3px;margin-left:-1.5px;background:#fff;box-shadow:0 0 12px rgba(0,0,0,.25)}

/* Wochenplan */
.mk-hw-rp-tabelle{position:relative;padding:8px 14px 16px}
.mk-hw-rp-zeile{position:relative;display:grid;grid-template-columns:minmax(0,2.4fr) repeat(5,minmax(0,1fr));align-items:center;gap:4px;padding:10px 4px;border-bottom:1px solid var(--mk-linie);font-size:13px;transition:background .25s}
.mk-hw-rp-zeile:last-child{border-bottom:0}
.mk-hw-rp-zeile>b{font-weight:600;line-height:1.25;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;padding-right:6px}
.mk-hw-rp-zeile>span{display:grid;place-items:center}
.mk-hw-rp-zeile--kopf{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-leise);padding-top:6px}
.mk-hw-rp-zeile i{width:22px;height:22px;border-radius:50%;background:var(--mk-akzent);position:relative}
.mk-hw-rp-zeile i::after{content:"";position:absolute;left:7px;top:5px;width:6px;height:10px;border:solid var(--mk-grund);border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.mk-hw-rp-zeile em{width:6px;height:6px;border-radius:50%;background:var(--mk-linie)}
.mk-hw-rp-zeile:not(.mk-hw-rp-zeile--kopf):hover{background:color-mix(in srgb,var(--mk-akzent) 8%,transparent)}
.mk-hw-rp-heute{position:absolute;top:8px;bottom:16px;left:calc(14px + 4px + (100% - 36px) * 2.4 / 7.4);width:calc((100% - 36px) / 7.4);border-radius:10px;background:color-mix(in srgb,var(--mk-akzent) 10%,transparent);opacity:0}
@media (max-width:420px){.mk-hw-rp-zeile{font-size:12px;grid-template-columns:minmax(0,2fr) repeat(5,minmax(0,1fr))}.mk-hw-rp-zeile i{width:18px;height:18px}.mk-hw-rp-zeile i::after{left:5.5px;top:3.5px}}


/* Objekt und Rundgang */
.mk-hw-oa-innen{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,6fr);gap:16px;align-items:center;padding:16px 18px 18px}
.mk-hw-oa-wand{fill:var(--mk-karte);stroke:var(--mk-linie);stroke-width:2}
.mk-hw-oa-dach{fill:var(--mk-band)}
.mk-hw-oa-fen{fill:color-mix(in srgb,var(--mk-text) 12%,var(--mk-grund))}
.mk-hw-oa-fen:nth-of-type(3n+1){fill:color-mix(in srgb,var(--mk-knopf) 55%,#fff3c4)}
.mk-hw-oa-tuer{fill:var(--mk-band)}
.mk-hw-oa-liste{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.mk-hw-oa-liste li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;row-gap:3px;align-items:center;padding:10px 12px;border-radius:12px;background:var(--mk-karte);font-size:13px;transition:transform .25s}
.mk-hw-oa-liste i{grid-row:span 2;width:10px;height:10px;border-radius:50%;background:var(--mk-akzent);box-shadow:0 0 0 4px color-mix(in srgb,var(--mk-akzent) 18%,transparent)}
.mk-hw-oa-liste b{font-weight:600;line-height:1.25;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.mk-hw-oa-liste span{font-size:11px;color:var(--mk-leise);letter-spacing:.06em;text-transform:uppercase}
.mk-hw-oa-liste li:hover{transform:translateX(4px)}
@media (max-width:420px){.mk-hw-oa-innen{grid-template-columns:minmax(0,3fr) minmax(0,7fr);gap:10px;padding:12px}.mk-hw-oa-liste li{padding:8px 9px;font-size:12px}}

/* Winterdienst */
.mk-hw-wd-bild{position:relative;aspect-ratio:3/2;border-radius:22px;overflow:hidden;box-shadow:0 44px 80px -44px rgba(0,0,0,.55)}
.mk-hw-wd-bild svg{width:100%;height:100%}
.mk-hw-wd-s1{stop-color:color-mix(in srgb,var(--mk-band) 90%,#000)}.mk-hw-wd-s2{stop-color:color-mix(in srgb,var(--mk-band) 62%,#9fb6cc)}
.mk-hw-wd-mast{fill:none;stroke:#2a2a2e;stroke-width:5;stroke-linecap:round}.mk-hw-wd-lampe{fill:#fff3c4}
.mk-hw-wd-haus{fill:color-mix(in srgb,var(--mk-band) 55%,#000)}
.mk-hw-wd-fen{fill:color-mix(in srgb,var(--mk-knopf) 50%,#ffe9a8)}
.mk-hw-wd-dachschnee,.mk-hw-wd-schnee{fill:#f4f7fa}
.mk-hw-wd-weg{fill:color-mix(in srgb,var(--mk-text) 30%,#8f959c)}
.mk-hw-wd-kante{fill:none;stroke:#fff;stroke-width:6;stroke-linecap:round}
.mk-hw-wd-streu circle{fill:#e7dcc8;opacity:.9}
.mk-hw-wd-flocken{position:absolute;inset:0;pointer-events:none}
.mk-hw-wd-flocken i{position:absolute;left:var(--x);top:var(--y);width:calc(var(--s) * 7px);height:calc(var(--s) * 7px);border-radius:50%;background:#fff;opacity:.85}


/* Grundriss */
.mk-hw-gp svg{padding:10px 8px 6px}
.mk-hw-gp-flaeche{fill:color-mix(in srgb,var(--mk-akzent) 16%,var(--mk-grund));transition:fill .25s}
.mk-hw-gp-raum text{font-size:14px;font-weight:600}
.mk-hw-gp-haken circle{fill:var(--mk-akzent)}
.mk-hw-gp-haken path{fill:none;stroke:var(--mk-grund);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-hw-gp-wand{fill:none;stroke:var(--mk-text);stroke-width:7;stroke-linecap:square}
.mk-hw-gp-tuer{fill:none;stroke:var(--mk-text);stroke-width:1.4;opacity:.5;stroke-dasharray:3 3}
.mk-hw-gp-raum:hover .mk-hw-gp-flaeche{fill:color-mix(in srgb,var(--mk-akzent) 30%,var(--mk-grund))}

/* Ablaufplan */
.mk-hw-bz-plan{position:relative;padding:14px 16px 4px}
.mk-hw-bz-raster{position:absolute;top:14px;bottom:4px;left:calc(16px + 38%);right:16px;display:grid;grid-template-columns:repeat(6,1fr)}
.mk-hw-bz-raster span{border-left:1px dashed var(--mk-linie)}
.mk-hw-bz-zeile{position:relative;display:grid;grid-template-columns:38% minmax(0,1fr);align-items:center;min-height:46px;font-size:13px}
.mk-hw-bz-zeile b{display:flex;align-items:center;gap:8px;font-weight:600;line-height:1.25;padding-right:10px;min-width:0;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.mk-hw-bz-zeile b span{flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--mk-karte);font-size:11px}
.mk-hw-bz-spur{position:relative;height:22px}
.mk-hw-bz-spur i{position:absolute;top:0;bottom:0;border-radius:11px;background:linear-gradient(90deg,var(--mk-akzent),color-mix(in srgb,var(--mk-akzent) 70%,var(--mk-grund)));transform-origin:left;cursor:default}
.mk-hw-bz-zeile:nth-child(odd) .mk-hw-bz-spur i{background:linear-gradient(90deg,var(--mk-knopf),color-mix(in srgb,var(--mk-knopf) 70%,var(--mk-grund)))}
.mk-hw-bz-zeile>em{position:absolute;left:0;right:0;bottom:calc(100% - 2px);z-index:4;padding:9px 12px;border-radius:10px;background:var(--mk-band);color:var(--mk-band-text);
  font-style:normal;font-size:12px;line-height:1.35;box-shadow:0 12px 24px -12px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);transition:opacity .25s,transform .25s;pointer-events:none}
.mk-hw-bz-erste>em{bottom:auto;top:calc(100% - 2px);transform:translateY(-4px)}
.mk-hw-bz-zeile:hover>em{opacity:1;transform:none}
.mk-hw-bz-jetzt{position:absolute;top:8px;bottom:0;left:calc(16px + 38%);width:2px;background:var(--mk-text);opacity:0}
.mk-hw-bz-achse{display:flex;justify-content:space-between;margin:0;padding:8px 16px 14px calc(16px + 38%);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mk-leise)}

/* Auftragsblatt */
.mk-hw-ab-blatt{position:relative;padding:26px 26px 22px;border-radius:12px;background:#fff;color:#1d1d1f;box-shadow:0 40px 70px -36px rgba(0,0,0,.5),0 0 0 1px rgba(0,0,0,.06);transform:rotate(-1.5deg)}
.mk-hw-ab-blatt::before{content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:12px 12px 0 0;background:var(--mk-akzent)}
.mk-hw-ab-kopf{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding-bottom:14px;border-bottom:2px solid #1d1d1f}
.mk-hw-ab-kopf small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b6b70}
.mk-hw-ab-kopf b{display:block;font-size:18px;line-height:1.2;margin-top:3px;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.mk-hw-ab-kopf .mk-muster{flex:none;transform:rotate(5deg)}
.mk-hw-ab-spalten{display:grid;grid-template-columns:40px minmax(0,1fr) 56px;margin:10px 0 0;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b70}
.mk-hw-ab-spalten span:last-child{text-align:right}
.mk-hw-ab-blatt ol{list-style:none;margin:4px 0 0;padding:0}
.mk-hw-ab-blatt li{display:grid;grid-template-columns:40px minmax(0,1fr) 56px;align-items:center;padding:10px 0;border-bottom:1px dashed #d6d6db;font-size:14px}
.mk-hw-ab-blatt li span{color:#8a8a90;font-variant-numeric:tabular-nums}
.mk-hw-ab-blatt li b{font-weight:600;line-height:1.25;overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto}
.mk-hw-ab-blatt li svg{justify-self:end;width:24px!important;height:24px;border-radius:6px;background:color-mix(in srgb,var(--mk-akzent) 14%,#fff)}
.mk-hw-ab-blatt li path{fill:none;stroke:var(--mk-akzent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-hw-ab-fuss{display:flex;justify-content:space-between;align-items:flex-end;gap:14px;margin-top:18px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#6b6b70}
.mk-hw-ab-fuss svg{width:140px!important;border-bottom:1px solid #1d1d1f}
.mk-hw-ab-fuss path{fill:none;stroke:#1d1d1f;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;opacity:.8}

/* Scheibentausch */
.mk-hw-sc{padding-top:6px}
.mk-hw-sc-rahmen{position:relative;aspect-ratio:4/3.2;padding:18px;border-radius:12px;background:linear-gradient(180deg,#f7f7f8,#dcdde1);box-shadow:0 44px 80px -44px rgba(0,0,0,.55),inset 0 0 0 1px rgba(0,0,0,.08)}
.mk-hw-sc-glas,.mk-hw-sc-neu{position:absolute;inset:18px;border-radius:3px;overflow:hidden;box-shadow:inset 0 0 0 3px rgba(0,0,0,.12)}
.mk-hw-sc-glas{background:linear-gradient(160deg,color-mix(in srgb,var(--mk-band) 30%,#a9c6dc),color-mix(in srgb,var(--mk-band) 18%,#dbe9f3))}
.mk-hw-sc-glas svg{width:100%;height:100%}
.mk-hw-sc-riss{fill:none;stroke:#fff;stroke-width:1.8;stroke-linecap:round;opacity:.9}
.mk-hw-sc-punkt{fill:#fff}
.mk-hw-sc-neu{background:linear-gradient(160deg,color-mix(in srgb,var(--mk-band) 20%,#bcd6ea),color-mix(in srgb,var(--mk-band) 8%,#eef5fa))}
.mk-hw-sc-licht{position:absolute;top:-20%;bottom:-20%;left:12%;width:22%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent);transform:skewX(-18deg)}
.mk-hw-sc-sprosse{position:absolute;left:50%;top:18px;bottom:18px;width:12px;margin-left:-6px;background:linear-gradient(90deg,#e9e9ec,#cfd0d5);box-shadow:0 0 0 1px rgba(0,0,0,.06)}
.mk-hw-sc-bank{display:block;height:16px;margin:0 -14px;border-radius:4px;background:linear-gradient(180deg,#e6e7ea,#bfc1c6);box-shadow:0 14px 20px -12px rgba(0,0,0,.45)}

/* ── Bewegung ─────────────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  /* Farbrolle: drei Bahnen nacheinander, die Rolle fährt mit, danach läuft ein nasser Glanz über die Wand */
  .mk-hw-fr-bahn{animation:mk-hw-wachsen-y 1.8s cubic-bezier(.45,0,.4,1) both;animation-delay:calc(var(--k) * 2s + .5s)}
  .mk-hw-fr-rolle{animation:mk-hw-fr-rolle 6.6s linear .5s both}
  .mk-hw-fr-nass{animation:mk-hw-glanz 9s ease-in-out 6.8s infinite}
  /* Wandaufbau: die Schichten fahren aus dem Stapel auseinander, dann tragen sie ihre Namen */
  .mk-hw-ws-lage{animation:mk-hw-ws-auf 1.6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .32s + .4s)}
  .mk-hw-ws-schild{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .32s + 1.6s)}
  /* Wasserwaage: kippt, die Blase pendelt sich ein */
  .mk-hw-ww-latte{animation:mk-hw-ww-kipp 2.4s cubic-bezier(.3,0,.3,1) .5s both}
  .mk-hw-ww-blase{animation:mk-hw-ww-blase 2.4s cubic-bezier(.3,0,.3,1) .5s both}
  .mk-hw-ww-anzeige b{animation:mk-hw-blinken 1.2s steps(2) .5s 2 both}
  /* Tapete: dritte Bahn rollt ab, die Rolle wandert hinunter in die Ecke */
  .mk-hw-tp-bahn{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .3s)}
  .mk-hw-tp-bahn:nth-child(3){animation:mk-hw-wachsen-y 2.4s cubic-bezier(.45,0,.3,1) 1.1s both}
  .mk-hw-tp-rolle{animation:mk-hw-tp-rolle 3.4s cubic-bezier(.45,0,.3,1) 1.1s both}
  /* Spachtel: die Kelle zieht, dahinter wird es glatt */
  .mk-hw-sp-glatt{animation:mk-hw-sp-glatt 2.5s cubic-bezier(.45,0,.3,1) .5s both}
  .mk-hw-sp-kelle{animation:mk-hw-sp-kelle 2.5s cubic-bezier(.45,0,.3,1) .5s both}
  /* Stuck: Ringe und Blätter zeichnen sich, das Profil folgt */
  .mk-hw-st-ring,.mk-hw-st-blatt,.mk-hw-st-pfad{stroke-dasharray:1;animation:mk-hw-zeichnen 2.4s cubic-bezier(.65,0,.35,1) both}
  .mk-hw-st-ring--2{animation-delay:.35s}.mk-hw-st-blatt{animation-duration:2.5s;animation-delay:.7s}.mk-hw-st-ring--3{animation-delay:1.1s}
  .mk-hw-st-pfad{animation-delay:1.5s}
  .mk-hw-st-kern{transform-box:fill-box;transform-origin:center;animation:mk-hw-an 1.2s cubic-bezier(.34,1.5,.64,1) 2.2s both}
  .mk-hw-st-rosette{animation:mk-hw-schweben 8s ease-in-out 3.2s infinite alternate}
  /* Gerüst: Lage für Lage von unten, dann füllt sich die Fassade */
  .mk-hw-gr-stangen path{stroke-dasharray:260;animation:mk-hw-strich 1.6s cubic-bezier(.65,0,.35,1) .3s both}
  .mk-hw-gr-lage{animation:mk-hw-gr-lage 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .38s + .9s)}
  .mk-hw-gr-farbe{animation:mk-hw-wachsen-y-unten 2.5s cubic-bezier(.45,0,.3,1) 2.6s both}
  /* Aufmaß: Maßketten zeichnen sich nacheinander, zuletzt die Fläche */
  .mk-hw-am-mass path{stroke-dasharray:1;animation:mk-hw-zeichnen 1.4s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--k) * .4s + .5s)}
  .mk-hw-am-mass text{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .4s + 1.2s)}
  .mk-hw-am-flaeche{animation:mk-hw-ein 1.4s cubic-bezier(.34,1.4,.64,1) 2.6s both}
  /* Feuchtemesser: Ziffern rollen, Segmente laufen auf, das Gerät drückt sanft an die Wand */
  .mk-hw-fm-rolle{animation:mk-hw-fm-rolle 2.2s cubic-bezier(.2,.7,.2,1) .5s both}
  .mk-hw-fm-rolle+em+.mk-hw-fm-rolle{animation-delay:.75s}
  .mk-hw-fm-skala i{animation:mk-hw-fm-seg 1.2s ease both;animation-delay:calc(var(--k) * .12s + .5s)}
  /* Trockner: Luft strömt, Tropfen fallen, der Pegel steigt */
  .mk-hw-tr-luft{animation:mk-hw-luft 6s linear infinite;animation-delay:calc(var(--k) * -1.4s)}
  .mk-hw-tr-tropfen{animation:mk-hw-tropfen 3.2s cubic-bezier(.55,0,1,.45) 1s infinite}
  .mk-hw-tr-wasser{animation:mk-hw-pegel 12s ease-in-out infinite alternate}
  .mk-hw-tr-lam{animation:mk-hw-lam 5s ease-in-out infinite alternate}
  /* Wärmebild: Abtastlinie läuft, der Messpunkt pulst */
  .mk-hw-wb-scan{animation:mk-hw-scan 6s cubic-bezier(.65,0,.35,1) .6s infinite}
  .mk-hw-wb-kreuz{animation:mk-hw-wb-ziel 2.4s cubic-bezier(.16,1,.3,1) .4s both}
  .mk-hw-wb-kreuz i{animation:mk-hw-ring 2.6s ease-out 2.8s infinite}
  .mk-hw-wb-fleck{animation:mk-hw-atmen 7s ease-in-out infinite alternate}
  .mk-hw-wb-wert{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) 2.4s both}
  /* Trocknungsverlauf: Linie zeichnet sich, Punkte setzen sich, das Ende pulst */
  .mk-hw-tk-linie{stroke-dasharray:1;animation:mk-hw-zeichnen 2.5s cubic-bezier(.65,0,.35,1) .5s both}
  .mk-hw-tk-flaeche,.mk-hw-tk-ziel{animation:mk-hw-blende 1.6s ease 1.8s both}
  .mk-hw-tk-p{animation:mk-hw-an 1.2s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--k) * .3s + .5s)}
  .mk-hw-tk-ende{animation:mk-hw-ring 2.8s ease-out 3.2s infinite}
  /* Vorher und nachher: der Trenner wandert, beim Darüberfahren hält er an */
  .mk-hw-vn-vor{animation:mk-hw-vn-clip 11s cubic-bezier(.65,0,.35,1) .6s infinite}
  .mk-hw-vn-trenner{animation:mk-hw-vn-trenner 11s cubic-bezier(.65,0,.35,1) .6s infinite}
  .mk-hw-vn:hover .mk-hw-vn-vor,.mk-hw-vn:hover .mk-hw-vn-trenner{animation-play-state:paused}
  /* Wochenplan: Haken Tag für Tag, ein heller Balken markiert den Tag */
  .mk-hw-rp-zeile i{animation:mk-hw-an 1.2s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--k) * .12s + .5s)}
  .mk-hw-rp-heute{animation:mk-hw-rp-heute 12s cubic-bezier(.65,0,.35,1) 3s infinite}
  /* Objekt: Fenster leuchten nacheinander, die Liste hakt ab */
  .mk-hw-oa-fen{animation:mk-hw-licht 10s ease-in-out infinite;animation-delay:calc(var(--k) * .6s)}
  .mk-hw-oa-liste li{animation:mk-hw-ein 1.3s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .35s + .5s)}
  .mk-hw-oa-liste span{animation:mk-hw-blende 1.2s ease both;animation-delay:calc(var(--k) * .35s + 1.4s)}
  /* Winterdienst: Schnee fällt, der Weg wird frei, Streugut setzt sich */
  .mk-hw-wd-flocken i{animation:mk-hw-flocke calc(9s / var(--s)) linear infinite;animation-delay:calc(var(--d) * -1)}
  .mk-hw-wd-weg{animation:mk-hw-wd-weg 2.5s cubic-bezier(.45,0,.3,1) .6s both}
  .mk-hw-wd-streu{animation:mk-hw-blende 1.6s ease 2.8s both}
  /* Grundriss: Raum für Raum erledigt */
  .mk-hw-gp-flaeche{animation:mk-hw-blende 1.2s ease both;animation-delay:calc(var(--k) * .4s + .5s)}
  .mk-hw-gp-haken{animation:mk-hw-blende 1.2s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--k) * .4s + .9s)}
  .mk-hw-gp-wand{stroke-dasharray:3200;animation:mk-hw-strich-lang 2.4s cubic-bezier(.65,0,.35,1) both}
  /* Ablaufplan: Balken wachsen nacheinander, die Jetzt-Linie wandert */
  .mk-hw-bz-spur i{animation:mk-hw-wachsen-x 1.4s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .4s + .5s)}
  .mk-hw-bz-zeile b{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .3s)}
  .mk-hw-bz-jetzt{animation:mk-hw-bz-jetzt 12s cubic-bezier(.65,0,.35,1) 2.6s infinite}
  /* Auftragsblatt: Positionen erscheinen, Haken und Unterschrift zeichnen sich */
  .mk-hw-ab-blatt li{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .4s)}
  .mk-hw-ab-blatt li path{stroke-dasharray:1;animation:mk-hw-zeichnen 1.2s ease both;animation-delay:calc(var(--k) * .35s + 1.4s)}
  .mk-hw-ab-fuss path{stroke-dasharray:1;animation:mk-hw-zeichnen 2.2s cubic-bezier(.65,0,.35,1) 3.2s both}
  .mk-hw-ab-kopf .mk-muster{animation:mk-hw-stempel 1.2s cubic-bezier(.34,1.6,.64,1) 4.4s both}
  /* Scheibentausch: gesprungen, neue Scheibe gleitet ein, Licht läuft darüber */
  .mk-hw-sc-neu{animation:mk-hw-sc-neu 12s cubic-bezier(.65,0,.35,1) infinite}
  .mk-hw-sc-licht{animation:mk-hw-sc-licht 12s cubic-bezier(.65,0,.35,1) infinite}
  .mk-hw-sc-riss{stroke-dasharray:240;animation:mk-hw-sc-riss 12s ease infinite}
}
@keyframes mk-hw-wachsen-y{from{transform:scaleY(0)}to{transform:none}}
@keyframes mk-hw-wachsen-y-unten{from{transform:scaleY(0)}to{transform:none}}
@keyframes mk-hw-wachsen-x{from{transform:scaleX(0)}to{transform:none}}
@keyframes mk-hw-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes mk-hw-blende{from{opacity:0}to{opacity:1}}
@keyframes mk-hw-an{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:none}}
@keyframes mk-hw-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mk-hw-strich{from{stroke-dashoffset:260}to{stroke-dashoffset:0}}
@keyframes mk-hw-strich-lang{from{stroke-dashoffset:3200}to{stroke-dashoffset:0}}
@keyframes mk-hw-ring{0%{transform:scale(.8);opacity:.7}100%{transform:scale(1.9);opacity:0}}
@keyframes mk-hw-schweben{from{transform:translateY(-4px) rotate(-1deg)}to{transform:translateY(4px) rotate(1deg)}}
@keyframes mk-hw-glanz{0%,55%{left:-40%;opacity:0}60%{opacity:1}90%,100%{left:120%;opacity:0}}
@keyframes mk-hw-stempel{from{opacity:0;transform:rotate(5deg) scale(1.9)}to{opacity:1;transform:rotate(5deg)}}
@keyframes mk-hw-fr-rolle{
  0%{left:1.6%;top:-12%;animation-timing-function:cubic-bezier(.45,0,.4,1)}27.3%{left:1.6%;top:78%;animation-timing-function:ease-in-out}
  30.3%{left:35%;top:-12%;animation-timing-function:cubic-bezier(.45,0,.4,1)}57.6%{left:35%;top:78%;animation-timing-function:ease-in-out}
  60.6%{left:68.4%;top:-12%;animation-timing-function:cubic-bezier(.45,0,.4,1)}87.9%{left:68.4%;top:78%;animation-timing-function:cubic-bezier(.16,1,.3,1)}100%{left:68.4%;top:46%}}
@keyframes mk-hw-ws-auf{from{opacity:0;transform:translateY(calc(var(--k) * 30px + 30px))}to{opacity:1;transform:none}}
@keyframes mk-hw-ww-kipp{0%{transform:rotate(-4deg)}30%{transform:rotate(2.4deg)}52%{transform:rotate(-1.2deg)}70%{transform:rotate(.6deg)}85%{transform:rotate(-.2deg)}100%{transform:none}}
@keyframes mk-hw-ww-blase{0%{transform:translateX(-40px)}30%{transform:translateX(28px)}52%{transform:translateX(-14px)}70%{transform:translateX(7px)}85%{transform:translateX(-2px)}100%{transform:none}}
@keyframes mk-hw-blinken{0%{opacity:.25}100%{opacity:1}}
@keyframes mk-hw-tp-rolle{0%{right:36%;bottom:88%;transform:rotate(90deg)}70%{right:36%;bottom:12%;transform:rotate(90deg) scale(.85)}100%{right:4%;bottom:12%;transform:rotate(-8deg)}}
@keyframes mk-hw-sp-glatt{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 22% 0 0)}}
@keyframes mk-hw-sp-kelle{from{left:-9%}to{left:69.2%}}
@keyframes mk-hw-gr-lage{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
@keyframes mk-hw-fm-rolle{from{transform:translateY(-9em)}to{transform:translateY(calc(var(--z) * -1em))}}
@keyframes mk-hw-fm-seg{0%{opacity:.2}40%{opacity:1;background:#14200f}100%{opacity:1}}
@keyframes mk-hw-fm-druck{0%,100%{transform:none}50%{transform:translateY(-6px)}}
@keyframes mk-hw-luft{to{stroke-dashoffset:-216}}
@keyframes mk-hw-tropfen{0%{opacity:0;transform:translateY(0)}15%{opacity:1}80%{opacity:1;transform:translateY(56px)}90%,100%{opacity:0;transform:translateY(60px)}}
@keyframes mk-hw-pegel{from{transform:scaleY(.55)}to{transform:none}}
@keyframes mk-hw-lam{from{opacity:.14}to{opacity:.3}}
@keyframes mk-hw-scan{0%{top:0;opacity:0}8%{opacity:1}80%{opacity:1}92%,100%{top:100%;opacity:0}}
@keyframes mk-hw-wb-ziel{from{opacity:0;transform:translate(-60px,-40px) scale(1.4)}to{opacity:1;transform:none}}
@keyframes mk-hw-atmen{from{transform:scale(.94);opacity:.85}to{transform:scale(1.06);opacity:1}}
@keyframes mk-hw-vn-clip{0%,8%{clip-path:inset(0 50% 0 0)}30%,40%{clip-path:inset(0 10% 0 0)}64%,74%{clip-path:inset(0 88% 0 0)}96%,100%{clip-path:inset(0 50% 0 0)}}
@keyframes mk-hw-vn-trenner{0%,8%{left:50%}30%,40%{left:90%}64%,74%{left:12%}96%,100%{left:50%}}
@keyframes mk-hw-rp-heute{0%{opacity:0;transform:translateX(0)}6%{opacity:1}18%,20%{transform:translateX(0)}36%,38%{transform:translateX(100%)}54%,56%{transform:translateX(200%)}72%,74%{transform:translateX(300%)}88%,92%{transform:translateX(400%);opacity:1}100%{transform:translateX(400%);opacity:0}}
@keyframes mk-hw-licht{0%,100%{opacity:1}40%,60%{opacity:.35}}
@keyframes mk-hw-flocke{from{transform:translateY(-40px)}to{transform:translateY(340px)}}
@keyframes mk-hw-wd-weg{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@keyframes mk-hw-bz-jetzt{0%{left:calc(16px + 38%);opacity:0}8%{opacity:.6}85%{opacity:.6}100%{left:calc(100% - 16px);opacity:0}}
@keyframes mk-hw-sc-neu{0%,8%{transform:translateX(0)}20%,46%{transform:translateX(108%)}62%,100%{transform:translateX(0)}}
@keyframes mk-hw-sc-licht{0%,64%{left:-40%}84%,100%{left:120%}}
@keyframes mk-hw-sc-riss{0%,20%{stroke-dashoffset:240}36%,100%{stroke-dashoffset:0}}
@media (max-width:420px){
  .mk-hw-bz-zeile{grid-template-columns:46% minmax(0,1fr)}
  .mk-hw-bz-zeile{font-size:12px}.mk-hw-bz-raster{left:calc(16px + 46%)}.mk-hw-bz-achse{padding-left:calc(16px + 46%)}
  .mk-hw-bz-jetzt{left:calc(16px + 46%)}
  .mk-hw-rp-tabelle{padding:6px 10px 12px}.mk-hw-rp-zeile{grid-template-columns:repeat(5,minmax(0,1fr));row-gap:8px;font-size:12.5px}
  .mk-hw-rp-zeile>b{grid-column:1/-1}.mk-hw-rp-zeile--kopf>span:first-child{display:none}
  .mk-hw-rp-heute{display:none}
}

/* Gegenprüfung 09.11.2026 */
.mk-hw-sp-skala{padding:14px 18px 16px;font-size:12px;color:var(--mk-leise)}
.mk-hw-sp-skala>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:8px}
.mk-hw-sp-skala span{display:block;padding:8px 8px 9px;border-radius:10px;background:var(--mk-karte);color:var(--mk-text);font-size:11.5px;line-height:1.3;
  background-image:linear-gradient(90deg,var(--mk-akzent) calc((var(--k) + 1) * 25%),transparent 0);background-size:100% 3px;background-repeat:no-repeat;background-position:0 100%}
.mk-hw-sp-skala span b{display:block;font-size:13px;margin-bottom:2px}
@media (max-width:420px){.mk-hw-sp-skala>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Feuchtemesser: Wand links, Messspitzen greifen seitlich hinein, Anzeige aufrecht */
.mk-hw-fm-buehne{width:100%;display:flex;align-items:flex-start;justify-content:center;gap:0;padding:6px 0}
.mk-hw-fm-wand{flex:none;align-self:stretch;width:22%;min-height:300px;border-radius:14px 4px 4px 14px;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(0,0,0,.05) 0 1px,transparent 1px 44px),
  color-mix(in srgb,var(--mk-text) 14%,var(--mk-grund));box-shadow:inset -10px 0 16px -12px rgba(0,0,0,.35)}
.mk-hw-fm-geraet{flex:none;position:relative;width:min(230px,64%);margin:44px 0 0 38px;padding:20px 16px 18px;border-radius:30px 30px 40px 40px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--mk-band) 88%,#fff),var(--mk-band) 30%,color-mix(in srgb,var(--mk-band) 80%,#000));
  box-shadow:0 40px 70px -36px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,255,255,.08)}
.mk-hw-fm-kopfteil{position:absolute;left:-30px;top:26px;width:34px;height:52px;border-radius:12px 0 0 12px;background:color-mix(in srgb,var(--mk-band) 80%,#000)}
.mk-hw-fm-spitze{position:absolute;right:100%;top:12px;width:12px;height:6px;border-radius:3px 1px 1px 3px;background:linear-gradient(180deg,#e6e8ec,#8b9098)}
.mk-hw-fm-spitze--2{top:34px}
.mk-hw-fm-tasten{display:flex;justify-content:center;gap:14px;margin-top:16px}
.mk-hw-fm-tasten i{width:36px;height:14px;border-radius:7px;background:rgba(255,255,255,.16)}
.mk-hw-fm-tasten i:nth-child(2){width:46px;background:var(--mk-knopf)}
@media (max-width:420px){.mk-hw-fm-wand{width:18%;min-height:260px}.mk-hw-fm-geraet{margin-left:32px;width:70%;padding:16px 12px}.mk-hw-fm-wert{font-size:44px}}
/* Wärmebild in Wärmebildfarben (wie ein echtes Gerät, Gegenprüfung 09.11.2026) */
.mk-hw-wb-bild{position:relative;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:linear-gradient(180deg,#14093a,#2b0f5e 60%,#1c0b47)}
.mk-hw-wb-kalt{position:absolute;inset:0;background:radial-gradient(120% 70% at 85% 0%,rgba(90,40,170,.55),transparent 60%),radial-gradient(80% 60% at 0% 100%,rgba(10,30,120,.6),transparent 70%)}
.mk-hw-wb-rohr{position:absolute;left:-10%;right:-10%;top:58%;height:16%;filter:blur(10px);background:linear-gradient(90deg,rgba(214,36,110,.7),#ff7a1a 50%,rgba(214,36,110,.7))}
.mk-hw-wb-fleck{position:absolute;left:36%;top:34%;width:38%;aspect-ratio:1;border-radius:46% 54% 50% 48%;filter:blur(8px);
  background:radial-gradient(circle,#fff 0 8%,#ffe14d 18%,#ff8a00 36%,#d6246e 58%,rgba(90,26,156,.6) 70%,transparent 76%)}
.mk-hw-wb-skala{position:absolute;right:14px;top:14%;bottom:14%;width:10px;border-radius:5px;background:linear-gradient(180deg,#fff,#ffe14d 18%,#ff8a00 38%,#d6246e 58%,#5a1a9c 78%,#14093a)}
/* Vorher und nachher: Schilder über beiden Ebenen, Griff mit Pfeilen nach links und rechts, Flecken weich und unregelmäßig */
.mk-hw-vn-schild{position:absolute;bottom:16px;z-index:3;padding:6px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.mk-hw-vn-schild--vor{left:16px;background:rgba(0,0,0,.6);color:#fff}
.mk-hw-vn-schild--nach{right:16px;background:var(--mk-knopf);color:var(--mk-knopf-text)}
.mk-hw-vn-trenner b{position:absolute;top:50%;left:50%;width:46px;height:46px;margin:-23px;border-radius:50%;background:#fff;box-shadow:0 8px 20px -6px rgba(0,0,0,.4)}
.mk-hw-vn-trenner b::before,.mk-hw-vn-trenner b::after{content:"";position:absolute;top:50%;margin-top:-6px;border:6px solid transparent}
.mk-hw-vn-trenner b::before{left:7px;border-right:8px solid var(--mk-text);border-left:0}
.mk-hw-vn-trenner b::after{right:7px;border-left:8px solid var(--mk-text);border-right:0}
.mk-hw-vn-vor i{position:absolute;filter:blur(7px);background:radial-gradient(closest-side,rgba(0,0,0,.16),rgba(0,0,0,.09) 60%,transparent)}
.mk-hw-vn-vor i:nth-child(1){left:6%;top:4%;width:40%;aspect-ratio:1.4;border-radius:58% 42% 63% 37%/45% 58% 42% 55%;transform:rotate(-8deg)}
.mk-hw-vn-vor i:nth-child(2){left:20%;top:48%;width:26%;aspect-ratio:1.1;border-radius:40% 60% 45% 55%/60% 40% 60% 40%}
.mk-hw-vn-vor i:nth-child(3){left:3%;top:64%;width:18%;aspect-ratio:1;border-radius:45%;filter:none;background:radial-gradient(circle,rgba(0,0,0,.32) 0 1.5px,transparent 2.5px) 0 0/9px 8px}
.mk-hw-vn-vor i:nth-child(4){left:34%;top:10%;width:14%;aspect-ratio:1;border-radius:50%;filter:none;background:radial-gradient(circle,rgba(0,0,0,.28) 0 1.5px,transparent 2.5px) 0 0/8px 9px}
.mk-hw-vn--rein .mk-hw-vn-vor i{border-radius:50%;filter:blur(6px);background:radial-gradient(ellipse,rgba(0,0,0,.16),transparent 70%)}
/* Aufmaß */
.mk-hw-am-klein{font-size:12px;text-anchor:middle;fill:var(--mk-leise)!important}
.mk-hw-am-hinweis{font-size:12px;text-anchor:middle;fill:var(--mk-leise)!important}
@media (prefers-reduced-motion:no-preference){
  .mk-hw-fm-geraet{animation:mk-hw-fm-schub 7s ease-in-out 3s infinite}
  .mk-hw-sp-skala span{animation:mk-hw-ein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + 2.4s)}
}
@keyframes mk-hw-fm-schub{0%,100%{transform:none}50%{transform:translateX(-5px)}}
/* ★ Kfz-Mockups (mockups_mehr/kfz.py, Mert 09.11.2026: „Inventar vergrößern“). Grundzustand = fertiges Bild,
   Bewegung nur unter prefers-reduced-motion: no-preference. Farben nur über die --mk-Tokens. */
.mk-kfz{position:relative;contain:inline-size;width:min(460px,100%);max-width:100%;margin:0 auto;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;color:var(--mk-text);box-sizing:border-box}
.mk-kfz *,.mk-kfz *::before,.mk-kfz *::after{box-sizing:border-box}
.mk-kfz svg{display:block;width:100%;height:auto;overflow:visible}
.mk-kfz-karte{padding:20px 20px 22px;border-radius:24px;background:var(--mk-grund);box-shadow:0 40px 80px -42px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie)}
.mk-kfz-kopf{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:0 0 14px;font-size:14px;line-height:1.3}
.mk-kfz-kopf b{font-weight:600;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kfz-kopf small{flex:none;color:var(--mk-leise);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.mk-kfz .mk-muster{flex:none}
.mk-kfz-chips{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mk-kfz-chips li{display:inline-flex;align-items:center;gap:8px;padding:7px 13px;border-radius:999px;background:var(--mk-karte);font-size:13px;line-height:1.25;transition:background-color .25s,color .25s}
.mk-kfz-chips li i{flex:none;width:7px;height:7px;border-radius:50%;background:var(--mk-akzent)}
.mk-kfz-chips li:hover{background:var(--mk-knopf);color:var(--mk-knopf-text)}
.mk-kfz-chips li:hover i{background:currentColor}
.mk-kfz-marke{position:absolute;left:16px;bottom:16px;padding:7px 14px;border-radius:999px;background:var(--mk-grund);color:var(--mk-text);font-size:13px;font-weight:600;box-shadow:0 10px 24px -12px rgba(0,0,0,.45);max-width:calc(100% - 32px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* Auto in Seitenansicht */
.mk-kfz-auto-koerper{fill:var(--mk-karte);stroke:var(--mk-text);stroke-width:2.2;stroke-linejoin:round}
.mk-kfz-auto-fenster{fill:color-mix(in srgb,var(--mk-band) 26%,transparent);stroke:var(--mk-text);stroke-width:1.4;stroke-linejoin:round}
.mk-kfz-auto-naht{fill:none;stroke:var(--mk-text);stroke-width:1.2;opacity:.3}
.mk-kfz-rad{fill:#1d1d20}.mk-kfz-nabe{fill:#c9ccd2}

/* Hebebühne */
.mk-kfz-hb-kegel{fill:var(--mk-akzent);opacity:.07}
.mk-kfz-hb-boden{stroke:var(--mk-linie);stroke-width:2}
.mk-kfz-hb-schatten{fill:#000;opacity:.1}
.mk-kfz-hb-saeule,.mk-kfz-hb-fuss{fill:color-mix(in srgb,var(--mk-text) 26%,var(--mk-grund))}
.mk-kfz-hb-schlitten,.mk-kfz-hb-teller{fill:var(--mk-knopf)}
.mk-kfz-hb-arm{fill:color-mix(in srgb,var(--mk-text) 44%,var(--mk-grund))}

/* Profiltiefe */
.mk-kfz-rp-lamelle{stroke:#55555c;stroke-width:3;stroke-linecap:round}
.mk-kfz-rp-grenze{stroke:#fff;stroke-width:2;stroke-dasharray:4 3}
.mk-kfz-rp-grenztext{fill:#fff;font:600 13px 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
.mk-kfz-rp-koerper,.mk-kfz-rp-fuss{fill:var(--mk-band)}
.mk-kfz-rp-schirm{fill:#d3e4d3}
.mk-kfz-rp-wert{fill:#132013;font:600 22px ui-monospace,Menlo,Consolas,monospace;text-anchor:middle}
.mk-kfz-rp-steg{fill:#9a9ca3}.mk-kfz-rp-stift{fill:#c9ccd2}

/* Auftragszettel */
.mk-kfz-schein{width:min(400px,100%);padding:6px 10px 16px}
.mk-kfz-schein-kopie{position:absolute;inset:16px 2px 4px 20px;border-radius:14px;background:color-mix(in srgb,var(--mk-akzent) 10%,#fffdf6);transform:rotate(3deg);box-shadow:0 20px 40px -30px rgba(0,0,0,.5)}
.mk-kfz-schein-blatt{position:relative;padding:26px 24px 20px;border-radius:14px;background:#fff;color:#1d1d1f;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);transform:rotate(-1.5deg)}
.mk-kfz-schein-blatt::before{content:"";position:absolute;left:18px;right:18px;top:9px;height:2px;background:repeating-linear-gradient(90deg,#d6d6db 0 6px,transparent 6px 11px)}
.mk-kfz-schein-kopf{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:12px;align-items:center;margin-bottom:14px}
.mk-kfz-schein-zeichen{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;background:var(--mk-knopf);color:var(--mk-knopf-text);font-weight:700;font-size:18px;overflow:hidden}
.mk-kfz-schein-kopf b{display:block;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:17px;line-height:1.2}
.mk-kfz-schein-kopf small{display:block;color:#6b6b70;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kfz-schein-felder{display:grid;gap:9px;padding:12px 0;border-top:1px solid #ececef;border-bottom:1px solid #ececef}
.mk-kfz-schein-felder p{margin:0;display:grid;grid-template-columns:88px 1fr;align-items:center;font-size:12px;color:#6b6b70}
.mk-kfz-schein-felder i{display:block;height:7px;border-radius:4px;background:#e4e4e8;width:var(--b);transform-origin:left}
.mk-kfz-schein-unter{margin:14px 0 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#6b6b70}
.mk-kfz-schein-blatt ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mk-kfz-schein-blatt li{display:flex;gap:10px;align-items:center;padding:6px 8px;margin:0 -8px;border-radius:8px;font-size:14px;line-height:1.3;transition:background-color .25s}
.mk-kfz-schein-blatt li:hover{background:color-mix(in srgb,var(--mk-akzent) 10%,#fff)}
.mk-kfz-schein-blatt li svg{flex:none;width:22px;height:22px}
.mk-kfz-schein-blatt li rect{fill:none;stroke:#c4c4ca;stroke-width:1.6}
.mk-kfz-schein-blatt li path{fill:none;stroke:var(--mk-akzent);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.mk-kfz-schein-fuss{margin-top:14px;width:58%}
.mk-kfz-schein-fuss svg{height:34px}
.mk-kfz-schein-fuss path{fill:none;stroke:#1d1d1f;stroke-width:1.8;stroke-linecap:round}
.mk-kfz-schein-fuss small{display:block;border-top:1px solid #d0d0d5;padding-top:4px;color:#8a8a90;font-size:11px}

/* Drehzahlmesser */
.mk-kfz-dz{width:min(340px,100%);display:grid;justify-items:center;gap:16px}
.mk-kfz-dz-uhr{position:relative;width:100%;border-radius:50%;box-shadow:0 40px 80px -36px rgba(0,0,0,.6)}
.mk-kfz-dz-grund{fill:var(--mk-band);stroke:color-mix(in srgb,var(--mk-band-text) 16%,transparent);stroke-width:3}
.mk-kfz-dz-gross{stroke:var(--mk-band-text);stroke-width:3.2;stroke-linecap:round}
.mk-kfz-dz-klein{stroke:var(--mk-band-text);stroke-width:1.4;opacity:.5}
.mk-kfz-dz-zahl{fill:var(--mk-band-text);font:600 17px 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-anchor:middle}
.mk-kfz-dz-rot{fill:none;stroke:var(--mk-knopf);stroke-width:7;stroke-linecap:round}
.mk-kfz-dz-einheit{fill:var(--mk-band-text);opacity:.55;font:500 10px 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-anchor:middle;letter-spacing:.06em}
.mk-kfz-dz-nadel{transform-origin:150px 150px;transform:rotate(-52deg)}
.mk-kfz-dz-nadel path{fill:var(--mk-knopf);stroke:var(--mk-band-text);stroke-width:.8;stroke-opacity:.5}
.mk-kfz-dz-mitte{fill:var(--mk-band);stroke:var(--mk-band-text);stroke-width:2}
.mk-kfz-dz-anzeige{position:absolute;left:24%;right:24%;top:61%;text-align:center;color:var(--mk-band-text)}
.mk-kfz-dz-anzeige small{display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;opacity:.65;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mk-kfz-dz-anzeige b{display:grid;margin-top:4px;font-size:14px;font-weight:600;line-height:1.25}
.mk-kfz-dz-anzeige b span{grid-area:1/1;opacity:0}.mk-kfz-dz-anzeige b span:first-child{opacity:1}

/* Kalibrierung */
.mk-kfz-kal-boden{stroke:var(--mk-linie);stroke-width:2}
.mk-kfz-kal-dach{stroke:var(--mk-text);stroke-width:6;stroke-linecap:round}
.mk-kfz-kal-glas{stroke:color-mix(in srgb,var(--mk-band) 30%,#bcd3e0);stroke-width:9;stroke-linecap:round}
.mk-kfz-kal-kamera{fill:#1d1d20}.mk-kfz-kal-linse{fill:var(--mk-akzent)}
.mk-kfz-kal-kegel{fill:var(--mk-akzent);opacity:.1}
.mk-kfz-kal-strahl{fill:none;stroke:var(--mk-akzent);stroke-width:1.5;stroke-dasharray:5 5;opacity:.7}
.mk-kfz-kal-tafel{fill:#fff;stroke:var(--mk-linie);stroke-width:2}
.mk-kfz-kal-staender{fill:none;stroke:var(--mk-text);stroke-width:4;stroke-linecap:round}
.mk-kfz-kal-ziel circle{fill:none;stroke:var(--mk-akzent);stroke-width:3}.mk-kfz-kal-ziel path{stroke:var(--mk-akzent);stroke-width:2}
.mk-kfz-kal-haken{fill:none;stroke:var(--mk-akzent);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.mk-kfz-kal-leiste{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;margin-top:10px}
.mk-kfz-kal-leiste small{font-size:12px;color:var(--mk-leise)}
.mk-kfz-kal-leiste i{position:relative;height:8px;border-radius:4px;background:var(--mk-karte);overflow:hidden}
.mk-kfz-kal-leiste i::after{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:var(--mk-text);opacity:.35}
.mk-kfz-kal-leiste b{position:absolute;left:46%;width:8%;top:0;bottom:0;border-radius:4px;background:var(--mk-akzent)}

/* Serviceanhänger am Spiegel */
.mk-kfz-oel{width:min(400px,100%);height:440px;border-radius:26px;overflow:hidden;background:linear-gradient(180deg,var(--mk-band) 0 44px,color-mix(in srgb,var(--mk-band) 12%,#e8eff3) 44px);box-shadow:0 40px 80px -40px rgba(0,0,0,.5),0 0 0 1px var(--mk-linie)}
.mk-kfz-oel-himmel{position:absolute;left:50%;top:0;width:16px;height:52px;margin-left:-8px;background:#2a2b30;border-radius:0 0 6px 6px}
.mk-kfz-oel-spiegel{position:absolute;left:50%;top:44px;width:200px;height:62px;margin-left:-100px;border-radius:20px;background:#1b1b1e;box-shadow:0 16px 28px -14px rgba(0,0,0,.6)}
.mk-kfz-oel-spiegel i{position:absolute;inset:6px;border-radius:15px;background:linear-gradient(160deg,rgba(255,255,255,.4),transparent 45%),linear-gradient(180deg,color-mix(in srgb,var(--mk-band) 40%,#9fb2c2),#58626d)}
.mk-kfz-oel-pendel{position:absolute;left:50%;top:94px;width:232px;margin-left:-116px;transform-origin:50% 0;filter:drop-shadow(0 18px 20px rgba(0,0,0,.22))}
.mk-kfz-oel-schnur{width:2px;height:34px;margin:0 auto;background:#a8a8ae}
.mk-kfz-oel-zettel{position:relative;padding:28px 20px 16px;border-radius:14px;background:#fff;color:#1d1d1f}
.mk-kfz-oel-loch{position:absolute;top:10px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#e4e8ec;box-shadow:inset 0 0 0 2px #cfd3d8}
.mk-kfz-oel-titel{margin:0 0 10px;text-align:center;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:18px;font-weight:700}
.mk-kfz-oel-feld{margin:0;display:grid;grid-template-columns:56px 1fr;align-items:end;gap:8px;padding:6px 0;border-bottom:1px dashed #d9d9de;min-height:34px}
.mk-kfz-oel-feld small{color:#6b6b70;font-size:12px}
.mk-kfz-oel-feld svg{height:22px}
.mk-kfz-oel-feld path{fill:none;stroke:var(--mk-akzent);stroke-width:2;stroke-linecap:round}
.mk-kfz-oel-feld b{font-size:14px;font-weight:600;overflow-wrap:anywhere}
.mk-kfz-oel-fuss{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:12px;font-size:12.5px}
.mk-kfz-oel-fuss small{color:#6b6b70}.mk-kfz-oel-fuss .mk-muster{margin-left:auto}

/* Prüfplakette */
.mk-kfz-pl-rahmen{border-radius:20px;overflow:hidden;background:#fff;box-shadow:0 40px 80px -40px rgba(0,0,0,.55)}
.mk-kfz-pl-schild{fill:#fff;stroke:#111;stroke-width:8}
.mk-kfz-pl-eu{fill:#1f45b5}
.mk-kfz-pl-d{fill:#fff;font:700 26px Arial,sans-serif;text-anchor:middle}
.mk-kfz-pl-text{fill:#111;font:700 112px "DIN Alternate","Arial Narrow",Arial,sans-serif}
.mk-kfz-pl-scheibe{fill:#d9dbde;stroke:rgba(0,0,0,.25);stroke-width:1.5}
.mk-kfz-pl-teile path{fill:rgba(0,0,0,.07)}
.mk-kfz-pl-zahlen text{fill:#111;font:700 13px Arial,sans-serif;text-anchor:middle}
.mk-kfz-pl-innen{fill:#fff;stroke:rgba(0,0,0,.18);stroke-width:1.5}
.mk-kfz-pl-jahr{fill:#111;font:700 32px Arial,sans-serif;text-anchor:middle}
.mk-kfz-pl-marke{fill:#111}
.mk-kfz-pl-stempel{stroke:#9a9ca3;stroke-width:3;stroke-linecap:round}
.mk-kfz-sterne circle,.mk-kfz-pr-sterne circle{fill:#ffcc00}
.mk-kfz .mk-kfz-pr-sterne{width:28px;height:28px;margin-bottom:auto;margin-top:8px}
.mk-kfz-pl-siegel{transform-box:fill-box;transform-origin:center}
.mk-kfz-pl-unter{display:flex;justify-content:space-between;align-items:center;gap:12px;margin:14px 4px 0;font-size:14px}

/* Kilometerzähler */
.mk-kfz-km{width:min(420px,100%)}
.mk-kfz-km-instrument{padding:24px 22px 22px;border-radius:26px;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--mk-band) 82%,#fff),var(--mk-band) 70%);color:var(--mk-band-text);box-shadow:0 40px 80px -40px rgba(0,0,0,.6),0 0 0 1px var(--mk-linie)}
.mk-kfz-km-titel{margin:0 0 14px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.7;text-align:center}
.mk-kfz-km-zaehler{display:flex;justify-content:center;align-items:center;gap:clamp(3px,1vw,6px);font:600 clamp(28px,9vw,44px)/1 ui-monospace,Menlo,Consolas,monospace;font-variant-numeric:tabular-nums}
.mk-kfz-km-walze{display:block;width:.92em;height:1.3em;overflow:hidden;border-radius:8px;background:linear-gradient(180deg,#000,#1d1d20 30%,#1d1d20 70%,#000);color:#f2f2f2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.mk-kfz-km-walze i{display:block;font-style:normal;transform:translateY(calc(var(--d) * -1.3em))}
.mk-kfz-km-walze b{display:block;height:1.3em;line-height:1.3em;text-align:center;font-weight:600}
.mk-kfz-km-zaehler em{font-style:normal;font-size:16px;margin-left:6px;opacity:.75}
.mk-kfz-km-leiste{height:6px;margin-top:20px;border-radius:3px;background:color-mix(in srgb,var(--mk-band-text) 16%,transparent);overflow:hidden}
.mk-kfz-km-leiste i{display:block;height:100%;width:64%;background:var(--mk-band-text);opacity:.8;border-radius:3px;transform-origin:left}
.mk-kfz-km-unter{margin:14px 0 0;text-align:center}

/* Steinschlag */
.mk-kfz-ss svg{filter:drop-shadow(0 30px 34px rgba(0,0,0,.22))}
.mk-kfz-ss-rahmen{fill:none;stroke:#1b1b1e;stroke-width:14;stroke-linejoin:round}
.mk-kfz-ss-reflex{fill:#fff;opacity:.45}.mk-kfz-ss-reflex--2{opacity:.28}
.mk-kfz-ss-spiegel{fill:#1b1b1e}
.mk-kfz-ss-wischer{fill:none;stroke:#1b1b1e;stroke-width:5;stroke-linecap:round}
.mk-kfz-ss-riss{opacity:.22}.mk-kfz-ss-riss path{fill:none;stroke:#4e5b67;stroke-width:1.6;stroke-linecap:round}.mk-kfz-ss-riss circle{fill:#4e5b67}
.mk-kfz-ss-harz{fill:var(--mk-akzent);opacity:.25;transform-box:fill-box;transform-origin:center}
.mk-kfz-ss-lupenglas{fill:rgba(255,255,255,.16);stroke:var(--mk-band);stroke-width:5}
.mk-kfz-ss-griff{stroke:var(--mk-band);stroke-width:12;stroke-linecap:round}
.mk-kfz-ss .mk-kfz-marke{left:auto;right:8%;bottom:auto;top:24%}

/* Scheibentausch */
.mk-kfz-st svg{overflow:hidden}
.mk-kfz-st-koerper{fill:var(--mk-karte);stroke:var(--mk-text);stroke-width:2.2;stroke-linejoin:round}
.mk-kfz-st-oeffnung{fill:#1b1b1e}
.mk-kfz-st-raupe{fill:none;stroke:var(--mk-akzent);stroke-width:4;stroke-linejoin:round}
.mk-kfz-st-glas{fill:color-mix(in srgb,var(--mk-band) 20%,#dbe7ef);stroke:#1b1b1e;stroke-width:3;stroke-linejoin:round}
.mk-kfz-st-reflex{fill:#fff;opacity:.5}
.mk-kfz-st-sauger{opacity:0}.mk-kfz-st-sauger path{fill:none;stroke:#6b6e75;stroke-width:4;stroke-linecap:round}.mk-kfz-st-sauger circle{fill:rgba(30,30,34,.5);stroke:#6b6e75;stroke-width:3}
.mk-kfz-st-licht{fill:#fff;stroke:var(--mk-text);stroke-width:2;stroke-linejoin:round}
.mk-kfz-st-grill,.mk-kfz-st-rad{fill:#1b1b1e}
.mk-kfz-st-nummer{fill:#fff;stroke:#1b1b1e;stroke-width:2}
.mk-kfz-st-spiegel{fill:var(--mk-karte);stroke:var(--mk-text);stroke-width:2;stroke-linejoin:round}

/* Leistungsdiagramm */
.mk-kfz-ps-gitter path{stroke:var(--mk-linie);stroke-width:1}
.mk-kfz-ps-achse{fill:none;stroke:var(--mk-text);stroke-width:1.6}
.mk-kfz-ps-flaeche{fill:var(--mk-akzent);opacity:.1;transition:opacity .3s}
.mk-kfz-ps-serie{fill:none;stroke:var(--mk-leise);stroke-width:2.4;stroke-dasharray:6 6;stroke-linecap:round}
.mk-kfz-ps-neu{fill:none;stroke:var(--mk-akzent);stroke-width:3.4;stroke-linecap:round;transition:stroke-width .3s}
.mk-kfz-ps-zeiger{transform:translateX(250px)}.mk-kfz-ps-zeiger path{stroke:var(--mk-text);stroke-width:1.2;stroke-dasharray:3 4;opacity:.4}
.mk-kfz-ps-achstext{fill:var(--mk-leise);font:500 12px 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-anchor:end}.mk-kfz-ps-achstext--y{text-anchor:start}
.mk-kfz-ps-legende{list-style:none;margin:0 0 10px;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px}
.mk-kfz-ps-legende li{display:flex;align-items:center;gap:8px}
.mk-kfz-ps-legende i{width:20px;height:3px;border-radius:2px}
.mk-kfz-ps-l1 i{background:repeating-linear-gradient(90deg,var(--mk-leise) 0 5px,transparent 5px 9px)}.mk-kfz-ps-l2 i{background:var(--mk-akzent)}
.mk-kfz-ps:hover .mk-kfz-ps-flaeche{opacity:.2}.mk-kfz-ps:hover .mk-kfz-ps-neu{stroke-width:4.4}

/* Politur */
.mk-kfz-pol{perspective:900px}
.mk-kfz-pol-flaeche{position:relative;aspect-ratio:16/10;border-radius:30px 30px 20px 20px;overflow:hidden;transform:rotateX(14deg);box-shadow:0 44px 70px -36px rgba(0,0,0,.6),0 0 0 1px var(--mk-linie)}
.mk-kfz-pol-matt{position:absolute;inset:0;background:repeating-radial-gradient(circle at 28% 38%,rgba(255,255,255,.1) 0 1px,transparent 1.5px 7px),repeating-radial-gradient(circle at 74% 62%,rgba(255,255,255,.08) 0 1px,transparent 1.5px 9px),color-mix(in srgb,var(--mk-band) 72%,#9a9a9a)}
.mk-kfz-pol-glanz{position:absolute;inset:0;clip-path:inset(0 0 0 0);background:linear-gradient(104deg,transparent 0 44%,rgba(255,255,255,.55) 46%,rgba(255,255,255,.12) 50%,transparent 54%),linear-gradient(104deg,transparent 0 60%,rgba(255,255,255,.22) 61%,transparent 64%),linear-gradient(180deg,rgba(255,255,255,.24),transparent 46%),var(--mk-band)}
.mk-kfz-pol-maschine{position:absolute;top:56%;left:88%;width:100px;height:100px;margin:-50px 0 0 -50px;border-radius:50%;background:radial-gradient(circle,#f4f4f6 0 22%,color-mix(in srgb,var(--mk-akzent) 55%,#fff) 23% 60%,#1b1b1e 61%);box-shadow:0 20px 30px -12px rgba(0,0,0,.6)}
.mk-kfz-pol-maschine i{position:absolute;left:50%;top:-58px;width:30px;height:66px;margin-left:-15px;border-radius:15px 15px 10px 10px;background:linear-gradient(90deg,#2a2b30,#4a4c52,#2a2b30)}
.mk-kfz-pol-maschine b{position:absolute;inset:10px;border-radius:50%;background:conic-gradient(from 0deg,rgba(255,255,255,.4),transparent 25%,rgba(255,255,255,.2) 55%,transparent 80%)}
.mk-kfz-pol .mk-kfz-marke{bottom:22px}

/* Delle */
.mk-kfz-de-linien{fill:none;stroke:#2c2f35;stroke-width:7;stroke-linecap:round;opacity:.82}
.mk-kfz-de-ring{fill:none;stroke:var(--mk-akzent);stroke-width:2.5;stroke-dasharray:6 6;opacity:.45}
.mk-kfz-de-druck{fill:var(--mk-akzent);opacity:0;transform-box:fill-box;transform-origin:center}
.mk-kfz-de-lampe{fill:var(--mk-band)}

/* Versiegelung */
.mk-kfz-vs svg{border-radius:22px;box-shadow:0 40px 70px -36px rgba(0,0,0,.6),0 0 0 1px var(--mk-linie)}
.mk-kfz-vs-flaeche{fill:var(--mk-band)}
.mk-kfz-vs-spiegel{fill:#fff;opacity:.16}
.mk-kfz-vs-tropfen{transform-box:fill-box;transform-origin:center}
.mk-kfz-vs-tropfen ellipse{fill:rgba(255,255,255,.16);stroke:rgba(255,255,255,.55);stroke-width:1.2}
.mk-kfz-vs-tropfen .mk-kfz-vs-licht{fill:#fff;stroke:none;opacity:.85}

/* Innenraum */
.mk-kfz-ir-boden{stroke:var(--mk-linie);stroke-width:2}
.mk-kfz-ir-lehne,.mk-kfz-ir-kopf,.mk-kfz-ir-polster{fill:color-mix(in srgb,var(--mk-text) 30%,var(--mk-grund));stroke:color-mix(in srgb,var(--mk-text) 50%,var(--mk-grund));stroke-width:1.5}
.mk-kfz-ir-wange{fill:color-mix(in srgb,var(--mk-text) 40%,var(--mk-grund))}
.mk-kfz-ir-pfosten{stroke:#9a9ca3;stroke-width:5}
.mk-kfz-ir-schlauch{fill:none;stroke:#6b6e75;stroke-width:5;stroke-linecap:round}.mk-kfz-ir-schlitz{stroke:#1b1b1e;stroke-width:2;stroke-linecap:round}
.mk-kfz-ir-naht{fill:none;stroke:rgba(255,255,255,.32);stroke-width:1.6;stroke-dasharray:4 4}
.mk-kfz-ir-sockel{fill:none;stroke:color-mix(in srgb,var(--mk-text) 60%,var(--mk-grund));stroke-width:6;stroke-linecap:round}
.mk-kfz-ir-fleck{fill:#a07a42;opacity:0}
.mk-kfz-ir-duese{transform:translate(400px,148px)}.mk-kfz-ir-duese rect{fill:#d5d8dd;stroke:#6b6e75;stroke-width:1.5}
.mk-kfz-ir-funken path{fill:var(--mk-akzent)}

/* Felge */
.mk-kfz-fe{width:min(360px,100%)}
.mk-kfz-fe svg{filter:drop-shadow(0 30px 30px rgba(0,0,0,.3))}
.mk-kfz-fe-reifen{fill:#1b1b1e}.mk-kfz-fe-flanke{fill:#26262a;stroke:#3a3a3f;stroke-width:1.5}
.mk-kfz-fe-bett{fill:#3a3d43}
.mk-kfz-fe-speichen path{fill:#d9dce1;stroke:rgba(0,0,0,.25);stroke-width:1}
.mk-kfz-fe-nabe{fill:#c9ccd2;stroke:rgba(0,0,0,.25);stroke-width:1.5}
.mk-kfz-fe-bolzen circle{fill:#6b6e75}
.mk-kfz-fe-kratzer{opacity:0}.mk-kfz-fe-kratzer path{stroke:#5a5048;stroke-width:1.8;stroke-linecap:round}
.mk-kfz-fe-glanz{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;opacity:.45}
.mk-kfz-fe .mk-kfz-marke{left:50%;bottom:-6px;transform:translateX(-50%)}

/* Unfallskizze */
.mk-kfz-us{width:min(430px,100%)}
.mk-kfz-us-blatt{padding:20px;border-radius:16px;color:#1d1d1f;background:linear-gradient(rgba(0,0,0,.05) 1px,transparent 1px) 0 0/20px 20px,linear-gradient(90deg,rgba(0,0,0,.05) 1px,transparent 1px) 0 0/20px 20px,#fff;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);transform:rotate(-1.5deg)}
.mk-kfz-us-strasse{fill:#e6e6ea}
.mk-kfz-us-mitte{fill:none;stroke:#b4b4ba;stroke-width:2;stroke-dasharray:8 8}
.mk-kfz-us-pfeil,.mk-kfz-us-spitze{fill:none;stroke:var(--mk-akzent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.mk-kfz-us-a rect{fill:var(--mk-knopf)}.mk-kfz-us-a text{fill:var(--mk-knopf-text)}
.mk-kfz-us-b rect{fill:#fff;stroke:#1d1d1f;stroke-width:2.5}.mk-kfz-us-b text{fill:#1d1d1f}
.mk-kfz-us-a text,.mk-kfz-us-b text{font:700 14px Arial,sans-serif;text-anchor:middle}
.mk-kfz-us-stoss{fill:var(--mk-akzent);stroke:#fff;stroke-width:1.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:center}
.mk-kfz-us-nord circle{fill:none;stroke:#1d1d1f;stroke-width:1.5}.mk-kfz-us-nord path{fill:#1d1d1f}.mk-kfz-us-nord text{fill:#1d1d1f;font:700 12px Arial,sans-serif;text-anchor:middle}

/* Wertkurve */
.mk-kfz-wk-gitter{stroke:var(--mk-linie);stroke-width:1}
.mk-kfz-wk-achse{fill:none;stroke:var(--mk-text);stroke-width:1.6}
.mk-kfz-wk-punkt{fill:var(--mk-leise);opacity:.5;transform-box:fill-box;transform-origin:center}
.mk-kfz-wk-kurve{fill:none;stroke:var(--mk-akzent);stroke-width:3.2;stroke-linecap:round}
.mk-kfz-wk-hilfe{fill:none;stroke:var(--mk-akzent);stroke-width:1.6;stroke-dasharray:5 5}
.mk-kfz-wk-marke circle{fill:var(--mk-akzent);transform-box:fill-box;transform-origin:center;transition:transform .3s}
.mk-kfz-wk-marke circle:first-child{opacity:.18}
.mk-kfz-wk:hover .mk-kfz-wk-marke circle:first-child{transform:scale(1.5)}
.mk-kfz-wk-text{fill:var(--mk-leise);font:500 12px 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-anchor:end}.mk-kfz-wk-text--y{text-anchor:start}
.mk-kfz-wk-notiz{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:10px 0 0;font-size:12.5px;color:var(--mk-leise)}
.mk-kfz-wk-notiz i{width:9px;height:9px;border-radius:50%;background:var(--mk-leise);opacity:.55}
.mk-kfz-wk-notiz .mk-kfz-wk-i2{background:var(--mk-akzent);opacity:1;margin-left:10px}

/* Fotodokumentation */
.mk-kfz-fr-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.mk-kfz-fr-raster figure{position:relative;margin:0;padding:10px 8px 9px;border-radius:12px;background:var(--mk-karte);text-align:center;transition:transform .3s}
.mk-kfz-fr-raster figure:hover{transform:translateY(-3px)}
.mk-kfz-fr-raster svg{aspect-ratio:72/60}
.mk-kfz-fr-raster svg path,.mk-kfz-fr-raster svg circle{fill:none;stroke:var(--mk-text);stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
.mk-kfz-fr-raster figcaption{margin-top:6px;font-size:11.5px;line-height:1.25;color:var(--mk-leise);overflow-wrap:anywhere}
.mk-kfz-fr-raster figure i{position:absolute;inset:5px;border-radius:9px;opacity:0;pointer-events:none;
  background:linear-gradient(var(--mk-akzent),var(--mk-akzent)) 0 0/14px 2px no-repeat,linear-gradient(var(--mk-akzent),var(--mk-akzent)) 0 0/2px 14px no-repeat,
  linear-gradient(var(--mk-akzent),var(--mk-akzent)) 100% 0/14px 2px no-repeat,linear-gradient(var(--mk-akzent),var(--mk-akzent)) 100% 0/2px 14px no-repeat,
  linear-gradient(var(--mk-akzent),var(--mk-akzent)) 0 100%/14px 2px no-repeat,linear-gradient(var(--mk-akzent),var(--mk-akzent)) 0 100%/2px 14px no-repeat,
  linear-gradient(var(--mk-akzent),var(--mk-akzent)) 100% 100%/14px 2px no-repeat,linear-gradient(var(--mk-akzent),var(--mk-akzent)) 100% 100%/2px 14px no-repeat}
.mk-kfz-fr-raster figure:first-child i,.mk-kfz-fr-raster figure:hover i{opacity:1}

/* Weitergabe an die Versicherung */
.mk-kfz-wg-bahn{fill:none;stroke:var(--mk-akzent);stroke-width:2;stroke-dasharray:6 7}
.mk-kfz-wg-karte{fill:var(--mk-karte);stroke:var(--mk-linie);stroke-width:1.5}
.mk-kfz-wg-blatt{fill:#fff;stroke:var(--mk-text);stroke-width:1.6}
.mk-kfz-wg-zeilen{stroke:#b9bcc2;stroke-width:3;stroke-linecap:round}
.mk-kfz-wg-haus{fill:none;stroke:var(--mk-text);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.mk-kfz-wg-text{fill:var(--mk-text);font:600 13px 'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;text-anchor:middle}
.mk-kfz-wg-brief{transform:translate(286px,78px)}
.mk-kfz-wg-brief rect{fill:var(--mk-knopf)}.mk-kfz-wg-brief path{fill:none;stroke:var(--mk-knopf-text);stroke-width:1.8;stroke-linejoin:round}

/* Zulassungsbescheinigung */
.mk-kfz-zb{width:min(440px,100%)}
.mk-kfz-zb-blatt{padding:18px 18px 20px;border-radius:12px;color:#1f2a22;background:repeating-radial-gradient(circle at 18% 28%,rgba(60,110,80,.07) 0 1px,transparent 1px 7px),repeating-linear-gradient(115deg,rgba(60,110,80,.05) 0 1px,transparent 1px 9px),#eef3ec;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(60,90,70,.12);transform:rotate(-1deg)}
.mk-kfz-zb-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;margin:0 0 14px}
.mk-kfz-zb-kopf span{min-width:0;overflow-wrap:anywhere;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#3c5a46}
.mk-kfz-zb-felder{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 10px}
.mk-kfz-zb-felder p{margin:0;padding:8px 10px;border-radius:8px;display:grid;gap:6px;background:rgba(255,255,255,.62);border:1px solid rgba(60,90,70,.14);transition:transform .25s}
.mk-kfz-zb-felder p:hover{transform:translateY(-2px)}
.mk-kfz-zb-felder small{font-size:11px;font-weight:700;color:#3c5a46}
.mk-kfz-zb-felder b{font:700 15px "DIN Alternate","Arial Narrow",Arial,sans-serif;letter-spacing:.04em;color:#111;white-space:nowrap}
.mk-kfz-zb-felder i{display:block;height:7px;border-radius:4px;background:rgba(60,90,70,.2);width:var(--b)}
.mk-kfz-zb-felder .mk-kfz-zb-hell{background:color-mix(in srgb,var(--mk-akzent) 12%,#fff);border-color:var(--mk-akzent);box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-akzent) 18%,transparent)}
.mk-kfz-zb-felder .mk-kfz-zb-hell small{color:var(--mk-akzent)}
.mk-kfz-zb-erkl{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:6px;font-size:13.5px}
.mk-kfz-zb-erkl b{display:inline-block;min-width:34px;color:var(--mk-akzent)}

/* Wartemarke */
.mk-kfz-wm{width:min(400px,100%);display:grid;gap:18px;justify-items:center}
.mk-kfz-wm-tafel{width:100%;padding:16px 20px 18px;border-radius:18px;background:#0f1012;color:#f2f2f2;box-shadow:0 30px 60px -30px rgba(0,0,0,.6)}
.mk-kfz-wm-tafel small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;opacity:.6}
.mk-kfz-wm-reihe{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px;font:600 clamp(24px,7vw,32px)/1 "DIN Alternate","Arial Narrow",Arial,sans-serif}
.mk-kfz-wm-nr{display:grid;height:1.2em;overflow:hidden;color:color-mix(in srgb,var(--mk-akzent) 35%,#fff);font-variant-numeric:tabular-nums}
.mk-kfz-wm-nr b{grid-area:1/1;line-height:1.2em;opacity:0}.mk-kfz-wm-nr b:last-child{opacity:1}
.mk-kfz-wm-pfeil{opacity:.45}.mk-kfz-wm-reihe>span:last-child{font-size:.7em;opacity:.85}
.mk-kfz-wm-automat{position:relative;width:min(270px,82%);padding:20px 20px 0;border-radius:24px 24px 8px 8px;background:linear-gradient(180deg,#eceef1,#cfd2d7);display:grid;justify-items:center;box-shadow:0 30px 60px -30px rgba(0,0,0,.5),inset 0 1px 0 #fff}
.mk-kfz-wm-schlitz{position:relative;z-index:1;width:84%;height:10px;border-radius:5px;background:#1b1b1e}
.mk-kfz-wm-marke{width:72%;margin-top:-5px;padding:16px 12px 16px;border-radius:0 0 6px 6px;background:#fff;color:#1d1d1f;text-align:center;box-shadow:0 14px 24px -14px rgba(0,0,0,.5)}
.mk-kfz-wm-marke small{display:block;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6b6b70}
.mk-kfz-wm-marke b{display:block;margin:4px 0 8px;font:700 40px/1 "DIN Alternate","Arial Narrow",Arial,sans-serif;font-variant-numeric:tabular-nums}
.mk-kfz-wm-marke em{display:block;font-style:normal}
.mk-kfz-wm-knopf{width:52px;height:52px;margin:16px 0 18px;border-radius:50%;background:var(--mk-knopf);box-shadow:inset 0 -4px 0 rgba(0,0,0,.2),0 6px 12px -6px rgba(0,0,0,.5)}

/* Kennzeichenprägung */
.mk-kfz-pr{width:min(440px,100%);display:grid;justify-items:center}
.mk-kfz-pr-presse{position:relative;z-index:1;width:64%;height:92px;margin-bottom:18px}
.mk-kfz-pr-presse i{position:absolute;top:0;left:50%;width:28px;height:52px;margin-left:-14px;background:linear-gradient(90deg,#8c8f96,#d4d6da,#8c8f96)}
.mk-kfz-pr-presse b{position:absolute;bottom:0;left:0;right:0;height:44px;border-radius:10px;background:var(--mk-band);box-shadow:0 16px 26px -12px rgba(0,0,0,.55)}
.mk-kfz-pr-schild{width:100%;height:clamp(76px,22vw,104px);display:flex;align-items:stretch;background:#fff;border:5px solid #111;border-radius:12px;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.5)}
.mk-kfz-pr-eu{flex:none;width:clamp(36px,10vw,54px);display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding-bottom:10px;background:#1f45b5;color:#fff;font:700 15px Arial,sans-serif}
.mk-kfz-pr-text{flex:1;display:flex;justify-content:center;align-items:center;white-space:pre;font:700 clamp(30px,9vw,54px)/1 "DIN Alternate","Arial Narrow",Arial,sans-serif;letter-spacing:.06em;color:#111;text-shadow:0 1px 0 #fff,0 -1px 0 rgba(0,0,0,.22),1px 2px 3px rgba(0,0,0,.2)}
.mk-kfz-pr-text span{display:inline-block}
.mk-kfz-pr-unter{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;margin:14px 0 0;font-size:14px}

/* Vollmacht */
.mk-kfz-vm{width:min(400px,100%)}
.mk-kfz-vm-blatt{padding:26px 26px 22px;border-radius:12px;background:#fff;color:#1d1d1f;box-shadow:0 30px 60px -30px rgba(0,0,0,.45),0 0 0 1px rgba(0,0,0,.05);transform:rotate(1.5deg)}
.mk-kfz-vm-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:0 0 16px}
.mk-kfz-vm-kopf b{font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:22px}
.mk-kfz-vm-zeile{margin:0 0 12px;display:grid;gap:2px}
.mk-kfz-vm-zeile small{color:#6b6b70;font-size:12px}.mk-kfz-vm-zeile b{font-size:15px;overflow-wrap:anywhere}
.mk-kfz-vm-linien i{display:block;height:7px;border-radius:4px;background:#e4e4e8;margin-bottom:9px;width:90%}.mk-kfz-vm-linien i+i{width:62%}
.mk-kfz-vm-blatt ul{list-style:none;margin:14px 0 18px;padding:0;display:grid;gap:9px}
.mk-kfz-vm-blatt li{display:flex;align-items:center;gap:10px;font-size:14px}
.mk-kfz-vm-blatt li i{position:relative;flex:none;width:18px;height:18px;border-radius:5px;border:1.6px solid #c4c4ca}
.mk-kfz-vm-blatt li:first-child i::after{content:"";position:absolute;inset:3px;border-radius:2px;background:var(--mk-akzent)}
.mk-kfz-vm-unterschrift{position:relative;width:72%}
.mk-kfz-vm-unterschrift svg{height:46px}
.mk-kfz-vm-unterschrift path{fill:none;stroke:#1d1d1f;stroke-width:2;stroke-linecap:round}
.mk-kfz-vm-unterschrift small{display:block;border-top:1px solid #d0d0d5;padding-top:4px;color:#8a8a90;font-size:11px}
.mk-kfz-vm-stift{position:absolute;left:94%;top:-34px;width:11px;height:66px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,var(--mk-band) 0 78%,#c9ccd2 78%);transform:rotate(28deg);transform-origin:50% 100%}

/* eVB-Karte */
.mk-kfz-versich{width:min(400px,100%)}
.mk-kfz-versich-karte{position:relative;overflow:hidden;padding:22px 22px 20px;border-radius:20px;background:linear-gradient(135deg,var(--mk-band),color-mix(in srgb,var(--mk-band) 72%,var(--mk-akzent)));color:var(--mk-band-text);box-shadow:0 40px 70px -36px rgba(0,0,0,.6)}
.mk-kfz-versich-kopf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 10px;margin:0}
.mk-kfz-versich-kopf b{font-size:15px;font-weight:600;min-width:0;overflow-wrap:anywhere}
.mk-kfz-versich .mk-muster{color:var(--mk-band-text);border-color:currentColor}
.mk-kfz-versich-karte>small{display:block;margin:20px 0 8px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.mk-kfz-versich-felder{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.mk-kfz-versich-felder i{font-style:normal;aspect-ratio:.8;display:grid;place-items:center;border-radius:8px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);font:700 clamp(15px,4.6vw,24px) ui-monospace,Menlo,Consolas,monospace}
.mk-kfz-versich-fuss{display:flex;gap:10px;margin-top:18px}.mk-kfz-versich-fuss span{height:7px;border-radius:4px;background:rgba(255,255,255,.22);width:40%}.mk-kfz-versich-fuss span+span{width:22%}

/* Schlüsselanhänger */
.mk-kfz-sl{width:min(340px,100%);height:390px}
.mk-kfz-sl-haken{position:absolute;top:0;left:50%;width:58px;height:28px;margin-left:-29px;border-radius:8px 8px 4px 4px;background:var(--mk-band);box-shadow:0 10px 18px -10px rgba(0,0,0,.5)}
.mk-kfz-sl-haken::after{content:"";position:absolute;left:50%;top:26px;width:6px;height:20px;margin-left:-3px;border-radius:0 0 3px 3px;background:#9a9ca3}
.mk-kfz-sl-pendel{position:absolute;top:40px;left:50%;width:260px;height:370px;margin-left:-130px;transform-origin:50% 4px;filter:drop-shadow(0 18px 20px rgba(0,0,0,.22))}
.mk-kfz-sl-bund{position:absolute!important;left:calc(50% - 48px);top:0;width:96px!important;transform:rotate(30deg);transform-origin:48px 21px}
.mk-kfz-sl-ring{fill:none;stroke:#9a9ca3;stroke-width:5}.mk-kfz-sl-oese{stroke:#9a9ca3;stroke-width:5}
.mk-kfz-sl-fob{fill:#1b1b1e;stroke:color-mix(in srgb,var(--mk-text) 22%,transparent);stroke-width:1.5}.mk-kfz-sl-taste{fill:#3a3b40}
.mk-kfz-sl-faden{position:absolute;left:calc(50% + 4px);top:36px;width:2px;height:52px;background:#a8a8ae;transform:rotate(-14deg);transform-origin:top}
.mk-kfz-sl-anh{position:absolute;left:calc(50% - 48px);top:84px;width:196px;padding:28px 18px 16px;background:#fffdf7;color:#1d1d1f;transform:rotate(-3deg);transform-origin:50% 0;clip-path:polygon(16px 0,calc(100% - 16px) 0,100% 16px,100% 100%,0 100%,0 16px)}
.mk-kfz-sl-loch{position:absolute;top:9px;left:50%;width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#e8e2d2;box-shadow:inset 0 0 0 2px #cfc6b0}
.mk-kfz-sl-zeichen{display:grid;place-items:center;width:36px;height:36px;margin:0 auto 10px;border-radius:10px;background:var(--mk-knopf);color:var(--mk-knopf-text);font-weight:700;font-size:18px;overflow:hidden}
.mk-kfz-sl-anh>b{display:block;text-align:center;font-family:'Hanken Grotesk',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:16px;line-height:1.25;margin-bottom:10px;overflow-wrap:anywhere}
.mk-kfz-sl-anh ul{list-style:none;margin:0;padding:10px 0 0;border-top:1px dashed #d9d3c4;display:grid;gap:7px}
.mk-kfz-sl-anh li{display:grid}
.mk-kfz-sl-anh li small{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:#6b6b70}
.mk-kfz-sl-anh li b{font-size:13.5px;font-weight:600;overflow-wrap:anywhere}


/* ── Bewegung ─────────────────────────────────────────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion:no-preference){
  .mk-kfz-chips li{animation:mk-kfz-herein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .9s)}
  .mk-kfz-hb-last{animation:mk-kfz-heben 2.4s cubic-bezier(.65,0,.35,1) .5s both}
  .mk-kfz-hb-schatten{animation:mk-kfz-schatten 2.4s cubic-bezier(.65,0,.35,1) .5s both}
  .mk-kfz-hb-kegel{animation:mk-kfz-atmen 7s ease-in-out 3s infinite alternate}
  .mk-kfz-hb .mk-kfz-chips li{animation-delay:calc(var(--k) * .3s + 2.6s)}
  .mk-kfz-rp-messer{animation:mk-kfz-messen 8s cubic-bezier(.65,0,.35,1) .4s infinite both}
  .mk-kfz-rp-wert{animation:mk-kfz-wert 8s ease .4s infinite both}
  .mk-kfz-schein-felder i{animation:mk-kfz-balken 1.3s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--k, 0) * .3s + .5s)}
  .mk-kfz-schein-felder p:nth-child(2) i{animation-delay:.8s}.mk-kfz-schein-felder p:nth-child(3) i{animation-delay:1.1s}
  .mk-kfz-schein-blatt li path{stroke-dasharray:1;animation:mk-kfz-zeichnen 1.2s ease both;animation-delay:calc(var(--k) * .4s + 1.4s)}
  .mk-kfz-schein-fuss path{stroke-dasharray:1;animation:mk-kfz-zeichnen 2.2s cubic-bezier(.45,0,.55,1) 3.2s both}
  .mk-kfz-dz-nadel{animation:mk-kfz-hochdrehen 2.6s cubic-bezier(.45,0,.2,1) .5s both,mk-kfz-leerlauf 6s ease-in-out 3.1s infinite alternate}
  .mk-kfz-dz-n2 span{animation:mk-kfz-wechsel2 8s infinite;animation-delay:calc(var(--k) * 4s)}
  .mk-kfz-dz-n3 span{animation:mk-kfz-wechsel3 12s infinite;animation-delay:calc(var(--k) * 4s)}
  .mk-kfz-dz-anzeige b span:first-child{opacity:0}
  .mk-kfz-kal-ziel{animation:mk-kfz-ausrichten 8s cubic-bezier(.65,0,.35,1) .4s infinite both}
  .mk-kfz-kal-leiste b{animation:mk-kfz-mitte 8s cubic-bezier(.65,0,.35,1) .4s infinite both}
  .mk-kfz-kal-haken{stroke-dasharray:1;animation:mk-kfz-haken 8s ease .4s infinite both}
  .mk-kfz-kal-kegel{animation:mk-kfz-atmen 4s ease-in-out infinite alternate}
  .mk-kfz-oel-pendel,.mk-kfz-sl-pendel{animation:mk-kfz-pendeln 7s ease-in-out infinite alternate}
  .mk-kfz-oel-feld path{stroke-dasharray:1;animation:mk-kfz-zeichnen 1.6s cubic-bezier(.45,0,.55,1) 1s both}
  .mk-kfz-oel-feld:nth-of-type(3) path{animation-delay:2s}
  .mk-kfz-pl-siegel{animation:mk-kfz-kleben 2s cubic-bezier(.34,1.3,.64,1) .5s both}
  .mk-kfz-pl-marke{animation:mk-kfz-atmen 5s ease-in-out 2.6s infinite alternate}
  .mk-kfz-km-walze i{animation:mk-kfz-rollen 2.4s cubic-bezier(.3,0,.2,1) both;animation-delay:calc(var(--k) * .3s + .4s)}
  .mk-kfz-km-leiste i{animation:mk-kfz-balken 2.2s cubic-bezier(.65,0,.35,1) 1s both}
  .mk-kfz-ss-lupe{animation:mk-kfz-lupe 1.8s cubic-bezier(.16,1,.3,1) .4s both}
  .mk-kfz-ss-riss{animation:mk-kfz-riss 1.8s ease 2.2s both}
  .mk-kfz-ss-harz{animation:mk-kfz-harz 2s cubic-bezier(.34,1.3,.64,1) 2.2s both}
  .mk-kfz-ss-reflex{animation:mk-kfz-reflex 10s ease-in-out 4s infinite}
  .mk-kfz-st-raupe{stroke-dasharray:1;animation:mk-kfz-zeichnen 1.6s cubic-bezier(.65,0,.35,1) .4s both}
  .mk-kfz-st-scheibe{animation:mk-kfz-einsetzen 2.2s cubic-bezier(.65,0,.35,1) 1.8s both}
  .mk-kfz-st-sauger{animation:mk-kfz-sauger 5s ease .2s both}
  .mk-kfz-ps-serie{animation:mk-kfz-ein 1.2s ease .3s both}
  .mk-kfz-ps-neu{stroke-dasharray:1;animation:mk-kfz-zeichnen 2.4s cubic-bezier(.65,0,.35,1) .7s both}
  .mk-kfz-ps-flaeche{animation:mk-kfz-ein 1.4s ease 2.6s both}
  .mk-kfz-ps-zeiger{animation:mk-kfz-zeiger 12s ease-in-out 3.2s infinite alternate}
  .mk-kfz-pol-maschine{animation:mk-kfz-maschine 3s cubic-bezier(.45,0,.55,1) .6s both}
  .mk-kfz-pol-glanz{animation:mk-kfz-glanz 3s cubic-bezier(.45,0,.55,1) .6s both}
  .mk-kfz-pol-maschine b{animation:mk-kfz-dreh 6s linear infinite}
  .mk-kfz-de-linien{animation:mk-kfz-ausbeulen 2.6s cubic-bezier(.65,0,.35,1) 1.3s both}
  .mk-kfz-de-ring{animation:mk-kfz-dellring 4s ease .3s both}
  .mk-kfz-de-druck{animation:mk-kfz-druck 4s ease .3s both}
  .mk-kfz-vs-tropfen{animation:mk-kfz-perlen 9s cubic-bezier(.34,1.3,.64,1) infinite both;animation-delay:calc(var(--k) * .4s)}
  .mk-kfz-ir-duese{animation:mk-kfz-duese 4.6s cubic-bezier(.45,0,.55,1) .6s both}
  .mk-kfz-ir-fleck{animation:mk-kfz-fleck 1s ease both;animation-delay:calc(var(--k) * 1.05s + 1.1s)}
  .mk-kfz-ir-funken path{transform-box:fill-box;transform-origin:center;animation:mk-kfz-funkeln 6s ease-in-out 5s infinite}
  .mk-kfz-ir-funken path+path{animation-delay:6.2s}
  .mk-kfz-fe-rad{transform-origin:0 0;animation:mk-kfz-dreh 14s linear infinite}
  .mk-kfz-fe-kratzer{animation:mk-kfz-weg 1.8s ease 1.4s both}
  .mk-kfz-fe-glanz{transform-origin:0 0;animation:mk-kfz-schwenk 7s ease-in-out infinite alternate}
  .mk-kfz-us-pfeil{stroke-dasharray:1;animation:mk-kfz-zeichnen 1.6s cubic-bezier(.65,0,.35,1) .3s both}
  .mk-kfz-us-spitze{animation:mk-kfz-ein .6s ease 1.8s both}
  .mk-kfz-us-a{animation:mk-kfz-fahren-a 2s cubic-bezier(.3,0,.2,1) .5s both}
  .mk-kfz-us-b{animation:mk-kfz-fahren-b 2s cubic-bezier(.3,0,.2,1) .8s both}
  .mk-kfz-us-stoss{animation:mk-kfz-pop .8s cubic-bezier(.34,1.6,.64,1) 2.6s both,mk-kfz-pochen 6s ease-in-out 3.4s infinite alternate}
  .mk-kfz-wk-punkt{animation:mk-kfz-pop .7s cubic-bezier(.34,1.6,.64,1) both;animation-delay:calc(var(--k) * .12s + .3s)}
  .mk-kfz-wk-kurve{stroke-dasharray:1;animation:mk-kfz-zeichnen 2.2s cubic-bezier(.65,0,.35,1) 1.8s both}
  .mk-kfz-wk-marke circle{animation:mk-kfz-pop .8s cubic-bezier(.34,1.6,.64,1) 3.8s both}
  .mk-kfz-wk-hilfe{animation:mk-kfz-ein 1s ease 4.2s both}
  .mk-kfz-fr-raster figure{animation:mk-kfz-herein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .25s + .3s)}
  .mk-kfz-fr-raster figure i{animation:mk-kfz-fokus 12s ease infinite;animation-delay:calc(var(--k) * 2s + 2s)}
  .mk-kfz-fr-raster figure:first-child i{opacity:0}
  .mk-kfz-wg-brief{animation:mk-kfz-brief 7s cubic-bezier(.45,0,.55,1) .6s infinite both}
  .mk-kfz-wg-bahn{animation:mk-kfz-marsch 7s linear infinite}
  .mk-kfz-zb-felder p{animation:mk-kfz-herein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .25s + .3s)}
  .mk-kfz-zb-felder .mk-kfz-zb-hell{animation:mk-kfz-herein 1.2s cubic-bezier(.16,1,.3,1) both,mk-kfz-leuchten 6s ease-in-out 3s infinite alternate;animation-delay:calc(var(--k) * .25s + .3s),3s}
  .mk-kfz-zb-erkl li{animation:mk-kfz-herein 1.2s cubic-bezier(.16,1,.3,1) 2.6s both}.mk-kfz-zb-erkl li+li{animation-delay:2.95s}
  .mk-kfz-wm-nr b{animation:mk-kfz-aufruf 9s ease infinite;animation-delay:calc(var(--i, 0) * 3s)}
  .mk-kfz-wm-nr b:nth-child(2){animation-delay:3s}.mk-kfz-wm-nr b:nth-child(3){animation-delay:6s}.mk-kfz-wm-nr b:last-child{opacity:0}
  .mk-kfz-wm-marke{animation:mk-kfz-drucken 2.2s cubic-bezier(.45,0,.2,1) .8s both}
  .mk-kfz-wm-knopf{animation:mk-kfz-druecken 2.2s ease .2s both}
  .mk-kfz-pr-presse{animation:mk-kfz-pressen 9s cubic-bezier(.65,0,.35,1) .6s infinite both}
  .mk-kfz-pr-text span{animation:mk-kfz-praegen 9s ease .6s infinite both}
  .mk-kfz-vm-blatt li{animation:mk-kfz-herein 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .4s)}
  .mk-kfz-vm-unterschrift path{stroke-dasharray:1;animation:mk-kfz-zeichnen 2.6s cubic-bezier(.45,0,.55,1) 1.6s both}
  .mk-kfz-vm-stift{animation:mk-kfz-stift 2.6s cubic-bezier(.45,0,.55,1) 1.6s both}
  .mk-kfz-versich-felder i{animation:mk-kfz-tippen .6s ease both;animation-delay:calc(var(--k) * .3s + .6s)}
  .mk-kfz-versich-karte::after{content:"";position:absolute;top:0;bottom:0;left:-40%;width:30%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.18),transparent);animation:mk-kfz-schimmer 9s ease-in-out 3.4s infinite}
}
@keyframes mk-kfz-herein{from{opacity:0;transform:translateY(18px)}}
@keyframes mk-kfz-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mk-kfz-ein{from{opacity:0}}
@keyframes mk-kfz-pop{from{opacity:0;transform:scale(.3)}}
@keyframes mk-kfz-weg{from{opacity:1}to{opacity:0}}
@keyframes mk-kfz-balken{from{transform:scaleX(0)}}
@keyframes mk-kfz-atmen{from{opacity:.04}to{opacity:.16}}
@keyframes mk-kfz-heben{from{transform:translateY(78px)}}
@keyframes mk-kfz-schatten{from{opacity:.28}}
@keyframes mk-kfz-messen{0%{transform:translateY(-38px)}18%,78%{transform:none}96%,100%{transform:translateY(-38px)}}
@keyframes mk-kfz-wert{0%,16%{opacity:0}24%,76%{opacity:1}82%,100%{opacity:0}}
@keyframes mk-kfz-hochdrehen{0%{transform:rotate(-135deg)}55%{transform:rotate(96deg)}100%{transform:rotate(-52deg)}}
@keyframes mk-kfz-leerlauf{from{transform:rotate(-52deg)}to{transform:rotate(-45deg)}}
@keyframes mk-kfz-wechsel2{0%{opacity:0;transform:translateY(6px)}6%,47%{opacity:1;transform:none}53%,100%{opacity:0}}
@keyframes mk-kfz-wechsel3{0%{opacity:0;transform:translateY(6px)}4%,31%{opacity:1;transform:none}35%,100%{opacity:0}}
@keyframes mk-kfz-ausrichten{0%{transform:translate(22px,-18px)}45%,100%{transform:none}}
@keyframes mk-kfz-mitte{0%{left:12%}45%,100%{left:46%}}
@keyframes mk-kfz-haken{0%,46%{stroke-dashoffset:1}60%,92%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
@keyframes mk-kfz-pendeln{from{transform:rotate(-3deg)}to{transform:rotate(3deg)}}
@keyframes mk-kfz-kleben{from{opacity:0;transform:rotate(-200deg) scale(.4)}}
@keyframes mk-kfz-rollen{from{transform:translateY(0)}}
@keyframes mk-kfz-lupe{from{opacity:0;transform:translate(160px,-60px)}}
@keyframes mk-kfz-riss{from{opacity:1}}
@keyframes mk-kfz-harz{0%{opacity:0;transform:scale(.3)}50%{opacity:.6;transform:scale(1.25)}100%{opacity:.25;transform:none}}
@keyframes mk-kfz-reflex{0%,60%,100%{transform:none}30%{transform:translateX(-26px)}}
@keyframes mk-kfz-einsetzen{from{transform:translateY(-70px)}}
@keyframes mk-kfz-sauger{0%,78%{opacity:1}100%{opacity:0}}
@keyframes mk-kfz-zeiger{from{transform:translateX(60px)}to{transform:translateX(396px)}}
@keyframes mk-kfz-maschine{0%{left:8%}94%,100%{left:88%}}
@keyframes mk-kfz-glanz{0%{clip-path:inset(0 92% 0 0)}94%{clip-path:inset(0 12% 0 0)}100%{clip-path:inset(0 0 0 0)}}
@keyframes mk-kfz-dreh{to{transform:rotate(360deg)}}
@keyframes mk-kfz-ausbeulen{from{d:path("M20 40C150 40 180 40 220 40S290 40 420 40M20 66C150 66 180 67 220 67S290 66 420 66M20 92C150 92 180 101 220 101S290 92 420 92M20 118C150 118 180 138 220 138S290 118 420 118M20 144C150 144 180 157 220 157S290 144 420 144M20 170C150 170 180 173 220 173S290 170 420 170M20 196C150 196 180 196 220 196S290 196 420 196")}}
@keyframes mk-kfz-dellring{0%,40%{opacity:1}100%{opacity:.45}}
@keyframes mk-kfz-druck{0%,20%{opacity:0;transform:scale(.5)}35%{opacity:1;transform:none}50%{opacity:.5;transform:scale(1.7)}65%{opacity:1;transform:none}100%{opacity:0}}
@keyframes mk-kfz-perlen{0%{opacity:0;transform:translateY(-40px) scale(.3)}10%{opacity:1;transform:none}72%{opacity:1;transform:none}92%{opacity:0;transform:translate(16px,28px)}100%{opacity:0;transform:translate(16px,28px)}}
@keyframes mk-kfz-duese{from{transform:translate(110px,148px)}}
@keyframes mk-kfz-fleck{from{opacity:.75}to{opacity:0}}
@keyframes mk-kfz-funkeln{0%,70%,100%{opacity:1;transform:none}80%{opacity:.3;transform:scale(.5) rotate(30deg)}}
@keyframes mk-kfz-schwenk{from{transform:rotate(-8deg)}to{transform:rotate(30deg)}}
@keyframes mk-kfz-fahren-a{from{transform:translateX(-120px)}}
@keyframes mk-kfz-fahren-b{from{transform:translateY(100px)}}
@keyframes mk-kfz-pochen{from{transform:none}to{transform:scale(1.12)}}
@keyframes mk-kfz-fokus{0%{opacity:0;transform:scale(1.12)}3%,13%{opacity:1;transform:none}17%,100%{opacity:0}}
@keyframes mk-kfz-leuchten{from{box-shadow:0 0 0 3px color-mix(in srgb,var(--mk-akzent) 18%,transparent)}to{box-shadow:0 0 0 7px color-mix(in srgb,var(--mk-akzent) 8%,transparent)}}
@keyframes mk-kfz-aufruf{0%{opacity:0;transform:translateY(60%)}5%,30%{opacity:1;transform:none}35%,100%{opacity:0;transform:translateY(-60%)}}
@keyframes mk-kfz-drucken{from{clip-path:inset(0 0 100% 0);transform:translateY(-36px)}to{clip-path:inset(0 0 0 0);transform:none}}
@keyframes mk-kfz-druecken{0%,70%,100%{transform:none}80%{transform:scale(.9)}}
@keyframes mk-kfz-pressen{0%,8%{transform:none}18%,24%{transform:translateY(24px)}36%,100%{transform:none}}
@keyframes mk-kfz-praegen{0%,18%{opacity:0;transform:scale(1.12)}26%,90%{opacity:1;transform:none}98%,100%{opacity:0}}
@keyframes mk-kfz-stift{from{left:0}}
@keyframes mk-kfz-tippen{from{color:transparent;background:rgba(255,255,255,.04)}}
@keyframes mk-kfz-schimmer{0%{left:-40%}40%,100%{left:120%}}
@keyframes mk-kfz-brief{0%{opacity:0;transform:translate(150px,84px)}8%{opacity:1;transform:translate(154px,82px)}35%{transform:translate(220px,52px)}62%,90%{opacity:1;transform:translate(286px,78px)}100%{opacity:0;transform:translate(286px,78px)}}
@keyframes mk-kfz-marsch{to{stroke-dashoffset:-52}}
/* ★ Mockups RÄUMEN und NEUTRAL (mockups_mehr/raeumen.py, Mert 09.11.2026: „vergrößere dein Inventar“).
   Grundzustand ist das fertige Bild; jede Bewegung nur unter prefers-reduced-motion: no-preference.
   Farben nur über die Tokens --mk-*, dazu neutrales Schwarz und Weiß. Einzige Ausnahme: das Halteverbotsschild trägt
   seine amtlichen Farben, sonst ist es keins.
   Schrift nie unter 10 px (Gegenprüfung 09.11.2026): Beschriftungen auf Zeichnungen sind HTML (.mk-rm-marke) über
   dem SVG, Größe über Containerbreite (cqw) mit Untergrenze 10 px. */
.lb-mock{--rm-pappe:color-mix(in srgb,var(--mk-akzent) 24%,#fff);--rm-pappe-d:color-mix(in srgb,var(--mk-akzent) 40%,#fff);--rm-schatten:0 34px 70px -34px rgba(0,0,0,.5);--rm-tinte:color-mix(in srgb,var(--mk-akzent) 62%,#000);--rm-grau:color-mix(in srgb,var(--mk-text) 72%,var(--mk-grund));--rm-papier:0 30px 60px -30px rgba(0,0,0,.42),0 0 0 1px rgba(0,0,0,.05)}
:is(.mk-rm-wagenbuehne,.mk-rm-plan,.mk-rm-haus,.mk-rm-mulde,.mk-rm-sort,.mk-rm-treppe,.mk-rm-strecke,.mk-rm-prot,.mk-rm-stapel,.mk-rm-block,.mk-rm-abreiss,.mk-rm-hv,.mk-rm-lager,.mk-rm-kartei,.mk-rm-regal,.mk-rm-tisch,.mk-rm-legespiel){box-sizing:border-box;max-width:100%;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif}
:is(.mk-rm-wagenbuehne,.mk-rm-plan,.mk-rm-haus,.mk-rm-mulde,.mk-rm-sort,.mk-rm-treppe,.mk-rm-strecke,.mk-rm-prot,.mk-rm-stapel,.mk-rm-block,.mk-rm-abreiss,.mk-rm-hv,.mk-rm-lager,.mk-rm-kartei,.mk-rm-regal,.mk-rm-tisch,.mk-rm-legespiel) *{box-sizing:border-box}
:is(.mk-rm-wagenbuehne,.mk-rm-plan,.mk-rm-haus,.mk-rm-mulde,.mk-rm-sort,.mk-rm-treppe,.mk-rm-strecke,.mk-rm-hv,.mk-rm-legespiel) svg{display:block;width:100%;height:auto}
.mk-rm-flaeche{position:relative;container-type:inline-size}
.mk-rm-marke{position:absolute;white-space:nowrap;line-height:1.1;pointer-events:none}
.mk-rm-marke--mitte{transform:translate(-50%,-50%);text-align:center}
.mk-rm-haken{transform-box:fill-box;transform-origin:center}
.mk-rm-haken circle{fill:var(--mk-knopf)}
.mk-rm-haken path{fill:none;stroke:var(--mk-knopf-text);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.mk-rm-chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.mk-rm-chips li{padding:7px 14px;border-radius:999px;background:var(--mk-grund);color:var(--mk-text);box-shadow:0 0 0 1px var(--mk-linie),0 8px 18px -14px rgba(0,0,0,.5);font-size:13px;line-height:1.3}
.mk-rm-schatten{fill:rgba(0,0,0,.14)}
.mk-rm-reifen{fill:rgba(12,12,14,.92)}.mk-rm-felge{fill:rgba(255,255,255,.82)}.mk-rm-speichen path{stroke:rgba(0,0,0,.4);stroke-width:2.5;stroke-linecap:round}.mk-rm-nabe{fill:rgba(0,0,0,.6)}
.mk-rm-scheibe{fill:rgba(255,255,255,.34)}
.mk-rm-rad{transform-box:fill-box;transform-origin:center}

/* Transporter: Name und Telefon als HTML auf der Seitenwand */
.mk-rm-wagenbuehne{width:min(540px,100%);display:flex;flex-direction:column;gap:22px}
.mk-rm-wagen{position:relative;container-type:inline-size}
.mk-rm-wagen-svg{overflow:visible}
.mk-rm-aufbau,.mk-rm-kabine{fill:var(--mk-knopf)}
.mk-rm-kabine{filter:brightness(.92)}
.mk-rm-dachkante{fill:rgba(255,255,255,.12)}
.mk-rm-laderaum{fill:rgba(0,0,0,.34)}
.mk-rm-boden{stroke:rgba(255,255,255,.25);stroke-width:3}
.mk-rm-fuge{stroke:rgba(255,255,255,.14);stroke-width:2}
.mk-rm-griff{stroke:rgba(255,255,255,.4);stroke-width:4;stroke-linecap:round}
.mk-rm-licht{fill:rgba(255,255,255,.9)}.mk-rm-ruecklicht{fill:var(--mk-knopf)}
.mk-rm-ladung{fill:var(--rm-pappe);stroke:rgba(0,0,0,.18);stroke-width:1.5}
.mk-rm-ladung:nth-child(even){fill:var(--rm-pappe-d)}
.mk-rm-wagen-schrift{position:absolute;left:38.5%;width:30%;top:19%;height:56%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;text-align:center;color:var(--mk-knopf-text)}
.mk-rm-wagen-schrift b{font-size:clamp(10.5px,3.9cqw,22px);line-height:1.15;overflow-wrap:anywhere}
.mk-rm-wagen-schrift small{font-size:clamp(10px,2.5cqw,14px);opacity:.85;font-variant-numeric:tabular-nums;white-space:nowrap}
.mk-rm-strasse{height:3px;margin:-20px 4% 0;border-radius:2px;background:repeating-linear-gradient(90deg,var(--mk-linie) 0 34px,transparent 34px 60px)}

/* Grundriss */
.mk-rm-plan{width:min(480px,100%);padding:20px 20px 16px;border-radius:22px;background:var(--mk-grund);color:var(--mk-text);box-shadow:var(--rm-schatten),0 0 0 1px var(--mk-linie)}
.mk-rm-plan-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:16px}
.mk-rm-boden-plan{fill:var(--mk-karte)}
.mk-rm-wand{fill:none;stroke:var(--mk-text);stroke-width:7;stroke-linecap:square;stroke-linejoin:miter}
.mk-rm-wand--innen{stroke-width:4}
.mk-rm-raumname{font-size:clamp(10px,2.5cqw,12px);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-leise)}
.mk-rm-moebel{fill:color-mix(in srgb,var(--mk-akzent) 30%,var(--mk-karte));stroke:var(--mk-akzent);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.mk-rm-geist{fill:none;stroke:var(--mk-leise);stroke-width:1.2;stroke-dasharray:4 4;opacity:.5}
.mk-rm-tuerbogen{fill:none;stroke:var(--mk-leise);stroke-width:1.2;stroke-dasharray:3 3}
.mk-rm-plan-fuss{display:flex;gap:20px;margin-top:12px;font-size:12.5px;color:var(--mk-leise)}
.mk-rm-punkt{display:inline-block;width:11px;height:11px;margin-right:7px;border-radius:3px;vertical-align:-1px;background:color-mix(in srgb,var(--mk-akzent) 30%,var(--mk-karte));box-shadow:inset 0 0 0 1.5px var(--mk-akzent)}
.mk-rm-punkt--leer{background:none;box-shadow:none;border:1.5px dashed var(--mk-leise)}

/* Hausschnitt */
.mk-rm-haus{width:min(480px,100%)}
.mk-rm-erde{fill:color-mix(in srgb,var(--mk-text) 7%,transparent)}
.mk-rm-grundlinie{stroke:var(--mk-text);stroke-width:2.5}
.mk-rm-zone>*{fill:var(--mk-karte);stroke:var(--mk-text);stroke-width:2.5;stroke-linejoin:round}
.mk-rm-zone--an>*{fill:color-mix(in srgb,var(--mk-akzent) 24%,var(--mk-grund))}
.mk-rm-dachlinie{fill:none;stroke:var(--mk-text);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}
.mk-rm-fenster{fill:var(--mk-grund);stroke:var(--mk-text);stroke-width:2}
.mk-rm-haustuer{fill:var(--mk-band);stroke:var(--mk-text);stroke-width:2}
.mk-rm-zonentext{font-size:clamp(10px,3cqw,14px);font-weight:700;color:var(--mk-text)}

/* Container */
.mk-rm-mulde{width:min(480px,100%);display:flex;flex-direction:column;align-items:stretch;gap:16px}
.mk-rm-mulde-svg{overflow:visible}
.mk-rm-mulde-wand{fill:var(--mk-knopf)}
.mk-rm-rippe{stroke:rgba(255,255,255,.1);stroke-width:8}
.mk-rm-mulde-rand{stroke:color-mix(in srgb,var(--mk-knopf) 80%,#000);stroke-width:10;stroke-linecap:round}
.mk-rm-oese{fill:none;stroke:color-mix(in srgb,var(--mk-knopf) 80%,#000);stroke-width:6;stroke-linecap:round}
.mk-rm-rolle{fill:rgba(12,12,14,.88)}
.mk-rm-stueck{fill:color-mix(in srgb,var(--mk-akzent) calc(18% + var(--k) * 9%),var(--mk-karte));stroke:rgba(0,0,0,.28);stroke-width:1.5}
.mk-rm-fuell{display:flex;align-items:center;gap:12px;font-size:13px;color:var(--mk-leise)}
.mk-rm-fuell-balken{flex:1;height:10px;border-radius:5px;background:var(--mk-karte);box-shadow:inset 0 0 0 1px var(--mk-linie);overflow:hidden}
.mk-rm-fuell-balken i{display:block;width:78%;height:100%;border-radius:inherit;background:var(--mk-akzent);transform-origin:left}

/* Sortierung */
.mk-rm-sort{width:min(500px,100%);padding-top:8px}
.mk-rm-band-lauf{height:12px;border-radius:6px;background:var(--rm-grau);overflow:hidden;box-shadow:0 10px 20px -12px rgba(0,0,0,.5)}
.mk-rm-band-lauf i{display:block;width:200%;height:100%;background:repeating-linear-gradient(90deg,rgba(255,255,255,.18) 0 10px,transparent 10px 26px)}
.mk-rm-tonnen{display:flex;justify-content:center;gap:clamp(8px,2.4vw,18px);margin-top:88px}
.mk-rm-tonne{position:relative;flex:0 1 116px;min-width:0;text-align:center}
.mk-rm-tonne:nth-child(1){--rm-farbe:var(--mk-akzent)}.mk-rm-tonne:nth-child(2){--rm-farbe:var(--rm-grau)}
.mk-rm-tonne:nth-child(3){--rm-farbe:var(--mk-knopf)}.mk-rm-tonne:nth-child(4){--rm-farbe:var(--mk-leise)}
.mk-rm-ding{position:absolute;left:0;right:0;top:-80px;width:min(52px,90%);height:52px;margin:0 auto;fill:none;stroke:var(--mk-text);stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round}
.mk-rm-tonne-svg{display:block;width:100%;max-width:112px;height:auto;margin:0 auto;filter:drop-shadow(0 14px 14px rgba(0,0,0,.18))}
.mk-rm-korpus{fill:var(--rm-farbe)}
.mk-rm-deckel{fill:color-mix(in srgb,var(--rm-farbe) 78%,#000);transform-box:fill-box;transform-origin:0 100%}
.mk-rm-rillen{stroke:rgba(255,255,255,.22);stroke-width:4;stroke-linecap:round}
.mk-rm-tonne b{display:block;margin-top:12px;font-size:clamp(10px,2.9vw,14.5px);font-weight:700;overflow-wrap:break-word}

/* Treppe im Schnitt */
.mk-rm-treppe{width:min(480px,100%)}
.mk-rm-schacht{fill:var(--mk-karte)}
.mk-rm-stufen{fill:color-mix(in srgb,var(--mk-text) 10%,var(--mk-karte));stroke:var(--mk-text);stroke-width:3;stroke-linejoin:round}
.mk-rm-podest{fill:var(--mk-text)}
.mk-rm-stab{stroke:var(--mk-leise);stroke-width:2;opacity:.7}
.mk-rm-handlauf{stroke:var(--mk-text);stroke-width:5;stroke-linecap:round}
.mk-rm-tuer{fill:var(--mk-grund);stroke:var(--mk-text);stroke-width:2.5}
.mk-rm-tuer--haus{fill:var(--mk-band)}
.mk-rm-tuerglas{fill:rgba(255,255,255,.35)}
.mk-rm-knauf{fill:var(--mk-text)}
.mk-rm-traeger{transform:translate(355px,278px)}
.mk-rm-karton-f{fill:var(--rm-pappe-d);stroke:rgba(0,0,0,.3);stroke-width:1.5}
.mk-rm-karton-l{stroke:rgba(255,255,255,.55);stroke-width:5}
.mk-rm-gurt{fill:none;stroke:var(--mk-akzent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}

/* Route */
.mk-rm-strecke{width:min(500px,100%);border-radius:24px;overflow:hidden;background:var(--mk-grund);color:var(--mk-text);box-shadow:var(--rm-schatten),0 0 0 1px var(--mk-linie)}
.mk-rm-karte-svg{background:var(--mk-karte)}
.mk-rm-netz path{fill:none;stroke:color-mix(in srgb,var(--mk-text) 9%,var(--mk-karte));stroke-width:10;stroke-linecap:round}
.mk-rm-netz .mk-rm-fluss{stroke:color-mix(in srgb,var(--mk-akzent) 16%,var(--mk-karte));stroke-width:20}
.mk-rm-weg-grund{fill:none;stroke:var(--mk-grund);stroke-width:14;stroke-linecap:round}
.mk-rm-weg{fill:none;stroke:var(--mk-akzent);stroke-width:6;stroke-linecap:round}
.mk-rm-licht-weg{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-dasharray:.015 .985;opacity:0}
.mk-rm-start-hof{fill:var(--mk-akzent);opacity:.18}.mk-rm-start{fill:var(--mk-akzent);stroke:var(--mk-grund);stroke-width:3}
.mk-rm-ziel{transform-box:fill-box;transform-origin:50% 100%}
.mk-rm-ziel-nadel{fill:var(--mk-knopf)}.mk-rm-ziel-loch{fill:var(--mk-knopf-text)}.mk-rm-ziel-puls{fill:var(--mk-akzent);opacity:.16}
.mk-rm-strecke-fuss{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:18px 20px 6px}
.mk-rm-strecke-fuss p{display:flex;gap:10px;align-items:center;margin:0;min-width:0}
.mk-rm-strecke-fuss i{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-weight:700;font-size:13px}
.mk-rm-a{background:color-mix(in srgb,var(--mk-akzent) 16%,var(--mk-grund));color:var(--mk-akzent)}
.mk-rm-b{background:var(--mk-knopf);color:var(--mk-knopf-text)}
.mk-rm-strecke-fuss small{display:block;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mk-leise)}
.mk-rm-strecke-fuss b{display:block;font-size:15px;line-height:1.25;overflow-wrap:anywhere}
.mk-rm-schema{display:block;padding:4px 20px 16px;font-size:11.5px;color:var(--mk-leise)}

/* Zählerstände */
.mk-rm-prot{position:relative;width:min(380px,100%);padding:30px 26px 18px;border-radius:14px;background:#fff;color:#1d1d1f;box-shadow:var(--rm-papier);transform:rotate(-1.5deg)}
.mk-rm-prot-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;padding-right:44px}
.mk-rm-prot-kopf b{font-size:19px}
.mk-rm-feld{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:13px 0;border-bottom:1px dashed rgba(0,0,0,.14)}
.mk-rm-feld:last-child{border-bottom:0}
.mk-rm-feld small{font-size:13.5px;color:rgba(0,0,0,.6)}
.mk-rm-ziffern{display:flex;gap:3px}
.mk-rm-ziffern i{display:grid;place-items:center;width:22px;height:30px;border-radius:5px;background:rgba(0,0,0,.05);font:600 15px/1 ui-monospace,Menlo,Consolas,monospace;font-style:normal;color:#1d1d1f}
.mk-rm-schluessel{position:absolute;top:-26px;right:24px;width:34px;height:70px;fill:none;stroke:var(--rm-tinte);stroke-width:5;stroke-linecap:round;overflow:visible}
.mk-rm-schluessel .mk-rm-loch{stroke-width:3}
.mk-rm-schluessel-k{transform-box:view-box;transform-origin:30px 16px;transform:rotate(-6deg)}

/* Kartonstapel */
.mk-rm-stapel{position:relative;width:min(440px,100%);aspect-ratio:1.18;container-type:inline-size}
.mk-rm-kiste{position:absolute;width:29%;aspect-ratio:1.15;left:calc(4% + var(--x) * 32%);bottom:calc(6% + var(--y) * 29.8%);border-radius:6px;
  background:linear-gradient(180deg,var(--rm-pappe-d) 0 13%,var(--rm-pappe) 13% 100%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.08),inset 0 -8px 0 rgba(0,0,0,.05),0 16px 24px -14px rgba(0,0,0,.45)}
.mk-rm-kiste-band{position:absolute;left:43%;width:14%;top:0;height:42%;background:rgba(255,255,255,.4);box-shadow:inset 0 0 0 1px rgba(0,0,0,.04)}
.mk-rm-etikett{position:absolute;left:8%;right:8%;bottom:12%;padding:5% 7%;border-radius:3px;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.14);transform:rotate(-2deg);transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.mk-rm-kiste:nth-child(even) .mk-rm-etikett{transform:rotate(1.5deg)}
.mk-rm-etikett b{display:block;font-size:max(10px,3.1cqw);line-height:1.15;font-weight:800;color:var(--mk-band);overflow-wrap:anywhere}
.mk-rm-etikett small{display:block;margin-top:1px;font-size:max(10px,2.5cqw);color:rgba(0,0,0,.58)}
.mk-rm-kiste:hover .mk-rm-etikett{transform:scale(1.08) rotate(0)}
.mk-rm-pfeile{position:absolute;right:8%;top:18%;width:15%;fill:none;stroke:rgba(0,0,0,.4);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mk-rm-stapel-boden{position:absolute;left:0;right:0;bottom:3%;height:5%;border-radius:50%;background:radial-gradient(closest-side,rgba(0,0,0,.2),transparent)}
.mk-rm-stapel-muster{position:absolute;top:2%;right:0}
@container (max-width:380px){.mk-rm-etikett small,.mk-rm-pfeile{display:none}}

/* Möbelliste */
.mk-rm-block{position:relative;width:min(380px,100%);padding:40px 24px 18px;border-radius:16px;background:#fff;color:#1d1d1f;box-shadow:var(--rm-papier);transform:rotate(1.5deg)}
.mk-rm-spirale{position:absolute;top:-10px;left:22px;right:22px;height:24px;background:radial-gradient(circle at 50% 70%,rgba(0,0,0,.6) 0 4px,transparent 4.5px) 0 0/22px 24px repeat-x,
  linear-gradient(90deg,transparent 0 9px,rgba(0,0,0,.35) 9px 13px,transparent 13px) 0 0/22px 14px repeat-x}
.mk-rm-block-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mk-rm-block-kopf b{font-size:19px}
.mk-rm-liste{list-style:none;margin:0;padding:0}
.mk-rm-liste li{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid rgba(0,0,0,.08);font-size:14.5px;transition:background .25s}
.mk-rm-liste li:last-child{border-bottom:0}
.mk-rm-liste li:hover{background:rgba(0,0,0,.03)}
.mk-rm-liste b{flex:1;font-weight:600;min-width:0}
.mk-rm-ikon{flex:none;width:24px;height:24px;fill:none;stroke:var(--rm-tinte);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mk-rm-zahl{flex:none;min-width:26px;padding:2px 7px;border-radius:999px;background:rgba(0,0,0,.06);font-size:12px;text-align:center;font-variant-numeric:tabular-nums}
.mk-rm-kasten{flex:none;width:24px;height:24px}
.mk-rm-kasten rect{fill:color-mix(in srgb,var(--mk-akzent) 14%,#fff);stroke:var(--rm-tinte);stroke-width:1.6}
.mk-rm-kasten path{fill:none;stroke:var(--rm-tinte);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* Abreißkalender ohne Datum */
.mk-rm-abreiss{width:min(380px,100%)}
.mk-rm-abreiss-kopf{display:flex;justify-content:space-around;height:30px;padding:0 22%;border-radius:16px 16px 0 0;background:var(--mk-knopf)}
.mk-rm-abreiss-kopf i{width:12px;height:12px;margin-top:9px;border-radius:50%;background:var(--mk-grund);box-shadow:inset 0 2px 3px rgba(0,0,0,.35)}
.mk-rm-abreiss-blaetter{position:relative;height:190px;perspective:900px;background:#fff;border-radius:0 0 12px 12px;
  box-shadow:0 4px 0 -1px #fff,0 4px 0 0 rgba(0,0,0,.08),0 8px 0 -1px #fff,0 8px 0 0 rgba(0,0,0,.07),var(--rm-papier)}
.mk-rm-blatt-tipp{position:absolute;inset:0;display:grid;place-content:center;gap:8px;padding:16px 22px;text-align:center;background:#fff;color:#1d1d1f;border-radius:0 0 12px 12px;opacity:0;transform-origin:50% 0;backface-visibility:hidden}
.mk-rm-blatt-tipp small{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--rm-tinte);font-weight:700}
.mk-rm-blatt-tipp b{font-size:clamp(20px,6vw,27px);line-height:1.2}
.mk-rm-blatt-ziel{opacity:1}
.mk-rm-blatt-ziel b{color:var(--rm-tinte)}
.mk-rm-abreiss-liste{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.mk-rm-abreiss-liste li{display:flex;gap:12px;align-items:center;font-size:14.5px;line-height:1.3}
.mk-rm-abreiss-liste i{flex:none;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--mk-karte);font-style:normal;font-size:12px;font-weight:700;box-shadow:inset 0 0 0 1px var(--mk-linie)}
.mk-rm-abreiss-ziel{font-weight:700}.mk-rm-abreiss-ziel i{background:var(--mk-knopf);color:var(--mk-knopf-text);box-shadow:none}

/* Halteverbot */
.mk-rm-hv{width:min(440px,100%)}
.mk-rm-hv-svg{overflow:visible}
.mk-rm-fahrbahn{fill:color-mix(in srgb,var(--mk-text) 9%,transparent)}
.mk-rm-bordstein{stroke:var(--mk-text);stroke-width:4;opacity:.5}
.mk-rm-markierung{stroke:var(--mk-grund);stroke-width:4;stroke-linecap:round}
.mk-rm-mast{fill:rgba(140,140,148,1)}
.mk-rm-hv-ring{fill:#c8102e;stroke:#fff;stroke-width:4}
.mk-rm-hv-blau{fill:#1f4fa0}
.mk-rm-hv-kreuz{stroke:#c8102e;stroke-width:11}
.mk-rm-zusatz{transform-box:fill-box;transform-origin:50% 0}
.mk-rm-zusatz-f{fill:#fff;stroke:#111;stroke-width:3}
.mk-rm-zusatz-t{font-size:clamp(12px,4.6cqw,21px);font-weight:800;color:#111;transform-origin:50% -60%}
.mk-rm-schild{filter:drop-shadow(0 18px 18px rgba(0,0,0,.2))}
.mk-rm-park-aufbau,.mk-rm-park-kabine{fill:var(--mk-knopf)}
.mk-rm-hv-fuss{margin:14px 0 0;text-align:center}

/* Lagerabteil */
.mk-rm-lager{width:min(400px,100%)}
.mk-rm-lager-kopf{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
.mk-rm-lager-kopf b{font-size:15px;letter-spacing:.04em}
.mk-rm-lager-tor{position:relative;aspect-ratio:1.15;border-radius:12px 12px 0 0;background:var(--mk-band);box-shadow:var(--rm-schatten),0 0 0 1px var(--mk-linie)}
.mk-rm-lager-innen{position:absolute;inset:16px 16px 0;overflow:hidden;background:linear-gradient(180deg,color-mix(in srgb,var(--mk-band) 55%,#000),color-mix(in srgb,var(--mk-band) 80%,#fff 4%))}
.mk-rm-lager-innen i{position:absolute;left:calc(var(--x) * 1%);bottom:calc(3% + var(--y) * 30%);width:calc(var(--b) * 1%);aspect-ratio:1.1;border-radius:4px;
  background:linear-gradient(180deg,var(--rm-pappe-d) 0 12%,var(--rm-pappe) 12%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 8px 14px -8px rgba(0,0,0,.6)}
.mk-rm-lager-innen i::after{content:"";position:absolute;left:43%;width:14%;top:0;height:40%;background:rgba(255,255,255,.35)}
.mk-rm-lampe{position:absolute;top:0;left:20%;right:20%;height:55%;background:radial-gradient(ellipse at 50% 0,rgba(255,255,255,.32),transparent 70%)}
.mk-rm-rolltor{position:absolute;inset:16px 16px 0;clip-path:inset(0 0 84% 0);
  background:repeating-linear-gradient(180deg,color-mix(in srgb,var(--mk-karte) 94%,#000) 0 15px,color-mix(in srgb,var(--mk-karte) 78%,#000) 15px 17px)}
.mk-rm-lager-sockel{height:14px;border-radius:0 0 10px 10px;background:var(--rm-grau)}

/* NEUTRAL: Register mit nummerierten Reitern */
.mk-rm-kartei{position:relative;width:min(440px,calc(100% - 24px));aspect-ratio:1.55;margin-top:34px}
.mk-rm-karte{position:absolute;inset:0;padding:26px 26px 22px;border-radius:4px 16px 16px 16px;background:var(--mk-grund);color:var(--mk-text);box-shadow:0 0 0 1px var(--mk-linie),0 20px 40px -26px rgba(0,0,0,.55);
  transform:translate(calc(var(--k) * 7px),calc(var(--k) * -7px));z-index:calc(10 - var(--k))}
.mk-rm-reiter{position:absolute;top:-30px;left:calc(var(--k) * 58px);width:52px;height:31px;padding-top:7px;border-radius:10px 10px 0 0;background:var(--mk-grund);color:var(--mk-text);text-align:center;
  box-shadow:0 -1px 0 var(--mk-linie),1px 0 0 var(--mk-linie),-1px 0 0 var(--mk-linie);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.mk-rm-karte:first-child .mk-rm-reiter{background:var(--mk-knopf);color:var(--mk-knopf-text)}
.mk-rm-karte b{display:block;font-size:clamp(18px,4.6vw,22px);line-height:1.2;margin-bottom:10px}
.mk-rm-karte p{margin:0 0 12px;font-size:14.5px;line-height:1.55;color:var(--mk-leise)}
.mk-rm-karte>i{display:block;height:7px;width:78%;margin-top:10px;border-radius:4px;background:var(--mk-linie)}
.mk-rm-karte>i+i{width:54%}
.mk-rm-karte:hover{z-index:40!important}

/* NEUTRAL: Ordnerregal */
.mk-rm-regal{width:min(460px,100%)}
.mk-rm-regal-reihe{display:flex;align-items:flex-end;justify-content:center;gap:6px;height:300px;padding:0 4%}
.mk-rm-ordner{position:relative;flex:0 1 76px;min-width:0;height:270px;display:flex;flex-direction:column;align-items:center;padding:16px 0 18px;border-radius:6px 6px 3px 3px;
  box-shadow:inset 3px 0 0 rgba(255,255,255,.18),inset -3px 0 0 rgba(0,0,0,.18),0 12px 18px -12px rgba(0,0,0,.5);transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.mk-rm-ordner:nth-child(5n+1){background:var(--mk-knopf)}.mk-rm-ordner:nth-child(5n+2){background:var(--rm-grau)}.mk-rm-ordner:nth-child(5n+3){background:var(--rm-tinte)}
.mk-rm-ordner:nth-child(5n+4){background:color-mix(in srgb,var(--mk-knopf) 70%,#000)}.mk-rm-ordner:nth-child(5n){background:color-mix(in srgb,var(--mk-text) 55%,var(--mk-grund))}
.mk-rm-ruecken-schild{writing-mode:vertical-rl;transform:rotate(180deg);max-height:205px;padding:12px 7px;border-radius:4px;background:#fff;color:#1d1d1f;font-size:12.5px;font-weight:700;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.mk-rm-griffloch{margin-top:auto;width:22px;height:22px;border-radius:50%;background:rgba(0,0,0,.35);box-shadow:inset 0 2px 3px rgba(0,0,0,.5),0 0 0 3px rgba(255,255,255,.45)}
.mk-rm-ordner:hover{transform:translateY(-26px)!important}
.mk-rm-regal-brett{height:14px;margin-top:-1px;border-radius:4px;background:var(--rm-grau);box-shadow:0 16px 26px -14px rgba(0,0,0,.5)}

/* NEUTRAL: Notizbuch auf dem Tisch */
.mk-rm-tisch{position:relative;width:min(460px,100%);padding:34px 4% 46px}
.mk-rm-heft{position:relative;width:84%;margin:0 auto;padding:22px 22px 24px 46px;border-radius:6px 14px 14px 6px;color:#1d1d1f;box-shadow:var(--rm-papier);transform:rotate(-2.5deg);
  background:linear-gradient(90deg,transparent 31px,color-mix(in srgb,var(--mk-akzent) 45%,#fff) 31px 33px,transparent 33px),repeating-linear-gradient(180deg,#fff 0 37px,rgba(0,0,0,.09) 37px 38px);background-color:#fff}
.mk-rm-heft-kopf{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--rm-tinte);overflow-wrap:anywhere}
.mk-rm-heft ol{list-style:none;margin:10px 0 0;padding:0;counter-reset:rm}
.mk-rm-heft li{display:flex;align-items:center;gap:10px;min-height:38px;font-size:17px;font-style:italic;counter-increment:rm}
.mk-rm-heft li::before{content:counter(rm) ".";font-style:normal;font-weight:700;color:var(--rm-tinte)}
.mk-rm-heft li b{font-weight:600}
.mk-rm-stift{position:absolute;right:0;bottom:16%;width:46%;transform:rotate(-26deg);filter:drop-shadow(0 10px 8px rgba(0,0,0,.25));overflow:visible}
.mk-rm-stift-schaft{fill:var(--mk-knopf)}.mk-rm-stift-holz{fill:var(--rm-pappe)}.mk-rm-stift-mine{fill:rgba(0,0,0,.8)}.mk-rm-stift-kappe{fill:var(--rm-grau)}
.mk-rm-tasse{position:absolute;left:0;top:0;width:76px;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--rm-pappe-d) 62%,#000) 0 30%,color-mix(in srgb,var(--rm-pappe-d) 78%,#000) 38%,var(--rm-pappe-d) 43%,#fff 46% 100%);box-shadow:0 14px 22px -10px rgba(0,0,0,.4),inset 0 0 0 1px rgba(0,0,0,.06)}
.mk-rm-tasse i{position:absolute;right:-16px;top:50%;width:22px;height:14px;margin-top:-7px;border-radius:0 8px 8px 0;border:5px solid #fff;border-left:0}

/* NEUTRAL: Puzzle */
.mk-rm-legespiel{width:min(480px,100%)}
.mk-rm-legespiel-svg{overflow:visible;filter:drop-shadow(0 18px 24px rgba(0,0,0,.18))}
.mk-rm-teil{fill:var(--mk-grund);stroke:color-mix(in srgb,var(--mk-text) 30%,transparent);stroke-width:2.5;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transition:transform .3s cubic-bezier(.34,1.5,.64,1)}
.mk-rm-teil:nth-of-type(2),.mk-rm-teil:nth-of-type(3){fill:var(--mk-karte)}
.mk-rm-teil:nth-of-type(4){fill:var(--mk-knopf);stroke:none}
.mk-rm-teil:hover{transform:translateY(-6px)}
.mk-rm-legespiel-text{position:absolute;inset:0;pointer-events:none}
.mk-rm-teiltext{max-width:30%;white-space:normal;font-size:clamp(11px,3.4cqw,17px);font-weight:700;color:var(--mk-text)}
.mk-rm-teiltext:nth-child(4){color:var(--mk-knopf-text)}

@media (max-width:860px){.mk-rm-prot,.mk-rm-block{transform:none}}

@media (prefers-reduced-motion:no-preference){
  /* Transporter: fährt vor, federt aus, die Ladung kommt Stück für Stück */
  .mk-rm-wagen{animation:mk-rm-vorfahren 2.4s cubic-bezier(.2,.75,.25,1) .2s both}
  .mk-rm-wagen .mk-rm-rad{animation:mk-rm-rollen 2.4s cubic-bezier(.2,.75,.25,1) .2s both}
  .mk-rm-wagen-koerper{animation:mk-rm-federn 1.4s ease-out 2.5s both}
  .mk-rm-ladung{animation:mk-rm-laden 1.3s cubic-bezier(.34,1.35,.64,1) both;animation-delay:calc(var(--k) * .3s + 2.7s)}
  .mk-rm-wagenbuehne .mk-rm-chips li{animation:mk-rm-hoch 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .28s + 2.9s)}
  /* Grundriss: Möbel gleiten zur Tür hinaus, die Haken folgen */
  .mk-rm-moebel{animation:mk-rm-raus 12s cubic-bezier(.55,0,.3,1) infinite both;animation-delay:calc(var(--k) * .32s)}
  .mk-rm-plan .mk-rm-haken{animation:mk-rm-haken-zyklus 12s cubic-bezier(.34,1.5,.64,1) infinite both;animation-delay:calc(var(--k) * .6s)}
  /* Hausschnitt: Bereiche leuchten nacheinander auf */
  .mk-rm-zone--an>*{animation:mk-rm-zone-an 1.6s ease both;animation-delay:calc(var(--k) * .45s + .4s)}
  .mk-rm-zonentext{animation:mk-rm-hoch-mitte 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .45s + .9s)}
  .mk-rm-haus .mk-rm-haken{animation:mk-rm-plopp 1.2s cubic-bezier(.34,1.6,.64,1) both,mk-rm-atmen 6s ease-in-out infinite;animation-delay:calc(var(--k) * .45s + 1.3s),calc(var(--k) * .45s + 3s)}
  /* Container: Teile fallen hinein, der Füllstand steigt */
  .mk-rm-stueck{animation:mk-rm-fallen 1.5s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(var(--k) * .38s + .3s)}
  .mk-rm-fuell-balken i{animation:mk-rm-fuellen 3.4s cubic-bezier(.65,0,.35,1) .6s both}
  .mk-rm-mulde .mk-rm-chips li{animation:mk-rm-hoch 1.2s cubic-bezier(.16,1,.3,1) 3.2s both}
  /* Sortierung: Band läuft, Dinge fallen in ihren Behälter, der Deckel klappt */
  .mk-rm-band-lauf i{animation:mk-rm-band 6s linear infinite}
  .mk-rm-ding{animation:mk-rm-einwurf 8s cubic-bezier(.55,0,.4,1) infinite both;animation-delay:calc(var(--k) * 1.2s)}
  .mk-rm-deckel{animation:mk-rm-deckel 8s ease infinite both;animation-delay:calc(var(--k) * 1.2s)}
  /* Treppe: Karton am Gurt Stufe für Stufe hinunter bis vor die Haustür */
  .mk-rm-traeger{animation:mk-rm-tragen 12s cubic-bezier(.45,.05,.55,.95) infinite both}
  .mk-rm-karton-k{animation:mk-rm-wackeln 1.2s ease-in-out infinite alternate}
  /* Route: zeichnet sich, das Ziel springt auf, ein Lichtpunkt fährt */
  .mk-rm-weg{stroke-dasharray:1;animation:mk-rm-zeichnen 2.6s cubic-bezier(.65,0,.35,1) .4s both}
  .mk-rm-ziel{animation:mk-rm-plopp 1.2s cubic-bezier(.34,1.6,.64,1) 2.7s both}
  .mk-rm-ziel-puls{transform-box:fill-box;transform-origin:center;animation:mk-rm-puls 3s ease-out 3.4s infinite}
  .mk-rm-licht-weg{animation:mk-rm-licht 6s cubic-bezier(.45,0,.55,1) 3.2s infinite}
  .mk-rm-strecke-fuss p{animation:mk-rm-hoch 1.2s cubic-bezier(.16,1,.3,1) both}.mk-rm-strecke-fuss p+p{animation-delay:.35s}
  /* Zählerstände: Ziffern schreiben sich ein, der Schlüssel pendelt */
  .mk-rm-feld{animation:mk-rm-hoch 1.2s cubic-bezier(.16,1,.3,1) both}
  .mk-rm-feld:nth-of-type(2){animation-delay:.3s}.mk-rm-feld:nth-of-type(3){animation-delay:.6s}.mk-rm-feld:nth-of-type(4){animation-delay:.9s}
  .mk-rm-ziffern i{animation:mk-rm-ziffer 1.2s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--k) * .25s + 1.1s)}
  .mk-rm-schluessel-k{animation:mk-rm-pendeln 5s ease-in-out infinite alternate}
  /* Kartons: stapeln sich, die Etiketten schreiben sich */
  .mk-rm-kiste{animation:mk-rm-stapeln 1.4s cubic-bezier(.34,1.25,.64,1) both;animation-delay:calc(var(--k) * .34s + .3s)}
  .mk-rm-etikett b,.mk-rm-etikett small{animation:mk-rm-schreiben 1.4s steps(12) both;animation-delay:calc(var(--k) * .34s + 1.5s)}
  /* Möbelliste: Haken Zeile für Zeile */
  .mk-rm-liste li{animation:mk-rm-hoch 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .3s)}
  .mk-rm-kasten path{stroke-dasharray:1;animation:mk-rm-zeichnen 1.2s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--k) * .42s + 1.6s)}
  /* Abreißkalender: Blatt um Blatt, überblendet ohne Lücke, zuletzt der Umzugstag */
  .mk-rm-n4 .mk-rm-blatt-tipp{animation:mk-rm-blatt4 12s ease infinite both;animation-delay:calc(var(--k) * 3s - .4s)}
  .mk-rm-n5 .mk-rm-blatt-tipp{animation:mk-rm-blatt5 15s ease infinite both;animation-delay:calc(var(--k) * 3s - .4s)}
  .mk-rm-abreiss-liste li{animation:mk-rm-seit 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + .4s)}
  /* Halteverbot: Schild steht auf, Zusatzschild pendelt aus, der Wagen parkt ein */
  .mk-rm-schild{animation:mk-rm-aufstellen 1.6s cubic-bezier(.34,1.3,.64,1) .2s both}
  .mk-rm-zusatz,.mk-rm-zusatz-t{animation:mk-rm-auspendeln 2.4s cubic-bezier(.3,1.8,.5,1) 1.2s both}
  .mk-rm-zusatz-t{animation-name:mk-rm-auspendeln-text}
  .mk-rm-park{animation:mk-rm-einparken 2.4s cubic-bezier(.2,.75,.25,1) 1.6s both}
  .mk-rm-park .mk-rm-rad{animation:mk-rm-rollen 2.4s cubic-bezier(.2,.75,.25,1) 1.6s both}
  /* Lagerabteil: Rolltor fährt hoch und wieder herunter */
  .mk-rm-rolltor{animation:mk-rm-rolltor 12s cubic-bezier(.65,0,.35,1) .4s infinite both}
  .mk-rm-lager-innen i{animation:mk-rm-hoch 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .25s + 1.2s)}
  /* Register: Karten fächern auf, die vorderste und ihr Reiter wechseln */
  .mk-rm-karte{animation:mk-rm-auffaechern 1.4s cubic-bezier(.16,1,.3,1) both,mk-rm-vorne calc(var(--n) * 3.6s) steps(1) infinite;animation-delay:calc(var(--k) * .3s),calc(var(--k) * 3.6s + 2s)}
  .mk-rm-reiter{animation:mk-rm-reiter-an calc(var(--n) * 3.6s) steps(1) infinite;animation-delay:calc(var(--k) * 3.6s + 2s)}
  .mk-rm-kartei:hover :is(.mk-rm-karte,.mk-rm-reiter){animation-play-state:paused}
  /* Ordnerregal: Reihe kommt herein, ein Ordner nach dem anderen wird herausgezogen */
  .mk-rm-regal-reihe{animation:mk-rm-hoch 1.4s cubic-bezier(.16,1,.3,1) .2s both}
  .mk-rm-ordner{animation:mk-rm-ziehen calc(var(--n) * 2.8s) cubic-bezier(.45,0,.3,1) infinite;animation-delay:calc(var(--k) * 2.8s + 1.6s)}
  .mk-rm-regal:hover .mk-rm-ordner{animation-play-state:paused}
  /* Notizbuch: Schritte schreiben sich Zeile für Zeile, der Stift kritzelt mit */
  .mk-rm-heft li b{animation:mk-rm-schreiben 1.6s steps(14) both;animation-delay:calc(var(--k) * .45s + .6s)}
  .mk-rm-stift{animation:mk-rm-kritzeln 6s ease-in-out infinite}
  .mk-rm-tasse{animation:mk-rm-hoch 1.4s cubic-bezier(.16,1,.3,1) .2s backwards}
  /* Puzzle: Teile gleiten zusammen und rasten ein (backwards, damit Hover danach greift) */
  .mk-rm-teil{animation:mk-rm-einrasten 1.6s cubic-bezier(.34,1.25,.64,1) backwards;animation-delay:calc(var(--k) * .35s + .3s)}
  .mk-rm-teiltext{animation:mk-rm-hoch-mitte 1.2s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .35s + 1.5s)}
}
@keyframes mk-rm-vorfahren{from{transform:translateX(-118%)}to{transform:none}}
@keyframes mk-rm-rollen{from{transform:rotate(-900deg)}to{transform:none}}
@keyframes mk-rm-federn{0%,100%{transform:none}30%{transform:translateY(3px)}60%{transform:translateY(-1px)}}
@keyframes mk-rm-laden{from{opacity:0;transform:translateY(-70px)}to{opacity:1;transform:none}}
@keyframes mk-rm-hoch{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes mk-rm-hoch-mitte{from{opacity:0;transform:translate(-50%,-10%)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mk-rm-seit{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes mk-rm-raus{0%,9%{opacity:1;transform:none}32%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(.35)}33%,88%{opacity:0;transform:none}100%{opacity:1;transform:none}}
@keyframes mk-rm-haken-zyklus{0%,28%{transform:scale(0)}38%,88%{transform:none}96%,100%{transform:scale(0)}}
@keyframes mk-rm-zone-an{from{fill-opacity:0}to{fill-opacity:1}}
@keyframes mk-rm-plopp{from{opacity:0;transform:scale(0)}to{opacity:1;transform:none}}
@keyframes mk-rm-atmen{0%,100%{transform:none}50%{transform:scale(1.15)}}
@keyframes mk-rm-fallen{from{opacity:0;transform:translateY(-190px)}20%{opacity:1}to{opacity:1;transform:none}}
@keyframes mk-rm-fuellen{from{transform:scaleX(0)}to{transform:none}}
@keyframes mk-rm-band{to{transform:translateX(-50%)}}
@keyframes mk-rm-einwurf{0%{opacity:0;transform:translateY(-26px)}10%,28%{opacity:1;transform:none}44%{opacity:0;transform:translateY(84px) scale(.7)}45%,100%{opacity:0;transform:translateY(-26px)}}
@keyframes mk-rm-deckel{0%,26%,52%,100%{transform:none}32%,42%{transform:rotate(-24deg)}}
@keyframes mk-rm-tragen{
  0%{opacity:0;transform:translate(60px,80px) rotate(0)}4%{opacity:1;transform:translate(84px,80px) rotate(0)}10%{transform:translate(118px,80px) rotate(0)}
  12%{transform:translate(130px,86px) rotate(10deg)}72%{transform:translate(306px,266px) rotate(10deg)}76%{transform:translate(326px,278px) rotate(0)}
  82%,94%{opacity:1;transform:translate(355px,278px) rotate(0)}100%{opacity:0;transform:translate(355px,278px) rotate(0)}}
@keyframes mk-rm-wackeln{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@keyframes mk-rm-zeichnen{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes mk-rm-puls{0%{transform:scale(.6);opacity:.4}100%{transform:scale(1.9);opacity:0}}
@keyframes mk-rm-licht{0%{opacity:0;stroke-dashoffset:.015}8%{opacity:1}85%{opacity:1}100%{opacity:0;stroke-dashoffset:-.985}}
@keyframes mk-rm-ziffer{from{opacity:0;transform:translateY(-10px) scale(.8)}to{opacity:1;transform:none}}
@keyframes mk-rm-pendeln{from{transform:rotate(-9deg)}to{transform:rotate(7deg)}}
@keyframes mk-rm-stapeln{from{opacity:0;transform:translateY(-140%)}to{opacity:1;transform:none}}
@keyframes mk-rm-schreiben{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
@keyframes mk-rm-blatt4{0%{opacity:0;transform:translateY(8px)}3%,25%{opacity:1;transform:none}29%,100%{opacity:0;transform:rotateX(75deg)}}
@keyframes mk-rm-blatt5{0%{opacity:0;transform:translateY(8px)}2.4%,20%{opacity:1;transform:none}23.2%,100%{opacity:0;transform:rotateX(75deg)}}
@keyframes mk-rm-aufstellen{from{opacity:0;transform:translateY(-60px)}to{opacity:1;transform:none}}
@keyframes mk-rm-auspendeln{from{transform:rotate(14deg)}to{transform:none}}
@keyframes mk-rm-auspendeln-text{from{opacity:0;transform:translate(-50%,-50%) rotate(14deg)}to{opacity:1;transform:translate(-50%,-50%)}}
@keyframes mk-rm-einparken{from{transform:translateX(-330px)}to{transform:none}}
@keyframes mk-rm-rolltor{0%{clip-path:inset(0)}22%,78%{clip-path:inset(0 0 84% 0)}96%,100%{clip-path:inset(0)}}
@keyframes mk-rm-auffaechern{from{opacity:0;transform:translateY(40px)}}
@keyframes mk-rm-vorne{0%{z-index:20}30%,100%{z-index:calc(10 - var(--k))}}
@keyframes mk-rm-reiter-an{0%{background:var(--mk-knopf);color:var(--mk-knopf-text)}30%,100%{background:var(--mk-grund);color:var(--mk-text)}}
@keyframes mk-rm-ziehen{0%,26%,100%{transform:none}7%,19%{transform:translateY(-26px)}}
@keyframes mk-rm-kritzeln{0%,100%{transform:rotate(-26deg) translate(0,0)}25%{transform:rotate(-24deg) translate(-8px,3px)}50%{transform:rotate(-27deg) translate(-16px,0)}75%{transform:rotate(-25deg) translate(-6px,-2px)}}
@keyframes mk-rm-einrasten{0%{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}45%{opacity:1}100%{opacity:1;transform:none}}
/* Rahmen und Abstände wie die eigenen Abschnitte */
main .eg-in{max-width:calc(var(--breit) + 2 * var(--rand));padding-inline:var(--rand)}
main :is(.eg-abschnitt,.lb-mock,.lb-story,.lb-explo,.lb-buehne,.lb-band,.lb-umgebung){font-family:var(--f-text)}
main :is(.eg-abschnitt,.lb-mock,.lb-story,.lb-buehne) .eg-h2,main .lb-buehne .bn-h2{font-family:var(--f-titel);font-weight:var(--g-titel);letter-spacing:calc(var(--lauf) * .85);line-height:1.1;font-size:clamp(30px,3.2vw,46px);text-wrap:balance;color:var(--text)}
main :is(.eg-abschnitt,.lb-mock,.lb-story,.lb-buehne,.lb-explo,.lb-band,.lb-umgebung) .eg-etikett{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--akzent-t)}
/* Überschriften der Motor-Blöcke brechen nie mitten im Wort (Fund: „Softwareoptimierun|g“ bei 1440 px). Lange
   Firmennamen dürfen kleiner werden, getrennt wird erst am Handy und nur an Silbengrenzen. */
main :is(.lb-band,.lb-umgebung,.lb-mock,.lb-story,.lb-buehne,.lb-explo,.eg-abschnitt) :is(h2,h3,.eg-h2){overflow-wrap:normal;word-break:normal;-webkit-hyphens:manual;hyphens:manual}
main .lb-band .eg-h2{font-size:clamp(28px,3vw,44px)}
@media (max-width:520px){
  main :is(.lb-band,.lb-umgebung,.lb-mock,.lb-story,.lb-buehne,.lb-explo,.eg-abschnitt) :is(h2,.eg-h2){overflow-wrap:break-word;-webkit-hyphens:auto;hyphens:auto}
}

/* Anreicherung (Fragen auf der Leistungsseite, Kontaktkarte, Verweise der Doppelungsstufe) im Stil der Bauart */
main .eg-abschnitt{background:var(--grund);color:var(--text);border-top:1px solid var(--linie)}
main .eg-abschnitt--karte{background:var(--grund2)}
main .eg-abschnitt .eg-fragen{max-width:none;gap:10px}
main .eg-frage{background:var(--flaeche);border:1px solid var(--linie);border-radius:8px;padding:0 22px;transition:border-color .25s}
main .eg-abschnitt:not(.eg-abschnitt--karte) .eg-frage{background:var(--flaeche)}
main .eg-frage[open]{border-color:var(--akzent-d)}
main .eg-frage summary{font-weight:500;font-size:17px;padding:20px 40px 20px 0}
main .eg-frage summary::after{color:var(--akzent-t)}
main .eg-frage p{color:var(--leise)}
main .eg-abschnitt .eg-knopf{border-radius:4px}
main .eg-verweis .eg-h2{font-size:clamp(22px,2vw,28px)}
@media (min-width:900px){
  main .eg-abschnitt--karte:has(.eg-fragen) .eg-in{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
  main .eg-abschnitt--karte:has(.eg-fragen) .eg-h2{position:sticky;top:120px}
}

/* Ablauf als Scroll-Geschichte: Schritte wie die Ablaufkarten der Bauart (Akzentstrich oben). Ohne Bewegung oder ohne
   Skript stehen die vier Karten nebeneinander wie im Vorbild, nicht als Stapel mit leerer rechter Hälfte. */
main .lb-story{background:var(--grund);border-top:1px solid var(--linie)}
main .lb-story{--eg-grund:var(--flaeche);--eg-karte:var(--grund2);--eg-linie:var(--linie);--eg-text:var(--text);--eg-leise:var(--leise);--eg-akzent:var(--akzent-t)}
main .lb-story-schritt{border-radius:8px;background:var(--flaeche);position:relative;overflow:hidden}
main .lb-story-schritt::before{content:"";position:absolute;left:0;top:0;height:2px;width:56px;background:var(--akzent)}
main .lb-story-schritt h3{font-family:var(--f-titel);font-weight:var(--g-ueber);letter-spacing:-.015em}
main .lb-story-karte{border-radius:12px}
@media (min-width:1000px){
  :root:not(.lb-js) main .lb-story-schritte{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
}
@media (min-width:1000px) and (prefers-reduced-motion:reduce){
  main .lb-story-schritte{grid-template-columns:repeat(var(--n,4),minmax(0,1fr))}
}
@media (min-width:640px) and (max-width:999px) and (prefers-reduced-motion:reduce){
  main .lb-story-schritte{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* Teilungsbühne „Was Sie sehen und was das Gutachten festhält“: dunkles Studio statt heller Fläche */
main .lb-buehne{background:var(--nacht);border-top:1px solid var(--linie)}
main .bnb-teilung{--bn-band:var(--nacht);--bn-band-text:var(--text)}
main .bn-t-buehne{background:radial-gradient(ellipse 70% 80% at 50% 40%,#232327,#141416 70%);box-shadow:0 0 0 1px var(--linie),0 50px 100px -50px rgba(0,0,0,.8);color:var(--text)}
main .bn-t-boden{stroke:rgba(255,255,255,.14)}
main .bn-t-schatten{fill:rgba(0,0,0,.55)}
main .bn-t-koerper-alt{fill:#7c8188;stroke:#d4d6da}
main .bn-t-koerper-plan{fill:#1b1c1f;stroke:var(--akzent-t)}
main .bn-t-svg--gutachten .bn-t-koerper-plan~:is(.bn-t-reifen){fill:#1b1c1f;stroke:var(--akzent-t)}
main .bn-t-svg--gutachten .bn-t-koerper-plan~:is(.bn-t-felge,.bn-t-nabe,.bn-t-heck,.bn-t-licht,.bn-t-spiegel-a){stroke:var(--akzent-t)}
main .bn-t-svg--gutachten .bn-t-koerper-plan~.bn-t-speichen path{stroke:var(--akzent-t)}
main .bn-t-linie{stroke:rgba(255,255,255,.3)}
main .bn-t-fenster{fill:#0e1013;opacity:.9}
main .bn-t-reifen{fill:#0d0e10}
main .bn-t-mass{stroke:var(--akzent-t)}
main .bn-t-trenner{background:var(--text)}
main .bn-t-schild,main .bn-t-buehne .bn-symbolbild{background:rgba(20,20,22,.86);color:var(--text);border-color:var(--linie)}

/* Mockups: dunkle Karten statt heller Flächen mit Grünstich; Papier (Gutachten-Blatt) bleibt weiß */
main .lb-mock{background:var(--grund);border-top:1px solid var(--linie);--eg-grund:var(--grund);--eg-karte:var(--flaeche);--eg-text:var(--text);--eg-leise:var(--leise);--eg-linie:var(--linie);--eg-akzent:var(--akzent-t)}
main .lb-mock{--mk-grund:var(--flaeche);--mk-karte:var(--grund2);--mk-text:var(--text);--mk-leise:var(--leise);--mk-linie:var(--linie);--mk-akzent:var(--akzent-t);--mk-band:var(--grund2);--mk-band-text:var(--text)}

/* Rad-Explosion (Werkstatt, Tuning): der Reifen hob sich als schwarzer Klotz kaum vom Nachtgrund ab. Hier ein heller
   Lichtkegel hinter dem Modell und ein Reifen in Gummigrau mit Flanke und feinem Profil. Die Lage der Teile (Abstand
   Felge zu Nabe) rechnet explosion.py samt Beschriftung, die bleibt unangetastet. */
main .lb-explo{background:radial-gradient(ellipse 46% 60% at 62% 44%,#26272b,var(--nacht) 72%);border-top:1px solid var(--linie)}
main .ex-m-reifen{--mo:radial-gradient(closest-side,transparent 0 63%,#2b2d31 64% 66%,#3c3f44 67% 83%,#303237 84% 91%,#232528 92%),repeating-conic-gradient(rgba(255,255,255,.035) 0 2deg,transparent 2deg 5deg);--ms:linear-gradient(90deg,#2a2c30,#3b3e43 45%,#2a2c30)}

/* Laufband und Umgebungsband im Graphit */
main .lb-lauf{background:var(--grund);border-color:var(--linie);color:var(--leise)}
main .lb-band,main .lb-umgebung{background:var(--nacht);border-top:1px solid var(--linie)}

/* Zusätze aus kundenwunsch.py („Was uns ausmacht“, Ansprechpartner) und das Ortsband „Auch in Ihrer Nähe“ auf der
   Rahmenkante der Bauart statt eingerückt */
main .kw-band>.kw-in,main .om-nah>.om-nah-in{max-width:calc(var(--breit) + 2 * var(--rand));padding-inline:var(--rand);margin-inline:auto;box-sizing:border-box}
main .kw-band{border-top:1px solid var(--linie)}
main .kw-band .kw-titel,main .om-nah .om-nah-titel{font-family:var(--f-titel);font-weight:var(--g-ueber);letter-spacing:-.015em}