/* Premiumseiten Startseite neu (08.11.2026): Navigation + Header. Werte aus ~/design.md */
@font-face{font-family:"Archivo";src:url(fonts/Archivo-latin.woff2) format("woff2");font-weight:400 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Geist";src:url(fonts/Geist-latin.woff2) format("woff2");font-weight:400 600;font-display:swap}
:root{
  --n1:#0B0B0C;--n2:#141416;--h:#F4F3F0;--o:#FF4800;--o2:#FF6A2A;--oh:#FFB08A;
  --body-c:#D6D4CE;--muted:#A9A7A1;--faint:#7E7C77;--line:rgba(244,243,240,.09);
  --display:"Archivo",system-ui,sans-serif;--body:"Geist",system-ui,sans-serif;
  --ease:cubic-bezier(.2,1,.3,1);
  /* Glas (Robert 08.11.): fast durchsichtig, frosted mit feiner Körnung (img/noise.png, ruhendes Bild, kein Filter), gilt für SEO-Pille und Laufband-Streifen */
  --glas:url(img/noise.png?v=2) 0 0/160px 160px,linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));--glas-blur:blur(16px) saturate(1.35);
  --glas-kante:inset 0 1px 0 rgba(255,255,255,.1),inset 0 -1px 0 rgba(255,255,255,.04);--wrap:1440px;--pad:40px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;overflow-x:clip;background:var(--n1)}
body{overflow-x:clip;background:var(--n1);color:var(--h);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
a{color:inherit}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--pad);width:100%}
.ic{display:block;width:1em;height:1em;fill:currentColor;flex:none}

/* ---------- Button (Huly-Licht, Pfeil im dunklen Kreis) ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;color:#fff;font-family:var(--body);font-weight:600;font-size:17px;line-height:1;padding:20px 30px;border-radius:999px;text-decoration:none;white-space:nowrap;position:relative;isolation:isolate;overflow:hidden;
  background:linear-gradient(180deg,#F0581C 0%,#D93D00 34%,#CF3A00 66%,#C43400 100%);text-shadow:0 1px 1px rgba(120,25,0,.35);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5),inset 0 -1px 0 rgba(110,20,0,.45),inset 0 0 0 1px rgba(255,190,150,.3),0 0 0 1px rgba(255,72,0,.4),0 16px 36px -14px rgba(255,72,0,.75),0 0 48px -12px rgba(255,100,30,.6);
  transition:transform .25s var(--ease),box-shadow .3s ease}
.btn::before{content:"";position:absolute;z-index:-1;top:50%;left:var(--bx,74%);width:150px;height:150px;margin:-75px 0 0 -75px;border-radius:50%;background:radial-gradient(circle,rgba(255,246,228,.85) 0%,rgba(255,206,160,.55) 14%,rgba(255,140,70,.28) 38%,rgba(255,72,0,0) 66%);opacity:.75;transition:left .45s var(--ease),opacity .4s;pointer-events:none}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,0) 34%);pointer-events:none}
.btn:not(:hover)::before{animation:orb 6s ease-in-out infinite}
@keyframes orb{0%,100%{left:74%}50%{left:90%}}
.btn:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.55),inset 0 -1px 0 rgba(110,20,0,.45),inset 0 0 0 1px rgba(255,200,160,.4),0 0 0 1px rgba(255,90,20,.55),0 20px 44px -14px rgba(255,72,0,.85),0 0 64px -10px rgba(255,110,40,.75)}
.btn:hover::before{opacity:1}
.btn:focus-visible{outline:2px solid var(--h);outline-offset:3px}
.btn-t{position:relative}
.arr{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.arr-c{position:relative;flex:none;display:grid;place-items:center;width:34px;height:34px;margin:-8px -16px -8px 2px;border-radius:50%;background:rgba(30,10,2,.5);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 0 0 1px rgba(255,255,255,.12)}
.btn:hover .arr-c .arr{transform:translateX(2px)}
.btn-sm{padding:13px 20px;font-size:15px}
.btn-sm::before{width:110px;height:110px;margin:-55px 0 0 -55px}

/* ---------- Navigation ---------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:50}
.nav-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;column-gap:20px;height:84px;transition:height .35s var(--ease),padding .35s var(--ease),background .35s,box-shadow .35s,margin .35s var(--ease),border-radius .35s}
.logo{justify-self:start;display:flex;align-items:center;color:var(--h);text-decoration:none}
.logo svg{height:26px;width:auto;display:block}
.nav-cta{justify-self:end}
.nav.solid .nav-in{height:64px;margin-top:12px;max-width:calc(var(--wrap) - 2*var(--pad) + 24px);padding:0 10px 0 22px;border-radius:999px;background:rgba(14,14,16,.9);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,255,255,.07),0 20px 40px -20px rgba(0,0,0,.6)}
.nav.solid .btn-sm{padding:12px 18px}
.nav-links{position:relative;display:flex;align-items:center;gap:2px;padding:4px}
.nav-links>a,.nav-links>.nav-dd>button{position:relative;z-index:1;display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:500;color:#BDBBB5;text-decoration:none;white-space:nowrap;transition:color .25s ease}
.nav-links>a:hover,.nav-links>.nav-dd>button:hover,.nav-dd.open>button{color:var(--h)}
.nav-links a:focus-visible,.nav-links button:focus-visible{outline:2px solid var(--h);outline-offset:2px}
.nav-dd>button .chev{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
.nav-dd.open>button .chev{transform:rotate(180deg)}
.nav-ind{position:absolute;left:0;top:4px;bottom:4px;width:0;border-radius:999px;background:linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),inset 0 1px 0 rgba(255,255,255,.18);opacity:0;pointer-events:none;transition:transform .5s var(--ease),width .5s var(--ease),opacity .3s ease}

/* Funktionen-Menü */
.nav-dd{position:relative}
.dd{position:absolute;top:calc(100% + 18px);left:50%;width:min(760px,calc(100vw - 48px));transform:translate(-50%,8px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,transform .35s var(--ease),visibility 0s linear .35s;
  padding:14px;border-radius:24px;background:linear-gradient(180deg,rgba(30,30,34,.96),rgba(18,18,21,.96));-webkit-backdrop-filter:blur(18px) saturate(1.3);backdrop-filter:blur(18px) saturate(1.3);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(255,255,255,.08),0 40px 80px -30px rgba(0,0,0,.8)}
.dd::before{content:"";position:absolute;left:0;right:0;top:-20px;height:20px}
.nav-dd.open .dd{opacity:1;visibility:visible;pointer-events:auto;transform:translate(-50%,0);transition:opacity .25s ease,transform .35s var(--ease)}
.dd-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px}
.dd a{display:flex;align-items:flex-start;gap:14px;padding:13px 14px;border-radius:14px;text-decoration:none;transition:background .2s ease}
.dd a:hover,.dd a:focus-visible{background:rgba(255,255,255,.06);outline:none}
.dd .ic{font-size:20px;margin-top:1px;color:var(--o2)}
.dd b{display:block;font-size:15px;font-weight:600;color:var(--h);line-height:1.3}
.dd span{display:block;font-size:14px;color:var(--muted);line-height:1.4;margin-top:2px}
.dd-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:10px;padding:14px 14px 4px;border-top:1px solid var(--line)}
.dd-foot p{font-size:14px;color:var(--muted)}
.dd-foot a{display:inline-flex;align-items:center;gap:8px;padding:0;font-size:14.5px;font-weight:600;color:var(--h)}
.dd-foot a:hover{background:none;color:var(--oh)}
.dd-foot .arr{width:15px;height:15px}

.nav-burger{display:none}
.mnav{display:none}

/* ---------- Header ---------- */
.hero{position:relative;isolation:isolate;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:150px 0 0;overflow:hidden}
/* Oranger Schein von oben, ohne Lichtkegel */
.hero-glow{position:absolute;inset:0;z-index:-3;pointer-events:none;background:radial-gradient(ellipse 52% 46% at 50% -6%,rgba(255,72,0,.26) 0%,rgba(255,72,0,.12) 38%,rgba(255,72,0,.04) 62%,rgba(255,72,0,0) 78%)}
/* Pixel-Punktfeld: Punkte im 6-px-Raster, Farbe aus dem Verlauf, oben in der Mitte am stärksten */
.hero-dots{position:absolute;left:0;right:0;top:0;height:78%;z-index:-2;pointer-events:none;
  background:radial-gradient(ellipse 46% 62% at 50% 0%,#FFC7A6 0%,#FF7A3D 22%,rgba(255,72,0,.55) 46%,rgba(255,72,0,.12) 68%,rgba(255,72,0,0) 84%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E") 0 0/6px 6px repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E") 0 0/6px 6px repeat;opacity:.55}
.hero-sparks{position:absolute;left:0;top:0;width:100%;height:78%;z-index:-1;pointer-events:none}
/* Unten weich in die Seite */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:160px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,12,0),var(--n1))}

.hero-in{display:flex;flex-direction:column;align-items:center;text-align:center}
.hero-pill{display:inline-flex;align-items:center;gap:10px;margin:0 0 30px;padding:8px 16px 8px 10px;border-radius:999px;font-family:var(--body);font-size:15px;font-weight:500;line-height:1.3;color:#E4E2DC;
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);box-shadow:var(--glas-kante),0 0 0 1px rgba(255,255,255,.07)}
.hero-pill .mark{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:rgba(255,72,0,.16);box-shadow:inset 0 0 0 1px rgba(255,120,60,.35)}
.hero-pill .mark svg{width:13px;height:auto;color:var(--o2)}
.hero-h{max-width:13.5em;font-family:var(--display);font-weight:500;font-size:clamp(50px,6.4vw,104px);line-height:1;letter-spacing:-.036em;color:var(--h);text-wrap:balance}
.hero-sub{max-width:36em;margin:28px 0 0;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.hero-sub b{font-weight:500;color:var(--body-c)}
.hero-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin:40px 0 0}
.hero-hint{display:inline-flex;align-items:center;gap:8px;font-size:15px;color:var(--muted)}
.hero-hint .ic{font-size:16px;color:var(--o2)}

/* Laufband */
.hero-band{margin:clamp(64px,9vh,104px) 0 0;padding:0 0 clamp(36px,6vh,56px)}
.band-label{text-align:center;font-size:12px;font-weight:600;line-height:1;letter-spacing:.1em;text-transform:uppercase;color:var(--faint);margin:0 0 22px}
.band{position:relative;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 12%,#000 88%,transparent 100%)}
.band.ziehen{cursor:grabbing}
.band-track{display:flex;width:max-content;will-change:transform}
.band-item{display:inline-flex;align-items:center;gap:11px;padding:14px 26px;font-size:16px;font-weight:500;color:var(--body-c);white-space:nowrap}
.band-item .ic{font-size:21px;color:var(--o2)}
/* Glas-Streifen ums Laufband (Robert 08.11.): volle Breite, fast durchsichtiges Glas wie die SEO-Pille, Blur dahinter, alles läuft zu den Rändern weich aus.
   Bewusste Ausnahme zur Safari-Regel: der Blur sitzt auf einer eigenen, ruhenden Ebene hinter dem Band, nicht über der Bewegung. */
.band-glas{--fade:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.08) 4%,rgba(0,0,0,.3) 9%,rgba(0,0,0,.62) 14%,rgba(0,0,0,.88) 19%,#000 24%,#000 76%,rgba(0,0,0,.88) 81%,rgba(0,0,0,.62) 86%,rgba(0,0,0,.3) 91%,rgba(0,0,0,.08) 96%,transparent 100%);
  position:relative;isolation:isolate;padding:6px 0}
.band-glas::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:var(--glas);box-shadow:var(--glas-kante);
  -webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);
  -webkit-mask-image:var(--fade);mask-image:var(--fade)}
.band-glas .band{-webkit-mask-image:var(--fade);mask-image:var(--fade)}
/* Trennstrich vor jedem Item (auch vor dem ersten, damit die Naht beim Endlos-Lauf gleich aussieht) */
.band-item{position:relative}
.band-item::before{content:"";position:absolute;left:0;top:50%;width:1px;height:20px;margin-top:-10px;background:rgba(255,255,255,.1)}

/* ---------- 02 Arbeiten: Rundgang Vorher/Nachher (aus der alten Salespage übernommen, 08.11.2026) ---------- */
@property --p{syntax:"<percentage>";inherits:true;initial-value:50%}
@property --vc{syntax:"<color>";inherits:true;initial-value:#FFD6AA}
.sec{position:relative;padding:120px 0}
.sec-head{position:relative;margin-bottom:64px}
.h2{font-family:var(--display);font-weight:500;font-size:clamp(38px,4.5vw,70px);line-height:calc(.98em + 6px);letter-spacing:-.032em;max-width:15em;color:var(--h);text-wrap:balance}
.lead{max-width:30em;margin-top:24px;font-size:clamp(17px,1.35vw,20px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:3px;white-space:nowrap}
.textlink svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* Einblenden beim Reinscrollen, nur einmal; ohne Blur-Filter (Safari) */
.js [data-r]{opacity:0;transform:translateY(22px);transition:opacity .8s ease,transform 1s var(--ease)}
.js [data-r].in{opacity:1;transform:none}
.js [data-r][data-d="1"]{transition-delay:.12s}.js [data-r][data-d="2"]{transition-delay:.24s}.js [data-r][data-d="3"]{transition-delay:.36s}
@media (prefers-reduced-motion:reduce){.js [data-r]{transform:none!important}}

#arbeiten{overflow:hidden;overflow:clip}  /* clip: Sektion darf sich nie seitlich verschieben (hidden ist per Skript scrollbar) */
#arbeiten>.wrap{position:relative;z-index:1}
@media (min-width:1001px){#arbeiten .h2{max-width:16em}}
.vn-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:-16px 0 28px}
.vn-count{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;color:var(--h)}
.vn-count span{color:#6E6C67}
.vn-arrows{display:flex;gap:10px}
.vn-arr{width:56px;height:56px;border-radius:50%;display:grid;place-items:center;background:#F4F3F0;color:#0B0B0C;box-shadow:0 14px 30px -14px rgba(0,0,0,.8);transition:transform .25s var(--ease),opacity .25s}
.vn-arr:hover{transform:translateY(-2px)}
.vn-arr[disabled]{opacity:.22;cursor:default;transform:none}
.vn-arr svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.vn-stage{position:relative;z-index:0;isolation:isolate;--cw:min(860px,80vw);--vc:#FFD6AA;transition:--vc 1.1s ease}
.vn-track{display:flex;gap:28px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;padding:56px calc(50% - var(--cw) / 2) 100px;margin-bottom:-48px;scrollbar-width:none;cursor:grab}
.vn-track::-webkit-scrollbar{display:none}
.vn-track.drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
.vn{border-radius:22px;overflow:hidden;background:#1B1B1E;box-shadow:0 0 0 1px rgba(244,243,240,.08),0 40px 70px -40px rgba(0,0,0,.85),inset 0 1px 0 rgba(255,255,255,.06)}
.vn-track .vn{flex:0 0 var(--cw);scroll-snap-align:center;transform:scale(.88);opacity:.3;cursor:pointer;transition:transform .9s var(--ease),opacity .7s ease,box-shadow .7s ease}
.vn-media{position:relative;aspect-ratio:16/10;overflow:hidden;user-select:none;--p:100%;background:#222;cursor:default;pointer-events:none}
.vn-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;pointer-events:none}
.vn-media .vn-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;z-index:0}
.vn-media .vn-after{z-index:1;transition:opacity .45s ease}
.vn-media.play .vn-after,.vn-media.full .vn-after{opacity:0}
.vn-media .vn-full{inset:0 auto auto 0;height:auto;object-fit:fill;z-index:1;opacity:0;transition:opacity .45s ease;will-change:transform}
.vn-media.full .vn-full{opacity:1}
.vn-media .vn-before{z-index:2;clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.vn-handle{position:absolute;top:0;bottom:0;left:var(--p);width:56px;margin-left:-28px;z-index:3;opacity:0;transition:opacity .25s ease}
.vn-handle::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 0 1px rgba(11,11,12,.15),0 0 24px rgba(0,0,0,.35)}
.vn-media.sweeping .vn-handle{opacity:1}
/* Labels ohne backdrop-filter, weil darunter Video läuft (Safari) */
.vn-lab{position:absolute;bottom:14px;z-index:4;padding:6px 11px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.2;background:rgba(11,11,12,.8);color:#fff;transition:opacity .4s ease}
.vn-lab.l{left:14px}.vn-lab.r{right:14px}
.vn-media:not(.neu) .vn-lab.r,.vn-media.neu .vn-lab.l{opacity:0}
.vn-prog{position:absolute;left:0;right:0;bottom:0;height:3px;z-index:4;background:rgba(255,255,255,.14);opacity:0;transition:opacity .4s ease}
.vn-prog i{display:block;height:100%;transform-origin:left;transform:scaleX(0);background:var(--vc)}
.vn-media.play .vn-prog,.vn-media.full .vn-prog{opacity:1}
.vn-info{padding:22px 24px 24px;display:flex;flex-direction:column;gap:6px}
.vn-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.vn-info h3{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;color:var(--h)}
.vn-info p{max-width:33em;font-size:16px;line-height:1.5;color:var(--muted);text-wrap:pretty}
.vn-info p b{font-weight:600}
.tag{display:inline-flex;align-items:center;font-size:12px;font-weight:600;line-height:1.2;padding:5px 10px;border-radius:999px;white-space:nowrap}
.tag-k{background:#F4F3F0;color:#0B0B0C}
.tag-s{border:1.2px solid rgba(244,243,240,.35);color:#D6D4CE}
.vn-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:40px}
.vn-foot p{max-width:31em;font-size:16px;color:var(--muted);text-wrap:pretty}
/* Licht in der Markenfarbe der gezeigten Seite (1:1 aus der alten Salespage) */
.vn-stage::before{content:"";position:absolute;left:50%;top:-300px;bottom:-200px;width:1800px;margin-left:-900px;z-index:-2;pointer-events:none;background:radial-gradient(50% 50% at 50% 46%,color-mix(in srgb,var(--vc) 16%,transparent) 0.0%,color-mix(in srgb,var(--vc) 14.9%,transparent) 15.0%,color-mix(in srgb,var(--vc) 12.2%,transparent) 30.0%,color-mix(in srgb,var(--vc) 8.6%,transparent) 45.0%,color-mix(in srgb,var(--vc) 5.4%,transparent) 60.0%,color-mix(in srgb,var(--vc) 2.7%,transparent) 75.0%,color-mix(in srgb,var(--vc) 1.0%,transparent) 88.0%,color-mix(in srgb,var(--vc) 0%,transparent) 100.0%)}
.vn-track .vn.act{transform:none;opacity:1;cursor:auto;box-shadow:0 0 0 1px rgba(255,255,255,.1),inset 0 1px 0 rgba(255,255,255,.4),0 50px 70px -40px rgba(0,0,0,.9);box-shadow:0 0 0 1px color-mix(in srgb,var(--vc) 18%,transparent),inset 0 1px 0 color-mix(in srgb,color-mix(in srgb,var(--vc) 50%,#fff) 35%,transparent),0 50px 70px -40px rgba(0,0,0,.9)}
.vn-glow{position:absolute;left:50%;top:-110px;width:calc(var(--cw) + 360px);height:400px;transform:translateX(-50%);pointer-events:none;z-index:-1;background:radial-gradient(42% 40% at 50% 166px,rgba(255,150,80,.4),transparent 100%);background:radial-gradient(42% 40% at 50% 166px,color-mix(in srgb,var(--vc) 48%,transparent) 0.0%,color-mix(in srgb,var(--vc) 44.6%,transparent) 15.0%,color-mix(in srgb,var(--vc) 36.5%,transparent) 30.0%,color-mix(in srgb,var(--vc) 25.9%,transparent) 45.0%,color-mix(in srgb,var(--vc) 16.3%,transparent) 60.0%,color-mix(in srgb,var(--vc) 8.2%,transparent) 75.0%,color-mix(in srgb,var(--vc) 2.9%,transparent) 88.0%,color-mix(in srgb,var(--vc) 0%,transparent) 100.0%)}
.vn-spot{position:absolute;left:50%;top:-150px;width:1240px;margin-left:-620px;height:780px;pointer-events:none;z-index:-1;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 24%);mask-image:linear-gradient(180deg,transparent 0,#000 24%);background:radial-gradient(20% 36% at 50% 22%,rgba(255,236,216,.26),rgba(255,232,210,0) 72%),radial-gradient(42% 58% at 50% 22%,rgba(255,110,40,.3),rgba(255,72,0,.09) 52%,rgba(255,72,0,0) 78%);background:radial-gradient(24% 40% at 50% 22%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 26%,transparent) 0.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 24.2%,transparent) 15.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 19.8%,transparent) 30.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 14.0%,transparent) 45.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 8.8%,transparent) 60.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 4.4%,transparent) 75.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 1.6%,transparent) 88.0%,color-mix(in srgb,color-mix(in srgb,#fff 55%,var(--vc)) 0%,transparent) 100.0%),radial-gradient(46% 62% at 50% 22%,color-mix(in srgb,var(--vc) 34%,transparent) 0.0%,color-mix(in srgb,var(--vc) 31.6%,transparent) 15.0%,color-mix(in srgb,var(--vc) 25.8%,transparent) 30.0%,color-mix(in srgb,var(--vc) 18.4%,transparent) 45.0%,color-mix(in srgb,var(--vc) 11.6%,transparent) 60.0%,color-mix(in srgb,var(--vc) 5.8%,transparent) 75.0%,color-mix(in srgb,var(--vc) 2.0%,transparent) 88.0%,color-mix(in srgb,var(--vc) 0%,transparent) 100.0%)}
.vn-spot::after{content:"";position:absolute;inset:0;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='2' y='2' width='2' height='2' fill='%23fff' fill-opacity='.32'/%3E%3C/svg%3E");background-size:6px 6px;-webkit-mask-image:radial-gradient(38% 34% at 50% 26%,#000 0%,rgba(0,0,0,.78) 22%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.26) 60%,rgba(0,0,0,.1) 76%,transparent 92%);mask-image:radial-gradient(38% 34% at 50% 26%,#000 0%,rgba(0,0,0,.78) 22%,rgba(0,0,0,.5) 42%,rgba(0,0,0,.26) 60%,rgba(0,0,0,.1) 76%,transparent 92%)}
.vn-edge{position:absolute;left:50%;top:55px;width:calc(var(--cw) * .7);transform:translateX(-50%);height:1px;pointer-events:none;z-index:3;background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--vc) 30%,transparent) 15%,color-mix(in srgb,var(--vc) 60%,transparent) 32%,color-mix(in srgb,color-mix(in srgb,#fff 40%,var(--vc)) 70%,transparent) 50%,color-mix(in srgb,var(--vc) 60%,transparent) 68%,color-mix(in srgb,var(--vc) 30%,transparent) 85%,transparent);box-shadow:0 0 30px 6px color-mix(in srgb,var(--vc) 30%,transparent),0 0 90px 16px color-mix(in srgb,var(--vc) 12%,transparent);transition:opacity .5s ease}
.vn-edge.off{opacity:0}
.vn-media.sweeping .vn-handle::before{box-shadow:0 0 0 1px rgba(255,255,255,.4),0 0 22px 4px color-mix(in srgb,var(--vc) 80%,#fff),0 0 60px 10px color-mix(in srgb,var(--vc) 40%,transparent)}
@media (prefers-reduced-motion:reduce){.vn-track .vn{transition:opacity .3s ease}}
@media (max-width:1000px){.vn-foot{flex-direction:column;align-items:flex-start;gap:20px}}
@media (max-width:640px){
  .sec{padding:80px 0}
  .sec-head{margin-bottom:40px}
  .h2{font-size:clamp(30px,8.6vw,38px);line-height:1.04;letter-spacing:-.042em}
  .lead{font-size:17px;margin-top:18px}
  .vn-bar{margin:-8px 0 20px}
  .vn-arr{width:48px;height:48px}
}
@media (max-width:640px){.vn-stage{--cw:82vw}.vn-glow{top:-90px;height:300px;width:calc(var(--cw) + 200px);background:radial-gradient(46% 40% at 50% 130px,color-mix(in srgb,var(--vc) 48%,transparent) 0.0%,color-mix(in srgb,var(--vc) 44.6%,transparent) 15.0%,color-mix(in srgb,var(--vc) 36.5%,transparent) 30.0%,color-mix(in srgb,var(--vc) 25.9%,transparent) 45.0%,color-mix(in srgb,var(--vc) 16.3%,transparent) 60.0%,color-mix(in srgb,var(--vc) 8.2%,transparent) 75.0%,color-mix(in srgb,var(--vc) 2.9%,transparent) 88.0%,color-mix(in srgb,var(--vc) 0%,transparent) 100.0%)}.vn-stage::before{width:1000px;margin-left:-500px;top:-200px}.vn-track{padding-top:40px;gap:14px}.vn-edge{top:39px}.vn-spot{width:760px;margin-left:-380px;height:560px;top:-110px}}

/* ---------- 03 Was du bekommst: drei Zeilen im Wechsel (09.11.2026) ---------- */
.h3{font-family:var(--display);font-weight:600;font-size:clamp(28px,2.57vw,37px);line-height:calc(1em + 8px);letter-spacing:-.015em;color:var(--h)}
.wb{display:grid;gap:120px}
.wb-row{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(48px,6vw,104px);align-items:center}
.wb-r{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.wb-r .wb-t{order:2}
.wb-t p{max-width:30em;margin-top:18px;font-size:clamp(17px,1.25vw,19px);line-height:1.6;color:var(--muted);text-wrap:pretty}
.wb-t .textlink{margin-top:28px}
.wb-v{position:relative}
/* warmes Licht hinter jedem Visual */
.wb-v::before{content:"";position:absolute;left:50%;top:50%;width:120%;height:120%;transform:translate(-50%,-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,72,0,.13) 0%,rgba(255,72,0,.1) 20%,rgba(255,72,0,.06) 40%,rgba(255,72,0,.03) 60%,rgba(255,72,0,.01) 80%,rgba(255,72,0,0) 100%)}
#leistung{overflow:hidden;overflow:clip;isolation:isolate}

/* MacBook (Space Black, aus dem MacBook-GIF übernommen, Maße relativ zur Breite) */
.mb{container-type:inline-size;position:relative;width:100%}
.mb-lid{position:relative;width:93cqw;margin:0 auto;padding:1.55cqw 1.36cqw 1.94cqw;background:#050506;border-radius:2.33cqw 2.33cqw .97cqw .97cqw;
  box-shadow:inset 0 0 0 .15cqw #2b2d33,inset 0 0 0 .24cqw #0c0d10,inset 0 .15cqw 0 .2cqw rgba(255,255,255,.07),0 5cqw 12cqw rgba(0,0,0,.75),0 0 16cqw rgba(255,72,0,.16)}
.mb-cam{position:absolute;left:50%;top:.58cqw;width:.68cqw;height:.68cqw;margin-left:-.34cqw;border-radius:50%;background:#15171c;box-shadow:inset 0 0 0 .15cqw #08090b}
.mb-scr{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0B0B0C;border-radius:.87cqw .87cqw .2cqw .2cqw}
.mb-scr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease}
.mb-scr img.on{opacity:1}
.mb-scr img.oben{z-index:2}
.mb-glare{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(118deg,rgba(255,255,255,.045) 0%,rgba(255,255,255,.018) 30%,rgba(255,255,255,0) 46%)}
.mb-hinge{position:relative;width:83.7cqw;height:.68cqw;margin:-.1cqw auto 0;border-radius:0 0 .6cqw .6cqw;background:linear-gradient(180deg,#1a1b1f,#0a0b0d)}
.mb-base{position:relative;width:100cqw;height:2.14cqw;margin-top:-.2cqw;border-radius:.2cqw .2cqw 2.5cqw 2.5cqw/.2cqw .2cqw 1.36cqw 1.36cqw;
  background:linear-gradient(180deg,#71747d 0%,#3d3f46 18%,#26272c 55%,#151619 100%);box-shadow:inset 0 .1cqw 0 rgba(255,255,255,.55),inset 0 -.1cqw 0 rgba(0,0,0,.7),0 2.5cqw 5cqw rgba(0,0,0,.65)}
.mb-base b{position:absolute;left:50%;top:0;width:14.6cqw;height:.78cqw;margin-left:-7.3cqw;border-radius:0 0 1.07cqw 1.07cqw;background:linear-gradient(180deg,#0d0e11,#24262b);box-shadow:inset 0 -.1cqw 0 rgba(255,255,255,.08)}
.mb-floor{height:5cqw;margin:-1.2cqw -2cqw 0;background:radial-gradient(50% 50% at 50% 30%,rgba(0,0,0,.7),rgba(0,0,0,0))}

/* App-Rahmen für Aufnahme und Livecall (16:10 wie ein Laptop-Bildschirm) */
.wb-app{position:relative;aspect-ratio:16/10;border-radius:18px;overflow:hidden;background:#0B0B0C;
  box-shadow:0 0 0 1px rgba(244,243,240,.09),inset 0 1px 0 rgba(255,255,255,.06),0 50px 100px -40px rgba(0,0,0,.9),0 0 120px rgba(255,72,0,.1)}
.wb-vid{display:block;width:100%;height:100%;object-fit:cover;object-position:top}
.wb-platz{display:grid;place-items:center;height:100%;color:var(--faint);font-size:15px}

/* Livecall: Warteraum, dann Call. Alles in Einheiten der Rahmenbreite, wie ein Bildschirm (Basis 1100 px) */
@property --ak{syntax:"<color>";inherits:true;initial-value:#19B3A6}
/* --ak = Markenfarbe des Kunden (in der echten App aus seinem Branding), hier über die Farbleiste wählbar */
.lc{container-type:inline-size;--u:calc(100cqw / 1100);--ak:#19B3A6;transition:--ak .7s ease;color:#D6D4CE;font-family:var(--body)}
.lc-wait,.lc-call{position:absolute;inset:0;transition:opacity .9s ease}
.lc-call{opacity:0;display:grid;grid-template-rows:calc(64 * var(--u)) 1fr calc(92 * var(--u))}
.lc.im-call .lc-wait{opacity:0}
.lc.im-call .lc-call{opacity:1}
/* Warteraum: Willkommensvideo der Coachin auf der Bühne (wie das Warteraum-Video in der echten Call-Ansicht). Kein Zoom, damit sie beim Laufen ganz im Bild bleibt */
.lc .lc-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%;background:#0B0B0C}
/* Dunkles Overlay wie in der echten App, leicht in der Markenfarbe getönt */
.lc-wait::after{content:"";position:absolute;inset:0;background:color-mix(in srgb,color-mix(in srgb,var(--ak) 16%,#0B0B0C) 64%,transparent)}
.lc-wait-box{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:0 calc(40 * var(--u))}
.lc-wait-box .lc-logo{height:calc(22 * var(--u));width:auto;margin-bottom:calc(26 * var(--u))}
.lc-wait-h{font:600 calc(36 * var(--u))/1.15 var(--display);color:#F4F3F0;letter-spacing:-.015em}
.lc-wait-s{margin-top:calc(12 * var(--u));font-size:calc(17 * var(--u));color:#C9C7C1}
.lc-dot{display:inline-block;width:calc(11 * var(--u));height:calc(11 * var(--u));border-radius:50%;background:var(--ak);margin-right:calc(12 * var(--u));vertical-align:middle;animation:lcPuls 1.4s ease-in-out infinite}
@keyframes lcPuls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.8)}}
.lc-top{display:flex;align-items:center;gap:calc(16 * var(--u));padding:0 calc(24 * var(--u))}
.lc-top .lc-logo{height:calc(19 * var(--u));width:auto}
.lc-title{font:600 calc(17 * var(--u))/1.2 var(--display);color:#F4F3F0;letter-spacing:-.01em;padding-left:calc(16 * var(--u));box-shadow:inset 1px 0 0 rgba(244,243,240,.12)}
.lc-sp{flex:1}
.lc-pill{display:inline-flex;align-items:center;height:calc(32 * var(--u));padding:0 calc(14 * var(--u));border-radius:999px;font-size:calc(13 * var(--u));font-weight:500;background:rgba(244,243,240,.06);box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);color:#F4F3F0}
.lc-pill .lc-dot{width:calc(8 * var(--u));height:calc(8 * var(--u));margin-right:calc(8 * var(--u))}
.lc-pill b{font-weight:500;font-variant-numeric:tabular-nums;color:#A9A7A1;margin-left:calc(8 * var(--u))}
.lc-rec{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ak) 55%,transparent)}
.lc-logo-a{stroke:var(--ak)}
.lc-b{position:relative}
.lc-badge{position:absolute;top:calc(-2 * var(--u));right:calc(-2 * var(--u));min-width:calc(18 * var(--u));height:calc(18 * var(--u));padding:0 calc(5 * var(--u));border-radius:999px;background:var(--ak);color:#fff;font:600 calc(11 * var(--u))/calc(18 * var(--u)) var(--body);text-align:center}
.lc-stage{display:grid;grid-template-columns:1fr 1fr;gap:calc(12 * var(--u));margin:0 calc(24 * var(--u));min-height:0}
.lc-tile{position:relative;margin:0;border-radius:calc(16 * var(--u));overflow:hidden;background:#141416;box-shadow:0 0 0 1px rgba(244,243,240,.09),0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-28 * var(--u)) rgba(0,0,0,.8);transition:box-shadow .4s ease}
.lc-tile.spricht{box-shadow:0 0 0 calc(2 * var(--u)) #F4F3F0,0 calc(24 * var(--u)) calc(48 * var(--u)) calc(-28 * var(--u)) rgba(0,0,0,.8)}
/* Bild lebt leicht wie ein Kamerabild (nur transform, ruhige Ebene) */
/* Kamerabild: stummes Higgsfield-Video (Kling 3.0, Start = Ende, nahtlose Schleife), Startbild als Poster */
.lc-vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;background:#141416}
.lc-label{position:absolute;left:calc(10 * var(--u));bottom:calc(10 * var(--u));display:flex;align-items:center;gap:calc(6 * var(--u));height:calc(28 * var(--u));padding:0 calc(10 * var(--u));border-radius:999px;background:rgba(11,11,12,.7);font-size:calc(13 * var(--u));font-weight:500;color:#F4F3F0;white-space:nowrap}
.lc-label svg{width:calc(14 * var(--u));height:calc(14 * var(--u));color:color-mix(in srgb,var(--ak) 60%,#fff)}
.lc-ctl{display:flex;align-items:center;justify-content:center;padding-bottom:calc(12 * var(--u))}
.lc-ctls{display:flex;align-items:center;gap:calc(8 * var(--u));padding:calc(8 * var(--u));border-radius:999px;background:linear-gradient(180deg,rgba(38,38,42,.78),rgba(24,24,27,.78));box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.08)}
.lc-b{width:calc(48 * var(--u));height:calc(48 * var(--u));border-radius:50%;display:grid;place-items:center;background:rgba(244,243,240,.06);color:#F4F3F0}
.lc-b svg,.lc-leave svg{width:calc(21 * var(--u));height:calc(21 * var(--u))}
.lc-sep{width:1px;height:calc(28 * var(--u));background:rgba(244,243,240,.09);margin:0 calc(4 * var(--u))}
.lc-leave{display:flex;align-items:center;gap:calc(8 * var(--u));height:calc(48 * var(--u));padding:0 calc(20 * var(--u));border-radius:999px;background:rgba(244,243,240,.06);font-style:normal;font-weight:600;font-size:calc(14 * var(--u));color:#F4F3F0}
.lc-leave svg{width:calc(18 * var(--u));height:calc(18 * var(--u))}
@media (prefers-reduced-motion:reduce){.lc-dot{animation:none}}
/* Farbleiste oben rechts am Call-Rahmen: Markenfarbe ausprobieren (ohne backdrop-filter, darunter läuft Video) */
.lc-farben{position:absolute;top:-46px;right:0;z-index:5;display:flex;align-items:center;gap:9px;padding:7px 9px 7px 14px;border-radius:999px;background:rgba(22,22,25,.92);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,255,255,.09),0 14px 30px -12px rgba(0,0,0,.85)}
.lc-farben span{font-size:12px;font-weight:500;line-height:1;color:var(--muted);margin-right:3px;white-space:nowrap}
.lc-farbe{position:relative;width:20px;height:20px;border-radius:50%;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22);cursor:pointer;transition:transform .2s var(--ease)}
.lc-farbe:hover{transform:scale(1.12)}
.lc-farbe::after{content:"";position:absolute;inset:-4px;border-radius:50%;box-shadow:0 0 0 1.5px #F4F3F0;opacity:0;transform:scale(.8);transition:opacity .25s ease,transform .35s var(--ease)}
.lc-farbe.an::after{opacity:1;transform:none}
.lc-farbe.klick{animation:lcKlick .45s var(--ease)}
.lc-farbe:focus-visible{outline:2px solid #F4F3F0;outline-offset:4px}
@keyframes lcKlick{0%{transform:scale(1)}35%{transform:scale(.78)}100%{transform:scale(1)}}
@media (max-width:1000px){.wb-row:has(.lc-farben){gap:72px}}
@media (max-width:640px){.lc-farben{top:-44px;gap:7px;padding:6px 8px 6px 11px}.lc-farbe{width:18px;height:18px}}
@media (prefers-reduced-motion:reduce){.lc{transition:none}.lc-farbe.klick{animation:none}}

@media (max-width:1000px){
  .wb{gap:96px}
  .wb-row,.wb-r{grid-template-columns:1fr;gap:40px}
  .wb-r .wb-t{order:0}
}
@media (max-width:640px){
  .wb{gap:80px}
  .wb-t p{margin-top:14px}
  .wb-t .textlink{margin-top:22px}
  .wb-app{border-radius:12px}
}

/* ---------- 04 Kundenstimmen: hell (Beweis), zwei Reihen laufen gegeneinander, ziehbar ---------- */
.hell{background:#F4F3F0;color:#0B0B0C}
.hell .h2{color:#0B0B0C}
#stimmen{overflow:hidden;overflow:clip}
#stimmen .sec-head{margin-bottom:56px}
.kq-rows{display:grid;gap:16px;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
.kq-row{overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.kq-row.ziehen{cursor:grabbing}
.kq-row .band-track{display:flex;gap:16px;width:max-content;padding:6px 8px 30px;will-change:transform}
.kq-row img{-webkit-user-drag:none;pointer-events:none}
.kq{flex:none;display:flex;flex-direction:column;justify-content:space-between;gap:24px;width:400px;margin:0;padding:26px 26px 24px;border-radius:22px;background:#fff;
  box-shadow:0 0 0 1px rgba(11,11,12,.06),0 24px 44px -30px rgba(11,11,12,.38)}
.kq blockquote{margin:0}
.kq-t{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.2;letter-spacing:-.02em;color:#0B0B0C;text-wrap:balance}
.kq-x{margin-top:12px;font-size:16px;line-height:1.55;color:#45433F;text-wrap:pretty}
.kq-p{display:flex;align-items:center;gap:12px}
.kq-p img{flex:none;width:44px;height:44px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px rgba(11,11,12,.08)}
.kq-p b{display:block;font-size:15px;font-weight:600;line-height:1.3;color:#0B0B0C}
.kq-p small{display:block;font-size:13px;line-height:1.35;color:#5F5D58}
@media (max-width:640px){
  #stimmen .sec-head{margin-bottom:36px}
  .kq-rows{gap:12px;-webkit-mask-image:none;mask-image:none}
  .kq-row .band-track{gap:12px;padding-bottom:24px}
  .kq{width:300px;gap:20px;padding:22px 22px 20px}
  .kq-t{font-size:19px}
  .kq-x{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:6;overflow:hidden}
}

/* ---------- 05 Bento: Gründe für die Website mit mir (dunkel, echte Aufnahmen) ---------- */
#vorteile{overflow:hidden;overflow:clip}
.bx{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.bx-k{position:relative;display:flex;flex-direction:column;gap:26px;padding:26px 26px 30px;border-radius:22px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#161618 0%,#0D0D0F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06)}
/* leises Licht von oben in jeder Kachel */
.bx-k::before{content:"";position:absolute;left:50%;top:-40%;width:110%;height:80%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,72,0,.11) 0%,rgba(255,72,0,.07) 30%,rgba(255,72,0,.03) 60%,rgba(255,72,0,0) 100%)}
.bx-7{grid-column:span 7}.bx-5{grid-column:span 5}
.bx-t{max-width:34em;font-size:17px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.bx-t b{font-weight:500;color:var(--h)}
.bx-v{position:relative}
.bx-t{margin-top:auto}
.bx-app{position:relative;height:clamp(300px,28vw,420px);border-radius:14px;overflow:hidden;background:#0B0B0C;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 30px 60px -30px rgba(0,0,0,.9)}
.bx-app .wb-vid{object-position:top left}
/* Buchungsseite hell: ganze Karte zeigen, Rand in der Seitenfarbe */
.bx-app-hell{background:#F4F3EF}
.bx-app-hell .wb-vid{object-fit:contain;object-position:center}
.bx-5 .bx-v,.bx-5 .bx-v{order:0}
/* Website-Kachel: drei echte Seiten scrollen gleichzeitig */
.bx-web{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);align-items:end;gap:40px;padding:34px 0 0 34px;height:clamp(400px,33vw,500px)}
.bx-web .bx-t{padding-bottom:34px;font-size:clamp(18px,1.45vw,21px);line-height:1.5}
.bx-web .bx-t b{display:block;margin-bottom:10px;font-family:var(--display);font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.02em}
.bx-stapel{position:relative;height:100%}
.bx-seite{position:absolute;margin:0;aspect-ratio:16/10;border-radius:14px 14px 0 0;overflow:hidden;background:#0B0B0C;box-shadow:0 0 0 1px rgba(255,255,255,.09),0 40px 80px -30px rgba(0,0,0,.95)}
.bx-seite figcaption{position:absolute;left:12px;bottom:12px;z-index:2;padding:5px 10px;border-radius:999px;background:rgba(11,11,12,.78);font-size:12px;font-weight:500;color:#F4F3F0}
.bx-s0{left:0;bottom:-3%;width:62%;z-index:1;opacity:.5}
.bx-s2{right:-12%;bottom:-3%;width:62%;z-index:1;opacity:.5}
.bx-s1{left:12%;bottom:0;width:82%;z-index:2}
/* Kundenstimmen quer: Video links, Text rechts */
.bx-quer{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:44px}
.bx-quer .bx-t{font-size:clamp(18px,1.45vw,21px);line-height:1.5}
.bx-quer .bx-t b{display:block;margin-bottom:10px;font-family:var(--display);font-weight:600;font-size:clamp(26px,2.4vw,34px);line-height:1.12;letter-spacing:-.02em}
.bx-quer .bx-v{margin:0}
.bx-quer .bx-t{margin:0}
.bx-quer .bx-app{height:auto;aspect-ratio:16/10}
.bx-web .bx-t{margin:0}
/* Liste: das gibt es außerdem */
.bx-extra{margin-top:64px;padding-top:40px;border-top:1px solid rgba(244,243,240,.08)}
.bx-extra-t{font-family:var(--display);font-weight:600;font-size:21px;line-height:1.25;color:var(--h)}
.bx-liste{display:flex;flex-wrap:wrap;gap:16px 34px;margin-top:24px;padding:0;list-style:none}
.bx-liste li{display:inline-flex;align-items:center;gap:10px;font-size:16px;font-weight:500;color:var(--body-c)}
.bx-liste .ic{font-size:20px;color:var(--o2)}
.bx-liste small{font-size:13px;font-weight:400;color:var(--faint)}
@media (max-width:1000px){
  .bx-7,.bx-5{grid-column:1/-1}
  .bx-web,.bx-quer{grid-template-columns:1fr;gap:28px}
  .bx-web{padding:28px 0 0 28px}
  .bx-web .bx-t{padding:0 28px 0 0}
  .bx-web{height:auto}
  .bx-stapel{height:auto;aspect-ratio:16/9}
  .bx-app{height:auto;aspect-ratio:16/10}
}
@media (max-width:640px){
  .bx{gap:12px}
  .bx-k{padding:20px 20px 24px;gap:20px}
  .bx-web{padding:24px 0 0 20px}
  .bx-web .bx-t{padding-right:20px}
  .bx-t{font-size:16px}
  .bx-app{border-radius:10px}
  .bx-extra{margin-top:48px;padding-top:32px}
  .bx-liste{gap:14px 22px}
  .bx-liste li{font-size:15px}
}

/* ---------- 06 Ablauf (hell): Linie Tag 1 bis 7, darunter drei gebaute Karten aus dem echten Dashboard ---------- */
#ablauf{overflow:hidden;overflow:clip}
.hell .lead{color:#5F5D58}
.ab{--abp:0}
.ab-linie{position:relative;height:48px;margin-bottom:40px}
.ab-bahn,.ab-fill{position:absolute;left:6px;top:5px;height:2px;border-radius:2px}
.ab-bahn{right:6px;background:rgba(11,11,12,.12)}
.ab-fill{width:calc(var(--abp) * (100% - 12px));background:var(--o);box-shadow:0 0 12px rgba(255,72,0,.4)}
.ab-kopf{position:absolute;z-index:2;top:0;left:calc(6px + var(--abp) * (100% - 12px));width:12px;height:12px;margin-left:-6px;border-radius:50%;background:var(--o);
  box-shadow:0 0 0 5px rgba(255,72,0,.16),0 0 16px rgba(255,72,0,.55);opacity:0;transition:opacity .3s}
.ab.laeuft .ab-kopf{opacity:1}
.ab-tage{position:absolute;inset:0;list-style:none}
.ab-tage li{position:absolute;top:0;left:calc(6px + var(--i) * (100% - 12px) / 6);width:12px;height:12px;margin-left:-6px;border-radius:50%;background:#F4F3F0;
  box-shadow:inset 0 0 0 2px rgba(11,11,12,.2);transition:background .3s,box-shadow .3s}
.ab-tage span{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-size:14px;font-weight:500;line-height:1;color:#7E7C77;white-space:nowrap;transition:color .3s}
.ab-tage li:first-child span{left:0;transform:none}
.ab-tage li:last-child span{left:auto;right:0;transform:none}
.ab-tage li.an{background:var(--o);box-shadow:none}
.ab-tage li.an span{color:#0B0B0C}
.ab-schritte{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;list-style:none}
.ab-s{position:relative;min-width:0}
.ab-dot{display:none}
.ab-v{container-type:inline-size}
.ab-t{margin-top:30px;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.24;letter-spacing:-.02em;color:#0B0B0C;text-wrap:pretty}
.ab-t span{color:var(--o)}
.ab-x{max-width:34em;margin-top:10px;font-size:16px;line-height:1.6;color:#45433F;text-wrap:pretty}

/* Karten: nachgebaut aus dem echten Dashboard (dash.css), alle Maße skalieren mit der Kartenbreite */
.ab-app{--e:calc(100cqw / 440);position:relative;display:flex;aspect-ratio:440/330;overflow:hidden;border-radius:calc(14 * var(--e));background:#0B0B0C;color:#D6D4CE;
  font-family:var(--body);font-size:calc(11 * var(--e));line-height:1.45;text-align:left;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none;
  box-shadow:0 0 0 1px rgba(11,11,12,.12),0 2px 6px rgba(11,11,12,.06),0 36px 64px -34px rgba(11,11,12,.6)}
.ab-app::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(244,243,240,.07),inset 0 1px 0 rgba(244,243,240,.1);pointer-events:none}
.ab-app svg{display:block;flex:none}
.d-side{flex:none;display:flex;flex-direction:column;gap:calc(2 * var(--e));width:calc(124 * var(--e));padding:calc(16 * var(--e)) calc(8 * var(--e));background:#111113;border-right:1px solid rgba(244,243,240,.09)}
.d-wm{display:flex;align-items:center;gap:calc(5 * var(--e));margin:0 calc(6 * var(--e)) calc(14 * var(--e));font:600 calc(12 * var(--e))/1 var(--display);letter-spacing:-.01em;color:#F4F3F0}
.d-wm svg{width:calc(11 * var(--e));height:calc(13 * var(--e));color:var(--o)}
.d-it{display:flex;align-items:center;gap:calc(7 * var(--e));height:calc(25 * var(--e));padding:0 calc(7 * var(--e));border-radius:calc(7 * var(--e));font-size:calc(10.5 * var(--e));font-weight:500;color:#A9A7A1;white-space:nowrap;transition:color .25s,background .25s}
.d-it svg{width:calc(12 * var(--e));height:calc(12 * var(--e));stroke:currentColor}
.d-it.on{color:#F4F3F0;background:#1C1C1F}
.d-it.hov{color:#F4F3F0;background:#1C1C1F;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09)}
.d-main{flex:1;min-width:0;display:flex;flex-direction:column;padding:calc(18 * var(--e))}
.d-head{display:flex;align-items:flex-start;justify-content:space-between;gap:calc(10 * var(--e));margin-bottom:calc(14 * var(--e))}
.d-head>div:first-child{min-width:0}
.d-h1{display:block;font:600 calc(17 * var(--e))/1.15 var(--display);letter-spacing:-.015em;color:#F4F3F0}
.d-sub{display:block;margin-top:calc(4 * var(--e));font-size:calc(9.5 * var(--e));line-height:1.45;color:#A9A7A1}
.d-sub u{text-decoration:underline;text-underline-offset:.2em;color:#D6D4CE}
.d-btns{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:calc(5 * var(--e));flex:none}
.d-btn{display:inline-flex;align-items:center;gap:calc(5 * var(--e));height:calc(23 * var(--e));padding:0 calc(10 * var(--e));border-radius:999px;background:#FF4800;color:#fff;font-size:calc(9.5 * var(--e));font-weight:600;line-height:1;white-space:nowrap;transition:transform .14s ease,background .2s}
.d-btn svg{width:calc(10 * var(--e));height:calc(10 * var(--e));stroke:currentColor}
.d-btn.g{background:#1C1C1F;color:#F4F3F0;font-weight:500;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09)}
.d-btn.druck{transform:scale(.92);background:#FF6A2A}
.d-btn.g.druck{background:#242428}
.d-box{background:#141416;border:1px solid rgba(244,243,240,.09);border-radius:calc(10 * var(--e))}
.d-kal{padding:calc(11 * var(--e)) calc(12 * var(--e)) calc(12 * var(--e));font-size:calc(10 * var(--e));line-height:1.5;color:#D6D4CE}
.d-kal b{font-weight:600;color:#F4F3F0}
.d-kal .d-btn{margin-top:calc(9 * var(--e))}
.d-tit{margin:calc(14 * var(--e)) 0 calc(7 * var(--e));font-size:calc(8.5 * var(--e));font-weight:600;line-height:1.2;letter-spacing:.06em;text-transform:uppercase;color:#F4F3F0}
.d-r{display:flex;align-items:center;gap:calc(9 * var(--e));min-height:calc(42 * var(--e));padding:calc(7 * var(--e)) calc(11 * var(--e))}
.d-box>*+.d-r,.d-box>*+.d-auf .d-r{border-top:1px solid rgba(244,243,240,.09)}  /* Linie sitzt in der Zeile, damit eingeklappte Zeilen keine Haarlinie zeigen */
.ab-k1 .d-rm span{white-space:normal}
.ab-k1 .d-head{margin-bottom:calc(26 * var(--e))}  /* Platz für den Hinweis neben „Website“, ohne den Kalender-Kasten zu verdecken */
.ab-k2 .d-r{min-height:calc(37 * var(--e));padding-top:calc(5 * var(--e));padding-bottom:calc(5 * var(--e))}
.ab-k2 .d-toast{right:auto;left:calc(18 * var(--e))}  /* links, damit Miriams Namensschild nicht am Rand abgeschnitten wird */
.d-ic{display:grid;place-items:center;width:calc(24 * var(--e));height:calc(24 * var(--e));border-radius:calc(6 * var(--e));background:#1C1C1F;color:#A9A7A1;flex:none}
.d-ic svg{width:calc(12 * var(--e));height:calc(12 * var(--e));stroke:currentColor}
.d-rm{flex:1;min-width:0}
.d-rm b{display:block;font-size:calc(10.5 * var(--e));font-weight:500;line-height:1.35;color:#F4F3F0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-rm span{display:block;margin-top:calc(1 * var(--e));font-size:calc(9 * var(--e));line-height:1.4;color:#A9A7A1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.d-ctl{display:flex;align-items:center;gap:calc(6 * var(--e));flex:none}
.d-tag{padding:calc(3 * var(--e)) calc(6 * var(--e));border-radius:999px;font-size:calc(8.5 * var(--e));font-weight:600;line-height:1;color:#FF6A2A;box-shadow:inset 0 0 0 1px rgba(255,72,0,.45)}
/* Zeilen, die dazukommen oder verschwinden: Höhe wächst weich mit */
.d-auf,.d-zu{display:grid;grid-template-rows:1fr;transition:grid-template-rows .55s var(--ease),opacity .4s ease}
.d-auf>div,.d-zu>div{min-height:0;overflow:hidden}
.d-auf:not(.da){grid-template-rows:0fr;opacity:0}
.d-zu.weg{grid-template-rows:0fr;opacity:0}
.d-zu>div>*{margin-bottom:calc(12 * var(--e))}
.d-warn{display:flex;align-items:center;justify-content:space-between;gap:calc(10 * var(--e));padding:calc(9 * var(--e)) calc(9 * var(--e)) calc(9 * var(--e)) calc(12 * var(--e));border-radius:calc(10 * var(--e));background:#141416;border:1px solid rgba(255,72,0,.4);font-size:calc(10 * var(--e));font-weight:600;color:#F4F3F0}
.d-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(7 * var(--e))}
.d-stat{padding:calc(10 * var(--e)) calc(10 * var(--e)) calc(9 * var(--e))}
.d-stat b{display:block;font:600 calc(19 * var(--e))/1.1 var(--display);letter-spacing:-.01em;color:#F4F3F0;font-variant-numeric:tabular-nums}
.d-stat span{display:block;margin-top:calc(4 * var(--e));font-size:calc(8.5 * var(--e));line-height:1.35;color:#A9A7A1}
.d-adr{display:inline-grid;vertical-align:bottom}
.d-adr>u{grid-area:1/1;display:inline-flex;align-items:center;gap:calc(4 * var(--e));transition:opacity .35s}
.d-adr i{width:calc(6 * var(--e));height:calc(6 * var(--e));border-radius:50%;background:var(--o)}
.d-adr .a2,.online .d-adr .a1{opacity:0}
.online .d-adr .a2{opacity:1}
/* Hinweis, Meldung und Cursor mit Namensschild */
.d-tip{position:absolute;left:0;top:0;z-index:3;padding:calc(6 * var(--e)) calc(9 * var(--e));border-radius:calc(7 * var(--e));background:#232327;box-shadow:0 0 0 1px rgba(244,243,240,.12),0 calc(8 * var(--e)) calc(20 * var(--e)) rgba(0,0,0,.5);
  font-size:calc(10 * var(--e));font-weight:500;line-height:1.3;color:#F4F3F0;white-space:nowrap;opacity:0;transition:opacity .3s ease}
.d-tip.zeig{opacity:1}
.d-toast{position:absolute;z-index:3;right:calc(14 * var(--e));bottom:calc(14 * var(--e));display:flex;align-items:center;gap:calc(8 * var(--e));padding:calc(8 * var(--e)) calc(11 * var(--e));border-radius:calc(9 * var(--e));background:#232327;
  box-shadow:0 0 0 1px rgba(244,243,240,.12),0 calc(10 * var(--e)) calc(24 * var(--e)) rgba(0,0,0,.55);font-size:calc(10 * var(--e));font-weight:500;line-height:1.3;color:#F4F3F0;opacity:0;transform:translateY(calc(8 * var(--e)));transition:opacity .35s ease,transform .55s var(--ease)}
.d-toast b{font-weight:600;color:#FF6A2A}
.d-toast.oben{top:calc(14 * var(--e));bottom:auto;transform:translateY(calc(-8 * var(--e)))}
.d-toast.zeig{opacity:1;transform:none}
.d-cur{position:absolute;left:0;top:0;z-index:4;pointer-events:none;opacity:0;transition:transform .75s cubic-bezier(.45,.05,.25,1),opacity .3s ease}
.d-cur.zeig{opacity:1}
.d-cur.ohne,.d-tip.ohne,.d-toast.ohne{transition:none}
.ab-app.still,.ab-app.still *{transition:none!important}  /* Zurücksetzen ohne sichtbare Rückwärts-Animation */
.ab-k3 .d-main>*{flex-shrink:0}  /* Kontaktliste darf unten aus der Karte laufen, wie in der echten App */
.d-cur svg{width:calc(15 * var(--e));height:calc(15 * var(--e))}
.d-cur span{position:absolute;left:calc(11 * var(--e));top:calc(14 * var(--e));padding:calc(3 * var(--e)) calc(7 * var(--e));border-radius:999px;background:#FF4800;color:#fff;font-size:calc(9 * var(--e));font-weight:600;line-height:1.2;white-space:nowrap;box-shadow:0 calc(4 * var(--e)) calc(10 * var(--e)) rgba(0,0,0,.35)}
.d-cur.kunde span{background:#F4F3F0;color:#0B0B0C}

@media (max-width:1000px){
  .ab-linie{display:none}
  .ab-schritte{grid-template-columns:minmax(0,1fr);gap:0}
  .ab-s{padding:0 0 56px 30px}
  .ab-s:last-child{padding-bottom:0}
  .ab-dot{display:block;position:absolute;z-index:1;left:0;top:0;width:12px;height:12px;border-radius:50%;background:#F4F3F0;box-shadow:inset 0 0 0 2px rgba(11,11,12,.2);transition:background .3s,box-shadow .3s}
  /* eine durchgehende Linie links, folgt der Scrollposition (Länge und Füllstand setzt main.js) */
  .ab-schritte::before,.ab-schritte::after{content:"";position:absolute;left:5px;top:6px;width:2px;height:var(--abl,0px);border-radius:2px}
  .ab-schritte::before{background:rgba(11,11,12,.12)}
  .ab-schritte::after{background:var(--o);transform:scaleY(var(--abm,0));transform-origin:top}
  .ab-s.an .ab-dot{background:var(--o);box-shadow:0 0 0 4px rgba(255,72,0,.16)}
  .ab-t{margin-top:24px}
}
@media (max-width:640px){
  .ab-s{padding-left:24px;padding-bottom:48px}
  .ab-t{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.ab-s::after,.d-auf,.d-zu,.d-cur,.d-tip,.d-toast,.ab-tage li,.ab-tage span{transition:none!important}}

/* Bento: leise Links auf die Funktions-Unterseiten */
.bx-t .bx-mehr{display:flex;width:fit-content;margin-top:16px;font-size:15px;color:var(--h)}
.bx-web .bx-t .bx-mehr{font-size:16px}
.bx-alle{margin-top:28px;font-size:15px;color:var(--h)}

/* ---------- 07 Preise (dunkel): zwei Pakete, Umschalter 12 / 6 Monate ---------- */
#preise{overflow:hidden;overflow:clip}
#preise .sec-head{margin-bottom:40px}
.pz-schalter{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:#141416;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09)}
.pz-schalter button{display:inline-flex;align-items:center;gap:10px;padding:11px 20px;border-radius:999px;font-size:15px;font-weight:500;line-height:1.2;color:var(--muted);transition:background .25s,color .25s}
.pz-schalter button:hover{color:var(--h)}
.pz-schalter [aria-checked=true]{background:#F4F3F0;color:#0B0B0C}
.pz-schalter button:focus-visible{outline:2px solid var(--h);outline-offset:2px}
.pz-spar{font-size:13px;font-weight:600;color:var(--o2);transition:color .25s}
.pz-schalter [aria-checked=true] .pz-spar{color:#C43400}
.pz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:24px}
.pz-k{position:relative;display:flex;flex-direction:column;padding:40px;border-radius:24px;overflow:hidden;isolation:isolate;
  background:linear-gradient(180deg,#161618 0%,#0D0D0F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06)}
.pz-top{box-shadow:inset 0 1px 0 rgba(255,190,150,.22),0 0 0 1px rgba(255,72,0,.42),0 40px 90px -50px rgba(255,72,0,.55)}
.pz-top::before{content:"";position:absolute;left:50%;top:-55%;width:120%;height:95%;transform:translateX(-50%);z-index:-1;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,72,0,.2) 0%,rgba(255,72,0,.12) 30%,rgba(255,72,0,.05) 60%,rgba(255,72,0,0) 100%)}
.pz-badge{position:absolute;top:40px;right:40px;padding:7px 13px;border-radius:999px;background:var(--o);color:#fff;font-size:13px;font-weight:600;line-height:1;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -8px rgba(255,72,0,.7)}
.pz-name{font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.015em;color:var(--h)}
.pz-satz{max-width:30em;min-height:3.1em;margin-top:10px;font-size:17px;line-height:1.55;color:var(--muted);text-wrap:balance}  /* immer zwei Zeilen hoch, damit die Preise beider Karten auf einer Linie stehen */
.pz-preis{display:flex;align-items:baseline;gap:12px;margin-top:32px}
.pz-preis b{font-family:var(--display);font-weight:600;font-size:clamp(52px,5vw,72px);line-height:1;letter-spacing:-.035em;color:var(--h);font-variant-numeric:tabular-nums lining-nums}
.pz-preis span{font-size:17px;color:var(--muted)}
.pz-lz{margin-top:10px;font-size:14px;color:var(--faint)}
.pz-preis b,.pz-lz{transition:opacity .16s ease,transform .16s ease}
.pz-weg{opacity:0;transform:translateY(-6px)}
.pz-liste{display:grid;gap:14px;margin-top:32px;padding-top:32px;border-top:1px solid rgba(244,243,240,.08);list-style:none}
.pz-liste li{display:flex;align-items:flex-start;gap:12px;font-size:16.5px;line-height:1.5;color:var(--body-c)}
.pz-liste b{font-weight:600;color:var(--h)}
.pz-h{flex:none;width:20px;height:20px;margin-top:2px;fill:none;stroke:var(--o2);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pz-cta{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:auto;padding-top:40px}
.pz-hint{font-size:14px;color:var(--muted)}
/* zweiter Knopf: dunkel, gleiche Form, ohne Orange-Licht */
.btn-2{background:#1C1C1F;text-shadow:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(244,243,240,.12)}
.btn-2::before,.btn-2::after{display:none}
.btn-2 .arr-c{background:rgba(244,243,240,.08)}
.btn-2:hover{background:#242428;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 0 0 1px rgba(244,243,240,.2)}
/* Kachel für alle, die erst reden wollen (Robert 09.11.2026) */
.pz-frage{display:flex;align-items:center;justify-content:space-between;gap:24px 40px;margin-top:16px;padding:32px 40px;border-radius:24px;background:linear-gradient(180deg,#161618 0%,#0D0D0F 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06)}
.pz-frage p{max-width:24em;font-family:var(--display);font-weight:600;font-size:clamp(21px,1.9vw,26px);line-height:1.25;letter-spacing:-.015em;color:var(--h);text-wrap:balance}
.pz-frage .btn{flex:none}
.pz-extra{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 32px;margin-top:16px;padding:26px 40px 28px;border-radius:24px;box-shadow:inset 0 0 0 1px rgba(244,243,240,.08)}
.pz-extra .pz-extra-t{grid-column:1/-1}  /* drei Zusätze: Überschrift oben, darunter drei gleiche Spalten */
.pz-extra-t{font-size:16px;font-weight:600;color:var(--h)}
.pz-zus{display:flex;align-items:flex-start;gap:12px}
.pz-zus .ic{font-size:22px;margin-top:1px;color:var(--o2)}
.pz-zus p{font-size:15.5px;line-height:1.45;color:var(--muted)}
.pz-zus b{font-weight:600;color:var(--h)}
.pz-plus{color:var(--body-c)}
.pz-zx{display:block;text-wrap:balance}
.pz-klein{max-width:52em;margin-top:24px;font-size:14px;line-height:1.55;color:var(--faint)}
@media (max-width:1000px){
  .pz{grid-template-columns:minmax(0,1fr)}
  .pz-extra{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pz-schalter{display:flex;width:100%}
  .pz-schalter button{flex:1;flex-direction:column;gap:2px;padding:10px 12px}
  .pz-spar{font-size:12px}
  .pz-im{display:none}
  .pz-schalter button{justify-content:center}
  .pz-k{padding:28px 22px 26px;border-radius:20px}
  .pz-badge{position:static;align-self:flex-start;margin-bottom:16px}
  .pz-name{font-size:25px}
  .pz-satz{font-size:16px;min-height:0}
  .pz-preis{margin-top:24px}
  .pz-liste{margin-top:24px;padding-top:24px}
  .pz-liste li{font-size:16px}
  .pz-cta{padding-top:32px;align-items:stretch}
  .pz-cta .btn{width:100%}
  .pz-hint{text-align:center}
  .pz-extra{padding:22px;border-radius:20px}
  .pz-frage{flex-direction:column;align-items:stretch;padding:26px 22px;border-radius:20px}
  .pz-frage .btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.pz-preis b,.pz-lz{transition:none}}

/* ---------- 08 FAQ (hell, von der alten Premiumseite): Akkordeon in zwei Spalten, Karten mit Licht von oben ---------- */
.faq{--ink:#0B0B0C;position:relative;isolation:isolate;overflow:hidden;overflow:clip}
.faq::before,.faq::after{content:"";position:absolute;left:0;right:0;top:0;height:820px;pointer-events:none;z-index:-1}
.faq::before{background:radial-gradient(64% 74% at 50% 0,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.883) 15%,rgba(255,255,255,0.722) 30%,rgba(255,255,255,0.513) 45%,rgba(255,255,255,0.323) 60%,rgba(255,255,255,0.162) 75%,rgba(255,255,255,0.057) 88%,rgba(255,255,255,0.0) 100%)}
.faq::after{background-image:radial-gradient(circle,rgba(11,11,12,.12) .9px,transparent 1.5px);background-size:7px 7px;-webkit-mask-image:radial-gradient(56% 62% at 50% 0,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.16) 72%,transparent 100%);mask-image:radial-gradient(56% 62% at 50% 0,#000 0%,rgba(0,0,0,.55) 40%,rgba(0,0,0,.16) 72%,transparent 100%)}
.faq .sec-head{margin-bottom:56px}
.faq-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;align-items:start}
.fq-col{display:flex;flex-direction:column;gap:14px;min-width:0}
.fq{position:relative;border-radius:22px;background:linear-gradient(180deg,#FEFEFD 0%,#F8F7F4 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(11,11,12,.03),0 0 0 1px rgba(11,11,12,.07),0 1px 2px rgba(11,11,12,.05),0 14px 28px -20px rgba(11,11,12,.2);transition:background .35s ease,box-shadow .45s var(--ease),transform .45s var(--ease)}
.fq-q{width:100%;min-height:98px;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:24px 26px 24px 28px;border-radius:22px;text-align:left;
  font-family:var(--display);font-weight:600;font-size:19px;line-height:1.3;letter-spacing:-.01em;color:var(--ink)}
.fq-t{min-width:0;text-wrap:pretty}
.fq-q:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.fq-i{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:linear-gradient(180deg,#FFFFFF,#ECEBE7);
  box-shadow:inset 0 0 0 1px rgba(11,11,12,.1),inset 0 1px 0 #fff,0 3px 6px -3px rgba(11,11,12,.28);transition:transform .55s var(--ease),background .3s ease,box-shadow .3s ease}
.fq-i::before,.fq-i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:2px;background:var(--ink);transition:transform .45s var(--ease),background .3s ease}
.fq-i::after{transform:rotate(90deg)}
@media (hover:hover){
  .fq:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(11,11,12,.03),0 0 0 1px rgba(11,11,12,.09),0 2px 4px rgba(11,11,12,.05),0 22px 38px -22px rgba(11,11,12,.3)}
  .fq:hover .fq-i{transform:rotate(90deg)}
}
.fq.open{background:#fff;transform:translateY(-2px);box-shadow:inset 0 1px 0 #fff,0 0 0 1px rgba(11,11,12,.06),0 2px 4px rgba(11,11,12,.04),0 30px 54px -28px rgba(11,11,12,.34)}
.fq.open .fq-i{transform:rotate(180deg);background:linear-gradient(180deg,#2C2C30,#0B0B0C);box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 16px -8px rgba(11,11,12,.6)}
.fq.open .fq-i::before,.fq.open .fq-i::after{background:#F4F3F0}
.fq.open .fq-i::after{transform:rotate(0)}
.fq-a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.fq.open .fq-a{grid-template-rows:1fr}
.fq-a>div{overflow:hidden}
.fq-a p{padding:0 82px 28px 28px;font-size:17px;line-height:1.6;color:#3B3A37;opacity:0;transform:translateY(-6px);transition:opacity .3s ease,transform .45s var(--ease);text-wrap:pretty}
.fq.open .fq-a p{opacity:1;transform:none;transition-delay:.08s}
@media (max-width:1000px){
  .faq::before{background:radial-gradient(110% 60% at 50% 0,rgba(255,255,255,0.95) 0%,rgba(255,255,255,0.883) 15%,rgba(255,255,255,0.722) 30%,rgba(255,255,255,0.513) 45%,rgba(255,255,255,0.323) 60%,rgba(255,255,255,0.162) 75%,rgba(255,255,255,0.057) 88%,rgba(255,255,255,0.0) 100%)}
  .faq-list{display:flex;flex-direction:column;gap:10px}
  .fq-col{display:contents}
  .fq{order:var(--o)}
  .fq-q{min-height:0}
}
@media (max-width:640px){
  .faq .sec-head{margin-bottom:36px}
  .fq,.fq-q{border-radius:18px}
  .fq-q{padding:18px 18px 18px 20px;gap:14px;font-size:17px}
  .fq-i{width:30px;height:30px}
  .fq-a p{padding:0 20px 22px;font-size:16px}
}
@media (prefers-reduced-motion:reduce){.fq,.fq-i,.fq-a,.fq-a p{transition:none!important}}

/* ---------- 09 Abschluss (von der alten Premiumseite): Wand echter Kundenseiten, in der Mitte leuchtet dein freier Platz ---------- */
.final{position:relative;padding:0 0 120px;text-align:center;overflow:hidden;overflow:clip}
.fw{--tw:clamp(300px,19vw,430px);--gap:20px;--th:calc(var(--tw) * .625);position:relative;height:calc(var(--th) * 2.75 + var(--gap) * 2);overflow:hidden;isolation:isolate}
.fw-stage{position:absolute;left:50%;top:calc(var(--th) * -.32);width:calc(var(--tw) * 9 + var(--gap) * 8);transform:translateX(-50%);perspective:1500px}
.fw-grid{display:grid;grid-template-columns:repeat(9,var(--tw));grid-auto-rows:var(--th);gap:var(--gap);transform:rotateX(14deg);transform-origin:50% 60%}
.fw-t{display:block;background-size:cover;background-position:top center;border-radius:10px;box-shadow:0 0 0 1px rgba(255,255,255,.07);opacity:var(--o)}
.fw::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,#0B0B0C 0%,rgba(11,11,12,0) 20%,rgba(11,11,12,0) 64%,rgba(11,11,12,.8) 86%,#0B0B0C 100%),radial-gradient(60% 100% at 50% 42%,rgba(11,11,12,0) 38%,rgba(11,11,12,.5) 66%,#0B0B0C 100%)}
.fw::before{content:"";position:absolute;left:0;right:0;top:0;height:24%;z-index:5;pointer-events:none;background:linear-gradient(180deg,#0B0B0C 0%,rgba(11,11,12,.72) 40%,rgba(11,11,12,.25) 75%,rgba(11,11,12,0) 100%)}
.fw-light,.fw-dots{position:absolute;pointer-events:none;z-index:3}
.fw-light{left:50%;top:-12%;width:1200px;height:118%;transform:translateX(-50%);background:radial-gradient(42% 64% at 50% 0,rgba(255,244,232,0.28) 0%,rgba(255,244,232,0.26) 15%,rgba(255,244,232,0.213) 30%,rgba(255,244,232,0.151) 45%,rgba(255,244,232,0.095) 60%,rgba(255,244,232,0.048) 75%,rgba(255,244,232,0.017) 88%,rgba(255,244,232,0.0) 100%)}
.fw-dots{inset:0;background-image:var(--wuerfel);background-size:7px 7px;opacity:.1;-webkit-mask-image:radial-gradient(30% 62% at 50% 0,#000 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.16) 74%,transparent 100%);mask-image:radial-gradient(30% 62% at 50% 0,#000 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.16) 74%,transparent 100%)}
.fw-slot{position:relative;z-index:4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;border-radius:12px;background:radial-gradient(120% 90% at 50% 0,rgba(255,244,232,.14),rgba(255,244,232,.03) 60%,rgba(255,255,255,.01)),#101012;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14),inset 0 1px 0 rgba(255,255,255,.42),0 0 0 1px rgba(0,0,0,.6),0 0 80px -14px rgba(255,236,214,.42),0 40px 70px -30px rgba(0,0,0,.95)}
.fw-slot::before{content:"";position:absolute;inset:9px;border-radius:7px;border:1.5px dashed rgba(244,243,240,.3)}
.fw-slot::after{content:"";position:absolute;left:14%;right:14%;top:-1px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(255,250,244,0),rgba(255,250,244,.95),rgba(255,250,244,0));box-shadow:0 0 18px 2px rgba(255,240,224,.4)}
.fw-led{display:block}
.fw-led svg{display:block;height:40px;width:auto;filter:drop-shadow(0 0 6px rgba(255,246,236,.75)) drop-shadow(0 0 18px rgba(255,236,214,.35))}
.fw-slot>b{font-family:var(--display);font-weight:600;font-size:19px;letter-spacing:-.01em;color:#F4F3F0}
.fw-chip{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:9px;white-space:nowrap;padding:8px 15px 8px 12px;border-radius:999px;font-size:14px;color:#BDBBB5;background:rgba(22,22,24,.78);
  -webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.2),0 14px 30px -12px rgba(0,0,0,.9)}
.fw-chip i{flex:none;width:7px;height:7px;border-radius:50%;background:#F4F3F0;box-shadow:0 0 0 3px rgba(244,243,240,.13),0 0 10px rgba(255,255,255,.75)}
.fw-chip em{font-style:normal;font-weight:600;color:#F4F3F0}
.final-in{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;margin-top:-24px}
.final-h{max-width:15.5em;margin:0 auto}
.final .lead{margin-left:auto;margin-right:auto}
.final-cta{display:flex;flex-direction:column;align-items:center;gap:14px;margin-top:40px}
.final-cta p{font-size:14.5px;color:var(--muted)}
.ps{max-width:36em;margin-top:72px;font-size:16px;line-height:1.6;color:var(--muted)}
/* Auftritt beim Reinscrollen: Wand baut sich von innen nach außen, dann Licht, Rahmen, Würfel, Name, Termin */
.js .fw-t{opacity:0;transform:translateY(14px) scale(.98);transition:opacity .9s ease var(--d),transform 1.1s var(--ease) var(--d)}
.js .fw.live .fw-t{opacity:var(--o);transform:none}
.js .fw-light{opacity:0;transition:opacity 1.6s ease .6s}
.js .fw-dots{opacity:0;transition:opacity 1.6s ease .9s}
.js .fw.live .fw-light{opacity:1}
.js .fw.live .fw-dots{opacity:.1}
.js .fw-slot{opacity:0;transform:scale(.95);transition:opacity .8s ease .45s,transform 1.1s var(--ease) .45s}
.js .fw-slot::before{opacity:0;transition:opacity .6s ease 1.05s}
.js .fw-led,.js .fw-slot>b{opacity:0;transform:translateY(6px);transition:opacity .6s ease 1.3s,transform .8s var(--ease) 1.3s}
.js .fw-slot>b{transition-delay:1.45s}
.js .fw-chip{opacity:0;transform:translate(-50%,8px);transition:opacity .6s ease 1.8s,transform .8s var(--ease) 1.8s}
.js .fw.live .fw-slot,.js .fw.live .fw-led,.js .fw.live .fw-slot>b{opacity:1;transform:none}
.js .fw.live .fw-slot::before{opacity:1}
.js .fw.live .fw-chip{opacity:1;transform:translateX(-50%)}
@media (max-width:1000px){.fw{--tw:236px;--gap:16px}.fw-light{width:980px}}
@media (max-width:640px){
  .fw{--tw:168px;--gap:10px}
  .fw-t{border-radius:7px}
  .fw-slot{gap:6px;border-radius:9px}
  .fw-slot::before{inset:6px;border-radius:5px;border-width:1.2px}
  .fw-led svg{height:24px}
  .fw-slot>b{font-size:13.5px}
  .fw-chip{top:calc(100% + 10px);gap:7px;padding:6px 11px 6px 10px;font-size:12.5px}
  .fw-light{width:640px}
  .fw-dots{background-size:5px 5px;-webkit-mask-image:radial-gradient(48% 62% at 50% 0,#000 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.16) 74%,transparent 100%);mask-image:radial-gradient(48% 62% at 50% 0,#000 0%,rgba(0,0,0,.55) 42%,rgba(0,0,0,.16) 74%,transparent 100%)}
  .final{padding-bottom:88px}
  .final-in{margin-top:-8px}
  .final-cta{align-self:stretch}
  .final-cta .btn{width:100%}
  .ps{margin-top:56px}
}

/* ---------- Footer: clean, drei Register, Riesen-Schriftzug aus Würfel-Punkten, von oben angeleuchtet ---------- */
.ft{position:relative;padding:96px 0 0;overflow:hidden;background:var(--n1)}
.ft::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.13) 30%,rgba(255,255,255,.13) 70%,rgba(255,255,255,0))}
.ft-grid{display:grid;grid-template-columns:minmax(0,4.2fr) repeat(4,minmax(0,2.2fr));gap:40px}
.ft-marke .logo{display:inline-flex;color:var(--h)}
.ft-marke .logo svg{height:26px;width:auto}
.ft-marke p{max-width:19em;margin-top:18px;font-size:16px;line-height:1.55;color:var(--muted)}
.ft-reg{display:flex;flex-direction:column;align-items:flex-start;gap:12px}
.ft-t{margin-bottom:4px;font-size:15px;font-weight:600;color:var(--h)}
.ft-reg a{font-size:15px;line-height:1.4;color:var(--muted);text-decoration:none;transition:color .2s ease}
.ft-reg a:hover{color:var(--h)}
.ft-reg a:focus-visible{outline:2px solid var(--h);outline-offset:3px;border-radius:4px}
.ft-unten{display:flex;justify-content:space-between;gap:12px 24px;margin-top:72px;padding-top:24px;border-top:1px solid rgba(244,243,240,.08);font-size:14px;color:var(--faint)}
.ft-word{position:relative;width:calc(100% - var(--pad) * 2);max-width:calc(var(--wrap) - var(--pad) * 2);margin:64px auto -2px;aspect-ratio:151.4/20.6}
.ft-glow{position:absolute;left:50%;top:-90%;width:120%;height:260%;transform:translateX(-50%);pointer-events:none;background:radial-gradient(46% 34% at 50% 38%,rgba(255,244,232,0.1) 0%,rgba(255,244,232,0.093) 15%,rgba(255,244,232,0.076) 30%,rgba(255,244,232,0.054) 45%,rgba(255,244,232,0.034) 60%,rgba(255,244,232,0.017) 75%,rgba(255,244,232,0.006) 88%,rgba(255,244,232,0.0) 100%)}
.ft-fill{position:absolute;left:0;right:0;top:0;aspect-ratio:151.4/20.6;overflow:hidden;-webkit-mask:var(--wort) top center/100% auto no-repeat;mask:var(--wort) top center/100% auto no-repeat;background-color:rgba(255,255,255,.03);
  background-image:linear-gradient(180deg,rgba(11,11,12,0) 0%,rgba(11,11,12,.22) 35%,rgba(11,11,12,.5) 70%,rgba(11,11,12,.7) 100%),var(--wuerfel);background-size:100% 100%,7px 7px}
.ft-sweep{position:absolute;top:0;bottom:0;left:-45%;width:45%;background:linear-gradient(100deg,rgba(255,255,255,0),rgba(255,250,244,.5),rgba(255,255,255,0))}
.ft-word.live .ft-sweep{animation:ftsw 2.6s cubic-bezier(.35,.1,.6,.95) .3s both}
@keyframes ftsw{to{transform:translateX(330%)}}
@media (max-width:1000px){.ft-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:40px 28px}.ft-marke{grid-column:1/-1}}
@media (max-width:640px){
  .ft{padding-top:64px}
  .ft-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:36px 20px}
  .ft-unten{flex-direction:column;margin-top:48px}
  .ft-word{margin-top:44px}
  .ft-fill{background-size:100% 100%,3.4px 3.4px}
}
@media (prefers-reduced-motion:reduce){.fw-t,.fw-light,.fw-dots,.fw-slot,.fw-slot::before,.fw-led,.fw-slot>b,.fw-chip{transition:none!important}.ft-sweep{display:none}}

/* ---------- Portfolio /portfolio (Robert 09.11.2026): Look der Startseite, Karten mit Vorher/Nachher-Regler ---------- */
.nav-links a[aria-current=page]{color:var(--h)}
.pf-kopf{position:relative;padding:184px 0 72px;overflow:hidden;overflow:clip}
.pf-licht{position:absolute;left:50%;top:-260px;width:1400px;height:760px;transform:translateX(-50%);pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,rgba(255,72,0,.16) 0%,rgba(255,72,0,.1) 30%,rgba(255,72,0,.04) 60%,rgba(255,72,0,0) 100%)}
.pf-kopf-in{position:relative;display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:end;gap:48px}
.pf-h{font-family:var(--display);font-weight:500;font-size:clamp(46px,6.2vw,96px);line-height:calc(.96em + 4px);letter-spacing:-.036em;color:var(--h);text-wrap:balance}
.pf-intro p{font-size:clamp(17px,1.35vw,19px);line-height:1.55;color:var(--muted);text-wrap:pretty}
.pf-legende{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.pf-s{display:inline-flex;align-items:center;padding:6px 12px;border-radius:999px;font-size:13px;font-weight:600;line-height:1;white-space:nowrap}
.pf-s-kunde{background:var(--o);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.3)}
.pf-s-show{color:var(--h);box-shadow:inset 0 0 0 1px rgba(244,243,240,.4)}
.pf-s-erf{color:var(--muted);outline:1px dashed rgba(244,243,240,.4);outline-offset:-1px}
.pf-s-kat{color:var(--muted);background:rgba(244,243,240,.06)}
.pf-liste{padding:8px 0 120px}
.pf-filter{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:28px}
.pf-filter-t{margin-right:8px;font-size:15px;color:var(--muted)}
.pf-filter button{display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border-radius:999px;font-size:15px;font-weight:500;color:var(--muted);background:#141416;box-shadow:inset 0 0 0 1px rgba(244,243,240,.08);transition:background .25s,color .25s}
.pf-filter button i{font-style:normal;font-size:12.5px;color:var(--faint);font-variant-numeric:tabular-nums}
.pf-filter button:hover{color:var(--h)}
.pf-filter button[aria-pressed=true]{background:#F4F3F0;color:#0B0B0C}
.pf-filter button[aria-pressed=true] i{color:#5F5D58}
.pf-filter button:focus-visible{outline:2px solid var(--h);outline-offset:2px}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.pf-k{display:flex;flex-direction:column;padding:16px;border-radius:24px;overflow:hidden;background:linear-gradient(180deg,#161618 0%,#0D0D0F 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(255,255,255,.06)}
.pf-k[hidden]{display:none}
.pf-bild{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;background:#0B0B0C;box-shadow:0 0 0 1px rgba(255,255,255,.08);isolation:isolate}
.pf-bild img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center;user-select:none;-webkit-user-drag:none;pointer-events:none}
.pf-vor{position:absolute;inset:0;z-index:1;clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.pf-vn{cursor:ew-resize;touch-action:pan-y}
.pf-tag{position:absolute;z-index:3;top:12px;padding:5px 10px;border-radius:999px;background:rgba(11,11,12,.78);font-size:12px;font-weight:600;line-height:1.2;color:#F4F3F0;pointer-events:none}
.pf-tag-v{left:12px}.pf-tag-n{right:12px}
.pf-griff{position:absolute;z-index:2;top:0;bottom:0;left:var(--pos);width:44px;margin-left:-22px;display:grid;place-items:center;cursor:ew-resize;touch-action:none}
.pf-griff::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:#F4F3F0;box-shadow:0 0 12px rgba(0,0,0,.45)}
.pf-griff span{position:relative;width:38px;height:38px;border-radius:50%;background:var(--o);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),0 8px 20px -6px rgba(0,0,0,.6),0 0 0 4px rgba(255,72,0,.22)}
.pf-griff span::before,.pf-griff span::after{content:"";position:absolute;top:50%;width:7px;height:7px;margin-top:-3.5px;border-top:2px solid #fff;border-left:2px solid #fff}
.pf-griff span::before{left:10px;transform:rotate(-45deg)}
.pf-griff span::after{right:10px;transform:rotate(135deg)}
.pf-griff:focus-visible{outline:none}
.pf-griff:focus-visible span{box-shadow:0 0 0 3px #F4F3F0,0 0 0 6px rgba(255,72,0,.5)}
.pf-text{display:flex;flex-direction:column;align-items:flex-start;flex:1;padding:24px 12px 12px}
.pf-schilder{display:flex;flex-wrap:wrap;gap:6px}
.pf-name{margin-top:18px;font-family:var(--display);font-weight:600;font-size:28px;line-height:1.15;letter-spacing:-.015em;color:var(--h)}
.pf-zeile{margin-top:6px;font-size:15px;color:var(--faint)}
.pf-satz{max-width:36em;margin-top:14px;font-size:17px;line-height:1.55;color:var(--body-c);text-wrap:pretty}
.pf-steck{display:grid;gap:8px;width:100%;margin:20px 0 0;padding-top:18px;border-top:1px solid rgba(244,243,240,.08)}
.pf-steck div{display:grid;grid-template-columns:52px minmax(0,1fr);gap:12px;font-size:14.5px;line-height:1.45}
.pf-steck dt{color:var(--faint)}
.pf-steck dd{margin:0;color:var(--muted)}
.pf-link{margin-top:auto;padding-top:22px;color:var(--h);font-size:15.5px}
.pf-link{border-bottom:0;padding-bottom:0}
.pf-link svg{transition:transform .25s var(--ease)}
.pf-link:hover svg{transform:translateX(3px)}
.pf-schluss{position:relative;padding:40px 0 140px;text-align:center}
.pf-schluss-in{display:flex;flex-direction:column;align-items:center}
.pf-schluss .h2{max-width:14em;margin:0 auto}
.pf-schluss .lead{margin-left:auto;margin-right:auto}
@media (max-width:1000px){
  .pf-kopf{padding-top:148px}
  .pf-kopf-in{grid-template-columns:minmax(0,1fr);gap:24px}
  .pf-grid{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .pf-kopf{padding:124px 0 48px}
  .pf-h{font-size:clamp(40px,11vw,52px)}
  .pf-filter{flex-wrap:nowrap;overflow-x:auto;margin:0 calc(var(--pad) * -1) 22px;padding:2px var(--pad);scrollbar-width:none}
  .pf-filter::-webkit-scrollbar{display:none}
  .pf-filter button{flex:none;padding:9px 14px}
  .pf-k{padding:10px;border-radius:20px}
  .pf-bild{border-radius:12px}
  .pf-tag{top:8px;font-size:11.5px}.pf-tag-v{left:8px}.pf-tag-n{right:8px}
  .pf-griff span{width:34px;height:34px}
  .pf-text{padding:20px 8px 10px}
  .pf-name{font-size:24px}
  .pf-satz{font-size:16px}
  .pf-schluss{padding-bottom:96px}
  .pf-schluss .final-cta{align-self:stretch}
  .pf-schluss .final-cta .btn{width:100%}
}

/* Platzhalter für die nächste Sektion (nur Vorschau) */
.weiter{padding:120px 0;text-align:center;color:var(--faint);font-size:15px;border-top:1px solid var(--line)}

/* ---------- Tablet und Handy ---------- */
@media (max-width:1000px){
  .nav-in{grid-template-columns:1fr auto auto}
  .nav-links{display:none}
  .nav-burger{position:relative;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:rgba(24,24,27,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),inset 0 1px 0 rgba(255,255,255,.14),0 10px 24px -12px rgba(0,0,0,.8);-webkit-tap-highlight-color:transparent}
  .nav-burger i{position:absolute;left:50%;top:50%;width:18px;height:1.8px;margin:-.9px 0 0 -9px;border-radius:2px;background:var(--h);transition:transform .45s var(--ease)}
  .nav-burger i:first-child{transform:translateY(-3.5px)}
  .nav-burger i:last-child{transform:translateY(3.5px)}
  .nav.open .nav-burger i:first-child{transform:rotate(45deg)}
  .nav.open .nav-burger i:last-child{transform:rotate(-45deg)}
  .nav.solid .nav-in{padding-right:10px}
  .nav.open .nav-in{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
  .mnav{display:block;position:fixed;inset:0;z-index:49;background:rgba(11,11,12,.72);-webkit-backdrop-filter:blur(32px) saturate(1.35);backdrop-filter:blur(32px) saturate(1.35);opacity:0;visibility:hidden;transition:opacity .35s ease,visibility 0s linear .35s;overscroll-behavior:contain}
  .mnav.open{opacity:1;visibility:visible;transition:opacity .35s ease}
  .mnav-in{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:32px;height:100%;overflow-y:auto;padding-top:calc(104px + env(safe-area-inset-top));padding-bottom:calc(24px + env(safe-area-inset-bottom))}
  .mnav-links{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.1)}
  .mnav-links>a,.mnav-links summary{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:18px 2px;border-bottom:1px solid rgba(255,255,255,.1);font-family:var(--display);font-weight:500;font-size:clamp(28px,8vw,38px);line-height:1.1;letter-spacing:-.025em;color:var(--h);text-decoration:none;list-style:none;cursor:pointer;opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .7s var(--ease);transition-delay:calc(.07s + var(--i) * .06s);-webkit-tap-highlight-color:transparent}
  .mnav-links summary::-webkit-details-marker{display:none}
  .mnav.open .mnav-links>a,.mnav.open .mnav-links summary{opacity:1;transform:none}
  .mnav-links .arr{flex:none;width:24px;height:24px;stroke:var(--muted);stroke-width:1.8}
  .mnav-links .chev{flex:none;width:22px;height:22px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease)}
  .mnav-links details[open] .chev{transform:rotate(180deg)}
  .mnav-fn{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:12px 0 16px;border-bottom:1px solid rgba(255,255,255,.1)}
  .mnav-fn a{display:flex;align-items:center;gap:10px;padding:10px 6px;font-size:15.5px;font-weight:500;color:var(--body-c);text-decoration:none}
  .mnav-fn .ic{font-size:18px;color:var(--o2)}
  .mnav-foot{display:flex;flex-direction:column;align-items:stretch;gap:12px;opacity:0;transform:translateY(16px);transition:opacity .45s ease .3s,transform .7s var(--ease) .3s}
  .mnav.open .mnav-foot{opacity:1;transform:none}
  .mnav-foot .btn{width:100%}
  .mnav-foot p{text-align:center;font-size:14.5px;color:var(--muted)}
  .menu-open{overflow:hidden}
}
@media (max-width:640px){
  :root{--pad:20px}
  .nav-in{grid-template-columns:1fr auto;height:72px}
  .nav-cta{display:none}
  .logo svg{height:23px}
  .hero{padding-top:118px;justify-content:flex-start}
  .hero-pill{margin-bottom:24px;font-size:13.5px;padding:7px 14px 7px 8px;text-align:left}
  .hero-pill .mark{width:22px;height:22px}
  .hero-h{font-size:clamp(33px,9.6vw,46px);line-height:1.04;letter-spacing:-.04em}
  .hero-sub{margin-top:22px;font-size:17px}
  .hero-cta{width:100%;margin-top:32px}
  .hero-cta .btn{width:100%}
  .hero-hint{font-size:14.5px}
  .hero-band{margin-top:56px}
  .band-item{padding:12px 18px;font-size:15px}
  .band-item .ic{font-size:19px}
  .band-glas{padding:4px 0;--fade:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.3) 5%,rgba(0,0,0,.75) 10%,#000 15%,#000 85%,rgba(0,0,0,.75) 90%,rgba(0,0,0,.3) 95%,transparent 100%)}
  .band-item::before{height:18px;margin-top:-9px}
  .hero-glow{background:radial-gradient(ellipse 90% 40% at 50% -4%,rgba(255,72,0,.28) 0%,rgba(255,72,0,.12) 40%,rgba(255,72,0,0) 76%)}
  .hero-dots{background:radial-gradient(ellipse 80% 48% at 50% 0%,#FFC7A6 0%,#FF7A3D 22%,rgba(255,72,0,.5) 46%,rgba(255,72,0,.1) 70%,rgba(255,72,0,0) 86%)}
}
@media (prefers-reduced-motion:reduce){.btn::before{animation:none}.nav-ind,.nav-burger i,.mnav,.mnav-links>a,.mnav-links summary,.mnav-foot,.dd{transition:none!important}}

/* ---------- Funktionsseiten /funktionen/* (Robert 09.11.2026): Header mit Zahlen, So läuft's, Was drin ist, Apps, Fragen, Türen, Abschluss ---------- */
/* {n} = n Einheiten der Kartenbreite, wird beim Einbau zu calc(n * var(--e)) */
.fn-hero{position:relative;isolation:isolate;padding:176px 0 120px;overflow:hidden;overflow:clip}
.fn-hero-licht{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 52% at 74% 30%,rgba(255,72,0,.16) 0%,rgba(255,72,0,.07) 40%,rgba(255,72,0,0) 72%),radial-gradient(60% 40% at 30% -8%,rgba(255,72,0,.1) 0%,rgba(255,72,0,0) 70%)}
.fn-hero-licht::after{content:"";position:absolute;left:44%;right:0;top:0;height:86%;opacity:.5;
  background:radial-gradient(ellipse 52% 56% at 62% 34%,#FF7A3D 0%,rgba(255,72,0,.5) 34%,rgba(255,72,0,.1) 64%,rgba(255,72,0,0) 82%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E") 0 0/6px 6px repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='6'%3E%3Crect x='2' y='2' width='2' height='2'/%3E%3C/svg%3E") 0 0/6px 6px repeat}
.fn-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(11,11,12,0),var(--n1))}
.fn-hero-in{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:64px;align-items:center}
/* Pfad über der Headline (Robert 09.11.2026: „der Verlauf als Eyebrow … Funktionen und dann Dashboard“), gleiche Glas-Pille wie über der Startseiten-Headline */
.fn-pfad{display:inline-flex;align-items:center;gap:8px;margin:0 0 26px;padding:8px 16px;border-radius:999px;font-size:15px;font-weight:500;line-height:1.3;color:#E4E2DC;background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);box-shadow:var(--glas-kante),0 0 0 1px rgba(255,255,255,.07)}
.fn-pfad a{color:var(--muted);text-decoration:none;transition:color .2s ease}
.fn-pfad a:hover{color:var(--h)}
.fn-pfad a:focus-visible{outline:2px solid var(--h);outline-offset:3px;border-radius:4px}
.fn-pfad svg{width:14px;height:14px;fill:none;stroke:var(--faint);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fn-h{max-width:13em;font-family:var(--display);font-weight:500;font-size:clamp(40px,3.75vw,56px);line-height:1.02;letter-spacing:-.034em;color:var(--h);text-wrap:balance}
.nw{white-space:nowrap}
.fn-sub{max-width:34em;margin-top:26px;font-size:clamp(17px,1.25vw,19px);line-height:1.58;color:var(--muted);text-wrap:pretty}
.fn-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:38px}
.fn-cta p{font-size:14.5px;line-height:1.45;color:var(--muted)}
.fn-hero-v{position:relative;container-type:inline-size}

/* Statistik-Karte: nachgebaut aus dem echten Dashboard (dash.css, Weg zum Termin) */
.fn-app{--e:calc(100cqw / 500);position:relative;overflow:hidden;font-family:var(--body);font-size:calc(11 * var(--e));line-height:1.45;text-align:left;-webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
.fn-stat{border-radius:calc(16 * var(--e));padding:calc(20 * var(--e)) calc(20 * var(--e)) calc(18 * var(--e));background:#0B0B0C;color:#D6D4CE;
  box-shadow:0 0 0 1px rgba(244,243,240,.1),inset 0 1px 0 rgba(244,243,240,.1),0 50px 90px -40px rgba(0,0,0,.85),0 0 120px -40px rgba(255,72,0,.45)}
.fn-stat .d-sub{max-width:calc(250 * var(--e))}
.fn-pills{display:inline-flex;gap:calc(3 * var(--e));padding:calc(3 * var(--e));border-radius:999px;background:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09);flex:none}
.fn-pills span{display:flex;align-items:center;height:calc(22 * var(--e));padding:0 calc(9 * var(--e));border-radius:999px;font-size:calc(9.5 * var(--e));font-weight:600;color:#A9A7A1;white-space:nowrap}
.fn-pills .on{background:#1C1C1F;color:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(244,243,240,.16)}
.fn-kz{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:calc(8 * var(--e))}
.fn-kz .d-box{padding:calc(11 * var(--e)) calc(12 * var(--e)) calc(10 * var(--e))}
.fn-kz b{display:block;font:600 calc(21 * var(--e))/1.1 var(--display);letter-spacing:-.02em;color:#F4F3F0;font-variant-numeric:tabular-nums;transition:color .4s ease}
.fn-kz span{display:block;margin-top:calc(4 * var(--e));font-size:calc(9.5 * var(--e));color:#A9A7A1}
.fn-tr{display:grid;gap:calc(8 * var(--e));padding:calc(13 * var(--e)) calc(14 * var(--e)) calc(14 * var(--e))}
.fn-tr-name{margin-bottom:calc(2 * var(--e));font-size:calc(11 * var(--e));font-weight:600;color:#F4F3F0}
.fn-tr-z{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1.55fr) calc(30 * var(--e)) calc(32 * var(--e));align-items:center;gap:calc(9 * var(--e));margin:0 calc(-6 * var(--e));padding:calc(2 * var(--e)) calc(6 * var(--e));border-radius:calc(6 * var(--e));transition:background .3s ease}
.fn-tr-z span{font-size:calc(10 * var(--e));color:#D6D4CE;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fn-tr-z i{display:block;height:calc(9 * var(--e));border-radius:999px;background:#1C1C1F;overflow:hidden}
.fn-tr-z u{display:block;width:var(--w);height:100%;border-radius:inherit;background:#FF4800;transition:width .9s var(--ease) calc(var(--i) * 70ms)}
.fn-tr-z b{font-size:calc(10.5 * var(--e));font-weight:600;color:#F4F3F0;text-align:right;font-variant-numeric:tabular-nums;transition:color .4s ease}
.fn-tr-z small{font-size:calc(9.5 * var(--e));color:#6F6D68;text-align:right;font-variant-numeric:tabular-nums}
.fn-meiste span{color:#F4F3F0}
.fn-meiste u{background:#E5484D}
.fn-meiste.hov{background:rgba(229,72,77,.1)}
.fn-stat.null .fn-tr-z u{width:0;transition:none}
.fn-stat .neu b{color:#FF6A2A}
.fn-stat .d-tip{white-space:nowrap}

/* Buchungskarten: nachgebaut aus der echten Buchungsseite (buchen.css, hell, im Branding der Kundin) */
.fn-schritte{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px 28px}
.fn-s{min-width:0}
.fn-sv{container-type:inline-size}
.fn-bk{--e:calc(100cqw / 440);--k:#17857D;aspect-ratio:440/330;border-radius:calc(18 * var(--e));padding:calc(22 * var(--e)) calc(24 * var(--e));background:#FFFFFF;color:#2B2A28;
  box-shadow:0 0 0 1px rgba(11,11,12,.08),0 2px 6px rgba(11,11,12,.05),0 36px 64px -34px rgba(11,11,12,.45)}
.fn-bk .bk-back{display:inline-flex;align-items:center;gap:calc(4 * var(--e));margin-bottom:calc(10 * var(--e));font-size:calc(10 * var(--e));font-weight:600;color:#5F5D58}
.fn-bk svg{display:block;flex:none}
.fn-bk .bk-back svg{width:calc(11 * var(--e));height:calc(11 * var(--e));fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-bar{display:block;height:calc(4 * var(--e));border-radius:999px;background:rgba(11,11,12,.04);box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);overflow:hidden}
.bk-bar i{display:block;width:var(--bw,33%);height:100%;border-radius:inherit;background:var(--k);transition:width .35s cubic-bezier(.2,.7,.2,1)}
.bk-n{margin:calc(8 * var(--e)) 0 calc(14 * var(--e));font-size:calc(9.5 * var(--e));font-weight:600;color:#8F8D87}
.bk-n b{font-weight:600}
.bk-fr{overflow:hidden;margin:0 calc(-6 * var(--e))}
.bk-zug{display:flex;width:200%;transition:transform .55s var(--ease)}
.bk-zug.bk-next{transform:translateX(-50%)}
.bk-q{width:50%;flex:none;padding:calc(2 * var(--e)) calc(6 * var(--e)) calc(4 * var(--e))}
.bk-weiter{gap:calc(4 * var(--e));margin-top:calc(12 * var(--e))}
.bk-weiter svg{width:calc(10 * var(--e));height:calc(10 * var(--e));fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fn-bk .bk-h{margin-bottom:calc(12 * var(--e));font-family:var(--display);font-size:calc(17 * var(--e));font-weight:650;line-height:1.2;letter-spacing:-.02em;color:#0B0B0C}
.bk-opts{display:grid;gap:calc(7 * var(--e))}
.bk-opt{display:flex;align-items:center;gap:calc(10 * var(--e));min-height:calc(37 * var(--e));padding:calc(8 * var(--e)) calc(12 * var(--e));border-radius:calc(10 * var(--e));background:#F4F3F0;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);font-size:calc(11.5 * var(--e));line-height:1.3;color:#0B0B0C;transition:box-shadow .12s,background .12s}
.bk-opt i{position:relative;flex:none;width:calc(15 * var(--e));height:calc(15 * var(--e));border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(11,11,12,.16);transition:background .12s}
.bk-opt.on{background:color-mix(in srgb,var(--k) 9%,#F4F3F0);box-shadow:inset 0 0 0 1.5px var(--k)}
.bk-opt.on i{background:var(--k);box-shadow:none}
.bk-opt.on i::after{content:"";position:absolute;left:calc(5.2 * var(--e));top:calc(3 * var(--e));width:calc(3.6 * var(--e));height:calc(6.6 * var(--e));border:solid #fff;border-width:0 calc(1.6 * var(--e)) calc(1.6 * var(--e)) 0;transform:rotate(45deg)}
.bk-kal{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:calc(16 * var(--e));margin-top:calc(-2 * var(--e))}
.bk-mk{display:flex;align-items:center;justify-content:space-between;margin-bottom:calc(4 * var(--e))}
.bk-mk b{font-size:calc(11.5 * var(--e));font-weight:600;color:#0B0B0C}
.bk-nav{display:flex;gap:calc(4 * var(--e))}
.bk-nav i{display:grid;place-items:center;width:calc(21 * var(--e));height:calc(21 * var(--e));border-radius:calc(7 * var(--e));background:rgba(11,11,12,.04);box-shadow:inset 0 0 0 1px rgba(11,11,12,.08)}
.bk-nav i:first-child{opacity:.35}
.bk-nav svg{width:calc(10 * var(--e));height:calc(10 * var(--e));fill:none;stroke:#0B0B0C;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bk-cal{display:grid;grid-template-columns:repeat(7,1fr);gap:calc(2.5 * var(--e))}
.bk-cal .wd{padding:calc(3 * var(--e)) 0 calc(2 * var(--e));text-align:center;font-size:calc(7.5 * var(--e));font-weight:600;letter-spacing:.04em;color:#8F8D87}
.bk-cal .d{position:relative;display:grid;place-items:center;aspect-ratio:1;max-height:calc(29 * var(--e));border-radius:calc(7 * var(--e));font-size:calc(10 * var(--e));font-weight:500;color:#8F8D87;transition:background .15s,color .15s}
.bk-cal .d.free{background:color-mix(in srgb,var(--k) 12%,transparent);color:#0B0B0C;font-weight:650}
.bk-cal .d.on{background:var(--k);color:#fff}
.bk-cal .d.heute::after{content:"";position:absolute;bottom:calc(3 * var(--e));width:calc(3 * var(--e));height:calc(3 * var(--e));border-radius:50%;background:currentColor;opacity:.6}
.bk-zeiten{display:flex;flex-direction:column;gap:calc(5 * var(--e));opacity:0;transform:translateY(calc(6 * var(--e)));transition:opacity .3s ease,transform .5s var(--ease)}
.bk-zeiten.zeig{opacity:1;transform:none}
.bk-tag{margin:calc(3 * var(--e)) 0 calc(3 * var(--e));font-size:calc(9.5 * var(--e));font-weight:600;line-height:1.3;color:#0B0B0C}
.bk-zeiten span{display:grid;place-items:center;height:calc(27 * var(--e));border-radius:calc(9 * var(--e));font-size:calc(10.5 * var(--e));font-weight:600;color:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14);transition:background .15s,color .15s,box-shadow .15s}
.bk-zeiten span.on{background:var(--k);color:#fff;box-shadow:none}
.bk-ok{display:grid;place-items:center;width:calc(34 * var(--e));height:calc(34 * var(--e));margin-bottom:calc(10 * var(--e));border-radius:50%;background:var(--k);opacity:0;transform:scale(.5);transition:opacity .3s ease,transform .5s cubic-bezier(.3,1.6,.5,1)}
.bk-ok svg{width:calc(17 * var(--e));height:calc(17 * var(--e));fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.bk-done .bk-h{margin-bottom:calc(4 * var(--e));font-size:calc(19 * var(--e))}
.bk-p{font-size:calc(10.5 * var(--e));line-height:1.5;color:#5F5D58}
.bk-rows{margin-top:calc(12 * var(--e));border-radius:calc(11 * var(--e));box-shadow:inset 0 0 0 1px rgba(11,11,12,.08);overflow:hidden}
.bk-rows div{display:grid;grid-template-columns:calc(40 * var(--e)) 1fr;gap:calc(8 * var(--e));padding:calc(7 * var(--e)) calc(11 * var(--e));font-size:calc(10 * var(--e));border-top:1px solid rgba(11,11,12,.08)}
.bk-rows div:first-child{border-top:0}
.bk-rows span{color:#5F5D58}
.bk-rows b{font-weight:600;color:#0B0B0C}
.bk-act{display:flex;flex-wrap:wrap;gap:calc(6 * var(--e));margin-top:calc(12 * var(--e))}
.bk-b{display:inline-flex;align-items:center;height:calc(27 * var(--e));padding:0 calc(13 * var(--e));border-radius:999px;background:var(--k);font-size:calc(10 * var(--e));font-weight:600;color:#fff}
.bk-b.g{background:transparent;color:#0B0B0C;box-shadow:inset 0 0 0 1px rgba(11,11,12,.14)}
.bk-done>*:not(.bk-ok){opacity:0;transform:translateY(calc(6 * var(--e)));transition:opacity .4s ease,transform .55s var(--ease)}
.bk-done.zeig .bk-ok{opacity:1;transform:none}
.bk-done.zeig>*:not(.bk-ok){opacity:1;transform:none}
.bk-done.zeig>*:nth-child(2){transition-delay:.12s}.bk-done.zeig>*:nth-child(3){transition-delay:.22s}.bk-done.zeig>*:nth-child(4){transition-delay:.34s}.bk-done.zeig>*:nth-child(5){transition-delay:.46s}
.fn-bk .d-toast{left:calc(14 * var(--e));right:calc(14 * var(--e));bottom:calc(14 * var(--e));justify-content:flex-start}
.fn-app .d-toast svg{width:calc(14 * var(--e));height:calc(14 * var(--e))}
.d-cur.gast span{background:#17857D;color:#fff}
.fn-app.still,.fn-app.still *{transition:none!important}
/* Dunkle Schritt-Karte (Dashboard/Talqio-Oberfläche) auf der hellen „So läuft’s“-Fläche, gleiches Format wie die Buchungskarten */
.fn-dk{--e:calc(100cqw / 440);aspect-ratio:440/330;border-radius:calc(18 * var(--e));padding:calc(18 * var(--e));background:#0B0B0C;color:#D6D4CE;box-shadow:0 0 0 1px rgba(11,11,12,.12),0 2px 6px rgba(11,11,12,.06),0 36px 64px -34px rgba(11,11,12,.6)}
.fn-dk::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(244,243,240,.07),inset 0 1px 0 rgba(244,243,240,.1);pointer-events:none}
.fn-st{margin-top:30px;font-family:var(--display);font-weight:600;font-size:22px;line-height:1.24;letter-spacing:-.02em;color:#0B0B0C;text-wrap:pretty}
.fn-st span{color:var(--o)}
.fn-sx{max-width:34em;margin-top:10px;font-size:16px;line-height:1.6;color:#45433F;text-wrap:pretty}

/* Was alles drin ist: ruhige Typo-Liste mit Haarlinie und kurzem orangem Strich */
.fn-drin-grid{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:56px 48px}
.fn-drin-grid li{position:relative;padding-top:30px;border-top:1px solid rgba(244,243,240,.12)}
.fn-drin-grid .fn-ic{margin-bottom:22px}
.fn-drin-grid p{max-width:24em;font-size:19px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.fn-drin-grid b{font-weight:500;color:var(--h)}

/* Apps, die wegfallen: Glas-Pillen, ein oranger Strich zieht beim Reinscrollen durch */
.fn-apps{padding-top:40px;text-align:center;overflow:hidden;overflow:clip}
.fn-apps-licht{position:absolute;left:50%;top:50%;width:1100px;height:560px;transform:translate(-50%,-50%);pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(255,72,0,.12) 0%,rgba(255,72,0,.05) 45%,rgba(255,72,0,0) 100%)}
.fn-apps-in{position:relative;display:flex;flex-direction:column;align-items:center}
.fn-apps .h2{max-width:13em;margin:0 auto}
.fn-pillen{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:52px}
.fn-pillen span{--i:0;position:relative;display:inline-flex;align-items:center;height:66px;padding:0 32px;border-radius:999px;font-size:21px;font-weight:500;color:var(--body-c);
  background:var(--glas);-webkit-backdrop-filter:var(--glas-blur);backdrop-filter:var(--glas-blur);box-shadow:var(--glas-kante),0 0 0 1px rgba(255,255,255,.08);transition:color .5s ease calc(var(--i) * .28s + .45s)}
.fn-pillen span:nth-child(2){--i:1}
.fn-pillen span:nth-child(3){--i:2}
.fn-pillen span::after{content:"";position:absolute;left:-2px;right:-2px;top:50%;height:3px;margin-top:-1.5px;border-radius:3px;background:var(--o);box-shadow:0 0 16px rgba(255,72,0,.6);transform:rotate(-5deg) scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.7,0,.2,1) calc(var(--i) * .3s + .45s)}
.fn-pillen.live span{color:#8C8A85}
.fn-pillen.live span::after{transform:rotate(-5deg) scaleX(1)}
.fn-apps .lead{max-width:31em;margin:44px auto 0}

/* Fragen: kürzer als auf der Startseite */
.fn-faq .sec-head{margin-bottom:48px}

/* Türen zu passenden Funktionen */
.fn-tueren{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fn-tuer{position:relative;display:flex;flex-direction:column;padding:30px 30px 28px;border-radius:24px;text-decoration:none;
  background:linear-gradient(180deg,#161618,#0D0D0F);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(244,243,240,.08);transition:transform .35s var(--ease),box-shadow .35s ease}
/* Icon im Glas-Container (Linien-Akzent, Licht oben, leiser Glow), gleich für „Was alles drin ist“ und die Türen */
.fn-ic,.fn-tuer-ic{display:grid;place-items:center;width:48px;height:48px;border-radius:14px;font-size:22px;color:var(--o2);background:linear-gradient(180deg,rgba(255,72,0,.2),rgba(255,72,0,.07));-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 0 0 1px rgba(255,120,60,.32),0 10px 26px -12px rgba(255,72,0,.55)}
.fn-tuer-ic{margin-bottom:28px}
.fn-tuer>b{font-family:var(--display);font-size:24px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--h)}
.fn-tuer p{flex:1;margin-top:10px;font-size:16px;line-height:1.6;color:var(--muted);text-wrap:pretty}
.fn-tuer .textlink{align-self:flex-start;margin-top:24px;font-size:15px;color:var(--h)}
@media (hover:hover){
  .fn-tuer:hover{transform:translateY(-4px);box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 1px rgba(255,106,42,.35),0 26px 50px -26px rgba(255,72,0,.4)}
  .fn-tuer:hover .textlink svg{transform:translateX(3px)}
}
.fn-tuer .textlink svg{transition:transform .25s var(--ease)}
.fn-tuer:focus-visible{outline:2px solid var(--h);outline-offset:3px}

@container (max-width:460px){
  .fn-stat{--e:calc(100cqw / 350)}
  .fn-stat .d-sub,.fn-pills .fn-p3{display:none}
  .fn-tr-z{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) calc(28 * var(--e))}
  .fn-tr-z small{display:none}
}
@media (max-width:1000px){
  .fn-hero{padding:144px 0 88px}
  .fn-hero-in{grid-template-columns:minmax(0,1fr);gap:56px}
  .fn-hero-v{max-width:620px}
  .fn-schritte{grid-template-columns:minmax(0,1fr);gap:64px;max-width:560px}
  .fn-drin-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fn-tueren{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:640px){
  .fn-hero{padding:124px 0 72px}
  .fn-h{font-size:clamp(31px,8.3vw,44px);line-height:1.06}
  .fn-h-lang{font-size:clamp(28px,7.5vw,40px)}  /* sehr lange Headlines (über 72 Zeichen) bleiben am Handy bei 3 Zeilen */
  .fn-sub{margin-top:20px}
  .fn-pfad{margin-bottom:20px;padding:7px 14px;font-size:14px}
  .fn-cta{align-items:stretch;gap:12px;margin-top:30px}
  .fn-cta .btn{width:100%}
  .fn-st{margin-top:24px;font-size:20px}
  .fn-drin-grid{grid-template-columns:minmax(0,1fr);gap:36px}
  .fn-drin-grid li{padding-top:24px}
  .fn-drin-grid .fn-ic{margin-bottom:18px}
  .fn-drin-grid p{font-size:17px}
  .fn-pillen{gap:10px;margin-top:36px}
  .fn-pillen span{height:52px;padding:0 24px;font-size:17px}
  .fn-apps .lead{margin-top:32px}
  .fn-tuer{padding:26px 24px 24px}
  .fn-tuer-ic{margin-bottom:22px}
}
@media (prefers-reduced-motion:reduce){.fn-tr-z u,.bk-zug,.bk-zeiten,.bk-ok,.bk-done>*,.fn-pillen span,.fn-pillen span::after,.fn-tuer{transition:none!important}}

/* ---------- Übersicht /funktionen (Robert 09.11.2026): Kopf wie das Portfolio, vier Gruppen mit je drei Türen ---------- */
.fu-liste{padding:8px 0 120px}
.fu-gruppe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,3.2fr);gap:48px;padding:56px 0;border-top:1px solid rgba(244,243,240,.1)}
.fu-gruppe:first-child{border-top:0;padding-top:24px}
.fu-h{align-self:start;font-family:var(--display);font-weight:500;font-size:clamp(26px,2.3vw,34px);line-height:1.15;letter-spacing:-.02em;color:var(--h)}
.fu-karten{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.fu-schluss{padding-top:0}
@media (max-width:1000px){
  .fu-gruppe{grid-template-columns:minmax(0,1fr);gap:28px;padding:48px 0}
  .fu-karten{grid-template-columns:minmax(0,1fr);max-width:560px}
}
@media (max-width:640px){
  .fu-liste{padding-bottom:80px}
  .fu-gruppe{padding:40px 0;gap:22px}
}

/* ---------- Zielgruppen /fuer-wen (Robert 09.11.2026): Standardfunktionen mit Link, darunter abgesetzt die Branchen-Extras ---------- */
.zg-std li{display:flex;flex-direction:column;align-items:flex-start}
.zg-mehr{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:14.5px;font-weight:600;color:var(--h);text-decoration:none;opacity:.85;transition:opacity .2s ease,color .2s ease}
.zg-mehr svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--ease)}
.zg-mehr:hover{opacity:1;color:var(--oh)}
.zg-mehr:hover svg{transform:translateX(3px)}
.zg-mehr:focus-visible{outline:2px solid var(--h);outline-offset:3px;border-radius:4px}
.zg-alle{margin-top:48px}
.zg-alle .textlink{color:var(--h)}
.zg-extras{position:relative;isolation:isolate;overflow:hidden;margin-top:80px;padding:44px;border-radius:28px;background:linear-gradient(180deg,#18120F,#0D0D0F 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 0 0 1px rgba(255,106,42,.28),0 40px 80px -50px rgba(255,72,0,.45)}
.zg-extras-licht{position:absolute;right:-120px;top:-180px;width:620px;height:420px;z-index:-1;pointer-events:none;background:radial-gradient(50% 50% at 50% 50%,rgba(255,72,0,.22) 0%,rgba(255,72,0,.08) 45%,rgba(255,72,0,0) 100%)}
.zg-extras-kopf{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px 48px;align-items:end}
.zg-h3{font-family:var(--display);font-weight:500;font-size:clamp(28px,2.6vw,40px);line-height:1.12;letter-spacing:-.025em;color:var(--h);text-wrap:balance}
.zg-extras-kopf p{font-size:18px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.zg-preis{grid-column:1/-1;justify-self:start;display:inline-flex;align-items:baseline;gap:8px;margin-top:6px;padding:9px 16px;border-radius:999px;font-size:15px;font-weight:500;color:var(--body-c);
  background:rgba(255,72,0,.12);box-shadow:inset 0 0 0 1px rgba(255,120,60,.35)}
.zg-preis b{font-family:var(--display);font-size:20px;font-weight:600;color:var(--oh);font-variant-numeric:tabular-nums}
.zg-extra-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:36px}
.zg-extra{position:relative;padding:28px 28px 26px;border-radius:20px;background:rgba(255,255,255,.035);box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 0 0 1px rgba(244,243,240,.09)}
.zg-extra .fn-ic{margin-bottom:22px}
.zg-chip{position:absolute;top:28px;right:26px;padding:5px 11px;border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.2;color:var(--oh);box-shadow:inset 0 0 0 1px rgba(255,120,60,.45)}
.zg-extra p{max-width:30em;font-size:18px;line-height:1.55;color:var(--muted);text-wrap:pretty}
.zg-extra b{font-weight:500;color:var(--h)}
.zg-karten{grid-template-columns:repeat(3,minmax(0,1fr))}
.zg-liste .fu-karten{max-width:none}
.zg-andere{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(244,243,240,.14)}
.zg-andere .fn-tuer-ic{background:rgba(244,243,240,.06);box-shadow:inset 0 0 0 1px rgba(244,243,240,.16);color:var(--h)}
@media (max-width:1000px){
  .zg-extras{padding:34px}
  .zg-extras-kopf{grid-template-columns:minmax(0,1fr)}
  .zg-karten{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .zg-alle{margin-top:36px}
  .zg-extras{margin-top:56px;padding:26px 20px 22px;border-radius:24px}
  .zg-extras-kopf p{font-size:17px}
  .zg-extra-grid{grid-template-columns:minmax(0,1fr);gap:14px;margin-top:26px}
  .zg-extra{padding:24px 20px 22px}
  .zg-chip{top:24px;right:18px}
  .zg-extra p{font-size:17px}
  .zg-karten{grid-template-columns:minmax(0,1fr)}
}

/* Zielgruppen-Header (Robert 09.11.2026): echtes Foto aus der Branche rechts, Text links, iPhone mit dem Branchen-Extra daneben (nie über der Person) */
.zg-hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:max(720px,min(100svh,900px));padding:150px 0 96px;overflow:hidden;overflow:clip}
.zg-foto{position:absolute;top:84px;right:0;bottom:0;width:64%;z-index:-2;margin:0}
.zg-foto img{display:block;width:100%;height:100%;object-fit:cover;object-position:75% 30%}
.zg-hero-schleier{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,#0B0B0C 0%,#0B0B0C 36%,rgba(11,11,12,.86) 46%,rgba(11,11,12,.42) 60%,rgba(11,11,12,.08) 76%,rgba(11,11,12,0) 88%),
    linear-gradient(0deg,#0B0B0C 0%,rgba(11,11,12,.6) 12%,rgba(11,11,12,0) 34%),linear-gradient(180deg,#0B0B0C 84px,rgba(11,11,12,.4) 140px,rgba(11,11,12,0) 260px)}
.zg-hero-in{display:grid;grid-template-columns:minmax(0,5.4fr) minmax(0,3.2fr) minmax(0,3.4fr);align-items:center;gap:40px}
.zg-hero-t .fn-h{max-width:12em}
.zg-geraet{display:flex;justify-content:center}
.zg-phone{position:relative;width:clamp(236px,19.5vw,292px);aspect-ratio:390/844;padding:9px;border-radius:52px;
  background:linear-gradient(145deg,#5A5A5E 0%,#2A2A2D 18%,#1A1A1C 50%,#2C2C2F 82%,#57575B 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.18),inset 0 0 0 3px #0E0E10,0 50px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.6),0 30px 80px -40px rgba(255,72,0,.35)}
.zg-screen{--e:calc(100cqw / 390);position:relative;width:100%;height:100%;border-radius:43px;overflow:hidden;background:#FFFFFF;container-type:inline-size;color:#0B0B0C}
.zg-insel{position:absolute;left:50%;top:19px;z-index:6;width:31%;height:27px;transform:translateX(-50%);border-radius:20px;background:#000}
.zg-status{position:absolute;left:0;right:0;top:0;z-index:5;display:flex;align-items:center;justify-content:space-between;height:calc(54 * var(--e));padding:0 calc(30 * var(--e)) 0 calc(34 * var(--e));pointer-events:none}
.zg-status b{font:600 calc(16 * var(--e))/1 -apple-system,"SF Pro Text",var(--body);letter-spacing:-.01em}
.zg-status span{display:flex;align-items:center;gap:calc(6 * var(--e))}
.zg-status i{display:block;background:currentColor}
.zg-netz{width:calc(17 * var(--e));height:calc(11 * var(--e));-webkit-mask:linear-gradient(90deg,#000 0 20%,transparent 20% 27%,#000 27% 47%,transparent 47% 54%,#000 54% 74%,transparent 74% 80%,#000 80%);mask:linear-gradient(90deg,#000 0 20%,transparent 20% 27%,#000 27% 47%,transparent 47% 54%,#000 54% 74%,transparent 74% 80%,#000 80%);clip-path:polygon(0 70%,20% 70%,20% 50%,27% 50%,27% 35%,47% 35%,47% 20%,54% 20%,54% 0,100% 0,100% 100%,0 100%)}
.zg-wlan{width:calc(15 * var(--e));height:calc(11 * var(--e));border-radius:calc(15 * var(--e)) calc(15 * var(--e)) 0 0;clip-path:polygon(50% 100%,0 0,100% 0)}
.zg-akku{width:calc(25 * var(--e));height:calc(12 * var(--e));border-radius:calc(4 * var(--e));box-shadow:inset 0 0 0 calc(1.5 * var(--e)) rgba(0,0,0,.4);background:linear-gradient(90deg,currentColor 0 80%,transparent 80%)!important;background-clip:content-box!important;padding:calc(2 * var(--e))}
.zg-inhalt{position:absolute;inset:0;overflow:hidden}
.zg-inhalt>.fn-app{--e:calc(100cqw / 390);position:absolute;inset:0;color:#0B0B0C}
.zg-home{position:absolute;left:50%;bottom:calc(8 * var(--e));z-index:5;width:36%;height:calc(5 * var(--e));transform:translateX(-50%);border-radius:999px;background:rgba(0,0,0,.85)}
/* Bento der Branchen-Extras: Klassen der Startseite, die Karten füllen die Fläche */
.zg-app{container-type:inline-size;background:#0B0B0C}
.zg-app>.fn-app{position:absolute;inset:0}
@media (max-width:640px){.zg-bento .bx-app{aspect-ratio:1/1}}  /* am Handy quadratisch, sonst nur ca. 295 × 184 px */
.zg-preis-zeile{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px;font-size:16px;line-height:1.5;color:var(--muted)}
@media (max-width:1000px){
  /* Handy und Tablet: erst der Text, dann das Foto, das iPhone überlappt unten links (die Person steht rechts im Bild) */
  .zg-hero{display:flex;flex-direction:column;min-height:0;padding:132px 0 64px}
  .zg-hero .zg-hero-in{display:contents}
  .zg-hero-t{order:1;width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--pad)}
  .zg-foto{order:2;position:relative;top:auto;right:auto;bottom:auto;width:auto;aspect-ratio:4/3;margin:44px var(--pad) 0;border-radius:24px;overflow:hidden}
  .zg-hero-schleier{display:none}
  .zg-geraet{order:3;position:relative;z-index:2;justify-content:flex-start;margin:-96px 0 0 calc(var(--pad) + 14px)}
}
@media (max-width:640px){
  .zg-hero{padding-top:118px}
  .zg-foto{margin-top:36px;border-radius:20px}
  .zg-phone{width:min(52vw,220px);border-radius:40px;padding:7px}
  .zg-screen{border-radius:34px}
  .zg-insel{top:14px;height:20px}
  .zg-geraet{margin-top:-72px}
  .zg-preis-zeile{font-size:15px}
}

/* Einfache Seiten (09.11.2026, Umzug zu Cloudflare): Kontakt, Impressum, Datenschutz, AGB, Danke, 404 */
.pf-kopf.es-kopf{padding-bottom:56px;overflow:visible;overflow-x:clip}
.es-kopf .pf-h{font-size:clamp(44px,5.4vw,80px);hyphens:manual}
.es-inhalt{padding:8px 0 140px}
.rt{max-width:68ch}
.rt h2{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.25;letter-spacing:-.01em;color:var(--h);margin:52px 0 14px;text-wrap:balance}
.rt h2:first-child{margin-top:0}
.rt p{font-size:17px;line-height:1.65;color:var(--body-c);margin:0 0 14px;text-wrap:pretty}
.rt a{color:var(--h);text-decoration:underline;text-decoration-color:rgba(244,243,240,.35);text-underline-offset:3px}
.rt a:hover{text-decoration-color:var(--o)}
.rt-zeilen span{display:block}
.rt-stand{margin-top:52px!important;font-size:14px!important;color:var(--faint)!important}
.kt{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:24px;align-items:start}
.kt-buchung,.kt-direkt{border-radius:24px;background:linear-gradient(180deg,#161618,#0D0D0F);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(244,243,240,.08)}
.kt-buchung{padding:28px;min-height:320px}
.kt-direkt{padding:30px}
.kt-h{font-family:var(--display);font-weight:500;font-size:24px;line-height:1.25;color:var(--h);margin:0 0 10px}
.kt-direkt p{font-size:16px;line-height:1.6;color:var(--muted);margin:0 0 22px}
.kt-weg{display:block;padding:16px 0;border-top:1px solid var(--line);color:var(--h);text-decoration:none;font-size:17px;font-weight:500;overflow-wrap:anywhere}
.kt-weg span{display:block;font-size:13px;font-weight:400;color:var(--faint);margin-bottom:4px}
.kt-weg:hover{color:var(--oh)}
.es-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px}
.es-link{color:var(--h);font-weight:600;text-decoration:none;border-bottom:1.5px solid rgba(244,243,240,.35);padding-bottom:3px}
.es-link:hover{border-color:var(--o)}
@media (max-width:900px){.kt{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){
  .es-kopf{padding-bottom:40px}
  .es-kopf .pf-h{font-size:clamp(34px,9.6vw,44px)}
  .es-inhalt{padding-bottom:96px}
  .rt p{font-size:16px}
  .rt h2{font-size:21px;margin-top:40px}
  .kt-buchung{padding:18px;min-height:300px}
  .kt-direkt{padding:24px}
  .es-knoepfe .btn{width:100%;justify-content:center}
}

/* Typo-Feinschliff (08.11.2026): nur Abstände und Umbrüche, Original oben unverändert */
.band-label{margin-bottom:12px}            /* 22 → 12: Label gehört sichtbar zum Laufband */
.hero-pill{text-wrap:balance}              /* Handy: zwei gleich lange Zeilen statt „… und / Unternehmen“ */
@media (max-width:640px){
  .hero-cta{gap:12px}                      /* Button → Hinweis 14 → 12 (0,5 L bei 26 px Zeilenabstand) */
}

/* ---------- Preise: Laufzeit-Schalter bleibt oben stehen, solange man in der Sektion ist (Robert 11.11.2026) ----------
   Bewusst ein zweites Sticky neben der Navigation: sonst muss man von der Website-Karte wieder hoch, um 12 und 6 Monate zu vergleichen.
   Ohne Blur (Safari-Regel), dafür Schatten und dunkler Rand, damit der Schalter über den Karten klar steht. */
.pz-schalter{position:sticky;top:100px;z-index:6;box-shadow:inset 0 0 0 1px rgba(244,243,240,.09),0 0 0 6px rgba(11,11,12,.92),0 16px 36px -12px rgba(0,0,0,.9)}
/* Fix: Nach dem Klick (Maus bleibt drauf, am Handy „klebt“ :hover) war die Schrift auf dem gewählten Knopf weiß auf weiß */
.pz-schalter button[aria-checked=true],.pz-schalter button[aria-checked=true]:hover{color:#0B0B0C}

/* ---------- Siebte Session 11.11.2026: Landingpage-Baukasten (Robert: „Okay, mach das so“) ----------
   Funktionen-Menü: „Alle Funktionen“ als 14. Kachel, der Pfeil ist ein Linien-Icon.
   Übersicht /funktionen: die Gruppe mit vier Karten (Deine Website) steht als 2 × 2, die anderen bleiben bei drei. */
.dd .ic-pfeil{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:1001px){.fu-karten.fu-vier{grid-template-columns:repeat(2,minmax(0,1fr))}}