@font-face{font-family:"Avenir Next";font-style:normal;font-weight:200;font-display:swap;src:url(/PUBLIC/fonts/asset-863d28.woff) format("woff");}
@font-face{font-family:"Avenir Next";font-style:normal;font-weight:400;font-display:swap;src:url(/PUBLIC/fonts/asset-618031.woff) format("woff");}
@font-face{font-family:"Avenir Next";font-style:normal;font-weight:500;font-display:swap;src:url(/PUBLIC/fonts/asset-7e4875.woff) format("woff");}
@font-face{font-family:"Avenir Next";font-style:normal;font-weight:700;font-display:swap;src:url(/PUBLIC/fonts/asset-920f57.woff) format("woff");}

:root{
  color-scheme:dark;
  --img-planet:url(/PUBLIC/img/asset-5ab6a6.jpg);
  --img-photo:url("/PUBLIC/img/asset-9fe53d.jpg");
  --img-island:url(/PUBLIC/img/asset-f6bb63.png);
  --blue:#209ED9; --blue-deep:#0089CF; --yellow:#FEDD00; --charcoal:#3E3E3D;
  --ink:#0A0A0C; --ink-2:#0E0F13; --panel:#141419; --panel-2:#1a1b21;
  --line:rgba(255,255,255,.12); --line-2:rgba(255,255,255,.07);
  --text:#ECEEF5; --text-2:rgba(236,238,245,.62); --text-3:rgba(236,238,245,.36);
  --paper:#F7F6F2; --paper-ink:#141419;
  /* ⚠ `var(--danger)` wurde an fuenf Stellen benutzt, war aber NIE definiert:
     der Entfernen-Knopf im Warenkorb, Formularfehler, der Widerrufs-Hinweis —
     alle Fehlerzustaende blieben farblos und fielen damit nicht auf. Ein
     undefinierter Custom-Property faellt still auf den geerbten Wert zurueck;
     der Browser meldet nichts. Rot ist der it.koeln-Akzent der Gruppe. */
  --danger:#E8452C;
  --font:"Avenir Next",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --wrap:1220px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--text);font-family:var(--font);font-weight:400;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden}
a{color:inherit;text-decoration:none}
ul{margin:0;padding:0;list-style:none}
svg,img{display:block;max-width:100%}
::selection{background:var(--yellow);color:#000}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
.eyebrow{font-size:11px;font-weight:700;letter-spacing:.28em;text-transform:uppercase;color:var(--text-3)}
.eyebrow--y{color:var(--yellow)}
.mono{font-family:var(--mono)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:11px;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;
  padding:16px 28px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:.2s var(--ease);font-family:inherit;white-space:nowrap}
.btn .a{font-family:var(--mono);font-weight:400;font-size:16px;letter-spacing:0;transition:transform .2s var(--ease)}
.btn:hover .a{transform:translateX(4px)}
.btn--y{background:var(--yellow);color:#000}
.btn--y:hover{box-shadow:0 0 0 1px var(--yellow),0 14px 40px -10px rgba(254,221,0,.55)}
.btn--line{border-color:var(--line);color:var(--text)}
.btn--line:hover{border-color:var(--text);background:rgba(255,255,255,.04)}
.btn--blue{background:var(--blue);color:#fff}
.btn--blue:hover{background:var(--blue-deep)}
.btn--block{width:100%;justify-content:center}

/* ---------------- header ---------------- */
.hd{position:fixed;top:0;left:0;right:0;z-index:80;isolation:isolate;transition:.3s var(--ease)}
.hd__in{max-width:var(--wrap);margin:0 auto;padding:22px 32px;display:flex;align-items:center;justify-content:space-between}
.hd.scrolled{background:rgba(10,10,12,.7);backdrop-filter:blur(16px);border-bottom:1px solid var(--line-2)}
.hd.scrolled .hd__in{padding:14px 32px}
.brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px;letter-spacing:.01em}
.brand svg{width:30px;height:30px}
.brand .tld{color:var(--blue)}
.nav{display:flex;align-items:center;gap:34px}
.nav a{font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);transition:color .15s;cursor:pointer}
.nav a:hover,.nav a.on{color:var(--text)}
.nav .sep{width:1px;height:16px;background:var(--line)}
.nav .reg{color:var(--yellow)}
.burger{display:none;background:none;border:0;flex-direction:column;gap:5px;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--text);display:block}
.mnav{display:none}

.view{display:none}
.view.on{display:block}

/* ---------------- HERO ---------------- */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;--lh-x:31%;--lh-y:46%;--ov:45%;isolation:isolate}
.hero__fx{position:absolute;inset:0;z-index:0;isolation:isolate;overflow:hidden;pointer-events:none}
.hero__planet{position:absolute;inset:0;background-image:var(--img-photo);background-size:cover;background-position:var(--lh-x) var(--lh-y);
  opacity:.9;filter:saturate(1.04) brightness(.82) contrast(1.05)}
.hero__vig{position:absolute;inset:0;background:linear-gradient(270deg,rgba(10,10,12,.94) 0%,rgba(10,10,12,.76) 30%,rgba(10,10,12,.16) 62%,rgba(10,10,12,.46) 100%),linear-gradient(180deg,rgba(10,10,12,.24) 0%,rgba(10,10,12,0) 26%,rgba(10,10,12,.55) 78%,var(--ink) 99%)}
  .hero__beam{position:absolute;inset:calc(-1 * var(--ov));pointer-events:none;mix-blend-mode:screen;opacity:.9;--bx:calc((var(--lh-x) + var(--ov)) / 1.9);--by:calc((var(--lh-y) + var(--ov)) / 1.9);transform-origin:var(--bx) var(--by);background:conic-gradient(from 84deg at var(--bx) var(--by),rgba(254,221,0,0) 0deg,rgba(254,221,0,.5) 4deg,rgba(255,244,150,.72) 8deg,rgba(254,221,0,.5) 12deg,rgba(254,221,0,0) 17deg,rgba(254,221,0,0) 360deg),conic-gradient(from 262deg at var(--bx) var(--by),rgba(254,221,0,0) 0deg,rgba(254,221,0,.4) 4deg,rgba(255,244,150,.6) 8deg,rgba(254,221,0,.4) 12deg,rgba(254,221,0,0) 17deg,rgba(254,221,0,0) 360deg);animation:sweep 9s ease-in-out infinite alternate}
  .hero__beam::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at var(--bx) var(--by),rgba(255,246,170,.7) 0px,rgba(254,221,0,.3) 42px,rgba(254,221,0,0) 120px)}
  @media (prefers-reduced-motion:reduce){.hero__beam{animation:none}}
.hero__glow{position:absolute;width:60vw;height:60vw;left:52%;top:6%;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(32,158,217,.16),transparent 60%);filter:blur(30px)}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--wrap);margin:0 auto;padding:120px 32px 64px;margin-left:auto;text-align:right;align-items:flex-end}
.hero__eye{display:flex;align-items:center;gap:14px;margin-bottom:30px}
.hero__eye .dot{width:7px;height:7px;border-radius:50%;background:var(--yellow);box-shadow:0 0 14px 2px rgba(254,221,0,.8);animation:blink 3.5s var(--ease) infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.3}}

/* flashlight-reveal headline */
.reveal{position:relative;font-family:var(--font);font-weight:200;font-size:clamp(52px,10.5vw,168px);line-height:.95;
  letter-spacing:-.03em;margin:0;max-width:14ch;text-wrap:balance}
.reveal b{font-weight:700}
.reveal__base{color:var(--text);opacity:.9}
.reveal__lit{position:absolute;inset:0;color:var(--yellow);
  -webkit-mask-image:radial-gradient(circle 240px at var(--mx,30%) var(--my,42%),#000 0%,rgba(0,0,0,.55) 42%,transparent 72%);
          mask-image:radial-gradient(circle 240px at var(--mx,30%) var(--my,42%),#000 0%,rgba(0,0,0,.55) 42%,transparent 72%);
  pointer-events:none;will-change:mask-position}
@media (prefers-reduced-motion:reduce){.reveal__lit{-webkit-mask-image:none;mask-image:none;opacity:.55;mix-blend-mode:screen}}
.hero__lede{margin:38px 0 40px;max-width:44ch;font-size:clamp(16px,1.5vw,20px);line-height:1.65;color:var(--text-2)}
.hero__lede b{color:var(--text);font-weight:500}
.hero__cta{display:flex;gap:14px;flex-wrap:wrap}
.hero__scroll{position:absolute;left:32px;bottom:26px;z-index:2;display:flex;align-items:center;gap:12px;color:var(--text-3);
  font-size:11px;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.hero__scroll .ln{width:52px;height:1px;background:var(--text-3);position:relative;overflow:hidden}
.hero__scroll .ln::after{content:"";position:absolute;inset:0;width:40%;background:var(--yellow);animation:slide 2.4s var(--ease) infinite}
@keyframes slide{0%{transform:translateX(-120%)}100%{transform:translateX(320%)}}

/* ---------------- MARQUEE ---------------- */
.marq{border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2);padding:26px 0;overflow:hidden;white-space:nowrap;background:var(--ink-2)}
.marq__t{display:inline-block;animation:marq 26s linear infinite;font-family:var(--font);font-weight:200;font-size:clamp(30px,5vw,64px);letter-spacing:-.02em}
.marq__t span{opacity:.85}.marq__t .s{color:var(--yellow);margin:0 .5em;font-weight:400}
@keyframes marq{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq__t{animation:none}}

/* ---------------- MANIFEST ---------------- */
.manifest{padding:130px 0}
.manifest__grid{display:grid;grid-template-columns:1fr 1.9fr;gap:60px;align-items:start}
.manifest__ico{width:64px;height:64px}
.manifest h2{font-family:var(--font);font-weight:200;font-size:clamp(28px,3.6vw,50px);line-height:1.16;letter-spacing:-.02em;margin:0;text-wrap:balance}
.manifest h2 b{font-weight:700}
.manifest h2 .m{color:var(--text-3)}
.manifest__meta{margin-top:12px;font-size:13px;color:var(--text-3);letter-spacing:.06em;line-height:2}

/* ---------------- WORK INDEX ---------------- */
  .work{position:relative;padding:60px 0 150px;overflow:hidden}
  .work__deco{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .work__deco i{position:absolute;border-radius:50%;display:block}
  .work__deco .c1{width:580px;height:580px;right:-220px;top:-10px;background:rgba(32,158,217,.12)}
  .work__deco .c2{width:540px;height:540px;left:-200px;bottom:-150px;background:rgba(254,221,0,.12)}
  .work__deco .c3{width:250px;height:250px;right:8%;bottom:13%;background:rgba(255,255,255,.05)}
  .work__deco .c4{width:150px;height:150px;left:7%;top:9%;background:rgba(254,221,0,.09)}
  .work .wrap{position:relative;z-index:1}
  .work__head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:34px}
  .work__head h3{font-family:var(--font);font-weight:200;font-size:clamp(30px,4vw,60px);letter-spacing:-.02em;margin:8px 0 0}
  .work__head h3 b{font-weight:700}
  .wrow{position:relative;display:grid;grid-template-columns:58px 1fr auto;gap:30px;align-items:baseline;
    padding:30px 12px;border-top:1px solid var(--line);transition:background .3s var(--ease),padding .3s var(--ease);cursor:pointer}
  .wrow:last-child{border-bottom:1px solid var(--line)}
  .wrow__no{font-family:var(--mono);font-size:13px;color:var(--text-3);padding-top:8px}
  .wrow__main{min-width:0}
  .wrow__t{font-family:var(--font);font-weight:300;font-size:clamp(23px,2.9vw,38px);letter-spacing:-.01em;line-height:1.05;margin:0;transition:.3s var(--ease)}
  .wrow__t b{font-weight:700}
  .wrow__desc{margin:11px 0 0;max-width:56ch;color:var(--text-2);font-size:15px;line-height:1.62}
  .wrow__side{display:flex;flex-direction:column;align-items:flex-end;gap:9px;text-align:right;white-space:nowrap;padding-top:8px}
  .wrow__tags{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);transition:color .3s var(--ease)}
  .wrow__year{font-family:var(--mono);color:var(--text-3);font-size:13px}
  .wrow:hover{background:linear-gradient(90deg,rgba(254,221,0,.055),transparent 58%);padding-left:20px}
  .wrow:hover .wrow__t{color:#fff}
  .wrow:hover .wrow__tags{color:var(--yellow)}
  @media (max-width:720px){
    .wrow{grid-template-columns:32px 1fr;gap:14px;padding:24px 8px}
    .wrow__side{flex-direction:row;align-items:center;gap:12px;justify-content:flex-start;padding-top:12px;grid-column:2}
    .wrow__desc{font-size:14px}
  }


  .work .wrap{counter-reset:wrow}
  .wrow{counter-increment:wrow}
  .wrow__no::before{content:counter(wrow,decimal-leading-zero)}
  .wrow.hidden{display:none}
  .wrow__t .go{margin-left:.3em;font-family:var(--mono);font-weight:400;opacity:0;transform:translateX(-4px);transition:.25s var(--ease);color:var(--yellow);display:inline-block}
  .wrow:hover .wrow__t .go{opacity:1;transform:none}
  .filters{display:flex;flex-wrap:wrap;gap:9px;margin:0}
.wtools{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin:0 0 22px}
.wtools .filters{flex:1 1 auto}
@media(max-width:720px){.wtools{align-items:stretch}.wtools .sortbar{justify-content:flex-end}}
  .sortbar{display:flex;align-items:center;gap:10px;margin:0;flex:0 0 auto;font-size:12px;color:var(--text-3)}
  .sortbar select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:99px;padding:8px 14px;font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;cursor:pointer}
  .sortbar select:focus{outline:none;border-color:var(--yellow)}
  .fchip{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-2);background:transparent;border:1px solid var(--line);padding:9px 15px;border-radius:999px;cursor:pointer;transition:.18s var(--ease)}
  .fchip:hover{border-color:var(--text-2);color:var(--text)}
  .fchip.on{background:var(--yellow);color:#000;border-color:var(--yellow)}
  /* ---------------- LEISTUNGEN (editorial list) ---------------- */
.serv{padding:120px 0;border-top:1px solid var(--line-2);background:var(--ink-2)}
.serv__head{max-width:720px;margin-bottom:40px}
.serv__head h3{font-family:var(--font);font-weight:200;font-size:clamp(30px,4.4vw,64px);letter-spacing:-.02em;margin:10px 0 0}
.serv__head h3 b{font-weight:700}
/* Eigene Produkte: abgesetzter Block + 4 Kacheln nebeneinander */
.serv--products{position:relative;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,var(--ink) 0%,#13151f 18%,#13151f 82%,var(--ink) 100%)}
.serv--products::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(110% 55% at 50% 0%,rgba(32,158,217,.10),transparent 62%)}
.serv--products>.wrap{position:relative;z-index:1}
.bteaser{--bt-w:max(100%,min(1480px,calc(100vw - 96px)));width:var(--bt-w);margin-left:calc(50% - var(--bt-w)/2);
  display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bteaser .bp__f{display:flex;flex-direction:column;background:rgba(255,255,255,.026);border:1px solid var(--line-2);border-top-width:3px;
  border-radius:14px;padding:20px 20px 22px;transition:background .25s var(--ease),transform .25s var(--ease),border-color .25s var(--ease)}
.bteaser .bp__f:hover{background:rgba(255,255,255,.058);border-color:var(--line);transform:translateY(-3px)}
@media(max-width:1080px){.bteaser{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.bteaser{grid-template-columns:1fr}}
.srow{display:grid;grid-template-columns:56px 1.1fr 1.4fr auto;gap:24px;align-items:baseline;padding:28px 6px;border-top:1px solid var(--line)}
.srow:last-child{border-bottom:1px solid var(--line)}
.srow__no{font-family:var(--mono);color:var(--yellow);font-size:13px}
.srow__t{font-family:var(--font);font-weight:400;font-size:clamp(20px,2.4vw,30px);letter-spacing:-.01em}
.srow__d{color:var(--text-2);font-size:15px;line-height:1.6}
.srow__x{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);white-space:nowrap}

/* ---------------- CTA ---------------- */
.cta{position:relative;padding:150px 0;text-align:center;overflow:hidden}
.cta__isle{position:relative;width:min(560px,84%);margin:0 auto 6px}
  .cta__beam{position:absolute;inset:-300%;pointer-events:none;mix-blend-mode:screen;opacity:.8;--bx:calc((49.94% + 300%) / 7);--by:calc((11.53% + 300%) / 7);transform-origin:var(--bx) var(--by);background:conic-gradient(from 84deg at var(--bx) var(--by),rgba(254,221,0,0) 0deg,rgba(254,221,0,.42) 3deg,rgba(255,244,150,.6) 6deg,rgba(254,221,0,.42) 9deg,rgba(254,221,0,0) 13deg,rgba(254,221,0,0) 360deg),conic-gradient(from 264deg at var(--bx) var(--by),rgba(254,221,0,0) 0deg,rgba(254,221,0,.34) 3deg,rgba(255,244,150,.5) 6deg,rgba(254,221,0,.34) 9deg,rgba(254,221,0,0) 13deg,rgba(254,221,0,0) 360deg);animation:sweep 9s ease-in-out infinite alternate}
  .cta__beam::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;background:radial-gradient(circle at var(--bx) var(--by),rgba(255,246,170,.55) 0px,rgba(254,221,0,.2) 26px,rgba(254,221,0,0) 80px)}
@keyframes sweep{0%{transform:rotate(-8deg)}100%{transform:rotate(8deg)}}
/* Leuchtfeuer: Laterne pulsiert, Strahl atmet in eigener Periode */
.cta__beam{animation:sweep 9s ease-in-out infinite alternate,beamBreathe 6.1s ease-in-out infinite}
.cta__beam::after{animation:lampPulse 4.6s ease-in-out infinite;will-change:opacity}
@keyframes lampPulse{0%{opacity:.66}8%{opacity:1}16%{opacity:.76}24%{opacity:.97}38%{opacity:.7}55%{opacity:.9}70%{opacity:.68}84%{opacity:.94}100%{opacity:.66}}
@keyframes beamBreathe{0%{opacity:.62}50%{opacity:.88}100%{opacity:.62}}
@media (prefers-reduced-motion:reduce){.cta__beam,.cta__beam::after{animation:none}}
.cta h2{position:relative;font-family:var(--font);font-weight:200;font-size:clamp(40px,8vw,120px);line-height:.98;letter-spacing:-.03em;margin:0 0 12px}
.cta h2 b{font-weight:700;color:var(--yellow)}
.cta p{position:relative;color:var(--text-2);max-width:38ch;margin:0 auto 36px;font-size:17px;line-height:1.6}
.cta__row{position:relative;display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ---------------- FOOTER ---------------- */
.ft{border-top:1px solid var(--line);padding:80px 0 40px}
.ft__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.4fr;gap:40px}
.ft__brand{display:flex;align-items:center;gap:11px;font-weight:700;font-size:16px;margin-bottom:16px}
.ft__brand svg{width:34px;height:34px}.ft__brand .tld{color:var(--blue)}
.ft p{color:var(--text-3);font-size:14px;line-height:1.7;margin:0}
.ft h6{font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--text-3);margin:0 0 16px}
.ft li{margin-bottom:11px}
.ft a{color:var(--text-2);font-size:14px}.ft a:hover{color:var(--yellow)}
.ft__bar{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:56px;padding-top:22px;border-top:1px solid var(--line-2);color:var(--text-3);font-size:12px;letter-spacing:.04em}

/* ---------------- AUTH ---------------- */
  .auth{min-height:100vh;min-height:100dvh;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
       align-items:stretch;background:var(--ink)}
  /* Markenseite: derselbe Leuchtturm wie im Hero, Strahl an der Laterne */
  .auth__side{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
       padding:44px;border-right:1px solid var(--line);--lh-x:69%;--lh-y:46%;--ov:45%}
  .auth__bg{position:absolute;inset:0;transform:scaleX(-1);background:var(--img-photo) 31% 46%/cover no-repeat;
       opacity:.92;filter:saturate(1.04) brightness(.82) contrast(1.04)}
  .auth__scrim{position:absolute;inset:0;background:
       linear-gradient(90deg,rgba(10,10,12,.9) 0%,rgba(10,10,12,.6) 42%,rgba(10,10,12,.22) 100%),
       linear-gradient(180deg,rgba(10,10,12,.35) 0%,rgba(10,10,12,0) 32%,rgba(10,10,12,.55) 100%)}
  .auth__beam{position:absolute;inset:calc(-1 * var(--ov));pointer-events:none;mix-blend-mode:screen;opacity:.85;
       --bx:calc((var(--lh-x) + var(--ov)) / 1.9);--by:calc((var(--lh-y) + var(--ov)) / 1.9);
       transform-origin:var(--bx) var(--by);
       background:
        conic-gradient(from 84deg at var(--bx) var(--by),rgba(254,221,0,0) 0deg,rgba(254,221,0,.44) 4deg,rgba(255,244,150,.62) 8deg,rgba(254,221,0,.44) 12deg,rgba(254,221,0,0) 17deg,rgba(254,221,0,0) 360deg),
        conic-gradient(from 262deg at var(--bx) var(--by),rgba(254,221,0,0) 0deg,rgba(254,221,0,.34) 4deg,rgba(255,244,150,.5) 8deg,rgba(254,221,0,.34) 12deg,rgba(254,221,0,0) 17deg,rgba(254,221,0,0) 360deg);
       animation:sweep 9s ease-in-out infinite alternate}
  .auth__beam::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:screen;
       background:radial-gradient(circle at var(--bx) var(--by),rgba(255,246,170,.6) 0px,rgba(254,221,0,.24) 40px,rgba(254,221,0,0) 115px)}
  .auth__brand{position:relative;z-index:2;display:flex;align-items:center;gap:11px;font-weight:700;font-size:15px;color:#fff}
  .auth__brand svg{width:32px;height:32px}
  .auth__brand .tld{color:var(--blue)}
  .auth__pitch{position:relative;z-index:2;max-width:30ch}
  .auth__pitch h2{font-family:var(--font);font-weight:200;font-size:clamp(30px,3.4vw,52px);line-height:1.02;
       letter-spacing:-.02em;margin:0 0 16px;color:#fff;text-shadow:0 2px 22px rgba(10,10,12,.6)}
  .auth__pitch h2 b{font-weight:700;color:var(--yellow)}
  .auth__pitch p{color:rgba(255,255,255,.82);margin:0;font-size:16px;line-height:1.6;
       text-shadow:0 1px 12px rgba(10,10,12,.5)}
  .auth__list{margin-top:28px;display:flex;flex-direction:column;gap:12px;list-style:none;padding:0}
  .auth__list li{display:flex;gap:11px;align-items:flex-start;color:#fff;font-size:15px}
  .auth__list svg{flex:0 0 auto;color:var(--yellow);margin-top:3px}
  .auth__foot{position:relative;z-index:2;color:rgba(255,255,255,.55);font-size:12px}
  /* Formularseite */
  .auth__form{display:flex;flex-direction:column;justify-content:center;padding:52px clamp(24px,5vw,76px);background:var(--ink)}
  .auth__inner{width:100%;max-width:400px;margin:0 auto}
  .auth__back{display:inline-flex;align-items:center;gap:8px;font-size:11px;font-weight:800;letter-spacing:.16em;
       text-transform:uppercase;color:var(--text-3);margin-bottom:34px}
  .auth__back:hover{color:var(--yellow)}
  .auth__inner h1{font-family:var(--font);font-weight:200;font-size:38px;letter-spacing:-.02em;margin:0 0 8px;color:var(--text)}
  .auth__inner h1 b{font-weight:700}
  .auth__inner .sub{color:var(--text-2);margin:0 0 32px;font-size:15px}
  .fld{margin-bottom:18px}
  .fld label{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
       color:var(--text-3);margin-bottom:9px}
  .fld label .opt{letter-spacing:0;text-transform:none;font-weight:400;color:var(--text-3)}
  .fld input,.fld textarea,.fld select{width:100%;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:var(--panel);
       color:var(--text);font-family:inherit;font-size:15px;transition:.16s}
  .fld input::placeholder,.fld textarea::placeholder{color:var(--text-3)}
  .fld input:focus,.fld textarea:focus,.fld select:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(254,221,0,.13)}
  /* Textfelder wachsen nur nach unten — seitliches Ziehen sprengt das Raster. */
  .fld textarea{resize:vertical;min-height:120px;line-height:1.6;font-family:inherit}
  .fld__row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .hint{font-size:12px;color:var(--text-3);margin:9px 0 0}
  /* Warum das Anlegen nicht geklappt hat — am Formular statt auf einer fremden Seite.
     Mit Zeichen davor: eine Meldung, die man als Meldung erkennt, bevor man sie liest. */
  .authfehler{margin:0 0 18px;padding:12px 14px 12px 40px;border-radius:10px;font-size:14px;line-height:1.5;
    color:#ffb4a8;background:rgba(232,69,44,.12);border:1px solid rgba(232,69,44,.4);position:relative}
  .authfehler::before{content:"!";position:absolute;left:13px;top:12px;width:18px;height:18px;
    border-radius:50%;background:rgba(232,69,44,.85);color:#fff;font-size:12px;font-weight:800;
    line-height:18px;text-align:center}

  /* Laufender Vorgang — „wird angemeldet", „Konto wird angelegt". Kein Fehler, aber
     auch kein beilaeufiger Hinweis: hier passiert gerade etwas, und man soll es sehen. */
  .authinfo{margin:0 0 18px;padding:12px 14px 12px 40px;border-radius:10px;font-size:14px;line-height:1.5;
    color:var(--text-2);background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.10);
    position:relative}
  .authinfo::before{content:"";position:absolute;left:14px;top:14px;width:15px;height:15px;
    border-radius:50%;border:2px solid rgba(255,255,255,.18);border-top-color:var(--yellow);
    animation:authdreh .7s linear infinite}
  @keyframes authdreh{to{transform:rotate(360deg)}}
  @media (prefers-reduced-motion:reduce){ .authinfo::before{animation:none} }

  /* Schritt 2 der Registrierung: die sechs Ziffern aus der Mail.

     Der Kasten ERSETZT das Formular — deshalb bringt er seine eigene Ueberschrift
     mit und uebernimmt die Seite ganz. Ein Eingabefeld neben einem toten Formular
     liest sich wie ein halb abgebrochener Vorgang; genau das war die Kasse vorher.

     Das Feld ist bewusst gross und weit gesperrt: sechs Ziffern werden abgetippt
     oder eingefuegt, oft vom Handy abgelesen. Da hilft jeder Millimeter. */
  .authcode__t{font-size:26px;line-height:1.2;margin:0 0 10px;font-weight:800;letter-spacing:-.5px}
  .authcode__s{font-size:14.5px;line-height:1.6;color:var(--text-2);margin:0 0 22px}
  .authcode__s b{color:var(--text-1);font-weight:700}
  .authcode__zeile{display:flex;gap:11px;align-items:stretch;flex-wrap:wrap}
  .authcode__in{flex:1 1 190px;min-width:0;padding:15px 18px;border-radius:11px;
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);color:var(--text-1);
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:25px;font-weight:700;letter-spacing:9px;text-align:center}
  .authcode__in::placeholder{color:var(--text-3);letter-spacing:9px}
  .authcode__in:focus{outline:none;border-color:var(--yellow);box-shadow:0 0 0 3px rgba(254,221,0,.13)}
  .authcode__in:disabled{opacity:.55}
  .authcode__zeile .btn{flex:0 0 auto}
  .authcode__f{font-size:12.5px;line-height:1.6;color:var(--text-3);margin:14px 0 0}
  .authcode__f--fehler{color:#ffb4a8}
  @media (max-width:420px){ .authcode__zeile .btn{flex:1 1 100%} }

  /* PIN — sechs Ziffernkaesten (window._lsmgPin). Ersetzt das lange Textfeld
     fuer Bestaetigungs- und Wiederherstellungscodes. */
  .pin{display:flex;gap:10px;margin:2px 0 2px}
  .pin__cell{width:52px;height:62px;flex:1 1 0;min-width:0;text-align:center;
    font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
    font-size:26px;font-weight:700;color:var(--text-1);caret-color:var(--yellow);
    background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.14);border-radius:12px;
    transition:border-color .12s,box-shadow .12s,background .12s;padding:0}
  .pin__cell:focus{outline:none;border-color:var(--yellow);background:rgba(254,221,0,.06);
    box-shadow:0 0 0 3px rgba(254,221,0,.14)}
  .pin__cell:disabled{opacity:.55}
  @media (max-width:420px){ .pin{gap:7px} .pin__cell{height:54px;font-size:22px} }

  .check{display:flex;gap:11px;align-items:flex-start;font-size:13px;color:var(--text-2);margin:8px 0 26px;
       cursor:pointer;line-height:1.55}
  .check input{margin-top:2px;accent-color:var(--yellow);width:16px;height:16px;flex:0 0 auto}
  .check a{color:var(--yellow);font-weight:700}
  .altline{text-align:center;margin-top:26px;font-size:14px;color:var(--text-2)}
  .altline a{color:var(--yellow);font-weight:700}
  .forgot{display:block;text-align:right;font-size:13px;color:var(--text-2);font-weight:600;margin:-8px 0 24px}
  .forgot:hover{color:var(--yellow)}
  /* Passwort vergessen: fuenf Zustaende auf EINER Seite, immer nur einer sichtbar. */
  .pwstep{display:none}
  .pwstep.on{display:block}
  /* Solange der Schluessel aus dem Link noch geprueft wird, steht das Formular
     zwar da, laesst sich aber nicht bedienen — sonst tippt jemand ein Passwort
     in ein Feld, das gleich verschwindet. */
  .pwstep--warten{opacity:.5;pointer-events:none}
  .pwm{height:5px;border-radius:99px;background:var(--panel-2);margin-top:10px;overflow:hidden}
  .pwm>i{display:block;height:100%;width:0;background:var(--yellow);transition:.25s var(--ease)}
  @media(max-width:900px){
    .auth{grid-template-columns:1fr}
    .auth__side{min-height:300px;padding:32px;border-right:0;border-bottom:1px solid var(--line)}
    .auth__list{display:none}
    .auth__form{padding:40px 24px 56px}
  }
/* ---------------- KONTO ---------------- */
.kv{min-height:100svh;padding:130px 0 64px}
/* Die Kennzahlen stehen jetzt IM Inhaltspanel — deshalb ohne eigenen Rahmen. */
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.kpi{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:16px 18px}
.kpi b{display:block;font-family:var(--font);font-weight:200;font-size:34px;line-height:1}
.kpi span{font-size:12px;color:var(--text-3);margin-top:7px;display:block;letter-spacing:.02em}
.kcols{display:grid;grid-template-columns:250px 1fr;gap:16px;align-items:start}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px}
.panel h3{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:0 0 18px}
.snav{display:flex;flex-direction:column;gap:2px}
.snav a{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;font-weight:700;font-size:14px;color:var(--text-2);cursor:pointer}
.snav a.on,.snav a:hover{background:rgba(254,221,0,.1);color:var(--yellow)}
.svc{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 0;border-bottom:1px solid var(--line-2)}
.svc:last-of-type{border-bottom:0}
.svc__l{display:flex;align-items:center;gap:14px}
.svc__i{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;background:rgba(32,158,217,.14);color:var(--blue);flex:0 0 auto}
.svc__t b{display:block;font-size:15px}.svc__t span{font-size:13px;color:var(--text-3)}
.tag{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:5px 12px;border-radius:99px;white-space:nowrap}
.tag--ok{background:rgba(46,184,114,.18);color:#4bd68a}
.tag--due{background:rgba(254,221,0,.2);color:var(--yellow)}

/* ---------------- responsive ---------------- */
@media (max-width:900px){
  .nav{display:none}.burger{display:flex}
  .manifest__grid{grid-template-columns:1fr;gap:32px}
  .ft__grid{grid-template-columns:1fr 1fr}
  .srow{grid-template-columns:40px 1fr;gap:14px}.srow__d,.srow__x{display:none}
  .wrow__swatch{display:none}
  .auth{grid-template-columns:1fr}.auth__side{display:none}
  .kcols{grid-template-columns:1fr}
  .hd.open .mnav{display:flex;flex-direction:column;gap:2px;margin:0 32px;padding:14px;background:var(--panel);border:1px solid var(--line);border-radius:16px}
  .hd.open .mnav a{padding:13px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text)}
}
@media (max-width:560px){
  .wrap,.hd__in,.hero__in{padding-left:22px;padding-right:22px}
  .ft__grid{grid-template-columns:1fr}.kpis{grid-template-columns:1fr}.fld__row{grid-template-columns:1fr}
  .hero__scroll{display:none}
}

/* ---------------- SHOP ---------------- */
.shoproom{padding:130px 0 90px;min-height:100svh}
.shop__head{margin-bottom:26px}
.shop__head h1{font-family:var(--font);font-weight:200;font-size:clamp(34px,5vw,58px);letter-spacing:-.02em;margin:8px 0 0}
.shop__head h1 b{font-weight:700}
.shop__grid{display:grid;grid-template-columns:1fr 350px;gap:26px;align-items:start}
.domain{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:22px;margin-bottom:26px}
.domain h3{margin:0 0 12px;font-size:15px;font-weight:700}
.domain__row{display:flex;gap:10px}
.domain__row input{flex:1;padding:14px 16px;border:1px solid var(--line);border-radius:10px;background:var(--ink);color:var(--text);font-family:inherit;font-size:15px}
.domain__row input:focus{outline:none;border-color:var(--yellow)}
.domain__res{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.dres{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--ink)}
.dres b{font-weight:700}.dres .ok{color:#4bd68a;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}
.seclabel{font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3);margin:26px 0 14px}
.tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.pcard{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;display:flex;flex-direction:column}
.pcard.pop{border-color:var(--yellow)}
.pcard__tag{position:absolute;top:-10px;left:24px;background:var(--yellow);color:#000;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.pcard h4{margin:0;font-size:18px;font-weight:700}
.pcard .price{font-family:var(--font);font-weight:200;font-size:34px;margin:10px 0 2px;line-height:1}
.pcard .price small{font-size:13px;color:var(--text-3);font-weight:400}
.pcard ul{margin:14px 0 18px;display:flex;flex-direction:column;gap:8px}
.pcard li{font-size:13px;color:var(--text-2);display:flex;gap:8px;align-items:flex-start}
.pcard li svg{flex:0 0 auto;color:var(--yellow);margin-top:2px}
.pcard .btn{margin-top:auto}
.addons{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.arow{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.arow b{font-size:15px}.arow span{font-size:12px;color:var(--text-3);display:block}
.arow .pr{font-family:var(--mono);color:var(--text-2);font-size:14px}
.iconbtn{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:transparent;color:var(--text);cursor:pointer;font-size:18px;line-height:1;transition:.15s}
.iconbtn:hover{border-color:var(--yellow);color:var(--yellow)}
/* cart */
.cart{position:sticky;top:100px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.cart h3{margin:0 0 16px;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.cart__empty{color:var(--text-3);font-size:14px;padding:18px 0}
.citem{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 0;border-top:1px solid var(--line-2)}
.citem:first-of-type{border-top:0}
.citem__n{font-size:14px}.citem__n span{display:block;font-size:12px;color:var(--text-3)}
.citem__r{display:flex;align-items:center;gap:12px}
.citem__p{font-family:var(--mono);font-size:13px;color:var(--text-2);white-space:nowrap}
.citem__x{background:none;border:0;color:var(--text-3);cursor:pointer;font-size:16px;line-height:1}
.citem__x:hover{color:var(--danger)}
/* Einmaliges (Einrichtung, Hardware) ist eine vollwertige Zeile — es stand vorher
   nur als Sammelbetrag unter der Summe und war im Warenkorb unsichtbar. Leicht
   eingerückt und ohne obere Trennlinie, weil es zur Position darüber gehört und
   nicht als eigenes Produkt gelesen werden soll. */
.citem--einmal{border-top:0;padding-top:0;padding-left:16px;position:relative}
.citem--einmal::before{content:"";position:absolute;left:3px;top:calc(50% - 7px);
  width:7px;height:7px;border-left:1px solid var(--line);border-bottom:1px solid var(--line)}
.citem--einmal .citem__n b{font-weight:600;color:var(--text-2)}
.citem--einmal .citem__p{color:var(--text-3)}
.cart__sum{display:flex;justify-content:space-between;align-items:baseline;margin:16px 0;padding-top:16px;border-top:1px solid var(--line)}
.cart__sum b{font-family:var(--font);font-weight:200;font-size:28px}
.cart__sum small{color:var(--text-3);font-size:12px}
.cart .badge{display:inline-block;min-width:20px;text-align:center;background:var(--yellow);color:#000;border-radius:99px;font-size:11px;font-weight:700;padding:2px 6px;margin-left:6px}
/* checkout */
.co{padding:130px 0 90px;min-height:100svh}
.co__grid{display:grid;grid-template-columns:1fr 360px;gap:26px;align-items:start}
.co__step{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:26px;margin-bottom:16px}
.co__step h3{margin:0 0 16px;font-size:13px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);display:flex;align-items:center;gap:10px}
.co__step h3 i{width:24px;height:24px;border-radius:50%;background:var(--yellow);color:#000;display:grid;place-items:center;font-size:12px;font-style:normal;font-weight:700}
.pay{display:flex;flex-direction:column;gap:10px}
.pay label{display:flex;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:11px;cursor:pointer;font-size:15px;transition:.15s}
.pay label:hover{border-color:var(--text-2)}
.pay input{accent-color:var(--yellow);width:18px;height:18px}
.pay label.sel{border-color:var(--yellow);background:rgba(254,221,0,.06)}
.co__side{position:sticky;top:100px;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:24px}
.note{font-size:12px;color:var(--text-3);line-height:1.6;margin:14px 0 0}
/* danke */
/* Ohne Positionen kein Kasten und keine Nummer — wer ohne Bestellung hierher
   kommt, sah sonst einen leeren Rahmen und einen Platzhalter. */
.onr:empty{display:none}
@media (max-width:900px){
  .shop__grid,.co__grid{grid-template-columns:1fr}
  .cart,.co__side{position:static}
  .tiers,.addons{grid-template-columns:1fr}
}

  .shop__intro{color:var(--text-2);max-width:62ch;margin:14px 0 0;font-size:15px;line-height:1.6}
  .shop__intro b{color:var(--text)}
  .tldhint{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
  .tldchip{font-size:12px;color:var(--text-3);border:1px solid var(--line-2);border-radius:99px;padding:5px 11px}
  .tldchip b{color:var(--yellow);font-weight:700}
  .pcard__app{font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:4px}
  .cfg__note{color:var(--text-2);font-size:14px;margin:0 0 14px;max-width:64ch;line-height:1.6}
  .cfg{display:grid;grid-template-columns:1fr 1fr auto;gap:18px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;margin-bottom:6px}
  .cfg__col label{display:block;font-size:11px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);margin-bottom:9px}
  .cfg select{width:100%;padding:14px 15px;border:1px solid var(--line);border-radius:11px;background:var(--ink);color:var(--text);font-family:inherit;font-size:15px;cursor:pointer}
  .cfg select:focus{outline:none;border-color:var(--yellow)}
  .cfg__sum{display:flex;flex-direction:column;gap:10px;align-items:flex-start}
  .cfg__price{font-family:var(--font);font-weight:200;font-size:32px;line-height:1}
  .cfg__sum small{color:var(--text-3);font-size:12px}
  @media(max-width:720px){.cfg{grid-template-columns:1fr}}

  .swst{display:flex;gap:6px;list-style:none;margin:0 0 30px;padding:0;flex-wrap:wrap}
  .swst li{display:flex;flex-wrap:wrap;align-items:center;gap:9px;min-width:104px;padding:0;color:var(--text-3);font-size:12px;font-weight:700;letter-spacing:.06em;transition:.2s var(--ease);border:0}
  .swst i{width:22px;height:22px;flex:0 0 auto;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:800}
  .swst li.on{color:var(--yellow);border-bottom-color:var(--yellow)}
  .swst li.on i{background:var(--yellow);border-color:var(--yellow);color:#000}
  .swst li.done{color:var(--text-2);border-bottom-color:var(--text-3)}
  .swst li.done i{border-color:var(--text-3);color:var(--text-2)}
  @media(max-width:640px){.swst li span{display:none}.swst li{min-width:0;justify-content:center}}
  .wiz__step{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow);margin:26px 0 14px}
  .pcard.pick{cursor:pointer}
  .pcard.pick:hover{border-color:var(--text-2)}
  .pcard.sel{border-color:var(--yellow);box-shadow:0 0 0 1px var(--yellow)}
  .pcard__pick{margin-top:auto;text-align:center;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3);border:1px solid var(--line);border-radius:99px;padding:11px}
  .pcard.sel .pcard__pick{background:var(--yellow);color:#000;border-color:var(--yellow)}
  .split{display:block;font-size:11px;color:var(--text-3);margin-top:5px;letter-spacing:.02em}
  .apps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}
  .apptile{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px 16px 15px;cursor:pointer;transition:.15s}
  .apptile:hover{border-color:var(--text-2)}
  .apptile.sel{border-color:var(--yellow);background:rgba(254,221,0,.06)}
  .apptile b{display:block;font-size:15px;padding-right:44px}
  .apptile span{display:block;font-size:12px;color:var(--text-3);margin-top:2px}
  .apptile em{position:absolute;top:15px;right:15px;font-style:normal;font-size:12px;font-weight:700;color:var(--text-2)}
  .apptile.sel em{color:var(--yellow)}
  .wiz__bar{display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--panel);border:1px solid var(--yellow);border-radius:16px;padding:18px 24px;margin-top:20px}
  .wiz__bar small{color:var(--text-3);font-size:12px}
  .wiz__label{font-size:17px;font-weight:700}
  .wiz__right{display:flex;align-items:center;gap:16px}
  .wiz__price{font-family:var(--font);font-weight:200;font-size:30px}
  @media(max-width:720px){.wiz__bar{flex-direction:column;align-items:stretch}.wiz__right{justify-content:space-between}}
  .cowiz__step{display:none}
  .cowiz__step.on{display:block;animation:cowfade .3s var(--ease)}
  @keyframes cowfade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
  .paytiles{display:flex;flex-direction:column;gap:12px}
  .paytile{display:flex;align-items:center;gap:14px;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--ink);color:var(--text);font-family:inherit;font-size:15px;font-weight:600;text-align:left;cursor:pointer;transition:.15s;width:100%}
  .paytile:hover{border-color:var(--text-2)}
  .paytile.sel{border-color:var(--yellow);background:rgba(254,221,0,.06)}
  .paytile .rd{width:18px;height:18px;border-radius:50%;border:2px solid var(--line);flex:0 0 auto}
  .paytile.sel .rd{border-color:var(--yellow);background:var(--yellow);box-shadow:inset 0 0 0 3px var(--ink)}
  .paytile small{display:block;font-weight:400;color:var(--text-3);font-size:12px;margin-top:2px}
  .cowiz__meta{color:var(--text-3);font-size:13px;margin:12px 0 0}
  .cowiz__nav{display:flex;justify-content:space-between;gap:12px;margin-top:28px}
  .shopwiz{max-width:840px}
  .shopwiz__top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}
  .shopwiz__back{background:none;border:0;color:var(--text-2);font-family:inherit;font-size:14px;font-weight:700;cursor:pointer;padding:8px 0}
  .shopwiz__back:hover{color:var(--yellow)}
  .shopwiz__cart{font-size:13px;color:var(--text-2);background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:9px 16px;cursor:pointer;font-family:inherit}
  .shopwiz__cart b{color:var(--yellow)}
  .sw__q{font-family:var(--font);font-weight:200;font-size:clamp(26px,4vw,40px);letter-spacing:-.01em;margin:4px 0 26px;text-wrap:balance}
  .sw__q b{font-weight:700}
  .sw__tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px}
  .sw__tile{position:relative;text-align:left;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;cursor:pointer;transition:.16s;color:var(--text);font-family:inherit}
  .sw__tile:hover{border-color:var(--yellow);transform:translateY(-3px)}
  .sw__tile .ic{width:46px;height:46px;border-radius:12px;background:rgba(32,158,217,.14);color:var(--blue);display:grid;place-items:center;margin-bottom:16px}
  .sw__tile b{display:block;font-size:18px;margin-bottom:4px}
  .sw__tile>span{font-size:13px;color:var(--text-3)}
  .sw__tile .arw{position:absolute;top:24px;right:22px;color:var(--text-3);font-family:var(--mono)}
  .sw__tile:hover .arw{color:var(--yellow)}
  button.pcard,button.apptile{font-family:inherit;color:var(--text);text-align:left;width:100%}
  button.arow{font-family:inherit;color:var(--text);text-align:left;width:100%;cursor:pointer}
  .addons button.arow:hover{border-color:var(--yellow)}
  .arow .mono{color:var(--yellow);font-weight:700}
  .sw__added{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 22px;margin-bottom:20px}
  .sw__added .citem{border:0;padding:6px 0}
  .sw__cta{display:flex;gap:12px;flex-wrap:wrap}

  /* ── Die Fussleiste des Assistenten ───────────────────────────────────────
     In JEDEM Schritt dieselbe Ordnung: links zurück, rechts die eine
     Hauptaktion. Vorher lag „Zurück" oben über dem Schritt und die Hauptaktion
     mal unten, mal mitten im Text — wer zweimal klickt, sucht den Knopf sonst
     jedes Mal neu. Erzeugt von `fussleiste()` in shop.js. */
  .sw__fuss{display:flex;align-items:center;justify-content:space-between;gap:16px;
    margin-top:34px;padding-top:22px;border-top:1px solid var(--line-2)}
  .sw__fuss .btn--y{padding:14px 28px;font-size:15px}
  /* Wo es (noch) keine Hauptaktion gibt, steht rechts ein ruhiger Wink statt
     eines toten Knopfes — ein ausgegrauter „Weiter" wäre eine Aufforderung, die
     ins Leere führt. */
  .sw__fuss__wink{color:var(--text-3);font-size:13px;text-align:right}
  @media(max-width:640px){
    .sw__fuss{flex-direction:column-reverse;align-items:stretch;gap:10px}
    .sw__fuss .btn{width:100%;justify-content:center}
    .sw__fuss__wink{text-align:center}
  }
  .sw__eyebrow{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--yellow);margin-bottom:12px}
  .sw__q--tight{margin-bottom:12px}
  .sw__sub{color:var(--text-2);font-size:15px;line-height:1.6;margin:0 0 24px;max-width:58ch}
  /* Hinweiszeilen trugen ein „↳" vorweg — ein Zeichen, das nichts erklärt und in
     schmalen Spalten wie ein Fehler aussieht. Jetzt ein ruhiger Punkt in der
     Hausfarbe, gleiche Zeilenhöhe wie der Fließtext. */
  .sw__hint{color:var(--text-3);font-size:13px;line-height:1.6;margin:14px 0 0;
    display:flex;align-items:flex-start;gap:9px}
  .sw__hint::before{content:"";flex:0 0 auto;width:5px;height:5px;margin-top:7px;
    border-radius:50%;background:var(--yellow);opacity:.7}
  .navcart{position:relative;display:none;align-items:center;justify-content:center;width:38px;height:38px;border-radius:50%;border:1px solid var(--line);color:var(--text);background:transparent;cursor:pointer;transition:.16s var(--ease);flex:0 0 auto}
  .navcart.on{display:inline-flex}
  .navcart:hover{border-color:var(--yellow);color:var(--yellow)}
  .navcart__n{position:absolute;top:-5px;right:-5px;min-width:19px;height:19px;padding:0 5px;border-radius:99px;background:var(--yellow);color:#000;font-size:11px;font-weight:800;display:grid;place-items:center;line-height:1;transition:transform .18s var(--ease)}
  .navcart.pop .navcart__n{transform:scale(1.35)}
  #navCartM.on{display:none}
  @media (max-width:900px){#navCartM.on{display:inline-flex;margin-left:auto;margin-right:10px}}
  .sw__added .citem{border-top:1px solid var(--line-2);padding:13px 0}
  .sw__added .citem:first-of-type{border-top:0}
  .sw__added .citem--new{position:relative}
  .sw__added .citem--new .citem__n{color:var(--yellow)}
  .sw__added .citem--new .citem__n b{color:var(--yellow)}
  .citem__n b{display:inline}
  .citem__n .sw__newtag{display:inline-block;margin-left:8px;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;background:var(--yellow);color:#000;border-radius:99px;padding:2px 8px;vertical-align:1px}
  .sw__added h4{margin:0 0 4px;font-size:12px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
  /* Preis steht noch nicht fest.

     BEWUSST NICHT gelb und bewusst kein Ausrufezeichen: gelb ist im Auftritt die
     Farbe der Zusage („Empfohlen", „neu"), und ein Warnton an jedem zweiten
     Serverpreis liest sich wie eine Stoerung. Das hier ist ein Vorbehalt, keine
     Warnung — deshalb umrandet und zurueckhaltend, aber nicht zu uebersehen. */
  .vorl{display:inline-block;margin-left:8px;font-size:10px;font-weight:700;letter-spacing:.06em;
        text-transform:uppercase;color:var(--text-2);border:1px solid var(--line);
        border-radius:99px;padding:2px 8px;vertical-align:1px;white-space:nowrap;cursor:help}
  .arow .vorl,.pcard .vorl{margin-left:0;margin-top:6px;margin-bottom:2px}
  .arow > div > .vorl{margin-left:8px;margin-top:0}
  .sw__hint--vorl,.sw__hint--stoer{align-items:flex-start;line-height:1.6;max-width:70ch}
  .sw__hint--vorl b,.sw__hint--stoer b{color:var(--text-2)}
  .sw__hint--stoer a{color:var(--yellow);text-decoration:underline}
  .sums__vorl{margin:0 0 10px;font-size:12px;line-height:1.5;color:var(--text-3)}
  /* Seitenmenue und Inhalt sind ZWEI Panele derselben Bauart, oben buendig.
     Die Bereichsueberschrift steht deshalb IM Inhaltspanel (.dph) und nicht
     darueber — sonst begaenne der Inhalt tiefer als das Menue daneben. */
  .dash{display:grid;grid-template-columns:238px 1fr;gap:18px;align-items:start}
  .dnav{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:10px;position:sticky;top:100px}
  /* Wer angemeldet ist, steht im Menuekopf — die grosse Begruessung ueber der
     Seite kostete nur Hoehe und sagte dasselbe. */
  .dnav__me{display:flex;align-items:center;gap:11px;padding:10px 10px 14px}
  .dnav__av{width:38px;height:38px;flex:0 0 auto;border-radius:50%;background:rgba(254,221,0,.14);color:var(--yellow);display:grid;place-items:center;font-weight:800;font-size:14px}
  .dnav__id{min-width:0}
  .dnav__id b{display:block;font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dnav__id span{display:block;font-size:11px;color:var(--text-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
  .dnav__list{display:flex;flex-direction:column;gap:1px}
  .dnav button,.dnav__out{display:flex;align-items:center;gap:12px;width:100%;padding:11px 12px;border:0;border-radius:10px;background:transparent;color:var(--text-2);font-family:inherit;font-weight:700;font-size:14px;cursor:pointer;text-align:left;transition:.15s}
  .dnav button:hover,.dnav__out:hover{background:rgba(255,255,255,.05);color:var(--text)}
  .dnav button.on{background:rgba(254,221,0,.12);color:var(--yellow)}
  .dnav .n{margin-left:auto;font-family:var(--mono);font-size:12px;opacity:.7}
  .dnav__out{font-size:13px;font-weight:600;color:var(--text-3)}
  .dpanel{min-width:0;background:var(--panel);border:1px solid var(--line);border-radius:16px}
  /* Kopf des Inhaltspanels: Titel links, GENAU EINE Aktion rechts. */
  .dph{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;border-bottom:1px solid var(--line)}
  .dph h1{font-family:var(--font);font-weight:200;font-size:clamp(24px,3vw,30px);letter-spacing:-.01em;margin:0}
  .dph p{color:var(--text-3);font-size:13px;margin:5px 0 0;max-width:54ch}
  .dph__a{flex:0 0 auto;padding:10px 18px;font-size:12px;white-space:nowrap}
  .dpb{padding:4px 22px 18px}
  /* Ein Eintrag — in JEDEM Bereich gleich gebaut: Zeichen, Text, Zustand, Aktion.
     Vorher war Hosting eine Kartenliste und alles Uebrige eine Tabelle. */
  .drow{display:flex;align-items:center;gap:15px;padding:16px 0;border-bottom:1px solid var(--line-2)}
  .drow:last-child{border-bottom:0}
  .drow__ic{width:38px;height:38px;flex:0 0 auto;border-radius:11px;background:rgba(32,158,217,.13);color:var(--blue);display:grid;place-items:center}
  .drow__in{min-width:0;flex:1 1 auto}
  .drow__t{display:block;font-size:15px;font-weight:700;overflow-wrap:anywhere}
  .drow__m{color:var(--text-3);font-size:13px;margin-top:3px;line-height:1.5}
  .drow__m b{color:var(--text-2);font-weight:600}
  .drow__end{display:flex;align-items:center;gap:10px;flex:0 0 auto;margin-left:auto}
  .drow__sum{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:700;white-space:nowrap}
  .drow__bars{margin-top:11px;max-width:560px}
  /* Abschnitt innerhalb des Panels (Profil, Verbrauch, Sicherheit …) */
  .dblock{padding:18px 0;border-bottom:1px solid var(--line-2)}
  .dblock:last-child{border-bottom:0}
  .dblock__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .dblock h3{font-size:15px;margin:0;font-weight:700}
  .dblock .meta{color:var(--text-3);font-size:13px;margin-top:3px}
  .dblock .meta b{color:var(--text-2);font-weight:600}
  /* Hinweis im Panel — Zustand des Profils, nicht mehr eine eigene Karte. */
  .dnote{border:1px solid rgba(254,221,0,.35);background:linear-gradient(180deg,rgba(254,221,0,.07),transparent);border-radius:12px;padding:14px 16px;margin:16px 0 4px}
  .dnote b{font-size:14px}
  .dnote p{color:var(--text-3);font-size:13px;line-height:1.6;margin:5px 0 0}
  .dnote--bad{border-color:rgba(210,65,42,.4);background:linear-gradient(180deg,rgba(210,65,42,.09),transparent)}
  /* Bereich ohne Eintraege — soll ruhig aussehen, nicht nach Fehler. */
  .dleer{text-align:center;padding:38px 20px 34px;color:var(--text-3);font-size:14px;line-height:1.65}
  .dleer b{display:block;color:var(--text);font-size:15px;margin-bottom:6px}
  .dleer .dactions{justify-content:center;margin-top:16px}
  .dcard{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin-bottom:14px}
  .dcard__top{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
  .dcard h3{font-size:17px;margin:0 0 4px;font-weight:700}
  .dcard .meta{color:var(--text-3);font-size:13px}
  .dcard .meta b{color:var(--text-2);font-weight:600}
  .dactions{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}
  .dbtn{font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-2);background:transparent;border:1px solid var(--line);border-radius:99px;padding:8px 14px;cursor:pointer;transition:.15s}
  .dbtn:hover{border-color:var(--yellow);color:var(--yellow)}
  .dbtn--y{background:var(--yellow);border-color:var(--yellow);color:#000}
  /* Trennt im Seitenmenue das Konto selbst vom gebuchten Bestand. */
  .dashnav__trenner{border:0;border-top:1px solid var(--line);margin:10px 4px}
  .bar{height:6px;border-radius:99px;background:rgba(255,255,255,.08);overflow:hidden;margin:12px 0 6px}
  .bar>i{display:block;height:100%;background:var(--blue);border-radius:99px}
  .bar--warn>i{background:var(--yellow)}
  .barlab{font-size:12px;color:var(--text-3);font-family:var(--mono)}
  .tag--off{background:rgba(255,255,255,.08);color:var(--text-2)}
  .tag--lock{background:rgba(210,65,42,.18);color:#ef7a68}
  .dempty{color:var(--text-3);font-size:14px;padding:10px 0}
  @media(max-width:900px){
    .dash{grid-template-columns:1fr}
    .dnav{position:static}
    .dnav__list{flex-direction:row;gap:6px;overflow-x:auto;padding-bottom:2px}
    .dnav__list hr{display:none}
    .dnav button{width:auto;white-space:nowrap}
    .dnav .n{display:none}
    /* Abmelden steht auch in der Kopfleiste — hier waere es doppelt. */
    .dnav__out{display:none}
  }
  /* Schmale Anzeige: Zustand und Aktion rutschen unter den Text statt daneben. */
  @media(max-width:620px){
    .dph{flex-direction:column;align-items:stretch}
    .dph__a{width:100%;text-align:center}
    .drow{flex-wrap:wrap;gap:12px}
    .drow__in{flex:1 1 100%;order:2}
    .drow__ic{order:1}
    .drow__end{order:3;margin-left:0;flex:1 1 100%;justify-content:space-between}
  }
  .mdl{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
  .mdl.on{display:flex}
  .mdl__bg{position:fixed;inset:0;background:rgba(6,6,9,.78);backdrop-filter:blur(4px)}
  .mdl__box{position:relative;width:min(880px,100%);background:var(--ink-2);border:1px solid var(--line);border-radius:20px;box-shadow:0 40px 90px -20px rgba(0,0,0,.8);animation:mdlin .25s var(--ease)}
  @keyframes mdlin{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
  .mdl__head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px 0}
  .mdl__head h3{font-family:var(--font);font-weight:200;font-size:28px;letter-spacing:-.01em;margin:4px 0 2px}
  .mdl__head h3 b{font-weight:700}
  .mdl__head .sub{color:var(--text-3);font-size:13px}
  .mdl__x{background:none;border:1px solid var(--line);color:var(--text-2);width:36px;height:36px;border-radius:50%;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto;transition:.15s}
  .mdl__x:hover{border-color:var(--danger);color:var(--danger)}
  .mdl__tabs{display:flex;gap:4px;padding:20px 28px 0;flex-wrap:wrap;border-bottom:1px solid var(--line);margin-top:18px}
  .mdl__tabs button{background:none;border:0;border-bottom:2px solid transparent;color:var(--text-3);font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:10px 14px;cursor:pointer;transition:.15s;margin-bottom:-1px}
  .mdl__tabs button:hover{color:var(--text)}
  .mdl__tabs button.on{color:var(--yellow);border-bottom-color:var(--yellow)}
  .mdl__body{padding:24px 28px 28px}
  .mdl__foot{display:flex;justify-content:flex-end;gap:10px;padding:0 28px 26px}
  .kvlist{display:grid;grid-template-columns:auto 1fr;gap:10px 20px;font-size:14px;margin:0}
  .kvlist dt{color:var(--text-3);font-size:13px}
  .kvlist dd{margin:0;font-weight:600}
  .kvlist dd.mono{font-family:var(--mono);font-weight:400;font-size:13px}
  .dnstable{width:100%;border-collapse:collapse;font-size:13px;font-family:var(--mono)}
  .dnstable th{text-align:left;font-family:var(--font);font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:0 10px 10px 0;border-bottom:1px solid var(--line);white-space:nowrap}
  .dnstable td{padding:11px 10px 11px 0;border-bottom:1px solid var(--line-2);vertical-align:middle}
  .dnstable tr:last-child td{border-bottom:0}
  .dnstable .val{word-break:break-all;color:var(--text-2)}
  .rtype{display:inline-block;min-width:52px;text-align:center;font-family:var(--font);font-size:11px;font-weight:800;letter-spacing:.06em;padding:4px 8px;border-radius:6px;background:rgba(32,158,217,.16);color:#5cc4ef}
  .rtype--mx{background:rgba(254,221,0,.16);color:var(--yellow)}
  .rtype--txt{background:rgba(255,255,255,.08);color:var(--text-2)}
  .dnsscroll{overflow-x:auto;margin-bottom:16px}
  .dnsform{display:grid;grid-template-columns:110px 1fr 1.4fr 90px auto;gap:10px;align-items:end;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:16px}
  .dnsform label{display:block;font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-bottom:6px}
  .dnsform select,.dnsform input{width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:9px;background:var(--ink);color:var(--text);font-family:var(--mono);font-size:13px}
  .dnsform select:focus,.dnsform input:focus{outline:none;border-color:var(--yellow)}
  .mdlnote{color:var(--text-3);font-size:12px;line-height:1.6;margin:14px 0 0;display:flex;gap:8px}
  .toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 0;border-bottom:1px solid var(--line-2)}
  .toggle:last-of-type{border-bottom:0}
  .toggle b{display:block;font-size:14px}
  .toggle small{color:var(--text-3);font-size:12px}
  .sw{width:44px;height:24px;border-radius:99px;background:rgba(255,255,255,.12);border:0;cursor:pointer;position:relative;flex:0 0 auto;transition:.2s}
  .sw::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:.2s}
  .sw.on{background:var(--yellow)}
  .sw.on::after{left:23px}
  .mdlfield{margin-bottom:14px}
  .mdlfield label{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:7px}
  .mdlfield input,.mdlfield select,.mdlfield textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--ink);color:var(--text);font-family:inherit;font-size:14px}
  /* Nameserver stehen einer je Zeile — im Schreibmaschinensatz bleiben sie lesbar. */
  .mdlfield textarea{font-family:var(--mono);font-size:13px;line-height:1.7;resize:vertical;min-height:88px}
  .mdlfield input:focus,.mdlfield select:focus,.mdlfield textarea:focus{outline:none;border-color:var(--yellow)}
  /* Nicht aenderbare Felder (E-Mail, Kundennummer, IBAN) — sichtbar, aber erkennbar fest. */
  .mdlfield input:disabled{opacity:.55;cursor:not-allowed}
  /* Zahlungsverbindungen: eine Zeile je Verbindung, genau eine ist bevorzugt. */
  .zvliste{display:flex;flex-direction:column;gap:8px}
  .zvbg{display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--line);
    border-radius:10px;background:var(--ink)}
  .zvbg:has(input:checked){border-color:var(--yellow)}
  .zvbg__fav{display:flex;align-items:center;gap:7px;cursor:pointer;flex:0 0 auto}
  .zvbg__fav input{accent-color:var(--yellow);width:15px;height:15px}
  .zvbg__fav span{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3)}
  .zvbg:has(input:checked) .zvbg__fav span{color:var(--yellow)}
  .zvbg__txt{flex:1 1 auto;min-width:0}
  .zvbg__txt b{display:block;font-size:14px}
  .zvbg__txt small{display:block;color:var(--text-3);font-size:12px;margin-top:2px;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .zvneu{margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
  .zvneu h4{font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
    color:var(--text-3);margin:0 0 12px}
  @media (max-width:520px){ .zvbg{flex-wrap:wrap} .zvbg__txt{order:3;width:100%} }
  .mdlfield small.meta{display:block;color:var(--text-3);font-size:12px;line-height:1.5;margin-top:6px}
  .mdlgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .danger{color:#ef7a68}
  @media(max-width:760px){.dnsform{grid-template-columns:1fr 1fr}.mdlgrid{grid-template-columns:1fr}.mdl{padding:16px 10px}}
  .manifest{position:relative;overflow:hidden}
  .manifest__art{position:relative;margin-top:26px}
  .manifest__art img{width:100%;max-width:420px;filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
  .manifest__birds{position:absolute;right:4%;top:6%;width:190px;opacity:.5;pointer-events:none;animation:floaty 9s ease-in-out infinite alternate}
  @keyframes floaty{from{transform:translateY(0)}to{transform:translateY(-14px)}}
  @media (prefers-reduced-motion:reduce){.manifest__birds{animation:none}}
  .serv{position:relative;overflow:hidden}
  .serv__earth{position:absolute;right:-70px;bottom:-60px;width:340px;opacity:.16;pointer-events:none}
  .cta{position:relative}
  .cta__island{width:100%;aspect-ratio:900/349;background:var(--img-island) center/contain no-repeat;opacity:.95;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
  @media(max-width:760px){.manifest__birds{display:none}.serv__earth{width:220px;right:-50px}}
  .cta__island{width:min(560px,84%);aspect-ratio:900/349;margin:0 auto 6px;background:var(--img-island) center/contain no-repeat;opacity:.95;filter:drop-shadow(0 30px 60px rgba(0,0,0,.6))}
/* ---------------- BRAND LANDING ---------------- */
  .bp{--acc:var(--yellow)}
  .bp__hero{position:relative;padding:150px 0 80px;overflow:hidden}
  .bp__hero::before{content:"";position:absolute;width:900px;height:900px;right:-260px;top:-380px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--acc) 26%,transparent),transparent 62%);pointer-events:none}
  .bp__kicker{display:inline-flex;align-items:center;gap:9px;font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent);border-radius:99px;padding:7px 15px}
  .bp__name{font-family:var(--font);font-weight:700;font-size:clamp(34px,5vw,54px);letter-spacing:-.02em;margin:22px 0 6px}
  .bp h1{font-family:var(--font);font-weight:200;font-size:clamp(30px,5.2vw,64px);line-height:1.04;letter-spacing:-.02em;margin:0 0 20px;max-width:16ch}
  .bp h1 b{font-weight:700;color:var(--acc)}
  .bp__lead{color:var(--text-2);font-size:clamp(15px,1.6vw,19px);line-height:1.65;max-width:52ch;margin:0 0 30px}
  .bp__cta{display:flex;gap:12px;flex-wrap:wrap}
  .btn--acc{background:var(--acc);color:#000}
  .btn--acc:hover{filter:brightness(1.08)}
  .bp__facts{display:flex;gap:34px;flex-wrap:wrap;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
  .bp__fact b{display:block;font-family:var(--font);font-weight:200;font-size:26px}
  .bp__fact span{font-size:12px;color:var(--text-3);letter-spacing:.06em}
  .bp__sec{padding:80px 0;border-top:1px solid var(--line-2)}
  .bp__sec h2{font-family:var(--font);font-weight:200;font-size:clamp(26px,3.4vw,42px);letter-spacing:-.02em;margin:8px 0 34px}
  .bp__sec h2 b{font-weight:700}
  .bp__feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:26px 34px}
  .bp__f{border-top:1px solid var(--line);padding-top:18px}
  .bp__f b{display:block;font-size:17px;margin-bottom:7px}
  .bp__f span{color:var(--text-2);font-size:14px;line-height:1.62}
  /* ---------- Marken-Demos: illustrative Mockups auf den Landingpages ---------- */
  .dm{margin-top:28px;border:1px solid var(--line-2);border-radius:20px;padding:clamp(18px,3vw,38px);overflow:hidden;
    background:radial-gradient(90% 130% at 50% 0%,var(--accFaint,transparent),transparent 68%),var(--ink-2)}
  .dm__cap{margin:16px 0 0;text-align:center;color:var(--text-2);font-size:13px}
  /* Fenster-Chrome, hell — liest sich als echter Produkt-Screenshot */
  .dmw{border-radius:11px;overflow:hidden;background:#fff;color:#15161a;font-size:9px;line-height:1.4;
    box-shadow:0 30px 70px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
  .dmw__bar{display:flex;align-items:center;gap:8px;padding:7px 10px;background:#e9ebf0;border-bottom:1px solid #d7dae2}
  .dmw__dots{display:flex;gap:4px}
  .dmw__dots i{display:block;width:7px;height:7px;border-radius:50%;background:#c3c8d2}
  .dmw__url{flex:1;background:#fff;border:1px solid #d7dae2;border-radius:999px;padding:3px 10px;color:#80868f;font-size:8px}
  .dmw__tag{color:#80868f;font-size:8px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
  /* --- C2: Webseiten-Mockup --- */
  .dms__nav{display:flex;align-items:center;gap:12px;padding:11px 16px;border-bottom:1px solid #e8eaef}
  .dms__logo{display:flex;align-items:center;gap:6px;font-weight:800;font-size:10px;margin-right:auto}
  .dms__logo i{width:11px;height:11px;border-radius:50%;background:var(--acc);display:block}
  .dms__nav span{color:#6c727d;font-size:8.5px}
  .dms__btn{background:var(--acc);color:#fff;border-radius:999px;padding:4px 10px;font-size:8px;font-weight:800}
  .dms__hero{display:grid;grid-template-columns:1.25fr .85fr;gap:18px;align-items:center;padding:24px 16px;background:#0f1116;color:#fff}
  .dms__hero h5{margin:0 0 7px;font-size:17px;line-height:1.15;font-weight:200;letter-spacing:-.02em}
  .dms__hero h5 b{font-weight:700;color:var(--acc)}
  .dms__hero p{margin:0 0 12px;color:#a7abb5;font-size:8.5px;max-width:30ch}
  .dms__pills{display:flex;gap:6px}
  .dms__pills b{background:var(--acc);color:#fff;border-radius:999px;padding:4px 11px;font-size:8px}
  .dms__pills span{border:1px solid rgba(255,255,255,.28);border-radius:999px;padding:4px 11px;font-size:8px;color:#dfe2e8}
  .dms__shot{height:76px;border-radius:8px;background:linear-gradient(135deg,var(--accSoft),rgba(255,255,255,.06));
    border:1px solid rgba(255,255,255,.14);position:relative;overflow:hidden}
  .dms__shot::after{content:"";position:absolute;left:12%;right:12%;top:22%;height:34%;border-radius:5px;background:rgba(255,255,255,.16)}
  .dms__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:16px}
  .dms__card{border:1px solid #e8eaef;border-radius:8px;padding:10px}
  .dms__card i{display:block;width:16px;height:3px;border-radius:2px;background:var(--acc);margin-bottom:7px}
  .dms__card b{display:block;font-size:9px;margin-bottom:4px}
  .dms__card span{color:#7d838d;font-size:8px}
  .dms__foot{display:flex;gap:12px;padding:9px 16px;border-top:1px solid #e8eaef;color:#9aa0aa;font-size:8px}
  /* --- lsmgDB: Datenbank-Mockup --- */
  .dmd{display:grid;grid-template-columns:112px 1fr;min-height:236px}
  .dmd__side{background:#f4f5f8;border-right:1px solid #e3e6ec;padding:11px 9px}
  .dmd__brand{display:flex;align-items:center;gap:6px;font-weight:800;font-size:9.5px;margin-bottom:11px}
  .dmd__brand i{width:11px;height:11px;border-radius:3px;background:var(--acc);display:block}
  .dmd__side a{display:flex;align-items:center;gap:6px;padding:5px 7px;border-radius:6px;color:#5d636d;font-size:8.5px}
  .dmd__side a i{width:6px;height:6px;border-radius:2px;background:#c3c8d2;display:block}
  .dmd__side a.on{background:var(--accSoft);color:#15161a;font-weight:700}
  .dmd__side a.on i{background:var(--acc)}
  .dmd__main{display:flex;flex-direction:column;min-width:0}
  .dmd__top{display:flex;align-items:center;gap:7px;padding:9px 12px;border-bottom:1px solid #e8eaef}
  .dmd__search{flex:1;background:#f4f5f8;border:1px solid #e3e6ec;border-radius:999px;padding:4px 10px;color:#8a9099;font-size:8px}
  .dmd__chip{border:1px solid #e3e6ec;border-radius:999px;padding:3px 8px;font-size:7.5px;color:#6c727d}
  .dmd__chip.on{background:var(--acc);border-color:var(--acc);color:#15161a;font-weight:800}
  .dmd__body{display:grid;grid-template-columns:1fr 132px;flex:1;min-width:0}
  .dmd__tbl{border-right:1px solid #e8eaef;min-width:0}
  .dmd__row{display:grid;grid-template-columns:1.5fr 1fr 62px 56px;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid #f0f2f5;font-size:8.5px}
  .dmd__row.dmd__hd{color:#9aa0aa;font-size:7.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:#fafbfc}
  .dmd__row b{font-weight:700}
  .dmd__row span{color:#7d838d}
  .dmd__st{justify-self:start;border-radius:999px;padding:2px 7px;font-size:7.5px;font-weight:800;background:#eef0f4;color:#6c727d}
  .dmd__st.ok{background:var(--accSoft);color:#15161a}
  .dmd__amt{text-align:right;font-variant-numeric:tabular-nums}
  .dmd__det{padding:11px}
  .dmd__det b{display:block;font-size:9.5px;margin-bottom:2px}
  .dmd__det em{display:block;font-style:normal;color:#8a9099;font-size:8px;margin-bottom:9px}
  .dmd__kv{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-top:1px solid #f0f2f5;font-size:8px;color:#7d838d}
  .dmd__kv b{font-size:8px;color:#15161a;margin:0}
  .dmd__link{display:inline-block;margin-top:9px;border:1px solid var(--acc);color:#15161a;background:var(--accSoft);
    border-radius:999px;padding:3px 9px;font-size:7.5px;font-weight:800}
  /* --- Ventaluz: Wandbildschirm + Thekendisplay --- */
  .dmv{display:grid;grid-template-columns:1.55fr 1fr;gap:clamp(16px,3vw,34px);align-items:end}
  .dmv__lbl{display:block;margin-top:11px;text-align:center;color:var(--text-2);font-size:11px;letter-spacing:.04em}
  .dmv__frame{border:5px solid #16181d;border-radius:8px;box-shadow:0 24px 50px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.07);overflow:hidden;background:#0b0c0f}
  .dmv__frame--wall{aspect-ratio:16/9}
  .dmv__frame--stand{aspect-ratio:9/16;max-width:150px;margin:0 auto;border-width:4px}
  .dmv__bezel{display:flex;justify-content:center;margin-top:7px}
  .dmv__logo{display:block;width:86px;height:auto;opacity:.8}
  .vs{height:100%;display:flex;flex-direction:column;background:linear-gradient(160deg,#101319,#0b0c0f 60%);color:#fff;padding:9px 11px}
  .vs__hd{display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:6px}
  .vs__hd b{font-size:11px;font-weight:800;letter-spacing:.12em}
  .vs__hd span{font-size:7.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--acc);font-weight:800}
  .vs__list{list-style:none;margin:0;padding:7px 0 0;flex:1;display:flex;flex-direction:column;gap:5px;justify-content:center}
  .vs__list li{display:flex;justify-content:space-between;gap:10px;font-size:9px;color:#e6e8ec}
  .vs__list b{color:var(--acc);font-variant-numeric:tabular-nums}
  .vs__tick{border-top:1px solid rgba(255,255,255,.14);margin-top:6px;padding-top:5px;overflow:hidden;white-space:nowrap}
  .vs__tick span{display:inline-block;font-size:7.5px;color:#9aa0aa;animation:vstick 14s linear infinite}
  @keyframes vstick{0%{transform:translateX(8%)}100%{transform:translateX(-92%)}}
  .vp{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;
    padding:12px 9px;background:linear-gradient(180deg,var(--acc),#0b0c0f 78%);color:#0b0c0f}
  .vp__k{font-size:7.5px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
  .vp__h{font-size:14px;font-weight:800;line-height:1.1}
  .vp__qr{width:42px;height:42px;border-radius:5px;background:
    repeating-conic-gradient(#0b0c0f 0% 25%,#fff 0% 50%) 0 0/9px 9px;border:3px solid #fff;margin-top:2px}
  .vp__n{font-size:7.5px;color:#e6e8ec}
  .dmv__counter{margin-top:-4px}
  .dmv__top{height:9px;border-radius:5px;background:linear-gradient(180deg,#3a3d45,#22242a);box-shadow:0 2px 0 rgba(0,0,0,.5)}
  .dmv__front{height:34px;border-radius:0 0 6px 6px;margin:0 7px;background:linear-gradient(180deg,#1a1c21,#131418);
    border:1px solid rgba(255,255,255,.06);border-top:0;display:flex;align-items:center;justify-content:center}
  .dmv__front span{font-size:8px;letter-spacing:.22em;text-transform:uppercase;color:rgba(255,255,255,.28);font-weight:800}
  /* --- it.koeln: KIM --- */
  .dmk{display:grid;grid-template-columns:auto 1fr;gap:clamp(18px,4vw,44px);align-items:center;justify-items:center}
  .dmk__stage{position:relative;width:min(210px,52vw)}
  .dmk__stage svg{display:block;width:100%;height:auto;animation:kimFloat 6s ease-in-out infinite}
  .dmk__orbit{position:absolute;inset:6% -6% 14%;border:1px dashed var(--accSoft);border-radius:50%;
    transform:rotate(-12deg);animation:kimSpin 26s linear infinite}
  @keyframes kimFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
  @keyframes kimSpin{to{transform:rotate(348deg)}}
  @media (prefers-reduced-motion:reduce){.dmk__stage svg,.dmk__orbit,.vs__tick span{animation:none}}
  .dmk__chips{display:flex;flex-wrap:wrap;gap:9px;max-width:420px}
  .dmk__chips span{border:1px solid var(--line);border-radius:999px;padding:7px 13px;font-size:12px;color:var(--text-2)}
  .dmk__bubble{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;
    padding:14px 16px;font-size:13px;line-height:1.55;color:var(--text);max-width:420px;margin-bottom:14px}
  .dmk__bubble b{color:var(--acc)}
  .dmk__bubble::after{content:"";position:absolute;left:-7px;top:22px;width:12px;height:12px;background:var(--panel);
    border-left:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
  @media(max-width:820px){
    .dmv,.dmk{grid-template-columns:1fr}
    .dmk__stage{width:min(180px,50vw)}
    .dmd{grid-template-columns:1fr}
    .dmd__side{display:flex;gap:5px;overflow:hidden;border-right:0;border-bottom:1px solid #e3e6ec}
    .dmd__brand{margin:0 6px 0 0}
    .dmd__body{grid-template-columns:1fr}
    .dmd__det{border-top:1px solid #e8eaef}
    .dms__hero{grid-template-columns:1fr}
    .dms__cards{grid-template-columns:1fr}
  }
  .bp__plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:16px}
  .bp__plan{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column}
  .bp__plan.pop{border-color:var(--acc)}
  .bp__plan .tagpop{position:absolute;top:-10px;left:26px;background:var(--acc);color:#000;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
  .bp__plan h4{margin:0;font-size:18px}
  .bp__plan .pr{font-family:var(--font);font-weight:200;font-size:36px;margin:10px 0 2px;line-height:1}
  .bp__plan .pr small{font-size:13px;color:var(--text-3)}
  .bp__plan ul{margin:16px 0 20px;display:flex;flex-direction:column;gap:9px}
  .bp__plan li{font-size:13px;color:var(--text-2);display:flex;gap:9px;align-items:flex-start}
  .bp__plan li svg{flex:0 0 auto;color:var(--acc);margin-top:2px}
  .bp__plan .btn{margin-top:auto}
  .bp__back{display:inline-flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:22px}
  .bp__back:hover{color:var(--acc)}
  .prodnav{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
  .prodnav a{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:99px;padding:11px 20px;font-weight:700;font-size:14px;transition:.15s}
  .prodnav a:hover{border-color:var(--yellow);color:var(--yellow)}
  .prodnav i{width:9px;height:9px;border-radius:50%;display:block}
  .caps{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:28px 36px;margin-top:34px}
  .caps__i{border-top:1px solid var(--line);padding-top:18px}
  .caps__i b{display:block;font-size:18px;font-weight:700;margin-bottom:8px;color:var(--text)}
  .caps__i p{color:var(--text-2);font-size:14px;line-height:1.62;margin:0}
  .bp__team{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-top:26px}
  .bp__team div{border-top:1px solid var(--line);padding-top:16px}
  .bp__team b{display:block;font-size:17px}
  .bp__team span{color:var(--text-3);font-size:13px}
  .bp__ext{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:28px;text-align:center}
  .bp__ext p{color:var(--text-2);margin:8px auto 20px;max-width:46ch}

  /* ================= PRODUKTSEITEN: normale Landingpage =====================
     Hier stand eine Folienstrecke: jeder Abschnitt so hoch wie der Bildschirm,
     scroll-snap, Fortschrittsbalken, Folienpunkte. Auf Wunsch des Auftraggebers
     zurueckgebaut — die Seiten sollen sich wie normale Seiten lesen, nicht wie
     eine Vorfuehrung, durch die man sich klickt.

     Die kurze Fassung zum Vorfuehren gibt es weiterhin, aber als GESTARTETE
     Ueberlagerung („In 2 Minuten erklärt"), nicht als Verhalten der Seite.

     Uebrig bleibt hier nur, was eine Landingpage braucht: ruhige Abstaende und
     eine Breite, die zum Rest des Auftritts passt. */
  .bp--praes>.bp__hero{padding:130px 0 70px}
  .bp--praes>.bp__sec{padding:64px 0}
  .bp--praes>.bp__end{padding:70px 0}
  @media(max-width:760px){
    .bp--praes>.bp__hero{padding:110px 0 52px}
    .bp--praes>.bp__sec{padding:48px 0}
  }

  /* ================= HOSTING-MENÜ: zwei Wege statt acht Einträge ============
     Das Klappmenü führte eine Liste des Sortiments. Wer sich noch nicht
     entschieden hat, trifft dort acht Entscheidungen gleichzeitig — und trifft
     deshalb keine. Jetzt: eine Frage, zwei Wege, ein Suchfeld.
     Erzeugt von _tools/hosting_menue.py.

     ⚠ Die Gestalt der Karten stand lange gegen `.nd__menu a …` im Wettstreit und
     verlor: jene Regeln sind spezifischer. Sie nehmen die Karten jetzt per
     `>a:not(.hm__weg)` aus (siehe dort) — deshalb braucht es hier KEIN `!important`
     mehr. Wer eine dieser Regeln wirkungslos sieht, prüft zuerst dort. */
  .nd__menu.hm{min-width:min(500px,92vw);padding:16px}
  .hm__frage{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-3);padding:2px 4px 12px}
  /* Die drei Rücksetzer sind Pflicht, kein Geschmack: das Menü hängt in `.nav`, und
     `.nav a` (Zeile 56) macht Versalien mit .16em Sperrung — Navigationsschrift.
     Bisher hob `.nd__menu a{text-transform:none}` das auf; seit die Karten dort
     ausgenommen sind, müssen sie es selbst tun. Ohne diese Zeile stand die ganze
     Karte in Großbuchstaben, Fließtext inklusive. */
  .hm .hm__weg{display:flex;align-items:center;gap:14px;padding:15px 16px;
    border:1px solid var(--line-2);border-radius:13px;margin-bottom:9px;transition:.15s;
    background:none;text-transform:none;letter-spacing:0;font-weight:600;font-size:14px}
  .hm a.hm__weg:hover{border-color:var(--yellow);background:rgba(254,221,0,.06)}
  .hm__ic{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
    background:var(--ink);border:1px solid var(--line-2);color:var(--yellow)}
  .hm__ic svg{width:18px;height:18px}
  .hm a.hm__weg:hover .hm__ic{border-color:var(--yellow)}
  .hm__txt{flex:1;min-width:0;display:block}
  .hm__txt b{display:block;font-size:15px;margin-bottom:4px;color:var(--text);line-height:1.25}
  .hm__txt span{display:block;color:var(--text-3);font-size:12.5px;line-height:1.5}
  /* Der Preis ist das Argument, nicht die Fussnote — er stand als graue 12-Pixel-
     Zeile am Rand, weil die Basisregel ihn erwischte. */
  .hm__preis{flex:0 0 auto;text-align:right;font-weight:800;font-size:16px;color:var(--yellow);
    white-space:nowrap;display:block;letter-spacing:-.01em}
  .hm__preis small{display:block;font-weight:500;font-size:11px;color:var(--text-3);
    letter-spacing:.02em;margin-top:2px}
  /* (Hier stand das Suchfeld der Wunschdomain. Auf Wunsch entfernt — beide Wege
     sind jetzt schlichte Verweise; gesucht wird im Assistenten.) */

  .hm__ruhe{display:flex;flex-wrap:wrap;gap:6px 16px;padding:10px 4px 12px;margin-top:3px}
  .hm__ruhe span{position:relative;padding-left:14px;color:var(--text-3);font-size:11.5px}
  .hm__ruhe span::before{content:"";position:absolute;left:3px;top:6px;width:4px;height:4px;
    border-radius:50%;background:var(--yellow)}

  /* Fünf Verweise als Spalte nahmen 180 von 487 Pixeln Menühöhe ein — ein Drittel
     des Menüs für das, was NICHT die Hauptwege sind. Als zweispaltiges Raster mit
     dem Übersichts-Verweis über die volle Breite passt dieselbe Auswahl in gut die
     Hälfte, und die beiden Karten oben behalten das Gewicht. */
  .hm__mehr{display:grid;grid-template-columns:1fr 1fr;gap:1px 8px;padding:6px 0 0}
  .hm .hm__mehr a{display:block;padding:7px 8px;color:var(--text-3);
    font-size:12.5px;font-weight:600;background:none;border-radius:7px;transition:.14s;
    text-transform:none;letter-spacing:0}
  .hm .hm__mehr a:hover{color:var(--yellow);background:rgba(255,255,255,.04)}
  /* „Alles über Hosting →" ist der Weg für Unentschlossene: volle Breite, eigener
     Rang — aber leiser als die beiden Karten, sonst wird aus zwei Wegen wieder drei. */
  .hm .hm__mehr a:last-child{grid-column:1/-1;margin-top:5px;padding-top:10px;
    border-top:1px solid var(--line-2);border-radius:0;color:var(--text-2)}
  .hm .hm__mehr a:last-child:hover{background:none;color:var(--yellow)}

  /* ================= SHOP-EINSTIEG: eine Suche, zwei Wege ==================
     Vorher sechs gleich große Kacheln ohne Preise. Jetzt führt der Schirm:
     Domainsuche oben (der leichteste erste Schritt), zwei Hauptwege groß mit
     ab-Preis, alles Übrige klein. Erzeugt in shop.js (draw → 'start'). */
  .ein__suche{border:1px solid var(--line);border-radius:16px;padding:20px 22px;margin:6px 0 22px;
    background:linear-gradient(180deg,rgba(254,221,0,.045),transparent)}
  .ein__suche__k{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-3);margin-bottom:12px}
  .ein__form{display:flex;gap:10px;flex-wrap:wrap}
  .ein__form input{flex:1;min-width:220px;background:var(--ink);border:1px solid var(--line);
    border-radius:11px;color:var(--text);padding:13px 15px;font-family:inherit;font-size:15px}
  .ein__form input:focus{outline:none;border-color:var(--yellow)}
  .ein__form .btn{white-space:nowrap}
  .ein__suche__n{margin-top:10px;color:var(--text-3);font-size:12px}

  .ein__wege{display:grid;gap:12px;margin-bottom:16px}
  .ein__weg{display:flex;align-items:center;gap:16px;width:100%;text-align:left;cursor:pointer;
    background:var(--panel);border:1px solid var(--line-2);border-radius:16px;padding:18px 20px;
    color:var(--text);font-family:inherit;transition:.15s}
  .ein__weg:hover{border-color:var(--yellow);background:rgba(254,221,0,.05);transform:translateY(-2px)}
  .ein__ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;
    background:var(--ink);border:1px solid var(--line-2);color:var(--yellow)}
  .ein__ic svg{width:20px;height:20px}
  .ein__t{flex:1;min-width:0}
  /* NUR das direkte Kind: im Beschreibungstext steht ebenfalls ein <b> (die
     Hervorhebung von „C2"). Mit `.ein__t b` bekäme auch das `display:block` und
     risse den Satz auseinander — gemessen: „C2" stand allein in einer Zeile und
     der Rest begann mit einem Komma. */
  .ein__t>b{display:block;font-size:18px;margin-bottom:4px}
  .ein__t>span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.55}
  .ein__c2{display:inline;color:#209ED9;font-weight:700}
  .ein__p{flex:0 0 auto;text-align:right;font-weight:700;font-size:17px;color:var(--yellow);white-space:nowrap}
  .ein__p small{display:block;font-weight:400;font-size:11px;color:var(--text-3)}

  /* Der Hauptweg (Website & Hosting mit C2) trägt einen leichten Schimmer und
     einen kräftigeren Rand — er soll als erstes gelesen werden, ohne dass die
     übrigen Bereiche wie zweite Wahl aussehen. */
  .ein__weg--haupt{border-color:color-mix(in srgb,var(--yellow) 45%,transparent);
    background:linear-gradient(180deg,rgba(254,221,0,.05),transparent),var(--panel)}
  .ein__tag{display:inline-block;margin-left:9px;vertical-align:2px;background:var(--yellow);
    color:#000;font-size:10px;font-weight:800;font-style:normal;letter-spacing:.1em;
    text-transform:uppercase;border-radius:99px;padding:3px 9px}

  .ein__ruhe{display:flex;flex-wrap:wrap;gap:8px 20px;margin-bottom:26px}
  .ein__ruhe span{position:relative;padding-left:15px;color:var(--text-3);font-size:12.5px}
  .ein__ruhe span::before{content:"";position:absolute;left:2px;top:7px;width:5px;height:5px;
    border-radius:50%;background:var(--yellow)}

  .ein__mehr__k{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;
    color:var(--text-3);margin-bottom:10px}
  .ein__mehr{display:flex;flex-wrap:wrap;gap:9px}
  .ein__mehr button{background:none;border:1px solid var(--line-2);border-radius:99px;
    color:var(--text-2);padding:9px 16px;font-family:inherit;font-size:13px;cursor:pointer;transition:.15s}
  .ein__mehr button:hover{border-color:var(--yellow);color:var(--yellow)}
  @media(max-width:640px){
    .ein__weg{flex-wrap:wrap}
    .ein__p{width:100%;text-align:left}
  }

  /* Wofür ein Paket gedacht ist — beantwortet die Frage, mit der man vor drei
     Preisspalten steht. */
  .pcard__fuer{margin:10px 0 12px;padding-bottom:12px;border-bottom:1px solid var(--line-2);
    color:var(--text-3);font-size:12.5px;line-height:1.5}

  /* Anwendungswahl: zwei Empfehlungen groß, der Rest aufklappbar. */
  .apps-empf{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;
    margin-bottom:14px;padding-top:10px}
  .apptile--gross{position:relative;padding:20px!important;border-color:var(--line)!important;
    overflow:visible}
  .apptile--gross b{font-size:17px}
  /* ⚠ `.apptile .apptile__tag`, nicht nur `.apptile__tag`: das Etikett ist ein
     <span> in der Kachel, und `.apptile span` (eine Klasse + ein Element) wiegt
     schwerer als eine Klasse allein. Ohne den zweiten Namen erbt es
     `color:var(--text-3)` — hellgrau auf Gelb, gemessen mit 36 % Deckkraft und
     praktisch unlesbar. */
  .apptile .apptile__tag--zwei{background:var(--panel);color:var(--text-2);
    border:1px solid var(--line)}
  .apptile .apptile__tag{position:absolute;top:-9px;left:16px;background:var(--yellow);color:#000;
    font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
    border-radius:99px;padding:3px 10px}
  /* Die Anwendungen stehen in GRUPPEN, alle offen: erst die beiden Empfehlungen
     gross, dann die übrigen Website-Systeme, dann was gar keine Website ist
     (Nextcloud, Matomo), dann der leere Webspace. Ein <details> war es einmal —
     was hinter einem Klick liegt, sieht die Mehrheit nie. */
  .apps-grp{border-top:1px solid var(--line-2);padding-top:16px;margin-top:18px}
  .apps-grp__k{color:var(--text-2);font-size:13.5px;font-weight:700;margin-bottom:12px}
  .apps-grp__k span{display:block;color:var(--text-3);font-weight:400;font-size:12.5px;
    margin-top:3px;line-height:1.5}

  /* Der Steuerhinweis unter den Summen — er gehört an die Zahl, nicht ins
     Kleingedruckte am Seitenende. */
  .sums__steuer{margin:10px 0 0;color:var(--text-3);font-size:12px;line-height:1.55}

  /* ================= DIE VORFÜHRUNG ========================================
     Über die Seite gelegt, gestartet über „In 2 Minuten erklärt". Steuerbar mit
     Maus, Tastatur (Pfeile, Leer, F für Vollbild, Esc) und Wischen.
     Erzeugt von _tools/marken_seiten.py (show()).

     ⚠ `--acc` setzt der Rahmen selbst per style-Attribut auf die MARKENFARBE.
     Die Vorführung liegt über der Seite und soll nach der Marke aussehen — jede
     Regel hier nimmt `var(--acc)` und gilt damit für alle vier automatisch.

     Aufbau: Kopfzeile (Marke · Segmente · Vollbild/Zu), Bühne, Fußzeile
     (Zurück links · Punkte mittig · Weiter rechts — dieselbe Ordnung wie im
     Shop). Die Folien tragen je nach Art eine eigene Körperklasse; eine
     Allzweckfolie gibt es nicht mehr, weil damit alle vier Marken gleich
     aussahen. */
  .show[hidden]{display:none}
  .show{position:fixed;inset:0;z-index:300;display:grid;place-items:center;
    opacity:0;transition:opacity .22s ease}
  .show.an{opacity:1}
  .show__bg{position:absolute;inset:0;background:rgba(4,4,7,.92);backdrop-filter:blur(10px)}
  .show__box{position:relative;width:min(1320px,95vw);height:min(840px,92vh);
    display:flex;flex-direction:column;background:var(--ink-2);
    border:1px solid var(--line);border-radius:20px;overflow:hidden;
    box-shadow:0 50px 120px -30px rgba(0,0,0,.9);
    transform:scale(.985);transition:transform .22s ease}
  .show.an .show__box{transform:scale(1)}
  .show__box:fullscreen{width:100vw;height:100vh;border:0;border-radius:0}
  /* Ein leiser Lichtkegel in der Markenfarbe — die Bühne war vorher flach
     schwarz und sah aus wie ein leeres Dokument, nicht wie eine Vorführung. */
  .show__box::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
    background:radial-gradient(115% 78% at 88% -8%,
      color-mix(in srgb,var(--acc) 13%,transparent) 0%,transparent 62%)}

  .show__leiste{position:relative;z-index:2;display:flex;align-items:center;gap:16px;
    padding:13px 18px;border-bottom:1px solid var(--line-2)}
  .show__marke2{font-size:12.5px;font-weight:800;letter-spacing:.02em;color:var(--text);
    white-space:nowrap;flex:0 0 auto}
  .show__marke2 i{display:block;font-style:normal;font-size:10px;font-weight:700;
    letter-spacing:.16em;text-transform:uppercase;color:var(--acc);margin-top:2px}
  /* Segmente statt Balken: der dünne Strich zeigte den Fortschritt, aber nicht,
     wie viel noch kommt. Acht Striche beantworten beides auf einen Blick. */
  .show__seg{flex:1;display:flex;gap:5px;min-width:60px}
  .show__seg i{flex:1;height:3px;border-radius:3px;background:var(--line-2);
    transition:background .25s ease}
  .show__seg i.war{background:color-mix(in srgb,var(--acc) 45%,transparent)}
  .show__seg i.jetzt{background:var(--acc)}
  .show__zahl{font-family:var(--mono);font-size:12px;color:var(--text-3);
    min-width:44px;text-align:right;flex:0 0 auto}
  .show__voll,.show__zu{background:none;border:1px solid var(--line);border-radius:9px;
    color:var(--text-2);width:34px;height:34px;font-size:15px;line-height:1;cursor:pointer;
    flex:0 0 auto;transition:.15s}
  .show__voll:hover,.show__zu:hover{border-color:var(--acc);color:var(--acc)}

  .show__buehne{position:relative;z-index:1;flex:1;overflow:hidden}
  /* ⚠ NICHT die Folie scrollen lassen, sondern ihren Inhalt. Die grosse
     Hintergrundnummer ist absolut gesetzt und traegt bei `line-height:.8` eine
     Zeilenbox, die den Scrollbereich um ~35 px aufblaeht — auf JEDER Folie
     gleich, unabhaengig vom Inhalt. Ergebnis war ein Rollbalken auf allen acht
     Folien, obwohl keine zu voll war. Jetzt kappt die Folie (`overflow:hidden`),
     und `.show__in` rollt, wenn wirklich zu viel Text da ist. */
  .show__f{position:absolute;inset:0;display:grid;align-content:center;
    padding:clamp(24px,3.6vw,58px) clamp(26px,4.4vw,68px);
    opacity:0;transform:translateX(26px);pointer-events:none;
    transition:opacity .26s ease,transform .26s ease;overflow:hidden}
  .show__f.jetzt{opacity:1;transform:none;pointer-events:auto}
  .show__in{position:relative;z-index:1;width:100%;min-height:0;max-height:100%;
    overflow-y:auto;scrollbar-width:thin}

  /* ---- LAYOUTS: damit nicht jede Folie gleich aussieht -------------------
     Die erste Fassung hatte einen Block je Folie, und daraus folgte
     zwangslaeufig immer dasselbe Bild: Ueberschrift oben, drei Kaesten darunter
     — neun Mal hintereinander. Kopf und Koerper sind jetzt getrennt und lassen
     sich anordnen. Verwendet wird das in den FOLGEN (marken_seiten.py): keine
     Folie steht wie ihre Nachbarin. */
  .show__f--lsplit .show__in,
  .show__f--lsplitr .show__in{display:grid;align-items:center;
    grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);gap:clamp(26px,3.6vw,60px)}
  /* Gespiegelt: Koerper links, Kopf rechts. Zwei Split-Folien hintereinander
     saehen sonst wieder gleich aus. */
  .show__f--lsplitr .show__in{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}
  .show__f--lsplitr .show__kopf{order:2}
  .show__f--lsplitr .show__koerper{order:1}
  /* Im Split laufen die Listen EINSPALTIG — sonst stuenden drei Kaesten in einer
     halben Folienbreite. */
  .show__f--lsplit .show__reib,.show__f--lsplitr .show__reib,
  .show__f--lsplit .show__karten,.show__f--lsplitr .show__karten,
  .show__f--lsplit .show__fragen,.show__f--lsplitr .show__fragen,
  .show__f--lsplit .show__belege,.show__f--lsplitr .show__belege{grid-template-columns:1fr}
  .show__f--lsplit .show__h,.show__f--lsplitr .show__h{max-width:15ch}
  .show__f--lsplit .show__u,.show__f--lsplitr .show__u{max-width:42ch;margin-bottom:0}
  .show__f--lsplit .show__aussage,.show__f--lsplitr .show__aussage{margin-bottom:22px}

  .show__f--lmitte .show__in{justify-items:center;text-align:center}
  /* `justify-items:center` schrumpft die Kinder auf ihre Inhaltsbreite — die
     Belegliste stand dadurch auf halber Folie und brach 2+1 um. Kopf und Körper
     nehmen deshalb ausdrücklich die volle Breite; zentriert wird der Text. */
  .show__f--lmitte .show__kopf,.show__f--lmitte .show__koerper{width:100%}
  .show__f--lmitte .show__h{max-width:22ch;margin-left:auto;margin-right:auto}
  .show__f--lmitte .show__u{max-width:56ch;margin-left:auto;margin-right:auto}
  .show__f--lmitte .show__aussage{border-left:0;padding-left:0;margin-left:auto;
    margin-right:auto;text-align:center;max-width:52ch;
    border-top:3px solid color-mix(in srgb,var(--acc) 55%,transparent);padding-top:20px}
  .show__f--lmitte .show__belege{text-align:left;max-width:1000px;
    margin-left:auto;margin-right:auto;
    grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
  .show__f--lmitte .show__fuss{margin-left:auto;margin-right:auto}
  /* Die Foliennummer als stilles Motiv. Sie gibt der Fläche einen Anker — ohne
     sie stand der Text in einem leeren Rechteck. */
  .show__nr{position:absolute;right:clamp(14px,2.2vw,30px);bottom:clamp(2px,1.4vw,14px);
    font-family:var(--font);font-weight:200;font-size:clamp(80px,12vw,168px);
    line-height:.8;letter-spacing:-.04em;color:var(--text);opacity:.04;
    pointer-events:none;user-select:none;z-index:0}

  .show__k{display:block;font-size:11px;font-weight:800;letter-spacing:.28em;
    text-transform:uppercase;color:var(--acc);margin-bottom:14px}
  .show__h{font-family:var(--font);font-weight:200;font-size:clamp(26px,3.9vw,48px);
    line-height:1.1;letter-spacing:-.02em;margin:0 0 16px;max-width:24ch}
  .show__h b{font-weight:700}
  .show__u{color:var(--text-2);font-size:clamp(14.5px,1.5vw,17.5px);line-height:1.6;
    max-width:66ch;margin:0 0 24px}
  .show__fuss{color:var(--text-3);font-size:13.5px;line-height:1.6;max-width:76ch;margin:22px 0 0}
  .show__klein{color:var(--text-3);font-size:12.5px;margin:18px 0 0}

  /* ---- Titelfolie: Wortmarke groß, Kennzahlen als Leiste ---- */
  .show__f--titel .show__h{font-size:clamp(44px,7vw,92px);margin-bottom:10px;max-width:none}
  .show__marke{font-weight:700;color:var(--acc);letter-spacing:-.03em}
  .show__f--titel .show__u{font-size:clamp(17px,2.1vw,25px);color:var(--text);max-width:24ch}
  .show__gross{display:flex;flex-wrap:wrap;gap:14px 52px;margin:26px 0 0;
    padding-top:24px;border-top:1px solid var(--line-2)}
  .show__gross span{display:block;font-size:12px;color:var(--text-3);letter-spacing:.05em}
  .show__gross b{display:block;font-family:var(--font);font-weight:200;
    font-size:clamp(24px,3vw,38px);line-height:1;color:var(--acc);margin-bottom:5px}

  /* Feinjustierung je Folienart. Die Zeile darf unterschiedlich breit laufen —
     eine Preisfolie verträgt eine kurze Zeile, eine Ausgangslage braucht Lauf. */
  .show__f--problem .show__h{max-width:20ch}
  .show__f--karten  .show__h{max-width:19ch}
  .show__f--raster  .show__h{max-width:17ch}
  .show__f--raster  .show__u{margin-bottom:20px}
  .show__f--ablauf  .show__h{max-width:19ch}
  /* Zeilen brauchen keinen breiten Vorspann — die Liste darunter trägt die Folie. */
  .show__f--zeilen  .show__h{max-width:18ch}
  .show__f--zeilen  .show__u{max-width:56ch;margin-bottom:14px}
  .show__f--preis   .show__h{max-width:16ch}
  .show__f--fragen  .show__h{max-width:18ch}

  /* ---- Ausgangslage: nummerierte Reibungsstellen (im Split untereinander) ---- */
  .show__reib{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
  .show__reib li{position:relative;display:flex;gap:13px;align-items:flex-start;
    padding:15px 17px;border-radius:13px;
    background:rgba(255,255,255,.028);border:1px solid var(--line-2)}
  .show__reib i{flex:0 0 auto;font-family:var(--mono);font-style:normal;font-size:11px;
    color:var(--acc);letter-spacing:.1em;padding-top:3px}
  .show__reib b{display:block;font-size:15px;line-height:1.35;margin-bottom:4px}
  .show__reib span{display:block;color:var(--text-3);font-size:12.8px;line-height:1.5}

  /* ---- Zeilen: die Gegenform zu den Spalten ----
     Volle Breite je Argument, grosse Nummer davor. Drei Kaesten nebeneinander
     machen aus drei Argumenten gleich starke Drittel; untereinander bekommt
     jedes sein eigenes Gewicht — und die Folie sieht anders aus als die davor. */
  .show__zeilen{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px}
  .show__zeilen li{display:flex;gap:clamp(16px,2.2vw,30px);align-items:baseline;
    padding:clamp(13px,1.7vw,20px) 4px;border-top:1px solid var(--line-2)}
  .show__zeilen li:last-child{border-bottom:1px solid var(--line-2)}
  .show__zeilen i{flex:0 0 auto;font-family:var(--font);font-style:normal;font-weight:200;
    font-size:clamp(26px,3.1vw,40px);line-height:1;letter-spacing:-.03em;
    color:color-mix(in srgb,var(--acc) 70%,transparent);min-width:1.9em}
  .show__zeilen b{display:block;font-size:clamp(16px,1.9vw,20px);margin-bottom:5px}
  .show__zeilen span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.55;
    max-width:72ch}

  /* ---- Karten: Titel UND Erklärung, drei bis vier nebeneinander ---- */
  .show__karten{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:13px;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .show__karten li{padding-left:16px;
    border-left:2px solid color-mix(in srgb,var(--acc) 55%,transparent)}
  .show__karten b{display:block;font-size:16px;line-height:1.3;margin-bottom:6px}
  .show__karten span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.55}

  /* ---- Raster: viele kleine Felder, die Breite ist das Argument ---- */
  .show__raster{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:11px;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
  .show__raster li{padding:13px 15px;border-radius:11px;
    background:rgba(255,255,255,.026);border:1px solid var(--line-2)}
  .show__raster b{display:block;font-size:14.5px;margin-bottom:4px}
  .show__raster span{display:block;color:var(--text-3);font-size:12.5px;line-height:1.5}

  /* ---- Ablauf: die Schrittkette ---- */
  .show__kette{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(230px,1fr));counter-reset:none}
  .show__kette li{display:flex;gap:13px;align-items:flex-start}
  .show__kette i{flex:0 0 auto;width:29px;height:29px;border-radius:50%;
    display:grid;place-items:center;font-style:normal;font-size:12.5px;font-weight:800;
    color:var(--acc);border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);
    background:color-mix(in srgb,var(--acc) 9%,transparent)}
  .show__kette b{display:block;font-size:15px;margin-bottom:4px}
  .show__kette span{display:block;color:var(--text-2);font-size:13px;line-height:1.5}

  /* ---- Hintergrund: eine große Aussage, darunter die Belege ---- */
  .show__f--hintergrund .show__h{max-width:20ch}
  .show__aussage{font-size:clamp(16px,1.9vw,21px);line-height:1.55;color:var(--text);
    max-width:58ch;margin:0 0 26px;padding-left:20px;
    border-left:3px solid color-mix(in srgb,var(--acc) 60%,transparent)}
  .show__belege{list-style:none;margin:0;padding:0;display:grid;gap:12px;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .show__belege b{display:block;font-size:14.5px;margin-bottom:4px;color:var(--acc)}
  .show__belege span{display:block;color:var(--text-2);font-size:13px;line-height:1.5}

  /* ---- Preise: echte Karten, nicht eine Zeile ---- */
  .show__preise{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:13px;
    grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}
  .show__preise li{padding:18px;border-radius:14px;border:1px solid var(--line-2);
    background:rgba(255,255,255,.026)}
  .show__preise li.jetzt{border-color:var(--acc);
    background:color-mix(in srgb,var(--acc) 7%,transparent)}
  .show__preise b{display:block;font-size:12px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-3);margin-bottom:10px}
  .show__preise em{display:block;font-style:normal;font-family:var(--font);font-weight:200;
    font-size:clamp(25px,3vw,34px);line-height:1;letter-spacing:-.02em;color:var(--acc)}
  .show__preise span{display:block;font-size:12px;color:var(--text-3);margin-top:5px}
  .show__preise u{display:block;text-decoration:none;color:var(--text-2);font-size:12.5px;
    line-height:1.7;margin-top:13px;padding-top:13px;border-top:1px solid var(--line-2)}

  /* ---- Fragen ---- */
  .show__fragen{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:14px;
    grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
  .show__fragen b{display:block;font-size:15px;margin-bottom:5px}
  .show__fragen span{display:block;color:var(--text-2);font-size:13.5px;line-height:1.55}

  /* ---- Abschluss ---- */
  .show__f--cta{justify-items:center;text-align:center}
  .show__f--cta .show__in{max-width:60ch}
  .show__f--cta .show__h{max-width:none;font-size:clamp(32px,4.6vw,58px)}
  .show__f--cta .show__u{max-width:none;margin-left:auto;margin-right:auto}
  .show__cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}

  .show__fuesse{position:relative;z-index:2;display:flex;align-items:center;
    justify-content:space-between;gap:16px;padding:13px 18px;border-top:1px solid var(--line-2)}
  .show__nav{background:none;border:1px solid var(--line);border-radius:99px;
    color:var(--text-2);padding:9px 18px;font-size:13.5px;font-weight:700;cursor:pointer;transition:.15s}
  .show__nav:hover:not(:disabled){border-color:var(--acc);color:var(--acc)}
  .show__nav:disabled{opacity:.32;cursor:default}
  .show__nav--vor{background:var(--acc);border-color:var(--acc);color:#000}
  .show__nav--vor:hover:not(:disabled){filter:brightness(1.08);color:#000}
  .show__punkte{display:flex;gap:8px}
  .show__punkte button{width:8px;height:8px;border-radius:50%;border:0;padding:0;
    background:var(--line);cursor:pointer;transition:.15s}
  .show__punkte button.jetzt{background:var(--acc);transform:scale(1.3)}

  /* Der Startknopf trägt ein Abspielzeichen — er soll wie ein Video wirken,
     nicht wie ein weiterer Verweis. */
  .show__start{display:inline-flex;align-items:center;gap:10px}
  .show__play{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;
    border-color:transparent transparent transparent currentColor;flex:0 0 auto}

  /* Der Inhalt läuft der Folie leicht hinterher — das gibt der Vorführung einen
     Takt.

     ⚠ ALS TRANSITION, NICHT ALS ANIMATION. Die erste Fassung staffelte mit
     `animation: … both`, und `both` hält den Startzustand fest, solange die
     Animation nicht angelaufen ist — Startzustand war `opacity:0`. Ergebnis:
     eine vollständig LEERE Folie mit Rollbalken, Inhalt vorhanden und
     unsichtbar. Eine Transition kennt dieses Versagen nicht: springt sie nicht,
     steht sofort der Zielwert da. Der Effekt fehlt dann, der Inhalt nie.
     (Gleiche Familie wie die bekannten Fallen in verborgenen Tabs.) */
  .show__f .show__k,.show__f .show__h,.show__f .show__u,
  .show__f .show__koerper>ul,.show__f .show__koerper>ol,.show__f .show__gross,
  .show__f .show__aussage,.show__f .show__cta,
  .show__f .show__fuss,.show__f .show__klein{
    opacity:0;transform:translateY(10px);
    transition:opacity .3s ease,transform .3s ease}
  .show__f.jetzt .show__k,.show__f.jetzt .show__h,.show__f.jetzt .show__u,
  .show__f.jetzt .show__koerper>ul,.show__f.jetzt .show__koerper>ol,.show__f.jetzt .show__gross,
  .show__f.jetzt .show__aussage,.show__f.jetzt .show__cta,
  .show__f.jetzt .show__fuss,.show__f.jetzt .show__klein{opacity:1;transform:none}
  .show__f.jetzt .show__k{transition-delay:.04s}
  .show__f.jetzt .show__h{transition-delay:.09s}
  .show__f.jetzt .show__u{transition-delay:.13s}
  .show__f.jetzt .show__koerper>ul,.show__f.jetzt .show__koerper>ol,
  .show__f.jetzt .show__gross,.show__f.jetzt .show__aussage,
  .show__f.jetzt .show__cta{transition-delay:.17s}
  .show__f.jetzt .show__fuss,.show__f.jetzt .show__klein{transition-delay:.22s}

  @media(max-width:900px){
    .show__f--titel .show__h{font-size:clamp(38px,10vw,60px)}
    .show__nr{font-size:clamp(70px,20vw,120px);opacity:.035}
  }
  /* Unter 900 px hat ein Split keine zwei Spalten mehr verdient — die Zeile
     stünde in 15 Zeichen Breite. Kopf wieder über den Körper, auch gespiegelt. */
  @media(max-width:900px){
    .show__f--lsplit .show__in,.show__f--lsplitr .show__in{
      grid-template-columns:1fr;gap:20px;align-items:start}
    .show__f--lsplitr .show__kopf{order:0}
    .show__f--lsplitr .show__koerper{order:0}
    .show__f--lsplit .show__h,.show__f--lsplitr .show__h{max-width:20ch}
    .show__f--lsplit .show__u,.show__f--lsplitr .show__u{max-width:none}
  }
  @media(max-width:760px){
    .show__box{width:100vw;height:100dvh;border:0;border-radius:0}
    .show__reib,.show__karten,.show__raster,.show__kette,
    .show__preise,.show__belege,.show__fragen{grid-template-columns:1fr;gap:10px}
    .show__zeilen li{gap:14px}
    .show__zeilen i{font-size:24px;min-width:1.6em}
    .show__nav{padding:9px 14px;font-size:13px}
    .show__marke2 i{display:none}
    .show__gross{gap:12px 28px}
  }
  @media(prefers-reduced-motion:reduce){
    .show,.show__box,.show__f,.show__f *{transition:none!important}
    /* Ohne Bewegung darf der Inhalt nicht auf dem Startwert stehenbleiben. */
    .show__f .show__k,.show__f .show__h,.show__f .show__u,
    .show__f .show__koerper>ul,.show__f .show__koerper>ol,.show__f .show__gross,
    .show__f .show__aussage,.show__f .show__cta,
    .show__f .show__fuss,.show__f .show__klein{opacity:1;transform:none}
  }

  /* ---------- Markenseiten: die Folien der Produktvorstellung ----------
     Jede Marke hat eine eigene Seite (/ventaluz, /c2, /lsmgdb, /it-koeln), und
     die liest sich von oben nach unten wie eine Praesentation: Ausgangslage,
     Ansicht, Funktionen, Vorteile, Anwendung, Ablauf, Preise, Fragen.
     Erzeugt von _tools/marken_seiten.py; die Markenfarbe kommt ueber --acc. */

  /* Der einleitende Satz einer Folie — steht ueber dem Raster, nicht darin. */
  .bp__satz{color:var(--text-2);font-size:clamp(15px,1.6vw,18px);line-height:1.68;max-width:60ch;margin:-16px 0 34px}

  /* Ausgangslage: was heute weh tut. Bewusst nuechtern, kein Alarmrot. */
  .bp__sec--prb{background:linear-gradient(180deg,rgba(255,255,255,.014),transparent)}
  .prb{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px 32px}
  .prb__i{position:relative;border-top:1px solid var(--line);padding:18px 0 0 30px}
  .prb__x{position:absolute;left:0;top:16px;width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
    font-size:12px;line-height:1;color:var(--text-3);border:1px solid var(--line)}
  .prb__i b{display:block;font-size:17px;margin-bottom:7px}
  .prb__i span{color:var(--text-2);font-size:14px;line-height:1.62}

  /* Vorteile: nummeriert, damit die Folie eine Ordnung hat und nicht nur Kacheln. */
  /* DREI Spalten, nicht „so viele wie passen": bei sechs Vorteilen ergab
     auto-fit auf breiten Schirmen 4+2 — zwei Karten und daneben ein Loch.
     Drei Spalten gehen glatt auf (2 x 3), zwei auf dem Tablet, eine am Telefon. */
  .ben{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;
    background:var(--line-2);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
  @media(max-width:1000px){.ben{grid-template-columns:repeat(2,1fr)}}
  @media(max-width:620px){.ben{grid-template-columns:1fr}}
  .ben__i{background:var(--ink-2);padding:26px 24px 24px;transition:background .15s}
  .ben__i:hover{background:color-mix(in srgb,var(--acc) 5%,var(--ink-2))}
  .ben__n{display:block;font-family:var(--mono);font-size:12px;letter-spacing:.1em;color:var(--acc);margin-bottom:12px}
  .ben__i b{display:block;font-size:17px;margin-bottom:7px}
  .ben__i span{color:var(--text-2);font-size:14px;line-height:1.62}

  /* Anwendung: fuer wen und wofuer — kompakter als die Vorteile.
     Auf den Leistungsseiten steht dieselbe Form als VERWEIS auf verwandte Seiten
     (`<a class="usc__i">`) — deshalb der Hover-Zweig. */
  .usc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px 30px}
  .usc__i{border-left:2px solid color-mix(in srgb,var(--acc) 45%,transparent);padding:2px 0 2px 16px}
  .usc__i b{display:block;font-size:16px;margin-bottom:6px}
  .usc__i span{color:var(--text-2);font-size:14px;line-height:1.6}
  a.usc__i{display:block;transition:.15s}
  a.usc__i:hover{border-left-color:var(--acc);transform:translateX(2px)}
  a.usc__i:hover b{color:var(--acc)}

  /* Wofuer ein Paket gedacht ist — steht im Preisblock der Leistungsseiten
     zwischen Preis und Merkmalsliste. Ohne diesen Satz vergleicht man drei
     Spalten Zahlen und weiss trotzdem nicht, welche die eigene ist. */
  .plan__fuer{margin:2px 0 14px;padding-bottom:14px;border-bottom:1px solid var(--line-2);
    color:var(--text-3);font-size:13px;line-height:1.55}

  /* Ablauf: vier Schritte an einer durchgehenden Linie — die Reihenfolge ist die Aussage. */
  .stp{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:30px}
  .stp__i{position:relative;display:flex;gap:16px;align-items:flex-start}
  .stp__i::after{content:"";position:absolute;left:38px;right:-30px;top:17px;height:1px;background:var(--line-2)}
  .stp__i:last-child::after{display:none}
  .stp__n{flex:0 0 auto;width:35px;height:35px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--mono);font-size:13px;color:var(--acc);position:relative;z-index:1;
    background:var(--ink-2);border:1px solid color-mix(in srgb,var(--acc) 40%,transparent)}
  .stp__i b{display:block;font-size:16px;margin-bottom:6px}
  .stp__i span{color:var(--text-2);font-size:14px;line-height:1.6}
  @media(max-width:760px){.stp__i::after{display:none}}

  /* Fragen: <details>, damit sie ohne JavaScript aufklappen und durchsuchbar bleiben. */
  .faq{border-top:1px solid var(--line-2)}
  .faq__i{border-bottom:1px solid var(--line-2)}
  .faq__i summary{display:flex;justify-content:space-between;align-items:center;gap:20px;
    padding:20px 2px;font-size:16px;font-weight:700;cursor:pointer;list-style:none}
  .faq__i summary::-webkit-details-marker{display:none}
  .faq__i summary:hover{color:var(--acc)}
  .faq__z{flex:0 0 auto;position:relative;width:13px;height:13px}
  .faq__z::before,.faq__z::after{content:"";position:absolute;background:var(--acc);transition:transform .18s}
  .faq__z::before{left:0;top:6px;width:13px;height:1.5px}
  .faq__z::after{left:6px;top:0;width:1.5px;height:13px}
  .faq__i[open] .faq__z::after{transform:scaleY(0)}
  .faq__i p{color:var(--text-2);font-size:14.5px;line-height:1.68;margin:0 0 22px;max-width:70ch}

  /* project modal — square corners */
  .pmdl{position:fixed;inset:0;z-index:210;display:none;align-items:flex-start;justify-content:center;padding:40px 20px;overflow-y:auto}
  .pmdl.on{display:flex}
  .pmdl__bg{position:fixed;inset:0;background:rgba(6,6,9,.82)}
  .pmdl__box{position:relative;width:min(820px,100%);background:var(--ink-2);border:1px solid var(--line);border-radius:0;box-shadow:0 40px 90px -20px rgba(0,0,0,.85)}
  .pmdl__top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding:34px 36px 0}
  .pmdl__x{background:none;border:1px solid var(--line);border-radius:0;color:var(--text-2);width:38px;height:38px;font-size:18px;line-height:1;cursor:pointer;flex:0 0 auto;transition:.15s}
  .pmdl__x:hover{border-color:var(--yellow);color:var(--yellow)}
  .pmdl__no{font-family:var(--mono);font-size:13px;color:var(--yellow)}
  .pmdl h3{font-family:var(--font);font-weight:200;font-size:clamp(28px,3.6vw,42px);letter-spacing:-.02em;margin:10px 0 6px}
  .pmdl h3 b{font-weight:700}
  .pmdl__meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin-top:4px}
  .pmdl__meta span{border:1px solid var(--line);padding:5px 10px}
  .pmdl__body{padding:26px 36px 30px}
  .pmdl__lead{color:var(--text);font-size:16px;line-height:1.7;margin:0 0 18px}
  .pmdl__long{color:var(--text-2);font-size:15px;line-height:1.75;margin:0 0 26px}
  .pmdl__srv{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 22px;border-top:1px solid var(--line);padding-top:20px}
  .pmdl__srv li{display:flex;gap:9px;align-items:flex-start;font-size:14px;color:var(--text-2)}
  .pmdl__srv svg{flex:0 0 auto;color:var(--yellow);margin-top:3px}
  .pmdl__foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;padding:0 36px 32px}
  .pmdl__url{font-family:var(--mono);font-size:12px;color:var(--text-3);word-break:break-all}
  .pmdl .btn{border-radius:0}
  .wrow{cursor:pointer}
  .work__more{display:flex;justify-content:center;margin-top:30px}
  .work__more button{font-family:inherit;font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-2);background:transparent;border:1px solid var(--line);padding:14px 28px;border-radius:999px;cursor:pointer;transition:.16s}
  .work__more button:hover{border-color:var(--yellow);color:var(--yellow)}
  .wrow.hide{display:none}
  @media(max-width:640px){.pmdl{padding:14px 10px}.pmdl__top{padding:24px 20px 0}.pmdl__body{padding:20px}.pmdl__foot{padding:0 20px 24px}}
  .nav{gap:28px}

  .nd{position:relative}
  .nd__btn{display:inline-flex;align-items:center;gap:8px;background:transparent;border:1px solid transparent;border-radius:999px;padding:8px 15px;color:var(--text-2);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;cursor:pointer;transition:.16s var(--ease)}
  .nd__car{opacity:.7;transition:transform .18s var(--ease)}
  .nd.open .nd__car{transform:rotate(180deg)}
  .nd--b .nd__btn{border-color:rgba(32,158,217,.42);color:var(--blue)}
  .nd--b .nd__btn:hover,.nd--b.open .nd__btn{background:rgba(32,158,217,.12);border-color:var(--blue)}
  .nd--y .nd__btn{border-color:rgba(254,221,0,.42);color:var(--yellow)}
  .nd--y .nd__btn:hover,.nd--y.open .nd__btn{background:rgba(254,221,0,.12);border-color:var(--yellow)}
  .nd__menu{position:absolute;top:calc(100% + 12px);left:50%;transform:translate(-50%,-6px);width:290px;background:#12131A;isolation:isolate;border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 28px 60px -16px rgba(0,0,0,.8);opacity:0;visibility:hidden;transition:.18s var(--ease);z-index:60}
  .nd__menu--wide{width:320px}
  .nd.open .nd__menu{opacity:1;visibility:visible;transform:translate(-50%,0)}
  /* `>a:not(.hm__weg)` — die Karten des Hosting-Menues bringen ihre eigene Gestalt mit.
     Ohne den Ausschluss gewinnt `.nd__menu a span` (0,2,1) gegen `.hm__ic` (0,1,0):
     das Icon-Kaestchen wurde wieder `display:block`, das Bildchen klebte oben links
     statt in der Mitte, und der Preis fiel von 14 auf 12 Pixel. Ein Wettruesten mit
     `!important` loest das nicht — die Regel darf dort schlicht nicht gelten.
     Der Kindselektor nimmt zugleich die Verweisliste `.hm__mehr a` heraus (Enkel,
     nicht Kind); im Produkte-Menue sind alle Eintraege direkte Kinder. */
  .nd__menu>a:not(.hm__weg){display:block;padding:9px 14px;border-radius:9px;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2);transition:.14s}
  .nd__menu>a:not(.hm__weg) b{display:block;font-size:14px;font-weight:700;color:var(--text)}
  .nd__menu>a:not(.hm__weg) span{display:block;font-size:12px;color:var(--text-3);margin-top:1px}
  .nd--b .nd__menu a:hover{background:rgba(32,158,217,.12)}
  .nd--b .nd__menu a:hover b{color:var(--blue)}
  .nd--y .nd__menu>a:not(.hm__weg):hover{background:rgba(254,221,0,.1)}
  .nd--y .nd__menu a:hover b{color:var(--yellow)}
  .nd__dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:9px;vertical-align:1px;flex:0 0 auto;box-shadow:0 0 0 3px rgba(255,255,255,.05)}
  .nd__k{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding:8px 14px 4px}
  .nd__sep{height:1px;background:var(--line-2);margin:6px 10px}
  .nd__all{font-size:12px!important;font-weight:800!important;letter-spacing:.06em!important;color:var(--text-3)!important;cursor:pointer}
  .nd--b .nd__all:hover{color:var(--blue)!important}
  .nd--y .nd__all:hover{color:var(--yellow)!important}
  .mnav__sub{padding-left:30px!important;font-size:11px!important;color:var(--text-3)!important;letter-spacing:.1em!important}
  @media(max-width:1080px){.nd{display:none}}
  .acct{position:relative}
  .acct__btn{display:inline-flex;align-items:center;gap:9px;background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 16px;color:var(--text);font-family:inherit;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;cursor:pointer;transition:.16s var(--ease);line-height:1}
  .acct__btn:hover{border-color:var(--text-2)}
  .acct.open .acct__btn{border-color:var(--yellow);color:var(--yellow)}
  .acct__btn>svg{flex:0 0 auto}
  .acct__car{transition:transform .2s var(--ease);opacity:.6}
  .acct.open .acct__car{transform:rotate(180deg);opacity:1}
  .acct__menu{position:absolute;top:calc(100% + 12px);right:0;width:250px;background:var(--ink-2);border:1px solid var(--line);border-radius:14px;padding:8px;box-shadow:0 28px 60px -16px rgba(0,0,0,.8);opacity:0;visibility:hidden;transform:translateY(-6px);transition:.18s var(--ease);z-index:120}
  .acct.open .acct__menu{opacity:1;visibility:visible;transform:none}
  .acct__head{padding:12px 14px 10px;border-bottom:1px solid var(--line-2);margin-bottom:6px}
  .acct__head b{display:block;font-size:14px}
  .acct__head span{font-size:11px;color:var(--text-3);letter-spacing:.04em}
  .acct__menu a{display:flex;align-items:center;gap:11px;padding:10px 14px;border-radius:9px;font-size:14px;font-weight:600;letter-spacing:0;text-transform:none;color:var(--text-2);transition:.14s}
  .acct__menu a:hover{background:rgba(254,221,0,.1);color:var(--yellow)}
  .acct__menu a svg{flex:0 0 auto;opacity:.8}
  .acct__menu .sep{height:1px;background:var(--line-2);margin:6px 10px}
  .acct__menu .muted{font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--text-3);padding:8px 14px 4px}
  @media(max-width:900px){.acct{display:none}}
  .lg{padding:130px 0 90px;min-height:100svh}
  .lg__grid{display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:start}
  .lg__nav{position:sticky;top:100px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px}
  .lg__nav a{display:block;padding:10px 13px;border-radius:8px;font-size:14px;font-weight:600;color:var(--text-2);transition:.14s}
  .lg__nav a:hover{background:rgba(255,255,255,.04);color:var(--text)}
  .lg__nav a.on{background:rgba(254,221,0,.1);color:var(--yellow)}
  .lg__doc{min-width:0;max-width:76ch}
  .lg__doc h1{font-family:var(--font);font-weight:200;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;margin:6px 0 6px}
  .lg__sub{color:var(--text-3);font-size:14px;margin:0 0 10px}
  .lg__stand{font-family:var(--mono);font-size:12px;color:var(--text-3);padding-bottom:22px;border-bottom:1px solid var(--line)}
  /* `scroll-margin-top` ist Pflicht, sobald ein Abschnitt direkt angesprungen
     werden kann (`#widerruf/muster-widerrufsformular`): die Kopfleiste ist
     `fixed` und legt sich sonst genau ueber die Ueberschrift, die man sehen
     wollte. Der Wert deckt Leiste plus etwas Luft. */
  .lg__sec{padding:26px 0;border-bottom:1px solid var(--line-2);scroll-margin-top:110px}
  /* ⚠ `:last-child` greift NICHT für den letzten Abschnitt: danach folgt noch
     `.lg__acts`. Der letzte Abschnitt behielt deshalb seine Trennlinie, die
     Knopfleiste brachte ihre eigene mit — zwei Linien und zwei Abstände kurz
     hintereinander. `:has(+ .lg__acts)` trifft genau den einen davor. */
  .lg__sec:last-child,
  .lg__sec:has(+ .lg__acts){border-bottom:0;padding-bottom:0}
  .lg__sec h2{font-size:17px;font-weight:700;margin:0 0 10px;color:var(--text)}
  .lg__sec p{color:var(--text-2);font-size:15px;line-height:1.75;margin:0}
  .lg__sec p b{color:var(--text)}
  .lg__sec a{color:var(--yellow);font-weight:600}
  /* ---- Widerrufsformular (Abschnitt mit `form:'widerruf'`) --------------
     Nutzt bewusst die vorhandenen `.fld`-Klassen der Seite — ein Formular in
     den Rechtstexten soll aussehen wie jedes andere Formular hier, nicht wie
     ein Fremdkoerper. Eigen ist nur, was es sonst nirgends gibt: Statuszeile,
     Erfolgsfeld und das Rueckfall-Textfeld fuer den Fall, dass der Versand
     scheitert. */
  .lg__form{margin-top:22px;padding-top:22px;border-top:1px solid var(--line-2)}
  .lg__form .fld{margin-bottom:14px}
  .lg__form-acts{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px}
  .lg__form-hint{font-size:12px;color:var(--text-3);line-height:1.5;max-width:38ch}
  .lg__form-status{margin:14px 0 0;font-size:13px;line-height:1.6;color:var(--text-2)}
  .lg__form-status:empty{display:none}
  .lg__form-status.is-warten{color:var(--text-3)}
  .lg__form-status.is-err{color:#f3b45c}
  .lg__form-status.is-err b{color:#ffc879}
  .lg__form-fallback{display:block;width:100%;margin-top:12px;padding:14px 16px;border:1px solid var(--line);
    border-radius:12px;background:var(--panel);color:var(--text-2);font-family:var(--mono);
    font-size:12px;line-height:1.65;resize:vertical}
  .lg__form-ok{background:rgba(32,158,217,.1);border:1px solid rgba(32,158,217,.4);border-radius:12px;
    padding:18px 20px;color:var(--text-2);font-size:14px;line-height:1.7}
  .lg__form-ok b{color:var(--text)}
  .lg__warn{background:rgba(241,163,58,.1);border:1px solid rgba(241,163,58,.35);border-radius:12px;padding:16px 20px;color:#f3b45c;font-size:13px;line-height:1.6;margin-bottom:26px}
  .lg__warn b{color:#ffc879}
  .lg__acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
  .ft__legal{display:flex;gap:8px 18px;flex-wrap:wrap;margin-top:14px}
  .ft__legal a{font-size:13px}
  @media(max-width:900px){.lg__grid{grid-template-columns:1fr}.lg__nav{position:static;display:flex;gap:6px;overflow-x:auto}.lg__nav a{white-space:nowrap}}
  .p3{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;font-size:12px;color:var(--text-3);margin-top:6px}
  .p3 b{color:var(--text-2);font-weight:700;font-family:var(--mono)}
  .p3 .mo b{color:var(--yellow)}
  .sums{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:16px 0}
  .sum{background:var(--ink);border:1px solid var(--line);border-radius:12px;padding:13px 15px}
  .sum span{display:block;font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:5px}
  .sum b{font-family:var(--font);font-weight:200;font-size:23px;line-height:1;display:block}
  /* ⚠ Die MONATLICHE Summe ist die Leitzahl des ganzen Ladens — groesser und in
     der Hausfarbe, unabhaengig davon, welcher Zahlweg gerade gewaehlt ist. Wer
     jaehrlich zahlt, sieht seinen Betrag weiterhin markiert (`sum--gewaehlt`),
     aber die Zahl, an der man Angebote vergleicht, bleibt der Monatspreis. */
  .sum--mo b{color:var(--yellow);font-size:30px}
  .sum small{display:block;font-size:10px;color:var(--text-3);margin-top:4px}
  .pnote{font-size:12px;color:var(--text-3);margin:10px 0 0;line-height:1.6}
  @media(max-width:640px){.sums{grid-template-columns:1fr}}

  /* ---------- "Das gehoert meistens dazu" ----------
     Der Assistent sagt nach jedem Hinzufuegen, was zur Auswahl noch fehlt
     (Domain zum Hosting und umgekehrt). Bewusst ZURUECKHALTEND gestaltet: keine
     Signalfarbe, kein Ausrufezeichen, gedaempfte Flaeche — es ist ein Rat, kein
     Fehler. Ein gelber Kasten neben der Summe laese sich als Warnung lesen, und
     das waere er nicht. Erzeugt von shop.js (fehltBlock). */
  .fehlt{margin:18px 0 4px;border:1px solid var(--line-2);border-radius:14px;
    background:linear-gradient(180deg,rgba(255,255,255,.02),transparent);overflow:hidden}
  .fehlt__kopf{font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
    color:var(--text-3);padding:13px 18px 0}
  .fehlt__i{display:flex;align-items:center;justify-content:space-between;gap:20px;
    padding:14px 18px 16px}
  .fehlt__i + .fehlt__i{border-top:1px solid var(--line-2)}
  .fehlt__t b{display:block;font-size:15px;margin-bottom:5px}
  .fehlt__t span{display:block;color:var(--text-2);font-size:13px;line-height:1.6;max-width:62ch}
  .fehlt .btn{flex:0 0 auto}
  @media(max-width:640px){
    .fehlt__i{flex-direction:column;align-items:flex-start;gap:12px}
    .fehlt .btn{width:100%;justify-content:center}
  }
  /* An der Kasse steht der Block im Pruef-Schritt ueber die volle Breite des
     Panels (gemessen 776 px) — er braucht dort keinen Sonderfall. Ein frueherer
     Entwurf stapelte ihn hier fest, weil ich eine schmale Warenkorbspalte
     vermutet hatte; die gibt es nicht, der Knopf wurde dadurch 738 px breit. */
  .ubars{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px 26px}
  .ub__top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:7px}
  .ub__lab{font-size:13px;color:var(--text-2);font-weight:600}
  .ub__val{font-family:var(--mono);font-size:12px;color:var(--text-3);white-space:nowrap}
  .ub__val b{color:var(--text)}
  .bar--mini{height:5px;margin:0}
  .bar--danger>i{background:var(--danger)}
  .ub__pct{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-top:5px;display:block}
  .cellbar{min-width:150px}
  .cellbar .bar{margin:5px 0 3px}
  .cellbar span{font-family:var(--mono);font-size:11px;color:var(--text-3)}


/* ---------------- Studio: Fakten, Zeitleiste, Team ---------------- */
  .ab{padding:104px 0 40px}

  .lgm{padding:64px 0 100px;margin-top:0;border-top:1px solid var(--line-2)}
  .lgm__k{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--text-3)}
  .lgm__n{color:var(--text-2);font-size:14px;margin:10px 0 30px;max-width:56ch}
  .lgm__vp{display:flex;overflow:hidden;gap:clamp(34px,4vw,64px);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
  .lgm__track{display:flex;align-items:center;gap:clamp(34px,4vw,64px);flex:0 0 auto;animation:lgmroll 46s linear infinite;will-change:transform}
  .lgm__vp:hover .lgm__track{animation-play-state:paused}
  .lgm__track img{height:clamp(22px,2.2vw,32px);width:auto;flex:0 0 auto;opacity:.42;filter:brightness(0) invert(1);transition:opacity .2s var(--ease)}
  .lgm__track img:hover{opacity:1}
  @keyframes lgmroll{from{transform:translateX(0)}to{transform:translateX(calc(-100% - clamp(34px,4vw,64px)))}}
  @media (prefers-reduced-motion:reduce){.lgm__track{animation:none}.lgm__vp{overflow-x:auto}}


  /* ================= LEISTUNGSVERZEICHNIS: Überblick, kein Katalog ==========
     Drei Spalten mit je einer Zeile pro Leistung — 26 Einträge, jeder mit
     Trennlinie — ergaben ein 400 Pixel hohes Verzeichnis mitten auf der
     Startseite. Das vollständige Portfolio steht auf lsmg.dev, und genau dorthin
     verweist der Knopf daneben: hier genügt der Umriss.

     Deshalb fliessen die Begriffe jetzt, statt untereinander zu stehen —
     dieselben 26 Einträge in gut einem Drittel der Höhe. Getrennt durch einen
     Mittelpunkt statt durch Linien: die Seite arbeitet ohnehin mit Linien für
     ABSCHNITTE, und 26 weitere hätten den Bereich zerhackt. */
  .svl{margin-top:56px;padding-top:44px;border-top:1px solid var(--line)}
  .svl__top{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:32px}
  .svl__top a{color:var(--yellow)}
  .svl__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:30px 44px}
  /* Die Gruppenüberschrift bekommt eine kurze gelbe Marke statt nur Farbe —
     sie trägt die Spalte jetzt allein, seit die Trennlinien der Einträge weg sind. */
  .svl__h{font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
    color:var(--yellow);margin-bottom:16px;padding-bottom:12px;
    border-bottom:1px solid color-mix(in srgb,var(--yellow) 30%,transparent)}
  /* Ein Eintrag je Zeile — die Aufzählungspunkte stehen dadurch exakt
     untereinander und in gleichem Abstand. Im freien Fluss (`inline-block`)
     saßen sie unregelmäßig: mal drei kurze Begriffe in einer Zeile, mal ein
     langer allein, und die Punkte sprangen quer über die Spalte. Ein Raster ist
     ruhiger als jede gesparte Zeile. */
  .svl__col ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
  .svl__col li{position:relative;padding-left:16px;
    font-size:14px;line-height:1.45;color:var(--text-2)}
  .svl__col li::before{content:"";position:absolute;left:0;top:.5em;
    width:6px;height:6px;border-radius:50%;background:var(--yellow);
    box-shadow:0 0 0 3px rgba(254,221,0,.12)}
  .capsbg{position:relative;margin-top:96px;padding:76px 0 84px}
  .capsbg::before{content:"";position:absolute;inset:0 calc(50% - 50vw);background:var(--ink-2);border-top:1px solid var(--line);border-bottom:1px solid var(--line);z-index:0}
  .capsbg>*{position:relative;z-index:1}
  .pr--ask{font-size:26px;letter-spacing:-.01em}
  .ab__facts{margin-top:52px;padding-top:52px;border-top:1px solid var(--line)}
  .widerow{--bt-w:max(100%,min(1480px,calc(100vw - 96px)));width:var(--bt-w);margin-left:calc(50% - var(--bt-w)/2)}
  .ab__facts__in{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:30px 32px}
  .ab__fact b{display:block;font-family:var(--font);font-weight:200;font-size:clamp(36px,3.9vw,54px);line-height:1;letter-spacing:-.03em;color:var(--text)}
  .ab__fact span{display:block;font-size:13px;color:var(--text-3);letter-spacing:.05em;margin-top:12px}
  /* ================= TEAM: die Gesichter zur Arbeit =======================
     Der Auftritt erklärte 19 Jahre Arbeit ohne ein einziges Gesicht — für eine
     Agentur, die „ein Ansprechpartner, ein Team" verspricht, die falsche
     Leerstelle. Erzeugt von _tools/team_block.py aus assets/about.json.

     (An dieser Stelle stand bis 08.08. eine Deklarationszeile OHNE Selektor: der
     Rest des Blocks, der beim CSS-Bereichs-Ersetzen zerschossen wurde. Der
     verwaiste Rumpf war ein Initialen-Kreis — genau der, der hier jetzt wieder
     steht, diesmal vollständig.) */
  /* ⚠ Die Seite arbeitet mit LINIEN, nicht mit Kästen: `.caps__i` und
     `.ab__facts` setzen eine Trennlinie oben und stellen den Text darunter.
     Der Team-Block stand zuerst als freischwebende Gruppe daneben und sah aus
     wie eingeklebt. Dieselben Maße wie `.ab__facts` (52 px Abstand, 52 px
     Innenabstand), dieselbe Kachelform wie `.caps__i`. */
  .tm{margin-top:52px;padding-top:52px;border-top:1px solid var(--line)}
  .tm__head{max-width:60ch;margin-bottom:38px}
  .tm__head h3{font-family:var(--font);font-weight:200;
    font-size:clamp(26px,3.4vw,40px);line-height:1.12;letter-spacing:-.02em;margin:10px 0 0}
  .tm__head h3 b{font-weight:700}
  /* 2 × 3 — feste drei Spalten, nicht `auto-fit`. Bei sechs Personen ist das die
     ruhige Aufteilung; eine Reihe zu sechst drückt Namen und Rolle in Spalten, in
     denen jede Zeile umbricht. */
  .tm__grid{display:grid;gap:30px 36px;grid-template-columns:repeat(3,1fr);
    align-items:start}
  /* Linie oben wie bei den Leistungskacheln — dieselbe Kachelform, gleiche Maße.
     Foto LINKS, Angaben rechts daneben: untereinander wuchsen die Karten
     unterschiedlich hoch (ein langer Satz bei einer Person, drei Wörter bei der
     nächsten), und zwischen Bild und Namen klaffte eine Lücke. Nebeneinander
     stehen Gesicht und Name auf einer Höhe und die Reihe bleibt ruhig. */
  .tm__c{margin:0;display:grid;grid-template-columns:auto 1fr;gap:16px;
    align-items:start;border-top:1px solid var(--line);padding-top:18px}
  /* ⚠ `height:auto` + `aspect-ratio` sind Pflicht, weil das Markup width/height
     trägt: sonst rechnet der Browser mit 400×400 und das Bild wird gestaucht,
     sobald die Spalte schmaler ist. */
  .tm__foto{width:92px;height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;
    display:block;border:1px solid var(--line-2);
    filter:grayscale(1) contrast(1.04);transition:filter .3s var(--ease)}
  .tm__c:hover .tm__foto{filter:none}
  /* Ohne Foto: Initialen. Kein Platzhalterbild, keine fremde Person — und es sieht
     aus wie Absicht, nicht wie ein Loch. */
  .tm__ini{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;
    font-family:var(--font);font-weight:200;font-size:30px;letter-spacing:.04em;
    background:rgba(255,255,255,.04);color:var(--text-3);
    border:1px solid var(--line-2)}
  /* Der Name trägt die Karte — größer als die Leistungskacheln (18px), weil hier
     der Name die Überschrift ist und nicht eine von mehreren Zeilen. */
  .tm__c figcaption{min-width:0}
  .tm__c b{display:block;font-size:20px;font-weight:700;line-height:1.25;
    margin-bottom:7px;color:var(--text);letter-spacing:-.01em}
  /* ⚠ Die Position stand in GELB. Auf dieser Seite ist Gelb den Eyebrows und
     Handlungsaufrufen vorbehalten; als Rollenbezeichnung schrie sie lauter als
     der Name darüber. Jetzt in derselben stillen Beschriftungsfarbe wie
     `.ab__fact span`. */
  .tm__role{display:block;font-size:12.5px;font-weight:400;letter-spacing:.04em;
       color:var(--text-2);margin-bottom:4px;line-height:1.5}
  .tm__seit{display:block;font-size:12px;color:var(--text-3);letter-spacing:.05em}
  /* Der Kurztext ist die leiseste Zeile der Karte — nur eine Person hat einen
     langen, und der soll die Reihe nicht auseinanderziehen. */
  .tm__c p{font-size:12.5px;color:var(--text-3);line-height:1.55;margin:9px 0 0}
  @media(max-width:1000px){ .tm__grid{grid-template-columns:repeat(2,1fr);gap:28px 26px} }
  @media(max-width:640px){
    .tm{margin-top:44px;padding-top:38px}
    /* Eine Spalte, Foto wieder über den Namen: nebeneinander bliebe für den
       Namen zu wenig Breite und jede Zeile bräche um. */
    .tm__grid{grid-template-columns:1fr;gap:22px}
    .tm__c{grid-template-columns:1fr;gap:12px}
    .tm__foto,.tm__ini{width:74px}
    .tm__ini{height:74px;font-size:25px}
    .tm__c b{font-size:18px}
  }

  .vatn{font-size:11px;color:var(--text-3);letter-spacing:.04em;margin-top:2px}

/* Blend-Effekte duerfen nicht ueber Header/Menues strahlen */
.hero,.cta{position:relative;z-index:1;isolation:isolate}
.hero__fx,.hero__in{isolation:isolate}
.hd{z-index:200!important}
.nd__menu,.acct__menu{z-index:210;background:#12131A}
.hero__fx,.hero__in{z-index:0}

/* Hero: Inhalt rechtsbuendig (Leuchtturm steht links im Bild) */
.hero__in{text-align:right}
.hero__eye{justify-content:flex-end}
.hero__cta{justify-content:flex-end}
.hero__lede{margin-left:auto;margin-right:0}
.hero__scroll{left:auto;right:32px}
@media(max-width:820px){
  .hero__in{text-align:left}
  .hero__eye,.hero__cta{justify-content:flex-start}
  .hero__lede{margin-left:0}
  .hero__scroll{left:22px;right:auto}
}

/* Abschlussband der Produktseiten — traegt die Farbe der jeweiligen Marke */
.bp__end{padding:96px 0 104px;margin-top:0}
.bp__end h2{font-family:var(--font);font-weight:200;font-size:clamp(30px,4vw,50px);letter-spacing:-.02em;margin:0}
.bp__end h2 b{font-weight:700}
.bp__end__lead{margin:0 auto 28px;max-width:56ch;font-size:16px;line-height:1.6;opacity:.82}
.bp__end__b1{border:1px solid transparent;font-weight:800}
.bp__end__b2{background:transparent;border:1px solid currentColor}
.bp__end__b2:hover{background:rgba(0,0,0,.08)}
.prodnav--end a{background:transparent;border:1px solid}

/* Kasse verwendet dieselbe Buehne wie der Produkt-Assistent */
.cowiz__panel{margin-top:4px}
.cowiz__nav{display:flex;justify-content:space-between;gap:14px;margin-top:34px;padding-top:26px;border-top:1px solid var(--line)}
.swst li[data-co]{cursor:default}

/* Prüf-Zusammenfassung auf dem letzten Schritt: Rechnungsadresse + Zahlung */
.cosum{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0 0}
.cosum__col{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.cosum__h{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--text-3);margin:0 0 6px}
.cosum__b{font-size:14px;line-height:1.5;color:var(--text)}
.cosum__b b{font-weight:700}
.cosum__b--miss{color:var(--text-3)}
.cosum__edit{position:absolute;top:12px;right:14px;font-size:12px;color:var(--blue);background:none;border:0;padding:0;cursor:pointer;font:inherit;font-weight:700}
.cosum__edit:hover{text-decoration:underline}
/* Das Domain-Versprechen an der Paketkachel — grün, weil es ein Gewinn ist. */
.pcard__dom{color:#4ade80!important}
.pcard__dom svg{color:#4ade80}

/* ── Die Adresse zum Hosting (Schritt host-dom) ─────────────────────────── */
.hd3{display:grid;gap:14px;margin-top:8px}
.hd3__weg{border:1px solid var(--line-2);border-radius:16px;padding:20px 22px;background:var(--panel)}
.hd3__weg--haupt{border-color:color-mix(in srgb,var(--yellow) 45%,transparent);
  background:linear-gradient(180deg,rgba(254,221,0,.05),transparent),var(--panel)}
.hd3__weg--klein{padding:16px 22px;background:none}
.hd3__k{font-size:17px;font-weight:700;margin-bottom:6px}
.hd3__t{color:var(--text-2);font-size:13.5px;line-height:1.6;margin:0 0 14px;max-width:74ch}
.hd3__form{display:flex;gap:10px;flex-wrap:wrap}
.hd3__form input{flex:1;min-width:180px;background:var(--ink);border:1px solid var(--line);
  border-radius:11px;color:var(--text);padding:12px 14px;font-family:inherit;font-size:14px}
.hd3__form input:focus{outline:none;border-color:var(--yellow)}
.hd3__nur{display:block;margin-top:12px;background:none;border:0;padding:0;cursor:pointer;
  color:var(--text-3);font-family:inherit;font-size:12.5px;text-decoration:underline}
.hd3__nur:hover{color:var(--yellow)}

/* Der Vorteil am Posten — gruen, weil er ein Gewinn ist und keine Warnung. */
.citem__frei{display:block;color:#4ade80;font-size:12px;margin-top:2px}

/* ── Abschluss der Kasse ──────────────────────────────────────────────────
   Die „ergänzen"-Knöpfe waren gelb GEFÜLLT — dieselbe Farbe wie „Kostenpflichtig
   bestellen". Zwei gleich laute Aufforderungen auf einem Schirm, von denen die
   eine nur ein Zwischenschritt ist. Jetzt: Umriss statt Fläche. Das Gelb bleibt
   dem einen Knopf vorbehalten, auf den alles zuläuft. */
.cosum__add{margin-top:10px;font-size:13px;font-weight:700;color:var(--yellow);
  background:none;border:1px solid var(--yellow);border-radius:9px;padding:8px 14px;
  cursor:pointer;font-family:inherit;transition:.15s}
.cosum__add:hover{background:rgba(254,221,0,.1)}

/* Der Hinweis, wenn noch etwas fehlt. Kein Alarmrot: es ist keine Störung,
   sondern eine fehlende Angabe. Er steht ÜBER der Knopfzeile, mit einem
   ruhigen Punkt davor. */
.co__gate{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 15px;
  background:rgba(254,221,0,.06);border:1px solid color-mix(in srgb,var(--yellow) 30%,transparent);
  border-radius:11px;color:var(--text-2);font-size:13.5px;line-height:1.5}
.co__gate:empty{display:none}
.co__gate::before{content:"";flex:0 0 auto;width:7px;height:7px;margin-top:6px;
  border-radius:50%;background:var(--yellow)}

/* Die Abschlusszeile darf mehr Luft haben als ein „Weiter" zwischendurch. */
/* Dieselbe Ordnung wie im Assistenten (.sw__fuss): links zurück, rechts die
   eine Hauptaktion, gleiche Abstände, gleiche Knopfgrößen. Der Kauf soll sich
   nicht anfühlen, als wechsle man auf halbem Weg das Haus. */
.cowiz__nav--final{flex-wrap:wrap;margin-top:34px;padding-top:22px}
.cowiz__nav--final #coNext,.cowiz__nav #coNext{padding:14px 28px;font-size:15px}
.cowiz__nav--final .co__gate{flex-basis:100%;order:-1}
.cowiz__nav--final #coNext{padding:15px 30px;font-size:15px}
@media(max-width:640px){
  .cowiz__nav--final{gap:10px}
  .cowiz__nav--final #coNext{width:100%;justify-content:center}
  .cowiz__nav--final #coBack{width:100%;justify-content:center}
}
.cosum__mail{margin:12px 0 0;font-size:13px;color:var(--text-3)}
.cosum__mail b{color:var(--text);font-weight:600}
/* Inline-Bearbeitung in der Kasse */
.cosum__col--edit{grid-column:1 / -1}
.cofgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;margin:4px 0 0}
.cof{display:flex;flex-direction:column;gap:4px;font-size:13px}
.cof>span{color:var(--text-3);font-size:12px}
.cof input,.cof select{background:var(--ink-2);border:1px solid var(--line);border-radius:9px;padding:9px 11px;color:var(--text);font:inherit;font-size:14px}
.cof input:focus,.cof select:focus{outline:none;border-color:var(--blue)}
.cofact{display:flex;gap:10px;margin:14px 0 0}
.btn--sm{padding:9px 16px;font-size:13px}
.cofmsg{margin:8px 0 0;font-size:13px;color:#c2410c;display:none}
.cofmsg.on{display:block}
.cofnote{margin:8px 0 0;font-size:13px;color:var(--text-3)}
@media (max-width:560px){ .cosum{grid-template-columns:1fr} .cofgrid{grid-template-columns:1fr} }

.cofields{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.cofields--2{grid-template-columns:1fr 1fr;max-width:620px}
@media(max-width:640px){.cofields{grid-template-columns:1fr}}
#coNew .sw__hint,#coKnown .sw__hint,#coAcct .sw__hint{margin-top:16px}
#coKnown .btn{margin-top:6px}

/* Der Kegel setzt nicht hart an der Laterne an, sondern blendet aus dem Zentrum heraus auf —
   sonst legt sich der Strahl flaechig ueber die Turmspitze. */
.hero__beam,.auth__beam,.cta__beam{
  -webkit-mask-image:radial-gradient(circle at var(--bx) var(--by),
    rgba(0,0,0,0) 0px, rgba(0,0,0,.15) 14px, rgba(0,0,0,.55) 30px, #000 62px);
  mask-image:radial-gradient(circle at var(--bx) var(--by),
    rgba(0,0,0,0) 0px, rgba(0,0,0,.15) 14px, rgba(0,0,0,.55) 30px, #000 62px);
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}

/* CI-Leuchtturm, an der Sektionskante abgeschnitten */
.mflh{margin:38px 0 calc(-130px - clamp(24px,4vw,74px));height:clamp(240px,30vw,470px);pointer-events:none;filter:drop-shadow(0 26px 46px rgba(0,0,0,.55))}
.mflh__svg{height:100%;width:auto;display:block}
.manifest .wrap{position:relative;z-index:1}
@media(max-width:900px){.mflh{height:clamp(180px,42vw,300px);opacity:.75}}

.swst li[data-goto]:hover{color:var(--text)}
.swst li[data-goto]:hover i{border-color:var(--text-2)}

/* Hero-Headline nimmt den Hintergrund leicht auf, statt flach davor zu liegen */
.reveal__base{mix-blend-mode:overlay}
@supports not (mix-blend-mode:overlay){.reveal__base{mix-blend-mode:normal}}


/* Fortschrittslinie: beim aktiven Schritt in Teilstuecke zerlegt */
.swst__lab{flex:1 1 auto}
.swst__segs{flex:1 0 100%;display:flex;gap:5px;margin-top:10px}
.swst__segs .seg{flex:1 1 0;min-width:0}
.swst__segs .seg b{display:block;height:2px;border-radius:2px;background:var(--line)}
.swst__segs .seg em{display:block;margin-top:5px;font-style:normal;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-3);opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.swst li.done .swst__segs .seg b{background:var(--text-3)}
.swst li.on .swst__segs .seg.done b{background:var(--yellow);opacity:.5}
.swst li.on .swst__segs .seg.on b{background:var(--yellow)}
.swst li.on .swst__segs .seg.on em{opacity:1;color:var(--yellow)}
.swst li.on .swst__segs .seg.done em{opacity:.8;color:var(--text-2)}
.swst__segs--plain .seg em{visibility:hidden}
.swst li{align-items:flex-start}
.swst li i,.swst li .swst__lab{margin-top:1px}
@media(max-width:700px){.swst__segs .seg em{display:none}}

/* Ausgeloggt: nur ein Anmelden-Knopf. Das Konto-Menue gibt es erst mit Anmeldung. */
.acct__login{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:999px;padding:9px 17px;color:var(--text);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;transition:.16s var(--ease)}
.acct__login:hover{border-color:var(--yellow);color:var(--yellow)}
@media(max-width:1080px){.acct__login{display:none!important}}

/* Im c2web-Rahmen liegt die Seite in <article> — dessen Skin-Regeln setzen sich sonst
   gegen .view durch, und alle Ansichten stehen gleichzeitig untereinander. */
section.view{display:none!important}
section.view.on{display:block!important}

/* Produktuebersicht */
.ovgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px}
.ovcard{display:flex;flex-direction:column;gap:7px;padding:26px 24px 22px;background:var(--panel);border:1px solid var(--line);border-radius:16px;transition:.18s var(--ease)}
.ovcard:hover{border-color:var(--acc);transform:translateY(-2px)}
.ovcard__k{font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--text-3)}
.ovcard__n{font-size:26px;font-weight:700;letter-spacing:-.01em;line-height:1.1}
.ovcard__t{font-size:14px;color:var(--text-2);line-height:1.5;min-height:42px}
.ovcard__p{margin-top:6px;font-size:13px;font-weight:700;color:var(--text)}
.ovcard__go{margin-top:14px;font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--acc)}


/* Statusseiten — Danke, Meldungen, Fehler. EIN Bauplan fuer alle. */
  .statp{min-height:62vh;display:grid;place-items:center;padding:110px 22px 90px}
  .statp__in{max-width:620px;text-align:center;width:100%}
  .statp__zeichen{margin:0 auto 24px;color:var(--text-3)}
  .statp__zeichen--kreis{width:74px;height:74px;border-radius:50%;background:rgba(75,214,138,.16);
    color:#4bd68a;display:grid;place-items:center}
  .statp__zeichen--zahl{font-family:var(--font);font-weight:200;font-size:clamp(64px,13vw,132px);
    line-height:.9;letter-spacing:-.04em;opacity:.5;margin-bottom:10px}
  .statp__titel{font-family:var(--font);font-weight:200;font-size:clamp(30px,5vw,46px);
    letter-spacing:-.02em;line-height:1.1;margin:0 0 14px}
  .statp__titel b{font-weight:700}
  .statp__text{color:var(--text-2);font-size:16px;line-height:1.65;margin:0 auto;max-width:52ch}
  .statp__nr{color:var(--yellow);font-size:13px;font-weight:700;letter-spacing:.08em;margin:14px 0 0}
  .statp__box{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px;
    text-align:left;margin:26px 0 0}
  .statp__box .citem__x{display:none}
  .statp__wege{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:32px}
  .statp__fuss{margin-top:44px;color:var(--text-3);font-size:13px;line-height:1.6}
  .statp__fuss a{color:var(--text-2);text-decoration:underline;text-underline-offset:3px}
  /* Die Ampel traegt nur das Zeichen — der Rest der Seite bleibt ruhig. */
  .statp[data-art="ok"]     .statp__zeichen--zahl{color:#20C997;opacity:.75}
  .statp[data-art="warn"]   .statp__zeichen--zahl{color:var(--yellow);opacity:.75}
  .statp[data-art="fehler"] .statp__zeichen--zahl{color:#E8452C;opacity:.75}
  /* Leere Bereiche zeigen keinen leeren Rahmen. */
  .statp__box:empty,.statp__nr:empty,.statp__text:empty,.statp__wege:empty{display:none}
  @media (max-width:640px){ .statp{padding:84px 18px 70px} .statp__wege .btn{width:100%} }

/* Domain-Treffer als TABELLE mit Mehrfachauswahl.

   Aufbau und Bedienung wie die Zahlungsverbindungen im Profil (.zvbg): die ganze
   Zeile ist ein <label> mit echtem Auswahlfeld, und der gewaehlte Zustand faerbt
   den Rand gelb. Nur Kaestchen statt Radioknopf — man bestellt selten genau eine
   Domain.

   Feste Spalten, weil man bei 245 Treffern untereinander vergleicht. Der
   Jahrespreis steht vorn und gross: eine Domain wird im Jahr verkauft, der
   Monatsbetrag ist nur die Umrechnung fuer den Warenkorb. */
  .domlist{border:1px solid var(--line);border-radius:12px;overflow:hidden;margin-top:14px}
  .domrow{display:grid;grid-template-columns:2rem minmax(0,1fr) 8.5rem 9rem 6.5rem;
    align-items:center;gap:.75rem;width:100%;
    padding:.6rem .9rem;border-top:1px solid var(--line);
    background:transparent;text-align:left;color:var(--text-1);cursor:pointer;
    transition:background-color .12s ease,border-color .12s ease}
  .domrow:first-child{border-top:0}
  .domrow:hover{background:rgba(255,255,255,.04)}
  .domrow--an{background:rgba(254,221,0,.07);box-shadow:inset 3px 0 0 var(--yellow)}
  .domrow--aus{cursor:default;opacity:.5}
  .domrow--aus:hover{background:transparent}

  .domrow--kopf{cursor:default;background:var(--panel);
    font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--text-3)}
  .domrow--kopf:hover{background:var(--panel)}

  .domwahl{display:flex;align-items:center;justify-content:center}
  .domwahl input{accent-color:var(--yellow);width:16px;height:16px;cursor:pointer}
  .domname{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .domst{font-size:12px;font-weight:700;white-space:nowrap}
  .domst--frei{color:#4bd68a}
  .domst--weg{color:#E8452C}
  .domst--offen{color:var(--text-3);font-weight:500}
/* „nicht prüfbar": die Vergabestelle hat nicht geantwortet. Kein Rot — es ist
   keine Absage, nur eine ausbleibende Auskunft. */
.domst--unklar{color:var(--text-3);border-bottom:1px dotted var(--line);cursor:help}
  /* Gleiche Ziffernbreiten — sonst flimmert die Spalte beim Nachladen. */
  /* Monat ist die Hauptzahl, Jahr die Nebenangabe — im ganzen Laden wird
     monatlich gedacht. Vorher war es umgekehrt, und eine Domain sah damit
     teurer aus als das Hosting, das sie trägt. */
  .domjahr,.dommon{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  .dommon{font-weight:700}
  .domjahr{color:var(--text-2);font-size:13px}
  .domjahr small,.dommon small{display:block;font-size:10.5px;font-weight:500;color:var(--text-3)}

  /* Sammelleiste: erscheint erst, wenn wirklich etwas gewaehlt ist — und LAEUFT MIT.
     Bei 245 Zeilen stuende sie sonst am Ende der Liste, also dort, wo niemand
     hinsieht, waehrend er oben auswaehlt. `position:sticky` mit `bottom` haelt sie
     am unteren Rand, solange die Liste laeuft, und setzt sie am Ende an ihren
     natuerlichen Platz. Kein JavaScript, kein Springen.
     Deckender Hintergrund und Schatten: sie schwebt ueber den Zeilen und muss sich
     davon absetzen. */
  .domwahlbar{display:none}
  .domwahlbar.on{display:flex;align-items:center;gap:16px;flex-wrap:wrap;
    position:sticky;bottom:16px;z-index:5;
    margin-top:14px;padding:14px 16px;border:1px solid var(--yellow);border-radius:12px;
    background:var(--panel);
    box-shadow:0 10px 30px rgba(0,0,0,.55), inset 0 0 0 100vmax rgba(254,221,0,.06)}
  .domwahl__n{font-weight:700}
  .domwahl__p{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums}
  .domwahl__p small{font-weight:500;color:var(--text-3);margin-left:4px}

  @media (max-width:820px){
    .domrow{grid-template-columns:2rem minmax(0,1fr) auto;gap:.3rem .6rem}
    .domst{grid-column:2;font-size:11px}
    .dommon{grid-column:3;grid-row:1}
    .domjahr{display:none}
    .domrow--kopf{display:none}
    .domwahl__p{margin-left:0;width:100%}
  }

  /* Abrechnungszeitraum im Warenkorb — zwei Karten, eine gewaehlt. Die Wahl steht
     dort, wo die Summe steht: wer sie eine Seite weiter suchen muss, findet sie nicht. */
  /* Die Wahl IST die Preisanzeige — darunter stand bis 09.08. noch einmal
     dasselbe als Tafelpaar. Deshalb hier die grosse Zahl. */
  .zykwahl__t{display:block;font-size:11px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--text-3)}
  .zykwahl__p{display:block;font-family:var(--font);font-weight:200;
    font-size:clamp(26px,3.2vw,34px);line-height:1.1;letter-spacing:-.02em;
    color:var(--text);margin:6px 0 4px}
  .zykwahl__u{display:block;font-size:12px;color:var(--text-3);line-height:1.45}
  .zykwahl__b.on .zykwahl__p{color:var(--yellow)}
  .zykwahl__b.on .zykwahl__t{color:var(--yellow)}
  .zykwahl{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 6px}
  .zykwahl__b{display:block;text-align:left;padding:14px 16px;border-radius:12px;cursor:pointer;
    background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.10);color:inherit;
    transition:border-color .15s,background .15s}
  .zykwahl__b:hover{border-color:rgba(255,255,255,.22)}
  /* KEINE Regeln auf `b`/`span` hier: die schlagen als (0,1,1) die Klassen
     `.zykwahl__p`/`__t`/`__u` (0,1,0) und haben genau das schon einmal getan. */
  .zykwahl__b.on{border-color:var(--yellow);background:rgba(254,221,0,.07)}
  @media (max-width:560px){ .zykwahl{grid-template-columns:1fr} }

  /* Die gewaehlte Summe wird betont — sonst stehen Monats- und Jahreswert
     gleichberechtigt nebeneinander und man weiss nicht, was berechnet wird. */
  .sum--gewaehlt{position:relative}
  /* Nur der Strich unten zeigt die Wahl an — faerbte auch die Jahreszahl gelb,
     stuenden zwei Leitzahlen nebeneinander. */
  .sum--gewaehlt:not(.sum--mo) b{color:var(--text)}
  .sum--gewaehlt::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
    background:var(--yellow);border-radius:2px}

  /* ── DNS-Editor im Kundenkonto ───────────────────────────────────────────
     Die Zone ist eine Tabelle, die man BEARBEITET — deshalb Felder statt Text.
     Schmale Spalten fuer TTL und Prio, damit Name und Wert den Platz bekommen,
     an dem es wirklich fehlt. */
  .dnstable--edit td{padding:5px 6px;vertical-align:middle}
  .dnstable--edit input,
  .dnstable--edit select{
    width:100%;box-sizing:border-box;padding:7px 9px;border-radius:7px;
    background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);
    color:inherit;font-size:13.5px;font-family:inherit}
  .dnstable--edit input:focus,
  .dnstable--edit select:focus{outline:none;border-color:var(--yellow);
    box-shadow:0 0 0 3px rgba(254,221,0,.13)}
  .dnstable--edit select{font-weight:700}
  .dnstable--edit td:nth-child(4) input,
  .dnstable--edit td:nth-child(5) input{text-align:right;font-variant-numeric:tabular-nums}
  .dnstable--edit td:last-child{width:34px;padding-right:0}

  /* Loeschen ist gedaempft, bis man darauf zeigt — eine Zeile zu verlieren ist
     leichter passiert als gewollt. */
  .dnsdel{width:28px;height:28px;border-radius:7px;border:1px solid transparent;
    background:transparent;color:var(--text-3);font-size:17px;line-height:1;cursor:pointer;
    transition:color .12s,background .12s,border-color .12s}
  .dnsdel:hover{color:#ffb4a8;background:rgba(232,69,44,.12);border-color:rgba(232,69,44,.4)}

  .dnsadd{margin-top:12px;font-size:13.5px;padding:9px 16px}
  .dnsleer td{padding:16px 6px;color:var(--text-3);font-size:13.5px;font-style:italic}

  /* Eine Meldung, die etwas NICHT geklappt hat, muss sich von der Erklaerung
     darunter unterscheiden — sonst liest man ueber sie hinweg. */
  .mdlnote--fehler{color:#ffb4a8}

  /* ═══ Widerrufsverzicht in der Kasse ══════════════════════════════════════
     Erscheint nur, wenn etwas im Korb liegt, das sofort und personalisiert
     erbracht wird (Domains). Er ist kein Kleingedrucktes: Der Kunde gibt hier
     ein Recht auf, und das soll man sehen. Aber auch keine Warnung — es ist
     der normale Weg, wenn man die Domain heute haben will. */
  .cowid{margin:18px 0 0;padding:18px 20px;border:1px solid var(--line);
    border-left:3px solid var(--yellow);background:rgba(254,221,0,.05);
    border-radius:0 12px 12px 0}
  .cowid__h{margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.14em;
    text-transform:uppercase;color:var(--yellow)}
  .cowid__t{margin:0 0 14px;font-size:13.5px;line-height:1.6;color:var(--text-2)}
  .cowid__t b{color:var(--text)}
  .cowid .check{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;
    line-height:1.6;color:var(--text-2);cursor:pointer}
  .cowid .check input{flex:0 0 auto;margin-top:3px;width:18px;height:18px;
    accent-color:var(--yellow);cursor:pointer}
  .cowid .check b{color:var(--text)}
  .cowid .check a{color:var(--yellow);font-weight:700}
  /* Fehlt der Haken beim Bestellversuch: einmal deutlich zeigen, wo es hakt. */
  .cowid--fehlt{border-color:var(--danger);border-left-color:var(--danger);
    background:rgba(232,69,44,.07);animation:cowidRuck .4s var(--ease)}
  .cowid--fehlt .cowid__h{color:var(--danger)}
  .cowid--fehlt .cowid__h::after{content:" — bitte bestätigen"}
  @keyframes cowidRuck{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}
    75%{transform:translateX(5px)}}
  @media(prefers-reduced-motion:reduce){ .cowid--fehlt{animation:none} }