/* Zollstock-Gelb auf Werkstatt-Tinte. Systemschriften: keine Verbindung zu Dritten (Datenschutz). */
:root{
  --bg:#F2F4F6; --papier:#fff; --grau:#E8ECF0; --tinte:#101B2D; --stahl:#566376; --linie:#D3D9E1;
  --gelb:#F5C400; --gelb-hell:#FFF3BF; --gruen:#1E7A4C; --gruen-hell:#E3F3EA; --rot:#B3261E; --rot-hell:#FBE9E7; --warn-hell:#FFF3BF;
  --schrift:"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tinte);font:1.0625rem/1.6 var(--schrift);-webkit-text-size-adjust:100%}
img{max-width:100%}
a{color:var(--tinte);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--tinte);outline-offset:3px;border-radius:2px}
.skip{position:absolute;left:-999px;top:0;background:var(--gelb);padding:.6rem 1rem;z-index:99}
.skip:focus{left:0}
.wrap{max-width:1120px;margin:0 auto;padding-inline:20px}
.klein{font-size:.9rem;color:var(--stahl)}
.schmal{max-width:60ch}

/* Schrift */
h1,h2,h3{font-weight:800;line-height:1.1;letter-spacing:-.02em;margin:0 0 .5em;text-wrap:balance}
h1{font-size:clamp(2.2rem,5.6vw,4rem);letter-spacing:-.035em}
h2{font-size:clamp(1.6rem,3.2vw,2.3rem)}
h3,.h3{font-size:1.25rem;letter-spacing:-.01em;font-weight:750}
h2.h3{margin-top:1.8em}
.lede{font-size:clamp(1.1rem,1.6vw,1.28rem);line-height:1.55;color:var(--text2);max-width:58ch}
p{margin:0 0 1em}

/* Kopf */
.kopf{background:var(--papier);border-bottom:1px solid var(--linie);position:sticky;top:0;z-index:20}
.kopf-in{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.marke{display:inline-flex;align-items:center;gap:10px;font-weight:850;font-size:1.3rem;letter-spacing:-.02em;text-decoration:none;margin:0}
.marke-punkt{width:18px;height:18px;background:var(--gelb);border:2px solid var(--tinte);border-radius:3px;box-shadow:inset -6px 0 0 -2px var(--tinte)}
.nav{display:flex;align-items:center;gap:6px}
.nav a{padding:.55rem .8rem;text-decoration:none;font-weight:600;border-radius:6px}
.nav a:hover{background:var(--grau)}
.nav a[aria-current]{box-shadow:inset 0 -3px 0 var(--gelb)}
.nav .knopf{margin-left:8px}
.zahl{display:inline-grid;place-items:center;min-width:1.4em;height:1.4em;margin-left:.35em;border-radius:99px;background:var(--gelb);color:var(--tinte);font-size:.8rem}
.menu-schalter,.menu-knopf{display:none}

/* Knöpfe */
.knopf{display:inline-block;background:var(--tinte);color:#fff;border:2px solid var(--tinte);padding:.8rem 1.4rem;font:inherit;font-weight:700;border-radius:8px;text-decoration:none;cursor:pointer;line-height:1.2;text-align:center}
.knopf:hover{background:var(--hover)}
.knopf-hell{background:transparent;color:var(--tinte)}
.knopf-hell:hover{background:var(--grau)}
.knopf-klein{padding:.5rem .9rem}
.nav .knopf{color:#fff}.nav .knopf:hover{background:var(--hover)}
.knopf.voll{width:100%;margin-top:.5rem;background:var(--gelb);color:var(--tinte);border-color:var(--tinte)}
.knopf.voll:hover{background:#ffd633}
.knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin:1.6rem 0 1rem}
.text-knopf{background:none;border:0;padding:.4rem 0;font:inherit;color:var(--rot);text-decoration:underline;cursor:pointer}

/* Held */
.held{padding:clamp(40px,7vw,88px) 0 clamp(48px,7vw,88px)}
.held-in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,5vw,72px);align-items:center}
.held h1{margin-bottom:.45em}

/* Auftragszettel */
.zettel{margin:0;background:var(--papier);border:2px solid var(--tinte);border-radius:6px;padding:20px 22px 16px;box-shadow:8px 8px 0 var(--gelb);position:relative;transform:rotate(1.2deg)}
.zettel-kopf{display:flex;justify-content:space-between;font-size:.85rem;border-bottom:2px dashed var(--linie);padding-bottom:10px;margin-bottom:12px}
.zettel-kopf span{color:var(--stahl)}
.zettel-titel{font-weight:800;font-size:1.25rem;line-height:1.25;margin:0}
.zettel-kunde{color:var(--stahl);margin:.2em 0 1em}
.kette{list-style:none;margin:0;padding:0 0 0 26px;position:relative}
.kette::before{content:"";position:absolute;left:8px;top:8px;bottom:12px;width:2px;background:var(--linie)}
.kette li{position:relative;padding:0 0 14px;display:flex;flex-direction:column;line-height:1.3}
.kette li::before{content:"";position:absolute;left:-26px;top:3px;width:18px;height:18px;border:2px solid var(--stahl);background:var(--papier);border-radius:50%}
.kette li span{font-weight:700}
.kette small{color:var(--stahl);font-size:.88rem}
.kette .fertig::before{background:var(--gruen);border-color:var(--gruen);box-shadow:inset 0 0 0 3px var(--papier)}
.kette .laeuft::before{background:var(--gelb);border-color:var(--tinte)}
.zettel-fuss{display:flex;justify-content:space-between;gap:12px;font-size:.82rem;color:var(--stahl);border-top:2px dashed var(--linie);padding-top:10px}

/* Zollstock-Trenner */
.zollstock{height:22px;background:
  repeating-linear-gradient(90deg,var(--tinte) 0 2px,transparent 2px 14px) 0 100%/100% 9px no-repeat,
  repeating-linear-gradient(90deg,var(--tinte) 0 2px,transparent 2px 70px) 0 100%/100% 16px no-repeat,
  var(--gelb);
  border-block:2px solid var(--tinte)}

/* Blöcke */
.block{padding:clamp(48px,7vw,88px) 0}
.block-grau{background:var(--grau)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:start}
.drei{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:1.6rem}
.weg{display:flex;flex-direction:column;gap:6px;background:var(--papier);border:2px solid var(--tinte);border-radius:8px;padding:24px;text-decoration:none;transition:transform .15s,box-shadow .15s}
.weg:hover{transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--gelb)}
.weg p{color:var(--text2);flex:1}
.weg .weiter,.fuer{font-weight:700;font-size:.95rem}
.weg .weiter::after{content:" →"}
.fuer{color:var(--stahl);margin:0 0 .5rem}

/* Produktzeilen */
.zeilen{display:flex;flex-direction:column;margin-top:1.6rem;border-top:2px solid var(--tinte)}
.zeile{display:grid;grid-template-columns:1.1fr 1fr auto;gap:28px;padding:26px 0;border-bottom:2px solid var(--tinte);align-items:start}
.zeile h3{font-size:1.5rem}
.zeile h3 a{text-decoration:none}
.zeile h3 a:hover{text-decoration:underline}
.zeile-kopf p:last-child{margin:0;color:var(--text2)}
.zeile-aktion{display:flex;flex-direction:column;gap:10px;align-items:flex-start;min-width:200px}
.preis{margin:0;font-weight:750;background:var(--gelb-hell);border:1px solid var(--gelb);padding:.25rem .65rem;border-radius:4px;font-size:.95rem}
.haken{list-style:none;margin:0;padding:0}
.haken li{position:relative;padding-left:1.7rem;margin-bottom:.45rem;line-height:1.45}
.haken li::before{content:"";position:absolute;left:.15rem;top:.32em;width:.55rem;height:.9rem;border:solid var(--gruen);border-width:0 3px 3px 0;transform:rotate(40deg) scale(.8);transform-origin:center}
.haken.gross li{font-size:1.08rem;margin-bottom:.7rem}

/* Fakten, Schritte */
.fakten{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:2px solid var(--tinte)}
.fakten li{padding:16px 0;border-bottom:1px solid var(--linie);color:var(--text2)}
.fakten b{display:block;color:var(--tinte)}
.schritte{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:20px;counter-reset:s}
.schritte li{counter-increment:s;background:var(--papier);border:2px solid var(--tinte);border-radius:8px;padding:20px;display:flex;flex-direction:column;gap:6px}
.schritte li::before{content:counter(s);display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--gelb);border:2px solid var(--tinte);font-weight:800;margin-bottom:6px}
.schritte span{color:var(--text2);font-size:.98rem}

/* FAQ */
.faq details{border-top:2px solid var(--tinte);padding:0}
.faq details:last-of-type{border-bottom:2px solid var(--tinte)}
.faq summary{cursor:pointer;font-weight:700;padding:18px 36px 18px 0;list-style:none;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;translate:0 -50%;font-size:1.6rem;font-weight:400}
.faq details[open] summary::after{content:"–"}
.faq details p{max-width:62ch;padding-bottom:18px;color:var(--text2)}

/* Schluss */
.schluss{background:var(--tinte);color:#fff;padding:clamp(48px,7vw,80px) 0}
.schluss .lede{color:#D3DBE8}
.schluss .knopf{background:var(--gelb);color:var(--tinte);border-color:var(--gelb)}
.schluss .knopf-hell{background:transparent;color:#fff;border-color:#fff}
.schluss .knopf-hell:hover{background:var(--hover)}

/* Produktseite */
.detail{display:grid;grid-template-columns:1fr 380px;gap:clamp(28px,5vw,72px);align-items:start}
.branchen dt{font-weight:750;margin-top:1rem}
.branchen dd{margin:0;color:var(--text2)}
.bestell{position:sticky;top:90px;background:var(--papier);border:2px solid var(--tinte);border-radius:8px;padding:24px;box-shadow:8px 8px 0 var(--gelb)}
.bestell h2{margin-top:0}

/* Formulare */
.formular label,.bestell label{display:block;font-weight:650;margin:1rem 0 .3rem;font-size:.97rem}
.formular .hinweis{font-weight:400;color:var(--stahl)}
input:not([type=checkbox]):not([type=radio]),select,textarea{width:100%;font:inherit;color:inherit;background:var(--papier);border:2px solid var(--stahl);border-radius:6px;padding:.65rem .75rem}
input:focus,select:focus,textarea:focus{border-color:var(--tinte);outline:3px solid var(--gelb);outline-offset:0}
.formular{background:var(--papier);border:2px solid var(--tinte);border-radius:8px;padding:clamp(18px,3vw,30px)}
.formular label:first-child{margin-top:0}
.falle{position:absolute;left:-9999px;height:0;overflow:hidden}
.haken-zeile{display:flex!important;gap:10px;align-items:flex-start;font-weight:400!important;margin-top:1.2rem!important}
.haken-zeile input{width:20px;height:20px;margin-top:.2rem;flex:none;accent-color:var(--tinte)}
.wahl{border:0;padding:0;margin:0 0 .5rem}
.wahl legend{font-weight:750;margin-bottom:.4rem;padding:0}
.wahl label{display:flex;gap:12px;align-items:flex-start;border:2px solid var(--linie);border-radius:8px;padding:12px 14px;margin:0 0 8px;font-weight:400;cursor:pointer}
.wahl label:has(input:checked){border-color:var(--tinte);background:var(--gelb-hell)}
.wahl input{margin-top:.3rem;accent-color:var(--tinte)}
.wahl b{display:block}
.meldung{border-radius:8px;padding:14px 16px;margin-bottom:1rem;border:2px solid}
.meldung ul{margin:.3rem 0 0;padding-left:1.2rem}
.meldung.fehler{background:var(--rot-hell);border-color:var(--rot)}
.meldung.gut{background:var(--gruen-hell);border-color:var(--gruen)}
.meldung.warn{background:var(--warn-hell);border-color:var(--gelb)}

/* Anfrage */
.anfrage-raster{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start;margin-top:1.4rem}
.korb{list-style:none;margin:0 0 1rem;padding:0;border-top:2px solid var(--tinte)}
.korb li{display:flex;justify-content:space-between;gap:16px;padding:16px 0;border-bottom:1px solid var(--linie)}
.korb span,.korb em{display:block;color:var(--stahl);font-size:.95rem}
.korb em{font-style:normal;font-weight:700;color:var(--tinte);margin-top:.2rem}
.schmal-box{max-width:680px}
.text-seite{max-width:70ch}
code{background:var(--grau);padding:.1em .35em;border-radius:4px}

/* Fuß */
.fuss{background:var(--papier);padding:44px 0 56px}
.fuss-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:28px}
.fuss a{display:block;padding:.2rem 0;text-decoration:none;color:var(--text2)}
.fuss a:hover{text-decoration:underline}
.fuss-titel{font-weight:750;margin:0 0 .4rem}

/* Handy */
@media (max-width:900px){
  .held-in,.zwei,.detail,.anfrage-raster{grid-template-columns:1fr}
  .drei{grid-template-columns:1fr}
  .schritte{grid-template-columns:1fr 1fr}
  .zeile{grid-template-columns:1fr;gap:14px}
  .zeile-aktion{flex-direction:row;align-items:center;flex-wrap:wrap}
  .fuss-in{grid-template-columns:1fr 1fr}
  .bestell{position:static}
  .zettel{transform:none;margin-right:8px}
  .menu-knopf{display:grid;place-items:center;width:48px;height:48px;cursor:pointer;border:2px solid var(--tinte);border-radius:8px}
  .menu-knopf span,.menu-knopf span::before{content:"";display:block;width:22px;height:3px;background:var(--tinte);position:relative}
  .menu-knopf span::before{position:absolute;top:-7px;box-shadow:0 14px 0 var(--tinte)}
  .menu-schalter:focus-visible+.menu-knopf{outline:3px solid var(--tinte);outline-offset:3px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--papier);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:2px solid var(--tinte)}
  .menu-schalter:checked~.nav{display:flex}
  .nav a{padding:.8rem .6rem}
  .nav .knopf{margin:8px 0 0}
  .kopf-in{position:relative}
  .menu-schalter{display:block;position:absolute;opacity:0;right:20px;width:48px;height:48px}
}
@media (max-width:520px){
  .schritte,.fuss-in{grid-template-columns:1fr}
  .zettel-fuss{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}

/* Marke von ennuyire.com: Schriftzug in Orbitron, helles Blau auf Schwarz.
   Orbitron selbst hosten: Datei assets/fonts/Orbitron-Bold.woff2 ablegen (kein Google-Abruf, wegen Datenschutz). */
@font-face{font-family:Orbitron;font-weight:700;font-display:swap;src:url(fonts/Orbitron-Bold.woff2) format("woff2")}
:root{--schwarz:#05070A;--marke:#8ECAFF}
.kopf{background:var(--schwarz);border-bottom:2px solid var(--gelb)}
.marke{display:inline-flex;flex-direction:column;gap:2px;font:700 1.55rem/1 Orbitron,Bahnschrift,"Segoe UI",system-ui,sans-serif;letter-spacing:.01em;color:var(--marke)}
.marke small{font:300 .72rem/1.2 var(--schrift);letter-spacing:.04em;color:#fff}
.nav a{color:#fff}
.nav a:hover{background:#1a2230}
.nav .knopf{background:var(--gelb);color:var(--tinte);border-color:var(--gelb)}
.nav .knopf:hover{background:#ffd633}
.fuss{background:var(--schwarz);color:#C9D2E0}
.fuss a{color:#C9D2E0}
.fuss .marke small{color:#fff}
.fuss-titel{color:#fff}
.zahl{background:var(--tinte);color:#fff}
@media (max-width:900px){
  .menu-knopf{border-color:#fff}
  .menu-knopf span,.menu-knopf span::before{background:#fff}
  .menu-knopf span::before{box-shadow:0 14px 0 #fff}
  .menu-schalter:focus-visible+.menu-knopf{outline-color:var(--marke)}
  .nav{background:var(--schwarz);border-bottom-color:var(--gelb)}
}
.kopf :focus-visible,.fuss :focus-visible{outline-color:var(--marke)}

/* Warenkorb und Kasse */
.summen{display:grid;grid-template-columns:1fr auto;gap:4px 16px;margin:0 0 .6rem;padding:0}
.summen dt{margin:0}.summen dd{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.summen .gesamt{font-weight:800;font-size:1.2rem;border-top:2px solid var(--tinte);padding-top:8px;margin-top:4px}
.plz-ort{display:grid;grid-template-columns:7rem 1fr;gap:12px}
.text-seite ul{padding-left:1.2rem}.text-seite li{margin-bottom:.35rem}

/* ===== Effektfarbe, ruhiger Hintergrund, Dunkelmodus, Handy ===== */
:root{
  --effekt:linear-gradient(115deg,#7CC4FF 0%,#8FA8FF 38%,#A99BFF 62%,#6FD6C8 100%);
  --gelb:#8FB4FF;--gelb-hell:#E6EEFF;--text2:#2B3850;--hover:#22314d;
  --bg:#EDF2F8;--grau:#E1E9F2;--tinte:#0F1B2E;--glas:rgba(255,255,255,.55);
  --blob1:rgba(124,196,255,.40);--blob2:rgba(169,155,255,.30);--blob3:rgba(111,214,200,.30);
  --auf-effekt:#08111F;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0A0F18;--papier:#131A26;--grau:#172030;--tinte:#E9EEF6;--stahl:#9DAABD;--linie:#2A3548;--text2:#C5CFDE;--hover:#1a2230;
  --gelb:#7FA6F0;--gelb-hell:#1B2740;--gruen:#5FD39A;--gruen-hell:#12301F;--rot:#FF8F86;--rot-hell:#3A1816;--warn-hell:#1B2740;--glas:rgba(14,21,33,.62);
  --blob1:rgba(70,140,220,.26);--blob2:rgba(120,100,220,.20);--blob3:rgba(60,170,160,.20);
}}
html{-webkit-tap-highlight-color:transparent}
body{background:var(--bg);isolation:isolate;touch-action:manipulation}
body::before{content:"";position:fixed;inset:-25%;z-index:-1;pointer-events:none;will-change:transform;
  background:
    radial-gradient(42% 36% at 20% 24%,var(--blob1),transparent 70%),
    radial-gradient(36% 42% at 82% 18%,var(--blob2),transparent 70%),
    radial-gradient(46% 40% at 64% 82%,var(--blob3),transparent 70%);
  animation:schweben 42s ease-in-out infinite alternate}
@keyframes schweben{
  0%{transform:translate3d(-3%,-2%,0) scale(1) rotate(0)}
  50%{transform:translate3d(3%,2.5%,0) scale(1.08) rotate(2deg)}
  100%{transform:translate3d(-2%,3%,0) scale(1.03) rotate(-2deg)}}
.block-grau{background:var(--glas);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.kopf{border-bottom:3px solid;border-image:var(--effekt) 1}
.zollstock{background:
  repeating-linear-gradient(90deg,var(--auf-effekt) 0 2px,transparent 2px 14px) 0 100%/100% 9px no-repeat,
  repeating-linear-gradient(90deg,var(--auf-effekt) 0 2px,transparent 2px 70px) 0 100%/100% 16px no-repeat,
  var(--effekt);border-block:2px solid var(--auf-effekt)}
.marke{background:linear-gradient(90deg,#8ECAFF,#B9AEFF,#80E6D4,#8ECAFF);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:glanz 24s linear infinite}
.marke small{-webkit-text-fill-color:#fff}
@keyframes glanz{to{background-position:300% 0}}
.knopf,.nav .knopf,.knopf.voll,.schluss .knopf{background:var(--effekt);color:var(--auf-effekt);border-color:transparent;background-size:140% 100%;background-position:0 0;transition:background-position .4s ease,filter .2s}
.knopf:hover,.nav .knopf:hover,.knopf.voll:hover,.schluss .knopf:hover{background:var(--effekt);background-size:140% 100%;background-position:100% 0;filter:saturate(1.1)}
.knopf-hell,.schluss .knopf-hell{background:transparent;color:var(--tinte);border-color:var(--tinte)}
.knopf-hell:hover{background:var(--grau);filter:none}
.schluss .knopf-hell{color:#fff;border-color:#fff}.schluss .knopf-hell:hover{background:#22314d}
.zahl{background:#fff;color:var(--auf-effekt)}
.skip{background:var(--effekt);color:var(--auf-effekt)}
.schritte li::before{background:var(--effekt);color:var(--auf-effekt);border-color:var(--auf-effekt)}
.kette .laeuft::before{background:var(--effekt);border-color:var(--tinte)}
.kette .fertig::before{box-shadow:inset 0 0 0 3px var(--papier)}
.st-neu{background:var(--effekt);color:var(--auf-effekt)}
.filter a[aria-current]{background:var(--tinte);color:var(--papier)}
.adm-nav a[aria-current]{background:var(--effekt);color:var(--auf-effekt)}
.bestell,.zettel{box-shadow:8px 8px 0 var(--gelb)}
.vorschau{margin:0;padding:.5rem 20px;background:#FFE08A;color:#2A2100;text-align:center;font-size:.92rem;font-weight:600}
.fuss{background:var(--schwarz)}
input:not([type=checkbox]):not([type=radio]):focus,select:focus,textarea:focus{outline-color:var(--gelb)}

/* Handy: iOS-Richtlinien (44 pt) und Material (48 dp), Safe Areas, Eingabefelder ohne Zoom */
.wrap{padding-left:max(20px,env(safe-area-inset-left));padding-right:max(20px,env(safe-area-inset-right))}
.kopf{padding-top:env(safe-area-inset-top)}
.fuss{padding-bottom:calc(56px + env(safe-area-inset-bottom))}
.knopf,.nav a,.faq summary,.text-knopf{min-height:48px;display:inline-flex;align-items:center;justify-content:center}
.faq summary{display:flex;justify-content:flex-start}
.fuss a{min-height:44px;display:flex;align-items:center}
input:not([type=checkbox]):not([type=radio]),select,textarea{font-size:max(16px,1rem);min-height:48px}
input[type=checkbox],input[type=radio]{width:24px;height:24px}
.haken-zeile input{width:24px;height:24px}
@media (hover:none){.weg:hover{transform:none;box-shadow:none}.knopf:hover{background-position:0 0;filter:none}}

/* Feste Leiste unten (wie Bottom Bar in Material und iOS) auf Produktseiten am Handy */
.mobil-leiste{display:none}
@media (max-width:900px){
  .mobil-leiste{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;gap:12px;align-items:center;justify-content:space-between;
    background:var(--papier);border-top:2px solid var(--tinte);padding:10px max(16px,env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left))}
  .mobil-leiste .preis{margin:0}
  .mobil-leiste .knopf{flex:none}
  body.mit-leiste .fuss{padding-bottom:calc(96px + env(safe-area-inset-bottom))}
  .nav{max-height:calc(100dvh - 72px);overflow:auto}
}
@media (prefers-reduced-motion:reduce){body::before,.marke{animation:none}}
@media print{body::before{display:none}.kopf,.fuss,.mobil-leiste,.vorschau{display:none}}
.marke{min-height:44px;justify-content:center}
.mobil-leiste .preis{white-space:nowrap}

/* Über mich */
.geschichte{max-width:68ch}
.geschichte h2{margin-top:1.8em}
.zitat{margin:1.6rem 0;padding:.2rem 0 .2rem 1.2rem;border-left:4px solid;border-image:var(--effekt) 1;font-size:1.2rem;line-height:1.5;color:var(--tinte)}
.liste-sauber{list-style:none;margin:1rem 0;padding:0;border-top:2px solid var(--tinte)}
.liste-sauber li{padding:12px 0;border-bottom:1px solid var(--linie)}
.liste-sauber b{display:block}

/* Beispielansichten, Leiste "Läuft mit" */
.mock{margin:2rem 0 0;padding:16px;background:var(--papier);border:2px solid var(--tinte);border-radius:8px}
.mock figcaption{font-size:.9rem;color:var(--stahl);margin-bottom:12px}
.tafel{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tafel h4{margin:0 0 6px;font-size:.85rem;padding-bottom:6px;border-bottom:2px solid;border-image:var(--effekt) 1}
.tafel p{margin:0 0 6px;padding:8px;background:var(--grau);border-radius:6px;font-size:.85rem;line-height:1.3}
.abrechnung{width:100%;border-collapse:collapse;font-size:.92rem}
.abrechnung th,.abrechnung td{text-align:left;padding:8px 6px;border-bottom:1px solid var(--linie)}
.abrechnung td:last-child,.abrechnung th:last-child{text-align:right;font-variant-numeric:tabular-nums}
.abrechnung .summe td{font-weight:800;border-top:2px solid var(--tinte)}
@media (max-width:700px){.tafel{grid-template-columns:1fr 1fr}}
.laeuft-mit{display:flex;flex-wrap:wrap;gap:8px;margin:1rem 0 0;padding:0;list-style:none}
.laeuft-mit li{padding:.4rem .9rem;border:2px solid var(--tinte);border-radius:99px;font-weight:600;font-size:.95rem;background:var(--papier)}

/* ===== Neues Design: ruhig, flach, eine Akzentfarbe ===== */
:root{
  --akzent:#2F6BFF;--akzent-dunkel:#1F4FD0;--effekt:var(--akzent);--gelb:var(--akzent);--gelb-hell:#E8EEFF;
  --bg:#F6F8FB;--grau:#EBEFF5;--glas:rgba(255,255,255,.7);--auf-effekt:#fff;
  --blob1:rgba(47,107,255,.10);--blob2:rgba(47,107,255,.06);--blob3:rgba(47,107,255,.07);
}
@media (prefers-color-scheme:dark){:root{--akzent:#6C9BFF;--gelb-hell:#17213A;--auf-effekt:#071022;--blob1:rgba(80,130,255,.14);--blob2:rgba(80,130,255,.08);--blob3:rgba(80,130,255,.09)}}
body{font-size:1.0625rem}
.marke{background:none;-webkit-text-fill-color:#8ECAFF;color:#8ECAFF;animation:none}
.marke small{-webkit-text-fill-color:#C9D2E0}
.kopf{border-image:none;border-bottom:1px solid #1B2433}
.knopf,.nav .knopf,.knopf.voll,.schluss .knopf{background:var(--akzent);color:var(--auf-effekt);border-color:var(--akzent);background-size:auto;transition:background-color .15s}
.knopf:hover,.nav .knopf:hover,.knopf.voll:hover,.schluss .knopf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel);filter:none;color:#fff}
.knopf-hell,.schluss .knopf-hell{background:transparent;color:var(--tinte);border-color:var(--linie)}
.knopf-hell:hover{background:var(--grau);border-color:var(--stahl);color:var(--tinte)}
.zollstock{display:none}
.zettel,.bestell{box-shadow:none;border:1px solid var(--linie);transform:none;border-radius:14px}
.zettel{background:var(--papier)}
.weg,.mock,.schritte li,.formular{border:1px solid var(--linie);border-radius:14px}
.weg:hover{transform:none;box-shadow:none;border-color:var(--akzent)}
.weg .weiter{color:var(--akzent)}
.preis{background:var(--gelb-hell);border:0;color:var(--tinte)}
.st-neu,.adm-nav a[aria-current]{background:var(--akzent);color:var(--auf-effekt)}
.schritte li::before{background:var(--akzent);color:var(--auf-effekt);border:0}
.kette .laeuft::before{background:var(--akzent);border-color:var(--akzent)}
.zahl{background:var(--akzent);color:#fff}
.tafel h4{border-image:none;border-bottom:2px solid var(--akzent)}
.zeilen,.zeile{border-color:var(--linie)}
.nav a[aria-current]{box-shadow:inset 0 -2px 0 var(--akzent)}

/* Startseite: ein Bildschirm, klare Entscheidung */
.held2{padding:clamp(40px,8vw,96px) 0 clamp(32px,5vw,56px)}
.held2-in{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,72px);align-items:center}
.held2 h1{font-size:clamp(2.4rem,6.4vw,4.4rem);margin-bottom:.4em}
.held2 .zettel{padding:22px}
.kacheln{padding:0 0 clamp(32px,5vw,56px)}
.fakten-leiste{border-top:1px solid var(--linie);padding:28px 0 clamp(40px,6vw,72px)}
.fakten-leiste .wrap{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.fakten-leiste p{margin:0;color:var(--text2)}
@media (max-width:900px){.held2-in,.fakten-leiste .wrap{grid-template-columns:1fr}.fakten-leiste .wrap{gap:12px}}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--linie);border-radius:10px}
.shot figcaption{margin:10px 0 0}
.seiten-muster{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:2rem}
.seiten-muster .mock{margin:0}
.browser{display:flex;align-items:center;gap:6px;padding:8px 10px;background:var(--grau);border-radius:8px 8px 0 0;font-size:.8rem;color:var(--stahl)}
.browser i{width:9px;height:9px;border-radius:50%;background:var(--linie)}
.browser span{margin-left:8px}
.seite{padding:22px 18px;border-radius:0 0 8px 8px;min-height:150px}
.seite b{font-size:.85rem}.seite h4{margin:.6rem 0 .3rem;font-size:1.2rem;line-height:1.15}.seite p{margin:0 0 .8rem;font-size:.85rem;opacity:.8}
.seite.dunkel{background:#0E1A2B;color:#fff}.seite.hell{background:#EEF2F7;color:#0B1220}
.seite .kn{display:inline-block;padding:.35rem .8rem;background:var(--akzent);color:#fff;border-radius:6px;font-size:.8rem;font-weight:700}
@media (max-width:700px){.seiten-muster{grid-template-columns:1fr}}
.modul-text{margin:2rem 0 0;max-width:62ch}
.modul-text .h3{margin-top:0}
.schritt-liste{margin:0 0 1rem;padding-left:1.3rem}
.schritt-liste li{margin-bottom:.6rem;padding-left:.2rem}

/* Logo: Zeichen links, Name und Slogan rechts */
.marke{display:inline-grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:12px;row-gap:2px;align-items:center}
.marke-zeichen{grid-row:1 / span 2;width:44px;height:44px;display:block}
.marke span{align-self:end;line-height:1}
.marke small{align-self:start}

/* Menü klappt früher ein, damit Logo und sieben Punkte Platz haben */
@media (max-width:1300px){
  .menu-knopf{display:grid;place-items:center;width:48px;height:48px;cursor:pointer;border:2px solid #fff;border-radius:8px}
  .menu-knopf span,.menu-knopf span::before{content:"";display:block;width:22px;height:3px;background:#fff;position:relative}
  .menu-knopf span::before{position:absolute;top:-7px;box-shadow:0 14px 0 #fff}
  .menu-schalter{display:block;position:absolute;opacity:0;right:20px;width:48px;height:48px}
  .menu-schalter:focus-visible+.menu-knopf{outline:3px solid var(--marke);outline-offset:3px}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--schwarz);flex-direction:column;align-items:stretch;padding:12px 20px 20px;border-bottom:1px solid #1B2433;max-height:calc(100dvh - 72px);overflow:auto}
  .menu-schalter:checked~.nav{display:flex}
  .nav a{padding:.8rem .6rem}
  .nav .knopf{margin:8px 0 0}
  .kopf-in{position:relative}
}

.nav a{white-space:nowrap}

/* Vertrauen: Firmenangaben im Fuß und auf der Startseite */
.fuss-adresse{margin:.8rem 0 0;font-style:normal;font-size:.95rem;line-height:1.6;color:#C9D2E0}
.fuss-ende{display:flex;justify-content:space-between;gap:12px;border-top:1px solid #1B2433;margin-top:28px;padding-top:16px;font-size:.88rem;color:#8E9BB0}
.fuss-ende a{color:#8E9BB0;display:inline}
.dahinter{padding:0 0 clamp(36px,5vw,64px)}
.dahinter-in{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;align-items:start;border:1px solid var(--linie);border-radius:14px;padding:24px;background:var(--papier)}
.dahinter address{font-style:normal;line-height:1.6}
.dahinter .klein{grid-column:1 / -1;margin:0}
@media (max-width:700px){.dahinter-in{grid-template-columns:1fr}.fuss-ende{flex-direction:column}}

/* Logos: Kopf links, Fuß mit MaPaTec */
.logo-kopf{display:inline-flex;flex-direction:column;align-items:center;gap:4px;text-decoration:none;min-height:44px;justify-content:center}
.logo-kopf img{display:block;height:36px;width:auto}
.logo-kopf small{font:400 .66rem/1.2 var(--schrift);letter-spacing:.12em;color:#C9D2E0;text-align:center;white-space:nowrap}
.logo-fuss{display:inline-flex;flex-direction:column;align-items:center;gap:2px;margin:0 0 12px}
.logo-fuss img{display:block;height:64px;width:auto}
.logo-fuss span{font:400 .8rem/1.2 var(--schrift);letter-spacing:.12em;color:#C9D2E0}
@media (max-width:480px){.logo-kopf img{height:28px}.logo-kopf small{font-size:.58rem;letter-spacing:.08em}}
@media (min-width:1301px){.nav{gap:2px}.nav a{padding:.5rem .6rem}.nav .knopf{margin-left:6px}}