@font-face{font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;src:url(schrift/inter-latin.woff2?v=f11d729bb0) format('woff2');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';font-style:normal;font-weight:100 900;font-display:swap;src:url(schrift/inter-latin-ext.woff2?v=cf3eb50fb2) format('woff2');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}

/* Hell und persönlich: großes Foto mit schwebender Karte, Kacheln, Karten mit Symbol, Zeitleiste, große Aufruf-Karte. */
:root{
--grund:#ffffff;--grund-hell:#f7f1ea;--akzent:#a8481c;--akzent-dunkel:#853815;
--auf-akzent:#ffffff;--akzent-sanft:#f4dfd0;--akzent-text:#9c4318;--linie:#e9e1d8;
--text:#1f1a17;--leise:#5b524b;--nacht:#1f1a17;--nacht-text:#faf7f3;--nacht-leise:#cdc5bc;
--akzent-nacht:#f2a673;
--titel:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--schrift:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;--titel-gewicht:700;
--r:16px;--r-klein:12px;--r-gross:28px;--rand:clamp(16px,4.45vw,64px);--kopf-h:80px;--schatten:0 18px 44px rgba(15,23,42,.13)}
[data-ecke="mittel"]{--r:10px;--r-klein:8px;--r-gross:16px}
*,*::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:calc(var(--kopf-h) + 16px)}
body{margin:0;background:var(--grund);color:var(--text);font-family:var(--schrift);font-size:16px;line-height:1.6;overflow-wrap:break-word}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
:focus-visible{outline:3px solid var(--akzent);outline-offset:2px}
.rahmen{width:100%;max-width:calc(1312px + 2*var(--rand));margin:0 auto;padding:0 var(--rand)}
.rahmen.schmal{max-width:calc(860px + 2*var(--rand))}
.muster{background:var(--nacht);color:var(--nacht-text);font-size:13px;text-align:center;padding:6px 12px}
.sprung{position:absolute;left:-9999px}
.sprung:focus{left:12px;top:12px;z-index:90;background:var(--grund);padding:8px 14px}

/* Kopf */
.kopf{position:sticky;top:0;z-index:50;background:var(--grund);border-bottom:1px solid transparent;transition:border-color .3s,box-shadow .3s}
.kopf.gerollt{border-bottom-color:var(--linie);box-shadow:0 6px 20px rgba(15,23,42,.05)}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:24px;min-height:var(--kopf-h)}
.marke{display:flex;align-items:center;gap:10px;text-decoration:none;flex:0 1 auto}
.marke-zeichen{flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-klein);background:var(--akzent);color:var(--auf-akzent);display:grid;place-items:center;font-family:var(--titel);font-weight:700;font-size:17px;line-height:1}
.marke-text{font-family:var(--titel);font-weight:700;font-size:17px;line-height:1.2;letter-spacing:-.01em}
.marke-text em{font-style:normal;color:var(--akzent-text)}
.nav{display:flex;align-items:center;gap:30px;font-size:14.5px;font-weight:500;white-space:nowrap;color:var(--leise)}
.nav>a,.nav .om>a{text-decoration:none;padding:6px 0;transition:color .2s}
.nav>a:hover,.nav>a[aria-current],.nav .om>a:hover{color:var(--text)}
.nav>a[aria-current]{font-weight:600}
.kopf-ruf{flex:0 0 auto;white-space:nowrap}
.burger{display:none;width:44px;height:44px;background:none;border:0;padding:10px;cursor:pointer;color:var(--text);flex:0 0 auto}
.burger span,.burger span::before,.burger span::after{display:block;height:2px;background:currentColor;border-radius:2px}
.burger span{position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;right:0}
.burger span::before{top:-7px}.burger span::after{top:7px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}
.handy-menue{display:none;background:var(--grund);border-top:1px solid var(--linie);padding:10px var(--rand) 20px;max-height:calc(100dvh - var(--kopf-h));overflow-y:auto}
.handy-menue.offen{display:block}
.handy-menue>a:not(.knopf),.handy-menue .om-handy>a{display:block;padding:12px 0;font-size:18px;text-decoration:none;border-bottom:1px solid var(--linie)}
.handy-menue .knopf{margin-top:16px;width:100%}

/* Knöpfe */
.knopf{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border-radius:var(--r);font-weight:600;font-size:14.5px;line-height:1.4;text-decoration:none;border:1px solid transparent;transition:background-color .2s,border-color .2s,color .2s,box-shadow .2s,transform .2s;text-align:center}
.knopf:hover{transform:translateY(-1px)}
.knopf.gross{padding:16px 28px;font-size:16px}
.knopf.klein{padding:10px 20px}
.knopf.mini{padding:6px 14px;font-size:12.5px;border-radius:999px;flex:0 0 auto}
.knopf.voll{background:var(--akzent);color:var(--auf-akzent)}
.knopf.voll:hover{background:var(--akzent-dunkel);box-shadow:0 10px 24px rgba(15,23,42,.18)}
.knopf.rand{border-color:var(--linie);color:var(--text);background:var(--grund)}
.knopf.rand:hover{border-color:var(--akzent)}
.knopf.sanft{background:var(--akzent-sanft);color:var(--text)}
.knopf.sanft:hover{background:var(--grund);border-color:var(--akzent)}
.knopf.hell{background:#fff;color:var(--akzent-dunkel)}
.knopf.glas{background:rgba(255,255,255,.12);color:#fff;border-color:rgba(255,255,255,.3)}
.knopf.glas:hover{background:rgba(255,255,255,.2)}
.knopfreihe{display:flex;flex-wrap:wrap;gap:12px}
.knopfreihe.mitte{justify-content:center}
.weiter{margin-top:44px}
.tel-z{flex:0 0 auto}

/* Auftakt: Text links, hohes Foto rechts, zwei schwebende Karten */
.held{background:linear-gradient(180deg,var(--grund) 0,var(--grund-hell) 100%)}
.held-in{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,540px);gap:clamp(48px,7vw,120px);align-items:center;padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(48px,6vw,88px)}
.held-text{display:flex;flex-direction:column;gap:24px;align-items:flex-start}
.held-text>*{max-width:100%}
.pille{display:inline-block;padding:6px 14px;border-radius:999px;background:var(--akzent-sanft);color:var(--text);font-size:13px;font-weight:600;line-height:1.4}
.held h1{font-family:var(--titel);font-weight:var(--titel-gewicht);font-size:clamp(38px,4.7vw,68px);line-height:1.05;letter-spacing:-.025em;text-wrap:balance}
.held h1 em{display:block;font-style:normal;color:var(--akzent-text)}
.held-lead{font-size:clamp(17px,1.4vw,20px);line-height:1.6;color:var(--leise);max-width:32em}
.haken{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:14px;color:var(--leise)}
.haken li{display:flex;align-items:center;gap:7px}
.haken svg{color:var(--akzent-text);flex:0 0 auto}
.held-foto{position:relative}
.held-bild{aspect-ratio:4/5;border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--schatten);background:var(--grund-hell)}
.held-bild img{width:100%;height:100%;object-fit:cover}
.schwebe{position:absolute;display:flex;align-items:center;gap:12px;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r);padding:12px 16px;box-shadow:var(--schatten);line-height:1.3}
.schwebe p{flex:1 1 auto}
.schwebe b{display:block;font-size:14.5px;font-weight:600}
.schwebe p span{display:block;font-size:12.5px;color:var(--leise)}
.schwebe-z{flex:0 0 auto;width:36px;height:36px;border-radius:50%;background:var(--akzent-sanft);color:var(--akzent-text);display:grid;place-items:center;font-size:17px}
.schwebe.oben{top:32px;left:-68px;max-width:230px;animation:schweben 6s ease-in-out infinite}
.schwebe.unten{left:24px;right:24px;bottom:24px}
@keyframes schweben{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* Kacheln: nur belegbare Angaben */
.kacheln-teil{padding:clamp(40px,6vw,80px) 0}
.kacheln{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.kacheln[data-n="3"]{grid-template-columns:repeat(3,minmax(0,1fr))}
.kacheln[data-n="2"]{grid-template-columns:repeat(2,minmax(0,1fr))}
.kachel{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:28px 18px;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r);transition:box-shadow .25s,transform .25s}
.kachel:hover{box-shadow:var(--schatten)}
.kachel-z{width:44px;height:44px;border-radius:50%;background:var(--akzent-sanft);color:var(--akzent-text);display:grid;place-items:center;margin-bottom:6px}
.kachel b{font-family:var(--titel);font-size:clamp(18px,1.7vw,22px);font-weight:700;line-height:1.2;letter-spacing:-.01em}
.kachel>span:last-child,.kachel a{font-size:14.5px;color:var(--leise);line-height:1.4}
.kachel a{color:var(--akzent-text);font-weight:600}

/* Abschnitte */
.abschnitt{padding:clamp(64px,7.8vw,112px) 0}
.getoent{background:var(--grund-hell)}
.kopfzeile{margin-bottom:clamp(36px,4.4vw,64px);max-width:44rem}
.kopfzeile.mitte{margin-left:auto;margin-right:auto;text-align:center}
.etikett{font-size:12.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--akzent-text);margin-bottom:12px}
.titel{font-family:var(--titel);font-weight:var(--titel-gewicht);font-size:clamp(30px,3.5vw,50px);line-height:1.15;letter-spacing:-.02em}
.unter{margin-top:14px;font-size:17px;color:var(--leise)}
.seitenkopf{background:var(--grund-hell);padding:clamp(48px,6vw,88px) 0}
.seitenkopf .kopfzeile{margin-bottom:0}

/* Leistungen */
.leistungen{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.leistung{flex:0 1 calc((100% - 48px)/3);display:flex;flex-direction:column;align-items:flex-start;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r);padding:32px;transition:box-shadow .25s,transform .25s,border-color .25s}
.leistung:hover{box-shadow:var(--schatten);transform:translateY(-3px)}
.leistung-z{width:44px;height:44px;border-radius:var(--r-klein);background:var(--akzent-sanft);color:var(--akzent-text);display:grid;place-items:center;margin-bottom:20px}
.leistung-bild{margin:-32px -32px 22px;width:calc(100% + 64px);aspect-ratio:16/10;overflow:hidden;border-radius:var(--r) var(--r) 0 0}
.leistung-bild img{width:100%;height:100%;object-fit:cover}
.leistung h3{font-family:var(--titel);font-weight:600;font-size:20px;line-height:1.3;margin-bottom:8px}
.leistung p{font-size:15px;color:var(--leise)}
.mehr{margin-top:auto}
.leistung p+.mehr{padding-top:16px}
.mehr{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--akzent-text);text-decoration:none}
/* Keine Karte allein in der letzten Reihe: bei Rest 1 stehen die letzten vier zwei zu zwei */
@media (min-width:1024px){
.leistungen[data-rest="1"] .leistung:nth-last-child(-n+4){flex-basis:calc((100% - 24px)/2)}
}
/* Eine einzige Leistung (20 von 51 Aufträgen): breites Band statt einer verlorenen Karte */
.einzel{display:flex;align-items:center;gap:24px;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r-gross);padding:clamp(24px,3vw,40px)}
.einzel .leistung-z{margin-bottom:0;flex:0 0 auto}
.einzel-text{flex:1 1 auto}
.einzel h3{font-family:var(--titel);font-weight:600;font-size:clamp(21px,2vw,26px);line-height:1.25;margin-bottom:6px}
.einzel p{color:var(--leise)}
.einzel .knopf{flex:0 0 auto}
/* Zweite Leistungsform: ruhige Zeilen in zwei Spalten */
[data-leistung="liste"] .leistungen{gap:0 48px;justify-content:flex-start}
[data-leistung="liste"] .leistung,[data-leistung="liste"] .leistungen[data-rest="1"] .leistung:nth-last-child(-n+4){flex-basis:calc((100% - 48px)/2);display:grid;grid-template-columns:44px 1fr;column-gap:18px;background:none;border:0;border-bottom:1px solid var(--linie);border-radius:0;padding:24px 0}
[data-leistung="liste"] .leistung:hover{box-shadow:none;transform:none}
[data-leistung="liste"] .leistung-z{grid-row:1 / span 3;margin-bottom:0;background:var(--grund);border:1px solid var(--linie)}
[data-leistung="liste"] .getoent .leistung-z{background:var(--grund)}
[data-leistung="liste"] .leistung h3,[data-leistung="liste"] .leistung p,[data-leistung="liste"] .mehr{grid-column:2}
/* Einblick: das dritte Foto des Regelfalls groß, Tafel darauf */
.einblick{position:relative}
.einblick-bild{aspect-ratio:21/9;border-radius:var(--r-gross);overflow:hidden;background:var(--grund-hell)}
.einblick-bild img{width:100%;height:100%;object-fit:cover}
.einblick-tafel{position:absolute;left:clamp(16px,3vw,40px);bottom:clamp(16px,3vw,40px);max-width:460px;background:var(--grund);border-radius:var(--r);padding:22px 26px;box-shadow:var(--schatten)}
.einblick-tafel h2{font-family:var(--titel);font-weight:var(--titel-gewicht);font-size:22px;line-height:1.25}
.einblick-tafel p{margin-top:6px;font-size:15px;color:var(--leise)}
/* Hochformat: Bild und Tafel nebeneinander, die Tafel liegt nicht mehr im Foto (Mert 06.11.2026 zu Pusch: „Text
   überschneidet sich mit dem Bild“; daneben blieb eine halbe Fläche leer) */
.einblick.hoch{display:grid;grid-template-columns:minmax(0,min(500px,46%)) minmax(0,1fr);align-items:center;gap:clamp(28px,5vw,80px)}
.einblick.hoch .einblick-bild{aspect-ratio:4/5}
.einblick.hoch .einblick-tafel{position:relative;left:auto;bottom:auto;max-width:560px;margin-left:0;padding:0;background:none;box-shadow:none}
.einblick.hoch .einblick-tafel h2{font-size:clamp(26px,3vw,42px)}
.einblick.hoch .einblick-tafel p{font-size:16px;margin-top:10px}
[data-warum="links"] .einblick.hoch{grid-template-columns:minmax(0,1fr) minmax(0,min(500px,46%))}
[data-warum="links"] .einblick.hoch .einblick-bild{order:2}
[data-warum="links"] .einblick.hoch .einblick-tafel{margin-left:auto;margin-right:0;justify-self:end}
.mehr svg{transition:transform .2s}
.mehr:hover svg{transform:translateX(3px)}

/* Warum */
.warum{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6.4vw,92px);align-items:center}
.warum.oben{align-items:start}
.warum.ohne-foto{grid-template-columns:1fr;max-width:calc(860px + 2*var(--rand))}
.warum.ohne-foto .kopfzeile{margin-left:0}
.warum-foto{position:relative}
.warum-bild{aspect-ratio:4/3;border-radius:var(--r-gross);overflow:hidden;box-shadow:var(--schatten);background:var(--grund-hell)}
.warum-bild img{width:100%;height:100%;object-fit:cover}
.warum-schild{position:absolute;right:-16px;bottom:-22px;max-width:260px;background:var(--akzent);color:var(--auf-akzent);border-radius:var(--r);padding:14px 20px;box-shadow:var(--schatten);line-height:1.3;text-decoration:none;transition:background-color .2s}
.warum-schild:hover{background:var(--akzent-dunkel)}
.warum-schild b{display:block;font-family:var(--titel);font-size:20px;font-weight:700}
.warum-schild span{font-size:13px}
.warum .kopfzeile{margin-bottom:24px}
.warum .titel{font-size:clamp(28px,3vw,43px)}
.merkmale{display:grid;gap:12px;margin-bottom:24px}
.merkmal{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border:1px solid var(--linie);border-radius:var(--r);background:var(--grund);transition:box-shadow .25s}
.merkmal:hover{box-shadow:0 8px 22px rgba(15,23,42,.08)}
.merkmal-z{flex:0 0 auto;width:36px;height:36px;border-radius:var(--r-klein);background:var(--akzent-sanft);color:var(--akzent-text);display:grid;place-items:center}
.merkmal h3,.merkmal h2{font-size:15px;font-weight:600;line-height:1.35;margin-bottom:2px;font-family:var(--schrift)}
.merkmal p{font-size:14px;color:var(--leise);line-height:1.5}
.merkmal a{color:var(--text);font-weight:600}
.fliesstext{display:grid;gap:16px;font-size:17px}

/* Ablauf als Zeitleiste */
.ablauf{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:24px;position:relative}
.ablauf::before{content:"";position:absolute;top:30px;left:calc(50%/var(--n));right:calc(50%/var(--n));height:2px;background:var(--linie)}
.schritt{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center}
.nummer{width:60px;height:60px;border-radius:var(--r);background:var(--grund);border:1px solid var(--linie);color:var(--leise);display:grid;place-items:center;font-size:14px;font-weight:600;margin-bottom:18px;transition:background-color .25s,color .25s,box-shadow .25s,border-color .25s}
.schritt.aktiv .nummer{background:var(--akzent);border-color:var(--akzent);color:var(--auf-akzent);box-shadow:0 12px 26px rgba(15,23,42,.2)}
.schritt h3{font-family:var(--titel);font-weight:600;font-size:17px;line-height:1.3;margin-bottom:6px}
.schritt p{font-size:14.5px;color:var(--leise);max-width:24em}

/* Galerie */
.galerie{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.kachelbild{aspect-ratio:4/3;border-radius:var(--r);overflow:hidden;background:var(--grund-hell)}
.kachelbild img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.kachelbild:hover img{transform:scale(1.03)}

/* Stimmen */
.stimmen{display:flex;flex-wrap:wrap;justify-content:center;gap:24px}
.stimme{flex:0 1 calc((100% - 48px)/3);display:flex;flex-direction:column;gap:14px;background:var(--grund);border:1px solid var(--linie);border-radius:var(--r);padding:32px}
.sterne{color:#a86200;letter-spacing:.1em;font-size:15px;line-height:1}
.stimme blockquote{font-size:15.5px;flex:1 1 auto}
.stimme figcaption{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--linie)}
.kuerzel{flex:0 0 auto;width:40px;height:40px;border-radius:50%;background:var(--akzent-sanft);color:var(--akzent-text);display:grid;place-items:center;font-weight:700}
.stimme b{display:block;font-size:14.5px;line-height:1.3}
.stimme small{display:block;font-size:12.5px;color:var(--leise);line-height:1.3}
.rechtlich{margin:26px auto 0;font-size:13px;color:var(--leise);text-align:center;max-width:52rem}

/* Fragen */
.fragen{display:grid;gap:12px}
.frage{border:1px solid var(--linie);border-radius:var(--r);background:var(--grund)}
.frage summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 22px;font-weight:600;cursor:pointer;list-style:none}
.frage summary::-webkit-details-marker{display:none}
.frage p{padding:0 22px 20px;color:var(--leise);font-size:15.5px}
.pfeil{flex:0 0 auto;width:10px;height:10px;border-right:2px solid var(--leise);border-bottom:2px solid var(--leise);transform:rotate(45deg);transition:transform .2s}
.frage[open] .pfeil{transform:rotate(-135deg)}

/* Aufruf-Karte */
.aufruf-teil{padding-top:0}
.getoent+.aufruf-teil{padding-top:clamp(64px,7.8vw,112px)}
.aufruf{position:relative;overflow:hidden;border-radius:clamp(20px,3vw,var(--r-gross));background:linear-gradient(135deg,var(--akzent),var(--akzent-dunkel));color:#fff;text-align:center;padding:clamp(56px,7.8vw,112px) clamp(20px,5vw,64px)}
.aufruf::before,.aufruf::after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07);pointer-events:none}
.aufruf::before{z-index:1;width:380px;height:380px;right:-110px;top:-140px}
.aufruf::after{z-index:1;width:260px;height:260px;left:-90px;bottom:-110px}
.aufruf-bild{position:absolute;inset:0}
.aufruf-bild img{width:100%;height:100%;object-fit:cover}
.aufruf-bild::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--akzent-dunkel),var(--nacht));opacity:.86}
.aufruf-in{position:relative;z-index:2;max-width:42rem;margin:0 auto}
.aufruf .etikett{color:#fff;opacity:.9}
.aufruf h2{font-family:var(--titel);font-weight:var(--titel-gewicht);font-size:clamp(30px,3.9vw,56px);line-height:1.15;letter-spacing:-.02em}
.aufruf-text{margin:16px 0 30px;font-size:17px;color:#fff}
.aufruf-text+.knopfreihe{margin-top:0}
.aufruf h2+.knopfreihe{margin-top:28px}

/* Kontakt */
.kontaktliste{display:grid;gap:12px}
.ruftafel{background:var(--nacht);color:var(--nacht-text);border-radius:var(--r);padding:24px}
.kontakt-rechts>.warum-bild{margin-top:20px}
.ruftafel h2{font-family:var(--titel);font-size:22px;line-height:1.25;margin-bottom:6px}
.ruftafel p{color:var(--nacht-leise);margin-bottom:16px}
.vorbereitet{margin-top:24px;background:var(--grund-hell);border-radius:var(--r);padding:24px}
.vorbereitet h2{font-family:var(--titel);font-size:20px;margin-bottom:10px}
.vorbereitet ul{display:grid;gap:8px}
.vorbereitet li{display:flex;gap:9px;align-items:flex-start;font-size:15px}
.vorbereitet svg{color:var(--akzent-text);flex:0 0 auto;margin-top:4px}
.rechtstext{display:grid;gap:14px}
.rechtstext a{color:var(--akzent-text)}
.titel3{font-family:var(--titel);font-size:22px;margin-top:10px}

/* Fuß */
.fuss{background:var(--nacht);color:var(--nacht-text);padding:64px 0 32px;font-size:14.5px}
.fuss a{color:inherit}
.fuss-spalten{display:grid;grid-template-columns:1.5fr 1fr 1.2fr 1.2fr;gap:36px}
.fuss h3{font-size:14.5px;font-weight:600;margin:0 0 14px}
.fuss-spalten a:not(.marke){display:block;text-decoration:none;padding:3px 0;color:var(--nacht-leise);overflow-wrap:anywhere}
.fuss-spalten a:not(.marke):hover{color:var(--nacht-text)}
.fuss-spalten p{color:var(--nacht-leise);margin-bottom:8px}
.fuss-marke{display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.fuss .marke-text em{color:var(--akzent-nacht)}
.fuss-hinweis{margin-top:32px;font-size:13px;color:var(--nacht-leise)}
.fuss-hinweis+.fuss-klein{margin-top:16px}
.fuss-klein{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.14);font-size:13px;color:var(--nacht-leise)}
.handy-ruf{display:none}
.fuss .eg-fuss{max-width:calc(1312px + 2*var(--rand));padding-left:var(--rand);padding-right:var(--rand)}

/* Bewegung: 20 px, 0,6 s */
.bewegt .zeig{opacity:0;transform:translateY(20px)}
.bewegt .zeig.an{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease,box-shadow .25s,border-color .25s}
.bewegt .leistung.an:hover{transform:translateY(-3px)}
@media (prefers-reduced-motion:reduce){
html{scroll-behavior:auto}
*,*::before,*::after{animation:none!important;transition:none!important}
.bewegt .zeig{opacity:1;transform:none}
}

/* Karte mit gesichertem Foto: breit und quer, sonst reißt sie die Nachbarn der Reihe auf */
.leistung.mit-bild{flex-basis:calc((100% - 24px)*2/3 + 8px)}
@media (min-width:1024px){
.leistung.mit-bild{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto 1fr auto;column-gap:28px;padding:0 32px 0 0;overflow:hidden}
.leistung.mit-bild .leistung-bild{grid-row:1 / 4;margin:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.leistung.mit-bild h3{margin-top:32px}
.leistung.mit-bild .mehr{margin-bottom:28px}
}
/* Auftritte nach Salz: Foto links, Warum gespiegelt */
@media (min-width:1200px){
[data-held="links"] .held-in{grid-template-columns:minmax(0,540px) minmax(0,1fr)}
[data-held="links"] .held-foto{order:-1}
[data-held="links"] .schwebe.oben{left:auto;right:-48px}
}
@media (min-width:1024px){
[data-warum="rechts"] .warum:not(.ohne-foto) .warum-foto{order:2}
[data-warum="rechts"] .warum-schild{right:auto;left:-16px}
}
@media (max-width:1180px){
.nav,.kopf-ruf{display:none}
.burger{display:block}
}
@media (max-width:1199px){
.held-in{grid-template-columns:1fr;gap:36px}
.held-foto{max-width:560px;width:100%;margin:0}
.schwebe.oben{left:16px;top:16px}
}
@media (max-width:1023px){
.leistung,.stimme,.leistung.mit-bild{flex-basis:calc((100% - 24px)/2)}
.leistung.mit-bild{flex-basis:100%}
.warum{grid-template-columns:1fr}
.warum-schild{right:12px}
.warum-text{margin-top:12px}
.fuss-spalten{grid-template-columns:1fr 1fr}
}
@media (max-width:760px){
.einzel{flex-wrap:wrap}
.einzel .knopf{flex:1 1 100%}
[data-leistung="liste"] .leistung,[data-leistung="liste"] .leistungen[data-rest="1"] .leistung:nth-last-child(-n+4){flex-basis:100%}
.einblick-bild{aspect-ratio:4/3}
.einblick-tafel{position:static;max-width:none;margin-top:12px;box-shadow:none;border:1px solid var(--linie)}
.einblick.hoch,[data-warum="links"] .einblick.hoch{display:block}
.einblick.hoch .einblick-bild{aspect-ratio:4/5;max-height:72vh;width:100%}
.einblick.hoch .einblick-tafel,[data-warum="links"] .einblick.hoch .einblick-tafel{margin:12px 0 0;max-width:none;padding:22px 24px}
.einblick.hoch .einblick-bild img{object-position:var(--pos-handy,50% 50%)!important}
.kacheln,.kacheln[data-n="3"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kachel{padding:20px 12px}
.kacheln[data-n="3"] .kachel:last-child{grid-column:1/-1}
.leistungen,.stimmen{gap:16px}
.leistung,.stimme{flex-basis:100%}
.galerie{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.kachelbild:last-child:nth-child(odd){grid-column:1/-1;aspect-ratio:16/9}
.leistung,.stimme{padding:24px}
.leistung-bild{margin:-24px -24px 18px;width:calc(100% + 48px)}
/* Zeitleiste wird senkrecht, Nummer links, Linie läuft mit */
.ablauf{grid-template-columns:1fr;gap:0}
.ablauf::before{top:12px;bottom:12px;left:27px;right:auto;width:2px;height:auto}
.schritt{display:grid;grid-template-columns:56px 1fr;column-gap:16px;text-align:left;align-items:start;padding-bottom:26px}
.schritt:last-child{padding-bottom:0}
.nummer{grid-row:1 / span 2;width:56px;height:56px;margin-bottom:0}
.schritt h3{padding-top:6px}
}
@media (max-width:640px){
body{padding-bottom:58px}
.handy-ruf{display:flex;align-items:center;justify-content:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--akzent);color:var(--auf-akzent);padding:14px 16px;font-weight:600;text-decoration:none}
.menue-offen .handy-ruf{display:none}
.fuss-spalten{grid-template-columns:1fr}
.knopfreihe .knopf{flex:1 1 100%}
.held h1{font-size:clamp(28px,9vw,48px)}
.titel,.leistung h3,.aufruf h2{hyphens:auto}
.warum-schild{position:static;display:block;max-width:none;margin-top:12px;box-shadow:none}
.schwebe.unten{left:12px;right:12px;bottom:12px;padding:10px 12px;gap:10px}
.schwebe.unten .schwebe-z{display:none}
.schwebe.oben{left:12px;top:12px;padding:8px 12px}
.schwebe.oben .schwebe-z{width:30px;height:30px}
.held-bild img{object-position:var(--pos-handy,50% 50%)!important}
}
@media (max-width:380px){.marke-text{font-size:15px}.kacheln,.kacheln[data-n="3"]{grid-template-columns:1fr}.kacheln[data-n="3"] .kachel:last-child{grid-column: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:#ffffff;--eg-text:#1f1a17;--eg-karte:#f7f1ea;--eg-band:#1f1a17;--eg-band-text:#faf7f3;--eg-akzent:#9c4318;--eg-knopf:#a8481c;--eg-knopf-text:#ffffff;--eg-linie:#e9e1d8;--eg-leise:#5b524b}
.eg-main{display:block;background:var(--eg-grund);color:var(--eg-text)}
.eg-in{width:100%;max-width:1120px;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.12em;text-transform:uppercase;margin:0 0 14px;opacity:1}
.eg-etikett--dunkel{color:var(--eg-akzent);opacity:1}
.eg-h1{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(30px,4.72vw,68px);font-weight:600;text-transform:none;font-style:normal;letter-spacing:-0.025em;line-height:1.05;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:56px;padding:10px 28px;border-radius:10px;background:var(--eg-knopf);color:var(--eg-knopf-text);font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;font-size:16px;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:#a8481c;color:#ffffff;white-space:nowrap}
.eg-abschnitt{background:var(--eg-grund);color:var(--eg-text);padding:clamp(52px,7.78vw,112px) 0;font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px;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:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(26px,3.47vw,50px);font-weight:600;text-transform:none;letter-spacing:-0.02em;line-height:1.15;text-wrap:balance;margin:0 0 clamp(22px,3vw,36px);color:inherit;max-width:30ch;overflow-wrap:break-word}
.eg-h3{font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-size:clamp(18px,1.18vw,17px);font-weight:600;text-transform:none;letter-spacing:0em;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:10px;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.15vw,31px);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:10px}
.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:'Inter',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:10px;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:'Inter',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:10px;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:'Inter',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:'Inter',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:1120px;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:#ffffff;--eg-text:#1f1a17;--eg-karte:#f7f1ea;--eg-linie:#e9e1d8;--eg-knopf:#a8481c;--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:'Inter',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:rgba(255,255,255,.85);background:rgba(0,0,0,.35);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.15vw,31px)}
.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:'Inter',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:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;font-size:clamp(24px,2.78vw,40px);line-height:1.22;letter-spacing:-0.02em;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:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;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:'Inter',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.12em;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:#ffffff;color:#1f1a17}
/* ★ 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:#ffffff;--eg-text:#1f1a17;--eg-karte:#f7f1ea;--eg-band:#1f1a17;--eg-band-text:#faf7f3;--eg-akzent:#9c4318;--eg-knopf:#a8481c;--eg-knopf-text:#ffffff;--eg-linie:#e9e1d8;--eg-leise:#5b524b;--lb-akzent:#a8481c}
.lb-band{position:relative;overflow:hidden;isolation:isolate;background:var(--eg-band);color:var(--eg-band-text);padding:clamp(56px,8vw,112px) 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:#9c4318}
.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:#f7f1ea}
.lb-umgebung{background:var(--eg-karte);color:var(--eg-text);padding:clamp(56px,8vw,112px) 0;--lb-akzent:#9c4318}
.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:10px;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:#f7f1ea}
.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:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;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:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;font-weight:600;font-size:clamp(26px,3.4vw,46px);line-height:1.1;letter-spacing:-0.02em;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 .9s cubic-bezier(.16,1,.3,1) both}
  .lb-js .eg-schritte.lb-warte.lb-los li{opacity:1;animation:lb-herein .8s cubic-bezier(.16,1,.3,1) both}
  .lb-js .eg-schritte.lb-los li:nth-child(2){animation-delay:.12s}.lb-js .eg-schritte.lb-los li:nth-child(3){animation-delay:.24s}
  .lb-js .eg-schritte.lb-los li:nth-child(4){animation-delay:.36s}.lb-js .eg-schritte.lb-los li:nth-child(5){animation-delay:.48s}
  .lb-js .eg-schritte.lb-los .eg-nr{animation:lb-nr .9s 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 */
  .lb-w{display:inline-block;overflow:clip;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}
  .lb-w>span{display:inline-block}
  .lb-js h2.lb-warte.lb-los .lb-w>span{animation:lb-wort .9s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--i) * 45ms)}
  .lb-js .lb-ein.lb-warte.lb-los{animation:lb-herein .8s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j) * 90ms)}
  .lb-js img.lb-ein.lb-warte.lb-los{animation:lb-oeffnen 1.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--j) * 90ms)}
  .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(28px)}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:#ffffff;--eg-text:#1f1a17;--eg-karte:#f7f1ea;--eg-band:#1f1a17;--eg-band-text:#faf7f3;--eg-akzent:#9c4318;--eg-knopf:#a8481c;--eg-knopf-text:#ffffff;--eg-linie:#e9e1d8;--eg-leise:#5b524b;
  background:var(--eg-grund);color:var(--eg-text);padding:clamp(56px,8vw,112px) 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:#f7f1ea;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:'Inter',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)}}
/* ★ 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:#9c4318;--mk-knopf:#a8481c;--mk-knopf-text:#ffffff;--mk-band:#1f1a17;--mk-band-text:#faf7f3;--mk-karte:#f7f1ea;--mk-grund:#ffffff;--mk-text:#1f1a17;--mk-leise:#5b524b;--mk-linie:#e9e1d8}
.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:'Inter',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:'Inter',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:'Inter',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:'Inter',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:'Inter',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%}
.mk-blatt-titel{margin:0;font-family:'Inter',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:0}
/* 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 .6s ease both;animation-delay:calc(var(--k) * .45s + .5s)}
  .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.1s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .12s)}
  .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 .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .18s)}
  .mk-kette ol::before{transform-origin:top;animation:lb-schreiben 1.6s cubic-bezier(.65,0,.35,1) both}
  .mk-blatt-zeilen i{animation:lb-schreiben 1.1s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--z) * .22s + .4s)}
  .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 1.6s cubic-bezier(.65,0,.35,1) 2.2s both}
  .mk-blatt .mk-muster{animation:mk-stempel .5s cubic-bezier(.34,1.6,.64,1) 2.8s 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 .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .3s + 2.4s)}
  .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.2s cubic-bezier(.34,1.4,.64,1) both;animation-delay:calc(var(--k) * .1s)}
  .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:'Inter',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:'Inter',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 .7s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .15s)}
  .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 .8s cubic-bezier(.34,1.5,.64,1) both;animation-delay:calc(var(--k) * .18s)}
}
@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.1s cubic-bezier(.65,0,.35,1) both;animation-delay:calc(var(--z) * .25s + .4s)}
  .mk-dashliste li{animation:lb-herein .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(var(--k) * .15s + .5s)}
}