/* SV Krabel, Startseite. Generated by build_preview.py from mockup/startseite-v2.src.html */
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/hanken-grotesk-latin-ext-wght-normal.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Hanken Grotesk";font-style:normal;font-weight:100 900;font-display:swap;src:url("../fonts/hanken-grotesk-latin-wght-normal.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
:root{
  color-scheme: dark;
  --bg:#000000;
  --bg-raised:#0F0F10;
  --tile:#161617;
  --tile-hover:#1D1D1F;
  --chip:#1F1F21;
  --field:#232325;
  --text:#F5F5F7;
  --text-2:#A1A1A6;
  --text-3:#86868B;
  --text-dim:#4A4A4E;
  --graphite:#121110;
  --orange:#F69800;
  --orange-hover:#FFAA2B;
  --on-orange:#1D1D1F;
  --glass:rgba(22,22,23,.78);
  --sec:rgba(255,255,255,.12);
  --sec-hover:rgba(255,255,255,.18);
  --plus:rgba(255,255,255,.14);
  --scrim:rgba(0,0,0,.62);

  --font:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --fs-h1:clamp(2.5rem,1.73rem + 4.19vw,5.5rem);
  --fs-h2:clamp(2rem,1.26rem + 3.05vw,4rem);
  --fs-h3:clamp(1.375rem,1.24rem + .57vw,1.75rem);
  --fs-lead:clamp(1.1875rem,1.07rem + .48vw,1.5rem);
  --fs-big:clamp(2.5rem,1.94rem + 2.29vw,4rem);
  --fs-kicker:clamp(.9375rem,.84rem + .38vw,1.1875rem);
  --fs-statement:clamp(1.75rem,1.2rem + 2.3vw,3rem);
  --fs-body:1.0625rem;
  --fs-small:.875rem;

  --gutter:clamp(20px,4vw,48px);
  --pad:clamp(92px,72.7px + 4.95vw,144px);
  --pad-xl:calc(var(--pad) * 1.33);
  --wrap:1200px;
  --col:980px;
  --gap:20px;
  --r-card:28px;
  --r-field:14px;
  --ease:cubic-bezier(.28,.11,.32,1);
  --nav-h:52px;
  interpolate-size:allow-keywords;
}
@media (max-width:734px){
  :root{--r-card:22px;--gap:12px}
}

*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg);overflow-x:clip;scroll-padding-top:80px;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
html:has(dialog[open]),html.menu-open,html.sel-open{overflow:hidden;scrollbar-gutter:stable}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:var(--fs-body);line-height:1.47;letter-spacing:-.011em;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;text-rendering:optimizeLegibility}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input,select{font:inherit;color:inherit;letter-spacing:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,p{margin:0}
h1,h2,h3{font-weight:600;text-wrap:balance}
p{text-wrap:pretty}
.page{hyphens:manual;overflow-wrap:break-word}
:focus-visible{outline:2px solid var(--text);outline-offset:3px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-variant-numeric:tabular-nums}
.nw{white-space:nowrap}

.wrap{width:100%;max-width:calc(var(--wrap) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
.wrap-col{width:100%;max-width:calc(var(--col) + 2*var(--gutter));margin:0 auto;padding:0 var(--gutter)}
section{position:relative}

/* type roles */
.h2{font-size:var(--fs-h2);line-height:1.06;letter-spacing:-.028em}
.h3{font-size:var(--fs-h3);line-height:1.14;letter-spacing:-.02em}
.lead{font-size:var(--fs-lead);line-height:1.33;letter-spacing:-.012em}
.kicker{font-size:var(--fs-kicker);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--text-2)}
.big{font-size:var(--fs-big);font-weight:600;line-height:1;letter-spacing:-.03em}
.small{font-size:var(--fs-small);line-height:1.43;letter-spacing:-.005em}
.dim{color:var(--text-3)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 24px;border-radius:980px;font-size:var(--fs-body);font-weight:500;line-height:1;white-space:nowrap;transition:background-color .25s var(--ease),transform .25s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn:active{transform:scale(.97)}
.btn-call{background:var(--orange);color:var(--on-orange)}
.btn-call:hover{background:var(--orange-hover)}
.btn-sec{background:var(--sec);color:var(--text)}
.btn-sec:hover{background:var(--sec-hover)}
.btn-sm{height:34px;padding:0 16px;font-size:.9375rem;gap:6px}
.btn-sm svg{width:15px;height:15px}
.tlink{display:inline-flex;align-items:center;gap:2px;color:var(--orange);font-size:var(--fs-body);font-weight:400}
.tlink::after{content:"\203A";font-size:1.35em;line-height:.7;transform:translateY(-1px);margin-left:4px;transition:transform .25s var(--ease)}
.tlink:hover{text-decoration:underline;text-underline-offset:3px}
.tlink:hover::after{transform:translate(2px,-1px)}

/* plus */
.plus{position:relative;flex:none;width:36px;height:36px;border-radius:50%;background:var(--plus);transition:background-color .25s var(--ease),transform .4s var(--ease)}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}

/* ---------- NAV ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;pointer-events:none}
.nav-bar{pointer-events:auto;position:relative;margin:0 auto;width:100%;max-width:100%;height:var(--nav-h);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 var(--gutter);background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);transition:max-width .7s var(--ease),width .7s var(--ease),margin-top .7s var(--ease),border-radius .7s var(--ease),padding .7s var(--ease),background-color .4s var(--ease)}
.nav:not(.is-scrolled) .nav-bar{background:rgba(0,0,0,.18)}
.brand{display:inline-flex;align-items:center;gap:10px;font-size:.9375rem;font-weight:600;letter-spacing:-.01em;justify-self:start;min-height:44px}
.mono{width:30px;height:27px;flex:none}
.nav-links{display:flex;gap:32px;font-size:.875rem;color:rgba(245,245,247,.82)}
.nav-links a{display:inline-flex;align-items:center;min-height:44px;transition:color .2s}
.nav-links a:hover{color:var(--text)}
.nav-cta{justify-self:end;display:flex;align-items:center;gap:18px}
.nav-tel{font-size:.875rem;color:rgba(245,245,247,.82);font-variant-numeric:tabular-nums;transition:opacity .4s var(--ease),max-width .7s var(--ease);white-space:nowrap;overflow:hidden;max-width:160px;line-height:44px}
.nav-tel:hover{color:var(--text)}
/* menu control: two hairlines that fold into a cross (the same 48 px system as apple.com) */
.nav-menu{display:none;width:48px;height:48px;margin-right:-14px;position:relative;border-radius:50%;-webkit-tap-highlight-color:transparent}
.nav-menu span{position:absolute;left:15px;width:18px;height:1.5px;background:var(--text);border-radius:2px;transition:transform .5s var(--ease),top .5s var(--ease)}
.nav-menu span:first-child{top:20px}
.nav-menu span:last-child{top:26.5px}
.nav-menu[aria-expanded="true"] span:first-child{top:23.25px;transform:rotate(45deg)}
.nav-menu[aria-expanded="true"] span:last-child{top:23.25px;transform:rotate(-45deg)}
.nav-menu:focus-visible{outline-offset:-4px}

@media (min-width:735px){
  /* at the top the bar does not exist: brand, links and the call pill float over the hero.
     Once the page scrolls (JS sets .is-capsule) it gathers into the rounded glass capsule. */
  .nav-bar{max-width:calc(var(--wrap) + 2*var(--gutter));background:rgba(22,22,23,0);-webkit-backdrop-filter:saturate(1) blur(0px);backdrop-filter:saturate(1) blur(0px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,0);transition:max-width .7s var(--ease),width .7s var(--ease),margin-top .7s var(--ease),border-radius .7s var(--ease),padding .7s var(--ease),background-color .5s var(--ease),box-shadow .5s var(--ease),-webkit-backdrop-filter .5s var(--ease),backdrop-filter .5s var(--ease)}
  .nav:not(.is-scrolled) .nav-bar{background:rgba(22,22,23,0)}
  .nav.is-capsule .nav-bar{max-width:880px;width:calc(100% - 32px);margin-top:12px;border-radius:980px;padding:0 8px 0 18px;background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1)}
  .nav.is-capsule .nav-tel{opacity:0;max-width:0}
  .nav.is-capsule .nav-cta{gap:0}
  .nav:not(.is-capsule) .nav-links,.nav:not(.is-capsule) .nav-tel{color:rgba(245,245,247,.88)}
  .nav:not(.is-capsule) .brand,.nav:not(.is-capsule) .nav-links,.nav:not(.is-capsule) .nav-tel{text-shadow:0 1px 12px rgba(0,0,0,.35)}
  /* without JS the bar never turns into the capsule, so it simply stays with the hero */
  html:not(.js) .nav{position:absolute}
}
@media (max-width:1068px) and (min-width:735px){
  .nav-tel{display:none}
  .nav-links{gap:24px}
}
/* Phones: a calm 48 px glass bar with only the name and the menu control. Calling lives in
   the floating action bar at the bottom (and in the open menu), so the top bar stays quiet. */
@media (max-width:734px){
  :root{--nav-h:48px}
  .nav-links,.nav-cta{display:none}
  /* floating capsule like desktop: inset from the edges, fully rounded, same glass as the action bar */
  .nav-bar{grid-template-columns:1fr auto;width:calc(100% - 24px);margin-top:calc(10px + env(safe-area-inset-top,0px));border-radius:980px;padding:0 4px 0 16px;background:var(--glass);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.35);transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
  .nav:not(.is-scrolled) .nav-bar{background:rgba(22,22,23,.55)}
  .menu-open .nav .nav-bar{background:rgba(44,44,46,.72);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.16),0 10px 30px rgba(0,0,0,.35)}
  .nav-menu{margin-right:0}
  .nav-menu{display:grid}
  .brand{gap:9px;font-size:1rem}
  .mono{width:25px;height:23px}
}

/* mobile menu: grows down out of the bar (clip-path), blurred glass, links settle in one by one */
.sheet{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;padding:calc(var(--nav-h) + 36px + env(safe-area-inset-top,0px)) var(--gutter) calc(24px + env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;background:rgba(10,10,11,.82);-webkit-backdrop-filter:saturate(1.8) blur(30px);backdrop-filter:saturate(1.8) blur(30px);clip-path:inset(0 0 100% 0);transition:clip-path .42s var(--ease) .06s;scrollbar-width:none}
.sheet::-webkit-scrollbar{display:none}
.sheet[hidden]{display:none}
.sheet.is-open{clip-path:inset(0 0 0 0);transition:clip-path .6s var(--ease)}
.sheet nav{display:flex;flex-direction:column}
.sheet nav a{display:block;padding:9px 0;font-size:1.75rem;font-weight:600;letter-spacing:-.022em;line-height:1.14;color:var(--text);opacity:0;transform:translateY(-8px);transition:opacity .16s var(--ease),transform .2s var(--ease)}
.sheet.is-open nav a{opacity:1;transform:none;transition:opacity .5s var(--ease),transform .6s var(--ease);transition-delay:calc(var(--i,0) * 35ms + 110ms)}
.sheet nav a:active{color:var(--text-2)}
.sheet-foot{margin-top:auto;padding-top:32px;display:grid;gap:20px;opacity:0;transform:translateY(-6px);transition:opacity .16s var(--ease),transform .2s var(--ease)}
.sheet.is-open .sheet-foot{opacity:1;transform:none;transition:opacity .5s var(--ease) .3s,transform .6s var(--ease) .3s}
.sheet-foot .row{display:flex;gap:10px}
.sheet-foot .row .btn{flex:1;height:50px}
.sheet-info{display:grid;gap:0;margin:0;border-top:.5px solid rgba(255,255,255,.14)}
.sheet-info > div{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:.5px solid rgba(255,255,255,.14);font-size:.9375rem;line-height:1.3}
.sheet-info dt{color:var(--text-3)}
.sheet-info dd{margin:0;color:var(--text);text-align:right}
.sheet-foot .tlink{justify-self:start;font-size:.9375rem}

/* ---------- HERO ---------- */
.hero{height:100svh;min-height:760px;max-height:1200px;display:flex;align-items:flex-end;overflow:hidden;background:var(--bg)}
.hero-media{position:absolute;inset:0;transform-origin:60% 40%}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:0% 45%}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,#000 0%,rgba(0,0,0,.72) 18%,rgba(0,0,0,0) 52%),linear-gradient(to right,rgba(0,0,0,.66) 0%,rgba(0,0,0,.25) 38%,rgba(0,0,0,0) 60%)}
.hero-copy{position:relative;z-index:1;padding-bottom:96px}
.hero-copy .kicker{color:var(--text-2);margin-bottom:14px}
.byline{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.byline-img{width:84px;height:84px;border-radius:50%;object-fit:cover;object-position:50% 40%;flex:none;background:var(--tile);box-shadow:0 0 0 1px rgba(255,255,255,.08)}
.byline .kicker{margin:0;display:flex;flex-direction:column;gap:3px}
.byline-name{color:var(--text);font-weight:600}
.hero h1{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em}
.hero .lead{color:var(--text-2);max-width:560px;margin-top:24px}
.hero-actions{display:flex;align-items:center;gap:12px;margin-top:36px;flex-wrap:wrap}
.hero-actions .tlink{margin-left:12px}
.js .hero-media img{animation:heroIn 1.6s var(--ease) both}
@keyframes heroIn{from{transform:scale(1.06)}to{transform:none}}
.js .hero-copy > *{animation:rise .9s var(--ease) both}
.js .hero-copy > :nth-child(2){animation-delay:.08s}
.js .hero-copy > :nth-child(3){animation-delay:.16s}
.js .hero-copy > :nth-child(4){animation-delay:.24s}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
/* static bottom fade on the section itself, so the photo always melts into the black stage even while it drifts */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:22%;background:linear-gradient(to top,#000 0%,rgba(0,0,0,0) 100%);pointer-events:none}
.js-motion .hero-media,.js-motion .hero-copy{will-change:transform,opacity}
@media (max-width:734px){
  .hero{height:calc(100svh - 92px);min-height:540px;max-height:820px}
  .hero-media img{object-position:50% 34%}
  .hero-media::after{background:linear-gradient(to top,#000 0%,rgba(0,0,0,.9) 22%,rgba(0,0,0,.45) 46%,rgba(0,0,0,0) 64%),linear-gradient(to bottom,rgba(0,0,0,.5) 0%,rgba(0,0,0,0) 18%)}
  .hero-copy{padding-bottom:24px}
  .hero-copy .kicker{margin-bottom:10px}
  .byline{gap:12px;margin-bottom:14px}
  .byline-img{width:56px;height:56px}
  .hero .lead{margin-top:14px;font-size:1.125rem;line-height:1.38;color:#B4B4B9}
  .hero-actions{display:none}
}

/* ---------- STATEMENT ---------- */
.statement{padding:var(--pad) 0}
.lit{max-width:980px;font-size:var(--fs-statement);font-weight:600;line-height:1.17;letter-spacing:-.024em;color:var(--text)}
/* words are lit by opacity (scroll-scrubbed in JS); .3 of #F5F5F7 on black equals --text-dim */
.lit.is-lit .w{opacity:.3}

/* ---------- LEISTUNGEN ---------- */
.services{padding:0 0 var(--pad)}
.sec-head{margin-bottom:56px}
.svc-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap)}
.tile{position:relative;overflow:hidden;border-radius:var(--r-card);background:var(--tile);color:var(--text);isolation:isolate;display:flex;flex-direction:column;padding:40px;transition:background-color .3s var(--ease)}
.tile .h3{max-width:20ch}
.tile p.desc{color:var(--text-2);margin-top:12px;max-width:36ch}
.tile .plus{position:absolute;right:24px;bottom:24px;z-index:3;color:var(--text)}
.tile-open{position:absolute;inset:0;z-index:4;border-radius:inherit}
.tile:hover .plus{background:rgba(255,255,255,.24)}
.tile-open:focus-visible{outline-offset:-4px}
.tile--text:hover{background:var(--tile-hover)}
.tile-img{position:absolute;inset:0;z-index:-1}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}
.tile:hover .tile-img img{transform:scale(1.03)}
.tile--photo{justify-content:flex-end}
.tile--photo .tile-img::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.9) 0%,rgba(0,0,0,.6) 34%,rgba(0,0,0,0) 66%)}
.tile--photo p.desc{color:rgba(245,245,247,.8);padding-right:44px}

.t-schaden{grid-column:span 8;height:560px}
.t-schaden .h3{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.026em}
.t-schaden p.desc{max-width:40ch}
.t-schaden .tile-img img{object-position:50% 60%;scale:-1 1}
.t-kurz{grid-column:span 4;height:560px;justify-content:space-between}
.t-kurz .fig{padding-right:40px}
.t-kurz .fig .pre{color:var(--text-2)}
.t-kurz .fig .big{margin:6px 0 10px;color:var(--text)}
.t-kurz .fig p{color:var(--text-2);max-width:30ch}
.t-oldt,.t-wert,.t-zust{grid-column:span 4;height:400px}
.t-oldt .tile-img img{object-position:50% 30%}
.t-oldt .tile-img::after{background:linear-gradient(to top,rgba(0,0,0,.92) 0%,rgba(0,0,0,.72) 40%,rgba(0,0,0,0) 74%)}
.t-zust .tile-img img{object-position:36% 50%}
.t-wert{justify-content:space-between}
.values{display:grid;gap:6px;font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);font-weight:600;letter-spacing:-.02em;line-height:1.2;color:var(--text);padding-right:48px}
.t-beweis{grid-column:span 12;height:420px;padding:0;display:grid;grid-template-columns:1fr 1fr}
.t-beweis .tile-img{position:relative;inset:auto;z-index:0;overflow:hidden}
.t-beweis .tile-img img{object-position:40% 40%;filter:brightness(.66) contrast(1.08) saturate(.9)}
.t-beweis .txt{padding:56px 56px 40px;display:flex;flex-direction:column;justify-content:center}
.t-beweis .h3{font-size:clamp(1.75rem,1.2rem + 1.6vw,2.5rem);line-height:1.08;letter-spacing:-.026em}
.dots{display:none}
.dots-pill{position:relative;display:flex;align-items:center;height:44px;padding:0 10px;isolation:isolate}
.dots-pill::before{content:"";position:absolute;inset:8px 0;border-radius:14px;background:rgba(255,255,255,.08);z-index:-1}
.dots button{position:relative;width:24px;height:44px;transition:width .4s var(--ease)}
.dots button::before{content:"";position:absolute;left:50%;top:50%;width:8px;height:8px;border-radius:4px;background:var(--text-3);transform:translate(-50%,-50%);transition:width .4s var(--ease),background-color .3s}
.dots button[aria-current="true"]{width:40px}
.dots button[aria-current="true"]::before{width:24px;background:var(--text)}
/* photos settle from 1.06 to 1 as their tile reveals */
.js-motion .tile--photo.pre .tile-img{transform:scale(1.06);transition:transform 1.4s var(--ease) var(--d,0ms)}
.js-motion .t-beweis.pre .tile-img img{scale:1.06;transition:transform 1.2s var(--ease),scale 1.4s var(--ease) var(--d,0ms)}
.js-motion .tile--photo.pre.in .tile-img{transform:none}
.js-motion .t-beweis.pre.in .tile-img img{scale:1}

@media (max-width:1068px) and (min-width:735px){
  .svc-grid{grid-template-columns:1fr 1fr}
  .t-schaden,.t-beweis{grid-column:span 2}
  .t-kurz,.t-oldt,.t-wert,.t-zust{grid-column:span 1;height:460px}
  .t-schaden{height:520px}
  .tile{padding:32px}
}
@media (max-width:734px){
  .sec-head{margin-bottom:36px}
  .svc-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 calc(-1*var(--gutter));padding:4px var(--gutter) 8px;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain;position:relative}
  .svc-grid::-webkit-scrollbar{display:none}
  .tile{flex:0 0 calc(100% - 2*var(--gutter) - 28px);max-width:380px;height:500px!important;padding:32px 28px;scroll-snap-align:start}
  .tile .plus{right:18px;bottom:18px}
  .t-kurz .fig{padding-right:44px}
  .t-beweis{display:flex;flex-direction:column;padding:0}
  .t-beweis .tile-img{height:48%;flex:none}
  .t-beweis .txt{padding:28px 28px 32px;justify-content:flex-start}
  .t-beweis .txt p.desc{padding-right:40px}
  .dots{display:flex;justify-content:center;margin-top:12px}
}

/* ---------- ABLAUF ---------- */
.flow{background:var(--bg);padding:0 0 var(--pad)}
/* desktop (>= 1024 px): typographic step list with a slim progress track, image stack on the right */
/* the list starts level with the panel: the first step title shares its baseline with the panel label */
.flow-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:56px;align-items:start;margin-top:72px}
.steps{position:relative;padding-left:32px;padding-top:clamp(16px,calc(27.4px - .49vw),24px)}
.steps-track{position:absolute;left:0;top:10px;bottom:10px;width:2px;border-radius:2px;background:#2A2A2C;overflow:hidden}
.steps-fill{position:absolute;inset:0;background:var(--text);transform-origin:50% 0;transform:scaleY(.2);transition:transform .6s var(--ease)}
.flow.is-pinned .steps-fill{transition:none}
.steps-list{list-style:none;margin:0;padding:0}
.step-h{margin:0;font-size:clamp(1.5rem,1.1rem + .7vw,1.875rem);font-weight:600;line-height:1.15;letter-spacing:-.024em}
.step-title{display:block;width:100%;text-align:left;padding:9px 0;color:#6E6E73;letter-spacing:inherit;transition:color .35s var(--ease)}
.step-title:hover{color:#8E8E93}
.step-title:focus-visible{outline:2px solid var(--text);outline-offset:4px;border-radius:8px}
.step.is-open .step-title{color:var(--text)}
.step-text{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .6s var(--ease),opacity .35s var(--ease)}
.step-text > div{overflow:hidden;min-height:0}
.step-text p{padding:2px 0 16px;color:var(--text-2);font-size:var(--fs-body);line-height:1.47;max-width:36ch}
.step.is-open .step-text{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .6s var(--ease),opacity .5s var(--ease) .12s}
.flow-media{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-card);overflow:hidden;background:var(--tile)}
.flow-media{container-type:size}
.fm{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility 0s linear .9s}
.fm.is-active{opacity:1;visibility:visible;transition:opacity .9s var(--ease),visibility 0s}
.fm .pn{transform:scale(1.03);transition:transform 1.4s var(--ease)}
.fm.is-active .pn{transform:none}
/* step panels. Every panel follows one grid: a quiet 14 px label at the top, one composed object
   that fills the rest (phone and hours, the map, the report contents, the recipients, the
   documents). One type scale for all five: label, row (secondary lines), key (list entries) and
   display (the single big item). Sizes scale with the panel (container units), padding is fixed. */
.pn{--pp:40px;--pn-gap:14px;--pn-row:clamp(1rem,2.5cqi,1.1875rem);--pn-key:clamp(1.1875rem,3.5cqi,1.625rem);--pn-xl:clamp(1.75rem,6.4cqi,3.125rem);position:absolute;inset:0;padding:var(--pp);display:flex;flex-direction:column;text-align:left}
.pn-lbl{font-size:.875rem;font-weight:500;line-height:1.3;letter-spacing:-.005em;color:var(--text-2)}
.pn-foot{margin-top:auto}
.pn .btn{height:46px}
/* 1 call */
.pn-phone{display:block;margin-top:var(--pn-gap);font-size:var(--pn-xl);font-weight:600;line-height:1;letter-spacing:-.035em;color:var(--text);font-variant-numeric:tabular-nums;white-space:nowrap}
.pn-meta{margin-top:12px;color:var(--text-2);font-size:var(--pn-row);line-height:1.4}
.pn-meta a{color:var(--text)}
.pn-hours{margin:0 0 28px;display:grid}
.pn-hours > div,.pn-to dl > div{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:14px 0;border-top:1px solid rgba(255,255,255,.1);font-size:var(--pn-row);line-height:1.3;letter-spacing:-.012em}
.pn-hours > div:last-child,.pn-to dl > div:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
.pn-hours dt{color:var(--text-2)}
.pn-hours dd{margin:0;color:var(--text)}
.pn-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pn-actions .tlink{margin-left:14px}
/* 3 report contents: rows share the height evenly, like a spec sheet */
.pn-spec{list-style:none;margin:var(--pn-gap) 0 0;padding:0;flex:1;display:flex;flex-direction:column}
.pn-spec li{flex:1 1 0;min-height:44px;display:flex;align-items:center;border-top:1px solid rgba(255,255,255,.1);font-size:var(--pn-key);font-weight:600;line-height:1.2;letter-spacing:-.02em;color:var(--text)}
.pn-spec li:last-child{border-bottom:1px solid rgba(255,255,255,.1)}
/* 4 recipients: the insurer first and large, the copies below */
.pn-to{flex:1;display:flex;flex-direction:column}
.pn-to-main{margin-top:var(--pn-gap);padding-bottom:28px}
.pn-to-main b{display:block;font-size:var(--pn-xl);font-weight:600;line-height:1.06;letter-spacing:-.03em;color:var(--text);text-wrap:balance;hyphens:manual}
.pn-to-main span{display:block;margin-top:12px;color:var(--text-2);font-size:var(--pn-row);line-height:1.4}
.pn-to dl{margin:auto 0 0;display:grid}
.pn-to dt{color:var(--text)}
.pn-to dd{margin:0;color:var(--text-2);text-align:right}
/* 5 the documents: report on top, photo documentation and calculation behind it */
.docs{--peek:clamp(34px,6.4cqi,46px);list-style:none;margin:auto 0 0;padding:calc(var(--peek) * 2) 0 0;display:grid}
.docs li{grid-area:1/1;border-radius:clamp(14px,2.6cqi,20px);padding:12px clamp(18px,3.6cqi,28px);min-height:clamp(160px,36cqi,250px);font-size:.9375rem;font-weight:500;line-height:1.3;color:var(--text-2);letter-spacing:-.008em}
.docs li:nth-child(1){z-index:3;background:#2A2A2C;display:flex;flex-direction:column;padding-top:clamp(18px,3.6cqi,28px);padding-bottom:clamp(18px,3.6cqi,28px);box-shadow:0 -10px 30px rgba(0,0,0,.3)}
.docs li:nth-child(2){z-index:2;background:#222224;margin:0 4.5%;transform:translateY(calc(var(--peek) * -1))}
.docs li:nth-child(3){z-index:1;background:#1B1B1D;margin:0 9%;transform:translateY(calc(var(--peek) * -2))}
.doc-mono{width:clamp(26px,5cqi,34px);height:clamp(23px,4.5cqi,30px);--f:#8A8C8C}
.doc-t{margin-top:auto;font-size:var(--pn-xl);font-weight:600;line-height:1.05;letter-spacing:-.03em;color:var(--text)}
.doc-by{margin-top:8px;font-size:var(--pn-row);font-weight:400;color:var(--text-2)}
/* 2 the map fills the panel on its own: a square OSM render, the 100 km circle centred and as
   large as the panel height allows; labels are HTML so they use the page font */
/* #09090a is the dimmed land outside the circle in the SVG, so the panel edge and the map meet seamlessly */
.pn-map{padding:0;overflow:hidden;background:#09090a}
.pn-map::after{content:"";position:absolute;left:0;right:0;bottom:0;height:16%;z-index:1;pointer-events:none;background:linear-gradient(to top,rgba(9,9,10,.92) 0%,rgba(9,9,10,0) 100%)}
.map{position:absolute;left:50%;top:50%;width:min(max(100cqi,100cqb),138cqb);aspect-ratio:1;transform:translate(-50%,-50%);-webkit-mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%);mask-image:linear-gradient(to right,transparent 0,#000 11%,#000 89%,transparent 100%)}
.map-img{position:absolute;inset:0;width:100%;height:100%}
.town,.road,.map-r{position:absolute;white-space:nowrap;line-height:1}
.town{display:flex;align-items:center;gap:6px;font-size:.8125rem;font-weight:500;color:#B4B4B9;letter-spacing:0;transform:translate(-3px,-50%);text-shadow:0 0 6px #0f0f10,0 0 3px #0f0f10}
.town::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#C7C7CC;box-shadow:0 0 0 2px #0f0f10}
.town.t-l{flex-direction:row-reverse;transform:translate(calc(-100% + 3px),-50%)}
.town.t-s{color:var(--text-2)}
.town.t-s::before{width:5px;height:5px;background:#8E8E93}
.road{display:none}
.map-r{transform:translate(-50%,-50%) rotate(-45deg);padding:2px 7px;border-radius:6px;background:#0f0f10;color:var(--text-2);font-size:.8125rem;font-weight:500}
.map-attr{position:absolute;right:var(--pp);bottom:16px;z-index:2;margin:0;font-size:.6875rem;line-height:1.3;color:var(--text-3);text-align:right}
/* panel entrance on step change (desktop): the object settles a moment after the label */
.fm .pn > *{transition:opacity .7s var(--ease),transform .9s var(--ease)}
.js-motion .fm:not(.is-active) .pn > :not(.map):not(.map-attr){opacity:0;transform:translateY(14px)}
.js-motion .fm.is-active .pn > :nth-child(2){transition-delay:.06s}
.js-motion .fm.is-active .pn > :nth-child(3){transition-delay:.12s}
.js-motion .fm.is-active .pn > :nth-child(4){transition-delay:.18s}
/* pinned scene (set by JS): the wrap gets a tall height, the stage sticks and scroll picks the step */
.js-motion .flow.is-pinned .flow-stage{position:sticky;top:var(--pin-top,96px)}
.js-motion .flow.is-pinned .flow-grid{margin-top:56px}
.js-motion .flow.is-pinned .flow-media{max-height:calc(100vh - 300px);max-height:calc(100svh - 300px)}
/* mobile and tablet (< 1024 px): scroll-snap carousel. Each card carries its own step title and
   text, then the same object as the desktop panel; all cards share one height. */
.flow-cards,.flow-dots{display:none}
@media (max-width:1023px){
  .flow-grid{display:none}
  .flow-cards{display:flex;align-items:stretch;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;margin:40px calc(-1*var(--gutter)) 0;padding:0 var(--gutter) 4px;scroll-padding:0 var(--gutter);scrollbar-width:none;overscroll-behavior-x:contain}
  .flow-cards::-webkit-scrollbar{display:none}
  .fcard{--pp:28px;--cw:min(84vw,420px);flex:0 0 var(--cw);min-height:calc(var(--cw) * 1.36);scroll-snap-align:start;margin:0;position:relative;border-radius:var(--r-card);overflow:hidden;background:var(--tile);container-type:inline-size;display:flex;flex-direction:column;padding:var(--pp)}
  .fc-head{position:relative;z-index:2;margin-bottom:28px}
  .fc-head h3{font-size:1.375rem;font-weight:600;line-height:1.15;letter-spacing:-.022em;color:var(--text);text-wrap:balance}
  .fc-head p{margin-top:8px;color:var(--text-2);font-size:1rem;line-height:1.45;max-width:36ch}
  .fcard .pn{--pp:28px;position:relative;inset:auto;padding:0;flex:1}
  /* the map takes all the room below the step text and bleeds to the card edges */
  .fcard .pn-map{flex:1 1 0;margin:0 calc(-1*var(--pp)) calc(-1*var(--pp));overflow:visible;background:none;container-type:size;min-height:220px;z-index:0}
  .fcard .pn-map::after{display:none}
  .fcard .map{width:min(max(100cqi,100cqb),136cqb);top:46%;-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 84%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0,#000 22%,#000 84%,transparent 100%)}
  .fcard .map-attr{right:var(--pp);bottom:14px}
  .fcard.is-map{background:#09090a}
  .fcard .pn-actions .btn{flex:1}
  .flow-dots{display:flex;justify-content:center;margin-top:20px}
}
}

/* ---------- ÜBER MICH ---------- */
.about{background:var(--bg);padding:0;--f:#8A8C8C}
.about-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch}
/* edge-to-edge photo, melting into the stage at the inner edge and softly at top and bottom */
.about-photo{position:relative;min-height:760px;overflow:hidden;
  -webkit-mask-image:linear-gradient(to right,#000 58%,rgba(0,0,0,0) 100%),linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 14%,#000 84%,rgba(0,0,0,0) 100%);
  mask-image:linear-gradient(to right,#000 58%,rgba(0,0,0,0) 100%),linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 14%,#000 84%,rgba(0,0,0,0) 100%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.about-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:100% 22%}
/* reveal: a clip-path inset that opens from the page edge toward the text */
.js-motion .about-photo.pre img{clip-path:inset(9% 30% 9% 0 round 0 28px 28px 0);transform:scale(1.08);transition:clip-path 1.5s var(--ease),transform 1.9s var(--ease)}
.js-motion .about-photo.pre.in img{clip-path:inset(0 0 0 0 round 0 0 0 0);transform:none}
.about-copy{padding:var(--pad) max(var(--gutter),calc((100vw - var(--wrap)) / 2)) var(--pad) clamp(40px,6vw,96px);max-width:calc(620px + clamp(40px,6vw,96px) + max(var(--gutter),calc((100vw - var(--wrap)) / 2)))}
.about .lead{margin-top:28px;color:var(--text)}
.about .body{margin-top:20px;color:var(--text-2);max-width:52ch}
.cv-h{margin-top:56px;font-size:var(--fs-body);font-weight:600;letter-spacing:-.012em;color:var(--text)}
.cv{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px}
.cv li{display:grid;grid-template-columns:3.75rem minmax(0,1fr);gap:12px;align-items:baseline}
.cv .y{color:var(--text-3);font-variant-numeric:tabular-nums}
.cv .r{color:var(--text-2)}
.certs{margin-top:36px;color:var(--text-3);font-size:var(--fs-small);line-height:1.5;max-width:52ch}
.certs span{display:block}
@media (max-width:1068px) and (min-width:735px){
  .about-photo{min-height:680px}
}
@media (max-width:734px){
  .about-split{display:block}
  .about-photo{min-height:0;aspect-ratio:4/5;
    -webkit-mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 12%,#000 70%,rgba(0,0,0,0) 100%);
    mask-image:linear-gradient(to bottom,rgba(0,0,0,0) 0%,#000 12%,#000 70%,rgba(0,0,0,0) 100%)}
  .js-motion .about-photo.pre img{clip-path:inset(8% 8% 8% 8% round 22px 22px 22px 22px)}
  .about-copy{max-width:none;padding:12px var(--gutter) var(--pad)}
  .cv-h{margin-top:44px}
}

/* ---------- OLDTIMER ---------- */
/* the about photo's faded lower edge already adds soft space, so the card follows closely */
.classic{padding:calc(var(--pad) * .5) 0 var(--pad);background:var(--bg)}
.classic-media{position:relative;aspect-ratio:21/9;max-height:86svh;width:100%;overflow:hidden}
.classic-media img{width:100%;height:100%;object-fit:cover;object-position:50% 52%;filter:brightness(.74) saturate(.82) contrast(1.06)}
/* band fades into black top and bottom; JS fades this in while the card grows to full bleed */
.classic-fade{position:absolute;inset:0;background:linear-gradient(to bottom,#000 0%,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 66%,#000 100%);pointer-events:none}
.js-motion .classic-media img{will-change:transform}
.classic-copy{padding-top:40px}
.classic-copy .body{margin-top:24px;max-width:680px;color:var(--text-2);font-size:var(--fs-lead);line-height:1.38;letter-spacing:-.012em}
.classic-copy .body strong{color:var(--text);font-weight:600}
@media (max-width:734px){
  .classic{padding-top:0}
  .classic-media{aspect-ratio:4/5}
  .classic-media img{object-position:44% 50%}
  .classic-copy{padding-top:20px}
  .classic-copy .body{font-size:var(--fs-body);line-height:1.47}
}

/* ---------- FAQ ---------- */
.faq{background:var(--bg);padding:0 0 var(--pad)}
.faq-grid{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:48px;align-items:start}
.faq-head{position:sticky;top:112px}
.faq-head p{color:var(--text-2);margin-top:20px;max-width:28ch}
.faq-head p a{color:var(--orange)}
.faq-list{display:grid;gap:8px}
.qa{background:var(--tile);border-radius:18px;transition:background-color .25s}
.qa:hover{background:var(--tile-hover)}
.qa summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 24px 24px 28px;font-size:clamp(1.0625rem,1rem + .3vw,1.1875rem);font-weight:600;letter-spacing:-.016em;line-height:1.3}
.qa summary::-webkit-details-marker{display:none}
.qa summary .plus{width:32px;height:32px}
.qa summary .plus::before,.qa summary .plus::after{width:12px}
.qa[open] summary .plus{transform:rotate(45deg)}
.qa .ans{padding:0 88px 28px 28px;color:var(--text-2)}
.qa::details-content{block-size:0;overflow:hidden;transition:block-size .45s var(--ease),content-visibility .45s allow-discrete}
.qa[open]::details-content{block-size:auto}
@media (max-width:900px){
  .faq-grid{grid-template-columns:1fr;gap:40px}
  .faq-head{position:static}
  .qa summary{padding:22px 20px 22px 24px}
  .qa .ans{padding:0 24px 26px}
}

/* ---------- KONTAKT ---------- */
.contact{padding:0 0 calc(var(--pad) - 24px);background:var(--bg)}
.contact-head h2{font-size:var(--fs-h1);line-height:1.02;letter-spacing:-.035em}
.contact-head p{margin-top:20px;color:var(--text-2);max-width:40ch}
/* hours and the callback offer: a deliberate pair, the hours a touch stronger */
.contact-head .ct-hours{max-width:none;margin-top:24px}
.ct-hours > span{display:block}
.ct-h1{color:var(--text);font-weight:500}
.ct-h2{margin-top:8px;color:var(--text-2)}
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--gap);margin-top:64px}
.ct{background:var(--tile);border-radius:var(--r-card);padding:40px;display:flex;flex-direction:column}
.ct-call{grid-column:span 7}
.cb{grid-column:span 5}
.ct-wa{grid-column:span 12;flex-direction:row;align-items:center;justify-content:space-between;gap:16px 32px;padding:28px 40px}
.ct-call .lbl{color:var(--text-2)}
.ct-call .phone{display:block;font-size:clamp(2.125rem,1.2rem + 3.9vw,4.75rem);font-weight:600;letter-spacing:-.035em;line-height:1;margin-top:12px;font-variant-numeric:tabular-nums;white-space:nowrap}
.ct-call .office{margin-top:18px;color:var(--text-2)}
.ct-call .office a{color:var(--text)}
.ct-call .push{margin-top:32px}
.ct-call .where{margin-top:auto;padding-top:40px;color:var(--text-3);font-size:var(--fs-small)}
.ct-call .push .btn{height:48px;padding:0 28px}
.ct-wa p{color:var(--text-2);margin-top:6px}
.ct-wa p .num{color:var(--text)}
.ct-wa .btn{flex:none}
.cb .h3{margin-bottom:4px}
.cb form{display:grid;gap:16px;margin-top:18px}
.field{display:grid;gap:8px}
.field label{font-size:var(--fs-small);color:var(--text-2)}
.field input,.field select{height:46px;width:100%;border:0;border-radius:var(--r-field);background:var(--field);padding:0 16px;font-size:var(--fs-body);color:var(--text);appearance:none;-webkit-appearance:none;transition:background-color .2s,box-shadow .2s}
.field input::placeholder{color:#76767B}
.field input:focus,.field select:focus{outline:none;background:#2A2A2D;box-shadow:0 0 0 2px rgba(245,245,247,.55)}
.field select{background-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMicgaGVpZ2h0PSc4JyB2aWV3Qm94PScwIDAgMTIgOCc+PHBhdGggZD0nTTEgMS41bDUgNSA1LTUnIGZpbGw9J25vbmUnIHN0cm9rZT0nI0ExQTFBNicgc3Ryb2tlLXdpZHRoPScxLjYnIHN0cm9rZS1saW5lY2FwPSdyb3VuZCcgc3Ryb2tlLWxpbmVqb2luPSdyb3VuZCcvPjwvc3ZnPg==");background-repeat:no-repeat;background-position:right 16px center;padding-right:40px}
/* custom select (JS): the native <select> stays in the form, hidden, and carries the value.
   Without JS the native control is shown as is. */
.sel{position:relative}
.sel-btn{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:46px;padding:0 16px;border-radius:var(--r-field);background:var(--field);font-size:var(--fs-body);color:var(--text);text-align:left;transition:background-color .2s,box-shadow .2s}
.sel-btn:hover{background:#28282B}
.sel-btn:focus-visible,.sel.is-open .sel-btn{outline:none;background:#2A2A2D;box-shadow:0 0 0 2px rgba(245,245,247,.55)}
.sel-val{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sel-btn svg{width:12px;height:8px;flex:none;color:var(--text-2);transition:transform .35s var(--ease)}
.sel.is-open .sel-btn svg{transform:rotate(180deg)}
.sel-pop{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;padding:6px;border-radius:16px;background:rgba(44,44,46,.92);-webkit-backdrop-filter:saturate(1.8) blur(24px);backdrop-filter:saturate(1.8) blur(24px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.14),0 24px 60px rgba(0,0,0,.55);transform-origin:50% 0;animation:popIn .24s var(--ease) both}
.sel-pop.up{top:auto;bottom:calc(100% + 8px);transform-origin:50% 100%}
.sel-pop[hidden],.sel-scrim[hidden]{display:none}
.sel.is-closing .sel-pop{animation:popOut .16s cubic-bezier(.4,0,1,1) both}
@keyframes popIn{from{opacity:0;transform:scale(.97)}to{opacity:1;transform:none}}
@keyframes popOut{from{opacity:1}to{opacity:0;transform:scale(.98)}}
.sel-title{display:none}
.sel-list{list-style:none;margin:0;padding:0;outline:none}
.sel-opt{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 12px 0 14px;border-radius:10px;font-size:var(--fs-body);line-height:1.25;color:var(--text);cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.sel-opt.is-active{background:rgba(255,255,255,.1)}
.sel-list:focus-visible .sel-opt.is-active{box-shadow:inset 0 0 0 2px rgba(245,245,247,.5)}
.sel-opt svg{width:18px;height:18px;flex:none;color:var(--orange);visibility:hidden}
.sel-opt[aria-selected="true"] svg{visibility:visible}
.sel-scrim{display:none}
@media (max-width:734px){
  .sel-scrim{display:block;position:fixed;inset:0;z-index:60;background:rgba(0,0,0,.5);animation:fadeIn .3s var(--ease) both}
  .sel.is-closing .sel-scrim{animation:fadeOut .22s cubic-bezier(.4,0,1,1) both}
  .sel-pop,.sel-pop.up{position:fixed;left:calc(8px + env(safe-area-inset-left));right:calc(8px + env(safe-area-inset-right));top:auto;bottom:calc(8px + env(safe-area-inset-bottom));z-index:61;padding:6px 8px 8px;border-radius:24px;background:rgba(36,36,38,.95);animation:selIn .45s cubic-bezier(.32,.72,0,1) both}
  .sel.is-closing .sel-pop{animation:selOut .24s cubic-bezier(.4,0,1,1) both}
  .sel-title{display:block;margin:0 0 6px;padding:12px 14px;text-align:center;font-size:.8125rem;font-weight:600;color:var(--text-3);border-bottom:.5px solid rgba(255,255,255,.12)}
  .sel-opt{min-height:52px;padding:0 14px 0 16px;border-radius:16px;font-size:1.0625rem}
}
@keyframes selIn{from{transform:translateY(calc(100% + 16px))}to{transform:none}}
@keyframes selOut{from{transform:none}to{transform:translateY(calc(100% + 16px))}}
.cb form .btn{margin-top:8px;justify-self:start}
.cb .note{color:var(--text-3);font-size:.8125rem;line-height:1.4;margin-top:4px}
.cb .note a{color:var(--text-2);text-decoration:underline;text-underline-offset:2px}
.cb-done{display:none;margin-top:auto;padding-top:24px}
.cb-done .h3{margin:0}
.cb-done p{color:var(--text-2);margin-top:10px}
.cb.is-sent form{display:none}
.cb.is-sent .cb-done{display:block;animation:rise .6s var(--ease) both}
.cb-check{width:44px;height:44px;border-radius:50%;background:var(--sec);display:grid;place-items:center;margin-bottom:20px}
.cb-check svg{width:20px;height:20px}
.contact-foot{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:48px;color:var(--text-2)}
.contact-foot a:not(.tlink){color:var(--text-2)}
.contact-foot a:not(.tlink):hover{color:var(--text)}
@media (max-width:1068px){
  .ct-call,.cb{grid-column:span 12}
}
@media (max-width:734px){
  .contact-grid{margin-top:40px}
  .ct{padding:32px 28px}
  .ct-call .push{margin-top:24px}
  .ct-call .where{padding-top:24px}
  .tile--photo p.desc{padding-right:40px}
  .ct-wa{flex-direction:column;align-items:flex-start;padding:32px 28px}
  .contact-foot{flex-direction:column;gap:0;margin-top:24px}
  .contact-foot a{min-height:44px;align-items:center}
  .contact-foot a:not(.tlink){display:inline-flex}
}

/* ---------- FOOTER ---------- */
.foot{background:var(--bg);color:var(--text-3);font-size:var(--fs-small);line-height:1.6;padding:64px 0 40px;--f:#8A8C8C}
.foot-top{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:32px}
.foot-brand{display:flex;gap:14px;align-items:flex-start}
.foot-brand .mono{width:36px;height:32px}
.foot-brand b{display:block;color:var(--text);font-weight:600}
.foot h4{margin:0 0 6px;color:var(--text-2);font-weight:600;font-size:var(--fs-small)}
.foot a:hover{color:var(--text)}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px 32px;margin-top:56px}
.foot-bottom nav{display:flex;gap:24px}
@media (max-width:900px){.foot-top{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}}
@media (max-width:734px){
  .foot{padding-bottom:calc(104px + env(safe-area-inset-bottom))}
  .foot-top{grid-template-columns:1fr;gap:24px}
  .foot-brand{grid-column:auto}
  .foot-bottom{margin-top:40px;flex-direction:column;gap:4px}
  .foot-bottom nav a{display:inline-flex;align-items:center;min-height:44px}
}

/* ---------- MOBILE ACTION BAR ---------- */
/* same glass, hairline and radius language as the top bar: the two bars frame the page as one system */
.actionbar{display:none}
@media (max-width:734px){
  .actionbar{display:flex;position:fixed;z-index:40;left:calc(10px + env(safe-area-inset-left));right:calc(10px + env(safe-area-inset-right));bottom:calc(10px + env(safe-area-inset-bottom));height:60px;padding:6px;gap:2px;border-radius:30px;background:var(--glass);-webkit-backdrop-filter:saturate(1.8) blur(20px);backdrop-filter:saturate(1.8) blur(20px);box-shadow:inset 0 0 0 .5px rgba(255,255,255,.12),0 12px 32px rgba(0,0,0,.5);transition:transform .5s var(--ease),opacity .35s var(--ease)}
  .actionbar a{flex:1;min-width:44px;min-height:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;border-radius:24px;color:var(--text);font-size:.6875rem;font-weight:500;letter-spacing:.01em;line-height:1;white-space:nowrap;-webkit-tap-highlight-color:transparent;transition:transform .15s var(--ease),background-color .2s}
  .actionbar a svg{width:20px;height:20px;flex:none}
  .actionbar a:active{transform:scale(.97);background:var(--sec)}
  .actionbar .ab-call{flex:2.1;flex-direction:row;gap:8px;background:var(--orange);color:var(--on-orange);font-size:1.0625rem;font-weight:600;letter-spacing:-.012em}
  .actionbar .ab-call svg{width:18px;height:18px}
  .actionbar .ab-call:active{background:var(--orange-hover)}
  .actionbar.is-hidden,.menu-open .actionbar{transform:translateY(calc(100% + 28px));opacity:0;pointer-events:none}
}

/* ---------- SERVICE DETAIL DIALOG ---------- */
/* desktop: centred modal; phones: a sheet that slides up from the bottom with a grabber.
   Header and close button stay put, only the content scrolls, the call to action is always visible. */
.dlg{--dp:56px;padding:0;border:0;margin:auto;width:min(720px,calc(100% - 48px));max-width:none;max-height:min(86svh,860px);border-radius:28px;background:#1C1C1E;color:var(--text);overflow:hidden;overscroll-behavior:contain;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.1),0 40px 100px rgba(0,0,0,.6)}
.dlg[open]{display:flex;flex-direction:column;animation:dlgIn .5s var(--ease) backwards}
.dlg:focus{outline:none}
.dlg::backdrop{background:rgba(0,0,0,.62);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px)}
.dlg[open]::backdrop{animation:fadeIn .4s var(--ease) both}
.dlg.is-closing{animation:dlgOut .22s cubic-bezier(.4,0,1,1) both}
.dlg.is-closing::backdrop{animation:fadeOut .26s cubic-bezier(.4,0,1,1) both}
@keyframes dlgIn{from{opacity:0;transform:translateY(24px) scale(.98)}to{opacity:1;transform:none}}
@keyframes dlgOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(12px) scale(.985)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}
.dlg-grab{display:none}
.dlg-close{position:absolute;top:20px;right:20px;z-index:3;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--text-2);transition:background-color .2s,color .2s}
.dlg-close:hover{background:rgba(255,255,255,.16);color:var(--text)}
.dlg-close::before,.dlg-close::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:1.75px;border-radius:2px;background:currentColor;transform:translate(-50%,-50%) rotate(45deg)}
.dlg-close::after{transform:translate(-50%,-50%) rotate(-45deg)}
.dlg-scroll{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;-ms-overflow-style:none}
.dlg-scroll::-webkit-scrollbar{display:none}
/* content: a service sheet. Header (name, one factual sentence, "at a glance" pairs), one divider,
   then the scope in short named groups. No rules between items, the spacing carries the structure. */
.dlg-body{padding:var(--dp) var(--dp) 32px}
.dlg-body h3{padding-right:44px;font-size:clamp(1.875rem,1.5rem + 1.2vw,2.5rem);line-height:1.08;letter-spacing:-.03em}
.dlg-body .intro{margin-top:14px;max-width:46ch;color:var(--text-2);font-size:clamp(1.0625rem,1rem + .25vw,1.1875rem);line-height:1.45;letter-spacing:-.012em}
.glance{display:grid;gap:12px;margin:30px 0 0;max-width:600px}
.glance > div{display:grid;grid-template-columns:8.5rem minmax(0,1fr);gap:16px;align-items:baseline}
.glance dt{font-size:.875rem;font-weight:600;line-height:1.4;letter-spacing:-.005em;color:var(--text-2)}
.glance dd{margin:0;font-size:1.0625rem;line-height:1.45;letter-spacing:-.01em;color:var(--text);text-wrap:pretty}
.dlg-content{margin-top:36px;padding-top:36px;border-top:1px solid rgba(255,255,255,.1)}
.dlg-body h4{margin:0;font-size:1.25rem;font-weight:600;line-height:1.2;letter-spacing:-.018em;color:var(--text)}
.groups{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px 40px;margin-top:22px}
.grp h5{margin:0 0 8px;font-size:.9375rem;font-weight:600;line-height:1.3;letter-spacing:-.008em;color:var(--text)}
.grp ul{list-style:none;margin:0;padding:0}
.grp li{font-size:1.0625rem;line-height:1.5;letter-spacing:-.01em;color:var(--text-2);padding:2px 0}
.grp-wide{grid-column:1/-1}
.grp ul.cols{columns:3;column-gap:40px}
.grp ul.cols li{break-inside:avoid}
.dlg-body .fine{margin-top:32px;max-width:56ch;color:var(--text-2);font-size:.9375rem;line-height:1.5}
.dlg-body .fine strong{color:var(--text);font-weight:600}
.dlg-actions{position:relative;flex:none;display:flex;flex-wrap:wrap;gap:12px;padding:28px var(--dp) 44px;background:#1C1C1E}
.dlg-actions::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:28px;background:linear-gradient(to top,#1C1C1E,rgba(28,28,30,0));pointer-events:none}
.dlg-actions .btn{height:48px;padding:0 26px}
.dlg-actions .m-only{display:none}
@media (max-width:734px){
  .dlg{--dp:24px;width:100%;margin:auto 0 0;max-height:calc(100svh - 44px);border-radius:28px 28px 0 0;box-shadow:inset 0 .5px 0 rgba(255,255,255,.12)}
  .dlg[open]{animation:sheetIn .5s cubic-bezier(.32,.72,0,1) backwards}
  .dlg.is-closing{animation:sheetOut .28s cubic-bezier(.4,0,1,1) both}
  .dlg-grab{display:block;position:absolute;left:0;right:0;top:0;height:40px;z-index:2;touch-action:none;cursor:grab}
  .dlg-grab::before{content:"";position:absolute;left:50%;top:7px;width:36px;height:5px;border-radius:3px;background:rgba(255,255,255,.24);transform:translateX(-50%)}
  .dlg-close{top:18px;right:16px;width:32px;height:32px}
  .dlg-close::before,.dlg-close::after{width:12px}
  .dlg-body{padding:44px var(--dp) 28px}
  .dlg-body h3{font-size:1.875rem}
  .glance{gap:14px;margin-top:26px}
  .glance > div{grid-template-columns:6.75rem minmax(0,1fr);gap:12px}
  .glance dd{font-size:1rem}
  .dlg-content{margin-top:28px;padding-top:28px}
  .groups{grid-template-columns:minmax(0,1fr);gap:24px;margin-top:18px}
  .grp li{font-size:1rem}
  .grp ul.cols{columns:2;column-gap:24px}
  .dlg-body .fine{margin-top:28px}
  .dlg-actions{flex-wrap:nowrap;gap:10px;padding:14px var(--dp) calc(14px + env(safe-area-inset-bottom))}
  .dlg-actions .btn{height:50px;padding:0 18px}
  .dlg-actions .btn-call{flex:1}
  .dlg-actions .m-hide{display:none}
  .dlg-actions .m-only{display:inline}
}
@keyframes sheetIn{from{transform:translateY(100%)}to{transform:none}}
@keyframes sheetOut{from{transform:translateY(var(--drag,0px))}to{transform:translateY(100%)}}

/* ---------- REVEAL ---------- */
.rv{transition:opacity .7s var(--ease) var(--d,0ms),transform .7s var(--ease) var(--d,0ms)}
.rv.pre{opacity:0;transform:translateY(24px)}
.rv.pre.in{opacity:1;transform:none}

/* ---------- WITHOUT JAVASCRIPT ---------- */
/* every step is readable, and controls that only work with JS are not offered */
html:not(.js) .step-text{grid-template-rows:1fr;opacity:1}
html:not(.js) .step-title{color:var(--text);cursor:default}
html:not(.js) .steps-fill{transform:none}
html:not(.js) .tile-open,html:not(.js) .tile .plus,html:not(.js) .nav-menu,html:not(.js) .dots{display:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* ---------- FORMER INLINE STYLES ---------- */
.sprite{position:absolute}
.fk-f{fill:var(--f,#8A8C8C)}
.fk-k{fill:var(--k,#F69800)}
.sheet nav a:nth-child(1){--i:0}
.sheet nav a:nth-child(2){--i:1}
.sheet nav a:nth-child(3){--i:2}
.sheet nav a:nth-child(4){--i:3}
.sheet nav a:nth-child(5){--i:4}
.d-80{--d:80ms}
.d-160{--d:160ms}
.at-nuernberg{left:64.7%;top:54.3%}
.at-fuerth{left:62.6%;top:53.4%}
.at-wuerzburg{left:37.1%;top:41.7%}
.at-erlangen{left:63.0%;top:49.0%}
.at-bamberg{left:60.1%;top:38.1%}
.at-schweinfurt{left:44.4%;top:32.5%}
.at-ansbach{left:52.6%;top:59.8%}
.at-kitzingen{left:42.7%;top:43.8%}
.at-a3{left:55.6%;top:44.0%}
.at-a7{left:43.8%;top:53.0%}
.at-a9{left:67.8%;top:57.9%}
.at-a73{left:64.2%;top:43.7%}
.at-a6{left:61.0%;top:59.8%}
.at-a70{left:56.7%;top:35.7%}
.at-radius{left:73.6%;top:73.6%}