/* betterbedesign – Agentur-Website
   Marke: Brand Manual V1.0 (Ink, Paper, Flare, Stone, Bone; Manrope).
   Aufbau: dunkle Schalttafel in einem Rahmen mit Seitenschienen. */

@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Manrope";src:url("../fonts/manrope-latin-ext-wght.woff2") format("woff2");font-weight:200 800;font-style:normal;font-display:swap;unicode-range:U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* Hell: Brand Manual Paper-Grund, Ink-Schrift. Kontraste gerechnet (Zweittext 6,9–8:1, Flare-Schrift #B33610 ab 4,5:1). */
:root:not([data-theme="dark"]){--ink:#F2EFE9;--surface:#EAE6DE;--surface-2:#E3DED5;--surface-3:#D9D3C8;--surface-4:#C9C3B8;--line:#D2CCC1;--paper:#0B0B0B;--bone:#4A4743;--flare-text:#B33610;--ok:#1F7A3E;--stance-dim:#A39D93;--band:#E6E1D8;--band-card:#F2EFE9;--logo-filter:brightness(0);--inv-bg:#0B0B0B;--inv-fg:#F2EFE9;--inv-muted:#C9C3B8;--inv-card:#1A1A19;--inv-flare:#FF4D1F;color-scheme:light}
:root{
  --steps-gap:clamp(1rem,2.5vw,2rem);
  --ink:#0B0B0B;
  --surface:#131312;
  --surface-2:#1A1A19;
  --surface-3:#242422;
  --surface-4:#30302D;
  --line:#2A2A27;
  --paper:#F2EFE9;
  --bone:#C9C3B8;      /* Zweittext auf Ink: 11,2:1 */
  --stone:#7A7670;     /* nur Flächen, kein Fließtext */
  --flare:#FF4D1F;     /* auf Ink 5,9:1 */
  --flare-hi:#FF6A42;
  --ok:#7FD69B;
  --on-flare:#0B0B0B;  /* Schrift auf Flare, immer dunkel (5,9:1) */
  --flare-text:#FF4D1F; /* Flare als Schrift: dunkel 5,9:1, hell abgedunkelt */
  --stance-dim:#615E59;
  --band:#171716;       /* jede zweite Abschnittsfläche */
  --band-card:#0B0B0B;
  --logo-filter:none;
  --inv-bg:#F2EFE9;     /* Gegenfläche (Mega-Menü): im Dunkeln hell, im Hellen dunkel */
  --inv-fg:#0B0B0B;
  --inv-muted:#4A4743;
  --inv-card:#E6E1D8;
  --inv-flare:#B33610;  /* Orange als Schrift auf der Gegenfläche */

  --font:"Manrope",ui-sans-serif,system-ui,sans-serif;
  --fs-display:clamp(2.6rem,5.4vw,5.25rem);
  --fs-h2:clamp(2rem,3.6vw,3.25rem);
  --fs-h3:1.25rem;
  --fs-body:1.0625rem;
  --fs-small:0.875rem;

  --radius:10px;
  --frame:1240px;
  --pad:clamp(1.25rem,4.5vw,3.5rem);
  --gap-section:clamp(6rem,11vw,10rem);
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:88px;color-scheme:dark}
body{margin:0;background:var(--ink);color:var(--paper);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
img,svg,canvas{display:block;max-width:100%}
main,.site-footer{overflow-x:clip}
img{height:auto}
h1,h2,h3,p,ul,ol,figure,blockquote,dl,dd{margin:0}
p,li,dd{text-wrap:pretty}
ul[class],ol[class],.nav ul,.footer-grid ul,.footer-legal ul{list-style:none;padding:0;margin:0}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.22em}
button{font:inherit;color:inherit}
::selection{background:var(--flare);color:var(--on-flare)}
:focus-visible{outline:2px solid var(--flare);outline-offset:3px;border-radius:4px}
html{scrollbar-color:var(--surface-4) var(--ink)}
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:var(--ink)}
::-webkit-scrollbar-thumb{background:var(--surface-4);border-radius:6px;border:3px solid var(--ink)}
.tnum{font-variant-numeric:tabular-nums}

.skip{position:absolute;left:1rem;top:-4rem;z-index:100;background:var(--flare);color:var(--on-flare);padding:.75rem 1rem;border-radius:var(--radius);font-weight:700;text-decoration:none}
.skip:focus{top:1rem}
.visually-hidden{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Rahmen mit Seitenschienen ---------- */
.frame{max-width:var(--frame);margin-inline:auto;border-inline:1px solid var(--line);position:relative}
.signal{position:absolute;left:-1px;top:0;width:2px;height:100%;background:var(--flare);transform-origin:top;transform:scaleY(var(--progress,0));pointer-events:none;z-index:0}
.seam{height:28px;border-block:1px solid var(--line);background:repeating-linear-gradient(135deg,transparent 0 7px,var(--line) 7px 8px);position:relative}
.seam::before,.seam::after{content:"";position:absolute;top:-6px;width:11px;height:11px;background:
  linear-gradient(var(--stone),var(--stone)) center/11px 1px no-repeat,
  linear-gradient(var(--stone),var(--stone)) center/1px 11px no-repeat}
.seam::before{left:-6px}.seam::after{right:-6px}
.section{padding:var(--gap-section) var(--pad)}
.band{background:var(--band);--surface:var(--band-card);box-shadow:0 0 0 100vmax var(--band);clip-path:inset(0 -100vmax)}
.band + .seam,.seam + .band{border-color:transparent}
.section-head{max-width:46rem;margin-bottom:clamp(2.5rem,5vw,4rem)}
.section-head h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
h1 em,h2 em{font-style:normal;color:var(--flare-text)}
.section-head p{margin-top:1.25rem;color:var(--bone);max-width:38rem;font-size:1.125rem}
.section-head.center{margin-inline:auto;text-align:center}
.section-head.center p{margin-inline:auto}

/* ---------- Buttons und Links ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:.8rem 1.4rem;border-radius:var(--radius);font-weight:700;font-size:1rem;letter-spacing:-.01em;text-decoration:none;border:0;cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.btn:active{transform:translateY(1px) scale(.985)}
.btn-primary{background:var(--flare);color:var(--on-flare)}
.btn-primary:hover{background:var(--flare-hi)}
.btn-ghost{background:var(--surface-3);color:var(--paper)}
.btn-ghost:hover{background:var(--surface-4)}
.btn[disabled],.btn[aria-disabled="true"]{background:var(--surface-3);color:var(--bone);cursor:not-allowed}
.link{color:var(--paper);font-weight:600;text-decoration:underline;text-decoration-color:var(--stone);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--flare)}
main p a:not(.btn),.footer-grid address p a{color:inherit;font-weight:600;text-decoration:underline;text-decoration-color:var(--stone);text-underline-offset:.22em}
main p a:not(.btn):hover{text-decoration-color:var(--flare)}
.section-head p a:not(.btn){color:var(--paper)}
.actions{display:flex;flex-wrap:wrap;gap:.75rem}

/* ---------- Kopf ---------- */
.site-header{position:sticky;top:0;z-index:50;background:var(--ink);border-bottom:1px solid var(--line)}
.site-header .frame{position:static;display:flex;align-items:center;gap:2rem;height:72px;padding-inline:var(--pad);border-inline-color:var(--line)}
.brand{display:block;flex:none}
.brand img{height:30px;width:auto;filter:var(--logo-filter)}
.nav{margin-inline:auto}
.nav-list{display:flex;gap:.25rem;align-items:center}
.nav-link,.nav-toggle{display:flex;align-items:center;gap:.4rem;padding:.55rem .85rem;border:0;background:none;border-radius:8px;text-decoration:none;font:500 .95rem/1.2 var(--font);color:var(--bone);cursor:pointer;transition:color .2s,background-color .2s}
.nav-toggle::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .25s var(--ease)}
.nav-toggle[aria-expanded="true"]::after{transform:translateY(1px) rotate(-135deg)}
.nav-link:hover,.nav-toggle:hover,.nav-toggle[aria-expanded="true"],.nav-link[aria-current="page"]{color:var(--paper);background:var(--surface-2)}
/* Mega-Menü über die ganze Breite: Gegenfläche zum Seitenmodus */
.mega{position:absolute;left:0;right:0;top:100%;background:var(--inv-bg);color:var(--inv-fg);box-shadow:0 40px 80px -40px rgba(0,0,0,.55);visibility:hidden;opacity:0;clip-path:inset(0 0 100% 0);transition:clip-path .45s var(--ease),opacity .2s,visibility 0s .45s}
.mega::before{content:"";position:absolute;left:0;top:0;height:4px;width:100%;background:var(--flare);transform-origin:left;transform:scaleX(0);transition:transform .6s var(--ease) .1s}
.has-mega.is-open .mega{visibility:visible;opacity:1;clip-path:inset(0 0 0 0);transition:clip-path .45s var(--ease),opacity .2s}
.has-mega.is-open .mega::before{transform:scaleX(1)}
.mega-inner{max-width:none;padding:2.5rem clamp(1.5rem,4vw,4rem) 3rem;display:grid;grid-template-columns:minmax(0,3fr) minmax(18rem,1fr);gap:clamp(2rem,4vw,4rem);align-items:stretch}
.mega-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.25rem 1.5rem;align-content:start}
@media (max-width:1300px){.mega-list{grid-template-columns:1fr 1fr}}
.mega-list li{opacity:0;transform:translateY(10px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.has-mega.is-open .mega-list li{opacity:1;transform:none}
.has-mega.is-open .mega-list li:nth-child(2){transition-delay:.04s}
.has-mega.is-open .mega-list li:nth-child(3){transition-delay:.08s}
.has-mega.is-open .mega-list li:nth-child(4){transition-delay:.12s}
.has-mega.is-open .mega-list li:nth-child(5){transition-delay:.16s}
.has-mega.is-open .mega-list li:nth-child(6){transition-delay:.2s}
.mega-list a{display:flex;flex-direction:column;gap:.2rem;padding:.9rem 1.1rem;border-radius:12px;text-decoration:none;color:var(--inv-fg);transition:background-color .2s,color .2s,transform .25s var(--ease)}
.mega-list a:hover,.mega-list a:focus-visible{background:var(--flare);color:#0B0B0B;transform:translateX(6px)}
.mega-list a:hover .mega-desc,.mega-list a:focus-visible .mega-desc{color:#0B0B0B}
.mega-title{font-size:clamp(1.5rem,2.1vw,2rem);font-weight:800;letter-spacing:-.04em;line-height:1.05}
.mega-desc{font-size:.9375rem;color:var(--inv-muted);transition:color .2s}
.mega-side{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:.9rem;padding:1.75rem;border-radius:16px;background:var(--flare);color:#0B0B0B}
.mega-side-title{font-size:1.5rem;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.mega-side p{color:#0B0B0B}
.mega-all{color:#0B0B0B;font-weight:700;text-decoration:underline;text-underline-offset:.22em}
.btn-dark{background:#0B0B0B;color:#F2EFE9}
.btn-dark:hover{background:#2A2A27}
.nav-foot{display:none}
.header-tools{display:flex;align-items:center;gap:.6rem;flex:none}
.theme-toggle{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:var(--radius);background:var(--surface-2);color:var(--paper);cursor:pointer;transition:background-color .2s}
.theme-toggle:hover{background:var(--surface-3)}
.theme-toggle svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.theme-toggle .i-moon{display:none}
:root:not([data-theme="dark"]) .theme-toggle .i-sun{display:none}
:root:not([data-theme="dark"]) .theme-toggle .i-moon{display:block}
.header-cta{min-height:44px;padding:.6rem 1.1rem;font-size:.95rem}
.menu-toggle{display:none;align-items:center;gap:.55rem;background:var(--surface-2);border:0;border-radius:var(--radius);min-height:44px;padding:.6rem .9rem;font-weight:600;cursor:pointer}
.burger{position:relative;width:18px;height:2px;background:currentColor;border-radius:2px;transition:background-color .2s}
.burger::before,.burger::after{content:"";position:absolute;left:0;width:18px;height:2px;background:currentColor;border-radius:2px;transition:transform .3s var(--ease)}
.burger::before{top:-6px}.burger::after{top:6px}
.menu-toggle[aria-expanded="true"] .burger{background:transparent}
.menu-toggle[aria-expanded="true"] .burger::before{transform:translateY(6px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] .burger::after{transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1060px){
  .site-header .frame{gap:.6rem}
  .menu-toggle{display:inline-flex}
  .brand{margin-right:auto}
  .brand img{height:26px}
  .header-cta{padding:.55rem .85rem;font-size:.9rem}
  /* Handy-Menü: Vollbild, große Schrift, Leistungen klappen auf */
  .nav{position:fixed;inset:72px 0 0 0;z-index:49;background:var(--ink);margin:0;padding:1.25rem var(--pad) 2rem;overflow:auto;display:flex;flex-direction:column;gap:2rem;visibility:hidden;opacity:0;transform:translateY(-12px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .nav.is-open{visibility:visible;opacity:1;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
  .nav::before{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:var(--flare);transform-origin:top;transform:scaleY(0);transition:transform .6s var(--ease) .1s}
  .nav.is-open::before{transform:scaleY(1)}
  .nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-list > li{border-bottom:1px solid var(--line);opacity:0;transform:translateX(-16px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
  .nav.is-open .nav-list > li{opacity:1;transform:none}
  .nav.is-open .nav-list > li:nth-child(2){transition-delay:.05s}
  .nav.is-open .nav-list > li:nth-child(3){transition-delay:.1s}
  .nav.is-open .nav-list > li:nth-child(4){transition-delay:.15s}
  .nav.is-open .nav-list > li:nth-child(5){transition-delay:.2s}
  .nav-link,.nav-toggle{width:100%;justify-content:space-between;padding:1rem 0;font-size:clamp(1.75rem,8vw,2.5rem);font-weight:800;letter-spacing:-.04em;color:var(--paper);background:none!important;border-radius:0}
  .nav-toggle::after{width:11px;height:11px;border-width:3px}
  .nav-link[aria-current="page"]{color:var(--flare-text)}
  .mega{position:static;visibility:visible;opacity:1;clip-path:none;box-shadow:none;display:none;border-radius:14px;margin-bottom:1rem}
  .mega::before{display:none}
  .has-mega.is-open .mega{display:block}
  .mega-inner{grid-template-columns:1fr;padding:.5rem;gap:.5rem}
  .mega-list{grid-template-columns:1fr;gap:.15rem}
  .mega-list li{opacity:1;transform:none}
  .mega-list a{padding:.8rem 1rem}
  .mega-title{font-size:1.25rem}
  .mega-desc{font-size:.875rem}
  .mega-side{display:none}
  .nav-foot{display:grid;gap:1rem;margin-top:auto;padding-top:1rem}
  .nav-foot .btn{width:100%;min-height:52px;font-size:1.0625rem}
  .nav-foot p{color:var(--bone);font-size:var(--fs-small)}
  .nav-foot a:not(.btn){color:var(--paper)}
}
@media (max-width:560px){.header-cta{padding:.5rem .7rem;font-size:.85rem}.menu-label{display:none}.site-header .frame{gap:.45rem}}
@media (max-width:359px){.header-cta{display:none}}
@media (min-width:1061px){.nav-foot{display:none!important}}

/* ---------- Referenz-Stapel ---------- */
.hero{padding:clamp(4.5rem,9vw,7.5rem) var(--pad) clamp(3rem,6vw,5rem);position:relative;overflow:hidden}
.hero-copy{text-align:center;max-width:58rem;margin-inline:auto}
.hero h1{font-size:var(--fs-display);font-weight:800;letter-spacing:-.04em;line-height:.98;text-wrap:balance}
.hero h1 em{font-style:normal;color:var(--flare-text)}
.hero .lead{margin:1.5rem auto 0;max-width:40rem;font-size:clamp(1.0625rem,1.4vw,1.25rem);line-height:1.55;color:var(--bone)}
.hero .actions{justify-content:center;margin-top:2rem}

.cases{margin-top:clamp(3.5rem,7vw,5.5rem);position:relative}
.case-stack{display:grid;padding-top:calc(2 * 2.6rem);position:relative}
.case{grid-area:1/1;background:var(--surface);border-radius:14px;outline:1px solid var(--line);overflow:hidden;transform-origin:top center;transition:transform .7s var(--ease),opacity .5s var(--ease),filter .5s var(--ease);will-change:transform}
.case[data-depth="0"]{z-index:5}
.case[data-depth="1"]{z-index:4;transform:translateY(-2.6rem) scale(.975)}
.case[data-depth="2"]{z-index:3;transform:translateY(-5.2rem) scale(.95)}
.case[data-depth="3"],.case[data-depth="4"],.case[data-depth="5"]{z-index:1;transform:translateY(-5.2rem) scale(.95);opacity:0;pointer-events:none}
.case:not([data-depth="0"]) .case-body{visibility:hidden}
.case:not([data-depth="0"]){background:var(--surface-2)}
.case-bar{display:flex;align-items:center;gap:.75rem;height:2.6rem;padding:0 1.1rem;font-size:var(--fs-small);color:var(--bone);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden}
.case-bar strong{color:var(--paper);font-weight:600}
.case-bar .dot{width:8px;height:8px;border-radius:50%;background:var(--flare);flex:none}
.case-body{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.case-shot{position:relative;background:var(--ink);border-right:1px solid var(--line);aspect-ratio:16/10;overflow:hidden}
.case-shot img{width:100%;height:100%;object-fit:cover;object-position:top}
.case-info{padding:clamp(1.25rem,2.5vw,2rem);display:flex;flex-direction:column;gap:1.25rem}
.case-label{font-size:var(--fs-small);font-weight:600;color:var(--bone)}
.case-label + *{margin-top:-.6rem}
.case-name{font-size:1.75rem;font-weight:700;letter-spacing:-.03em;line-height:1.1}
.case-meta{color:var(--bone);font-size:1rem}
.case-list{display:flex;flex-wrap:wrap;gap:.5rem}
.case-list li{background:var(--surface-3);border-radius:8px;padding:.35rem .7rem;font-size:.9375rem;font-weight:500}
.case-status{display:flex;align-items:center;gap:.5rem;font-size:var(--fs-small);color:var(--bone);margin-top:auto}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 4px rgba(127,214,155,.15)}
.status-dot.is-wip{background:var(--flare);box-shadow:0 0 0 4px rgba(255,77,31,.18)}
.case-tabs{position:relative;z-index:6;display:flex;justify-content:center;gap:.4rem;margin:1.5rem auto 0;width:max-content;max-width:100%;padding:.4rem;background:var(--surface-2);border-radius:14px;outline:1px solid var(--line);box-shadow:0 18px 40px -18px rgba(0,0,0,.8);overflow-x:auto}
.case-tabs button{border:0;background:transparent;color:var(--bone);font-weight:600;font-size:.9rem;padding:.55rem .9rem;min-height:40px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:background-color .2s,color .2s}
.case-tabs button:hover{color:var(--paper);background:var(--surface-3)}
.case-tabs button[aria-selected="true"]{background:var(--paper);color:var(--ink)}
@media (max-width:760px){
  .hero-copy{text-align:left}
  .hero .actions{justify-content:flex-start}
  .hero .actions .btn{flex:1 1 100%}
  .case-stack{padding-top:calc(2 * 2.2rem)}
  .case-bar{height:2.2rem;padding:0 .9rem}
  .case[data-depth="1"]{transform:translateY(-2.2rem) scale(.97)}
  .case[data-depth="2"]{transform:translateY(-4.4rem) scale(.94)}
  .case[data-depth="3"],.case[data-depth="4"],.case[data-depth="5"]{transform:translateY(-4.4rem) scale(.94)}
  .case-body{grid-template-columns:1fr}
  .case-shot{border-right:0;border-bottom:1px solid var(--line)}
  .case-bar span:not(.dot){display:none}
  .case-tabs{margin-top:1rem;width:100%;justify-content:flex-start;scroll-snap-type:x mandatory;scroll-padding-inline:.4rem;-webkit-mask-image:linear-gradient(90deg,#000 80%,transparent);mask-image:linear-gradient(90deg,#000 80%,transparent)}
  .case-tabs button{scroll-snap-align:start}
}

/* ---------- Hero „Region“: Suchanfragen laufen zu deinem Betrieb ---------- */
.hero-region{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,5rem);align-items:center;min-height:min(70svh,820px);margin-inline:calc(50% - 50vw);padding:clamp(2.5rem,5vw,4rem) max(var(--pad),calc(50vw - 760px));background:var(--ink);border-bottom:1px solid var(--line);position:relative;z-index:3}
.hero-region .radar{max-height:calc(min(70svh,820px) - 4rem);justify-self:end;width:100%;max-width:44rem}
.hero-region .hero-copy{text-align:left;margin:0}
.hero-region .lead{margin-left:0}
.hero-region .actions{justify-content:flex-start}
.hero h1 em{font-style:normal;color:var(--flare-text)}
.radar{position:relative;aspect-ratio:600/520;margin:0}
.radar-map{width:100%;height:100%}
.radar-map #radar-dots circle{fill:var(--line)}
.radar .rings{stroke:var(--line)}
.radar .routes path{stroke:var(--surface-4);stroke-width:1.5;stroke-dasharray:3 5}
.radar .routes path.is-active{stroke:var(--flare);stroke-dasharray:none;stroke-width:2}
.radar .core{fill:var(--flare)}
.radar .pulse{fill:none;stroke:var(--flare);stroke-width:2;opacity:0;transform-origin:300px 260px}
.radar.is-hit .pulse{animation:ping 1.1s var(--ease)}
@keyframes ping{0%{opacity:.9;transform:scale(.6)}100%{opacity:0;transform:scale(3.2)}}
.radar .spark{fill:var(--paper);opacity:0}
.radar-towns,.radar-queries{position:absolute;inset:0;margin:0;padding:0;list-style:none;pointer-events:none}
.radar-towns li{position:absolute;transform:translate(-50%,12px);font-size:.8125rem;font-weight:600;color:var(--bone);white-space:nowrap}
.radar-towns li::before{content:"";position:absolute;left:50%;top:-16px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--stone)}
.radar-queries li{position:absolute;transform:translate(-50%,calc(-100% - 14px));background:var(--surface-2);outline:1px solid var(--line);border-radius:999px;padding:.35rem .75rem;font-size:.875rem;font-weight:600;white-space:nowrap;transition:opacity .4s var(--ease),transform .4s var(--ease)}
.js .radar.is-live .radar-queries li{opacity:0;transform:translate(-50%,calc(-100% - 4px))}
.js .radar.is-live .radar-queries li.is-active{opacity:1;transform:translate(-50%,calc(-100% - 14px));outline-color:var(--flare)}
.radar-core-label{position:absolute;left:50%;top:50%;transform:translate(-50%,calc(-100% - 20px));text-align:center;font-size:.8125rem;color:var(--bone);line-height:1.3;white-space:nowrap}
.radar-core-label strong{display:block;color:var(--paper);font-size:1rem}
.radar-channels{position:absolute;right:0;bottom:0;display:flex;gap:.4rem}
.radar-channels span{background:var(--surface-2);outline:1px solid var(--line);border-radius:8px;padding:.3rem .6rem;font-size:.8125rem;font-weight:600;color:var(--bone)}
@media (max-width:960px){.hero-region{grid-template-columns:1fr;min-height:0}.hero-region .radar{justify-self:center;max-height:none}}
@media (max-width:600px){
  .radar-towns li{font-size:0}
  .radar-queries li{font-size:.75rem;padding:.25rem .55rem}
  .radar:not(.is-live) .radar-queries li:not(:first-child){display:none}
  .radar-channels{position:static;justify-content:center;margin-top:.5rem}
}

/* ---------- Leistungen: Liste links, eine Bühne rechts ---------- */
.svc{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(2rem,5vw,4.5rem);min-height:34rem}
.svc-list{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:.35rem}
.svc-item{border-radius:12px;transition:background-color .3s var(--ease)}
.svc-item.is-active{background:var(--surface)}
.svc-item h3{margin:0}
.svc-toggle{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.05rem 1.25rem;font-size:clamp(1.25rem,2vw,1.75rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;color:var(--bone);border-radius:12px;transition:color .25s}
.svc-toggle:hover{color:var(--paper)}
.svc-item.is-active .svc-toggle{color:var(--flare-text)}
.svc-item.is-active .svc-toggle{padding-bottom:.4rem}
.svc-detail{padding:0 1.25rem 1.25rem}
.svc-detail > p{color:var(--bone);max-width:30rem}
.svc-detail > .link{display:inline-block;margin-top:.75rem}
.svc-stage{background:var(--surface);border-radius:14px;outline:1px solid var(--line)}
.svc-panel{position:absolute;top:0;right:0;bottom:0;width:calc((100% - clamp(2rem,5vw,4.5rem)) * 1.15 / 2.15);display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,4vw,3.5rem);font-size:1.0625rem}
.svc-panel .ui{max-width:26rem;font-size:1rem}
.svc-panel .ui-van{max-width:30rem}
.js .svc-panel{animation:panel-in .5s var(--ease)}
@keyframes panel-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media (max-width:900px){
  .svc{grid-template-columns:1fr;min-height:0}
  .svc-stage{display:none}
  .svc-panel{position:static;width:auto;margin-top:1.25rem;min-height:15rem;background:var(--surface-2);border-radius:12px;padding:1.25rem}
}
#referenzen .cases{margin-top:0}

/* Oberflächen-Fragmente (data-ui) */
.ui{width:100%;max-width:30rem;font-size:.9375rem;line-height:1.45}
.ui-card{background:var(--surface-2);border-radius:9px;outline:1px solid var(--line);padding:1rem}
.ui-small{font-size:var(--fs-small);color:var(--bone)}
/* Formular */
.ui-form{display:grid;gap:.6rem}
.ui-field{background:var(--surface-3);border-radius:8px;padding:.55rem .75rem;display:flex;justify-content:space-between;gap:.75rem}
.ui-field span:first-child{color:var(--bone);font-size:var(--fs-small)}
.ui-send{display:flex;align-items:center;justify-content:center;gap:.5rem;background:var(--flare);color:var(--on-flare);font-weight:700;border-radius:8px;min-height:42px;transition:background-color .4s var(--ease)}
.ui-send.is-done{background:var(--surface-3);color:var(--ok)}
.ui-funnel{display:flex;gap:.4rem;margin-top:.9rem}
.ui-funnel span{flex:1;height:6px;border-radius:3px;background:var(--surface-4)}
.ui-funnel span.on{background:var(--flare)}
/* Maps-Eintrag */
.ui-map{display:grid;grid-template-columns:72px 1fr;gap:1rem;align-items:start}
.ui-map svg path[stroke]{stroke:var(--surface-4)}
.ui-map svg{width:72px;height:72px;border-radius:8px;background:var(--surface-3)}
.ui-map .ui-title{margin:0;font-size:1.05rem;font-weight:700}
.ui-map .row{display:flex;gap:.4rem;margin-top:.75rem;flex-wrap:wrap}
.ui-map .row span{background:var(--surface-3);border-radius:999px;padding:.25rem .65rem;font-size:.8125rem;font-weight:600}
.ui-open{color:var(--ok);font-weight:600}
/* KI-Antwort */
.ui-chat{display:grid;gap:.75rem}
.ui-q{justify-self:end;background:var(--surface-3);border-radius:12px 12px 4px 12px;padding:.6rem .85rem;max-width:85%}
.ui-a{background:var(--surface-2);outline:1px solid var(--line);border-radius:12px 12px 12px 4px;padding:.75rem .9rem}
.ui-sources{display:grid;gap:.35rem;margin-top:.6rem;padding-top:.6rem;border-top:1px solid var(--line)}
.ui-sources li{display:flex;gap:.5rem;align-items:center;font-size:var(--fs-small);color:var(--bone)}
.ui-sources li::before{content:"";width:12px;height:12px;border-radius:50%;outline:1.5px solid var(--stone);outline-offset:-1.5px;flex:none;transition:background-color .3s,outline-color .3s}
.ui-sources li.is-done::before{background:var(--flare);outline-color:var(--flare)}
.caret{display:inline-block;width:.5ch;height:1.05em;background:var(--flare);vertical-align:-.15em;margin-left:1px;animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
/* Marke */
.ui-brand{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem}
.ui-brand .tile{aspect-ratio:1;border-radius:8px;display:flex;align-items:center;justify-content:center}
.ui-brand .tile img{height:52%;width:auto}
.ui-brand .t1{background:#F2EFE9}.ui-brand .t2{background:#0B0B0B;outline:1px solid var(--line)}.ui-brand .t3{background:var(--flare)}
.ui-swatches{display:flex;gap:.4rem;margin-top:.6rem}
.ui-swatches span{flex:1;height:28px;border-radius:6px}
/* Fahrzeug */
.ui-van{width:100%;max-width:26rem}
/* Nachrichtenverlauf */
.ui-thread{display:grid;gap:.6rem}
.ui-msg{display:grid;gap:.15rem;max-width:88%}
.ui-msg.them{justify-self:start}
.ui-msg.us{justify-self:end;text-align:right}
.ui-msg p{border-radius:12px;padding:.6rem .85rem}
.ui-msg.them p{background:var(--surface-3);border-bottom-left-radius:4px}
.ui-msg.us p{background:var(--paper);color:var(--ink);border-bottom-right-radius:4px}
.ui-ticket{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:.4rem;padding:.6rem .85rem;border-radius:9px;background:var(--surface-2);outline:1px solid var(--line);font-size:var(--fs-small)}
.ui-state{display:inline-flex;align-items:center;gap:.45rem;font-weight:700;color:var(--flare-text)}
.ui-state::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor}
.ui-state.is-done{color:var(--ok)}

/* ---------- Haltung ---------- */
.stance{padding:clamp(5rem,10vw,8.5rem) var(--pad);text-align:center;background:var(--paper);color:var(--ink)}
.stance blockquote{font-size:clamp(2rem,4.2vw,3.5rem);font-weight:800;letter-spacing:-.04em;line-height:1.04;max-width:52rem;margin-inline:auto;text-wrap:balance}
.stance .stance-text{margin:2rem auto 0;max-width:40rem;color:var(--ink);font-size:1.125rem}
.stance .word{display:inline-block;transition:color .5s var(--ease)}
.stance.is-armed .word{color:var(--stance-dim)}
.stance.is-armed .word.is-lit{color:var(--ink)}
.stance ::selection{background:var(--ink);color:var(--paper)}

/* ---------- Ablauf ---------- */
.process{position:relative}
.process-line{width:100%;height:auto;margin-bottom:-1rem;overflow:visible}
.process-line path{fill:none;stroke:var(--flare);stroke-width:2.5;stroke-linecap:round}
.process-line .track{stroke:var(--surface-4);stroke-width:1.5;stroke-dasharray:4 6}
.process-line circle{fill:var(--ink);stroke:var(--flare);stroke-width:2.5}
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:2.5rem var(--steps-gap);counter-reset:step;align-items:start}
.steps li{counter-increment:step;padding-top:1rem}
.steps h3{display:flex;align-items:center;gap:.75rem;font-size:1.25rem;font-weight:700;letter-spacing:-.02em;line-height:1.2}
.steps h3::before{content:counter(step);display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--flare);color:var(--ink);font-size:.95rem;font-weight:800;flex:none}
.steps p{margin-top:.6rem;color:var(--bone)}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr;row-gap:2.5rem}.process-line{display:none}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}

/* ---------- Anfrage-Zeile ---------- */
.cta-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;margin-top:clamp(3rem,6vw,4.5rem);padding:1.5rem clamp(1.25rem,3vw,2rem);background:var(--surface);border-radius:14px;outline:1px solid var(--line)}
.cta-row p{font-size:1.375rem;font-weight:700;letter-spacing:-.025em}
@media (max-width:520px){.cta-row .btn{width:100%}}

/* ---------- Referenzliste ---------- */
.refs{display:grid}
.ref{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) 200px;gap:1.5rem;align-items:center;padding:1.25rem 0;border-top:1px solid var(--line);position:relative}
.ref:last-child{border-bottom:1px solid var(--line)}
.ref h3{font-size:clamp(1.375rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.ref h3 a{text-decoration:none}
.ref h3 a::after{content:"";position:absolute;inset:0}
.ref p{color:var(--bone)}
.ref img{width:200px;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:8px;outline:1px solid var(--line);transition:transform .5s var(--ease)}
.ref:hover h3{color:var(--flare-text)}
.ref:hover img{transform:scale(1.04)}
.ref:focus-within{outline:2px solid var(--flare);outline-offset:4px;border-radius:6px}
.ref:focus-within a:focus-visible{outline:0}
.refs-foot{margin-top:2rem}
@media (max-width:760px){.ref{grid-template-columns:1fr 120px;gap:.5rem 1rem}.ref img{width:120px;grid-row:1/3;grid-column:2}}

/* ---------- Ãœber uns ---------- */
.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);align-items:start}
.about-text h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.about-text p{margin-top:1.25rem;max-width:36rem}
.about-text p.muted{color:var(--bone)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem 2rem;margin-top:2.5rem}
.facts dt{font-size:var(--fs-small);color:var(--bone)}
.facts dd{font-weight:600}
.person{background:var(--surface);border-radius:14px;outline:1px solid var(--line);overflow:hidden}
.person-photo{aspect-ratio:4/5;background:var(--surface-2);position:relative;display:grid;place-items:center}
.person-photo canvas{position:absolute;inset:0;width:100%;height:100%}
/* Foto der Person: Platzhalter ist durchsichtig (Punktraster sichtbar); ein echtes Foto liegt darüber und ersetzt das Raster */
.person-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.person-photo:has(.person-img:not([src*="person-platzhalter"])) canvas{display:none}
.person-photo .placeholder{position:relative;z-index:1;background:var(--ink);color:var(--bone);font-size:var(--fs-small);padding:.4rem .75rem;border-radius:8px;outline:1px solid var(--line)}
.person-info{padding:1.25rem 1.5rem 1.5rem}
.person-info h3{font-size:1.375rem;font-weight:700;letter-spacing:-.02em}
.person-info p{color:var(--bone)}
@media (max-width:860px){.about{grid-template-columns:1fr}.person{max-width:26rem}}

/* ---------- Ratgeber ---------- */
.guides{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.guide{position:relative;background:var(--surface);border-radius:14px;outline:1px solid var(--line);padding:1.75rem;display:flex;flex-direction:column;gap:.75rem;min-height:15rem;transition:background-color .25s}
.guide:hover{background:var(--surface-2)}
.guide h3{font-size:1.375rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.guide h3 a{text-decoration:none}
.guide h3 a::after{content:"";position:absolute;inset:0;border-radius:14px}
.guide p{color:var(--bone)}
.guide .topic{margin-top:auto;font-size:var(--fs-small);color:var(--flare-text);font-weight:600}
.guide:focus-within{outline:2px solid var(--flare)}
.guide a:focus-visible{outline:0}
@media (max-width:900px){.guides{grid-template-columns:1fr}}

/* ---------- FAQ ---------- */
.faq{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:clamp(2rem,5vw,4rem);align-items:start}
.faq .section-head{position:sticky;top:110px;margin:0}
.faq-list{display:grid;gap:.5rem}
.faq-list details{background:var(--surface);border-radius:var(--radius);outline:1px solid var(--line);transition:background-color .25s}
.faq-list details[open]{background:var(--surface-2)}
.faq-list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:1rem;padding:1.15rem 1.35rem;font-weight:600;font-size:1.0625rem;min-height:60px}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary::after{content:"";width:14px;height:14px;flex:none;background:linear-gradient(var(--paper),var(--paper)) center/14px 2px no-repeat,linear-gradient(var(--paper),var(--paper)) center/2px 14px no-repeat;transition:transform .3s var(--ease)}
.faq-list details[open] summary::after{transform:rotate(45deg)}
.faq-list summary:hover{color:var(--flare-text)}
.faq-list .answer{padding:0 1.35rem 1.35rem;color:var(--bone);max-width:44rem}
@media (max-width:860px){.faq{grid-template-columns:1fr}.faq .section-head{position:static}}

/* ---------- Kontakt ---------- */
.contact{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.contact-side h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.contact-side > p{margin-top:1.25rem;color:var(--bone);max-width:30rem}
.contact-dots{margin-top:2rem;aspect-ratio:1;max-width:22rem;background:var(--surface);border-radius:14px;outline:1px solid var(--line);overflow:hidden}
.contact-dots canvas{width:100%;height:100%}
.contact-lines{margin-top:2rem;display:grid;gap:1rem}
.contact-lines dt{font-size:var(--fs-small);color:var(--bone)}
.contact-lines dd{font-weight:600}
.form{background:var(--surface);border-radius:14px;outline:1px solid var(--line);padding:clamp(1.25rem,3vw,2.25rem);display:grid;gap:1.25rem}
.form fieldset{border:0;padding:0;margin:0}
.form legend{font-weight:700;font-size:1.0625rem;margin-bottom:.75rem}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
.chip{position:relative}
.chip input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:.55rem .95rem;border-radius:999px;background:var(--surface-3);font-weight:500;font-size:.95rem;transition:background-color .2s,color .2s}
.chip input:hover + span{background:var(--surface-4)}
.chip input:checked + span{background:var(--flare);color:var(--on-flare);font-weight:700}
.chip input:focus-visible + span{outline:2px solid var(--flare);outline-offset:3px}
.field{display:grid;gap:.4rem}
.field label{font-weight:600;font-size:.95rem}
.field .hint{font-size:var(--fs-small);color:var(--bone)}
.field input,.field textarea{width:100%;background:var(--surface-2);color:var(--paper);border:1px solid var(--surface-4);border-radius:var(--radius);padding:.8rem .95rem;font:inherit;caret-color:var(--flare);transition:border-color .2s,background-color .2s}
.field input::placeholder,.field textarea::placeholder{color:#A7A196}
.field input:hover,.field textarea:hover{border-color:var(--stone)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--flare);background:var(--surface-3)}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:#FF7A57}
.field .error{color:#FF8A6B;font-size:var(--fs-small);font-weight:600}
.field textarea{min-height:8rem;resize:vertical}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem;align-items:start}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem}
.form-foot p{font-size:var(--fs-small);color:var(--bone);max-width:26rem}
.form-status{font-weight:600}
.form-status.is-ok{color:var(--ok)}
.hp{position:absolute;left:-9999px}
@media (max-width:900px){.contact{grid-template-columns:1fr}.contact-dots{display:none}}
@media (max-width:520px){.row-2{grid-template-columns:1fr}.form-foot .btn{width:100%}}

/* ---------- Fuß ---------- */
.site-footer{border-top:1px solid var(--line)}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:2rem;padding:clamp(3rem,6vw,4.5rem) var(--pad)}
.footer-grid h2{font-size:var(--fs-small);font-weight:600;color:var(--bone);margin-bottom:.9rem}
.footer-grid ul{display:grid;gap:.45rem}
.footer-grid a{text-decoration:none;color:var(--paper);font-weight:500}
.footer-grid a:hover{color:var(--flare-text)}
.footer-grid address{font-style:normal;color:var(--bone);line-height:1.7}
.footer-grid address a{display:block;width:fit-content}
.footer-grid .claim{font-size:1.375rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;max-width:18rem}
.footer-mark{padding:0 var(--pad);overflow:hidden}
.footer-mark img{width:100%;height:auto;filter:var(--logo-filter)}
.footer-legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;padding:1.5rem var(--pad) 2rem;font-size:var(--fs-small);color:var(--bone);border-top:1px solid var(--line);margin-top:clamp(2rem,4vw,3rem)}
.footer-legal ul{display:flex;gap:1.5rem}
.footer-legal a{color:var(--bone)}
.footer-legal a:hover{color:var(--paper)}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-grid > div:first-child{grid-column:1/-1}}

/* ---------- Unterseiten ---------- */
.crumbs ol{list-style:none;margin:0 0 1.5rem;padding:0;display:flex;flex-wrap:wrap;gap:.35rem .6rem;font-size:var(--fs-small);color:var(--bone)}
.crumbs li{display:flex;align-items:center;gap:.6rem}
.crumbs li + li::before{content:"/";color:var(--stone)}
.crumbs a{color:var(--bone);text-decoration:none}
.crumbs a:hover{color:var(--paper);text-decoration:underline}
.crumbs [aria-current]{color:var(--paper)}
.page-hero{padding:clamp(3.5rem,7vw,6rem) var(--pad) clamp(3rem,6vw,4.5rem)}
.page-hero.has-visual{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.page-hero h1{font-size:clamp(2.4rem,4.6vw,4.25rem);font-weight:800;letter-spacing:-.04em;line-height:1;text-wrap:balance;max-width:22ch}
.page-hero.has-visual h1{font-size:clamp(2.25rem,3.7vw,3.6rem)}
.page-hero .lead{margin-top:1.5rem;max-width:38rem;font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--bone)}
.page-hero .actions{margin-top:2rem}
.page-visual{background:var(--surface);border-radius:14px;outline:1px solid var(--line);min-height:20rem;display:flex;align-items:center;justify-content:center;padding:clamp(1.5rem,4vw,3rem)}
.page-visual .ui{max-width:26rem}
.page-visual .ui-van{max-width:28rem}
@media (max-width:900px){.page-hero.has-visual{grid-template-columns:1fr}.page-visual{min-height:14rem}}
@media (max-width:520px){.page-hero .actions .btn{flex:1 1 100%}}

.pains{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.pains li{background:var(--surface);border-radius:12px;outline:1px solid var(--line);padding:1.25rem 1.4rem;font-size:1.1875rem;font-weight:600;letter-spacing:-.015em;line-height:1.35;display:flex;gap:.9rem;align-items:baseline}
.pains li::before{content:"";width:10px;height:10px;border-radius:3px;background:var(--flare);flex:none;transform:translateY(-1px)}
@media (max-width:700px){.pains{grid-template-columns:1fr}}

.incl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.25rem clamp(2rem,5vw,4rem)}
.incl h3{font-size:1.3125rem;font-weight:700;letter-spacing:-.025em;line-height:1.2;padding-top:1rem;border-top:2px solid var(--flare);max-width:24rem}
.incl p{margin-top:.6rem;color:var(--bone);max-width:30rem}
@media (max-width:700px){.incl{grid-template-columns:1fr}}

.note{background:var(--paper);color:var(--ink);padding:clamp(4rem,8vw,6.5rem) var(--pad);text-align:center}
.note-text{font-size:clamp(1.75rem,3.4vw,2.75rem);font-weight:800;letter-spacing:-.035em;line-height:1.08;max-width:44rem;margin-inline:auto;text-wrap:balance}
.note-sub{margin:1.5rem auto 0;max-width:38rem;font-size:1.0625rem}
.note ::selection{background:var(--ink);color:var(--paper)}
.note .link{color:var(--ink)}

.svc-rows{list-style:none;margin:0;padding:0;display:grid}
.svc-row{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1rem 3rem;align-items:baseline;padding:1.75rem 0;border-top:1px solid var(--line)}
.svc-row:last-child{border-bottom:1px solid var(--line)}
.svc-row h2{font-size:clamp(1.75rem,3.2vw,2.75rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;text-wrap:balance}
.svc-row h2 a{text-decoration:none}
.svc-row h2 a::after{content:"";position:absolute;inset:0}
.svc-row p{color:var(--bone);font-size:1.0625rem}
.svc-row:hover h2{color:var(--flare-text)}
.svc-row:focus-within{outline:2px solid var(--flare);outline-offset:4px;border-radius:6px}
.svc-row a:focus-visible{outline:0}
@media (max-width:760px){.svc-row{grid-template-columns:1fr}}

.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(2rem,5vw,4rem);align-items:center}
.split-text h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1.02}
.split-text p{margin-top:1.25rem;color:var(--bone);max-width:34rem}
.split-visual{background:var(--surface);border-radius:14px;outline:1px solid var(--line);padding:clamp(1.5rem,4vw,3rem);display:flex;justify-content:center}
@media (max-width:860px){.split{grid-template-columns:1fr}}

.cta-section{padding-block:clamp(3rem,6vw,4.5rem)}
.cta-section .cta-row{margin-top:0}

.projects{display:grid;gap:clamp(4rem,8vw,6rem)}
.project{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:center}
.project:nth-child(even) .project-shots{order:2}
.project-shots{position:relative;padding-right:clamp(2.5rem,6vw,5rem);padding-bottom:clamp(1.5rem,3vw,2.5rem)}
.shot-d{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top;border-radius:12px;outline:1px solid var(--line)}
.shot-m{position:absolute;right:0;bottom:0;width:clamp(5.5rem,13vw,9.5rem);aspect-ratio:390/844;object-fit:cover;object-position:top;border-radius:14px;outline:4px solid var(--ink);box-shadow:0 20px 40px -20px rgba(0,0,0,.8)}
.project-info{display:flex;flex-direction:column;gap:1rem}
.project-info h2{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.project-info .case-label{margin-top:.5rem}
@media (max-width:860px){.project{grid-template-columns:1fr}.project:nth-child(even) .project-shots{order:0}}

.article-wrap{display:grid;grid-template-columns:minmax(0,1fr) 16rem;gap:clamp(2rem,5vw,4rem);align-items:start}
.article{display:grid;grid-template-columns:14rem minmax(0,1fr);gap:clamp(2rem,4vw,3.5rem);align-items:start}
.toc{position:sticky;top:100px}
.toc-title{font-size:var(--fs-small);font-weight:600;color:var(--bone);margin-bottom:.75rem}
.toc ol{margin:0;padding-left:1.1rem;display:grid;gap:.5rem;font-size:.9375rem}
.toc a{color:var(--paper);text-decoration:none}
.toc a:hover{color:var(--flare-text);text-decoration:underline}
.prose{max-width:42rem;font-size:1.0625rem;line-height:1.7}
.prose section + section{margin-top:3rem}
.prose h2{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.15;margin-bottom:1rem;text-wrap:balance}
.prose p + p,.prose p + ul,.prose ul + p{margin-top:1rem}
.prose ul{padding-left:1.2rem;display:grid;gap:.6rem}
.prose li::marker{color:var(--flare)}
.prose strong{color:var(--paper);font-weight:700}
.prose a{color:var(--paper)}
.byline{margin-top:3rem;padding-top:1.25rem;border-top:1px solid var(--line);color:var(--bone);font-size:var(--fs-small)}
.related{position:sticky;top:100px}
.related ul{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
@media (max-width:1100px){.article-wrap{grid-template-columns:1fr}.related{position:static}}
@media (max-width:760px){.article{grid-template-columns:1fr}.toc{position:static;background:var(--surface);border-radius:12px;padding:1.25rem}}

.next-title{margin-top:2.5rem;font-size:1.125rem;font-weight:700}
.next-steps{margin:.9rem 0 0;padding:0;list-style:none;counter-reset:n;display:grid;gap:.7rem}
.next-steps li{counter-increment:n;display:flex;gap:.75rem;align-items:baseline}
.next-steps li::before{content:counter(n);display:inline-grid;place-items:center;width:1.6rem;height:1.6rem;border-radius:50%;background:var(--surface-3);font-size:.8125rem;font-weight:700;flex:none}
.legal .prose{color:var(--bone)}
.guide h2{font-size:1.375rem;font-weight:700;letter-spacing:-.025em;line-height:1.2}
.guide h2 a{text-decoration:none}
.guide h2 a::after{content:"";position:absolute;inset:0;border-radius:14px}


/* ---------- Asymmetrie: einzelne Blöcke laufen bis an den Bildschirmrand ---------- */
@media (min-width:1100px){
  .bleed-r{margin-right:calc(50% - 50vw)}
  .bleed-l{margin-left:calc(50% - 50vw)}
  .svc.bleed-r .svc-stage{border-radius:14px 0 0 14px;outline:0}
  .svc.bleed-r .svc-panel{width:calc((100% - clamp(2rem,5vw,4.5rem)) * 1.25 / 2.25);padding-right:max(1.5rem,calc(50vw - 620px))}
  .svc.bleed-r{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
  .cases.bleed-r .case{border-radius:14px 0 0 14px}
  .cases.bleed-r .case-tabs{margin-left:0;margin-right:auto}
}
.stance{margin-inline:calc(50% - 50vw);position:relative;z-index:1}

/* ---------- Ablauf: Linie läuft genau durch die Punkte ---------- */
.steps{position:relative}
.steps-track{position:absolute;left:1rem;right:calc((100% - 3 * var(--steps-gap)) / 4 - 1rem);top:calc(1rem + 1rem - 1px);height:2px;background:var(--surface-4);pointer-events:none}
.steps-track span{position:absolute;inset:0;background:var(--flare);transform-origin:left;transform:scaleX(var(--p,1))}
.steps h3{position:relative;z-index:1}
.steps h3::before{background:var(--flare);color:var(--on-flare);box-shadow:0 0 0 6px var(--ink)}
.band .steps h3::before{box-shadow:0 0 0 6px var(--band)}
@media (max-width:860px){.steps-track{display:none}}

/* ---------- Video ---------- */
.video-block{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
.video-frame{margin:0;background:#F2EFE9;border-radius:0 14px 14px 0;overflow:hidden}
.video-frame video{display:block;width:100%;height:auto;background:#F2EFE9}
.video-frame .v-tall{display:none}
.video-copy h2{font-size:var(--fs-h2);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-wrap:balance}
.video-copy > p{margin-top:1.25rem;color:var(--bone);max-width:32rem}
.video-copy .actions{margin-top:1.75rem}
.video-copy ul{margin:1.25rem 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:.5rem}
.video-copy li{background:var(--surface-3);border-radius:8px;padding:.35rem .7rem;font-size:.9375rem;font-weight:600}
.transcript{margin-top:1.5rem;color:var(--bone);font-size:var(--fs-small)}
.transcript summary{cursor:pointer;font-weight:600;color:var(--paper)}
.transcript p{margin-top:.75rem;max-width:36rem}
@media (max-width:1099px){.video-frame{border-radius:14px}}
@media (max-width:860px){.video-block{grid-template-columns:1fr}.video-frame .v-wide{display:none}.video-frame .v-tall{display:block;max-height:80svh;width:auto;margin-inline:auto}.video-frame{background:transparent}}

/* ---------- Karriere ---------- */
.roles{display:grid;gap:.75rem}
.role{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:1rem 3rem;padding:1.75rem;background:var(--surface);border-radius:14px;outline:1px solid var(--line)}
.role h3{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:700;letter-spacing:-.03em;line-height:1.1}
.role .role-type{margin-top:.5rem;color:var(--flare-text);font-weight:600;font-size:var(--fs-small)}
.role-body{display:grid;gap:1rem}
.role-body h4{margin:0;font-size:var(--fs-small);font-weight:600;color:var(--bone)}
.role-body ul{margin:.4rem 0 0;padding-left:1.1rem;display:grid;gap:.35rem}
.role-body li::marker{color:var(--flare-text)}
@media (max-width:760px){.role{grid-template-columns:1fr}}

/* ---------- Ratgeber: Kategorien ---------- */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:2rem}
.filters button{border:0;cursor:pointer;min-height:44px;padding:.55rem 1rem;border-radius:999px;background:var(--surface-3);font-weight:600;font-size:.95rem;transition:background-color .2s,color .2s}
.filters button:hover{background:var(--surface-4)}
.filters button[aria-pressed="true"]{background:var(--paper);color:var(--ink)}
.guide[hidden]{display:none}
.cat-chip{display:inline-flex;align-items:center;min-height:32px;padding:.3rem .8rem;border-radius:999px;background:var(--surface-3);font-size:var(--fs-small);font-weight:600;text-decoration:none;color:var(--paper);margin-bottom:1rem}
.cat-chip:hover{color:var(--flare-text)}
.teaser-box{margin-top:2.5rem;padding:1.75rem;border-radius:14px;background:var(--surface);outline:1px solid var(--line)}
.teaser-box h2{font-size:1.5rem}
.teaser-box p{color:var(--bone)}
.teaser-box .btn{margin-top:1.25rem}


/* ---------- Schreibregel: Überschriften und Bedienelemente klein, Fließtext normal ---------- */
h1,h2,h3,h4,.btn,.nav-link,.nav-toggle,.mega-title,.mega-side-title,.mega-all,.crumbs,.case-name,.case-label,.case-bar,.case-tabs button,
.stance blockquote,.note-text,.cta-row p,.claim,.faq-list summary,.form legend,.field label,.chip span,.funnel-q,.contact-lines dt,.facts dt,
.filters button,.cat-chip,.topic,.toc-title,.ui-small,.mega-desc,.next-title,.role-type,.svc-toggle,.radar-core-label strong,.transcript summary{text-transform:lowercase}

/* ---------- Referenzen: breit und mittig über den Rahmen hinaus ---------- */
@media (min-width:1100px){
  .wide{width:min(calc(100vw - 2 * var(--pad)),1560px);margin-left:calc(50% - min(calc(100vw - 2 * var(--pad)),1560px) / 2)}
}

/* ---------- Mitfahrender Anfrage-Knopf ---------- */
.float-cta{position:fixed;left:50%;bottom:1.25rem;z-index:45;transform:translate(-50%,140%);box-shadow:0 18px 40px -16px rgba(0,0,0,.55);min-height:52px;padding:.85rem 1.6rem;font-size:1.0625rem;transition:transform .45s var(--ease),background-color .2s}
.float-cta.is-shown{transform:translate(-50%,0)}
.float-cta:focus{transform:translate(-50%,0)}

/* ---------- Leistungen: bleibt beim Scrollen stehen und schaltet weiter ---------- */
@media (min-width:1100px){
  .svc-pin.is-pinned > .svc{position:sticky;top:calc(72px + 6vh)}
}
.svc-progress{position:absolute;left:0;bottom:-1.5rem;height:3px;width:calc(100% - (100% - clamp(2rem,5vw,4.5rem)) * 1.25 / 2.25 - clamp(2rem,5vw,4.5rem));background:var(--surface-3);border-radius:2px;overflow:hidden}
.svc-progress span{position:absolute;inset:0;background:var(--flare);transform-origin:left;transform:scaleX(var(--p,0))}
@media (max-width:1099px){.svc-progress{display:none}}

/* ---------- Anfrage-Funnel ---------- */
.funnel{gap:1.5rem}
.funnel-bar{display:flex;align-items:center;gap:1rem}
.funnel-track{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:.35rem}
.funnel-track span{height:5px;border-radius:3px;background:var(--surface-3);transition:background-color .3s}
.funnel-track span.on{background:var(--flare)}
.funnel-count{font-size:var(--fs-small);color:var(--bone);font-variant-numeric:tabular-nums;white-space:nowrap}
.funnel-step{border:0;margin:0;padding:0;display:grid;gap:1.1rem}
.form .funnel-q,.funnel-q{font-size:clamp(1.375rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.03em;line-height:1.15;padding:0}
.funnel-sub{color:var(--bone);margin-top:-.5rem}
.js .funnel-step:not(.is-current){display:none}
.js .funnel-step.is-current{animation:step-in .45s var(--ease)}
@keyframes step-in{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:1fr;gap:.5rem}
.tile-opt{position:relative;display:flex}
.tile-opt input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.tile-opt span{flex:1;display:flex;flex-direction:column;gap:.2rem;min-height:5.25rem;justify-content:center;padding:.85rem 1rem;border-radius:12px;background:var(--surface-2);outline:1px solid var(--line);font-weight:700;transition:background-color .2s,color .2s,transform .2s var(--ease)}
.tile-opt span small{font-weight:500;font-size:.875rem;color:var(--bone);text-transform:none}
.tile-opt input:hover + span{background:var(--surface-3)}
.tile-opt input:checked + span{background:var(--flare);color:#0B0B0B;outline-color:var(--flare)}
.tile-opt input:checked + span small{color:#0B0B0B}
.tile-opt input:focus-visible + span{outline:2px solid var(--flare);outline-offset:3px}
.tile-opt span{text-transform:lowercase}
.funnel-nav{display:flex;flex-wrap:wrap;gap:.75rem;align-items:center;justify-content:space-between}
.funnel-nav .btn-ghost[hidden]{display:none}
.funnel-done{display:grid;gap:.75rem;padding:1rem 0}
.funnel-done-title{font-size:1.75rem;font-weight:800;letter-spacing:-.03em;text-transform:lowercase}
.no-js-note{font-size:var(--fs-small);color:var(--bone)}
.js .no-js-note{display:none}
@media (max-width:520px){.tiles{grid-template-columns:1fr}.funnel-nav .btn{flex:1 1 auto}}


/* Inhalte liegen über der Signallinie */
main .frame > section,main .frame > .seam{position:relative;z-index:1}
main .frame > .hero-region{z-index:3}

/* ---------- Funnel: als Formular klar erkennbar, Gegenfläche ---------- */
.funnel{background:var(--inv-bg);color:var(--inv-fg);outline:0;box-shadow:0 30px 60px -30px rgba(0,0,0,.45);--surface-2:var(--inv-card);--surface-3:var(--inv-card);--line:rgba(127,127,127,.28);--bone:var(--inv-muted);--paper:var(--inv-fg)}
.funnel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:1rem}
.funnel-title{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:800;letter-spacing:-.035em;line-height:1.05;text-transform:lowercase}
.funnel-title em{font-style:normal;color:var(--inv-flare)}
.funnel-facts{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem}
.funnel-facts span{font-size:.8125rem;font-weight:600;padding:.25rem .6rem;border-radius:999px;background:var(--inv-card);color:var(--inv-fg);text-transform:lowercase}
.funnel-who{display:flex;align-items:center;gap:.6rem;font-size:.8125rem;color:var(--inv-muted);text-align:right}
.funnel-who strong{display:block;color:var(--inv-fg);font-size:.875rem}
.funnel-who .who-dot{width:40px;height:40px;border-radius:50%;background:var(--flare);color:#0B0B0B;display:grid;place-items:center;font-weight:800;font-size:.95rem;flex:none}
.funnel .funnel-track span{background:var(--inv-card)}
.funnel .funnel-track span.on{background:var(--flare)}
.funnel .tile-opt span{background:var(--inv-card);outline-color:transparent;color:var(--inv-fg)}
.funnel .tile-opt span small{color:var(--inv-muted)}
.funnel .tile-opt input:hover + span{outline:2px solid var(--flare);outline-offset:-2px}
.funnel .field input,.funnel .field textarea{background:var(--inv-card);color:var(--inv-fg);border-color:transparent}
.funnel .field input::placeholder,.funnel .field textarea::placeholder{color:var(--inv-muted)}
.funnel .field input:focus,.funnel .field textarea:focus{border-color:var(--flare);background:var(--inv-card)}
.funnel .btn-ghost{background:var(--inv-card);color:var(--inv-fg)}
.funnel .form-legal,.funnel .form-legal a{color:var(--inv-muted)}
.funnel .form-legal a{text-decoration:underline}
.funnel .error{color:#FF8A6B}
.funnel-done{background:var(--inv-bg);color:var(--inv-fg);border-radius:14px;padding:2rem}
@media (max-width:520px){.funnel-head{flex-direction:column}.funnel-who{text-align:left}}

/* ---------- Ratgeber-Block auf der Startseite: orange Fläche ---------- */
.flare-band{background:var(--flare);color:#0B0B0B;box-shadow:0 0 0 100vmax var(--flare);clip-path:inset(0 -100vmax)}
.flare-band .section-head h2,.flare-band .section-head p{color:#0B0B0B}
.flare-band .section-head h2 em{color:#0B0B0B;text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.12em}
.flare-band .guide{background:#F2EFE9;color:#0B0B0B;outline:0}
.flare-band .guide:hover{background:#FFFFFF}
.flare-band .guide p{color:#3A3834}
.flare-band .guide .topic{color:#B33610}
.flare-band .guide h3 a{color:#0B0B0B}
.flare-band .guide:focus-within{outline:2px solid #0B0B0B}
.flare-band .blog-cta{margin-top:2rem;display:flex;flex-wrap:wrap;gap:.75rem;align-items:center}
.flare-band ::selection{background:#0B0B0B;color:#F2EFE9}
.flare-band :focus-visible{outline-color:#0B0B0B}

/* ---------- Karriere im Mega-Menü ---------- */
.mega-jobs .mega-inner{grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) minmax(16rem,1fr)}
.mega-intro{display:flex;flex-direction:column;justify-content:flex-end;gap:.75rem;padding:1rem 0}
.mega-intro-title{font-size:clamp(2rem,3.2vw,3rem);font-weight:800;letter-spacing:-.045em;line-height:.95;text-transform:lowercase}
.mega-intro-title em{font-style:normal;color:var(--inv-flare)}
.mega-intro p{color:var(--inv-muted);max-width:22rem}
.mega-jobs .mega-list{grid-template-columns:1fr}
.mega-jobs .mega-list a{flex-direction:row;align-items:baseline;justify-content:space-between;gap:1rem;border-bottom:1px solid rgba(127,127,127,.25);border-radius:0;padding:1.1rem .25rem}
.mega-jobs .mega-list a:hover,.mega-jobs .mega-list a:focus-visible{border-radius:12px;padding-inline:1.1rem}
.mega-type{font-size:.875rem;font-weight:700;padding:.25rem .65rem;border-radius:999px;background:var(--inv-card);color:var(--inv-fg);white-space:nowrap;text-transform:lowercase}
.mega-jobs .mega-list a:hover .mega-type{background:#0B0B0B;color:#F2EFE9}
@media (max-width:1060px){.mega-jobs .mega-inner{grid-template-columns:1fr}.mega-intro{display:none}}

/* ---------- Fotos ---------- */
.page-visual.is-photo{padding:0;overflow:hidden;min-height:0;aspect-ratio:3/2;align-self:center}
.page-photo{width:100%;height:100%;object-fit:cover;display:block}
.photo-band{margin:0;padding:clamp(1rem,3vw,2rem) var(--pad) 0}
.photo-band img{width:100%;height:auto;aspect-ratio:3/2;max-height:70svh;object-fit:cover;border-radius:14px}
.guide .thumb{width:calc(100% + 3.5rem);max-width:none;margin:-1.75rem -1.75rem .5rem;aspect-ratio:3/2;object-fit:cover;border-radius:14px 14px 0 0}
.guide{overflow:hidden}
.svc-row.has-thumb{grid-template-columns:minmax(0,1fr) minmax(0,1fr) 180px}
.svc-row .thumb{width:180px;aspect-ratio:3/2;object-fit:cover;border-radius:10px;transition:transform .5s var(--ease)}
.svc-row:hover .thumb{transform:scale(1.04)}
@media (max-width:760px){.svc-row.has-thumb{grid-template-columns:1fr}.svc-row .thumb{width:100%;order:-1}}

/* ---------- Bewegung ---------- */
.reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .reveal:not(.is-in){opacity:0;transform:translateY(24px)}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .js .reveal:not(.is-in){opacity:1;transform:none}
  .signal{display:none}
  .stance.is-armed .word{color:var(--ink)}
}
html.bbd-a11y-no-motion *,html.bbd-a11y-no-motion *::before,html.bbd-a11y-no-motion *::after{animation:none!important;transition:none!important}
html.bbd-a11y-no-motion .js .reveal,html.bbd-a11y-no-motion.js .reveal{opacity:1!important;transform:none!important}
html.bbd-a11y-no-motion .signal{display:none}
html.bbd-a11y-no-motion .stance .word{color:var(--ink)!important}
.page-visual .video-frame{border-radius:12px;width:100%;overflow:hidden}
.page-visual.bleed-r{border-radius:14px 0 0 14px}
@media (max-width:1099px){.page-visual.bleed-r{border-radius:14px}}
.footer-grid .claim em{font-style:normal;color:var(--flare-text)}
.footer-grid .claim-sub{margin-top:.6rem;color:var(--bone);font-size:.9375rem}
.steps li.steps-track{counter-increment:none;padding:0}
.steps h3{display:grid;justify-items:start;gap:.9rem}
.page-visual.bleed-r:has(.video-frame){margin-right:0;border-radius:14px;padding:clamp(1rem,2.5vw,2rem)}

@media (prefers-reduced-motion:reduce){.svc-pin.is-pinned{height:auto}.svc-pin.is-pinned > .svc{position:relative;top:auto}.float-cta{transition:none}}
.form-legal{font-size:var(--fs-small);color:var(--bone);max-width:34rem}
.nav.is-open .nav-list > li:nth-child(6){transition-delay:.25s}
.filters a{display:inline-flex;align-items:center;min-height:44px;padding:.55rem 1rem;border-radius:999px;background:var(--surface-3);font-weight:600;font-size:.95rem;text-decoration:none;color:var(--paper);text-transform:lowercase;transition:background-color .2s}
.filters a:hover{background:var(--surface-4)}
.filters a[aria-current="page"]{background:var(--paper);color:var(--ink)}
.bbd-post-meta{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-top:1.25rem;color:var(--bone);font-size:var(--fs-small)}
.bbd-post-meta .cat-chip{margin:0}
.bbd-post-image{margin:0 0 2rem}.bbd-post-image img{border-radius:14px;width:100%;height:auto}
.related .filters{flex-direction:column;align-items:flex-start;gap:.4rem;margin:0}
.nav-links{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:2rem}.nav-links a,.nav-links span{display:inline-grid;place-items:center;min-width:44px;min-height:44px;padding:0 .8rem;border-radius:10px;background:var(--surface-3);text-decoration:none;color:var(--paper)}
.nav-links .current{background:var(--paper);color:var(--ink)}


/* ---------- Leistungen: gemeinsamer Kasten, läuft normal mit (kein Anhalten) ---------- */
.svc.wide{--svc-pad:clamp(1.25rem,3vw,3rem);--svc-gap:clamp(2rem,5vw,4.5rem);padding:var(--svc-pad);background:var(--surface-2);border-radius:22px;--surface:var(--ink);position:relative;z-index:2}
@media (min-width:901px){
  .svc.wide .svc-panel{top:var(--svc-pad);right:var(--svc-pad);bottom:var(--svc-pad);width:calc((100% - 2 * var(--svc-pad) - var(--svc-gap)) * 1.15 / 2.15)}
}
.svc.wide .svc-progress{left:var(--svc-pad);bottom:calc(var(--svc-pad) * .45);width:calc((100% - 2 * var(--svc-pad) - var(--svc-gap)) / 2.15)}

/* ---------- Runde 5 ---------- */
/* Icons */
.ic{width:1.5rem;height:1.5rem;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none;display:block}

/* Mega-Menü: volle Breite, Inhalt auf 1240 px */
.mega-inner{max-width:1240px;margin-inline:auto}
.mega-list a{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:center}
.mega-ic{grid-row:span 2;width:52px;height:52px;border-radius:14px;background:var(--inv-card);color:var(--flare);display:grid;place-items:center;transition:background-color .2s,color .2s,transform .3s var(--ease)}
.mega-ic .ic{width:26px;height:26px}
.mega-list a:hover .mega-ic,.mega-list a:focus-visible .mega-ic{background:#0B0B0B;color:var(--flare);transform:rotate(-6deg)}
.mega-jobs .mega-list a{grid-template-columns:auto minmax(0,1fr) auto}
.mega-jobs .mega-ic{grid-row:auto;width:44px;height:44px}
@media (max-width:1100px){.mega-ic{width:40px;height:40px;border-radius:11px}.mega-ic .ic{width:21px;height:21px}}

/* Leistungen auf der Startseite */
.svc-toggle{display:flex;align-items:center;gap:.9rem}
.svc-toggle .ic{width:2.5rem;height:2.5rem;padding:.5rem;border-radius:11px;background:var(--surface-3);color:var(--paper);transition:background-color .25s,color .25s}
.svc-item.is-active .svc-toggle .ic{background:var(--flare);color:#0B0B0B}

/* Funnel-Kacheln */
.tile-opt span .ic{color:var(--flare);margin-bottom:.4rem}

/* Radar: Punkte statt Ortsnamen */
.radar .pts circle{fill:var(--stone)}

/* Formular-Kopf: Logo-Zeichen statt Initialen */
.funnel-who .who-dot img{width:auto;height:22px;filter:none}

/* Ratgeber-Block: Orange gedämpft */
:root{--blog-bg:#3A1D13;--blog-fg:#F2EFE9;--blog-em:#FF4D1F}
:root:not([data-theme="dark"]){--blog-bg:#FCC6AE;--blog-fg:#0B0B0B;--blog-em:#B33610}
.flare-band{background:var(--blog-bg);color:var(--blog-fg);box-shadow:0 0 0 100vmax var(--blog-bg)}
.flare-band .section-head h2,.flare-band .section-head p{color:var(--blog-fg)}
.flare-band .section-head h2 em{color:var(--blog-em);text-decoration:none}
[data-theme="dark"] .flare-band .btn-dark{background:var(--flare);color:#0B0B0B}
[data-theme="dark"] .flare-band ::selection{background:var(--flare);color:#0B0B0B}
[data-theme="dark"] .flare-band :focus-visible{outline-color:var(--flare)}
@media (min-width:1101px){
  #mega-leistungen .mega-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:.4rem 1.5rem}
  .mega-title{font-size:clamp(1.35rem,1.7vw,1.75rem)}
}

/* Karriere-Menü: jede Stelle in einer Zeile */
.mega-jobs .mega-title{white-space:nowrap;font-size:clamp(1.2rem,1.55vw,1.6rem)}
.mega-jobs .mega-list a{padding-block:.85rem}

/* Hero: Punktraster über die ganze Breite, nach außen ausgeblendet */
.hero-region{position:relative}
.hero-region::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:100vw;transform:translateX(-50%);z-index:0;pointer-events:none;
  background:radial-gradient(circle,var(--surface-4) 1.2px,transparent 1.7px) 0 0/16px 16px;
  -webkit-mask:radial-gradient(ellipse 70% 85% at 62% 50%,#000 20%,rgba(0,0,0,.35) 60%,transparent 100%);
  mask:radial-gradient(ellipse 70% 85% at 62% 50%,#000 20%,rgba(0,0,0,.35) 60%,transparent 100%)}
.hero-region > *{position:relative;z-index:1}
.radar-map > rect{display:none}
@media (min-width:1101px){
  .mega-jobs .mega-inner{grid-template-columns:minmax(0,.85fr) minmax(0,2.2fr) minmax(15rem,.9fr)}
  .mega-jobs .mega-title{font-size:clamp(1.1rem,1.3vw,1.3rem)}
}

/* ---------- Leistungen als stehende Szene, Referenzen schieben sich darüber ---------- */
.svc-scene{position:relative;z-index:1}
.svc-scene.is-pinned .svc-sticky{position:sticky}
.svc-scene.is-compact #leistungen{padding-block:clamp(1.5rem,4vh,3rem)}
.svc-scene.is-compact #leistungen .section-head{margin-bottom:clamp(1.25rem,3vh,2rem)}
.svc-scene.is-compact #leistungen .section-head p{margin-top:.6rem}
.svc-scene.is-compact .svc.wide{--svc-pad:clamp(1.25rem,2.4vw,2rem);min-height:0}
.svc-scene.is-compact .svc-toggle{padding-block:.7rem}
.svc-scene.is-compact .svc-item.is-active .svc-toggle{padding-bottom:.3rem}
.svc-next{position:relative;z-index:2;box-shadow:0 0 0 100vmax var(--band),0 -40px 70px -30px rgba(0,0,0,.28);clip-path:inset(-120px -100vmax 0)}
.svc-scene.is-compact #leistungen{padding-block:clamp(1rem,2.6vh,2.5rem)}
.svc-scene.is-compact #leistungen .section-head{margin-bottom:clamp(1rem,2.2vh,2rem)}
.svc-scene.is-compact .svc-toggle{padding-block:.6rem}

/* ---------- Runde 8 ---------- */
/* Funnel: Auswahl als kompakte Liste */
.tiles-list{grid-template-columns:1fr;grid-auto-rows:auto;gap:.3rem}
.tiles-list .tile-opt span{flex-direction:row;align-items:center;justify-content:flex-start;gap:.75rem;min-height:0;padding:.65rem .9rem}
.tiles-list .tile-opt span .ic{margin:0;width:1.25rem;height:1.25rem}
.tiles-list .tile-opt span small{margin-left:auto;text-align:right;font-size:.8125rem}
@media (max-width:420px){.tiles-list .tile-opt span small{display:none}}

/* FAQ: Überschrift läuft nicht mit */
.faq .section-head{position:static}

/* Ratgeber-Block: Gegenfläche statt Orange (hell: schwarz, dunkel: hell) */
:root{--blog-bg:var(--inv-bg);--blog-fg:var(--inv-fg);--blog-em:#B33610;--blog-topic:#B33610}
:root:not([data-theme="dark"]){--blog-bg:var(--inv-bg);--blog-fg:var(--inv-fg);--blog-em:#FF4D1F;--blog-topic:#FF8A6B}
.flare-band .section-head p{color:var(--inv-muted)}
.flare-band .guide{background:var(--inv-card);color:var(--inv-fg)}
.flare-band .guide:hover{background:var(--inv-card);outline:2px solid var(--flare);outline-offset:-2px}
.flare-band .guide p{color:var(--inv-muted)}
.flare-band .guide .topic{color:var(--blog-topic)}
.flare-band .guide h3 a{color:var(--inv-fg)}
.flare-band .guide:focus-within{outline:2px solid var(--flare)}
.flare-band ::selection{background:var(--flare);color:#0B0B0B}
.flare-band :focus-visible{outline-color:var(--flare)}

/* Auswertung im Leistungs-Panel */
.ui-stats{display:grid;gap:.7rem;min-width:min(22rem,100%)}
.ui-bars{list-style:none;margin:0;padding:0;display:grid;gap:.5rem}
.ui-bars li{display:grid;grid-template-columns:6.5rem 1fr;align-items:center;gap:.6rem;font-size:var(--fs-small)}
.ui-bars i{display:block;height:8px;width:var(--w);border-radius:4px;background:var(--flare);transform-origin:left;animation:bar-in 1s var(--ease) both}
.ui-bars li:nth-child(2) i{animation-delay:.12s;opacity:.75}
.ui-bars li:nth-child(3) i{animation-delay:.24s;opacity:.5}
.ui-hint{font-size:var(--fs-small);color:var(--paper);font-weight:600}
@keyframes bar-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){.ui-bars i{animation:none}}

/* Referenzen: oben etwas mehr Luft als unten, aber kein Loch */
.svc-next{padding-top:clamp(4.5rem,8vw,7rem);padding-bottom:clamp(4rem,6.5vw,6rem)}

/* ---------- Runde 9 ---------- */
/* Grundsatz-Block über die volle Breite */
.note.bleed{box-shadow:0 0 0 100vmax var(--paper);clip-path:inset(0 -100vmax)}

/* „jetzt neu“: Erklärvideos */
.news-bar{position:relative;display:flex;align-items:center;gap:clamp(1rem,2.5vw,2rem);margin:0 0 clamp(2.5rem,5vw,4rem);padding:clamp(1.1rem,2.2vw,1.6rem) clamp(1.25rem,3vw,2.25rem);border-radius:20px;background:var(--flare);color:#0B0B0B;text-decoration:none;overflow:hidden;isolation:isolate;transition:transform .35s var(--ease),box-shadow .35s var(--ease)}
.news-bar::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(circle,rgba(11,11,11,.16) 1.2px,transparent 1.7px) 0 0/14px 14px;-webkit-mask:linear-gradient(90deg,transparent 35%,#000);mask:linear-gradient(90deg,transparent 35%,#000)}
.news-bar:hover{transform:translateY(-3px);box-shadow:0 24px 50px -28px rgba(255,77,31,.8)}
.news-pill{display:inline-flex;align-items:center;gap:.5rem;flex:none;padding:.4rem .85rem;border-radius:999px;background:#0B0B0B;color:#F2EFE9;font-weight:800;font-size:.875rem;text-transform:lowercase;letter-spacing:.01em}
.news-dot{width:8px;height:8px;border-radius:50%;background:var(--flare);box-shadow:0 0 0 0 rgba(255,77,31,.7);animation:news-ping 1.8s ease-out infinite}
@keyframes news-ping{0%{box-shadow:0 0 0 0 rgba(255,77,31,.7)}80%,100%{box-shadow:0 0 0 9px rgba(255,77,31,0)}}
.news-text{flex:1;font-size:1.0625rem;line-height:1.35}
.news-text strong{display:block;font-size:clamp(1.3rem,2.2vw,1.75rem);font-weight:800;letter-spacing:-.03em;text-transform:lowercase;line-height:1.1;margin-bottom:.2rem}
.news-play{flex:none;display:grid;place-items:center;width:clamp(3.25rem,5vw,4.25rem);aspect-ratio:1;border-radius:50%;background:#0B0B0B;transition:transform .35s var(--ease)}
.news-play svg{width:46%;height:46%;fill:var(--flare);margin-left:6%}
.news-bar:hover .news-play{transform:scale(1.08)}
.news-bar:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
@media (max-width:640px){.news-bar{flex-wrap:wrap}.news-play{display:none}.news-text{flex-basis:100%}}
@media (prefers-reduced-motion:reduce){.news-dot{animation:none}.news-bar,.news-play{transition:none}}

/* ---------- KI-Hinweis auf den Fotos ---------- */
.ki{position:relative;display:block}
.ki-badge{position:absolute;top:.65rem;left:.65rem;z-index:1;display:inline-flex;align-items:center;gap:.3rem;padding:.28rem .6rem;border-radius:999px;background:rgba(11,11,11,.66);color:#F2EFE9;font-size:.6875rem;font-weight:700;line-height:1.2;letter-spacing:.01em;text-transform:lowercase;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);pointer-events:none}
.ki-badge svg{width:.8rem;height:.8rem;fill:#FF4D1F;flex:none}
.page-visual.is-photo .ki{height:100%}
.page-visual.is-photo .ki-badge,.photo-band .ki-badge{top:1rem;left:1rem;font-size:.75rem}
.guide .ki{width:calc(100% + 3.5rem);margin:-1.75rem -1.75rem .5rem}
.guide .ki .thumb{width:100%;margin:0}
.svc-row .ki{width:180px}
.svc-row .ki .thumb{width:100%}
.svc-row .ki-badge{top:.4rem;left:.4rem;font-size:.625rem;padding:.2rem .45rem}
@media (max-width:760px){.svc-row .ki{width:100%;order:-1}}

/* ---------- Videorahmen: klar vom Hintergrund getrennt ---------- */
.video-frame{position:relative;padding:clamp(.5rem,1vw,.85rem);background:var(--inv-bg);border-radius:22px;box-shadow:0 30px 60px -32px rgba(0,0,0,.5)}
.video-frame.bleed-l{border-radius:0 22px 22px 0}
.video-frame video{border-radius:14px;background:#F2EFE9}
.video-play{position:absolute;left:50%;top:72%;transform:translate(-50%,-50%);width:clamp(3.75rem,6vw,5rem);aspect-ratio:1;border:0;border-radius:50%;background:var(--flare);display:grid;place-items:center;cursor:pointer;box-shadow:0 0 0 10px rgba(255,77,31,.22),0 18px 40px -16px rgba(0,0,0,.5);transition:transform .3s var(--ease),opacity .25s,box-shadow .3s}
.video-play svg{width:42%;height:42%;fill:#0B0B0B;margin-left:6%}
.video-play:hover{transform:translate(-50%,-50%) scale(1.07);box-shadow:0 0 0 14px rgba(255,77,31,.25),0 18px 40px -16px rgba(0,0,0,.5)}
.video-play:focus-visible{outline:3px solid var(--paper);outline-offset:4px}
.video-frame.is-playing .video-play{opacity:0;pointer-events:none}
@media (max-width:1099px){.video-frame.bleed-l{border-radius:22px}}
@media (max-width:860px){.video-frame{background:var(--inv-bg)}.video-play{top:60%}}
@media (prefers-reduced-motion:reduce){.video-play{transition:none}}

/* Karriere-Menü: mehr Abstand zwischen Einleitung und Liste */
@media (min-width:1101px){
  .mega-jobs .mega-inner{grid-template-columns:minmax(15rem,1fr) minmax(0,2fr) minmax(15rem,.9fr);column-gap:clamp(2.5rem,4.5vw,4.5rem)}
  .mega-jobs .mega-intro-title{font-size:clamp(1.75rem,2.4vw,2.4rem)}
}

/* ---------- Referenz-Tabs: aktiver Tab in Orange, pulsiert bis zur ersten Bedienung ---------- */
.case-tabs button[aria-selected="true"]{background:var(--flare);color:#0B0B0B}
.case-tabs:not(.is-used) button[aria-selected="true"]{animation:tab-pulse 1.8s ease-out infinite}
@keyframes tab-pulse{0%{box-shadow:0 0 0 0 rgba(255,77,31,.6)}75%,100%{box-shadow:0 0 0 7px rgba(255,77,31,0)}}
@media (prefers-reduced-motion:reduce){.case-tabs button[aria-selected="true"]{animation:none}}
.bbd-a11y-no-motion .case-tabs button[aria-selected="true"]{animation:none}

/* ---------- Funnel: Themen zweispaltig, damit das Formular nicht so hoch wird ---------- */
@media (min-width:700px){
  .tiles-list:has(input[name="thema"]){grid-template-columns:repeat(2,minmax(0,1fr))}
  .tiles-list:has(input[name="thema"]) .tile-opt span{flex-wrap:wrap;row-gap:.1rem;padding:.6rem .85rem;font-size:.9375rem;line-height:1.25}
  .tiles-list:has(input[name="thema"]) .tile-opt span small{flex-basis:100%;margin-left:2rem;text-align:left}
  /* Schritt 2 so groß wie Schritt 1, damit das Fenster beim Weiterklicken nicht wächst */
  .funnel-step[data-step="2"] .tile-opt span{min-height:0;padding:.6rem .85rem;font-size:.9375rem;line-height:1.25}
}

/* ---------- Referenz-Mockups: Geräte heben sich vom Hintergrund ab ---------- */
.project-shots{padding:clamp(1.25rem,3vw,2.25rem) clamp(3.5rem,7vw,6rem) clamp(1.25rem,3vw,2.25rem) clamp(1.25rem,3vw,2.25rem);background:var(--surface-2);border-radius:22px;outline:1px solid var(--line)}
.shot-d{outline:1px solid var(--line);box-shadow:0 24px 50px -28px rgba(0,0,0,.55)}
.shot-m{right:clamp(1rem,2.5vw,1.75rem);bottom:clamp(1rem,2.5vw,1.75rem);outline:6px solid var(--paper);outline-offset:0;box-shadow:0 26px 50px -18px rgba(0,0,0,.6)}
/* Referenzen: oben und unten optisch gleich (oben kommt der Zeilenabstand der Ãœberschrift dazu) */
.svc-next{padding-top:clamp(4rem,6vw,6rem);padding-bottom:clamp(5rem,7.5vw,7.5rem)}

/* ---------- Einsatzgebiet auf den Leistungsseiten ---------- */
.region-block{display:grid;gap:1.5rem;max-width:56rem}
.region-block p{font-size:1.125rem;color:var(--bone);max-width:44rem}
.region-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.region-list li{padding:.4rem .85rem;border-radius:999px;background:var(--surface-2);outline:1px solid var(--line);font-size:.9375rem;font-weight:600}
.band .region-list li{background:var(--band-card)}

/* ---------- Zweitspruch „be better. be design.“ ---------- */
.footer-grid .claim-motto{margin-top:1.25rem;font-size:1.0625rem;font-weight:800;letter-spacing:-.02em;text-transform:lowercase;color:var(--paper)}
.footer-grid .claim-motto em,.note-text em{font-style:normal;color:var(--flare)}

/* ---------- Startseite, Leistungen: ab 1100 px immer nur ein Thema links ---------- */
.svc-points{list-style:none;margin:.9rem 0 0;padding:0;display:grid;gap:.4rem}
.svc-points li{display:flex;gap:.6rem;align-items:baseline;font-size:.9375rem;color:var(--bone)}
.svc-points li::before{content:"";width:6px;height:6px;border-radius:2px;background:var(--flare);flex:none;transform:translateY(-2px)}
.svc-nav{display:none}
@media (min-width:1100px){
  .svc.wide{min-height:min(64vh,34rem)}
  .svc.wide .svc-nav{grid-column:1;display:flex;align-items:center;gap:1rem;margin:0 0 1.75rem}
  .svc.wide .svc-list{grid-column:1;display:block}
  .svc-count{font-size:.875rem;font-weight:700;font-variant-numeric:tabular-nums;color:var(--bone);min-width:4.5em}
  .svc-dots{display:flex;gap:.35rem}
  .svc-dots button{width:22px;height:6px;padding:0;border:0;border-radius:3px;background:var(--surface-4);cursor:pointer;transition:width .35s var(--ease),background-color .25s}
  .svc-dots button.is-on{width:44px;background:var(--flare)}
  .svc-dots button:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
  .svc.wide .svc-item:not(.is-active){display:none}
  .svc.wide .svc-item.is-active{background:transparent;animation:svc-swap .55s var(--ease)}
  .svc.wide .svc-item.is-active .svc-toggle{flex-direction:column;align-items:flex-start;gap:1.1rem;padding:0;cursor:default;font-size:clamp(1.75rem,2.5vw,2.375rem);font-weight:600;letter-spacing:-.035em;line-height:1.1;color:var(--paper)}
  .svc.wide .svc-item.is-active .svc-toggle .ic{width:3rem;height:3rem;padding:.65rem;border-radius:14px}
  .svc.wide .svc-detail{padding:1rem 0 0}
  .svc.wide .svc-detail > p{font-size:1.0625rem;max-width:26rem}
  .svc.wide .svc-detail > .link{margin-top:1.25rem}
  .svc-scene.is-compact .svc.wide .svc-item.is-active .svc-toggle{padding:0}
}
@keyframes svc-swap{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.svc.wide .svc-item.is-active{animation:none}}
.bbd-a11y-no-motion .svc.wide .svc-item.is-active{animation:none}

/* ---------- Leistungsseiten: verschiedene Darstellungen statt immer derselben Liste ---------- */
.incl-n{font-weight:800;font-variant-numeric:tabular-nums}
/* Karten */
.incl-cards{grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));gap:1rem}
.incl-cards li{display:flex;flex-direction:column;gap:.55rem;padding:1.5rem;border-radius:16px;background:var(--surface);outline:1px solid var(--line);transition:transform .35s var(--ease),outline-color .25s}
.incl-cards li:hover{transform:translateY(-4px);outline-color:var(--flare)}
.band .incl-cards li{background:var(--band-card)}
.incl-cards .incl-n{font-size:.875rem;color:var(--flare-text)}
.incl-cards h3{border:0;padding:0;font-size:1.1875rem}
.incl-cards p{margin:0}
/* Zeilen */
.incl-rows{grid-template-columns:1fr;gap:0}
.incl-rows li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:.5rem 3rem;align-items:baseline;padding:1.6rem 0;border-top:1px solid var(--line)}
.incl-rows li:last-child{border-bottom:1px solid var(--line)}
.incl-rows h3{border:0;padding:0;max-width:none;font-size:clamp(1.375rem,2.2vw,1.875rem);font-weight:600;letter-spacing:-.03em}
.incl-rows p{margin:0;font-size:1.0625rem}
.incl-rows li:hover h3{color:var(--flare-text)}
@media (max-width:760px){.incl-rows li{grid-template-columns:1fr}}
/* Große Ziffern */
.incl-numbers li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1.25rem;align-items:start}
.incl-numbers .incl-n{grid-row:span 2;font-size:clamp(2.75rem,4.5vw,3.75rem);line-height:.85;color:transparent;-webkit-text-stroke:1.5px var(--flare);letter-spacing:-.04em}
.incl-numbers h3{border:0;padding:0}
/* Schritte mit Verbindungslinie */
.incl-steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem;position:relative}
.incl-steps::before{content:"";position:absolute;left:1.4rem;right:1.4rem;top:1.375rem;height:2px;background:linear-gradient(90deg,var(--flare),var(--line))}
.incl-steps li{position:relative}
.incl-steps .incl-n{display:grid;place-items:center;width:2.75rem;height:2.75rem;margin-bottom:1.1rem;border-radius:50%;background:var(--flare);color:#0B0B0B;font-size:.9375rem;position:relative}
.incl-steps h3{border:0;padding:0}
@media (max-width:760px){.incl-steps{grid-template-columns:1fr}.incl-steps::before{display:none}}
/* Drei Aussagen, die mittlere als Gegenfläche */
.incl-trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem}
.incl-trio li{display:flex;flex-direction:column;gap:.6rem;padding:1.75rem;border-radius:20px;background:var(--surface);outline:1px solid var(--line)}
.band .incl-trio li{background:var(--band-card)}
.incl-trio li:nth-child(2){background:var(--inv-bg);color:var(--inv-fg);outline:0;transform:translateY(-.75rem)}
.incl-trio li:nth-child(2) p{color:var(--inv-muted)}
.incl-trio h3{border:0;padding:0;font-size:1.375rem}
.incl-trio p{margin:0}
.incl-ic{display:grid;place-items:center;width:3rem;height:3rem;margin-bottom:.4rem;border-radius:14px;background:var(--flare);color:#0B0B0B}
.incl-ic .ic{width:1.6rem;height:1.6rem}
@media (max-width:900px){.incl-trio{grid-template-columns:1fr}.incl-trio li:nth-child(2){transform:none}}
/* Dezentes, gestaffeltes Einblenden */
.incl > li.reveal:nth-child(2){transition-delay:.07s}
.incl > li.reveal:nth-child(3){transition-delay:.14s}
.incl > li.reveal:nth-child(4){transition-delay:.21s}
.incl > li.reveal:nth-child(5){transition-delay:.28s}
.incl > li.reveal:nth-child(6){transition-delay:.35s}
.incl > li.reveal:nth-child(7){transition-delay:.42s}
.incl > li.reveal:nth-child(8){transition-delay:.49s}
/* Ein-Thema-Ansicht: Icon neben der Überschrift, Inhalt oben, Bühne über die volle Höhe */
@media (min-width:1100px){
  .svc.wide{row-gap:0;grid-template-rows:auto 1fr;min-height:28rem}
  .svc.wide .svc-stage{grid-column:2;grid-row:1 / -1}
  .svc.wide .svc-nav{margin:0 0 1rem}
  .svc.wide .svc-list{align-self:start;padding-bottom:2.25rem}
  .svc.wide .svc-item.is-active .svc-toggle{flex-direction:row;align-items:center;gap:.9rem;font-size:clamp(1.6rem,2.2vw,2.125rem)}
  .svc.wide .svc-item.is-active .svc-toggle .ic{width:2.75rem;height:2.75rem;padding:.6rem;border-radius:12px;flex:none}
  .svc.wide .svc-detail{padding:.85rem 0 0}
  .svc.wide .svc-points{margin-top:1rem}
}

/* Referenzen auf der Startseite: Button unter den Tabs */
.refs-cta{display:flex;flex-wrap:wrap;gap:.75rem;justify-content:center;margin-top:clamp(2rem,3.5vw,3rem)}
[data-theme="dark"] .refs-cta .btn-dark{background:#F2EFE9;color:#0B0B0B}

/* ---------- Prüfung: Haken statt Nummern, Kontraste ---------- */
.incl-checks li{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:1rem;align-items:start}
.incl-checks .incl-ck{grid-row:span 2;position:relative;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--flare)}
.incl-checks .incl-ck::after{content:"";position:absolute;left:50%;top:46%;width:.5rem;height:.9rem;border:solid #0B0B0B;border-width:0 3px 3px 0;transform:translate(-50%,-50%) rotate(45deg)}
.incl-checks h3{border:0;padding:0;padding-top:.35rem}
.incl-cards li{border-top:4px solid var(--flare)}
.incl-cards li::before{content:none}
.footer-grid .claim-motto em{color:var(--flare-text)}
:root:not([data-theme="dark"]) .ui-send.is-done{color:#165C2E}
:root:not([data-theme="dark"]) .ui-state.is-done{color:#165C2E}
.note-text em{color:var(--flare)}
[data-theme="dark"] .note-text em{color:#B33610}
.teaser-box .btn-primary,.teaser-box .btn-primary:hover{color:#0B0B0B}
/* Große Schrift aus dem Bedienfeld: Kopfzeile ohne Zusatz-Button, damit nichts seitlich übersteht */
html.bbd-a11y-text-2 .header-cta,html.bbd-a11y-text-3 .header-cta{display:none}
html.bbd-a11y-text-3 .nav-list{gap:0}
html.bbd-a11y-text-3 .site-header .frame{gap:.75rem}
html.bbd-a11y-text-3 .nav-link,html.bbd-a11y-text-3 .nav-toggle{padding-inline:.5rem}
html.bbd-a11y-text-3 .nav-link,html.bbd-a11y-text-3 .nav-toggle{white-space:nowrap}
html.bbd-a11y-text-2 .radar:not(.is-live) .radar-queries li:not(:first-child),html.bbd-a11y-text-3 .radar:not(.is-live) .radar-queries li:not(:first-child){display:none}

/* ---------- Runde 12 ---------- */
/* Logo: oben komplett, beim Scrollen nur das b */
.brand img{transition:clip-path .45s var(--ease)}
.site-header.is-scrolled .brand img{clip-path:inset(-2px 78.6% -2px -2px)}
@media (prefers-reduced-motion:reduce){.brand img{transition:none}}

/* Navigation: Wort führt zur Seite, Pfeil-Knopf öffnet das Menü */
.nav-split{display:flex;align-items:center;border-radius:8px;transition:background-color .2s}
.nav-split .nav-link{padding-right:.2rem}
.nav-split .nav-toggle{padding:.55rem .65rem .55rem .35rem;min-height:40px}
.nav-split .nav-link:hover,.nav-split .nav-toggle:hover,.nav-split .nav-toggle[aria-expanded="true"]{background:none}
.nav-split:hover,.has-mega.is-open .nav-split{background:var(--surface-2)}
.nav-split:hover .nav-link,.has-mega.is-open .nav-split .nav-link{color:var(--paper)}
@media (max-width:1060px){
  .nav-split{justify-content:space-between;border-radius:0}
  .nav-split:hover,.has-mega.is-open .nav-split{background:none}
  .nav-split .nav-link{width:auto;flex:1}
  .nav-split .nav-toggle{width:3rem;height:3rem;flex:none;justify-content:center;padding:0}
}
/* Mega-Menü: Hover nur farbig, ohne Versatz */
.mega-list a:hover,.mega-list a:focus-visible{transform:none}

/* Handy: Quervideo statt Hochkant */
@media (max-width:860px){
  .video-frame .v-wide{display:block}
  .video-frame .v-tall{display:none}
}

/* Handy: ruhigere Abstände zwischen Abschnitten */
@media (max-width:760px){
  :root{--gap-section:clamp(3.5rem,12vw,4.5rem)}
  .svc-next{padding-top:3rem;padding-bottom:3.5rem}
}

/* Handy: Referenzen mit Reitern oben, kompakte Karte */
@media (max-width:860px){
  #referenzen .cases{display:flex;flex-direction:column}
  #referenzen .case-tabs{order:-1;margin:0 0 .75rem}
  #referenzen .case-stack{padding-top:calc(2 * 1.5rem)}
  #referenzen .case-info{gap:.7rem;padding:1rem 1.1rem 1.2rem}
  #referenzen .case-info h3,#referenzen .case-name{font-size:1.5rem}
  .refs-cta{margin-top:1.5rem}
}

/* Handy: Ablauf als Wisch-Leiste, Schritte mit Linie verbunden */
.steps-swipe{display:none}
@media (max-width:760px){
  .steps{display:flex;gap:.75rem;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1 * var(--pad));padding:.25rem var(--pad) .75rem;scroll-padding-inline:var(--pad);scrollbar-width:none}
  .steps::-webkit-scrollbar{display:none}
  .steps li.steps-track{display:none}
  .steps li:not(.steps-track){flex:0 0 80%;scroll-snap-align:start;position:relative;padding:1.25rem;border-radius:16px;background:var(--band-card);outline:1px solid var(--line)}
  .steps li:not(.steps-track):not(:last-child)::after{content:"";position:absolute;top:calc(1.25rem + 1rem - 1px);left:3.75rem;right:-.75rem;height:2px;background:linear-gradient(90deg,var(--flare),var(--surface-4))}
  .steps h3::before{box-shadow:0 0 0 6px var(--band-card)}
  .steps-swipe{display:flex;align-items:center;justify-content:flex-end;gap:.5rem;margin-top:.5rem;font-size:.875rem;font-weight:700;color:var(--flare-text);text-transform:lowercase;transition:opacity .4s}
  .steps-swipe svg{width:1.4rem;height:1.4rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation:swipe-nudge 1.6s ease-in-out infinite}
  .steps-swipe.is-done{opacity:0}
}
@keyframes swipe-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
@media (prefers-reduced-motion:reduce){.steps-swipe svg{animation:none}}
.bbd-a11y-no-motion .steps-swipe svg{animation:none}

/* Footer: gestapeltes Logo (b über der Schrift) */
.footer-mark{display:flex;justify-content:center;padding:clamp(2.5rem,6vw,4.5rem) var(--pad)}
.footer-mark img{width:clamp(11rem,26vw,20rem);height:auto}
/* Rechtstexte */
.legal .prose h2{font-size:clamp(1.25rem,2vw,1.5rem);margin-top:2.25rem}
.legal .prose h2:first-child{margin-top:0}
.legal .prose ul{padding-left:1.25rem}
.legal .prose code{font-size:.9em;background:var(--surface-2);padding:.05rem .35rem;border-radius:4px}
.legal-open{display:block;padding:.75rem 1rem;border-radius:10px;background:var(--surface-2);outline:1px dashed var(--flare);color:var(--paper);font-size:.9375rem}
.footer-legal ul{flex-wrap:wrap}

/* ---------- Web Interface Guidelines ---------- */
.nav-split .nav-toggle{min-width:2rem;justify-content:center}
a,button,label,summary,input,textarea,select{touch-action:manipulation}
html{-webkit-tap-highlight-color:transparent}
[id]{scroll-margin-top:88px}
@media (max-width:1060px){.nav{overscroll-behavior:contain}}
.steps:focus-visible{outline:2px solid var(--flare);outline-offset:4px;border-radius:12px}

/* ---------- Runde 14: Handy ---------- */
/* Leistungen: kein Scroll-Anchoring, sonst springt die Seite doppelt */
.svc-scene{overflow-anchor:none}
/* Leistungen auf dem Handy: ein Kasten, darin nur die Demo-Karte */
@media (max-width:1099px){
  .svc.wide{--svc-pad:1rem}
  .svc-item.is-active{background:transparent}
  .svc-item.is-active .svc-toggle{padding-inline:.25rem}
  .svc-detail{padding:0 .25rem 1.25rem}
  .svc-panel{background:transparent;padding:0;min-height:0;margin-top:1rem;border-radius:0}
  .svc-panel .ui{max-width:none}
}
/* Radar auf dem Handy: Suchbegriff oben mittig, Beschriftung unter dem Punkt */
@media (max-width:640px){
  .radar-queries li{left:50%!important;top:9%!important}
  .radar-core-label{transform:translate(-50%,18px)}
}
/* Referenzen: eigene Fläche ohne Überstand nach oben; Schatten nur, wenn sie sich über die stehende Szene schiebt */
.svc-next.band{background:none;box-shadow:none;clip-path:none}
.svc-next.band::after{content:"";position:absolute;top:0;bottom:0;left:-100vmax;right:-100vmax;background:var(--band);z-index:-1;pointer-events:none}
.svc-scene.is-pinned + .svc-next.band::after{box-shadow:0 -40px 70px -30px rgba(0,0,0,.28)}
/* Referenzen auf dem Handy: Reiter ohne Laufbalken, Abstand zum Stapel */
@media (max-width:860px){
  #referenzen .case-tabs{scrollbar-width:none;margin-bottom:1.25rem}
  #referenzen .case-tabs::-webkit-scrollbar{display:none}
  #referenzen .case-stack{padding-top:calc(2 * 2.4rem)}
}
@media (max-width:640px){
  .js .radar.is-live .radar-queries li:not(.is-active){transition:none;visibility:hidden}
}

/* Themenwechsel: nur der Text links blendet ein, das Panel rechts bleibt an seinem Platz
   (eine transform-Animation am Listeneintrag machte ihn kurz zum Bezugspunkt des Panels) */
@media (min-width:1100px){
  .svc.wide .svc-item.is-active{animation:none}
  .svc.wide .svc-item.is-active > h3,.svc.wide .svc-item.is-active .svc-detail > :not(.svc-panel){animation:svc-swap .55s var(--ease)}
}
@media (prefers-reduced-motion:reduce){.svc.wide .svc-item.is-active > h3,.svc.wide .svc-item.is-active .svc-detail > *{animation:none}}
.bbd-a11y-no-motion .svc.wide .svc-item.is-active > h3,.bbd-a11y-no-motion .svc.wide .svc-item.is-active .svc-detail > *{animation:none}
.ui-van{max-width:30rem}

/* Handy: Ablauf gleich hohe Karten, Knöpfe zurück und weiter */
.steps-nav{display:none}
@media (max-width:760px){
  .steps{align-items:stretch}
  .steps li:not(.steps-track){display:flex;flex-direction:column}
  .steps-nav{display:flex;align-items:center;justify-content:space-between;gap:.75rem;margin-top:.5rem}
  .steps-nav .steps-swipe{display:grid;margin:0;justify-items:center}
  .steps-nav .steps-swipe > span{grid-area:1/1;transition:opacity .3s}
  .steps-nav .steps-count{opacity:0;color:var(--bone);font-variant-numeric:tabular-nums}
  .steps-nav .steps-swipe.is-done{opacity:1}
  .steps-nav .steps-swipe.is-done > span:first-child{opacity:0}
  .steps-nav .steps-swipe.is-done .steps-count{opacity:1}
  .steps-btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;flex:none;border:0;border-radius:50%;background:var(--band-card);outline:1px solid var(--line);color:var(--paper);cursor:pointer}
  .steps-btn:not(:disabled):hover{outline-color:var(--flare)}
  .steps-btn:disabled{opacity:.35;cursor:default}
  .steps-btn:focus-visible{outline:2px solid var(--flare);outline-offset:2px}
  .steps-btn svg{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
}

/* Funnel: Optionen mit sichtbarem Rand, Auswahl klar in Flare mit Haken */
.funnel .tile-opt span{outline:1px solid rgba(242,239,233,.3);outline-offset:-1px}
.funnel .tile-opt input:hover + span{outline:2px solid var(--inv-flare);outline-offset:-2px}
.funnel .tile-opt input:checked + span{background:var(--inv-flare);color:#0B0B0B;outline:2px solid var(--inv-flare);outline-offset:-2px}
.funnel .tile-opt input:checked + span small,.funnel .tile-opt input:checked + span .ic{color:#0B0B0B}
.funnel .tile-opt input:focus-visible + span{outline:2px solid var(--inv-fg);outline-offset:3px}
.funnel .tiles-list .tile-opt input:checked + span:not(:has(small))::after{content:"";margin-left:auto;width:.4rem;height:.75rem;border:solid #0B0B0B;border-width:0 2.5px 2.5px 0;transform:translateY(-2px) rotate(45deg);flex:none}

/* Fuß: fünf Spalten, Rechtslinks unten in einer Zeile, © mittig */
.footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr 1fr}
@media (max-width:1060px){.footer-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.footer-grid > div:first-child{grid-column:1/-1}}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
.footer-legal{flex-direction:column;align-items:center;justify-content:center;gap:.6rem;text-align:center}
.footer-legal ul{flex-wrap:nowrap;justify-content:center;gap:clamp(.75rem,3vw,1.5rem);white-space:nowrap}
.footer-legal a{text-decoration:none}
.footer-legal a:hover{text-decoration:none;color:var(--paper)}
@media (max-width:400px){.footer-legal ul{font-size:.8125rem}}

/* Handy-Menü: beim Antippen sofort lesbar (keine Überblendung, Schrift bleibt hell) */
@media (max-width:1060px){
  .mega-list a,.mega-list a .mega-desc,.mega-list a .mega-ic{transition:none}
  .mega-list a:hover,.mega-list a:focus-visible,.mega-list a:active{background:var(--inv-card);color:var(--inv-fg);outline:2px solid var(--inv-flare);outline-offset:-2px}
  .mega-list a:hover .mega-desc,.mega-list a:focus-visible .mega-desc,.mega-list a:active .mega-desc{color:var(--inv-muted)}
  .mega-list a:hover .mega-ic,.mega-list a:focus-visible .mega-ic,.mega-list a:active .mega-ic{background:var(--inv-flare);color:#0B0B0B;transform:none}
}

/* Referenz-Screenshots: kein Kasten mehr um das Bild, Rahmen 2 px.
   Handy versetzt: beginnt etwas unter der Oberkante und ragt unten über den Desktop-Screenshot hinaus. */
.project-shots{padding:0 15% 7% 0;background:transparent;outline:0;border-radius:0;box-shadow:none}
.shot-d{border-radius:12px}
.shot-m{top:auto;right:0;bottom:0;width:22.5%;height:auto;border-radius:12px;outline:2px solid var(--paper);outline-offset:0;box-shadow:0 18px 36px -18px rgba(0,0,0,.55)}
/* Bild links oder rechts: immer gleich breit (Raster bei jeder zweiten Referenz gespiegelt) */
@media (min-width:861px){.project:nth-child(even){grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}

/* Video ohne Rahmen und Hintergrund: nur das Video, rundum gleich rund, leichter Schatten */
.video-frame,.video-frame.bleed-l{margin-left:0;padding:0;background:transparent;border-radius:16px;outline:1px solid var(--line);box-shadow:0 22px 48px -26px rgba(0,0,0,.4)}
.video-frame video{border-radius:16px}
.page-visual:has(.video-frame),.page-visual.bleed-r:has(.video-frame){margin-right:0;padding:0;min-height:0;background:transparent;outline:0;box-shadow:none;border-radius:16px}
.page-visual .video-frame{border-radius:16px}

/* iPhone: eigenen Start-Knopf des Videos ausblenden, es gibt den orangen */
.video-frame video::-webkit-media-controls-start-playback-button{display:none!important;-webkit-appearance:none}
.video-frame video::-webkit-media-controls-overlay-play-button{display:none!important}

/* Orange Scrolllinie: nur über der schwarzen Haltungs-Fläche, dem Ablauf und den Trennern sichtbar,
   alle anderen Abschnitte (Inhalte) liegen darüber. Ebenen: Trenner/Ablauf 1, Linie 2, Abschnitte (auch schwarze Flächen) 3, Hero 4 */
main .frame > section,main .frame > .svc-scene{z-index:3}
main .frame > .hero-region{z-index:4}
main .frame > .process,main .frame > .seam{z-index:1}
/* Startseite: nur Hero, Leistungen, Referenzen und Film reichen über die Linie, alle anderen Flächen liegen darunter */
.home main .frame > section:not(.hero-region):not(#referenzen):not(.stance):not(#ratgeber):not(#film){z-index:1}
.signal{z-index:2}

/* Kopf: Logo untereinander (b über dem Schriftzug). Ab 200 px Scrollen wird der Kasten auf die Höhe des b gekürzt:
   der Schriftzug verschwindet nach unten, das b rutscht nach links, die Navigation bleibt stehen (Kastenbreite fest).
   Zeichen im logo-lockup (903 × 542): x 349–596, y 0–364. */
.brand{--lh:54px}
.brand .brand-lock{display:block;overflow:hidden;width:calc(var(--lh) * 903 / 542);height:var(--lh);transition:height .45s var(--ease)}
.site-header .brand .brand-lock img{display:block;height:var(--lh);width:auto;max-width:none;clip-path:none;filter:var(--logo-filter);transition:transform .45s var(--ease)}
.site-header.brand-small .brand-lock{height:calc(var(--lh) * 370 / 542)}
.site-header.brand-small .brand-lock img{transform:translateX(calc(var(--lh) * -349 / 542))}
@media (max-width:1060px){.brand{--lh:46px}}
@media (prefers-reduced-motion:reduce){.brand .brand-lock,.brand .brand-lock img{transition:none}}
.bbd-a11y-no-motion .brand .brand-lock,.bbd-a11y-no-motion .brand .brand-lock img{transition:none}

/* Navi: aktiver Menüpunkt mit Untermenü, Fläche umfasst Text und Pfeil */
.nav-split:has(.nav-link[aria-current="page"]){background:var(--surface-2)}
.nav-split .nav-link[aria-current="page"]{background:none}
@media (max-width:1060px){.nav-split:has(.nav-link[aria-current="page"]){background:none}}


/* Referenzen Startseite: Knopf sitzt tiefer, weniger graue Fläche darunter */
#referenzen.svc-next{padding-bottom:5rem}

/* Fuß: Spaltentitel als Absatz statt Überschrift (saubere Gliederung), gleiche Optik */
.footer-grid .footer-h{font-size:var(--fs-small);font-weight:600;color:var(--bone);margin-bottom:.9rem;text-transform:lowercase}

/* Preisseite: zwei Wege als große Preiskarten */
.price-duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;align-items:stretch}
.price-card{position:relative;display:flex;flex-direction:column;gap:.85rem;padding:clamp(1.5rem,3.5vw,2.75rem);border-radius:22px;background:var(--surface);outline:1px solid var(--line)}
.price-card.is-pick{background:var(--inv-bg);color:var(--inv-fg);outline:0}
.price-badge{position:absolute;top:clamp(1.5rem,3.5vw,2.75rem);right:clamp(1.5rem,3.5vw,2.75rem);padding:.35rem .85rem;border-radius:999px;background:var(--flare);color:var(--on-flare);font-size:var(--fs-small);font-weight:700}
.price-ic{display:grid;place-items:center;width:3.25rem;height:3.25rem;border-radius:15px;background:var(--flare);color:#0B0B0B}
.price-ic .ic{width:1.7rem;height:1.7rem}
.price-card:not(.is-pick) .price-ic{background:var(--surface-3);color:var(--paper)}
.price-card h3{margin-top:.35rem;font-size:1.375rem;font-weight:700;letter-spacing:-.025em}
.price-amount{font-size:clamp(2.5rem,5vw,4rem);font-weight:800;letter-spacing:-.045em;line-height:.95}
.price-from,.price-per{font-size:1.0625rem;font-weight:600;letter-spacing:-.01em;color:var(--bone)}
.price-from{display:block;margin-bottom:.4rem}
.price-sub{color:var(--bone)}
.is-pick .price-from,.is-pick .price-per,.is-pick .price-sub{color:var(--inv-muted)}
.price-list{list-style:none;flex:1;display:grid;align-content:start;gap:.75rem;margin:.5rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--line)}
.is-pick .price-list{border-top-color:color-mix(in srgb,var(--inv-fg) 18%,transparent)}
.price-list li{position:relative;padding-left:2rem}
.price-list li::before{content:"";position:absolute;left:0;top:.15rem;width:1.25rem;height:1.25rem;border-radius:50%;background:var(--flare)}
.price-list li::after{content:"";position:absolute;left:.47rem;top:.37rem;width:.3rem;height:.6rem;border:solid #0B0B0B;border-width:0 2px 2px 0;transform:rotate(45deg)}
.price-card .btn{align-self:flex-start;margin-top:.75rem}
.price-both{display:flex;flex-wrap:wrap;align-items:center;gap:1rem 2rem;margin-top:1.25rem;padding:1.25rem clamp(1.25rem,3vw,2rem);border-radius:18px;background:var(--surface);outline:1px solid var(--line)}
.price-both > p{font-weight:700}
.price-both ul{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.5rem;margin:0;padding:0}
.price-both li{display:flex;align-items:center;gap:.5rem;color:var(--bone)}
.price-both .ic{width:1.25rem;height:1.25rem;color:var(--flare-text)}
.price-net{margin-top:1rem;font-size:var(--fs-small);color:var(--bone)}
@media (max-width:820px){.price-duo{grid-template-columns:1fr}}

/* Icons in Listen: ersetzen den Haken (checks) oder stehen vor der Zeile (rows) */
.incl-checks .incl-ic{grid-row:span 2;width:2.75rem;height:2.75rem;margin:0;border-radius:12px}
.incl-checks .incl-ic .ic,.incl-rows .incl-ic .ic{width:1.4rem;height:1.4rem}
.incl-checks li:has(> .incl-ic) h3{padding-top:.6rem}
.incl-rows li:has(> .incl-ic){grid-template-columns:auto minmax(0,1fr) minmax(0,1.35fr);column-gap:1.25rem;align-items:center}
.incl-rows li:has(> .incl-ic) h3{padding-right:1.75rem}
.incl-rows .incl-ic{width:2.75rem;height:2.75rem;margin:0;border-radius:12px;background:var(--surface-3);color:var(--paper);transition:background-color .25s,color .25s}
.incl-rows li:hover .incl-ic{background:var(--flare);color:#0B0B0B}
@media (max-width:760px){.incl-rows li:has(> .incl-ic){grid-template-columns:auto minmax(0,1fr);column-gap:1rem}.incl-rows li:has(> .incl-ic) p{grid-column:1/-1}}

/* Preisseite: eigenes Theme mit visuellem Editor */
.editor-copy .incl{grid-template-columns:1fr;gap:1.75rem}
.ed-win{width:100%;max-width:32rem;margin-inline:auto;border-radius:16px;background:var(--surface);outline:1px solid var(--line);overflow:hidden;box-shadow:0 30px 60px -32px rgba(0,0,0,.4)}
.ed-bar{display:flex;align-items:center;gap:.4rem;height:2.5rem;padding:0 1rem;border-bottom:1px solid var(--line);font-size:var(--fs-small);color:var(--bone)}
.ed-bar i{width:9px;height:9px;border-radius:50%;background:var(--surface-4)}
.ed-bar span{margin-left:.75rem}
.ed-page{display:grid;gap:1.1rem;padding:1.5rem}
.ed-nav{display:flex;align-items:center;gap:.6rem}
.ed-nav b{width:1.6rem;height:1.6rem;margin-right:auto;border-radius:7px;background:var(--flare)}
.ed-nav span{width:2.5rem;height:.4rem;border-radius:3px;background:var(--surface-4)}
.ed-h{margin-top:.5rem;font-size:clamp(1.375rem,2.6vw,2rem);font-weight:800;letter-spacing:-.035em;line-height:1.15}
.ed-edit{border-radius:4px;outline:2px dashed var(--flare);outline-offset:6px;background:color-mix(in srgb,var(--flare) 10%,transparent)}
.ed-caret{display:inline-block;width:2px;height:1em;margin-left:3px;vertical-align:-.12em;background:var(--flare);animation:ed-blink 1s steps(1) infinite}
@keyframes ed-blink{50%{opacity:0}}
/* Zweiter Wert der Tipp-Animation: nur im Bearbeitungsmodus sichtbar, damit er sich ändern lässt */
.ed-alt{display:none}
.yswyc-ready .ed-alt{display:inline-block;margin-left:1rem;font-size:.55em;font-weight:600;letter-spacing:-.01em;color:var(--bone)}
.yswyc-ready .ed-alt::before{content:"wechselt zu "}
.ed-p{font-size:.9375rem;color:var(--bone)}
.ed-img{height:7rem;border-radius:12px;background:linear-gradient(135deg,var(--surface-3),var(--surface-4))}
.ed-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.75rem;padding-top:1rem;border-top:1px solid var(--line)}
.ed-lock{display:inline-flex;align-items:center;gap:.45rem;font-size:var(--fs-small);color:var(--bone)}
.ed-lock .ic{width:1rem;height:1rem}
.ed-save{padding:.5rem 1.1rem;border-radius:999px;background:var(--flare);color:var(--on-flare);font-size:var(--fs-small);font-weight:700}
@media (prefers-reduced-motion:reduce){.ed-caret{animation:none}}

/* Preisseite Runde 3 */
.price-both{flex-direction:column;justify-content:center;text-align:center}
.price-both ul{justify-content:center}
/* Preisfaktoren als Tabs mit großer Nummer im Hintergrund (ohne JS: alle Punkte untereinander) */
.fx{display:grid;grid-template-columns:minmax(0,21rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:stretch}
.fx-list{display:grid;align-content:start;gap:.3rem}
.fx-tab{display:flex;align-items:center;gap:1rem;width:100%;min-height:44px;padding:.95rem 1.1rem;border:0;border-radius:12px;background:transparent;color:var(--bone);font:inherit;font-size:1.0625rem;font-weight:600;text-align:left;cursor:pointer;transition:background-color .25s,color .25s}
.fx-tab:hover{background:var(--surface-2);color:var(--paper)}
.fx-tab[aria-selected="true"]{background:var(--surface);color:var(--paper);outline:1px solid var(--line)}
.band .fx-tab[aria-selected="true"]{background:var(--band-card)}
.fx-n{font-size:.875rem;font-weight:800;font-variant-numeric:tabular-nums}
.fx-tab[aria-selected="true"] .fx-n{color:var(--flare-text)}
.fx-panel{position:relative;overflow:hidden;padding:clamp(1.75rem,4vw,3rem);border-radius:22px;background:var(--surface);outline:1px solid var(--line)}
.band .fx-panel{background:var(--band-card)}
.fx-panel + .fx-panel{margin-top:1rem}
.fx-big{position:absolute;right:-.02em;bottom:-.2em;font-size:clamp(9rem,18vw,16rem);font-weight:800;line-height:1;letter-spacing:-.06em;color:transparent;-webkit-text-stroke:2px var(--flare);opacity:.4;pointer-events:none;user-select:none}
.fx-panel h3{position:relative;font-size:clamp(1.5rem,2.6vw,2.125rem);font-weight:700;letter-spacing:-.03em;max-width:70%}
.fx-panel p{position:relative;max-width:34rem;margin-top:1rem;font-size:1.0625rem;color:var(--bone)}
.fx:not(.is-ready){grid-template-columns:1fr}
.fx:not(.is-ready) .fx-list{display:none}
.fx.is-ready .fx-panels{display:grid}
.fx.is-ready .fx-panel{grid-area:1/1;margin:0;visibility:hidden;opacity:0;transform:translateY(10px)}
.fx.is-ready .fx-panel.is-active{visibility:visible;opacity:1;transform:none}
.fx.is-anim .fx-panel{transition:opacity .35s var(--ease),transform .35s var(--ease),visibility 0s .35s}
.fx.is-anim .fx-panel.is-active{transition:opacity .35s var(--ease) .05s,transform .35s var(--ease) .05s}
@media (max-width:860px){
  .fx{grid-template-columns:1fr}
  .fx-list{display:flex;gap:.5rem;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding:2px 16px}
  .fx-list::-webkit-scrollbar{display:none}
  .fx-tab{flex:none;width:auto;white-space:nowrap;padding:.7rem 1rem;background:var(--surface-2)}
  .fx-big{font-size:9rem}
  .fx-panel h3{max-width:none}
}
@media (prefers-reduced-motion:reduce){.fx.is-ready .fx-panel{transform:none;transition:none}}
.fx-panel p{max-width:31rem}
/* Dazubuchen: Zeilen blenden beim Hineinscrollen auf (kein Farbwechsel des Hintergrunds) */
.turn-dark{transition:background-color .7s var(--ease),box-shadow .7s var(--ease),color .7s var(--ease)}
.turn-dark:not(.band){box-shadow:0 0 0 100vmax transparent;clip-path:inset(0 -100vmax)}
.turn-dark h2,.turn-dark h2 em,.turn-dark h3,.turn-dark p,.turn-dark li{transition:color .7s var(--ease),border-color .7s var(--ease)}
@media (prefers-reduced-motion:reduce){.turn-dark,.turn-dark h2,.turn-dark h2 em,.turn-dark h3,.turn-dark p,.turn-dark li{transition:none}}
/* Editor-Attrappe: Speichern-Rückmeldung, Cursor steht beim Tippen */
.ed-save{transition:background-color .3s,color .3s}
.ed-save.is-done{background:var(--surface-3);color:var(--ok)}
.ed-edit.is-typing .ed-caret{animation:none}

/* Runde 4: Preiskarten Zeile für Zeile bündig (Subgrid), Update-Icon pulsiert */
@supports (grid-template-rows:subgrid){
  .price-card{display:grid;grid-row:span 6;grid-template-rows:subgrid;row-gap:.85rem}
  .price-card .btn{justify-self:start;align-self:end}
}
.price-ics{display:flex;gap:.6rem}
.price-live{position:relative;background:transparent;outline:2px solid var(--flare);outline-offset:-2px;color:var(--flare)}
.price-card:not(.is-pick) .price-live{color:var(--flare-text)}
.price-live::after{content:"";position:absolute;inset:-2px;border-radius:15px;animation:price-pulse 2.4s var(--ease) infinite}
@keyframes price-pulse{0%{box-shadow:0 0 0 0 rgba(255,77,31,.55)}70%,100%{box-shadow:0 0 0 12px rgba(255,77,31,0)}}
@media (prefers-reduced-motion:reduce){.price-live::after{animation:none}}
.bbd-a11y-no-motion .price-live::after{animation:none}
/* Startseite: Fortschrittsstriche alle gleich breit, aktiv nur farbig */
.svc-dots button,.svc-dots button.is-on{width:28px}
/* Dazubuchen: Zeilen blenden beim Scrollen von blass auf voll */
.turn-dark .incl-rows li{opacity:var(--o,1);transition:opacity .25s linear}

/* Preiskarten: Luft zwischen Trennlinie und Liste wie zwischen Liste und Knopf */
.price-card .price-list{margin-top:0;padding-top:1.625rem}

/* Schwebender Anfrage-Knopf: auf dem Handy nie (das Menü hat den Knopf schon) */
@media (max-width:760px){.float-cta{display:none}}

/* Bilder im Ratgeber-Text und Zeichnung Transporter (Werbetechnik) */
.article-photo{margin:2rem 0}
.article-photo .ki{display:block;position:relative}
.article-photo img{display:block;width:100%;height:auto;border-radius:14px}
.van-figure{margin:0 0 2.5rem;padding:clamp(1.5rem,4vw,2.5rem);border-radius:16px;background:var(--surface);outline:1px solid var(--line);display:flex;justify-content:center}
.van-figure img{width:100%;max-width:30rem;height:auto}

/* Startseite „so arbeiten wir“: sechs Schritte. Ohne Story (Handy, kleine Fenster, weniger Bewegung): 3 Spalten bzw. Wisch-Leiste */
@media (min-width:761px){.process:not(.is-story) .steps{grid-template-columns:repeat(3,minmax(0,1fr))}.process:not(.is-story) .steps-track{display:none}}
@media (min-width:761px) and (max-width:860px){.process:not(.is-story) .steps{grid-template-columns:1fr 1fr}}
/* Story (Desktop): Bühne rastet ein, die orange Linie biegt von der Rahmenkante nach rechts, Karten ziehen nach links */
main .frame > .process.is-story{z-index:3;padding-top:0}
.is-story .story-pin{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;padding-top:72px}
.is-story .section-head{margin-bottom:clamp(2rem,4vh,3rem)}
.is-story .steps{display:flex;gap:clamp(1.25rem,2.5vw,2rem);width:max-content;will-change:transform;align-items:stretch}
.is-story .steps li.steps-track{display:none}
.is-story .steps li:not(.steps-track){position:relative;z-index:1;flex:0 0 clamp(17rem,24vw,21rem);padding:4.6rem 1.5rem 1.6rem}
.is-story .steps li:not(.steps-track)::after{content:"";position:absolute;inset:3.1rem 0 0;z-index:-1;border-radius:18px;background:var(--band-card);outline:1px solid var(--line)}
.process.is-story .steps li.reveal{opacity:var(--o,1);transform:none;transition:opacity .3s linear}
.is-story .steps h3{position:static}
.is-story .steps h3::before{position:absolute;top:0;left:1.5rem;background:var(--surface-3);color:var(--bone);transition:background-color .3s,color .3s}
.is-story .steps li.is-on h3::before{background:var(--flare);color:var(--on-flare)}
.is-story .steps-nav{display:none}
.story-line{position:absolute;left:0;top:0;overflow:visible;pointer-events:none;z-index:0}
.story-line path{fill:none;stroke-linecap:round;stroke-linejoin:round}
.story-line .base{stroke:var(--surface-4);stroke-width:1.5}
.story-line .fill{stroke:var(--flare);stroke-width:2}
.story-line .tip{fill:var(--flare)}
.story-line .tip-ring{fill:var(--flare);opacity:.18}

/* Story: Seitenlinie verschwindet hinter dem Abschnitt, die eigene Linie übernimmt (schlägt die Startseiten-Ebenenregel) */
main .frame > #ablauf.is-story{z-index:3!important}
.is-story .cta-row{margin-top:0}

/* Story: Karten weiter auseinander, Effekt beim Erreichen (Karte hebt sich, Nummer ploppt), Anfrage-Kasten über der Linie */
.is-story .steps{gap:clamp(2.5rem,4.5vw,4.5rem)}
.process.is-story .steps li.reveal{transform:translateY(calc((1 - var(--o,1)) * 34px)) scale(calc(.94 + .06 * var(--o,1)));transition:opacity .3s linear,transform .3s linear}
.is-story .steps li:not(.steps-track)::after{transition:box-shadow .5s var(--ease),outline-color .5s}
.is-story .steps li.is-on::after{outline-color:color-mix(in srgb,var(--flare) 45%,var(--line));box-shadow:0 22px 44px -26px rgba(255,77,31,.45)}
.is-story .steps li.is-on h3::before{animation:story-pop .55s var(--ease)}
@keyframes story-pop{0%{transform:scale(.6)}55%{transform:scale(1.22)}100%{transform:scale(1)}}
.is-story .cta-row{position:relative;z-index:2}

/* Story: unter dem Anfrage-Kasten mehr Platz, damit die Linie rechts sauber bis in den Streifen ausläuft */
main .frame > #ablauf.is-story{padding-bottom:calc(var(--gap-section) + 22vh)}

/* Story: Bühne rastet knapp unter dem Kopf ein (top setzt das Skript), Anfrage-Kasten gehört zur Bühne, Abstände knapper */
.is-story .story-pin{height:auto;display:block;padding-top:0}
main .frame > #ablauf.is-story{padding-bottom:clamp(3rem,6vw,5rem)}
.is-story .section-head{margin-bottom:clamp(1.5rem,3.5vh,2.5rem)}
.is-story .cta-row{margin-top:clamp(2rem,5vh,3rem)}

/* Story: Nummer bleibt fest auf der Linie, nur Karte und Text heben sich beim Erreichen */
.process.is-story .steps li.reveal{transform:none}
.is-story .steps li:not(.steps-track) > h3,.is-story .steps li:not(.steps-track) > p,.is-story .steps li:not(.steps-track)::after{translate:0 calc((1 - var(--o,1)) * 30px);transition:translate .3s linear,box-shadow .5s var(--ease),outline-color .5s}
.is-story .steps h3{position:relative}
.is-story .steps h3::before{top:-4.6rem;left:0;translate:0 calc((var(--o,1) - 1) * 30px);transition:translate .3s linear,background-color .3s,color .3s}

/* Startseite: Seitenlinie läuft nach der Ablauf-Story an der rechten Rahmenkante weiter */
.signal-r{left:auto;right:-1px}

/* Preiskarten ohne Knopf: fünf Zeilen im Subgrid */
@supports (grid-template-rows:subgrid){.price-card{grid-row:span 5}}

/* Ortsseiten, Branchen, Kosten-Check (30.10.2026) */
.more-links{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:1.25rem}
.foto-credit{position:absolute;right:.65rem;bottom:.65rem;z-index:1;max-width:calc(100% - 1.3rem);padding:.28rem .6rem;border-radius:999px;background:rgba(11,11,11,.66);color:#F2EFE9;font-size:.6875rem;font-weight:500;line-height:1.3;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.foto-credit a{color:#F2EFE9;text-decoration:underline;text-underline-offset:2px}
.foto-credit a:hover{color:#FF4D1F}
.photo-band .foto-credit,.page-visual.is-photo .foto-credit{right:1rem;bottom:1rem;font-size:.75rem}
.split-visual img{width:100%;height:auto;border-radius:10px}
.kc{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:start}
.kc-qs{display:grid;gap:1.5rem}
.kc-q{border:0;padding:0;margin:0}
.kc-q legend{font-weight:700;margin-bottom:.7rem;padding:0}
.kc-out{position:sticky;top:100px;background:var(--surface);border-radius:14px;outline:1px solid var(--line);padding:clamp(1.5rem,3vw,2rem);display:grid;gap:.9rem}
.kc-label{font-size:var(--fs-small);color:var(--bone)}
.kc-level{font-size:clamp(2rem,3.4vw,2.75rem);font-weight:700;letter-spacing:-.035em;line-height:1}
.kc-bar{height:8px;border-radius:999px;background:var(--surface-3);overflow:hidden}
.kc-bar span{display:block;height:100%;width:16%;background:var(--flare);border-radius:inherit;transition:width .35s ease}
.kc-text,.kc-weg{color:var(--bone)}
.kc-weg{color:var(--paper);font-weight:600}
.kc-note{font-size:var(--fs-small);color:var(--bone)}
.kc .btn{justify-self:start;cursor:pointer;border:0}
@media (max-width:860px){.kc{grid-template-columns:1fr}.kc-out{position:static}}
@media (prefers-reduced-motion:reduce){.kc-bar span{transition:none}}
.footer-region{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem;padding:0 var(--pad) clamp(2rem,4vw,3rem);font-size:var(--fs-small)}
.footer-region p{color:var(--bone);font-weight:600}
.footer-region ul{display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;list-style:none;margin:0;padding:0}
.footer-region a{color:var(--paper);text-decoration:none;font-weight:500}
.footer-region a:hover{color:var(--flare-text)}
a.project-shots{display:block;color:inherit;text-decoration:none}
.project-info h2 a{color:inherit;text-decoration:none}
.project-info h2 a:hover{color:var(--flare-text)}

/* Leistungen ab 1100 px: Kasten immer so hoch wie das längste Thema, sonst ruckelt er beim Wechsel.
   Alle Themen liegen in einer Rasterzelle übereinander, die inaktiven unsichtbar (zählen nur für die Höhe). */
@media (min-width:1100px){
  .svc.wide .svc-list{display:grid}
  .svc.wide .svc-item{grid-area:1 / 1}
  .svc.wide .svc-item:not(.is-active){display:block;visibility:hidden}
  .svc.wide .svc-item:not(.is-active) .svc-detail{display:block!important}
  .svc.wide .svc-item:not(.is-active) .svc-panel{display:none}
  .svc.wide .svc-item .svc-toggle{flex-direction:row;align-items:center;gap:.9rem;padding:0;font-size:clamp(1.6rem,2.2vw,2.125rem);font-weight:600;letter-spacing:-.035em;line-height:1.1}
  .svc.wide .svc-item .svc-toggle .ic{width:2.75rem;height:2.75rem;padding:.6rem;border-radius:12px;flex:none}
}

/* Fuß: Logo etwas höher, Orte mittig darunter; Instagram und Google als farbige Logos links unter dem Spruch */
.footer-mark{padding:clamp(.5rem,2vw,1.5rem) var(--pad) clamp(1.25rem,2.5vw,2rem)}
.footer-region{justify-content:center;text-align:center;padding-bottom:0}
.footer-region ul{justify-content:center}
.footer-social-row{display:flex;gap:.6rem;margin-top:1.25rem}
.footer-grid a.footer-social{display:grid;place-items:center;width:2.75rem;height:2.75rem;border-radius:12px;background:var(--surface-2);outline:1px solid var(--line);transition:transform .2s var(--ease),outline-color .2s}
.footer-grid a.footer-social:hover{transform:translateY(-2px);outline-color:var(--flare)}
.footer-grid a.footer-social:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.social-ic{width:1.375rem;height:1.375rem;flex:none}

/* 404-Seite (partials/404.html, 31.10.2026) */
.nf h2{margin:0 0 1.5rem}
.nf-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr));gap:0 2rem;margin:0;padding:0;list-style:none}
.nf-links li{border-top:1px solid var(--line)}
.nf-links a{display:block;padding:1rem 0;font-size:1.125rem;font-weight:600;color:var(--paper);text-decoration:underline;text-decoration-color:color-mix(in srgb,currentColor 30%,transparent);text-underline-offset:.25em;transition:text-decoration-color .2s}
.nf-links a:hover,.nf-links a:focus-visible{text-decoration-color:var(--flare)}

/* ---------- Film: füllt den Rahmen zwischen den Schienen, das Video ist die Fläche ---------- */
.reel-sec{position:relative;z-index:1}
.reel{position:relative;background:#0B0B0B;aspect-ratio:16/9;overflow:hidden}
.reel-dialog{width:min(40rem,calc(100vw - 2rem));max-height:min(80svh,40rem);padding:clamp(1.25rem,3vw,2rem);border:1px solid var(--line);border-radius:18px;background:var(--surface-2);color:var(--paper);box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.reel-dialog::backdrop{background:rgba(11,11,11,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.reel-dialog-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.reel-dialog-title{margin:0;font-size:1.25rem;font-weight:700;letter-spacing:-.02em}
.reel-dialog-close{display:grid;place-items:center;width:44px;height:44px;flex:none;padding:0;border:1px solid var(--line);border-radius:12px;background:transparent;color:var(--paper);cursor:pointer}
.reel-dialog-close:hover{border-color:var(--flare)}
.reel-dialog-close:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.reel-dialog-close svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.reel-dialog p[itemprop]{margin:0;color:var(--bone);line-height:1.65}
.reel-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.reel-ui{position:absolute;right:var(--pad);bottom:clamp(.75rem,2vw,1.5rem);display:flex;gap:.5rem;z-index:2}
.reel-btn{min-height:44px;padding:.6rem 1rem;border-radius:999px;border:1px solid rgba(242,239,233,.28);background:rgba(11,11,11,.72);color:#F2EFE9;font-family:inherit;font-weight:600;font-size:.875rem;line-height:1;letter-spacing:.01em;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background-color .2s var(--ease),border-color .2s var(--ease)}
.reel-btn:hover{background:rgba(11,11,11,.9);border-color:rgba(242,239,233,.5)}
.reel-btn:focus-visible{outline:2px solid #FF4D1F;outline-offset:3px}
.reel-btn[aria-pressed="true"][data-reel-sound]{background:#FF4D1F;border-color:#FF4D1F;color:#0B0B0B}
@media (max-width:767px){.reel{aspect-ratio:9/16}}
@media (prefers-reduced-motion:reduce){.reel-btn{transition:none}}

/* Barrierefreiheit: Knopf grün, etwas kleiner, mit Rollstuhl-Symbol (Lucide, ISC) */
#bbd-a11y .bbd-a11y__btn{width:2.75rem;height:2.75rem;background:#1F7A3E;color:#fff;border-width:2px}
#bbd-a11y .bbd-a11y__btn svg{display:none}
#bbd-a11y .bbd-a11y__btn::before{content:"";width:1.45rem;height:1.45rem;background:currentColor;-webkit-mask:url("../img/a11y-rollstuhl.svg") center/contain no-repeat;mask:url("../img/a11y-rollstuhl.svg") center/contain no-repeat}
#bbd-a11y .bbd-a11y__panel{bottom:3.5rem}

/* Film: ragt auf breiten Bildschirmen seitlich über den Rahmen, passt aber samt Kopfzeile immer ins Fenster (auch Full HD).
   Schraffur darüber und darunter mindestens so breit wie der Film. Liegt über der orangen Seitenlinie. */
.frame{--reel-out:max(0px,min(9rem,(100vw - var(--frame)) / 2 - 1.5rem))}
main .frame > .reel-sec{z-index:3}
@media (min-width:768px){
  .frame{--reel-w:min(100% + 2 * var(--reel-out),(100svh - 72px - 3rem) * 16 / 9)}
  .reel{width:var(--reel-w);margin-inline:calc((100% - var(--reel-w)) / 2)}
  main .frame > .seam:has(+ .reel-sec),main .frame > .reel-sec + .seam{width:max(100%,var(--reel-w));margin-inline:calc((100% - max(100%,var(--reel-w))) / 2)}
}
main .frame > .seam:has(+ .reel-sec),main .frame > .reel-sec + .seam{z-index:3}

/* Laufleiste „neu im ratgeber“: liegt unter der Navi über dem Inhalt (schiebt nichts), Inhalt innerhalb der Rahmenlinien.
   Rot-Metall: Ochsenblut ins Schwarz, ab und zu läuft ein Glanz durch. Das Mega-Menü klappt darüber. */
.rt{position:fixed;left:0;right:0;top:var(--rt-top,73px);z-index:49;height:40px;background:linear-gradient(100deg,#160303 0%,#5c0c0c 30%,#9b1d17 50%,#5c0c0c 70%,#120202 100%);color:#F6E8E4;box-shadow:inset 0 1px 0 rgba(255,255,255,.12),inset 0 -1px 0 rgba(0,0,0,.6);overflow:hidden;transition:transform .35s var(--ease),opacity .25s}
.rt::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);background-size:250% 100%;animation:rt-glanz 7s ease-in-out infinite;pointer-events:none}
.rt.is-zu,.rt.is-weg{transform:translateY(-110%);opacity:0;pointer-events:none;visibility:hidden;transition:transform .35s var(--ease),opacity .25s,visibility 0s .35s}
.rt-in{position:relative;z-index:1;display:flex;align-items:center;gap:.9rem;height:100%;max-width:var(--frame);margin-inline:auto;padding-inline:var(--pad) calc(var(--pad) - .75rem);font-size:.84375rem;font-weight:600;letter-spacing:-.005em}
.rt-chip{flex:none;padding:.2rem .6rem;border-radius:999px;border:1px solid rgba(246,232,228,.5);color:#F6E8E4;font-size:.75rem;font-weight:700;text-decoration:none;text-transform:lowercase;white-space:nowrap}
.rt-chip:hover{background:rgba(246,232,228,.12)}
.rt-band{flex:1;min-width:0;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent);mask:linear-gradient(90deg,transparent,#000 2.5rem,#000 calc(100% - 2.5rem),transparent)}
.rt-track{display:flex;width:max-content}
.rt-track.is-loop{animation:rt-lauf var(--rt-dauer,60s) linear infinite}
.rt:hover .rt-track,.rt:focus-within .rt-track{animation-play-state:paused}
.rt ul{display:flex;list-style:none;margin:0;padding:0}
.rt li{display:flex;align-items:center;white-space:nowrap}
.rt li::after{content:"";width:5px;height:5px;margin:0 1.4rem;border-radius:50%;background:currentColor;opacity:.55}
.rt a{color:inherit;text-decoration:none}
.rt li a:hover{text-decoration:underline;text-underline-offset:.2em}
.rt a:focus-visible{outline:2px solid currentColor;outline-offset:2px;border-radius:3px}
.rt-zu{flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border:0;background:none;color:inherit;cursor:pointer;opacity:.8}
.rt-zu:hover{opacity:1}
.rt-zu:focus-visible{outline:2px solid currentColor;outline-offset:-6px;border-radius:10px}
.rt-zu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
@keyframes rt-lauf{to{transform:translateX(-50%)}}
@keyframes rt-glanz{from{background-position:120% 0}to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.rt-track.is-loop,.rt::after{animation:none}}
.bbd-a11y-no-motion .rt-track.is-loop,.bbd-a11y-no-motion .rt::after{animation:none}
/* Handy: Leiste würde sonst den Anfang der Seite verdecken */
@media (max-width:760px){
  .rt-in{font-size:.8125rem;gap:.6rem}
  .rt-chip-mehr{display:none}
  html.rt-on main{padding-top:40px}
}

/* WhatsApp neben der Telefonnummer und im Fuß (02.11.2026, Link aus build.py wa_link()) */
.tel-wa{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem .9rem}
a.wa,.footer-grid address a.wa,.nav-foot a.wa{display:inline-flex;align-items:center;gap:.5rem;width:fit-content;min-height:44px;padding:.4rem 1rem .4rem .75rem;border-radius:999px;background:var(--surface-2);outline:1px solid var(--line);color:var(--paper);font-weight:600;font-size:.95rem;line-height:1;text-decoration:none;transition:transform .2s var(--ease),outline-color .2s}
a.wa:hover{transform:translateY(-2px);outline-color:#25D366;color:var(--paper)}
a.wa:focus-visible{outline:2px solid var(--flare);outline-offset:3px}
.wa-ic{width:1.25rem;height:1.25rem;flex:none;fill:#25D366}
.footer-social .wa-ic{width:1.5rem;height:1.5rem}
@media (max-width:1060px){.nav-foot{grid-template-columns:auto 1fr;align-items:center}.nav-foot a.wa{grid-row:1;grid-column:1;min-height:52px}.nav-foot .btn{grid-row:1;grid-column:2}.nav-foot p{grid-column:1/-1}}
@media (prefers-reduced-motion:reduce){a.wa:hover{transform:none}}

/* Keyword-Recherche (02.11.2026): Saison-Balken im Seitenkopf, Beispieltabelle */
.kw-chart{margin:0;padding:clamp(1.25rem,3vw,2rem);border-radius:var(--radius);background:var(--surface-2);outline:1px solid var(--line)}
.page-visual .kw-chart{padding:0;background:none;outline:0}
.kw-chart figcaption{display:grid;gap:.15rem}
.kw-q{font-size:var(--fs-small);color:var(--bone);font-weight:600}
.kw-big{font-size:clamp(2.75rem,5vw,4rem);font-weight:800;letter-spacing:-.04em;line-height:1}
.kw-unit{font-size:var(--fs-small);color:var(--bone)}
.kw-bars{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(.2rem,.8vw,.45rem);align-items:end;height:clamp(9rem,18vw,12rem);margin-top:1.5rem;padding:0;list-style:none}
.kw-bars li{display:grid;grid-template-rows:1fr auto;gap:.4rem;height:100%;align-items:end}
.kw-bar{display:block;height:calc(var(--h) * 100%);min-height:4px;border-radius:6px 6px 2px 2px;background:var(--surface-4);transform-origin:bottom;transition:transform .8s var(--ease)}
.kw-bars .is-peak .kw-bar{background:var(--flare)}
.kw-m{font-size:.6875rem;color:var(--bone);text-align:center}
.kw-bars .is-peak .kw-m{color:var(--flare-text);font-weight:700}
.kw-demo{padding:0 var(--pad)}
.kw-table-wrap{overflow-x:auto;border-radius:var(--radius);outline:1px solid var(--line);background:var(--surface)}
.kw-table{width:100%;border-collapse:collapse;font-size:.9375rem}
.kw-table caption{caption-side:top;text-align:left;padding:1rem 1.25rem;font-weight:700;border-bottom:1px solid var(--line)}
.kw-table th,.kw-table td{padding:.9rem 1.25rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.kw-table thead th{font-size:var(--fs-small);font-weight:600;color:var(--bone)}
.kw-table tbody tr:last-child>*{border-bottom:0}
.kw-table tbody th{font-weight:700;white-space:nowrap}
.kw-table td:last-child{color:var(--bone)}
.kw-num{white-space:nowrap;font-variant-numeric:tabular-nums;font-weight:600}
.kw-vol{display:block;width:calc(var(--w) * 7rem);height:6px;margin-bottom:.45rem;border-radius:3px;background:var(--flare)}
.kw-quelle{margin-top:.9rem;font-size:var(--fs-small);color:var(--bone);max-width:48rem}
@media (max-width:760px){
  .kw-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .kw-table,.kw-table caption,.kw-table tbody,.kw-table tr,.kw-table th,.kw-table td{display:block}
  .kw-table tr{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 1rem;padding:1rem 1.1rem;border-bottom:1px solid var(--line)}
  .kw-table tbody tr:last-child{border-bottom:0}
  .kw-table th,.kw-table td{padding:0;border:0}
  .kw-table tbody th{grid-column:1/-1;white-space:normal;margin-bottom:.35rem}
  .kw-table td.kw-num:nth-of-type(1)::before{content:"Suchen im Monat";display:block;font-size:.75rem;font-weight:500;color:var(--bone)}
  .kw-table td.kw-num:nth-of-type(2)::before{content:"Klickpreis";display:block;font-size:.75rem;font-weight:500;color:var(--bone)}
  .kw-table td:last-child{grid-column:1/-1;margin-top:.5rem}
}
@media (prefers-reduced-motion:reduce){.kw-bar{transition:none}}
.kw-demo{display:grid;gap:1.25rem}
@media (min-width:900px){.kw-demo .kw-chart{display:grid;grid-template-columns:minmax(12rem,auto) 1fr;gap:clamp(2rem,5vw,4rem);align-items:end}.kw-demo .kw-bars{margin-top:0;height:9rem}}
.kw-blur{filter:blur(5px);user-select:none;opacity:.75}

/* Häufige Fragen unter Ratgeber-Artikeln (02.11.2026, ratgeber.FRAGEN) */
.article-faq{margin-top:2.5rem}
.article-faq .answer a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:.22em}

/* Mitlaufende Spalten unter der Ratgeber-Leiste (40 px), solange sie offen ist (02.11.2026) */
html.rt-on .toc,html.rt-on .related,html.rt-on .kc-out{top:140px}
html.rt-on .faq .section-head{top:150px}

/* ---------- Seite /demo/: Branchen-Demos (src/demos.py, 02.11.2026) ---------- */
.demo-cards{display:grid;gap:1.5rem}
.demo-card{--dc-bg:#0B0B0B;--dc-fg:#F2EFE9;--dc-muted:#C9C3B8;position:relative;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;padding:clamp(1rem,2.5vw,2rem);background:var(--dc-bg);color:var(--dc-fg);border-radius:22px;transition:box-shadow .25s var(--ease)}
[data-theme="dark"] .demo-card{--dc-bg:var(--surface-2);outline:1px solid var(--line)}
.demo-card:hover{box-shadow:0 0 0 3px var(--flare)}
.demo-card:focus-within{outline:3px solid var(--flare);outline-offset:4px}
.demo-card a:focus-visible{outline:0}
.demo-shots{position:relative;padding:0 clamp(2.5rem,7vw,5.5rem) clamp(1.5rem,3vw,2.5rem) 0}
.demo-browser{border-radius:12px;overflow:hidden;background:#1A1A19}
.demo-bar{display:flex;align-items:center;gap:.4rem;height:30px;padding-inline:.8rem;background:#242422}
.demo-bar i{width:9px;height:9px;border-radius:50%;background:#3A3A37}
.demo-bar span{margin-left:.6rem;flex:1;max-width:22rem;height:16px;border-radius:5px;background:#30302D;font-size:.6875rem;line-height:16px;padding-inline:.6rem;color:#C9C3B8;overflow:hidden;white-space:nowrap}
.demo-browser img{display:block;width:100%;height:auto;aspect-ratio:1440/900;object-fit:cover;object-position:top}
.demo-phone{position:absolute;right:0;bottom:0;width:clamp(6.5rem,17%,10rem);padding:5px;border-radius:22px;background:#0B0B0B;border:1.5px solid #3A3A37}
.demo-phone img{display:block;width:100%;height:auto;border-radius:17px}
.demo-copy{display:grid;gap:1rem;align-content:center;padding:clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.5rem) clamp(.5rem,2vw,1.5rem) 0}
.demo-copy h3{font-size:clamp(2rem,3.4vw,3rem);font-weight:700;letter-spacing:-.035em;line-height:1.02;text-transform:lowercase;text-wrap:balance}
.demo-copy h3 a{color:inherit;text-decoration:none}
.demo-copy h3 a::after{content:"";position:absolute;inset:0;border-radius:22px}
.demo-copy p{color:var(--dc-muted);max-width:42ch}
.demo-copy strong{color:var(--dc-fg)}
.demo-copy ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem;color:var(--dc-muted);font-size:.9375rem}
.demo-copy li{display:flex;gap:.6rem;align-items:baseline}
.demo-copy li::before{content:"";flex:none;width:6px;height:6px;border-radius:2px;background:var(--flare);transform:translateY(-2px)}
.demo-copy .btn{width:fit-content;margin-top:.5rem}
.demo-card:hover .btn-primary{background:var(--flare-hi)}
.soon-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.soon-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,3vw,2rem);padding-block:clamp(1rem,2.4vw,1.6rem);border-bottom:1px solid var(--line)}
.soon-row .ic{width:clamp(2.5rem,4vw,3.25rem);height:clamp(2.5rem,4vw,3.25rem);padding:.65rem;border-radius:12px;background:var(--surface-2);fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.soon-row h3{font-size:clamp(1.75rem,4.4vw,3.5rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;text-transform:lowercase;color:var(--bone)}
.soon-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-small);font-weight:600;color:var(--bone);text-transform:lowercase;white-space:nowrap}
.soon-badge::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--bone)}
@media (max-width:1000px){.demo-card{grid-template-columns:1fr}.demo-copy{padding:0 .5rem .75rem}}
@media (max-width:640px){.demo-copy .btn{width:100%}.demo-shots{padding-right:3.25rem}.soon-row{grid-template-columns:auto minmax(0,1fr);row-gap:.15rem}.soon-row .ic{grid-row:1/3}.soon-badge{grid-column:2}}
/* Leistungen-Menü: Querbalken „demos ansehen“ über der orangen Box (02.11.2026) */
.mega-col{display:flex;flex-direction:column;gap:.75rem}
.mega-col .mega-side{flex:1}
.mega-demo{display:flex;align-items:center;gap:.75rem;min-height:56px;padding:.8rem 1.25rem;border-radius:16px;background:var(--inv-card);box-shadow:inset 0 0 0 1.5px var(--inv-flare);color:var(--inv-fg);font-weight:700;font-size:1.0625rem;letter-spacing:-.01em;line-height:1.2;text-decoration:none;text-transform:lowercase;transition:background-color .2s var(--ease),color .2s var(--ease)}
.mega-demo::before{content:"";flex:none;width:20px;height:14px;border:2px solid var(--inv-flare);border-radius:3px;box-shadow:0 5px 0 -3px var(--inv-flare);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.mega-demo:hover{background:var(--flare);color:#0B0B0B}
.mega-demo:hover::before{border-color:#0B0B0B;box-shadow:0 5px 0 -3px #0B0B0B}
.mega-demo:focus-visible{outline:2px solid var(--inv-flare);outline-offset:3px}
@media (max-width:1060px){.mega-col{padding:.25rem .5rem .5rem}}
/* Handy-Menü: Untermenüs ohne dunklen Kasten, „demos ansehen“ oben (02.11.2026) */
@media (max-width:1060px){
  .mega{--inv-bg:transparent;--inv-fg:var(--paper);--inv-muted:var(--bone);--inv-card:var(--surface-2);--inv-flare:var(--flare-text);background:transparent;border-radius:0}
  .mega-inner{padding:0 0 .5rem}
  .mega-col{order:-1;padding:0 0 .5rem}
  .mega-list a{padding-inline:.25rem}
  .mega-list a:hover,.mega-list a:focus-visible,.mega-list a:active{padding-inline:.75rem}
  .mega-jobs .mega-title{white-space:normal;min-width:0}
}
/* Handwerk: Hub /webseite-fuer-handwerker/ und Gewerk-Seiten (02.11.2026, src/handwerk.py) */
.mega-hw{box-shadow:none;background:transparent;outline:1.5px solid color-mix(in srgb,var(--inv-fg) 22%,transparent);outline-offset:-1.5px}
.mega-hw::before{width:14px;height:14px;border-radius:50%;box-shadow:none}
.mega-hw:hover{outline-color:transparent}
.hw-trades{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.hw-trade{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:clamp(1rem,3vw,2rem);padding-block:clamp(1.1rem,2.4vw,1.75rem);border-bottom:1px solid var(--line)}
.hw-trade .ic{width:clamp(2.5rem,4vw,3.25rem);height:clamp(2.5rem,4vw,3.25rem);padding:.65rem;border-radius:12px;background:var(--surface-2);fill:none;stroke:var(--bone);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.hw-trade h3{font-size:clamp(1.75rem,4vw,3.25rem);font-weight:700;letter-spacing:-.04em;line-height:1.05;text-transform:lowercase;color:var(--bone)}
.hw-trade p{color:var(--bone);max-width:52ch;margin-top:.35rem}
.hw-trade.is-live .ic{background:var(--flare);stroke:#0B0B0B}
.hw-trade.is-live h3{color:var(--paper)}
.hw-trade.is-live h3 a{text-decoration:none;color:inherit}
.hw-trade.is-live h3 a::after{content:"";position:absolute;inset:0}
.hw-trade.is-live:hover h3{color:var(--flare-text)}
.hw-trade.is-live:focus-within{outline:2px solid var(--flare);outline-offset:4px;border-radius:6px}
.hw-trade a:focus-visible{outline:0}
.hw-badge{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-small);font-weight:600;color:var(--bone);text-transform:lowercase;white-space:nowrap}
.hw-badge::before{content:"";width:8px;height:8px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--bone)}
.hw-badge.is-live{color:var(--paper)}
.hw-badge.is-live::before{background:var(--flare);box-shadow:none}
#gewerke .region-block,#weitere .more-links,#demo .more-links{margin-top:1.75rem}
.hw-rows{display:grid;gap:clamp(3.5rem,8vw,6.5rem)}
.hw-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(1.75rem,5vw,4.5rem);align-items:center}
.hw-row.is-flip .hw-copy{order:2}
.hw-copy{display:grid;gap:1rem;align-content:center}
.hw-copy h3{font-size:clamp(1.75rem,3vw,2.5rem);font-weight:700;letter-spacing:-.035em;line-height:1.05;text-transform:lowercase;text-wrap:balance}
.hw-copy p{color:var(--bone);font-size:1.0625rem;max-width:48ch}
.hw-points{list-style:none;margin:0;padding:0;display:grid;gap:.45rem}
.hw-points li{display:flex;gap:.65rem;align-items:baseline;font-weight:600}
.hw-points li::before{content:"";flex:none;width:7px;height:7px;border-radius:2px;background:var(--flare);transform:translateY(-2px)}
.hw-shot{margin:0;display:grid;gap:.75rem;justify-items:center}
.hw-shot figcaption{font-size:var(--fs-small);color:var(--bone);text-align:center}
.hw-frame{width:100%;border-radius:14px;overflow:hidden;background:#1A1A19;box-shadow:0 0 0 1px var(--line),0 24px 48px -28px rgba(11,11,11,.45)}
.hw-frame img{display:block;width:100%;height:auto}
.hw-shot.is-form .hw-frame{max-width:26rem;border-radius:20px}
.hw-shot.is-phone .hw-frame{max-width:15rem;padding:6px;border-radius:30px;background:#0B0B0B;box-shadow:0 0 0 1.5px #3A3A37,0 24px 48px -24px rgba(11,11,11,.5)}
.hw-shot.is-phone img{border-radius:24px}
.hw-stat{width:100%;display:grid;gap:1rem;align-content:center;min-height:clamp(15rem,30vw,21rem);padding:clamp(1.75rem,4vw,3rem);border-radius:20px;background:var(--inv-bg);color:var(--inv-fg)}
.hw-stat p{color:var(--inv-muted);font-size:1.125rem;max-width:30ch}
.hw-stat .hw-stat-n{font-size:clamp(3.5rem,8vw,6.5rem);font-weight:800;letter-spacing:-.05em;line-height:.95;color:var(--flare);max-width:none}
@media (max-width:860px){.hw-row{grid-template-columns:1fr}.hw-row.is-flip .hw-copy{order:0}}
@media (max-width:640px){.hw-trade{grid-template-columns:auto minmax(0,1fr);row-gap:.35rem}.hw-trade .ic{grid-row:1/3;align-self:start}.hw-badge{grid-column:2}}
.hw-pair{display:grid;grid-template-columns:minmax(0,2.2fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:end}
@media (max-width:760px){.hw-pair{grid-template-columns:1fr}}
@media (min-width:900px){#nutzen .incl-cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
#demo .hw-pair{margin-top:clamp(2rem,5vw,3.5rem)}
.hw-trade.is-page h3{color:var(--paper)}
.hw-trade.is-page h3 a{text-decoration:none;color:inherit}
.hw-trade.is-page h3 a::after{content:"";position:absolute;inset:0}
.hw-trade.is-page .ic{stroke:var(--paper)}
.hw-trade.is-page:hover h3{color:var(--flare-text)}
.hw-trade.is-page:focus-within{outline:2px solid var(--flare);outline-offset:4px;border-radius:6px}
.hw-trades + .more-links{margin-top:1.75rem}