/* =========================================================
   HOCERT – Website · Design: Saddesign
   Weiß · Schwarz · Rot als Akzent (Logo-Pfeil, Hover, Linien) · Schrift Satoshi
   ========================================================= */

/* Satoshi (fontshare.com, ITF Free Font License) – Dateien in /fonts ablegen.
   Solange sie fehlen, springt Figtree als Ersatz ein. */
@font-face{font-family:"Satoshi";src:local("Satoshi Variable"),local("Satoshi-Variable"),local("Satoshi"),url("../fonts/Satoshi-Variable.woff2") format("woff2"),url("../fonts/Satoshi-Variable.woff") format("woff");font-weight:300 900;font-style:normal;font-display:swap}
@font-face{font-family:"Figtree";src:url("../fonts/figtree-latin-wght-normal.woff2") format("woff2");font-weight:300 900;font-style:normal;font-display:swap}

:root{
  --bg:#FFFFFF;
  --soft:#F5F5F5;
  --fg:#0A0A0A;
  --fg-2:#6E6E6E;
  --line:#E5E5E5;
  --red:#E30613;

  --hh:84px;
  --bh:0px;
  --pad:clamp(22px,5.5vw,104px);
  --font:"Satoshi","Figtree",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --out:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--font);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
svg{display:block}
a{color:inherit}
p{margin:0 0 1em}
h1,h2,h3{margin:0;font-weight:500;line-height:1}
ul,ol,dl,dd{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
:focus-visible{outline:2px solid var(--red);outline-offset:4px}
::selection{background:var(--fg);color:var(--bg)}
.skip{position:fixed;left:12px;top:-60px;z-index:100;background:var(--fg);color:var(--bg);padding:10px 14px;text-decoration:none}
.skip:focus{top:12px}

/* ---------- Typo-Bausteine ---------- */
.label{font-size:14px;font-weight:500;color:var(--fg-2);margin:0 0 clamp(22px,3.6vh,36px)}
.h2{font-size:clamp(34px,min(4.2vw,7.8vh),88px);font-weight:500;text-transform:uppercase;letter-spacing:-.025em;line-height:.98;margin-bottom:clamp(22px,3.6vh,36px)}
.lead{font-size:clamp(19px,1.45vw,24px);line-height:1.45;color:var(--fg-2);max-width:32ch}

/* ---------- Pfeil & Plus ---------- */
.arr{display:inline-block;position:relative;width:20px;height:1.5px;background:currentColor;vertical-align:middle;margin-left:12px;transition:width .4s var(--out)}
.arr::after{content:"";position:absolute;right:0;top:-3.5px;width:8px;height:8px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:rotate(45deg)}
.arr--back{margin:0 12px 0 0;transform:scaleX(-1)}
.plus{position:relative;display:inline-block;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;margin-left:12px;vertical-align:middle;transition:background .3s,color .3s}
.plus::before,.plus::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.plus::after{transform:translate(-50%,-50%) rotate(90deg)}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;height:58px;padding:0 30px;border-radius:999px;font-size:17px;font-weight:500;text-decoration:none;white-space:nowrap;transition:background .3s,color .3s}
.btn--dark{background:var(--fg);color:var(--bg)}
.btn--dark:hover{background:var(--red)}
.btn:hover .arr{width:32px}
.textlink{display:inline-flex;align-items:center;font-size:16px;font-weight:500;text-decoration:none;color:var(--fg)}
.textlink:hover{color:var(--red)}
.textlink:hover .arr{width:32px}

/* ---------- Header ---------- */
.hdr{position:fixed;inset:0 0 auto;height:var(--hh);z-index:50;display:flex;align-items:center;gap:48px;padding:0 var(--pad);background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.logo svg{height:26px;width:auto;fill:var(--fg)}
.nav{display:flex;gap:40px;margin-left:auto}
.nav a{font-size:16px;font-weight:500;text-decoration:none;color:var(--fg-2);padding:6px 0;background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:color .3s,background-size .4s var(--out)}
.nav a:hover,.nav a.is-active{color:var(--fg);background-size:100% 2px}
.hdr__cta{height:46px;padding:0 22px;font-size:15px}
.burger{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.burger span{position:absolute;left:12px;right:12px;height:1.5px;background:var(--fg);transition:transform .35s var(--out)}
.burger span:first-child{top:18px}.burger span:last-child{top:25px}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* =========================================================
   PANELS – Basis (mobil, vertikal)
   ========================================================= */
.panel{position:relative;padding:104px var(--pad)}

/* 01 Start */
.panel--hero{padding-top:calc(var(--hh) + 72px);overflow:hidden}
.hero{position:relative;z-index:1}
.hero__title{font-size:clamp(38px,min(6.9vw,13.5vh),140px);font-weight:600;text-transform:uppercase;letter-spacing:-.035em;line-height:.93;margin:0 0 clamp(36px,6vh,72px)}
.hero__foot{display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.hero__foot p{margin:0;font-size:clamp(19px,1.45vw,24px);line-height:1.45;color:var(--fg-2);max-width:30ch}

/* 02 Grundsatz */
.quote{font-size:clamp(30px,min(3.7vw,7vh),78px);font-weight:500;text-transform:uppercase;letter-spacing:-.025em;line-height:1.02;margin:0 0 clamp(48px,9vh,104px)}
.quote .soft{color:var(--fg-2)}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
.stats div{position:relative;padding-top:18px}
.stats div::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:left;transition:transform 1.1s var(--out)}
.stats.in div::before{transform:none}
.stats div:nth-child(2)::before{transition-delay:.1s}.stats div:nth-child(3)::before{transition-delay:.2s}.stats div:nth-child(4)::before{transition-delay:.3s}
.stats dt{font-size:clamp(40px,min(3.8vw,7vh),76px);font-weight:500;letter-spacing:-.04em;line-height:1}
.stats dd{font-size:16px;color:var(--fg-2);margin-top:10px;line-height:1.35}

/* 03 Leistungen – Karten klappen auf (Desktop: nach rechts, mobil: nach unten) */
.offers__head{margin-bottom:36px}
.cards{display:grid;gap:14px;--cw:100%;--dw:100%}
.card{position:relative;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:20px;background:var(--bg);overflow:hidden;transition:border-color .3s,background .3s}
.card:not(.is-open):hover{border-color:var(--fg);background:var(--soft)}
.card__main{position:relative;display:flex;flex-direction:column;align-items:flex-start;padding:28px;flex:none}
.card__no{font-size:14px;font-weight:500;color:var(--fg-2);margin-bottom:28px}
.card__title{font-size:clamp(22px,min(1.75vw,3.4vh),34px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02;margin:0 0 12px}
.card__text{font-size:17px;line-height:1.45;color:var(--fg-2);max-width:26ch;margin:0}
.card__toggle{display:inline-flex;align-items:center;margin-top:28px;font-size:16px;font-weight:500}
.card__main{cursor:pointer}
.card:not(.is-open):hover .plus,.card__toggle:focus-visible .plus{background:var(--red);border-color:var(--red);color:#fff}
.plus{transition:transform .5s var(--out),background .3s,color .3s}
.card.is-open .plus{transform:rotate(45deg);background:var(--red);border-color:var(--red);color:#fff}

.card__detail{display:none}
.card.is-open .card__detail{display:block}
.card__inner{padding:0 28px 28px}
.card__inner p{font-size:16.5px;line-height:1.55;color:#3A3A3A;margin:0 0 1em}
.card__inner .detail__claim{font-size:19px;color:var(--fg);font-weight:500;line-height:1.35}
.card__inner h3{font-size:14px;font-weight:500;color:var(--fg-2);margin:28px 0 8px}
.card__inner .ticks li,.card__inner .dlist li{font-size:15.5px}
.card__book{margin-top:28px;height:52px;font-size:16px}

/* 04 Ablauf */
.steps{display:grid;margin-top:40px}
.steps li{display:grid;grid-template-columns:52px 1fr;column-gap:12px;padding:24px 0;border-top:1px solid var(--line)}
.steps span{font-size:14px;font-weight:500;color:var(--fg-2);grid-row:span 2;padding-top:8px}
.steps b{font-size:clamp(24px,min(2.1vw,4vh),42px);font-weight:500;text-transform:uppercase;letter-spacing:-.02em;line-height:1.02}
.steps em{font-style:normal;color:var(--fg-2);font-size:17px;margin-top:8px}

/* 05 + 06 Normen & Branchen – gleich aufgebaute Kacheln: Bildfläche, Kennung, Name */
.tilesec header .h2{margin-bottom:0}
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 12px;margin-top:36px}
.tiles li{position:relative;display:flex;flex-direction:column;justify-content:flex-start;gap:6px}
.tile__img{position:relative;margin:0 0 14px;aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--soft);transform-origin:50% 100%;transition:transform .7s var(--out),box-shadow .7s var(--out),background .4s}
.tile__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--out)}
.tile__img--txt{display:flex;align-items:flex-end;padding:18px}
.tiles .tile__big{font-size:clamp(30px,min(2.7vw,5vh),54px);font-weight:500;letter-spacing:-.04em;line-height:.95;color:inherit}
.tiles li:hover .tile__img{transform:translateY(-10px) scale(1.06);box-shadow:0 26px 50px -28px rgba(0,0,0,.45)}
.tiles li:hover .tile__img img{transform:scale(1.06)}
.tiles li:hover .tile__img--txt{background:var(--fg);color:var(--bg)}
.tiles li > span{font-size:13px;font-weight:500;color:var(--fg-2);transition:color .3s}
.tiles li:hover > span{color:var(--red)}
.tiles b{font-size:clamp(19px,min(1.5vw,2.9vh),28px);font-weight:500;letter-spacing:-.025em;line-height:1.1;hyphens:manual}

/* 06 Über uns */
.about{display:grid;gap:48px}
.portrait{margin:0}
.portrait__ph,.portrait img{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:20px;background:var(--soft)}
.portrait__ph{display:grid;place-items:center}
.portrait__ph span{font-size:15px;font-weight:500;color:#A8A8A8}
.about__role{font-size:18px;font-weight:500;color:var(--fg-2);margin:-8px 0 28px}
.about__text .lead{color:var(--fg);max-width:34ch}
.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:44px}
.facts div{border-top:1px solid var(--fg);padding-top:18px}
.facts dt{font-size:clamp(30px,min(2.6vw,5vh),52px);font-weight:500;letter-spacing:-.04em;line-height:1}
.facts dd{font-size:15px;color:var(--fg-2);margin-top:10px;line-height:1.35}

/* 07 Kontakt */
.contact{display:grid;gap:56px}
.direct{display:flex;flex-direction:column;gap:4px;margin:clamp(28px,5vh,48px) 0}
.direct a{font-size:clamp(24px,2.2vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1.2;text-decoration:none;width:max-content;max-width:100%;background:linear-gradient(var(--red),var(--red)) 0 100%/0 2px no-repeat;transition:background-size .4s var(--out),color .3s}
.direct a:hover{background-size:100% 2px;color:var(--red)}
.sites{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;padding-top:24px;border-top:1px solid var(--line)}
.sites p{margin:0;font-size:15.5px;line-height:1.55;color:var(--fg-2)}
.sites b{display:block;color:var(--fg);font-weight:500;margin-bottom:4px}

.form{background:var(--soft);border-radius:24px;padding:clamp(26px,4.4vh,48px) clamp(24px,2.8vw,48px)}
.form__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,2.6vh,26px) 32px}
.f{display:flex;flex-direction:column;min-width:0;margin:0;padding:0;border:0}
.f--wide{grid-column:1/-1}
.f > span,.f legend{font-size:14px;font-weight:500;color:var(--fg-2);padding:0}
.f input,.f select{width:100%;height:48px;font:inherit;font-size:18px;color:var(--fg);background:transparent;border:0;border-bottom:1px solid #CFCFCF;border-radius:0;padding:0;transition:border-color .25s}
.f input::placeholder{color:#A8A8A8}
.f select{appearance:none;cursor:pointer;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230A0A0A' stroke-width='1.3'/%3E%3C/svg%3E") no-repeat right 2px center;padding-right:24px;text-overflow:ellipsis}
.f input:focus,.f select:focus{outline:none;border-bottom-color:var(--red)}
.f input:user-invalid{border-bottom-color:var(--red)}
.chips{flex-direction:row;flex-wrap:wrap;gap:8px}
.chips legend{width:100%;margin-bottom:10px;float:left}
.chips label{position:relative}
.chips input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chips label span{display:inline-flex;align-items:center;height:42px;padding:0 20px;border:1px solid #CFCFCF;border-radius:999px;font-size:16px;font-weight:500;background:var(--bg);transition:background .25s,color .25s,border-color .25s;cursor:pointer}
.chips label:hover span{border-color:var(--red)}
.chips input:checked + span{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.chips input:focus-visible + span{outline:2px solid var(--fg);outline-offset:2px}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.form__foot{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-top:clamp(22px,3.8vh,38px)}
.check{display:flex;align-items:center;gap:12px;font-size:15px;color:var(--fg-2)}
.check input{width:20px;height:20px;margin:0;accent-color:var(--fg)}
.check a{color:var(--fg)}
.form__msg{margin:16px 0 0;font-size:16px}
.form__msg:empty{display:none}
.form__msg.is-ok{color:#1E7A45}
.form__msg.is-err{color:var(--red)}
.form.is-sending [type=submit]{opacity:.55;pointer-events:none}

/* 08 Ende */
.foot{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.foot__logo{width:min(460px,76vw);height:auto;fill:var(--fg)}
.foot__claim{margin:0;color:var(--fg-2);font-size:clamp(18px,1.4vw,22px)}
.foot__links{display:flex;flex-wrap:wrap;gap:10px 30px;padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);align-self:stretch}
.foot__links a{font-size:16px;font-weight:500;text-decoration:none;color:var(--fg-2);transition:color .25s}
.foot__links a:hover{color:var(--red)}
.foot__copy{margin:0;font-size:14px;color:var(--fg-2)}

.bar{display:none}

/* ---------- Detail-Dialog ---------- */
.detail{width:min(820px,calc(100vw - 24px));max-height:calc(100vh - 48px);padding:0;border:0;border-radius:24px;background:var(--bg);color:var(--fg);overflow:auto;overscroll-behavior:contain}
.detail::backdrop{background:rgba(10,10,10,.35);backdrop-filter:blur(6px)}
.detail[open]{animation:dlg .5s var(--out)}
@keyframes dlg{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
.detail__inner{padding:clamp(28px,5vw,64px)}
.detail__close{position:sticky;top:0;float:right;width:48px;height:48px;margin:-12px -12px 0 0;display:grid;place-items:center;border-radius:50%;background:var(--soft);z-index:2;transition:background .25s}
.detail__close:hover{background:#E8E8E8}
.detail__close svg{width:18px;height:18px}
.detail .eyebrow{font-size:14px;font-weight:500;color:var(--fg-2);margin-bottom:18px}
.detail h2{font-size:clamp(34px,4.4vw,52px);font-weight:500;letter-spacing:-.04em;line-height:1.02;margin-bottom:18px}
.detail h3{font-size:14px;font-weight:500;color:var(--fg-2);margin:40px 0 12px}
.detail p{color:#3A3A3A;max-width:62ch;font-size:17.5px}
.detail__claim{font-size:21px!important;color:var(--fg)!important;font-weight:500;line-height:1.35;letter-spacing:-.01em}
.detail a{color:var(--fg)}
.note{background:var(--soft);border-radius:14px;padding:18px 20px;margin:24px 0;font-size:16.5px;color:#3A3A3A}
.note b{color:var(--fg);font-weight:500}
.ticks li{position:relative;padding:12px 0 12px 22px;border-top:1px solid var(--line);font-size:17px;line-height:1.45;color:#3A3A3A}
.ticks li::before{content:"";position:absolute;left:0;top:23px;width:9px;height:1.5px;background:var(--fg)}
.ticks b,.dlist b{font-weight:500;color:var(--fg)}
.cols{columns:2;column-gap:32px}
.cols li{break-inside:avoid}
.dlist{counter-reset:d}
.dlist li{counter-increment:d;position:relative;padding:14px 0 14px 44px;border-top:1px solid var(--line);font-size:17px;line-height:1.5;color:#3A3A3A}
.dlist li::before{content:counter(d,decimal-leading-zero);position:absolute;left:0;top:16px;font-size:14px;font-weight:500;color:var(--fg-2)}
.dfacts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin:24px 0}
.dfacts > div{border-top:1px solid var(--line);padding-top:14px}
.dfacts .mono{font-size:14px;font-weight:500;color:var(--fg-2)}
.dfacts p{margin:8px 0 0;font-size:16px;line-height:1.5}
.muted{color:var(--fg-2)!important}
.detail__cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:44px;padding-top:28px;border-top:1px solid var(--fg)}
.detail__cta p{margin:0;font-weight:500;font-size:18px;color:var(--fg)}
html.modal-open{overflow:hidden}

/* =========================================================
   ANIMATION – bewusst wenig: einblenden, Zeilen-Maske, Intro der Marke
   ========================================================= */
.js .rv{opacity:0;transform:translate3d(0,20px,0);transition:opacity 1s var(--out) var(--d,0s),transform 1s var(--out) var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
.js .rv.split{opacity:1;transform:none}
.split .ln{display:block;overflow:hidden;padding-bottom:.24em;margin-bottom:-.24em}
.split .ln > span{display:block}
.js .split .ln > span{transform:translate3d(0,110%,0);transition:transform 1.2s var(--out) calc(var(--d,0s) + var(--i) * .09s)}
.js .split.in .ln > span{transform:none}

/* =========================================================
   MOBIL / TABLET
   ========================================================= */
@media (max-width:959.98px){
  :root{--hh:64px}
  body{font-size:17px}
  .nav,.hdr__cta{display:none}
  .burger{display:block}
  .hdr.is-open{height:auto;flex-wrap:wrap;padding-bottom:20px}
  .hdr.is-open .nav{display:flex;flex-direction:column;gap:0;width:100%;order:3;margin:0}
  .hdr.is-open .nav a{padding:18px 0;font-size:24px;letter-spacing:-.02em;color:var(--fg);border-top:1px solid var(--line);background:none}
  .hdr.is-open .hdr__cta{display:inline-flex;order:4;width:100%;margin-top:12px}
  .logo svg{height:22px}
  .panel{padding:88px var(--pad)}
  .panel--hero{padding-top:calc(var(--hh) + 96px);padding-bottom:72px}
  .hero__title{font-size:min(8.6vw,64px)}
  .h2{font-size:min(8.8vw,52px)}
  .quote{font-size:min(7.4vw,44px)}
  .norms li{font-size:min(8.6vw,44px)}
  .steps b{font-size:min(6.6vw,32px)}
  .tiles .tile__big{font-size:min(9vw,40px)}
  .cols{columns:1}
  .dfacts{grid-template-columns:1fr}
  .portrait{max-width:340px}
  .sites{grid-template-columns:1fr}
}
@media (max-width:520px){
  .form__grid{grid-template-columns:1fr}
  .facts{grid-template-columns:1fr 1fr}
  .branches{columns:1}
  .btn{height:54px;padding:0 24px;font-size:16px}
}
@media (min-width:640px) and (max-width:959.98px){
  .stats{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cards{grid-template-columns:1fr 1fr}
  .about{grid-template-columns:280px 1fr;align-items:end}
  .refs{grid-template-columns:1fr 1fr}
}

/* =========================================================
   DESKTOP – HORIZONTAL (html.is-h)
   ========================================================= */
html.is-h{--bh:56px}
html.is-h .stage{position:sticky;top:0;height:100vh;overflow:hidden}
html.is-h .track{display:flex;height:100%;width:max-content;will-change:transform}
html.is-h .panel{flex:0 0 auto;height:100vh;padding:calc(var(--hh) + clamp(32px,7vh,96px)) var(--pad) calc(var(--bh) + clamp(32px,6.5vh,88px));display:flex;flex-direction:column;justify-content:center}

html.is-h .panel--hero{width:100vw}
html.is-h .hero{width:100%}

html.is-h .panel--principle{width:max(108vw,1480px)}
html.is-h .stats{grid-template-columns:repeat(4,minmax(0,240px));gap:40px}

html.is-h .panel--offers{width:auto}
html.is-h .offers{display:flex;align-items:center;gap:clamp(48px,5vw,96px)}
html.is-h .offers__head{flex:0 0 clamp(320px,26vw,480px);margin:0}
html.is-h .cards{display:flex;gap:16px;height:min(64vh,580px);--cw:clamp(320px,24vw,440px);--dw:min(600px,40vw)}
html.is-h .card{flex-direction:row;flex:none;width:var(--cw);height:100%;transition:width .9s var(--out),border-color .3s,background .3s}
html.is-h .card.is-open{width:calc(var(--cw) + var(--dw));border-color:var(--fg)}
html.is-h .card__main{width:calc(var(--cw) - 2px);height:100%}
html.is-h .card__no{margin-bottom:auto}
html.is-h .card__detail{display:block;flex:none;width:var(--dw);height:100%;overflow-y:auto;overscroll-behavior:contain;border-left:1px solid var(--line);opacity:0;transition:opacity .4s}
html.is-h .card.is-open .card__detail{opacity:1;transition:opacity .6s .35s}
html.is-h .card__inner{padding:clamp(28px,4vh,40px) 32px}

html.is-h .panel--process{width:max(128vw,1700px)}
html.is-h .steps{grid-template-columns:repeat(5,minmax(0,1fr));column-gap:32px;margin-top:clamp(44px,9vh,104px)}
html.is-h .steps li{grid-template-columns:1fr;padding:22px 0 0;border-top:1px solid var(--fg)}
html.is-h .steps span{grid-row:auto;padding:0 0 clamp(32px,6vh,64px)}
html.is-h .steps em{margin-top:12px}



html.is-h .panel--tiles{width:auto}
html.is-h .tiles{gap:clamp(14px,2.4vh,22px) 16px;margin-top:clamp(22px,4.4vh,56px);--tw:clamp(210px,15vw,270px)}
html.is-h .tiles--4{grid-template-columns:repeat(4,var(--tw))}
html.is-h .tiles--5{grid-template-columns:repeat(5,var(--tw))}
html.is-h .tile__img{aspect-ratio:auto;height:clamp(84px,17vh,190px)}

html.is-h .panel--about{width:max(104vw,1380px)}
html.is-h .about{grid-template-columns:min(28vw,50vh) minmax(0,640px);gap:clamp(64px,8vw,150px);align-items:center}

html.is-h .panel--contact{width:max(110vw,1440px)}
html.is-h .contact{grid-template-columns:minmax(340px,.85fr) minmax(600px,1.2fr);gap:clamp(64px,7vw,140px);align-items:center;width:100%}

html.is-h .panel--footer{width:clamp(480px,40vw,680px)}

/* Untere Leiste: Position + "Weiter" */
html.is-h .bar{position:fixed;left:0;right:0;bottom:0;height:var(--bh);z-index:40;display:flex;align-items:center;gap:32px;padding:0 var(--pad);background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-top:1px solid var(--line);font-size:14px;font-weight:500;color:var(--fg-2)}
.bar__count b{color:var(--fg);font-weight:500}
#blabel{margin-left:16px;color:var(--fg)}
.bar__line{flex:1;height:1px;background:var(--line);position:relative}
.bar__fill{position:absolute;left:0;top:-.5px;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left}
.bar__next{display:inline-flex;align-items:center;font-size:14px;font-weight:500;color:var(--fg);padding:8px 0}
.bar__next:hover{color:var(--red)}
.bar__next:hover .arr{width:30px}
.bar__next[hidden]{display:none}

@media (max-height:780px){
  html.is-h{--hh:70px;--bh:50px}
  html.is-h .f input,html.is-h .f select{height:40px;font-size:17px}
  html.is-h .chips label span{height:36px}
  html.is-h .form__grid{gap:12px 28px}
  html.is-h .direct{margin:20px 0}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .split .ln > span,.odo__reel{opacity:1!important;transform:none!important}
  .odo__reel{display:none}.odo__fallback{display:inline!important}
}

/* Zahlen: Rollen wie ein Zählwerk */
.odo{position:relative;display:flex;align-items:flex-start}
.odo__d{display:inline-block;height:1.1em;overflow:hidden;line-height:1.1;margin:-.05em 0}
.odo__reel{display:flex;flex-direction:column;transform:translate3d(0,0,0);transition:transform 2s cubic-bezier(.2,.9,.1,1) var(--dd,0s)}
.odo__reel span{display:block;height:1.1em;line-height:1.1;text-align:center}
.odo__d{position:relative}
.in .odo__reel{transform:translate3d(0,calc(var(--n) * -1.1em),0)}
.odo__suf{display:inline-block;line-height:1.1;margin:-.05em 0;opacity:0;transform:translate3d(-.2em,0,0);transition:opacity .6s 1.2s,transform .8s var(--out) 1.2s}
.in .odo__suf{opacity:1;transform:none}
.odo__fallback{display:none}

/* Horizontal: Inhalte fliegen in Fahrtrichtung herein */
/* ---------- Horizontal: alles fliegt von rechts herein ---------- */
html.is-h.js .rv:not(.split){transform:translate3d(160px,0,0);transition:opacity 1.1s var(--out) var(--d,0s),transform 1.4s var(--out) var(--d,0s)}
html.is-h.js .rv.in:not(.split){transform:none}
html.is-h .split .ln{overflow:visible}
html.is-h.js .split .ln > span{opacity:0;transform:translate3d(calc(160px + var(--i) * 110px),0,0);transition:transform 1.4s var(--out) calc(var(--d,0s) + var(--i) * .1s),opacity 1s var(--out) calc(var(--d,0s) + var(--i) * .1s)}
html.is-h.js .split.in .ln > span{opacity:1;transform:none}
/* Bilder in den Kacheln wandern beim Scrollen leicht mit (Parallax) */


/* Scrollbalken in aufgeklappten Karten */
.card__detail{scrollbar-width:thin;scrollbar-color:#CFCFCF transparent}
.card__detail::-webkit-scrollbar{width:6px}
.card__detail::-webkit-scrollbar-thumb{background:#CFCFCF;border-radius:6px}
.card__detail::-webkit-scrollbar-track{background:transparent}

/* Ablauf: Linien in Rot */
.steps li{border-top-color:var(--red)}
.steps__fill,.steps__dot{display:none}
.portrait img{aspect-ratio:1/1;height:auto;object-fit:contain;background:none;filter:none}

/* Ablauf (Desktop): durchgehende Linie, ein roter Punkt läuft beim Scrollen durch die Schritte */
html.is-h .steps{position:relative;--p:0}
html.is-h .steps li{border-top:0;position:relative}
html.is-h .steps::before{content:"";position:absolute;left:0;right:0;top:0;height:1.5px;background:rgba(227,6,19,.28)}
html.is-h .steps__fill{display:block;position:absolute;left:0;top:-.75px;height:3px;width:100%;background:var(--red);transform:scaleX(var(--p));transform-origin:left}
html.is-h .steps__dot{display:block;position:absolute;top:0;left:calc(var(--p) * 100%);width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:var(--red);box-shadow:0 0 0 5px var(--bg),0 0 0 6px rgba(227,6,19,.35);z-index:2}
html.is-h .steps__dot::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1.5px solid var(--red);opacity:0;animation:ping 1.8s var(--out) infinite}
@keyframes ping{0%{transform:scale(.4);opacity:.7}100%{transform:scale(1.4);opacity:0}}
html.is-h .steps li::before{content:"";position:absolute;left:0;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--bg);border:1.5px solid rgba(227,6,19,.45);transition:background .4s,border-color .4s}
html.is-h .steps li span,html.is-h .steps li b,html.is-h .steps li em{transition:color .5s,opacity .5s}
html.is-h .steps li:not(.on) b,html.is-h .steps li:not(.on) em{opacity:.35}
html.is-h .steps li.on::before{background:var(--red);border-color:var(--red)}
html.is-h .steps li.on span{color:var(--red)}
@media (prefers-reduced-motion:reduce){html.is-h .steps li:not(.on) b,html.is-h .steps li:not(.on) em{opacity:1}}
html.is-h .steps li{align-content:start}

html.is-h .card__text{max-width:none;white-space:nowrap}
html.is-h .panel--process{width:max(165vw,2250px)}

/* =========================================================
   KARTEN – weiches Aufklappen
   ========================================================= */
html.is-h .card{transition:width 1s cubic-bezier(.65,0,.35,1),border-color .4s,background .4s,box-shadow .4s}
html.is-h .card__detail{opacity:0;transition:opacity .25s ease}
html.is-h .card__inner{transform:translate3d(28px,0,0);transition:transform .3s ease}
html.is-h .card.is-open .card__detail{opacity:1;transition:opacity .6s ease .45s}
html.is-h .card.is-open .card__inner{transform:none;transition:transform .9s cubic-bezier(.22,1,.36,1) .4s}

/* =========================================================
   APPLE / GLASS – leichter Feinschliff
   ========================================================= */
:root{
  --page:#F5F5F5;
  --glass:rgba(255,255,255,.62);
  --glass-strong:rgba(255,255,255,.78);
  --glass-brd:rgba(255,255,255,.85);
  --shadow:0 1px 0 rgba(255,255,255,.9) inset,0 24px 60px -34px rgba(0,0,0,.22);
  --out:cubic-bezier(.32,.72,0,1);
}
html,body{background:var(--page)}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(900px 640px at 92% -8%,rgba(227,6,19,.07),transparent 62%),
    radial-gradient(800px 700px at -6% 108%,rgba(10,10,10,.06),transparent 60%),
    radial-gradient(700px 500px at 55% 55%,rgba(255,255,255,.9),transparent 70%),
    var(--page)}

/* schwebende Glas-Leiste oben */
.hdr{top:12px;left:max(12px,calc(var(--pad) - 24px));right:max(12px,calc(var(--pad) - 24px));height:64px;padding:0 14px 0 24px;border-radius:22px;
  background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow)}
.hdr__cta{height:44px}
@media (max-width:959.98px){.hdr{top:8px;left:8px;right:8px;height:56px;padding:0 8px 0 18px}}

/* schwebende Glas-Leiste unten */
html.is-h{--bh:72px}
html.is-h .bar{left:max(12px,calc(var(--pad) - 24px));right:max(12px,calc(var(--pad) - 24px));bottom:12px;height:50px;padding:0 24px;border-radius:18px;
  background:var(--glass);backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border:1px solid var(--glass-brd);box-shadow:var(--shadow)}

/* Karten, Formular, Kacheln als Glasflächen */
.card{background:var(--glass);border:1px solid var(--glass-brd);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.card:not(.is-open):hover{background:var(--glass-strong);border-color:var(--fg)}
html.is-h .card.is-open{background:var(--glass-strong)}
html.is-h .card__detail{border-left-color:rgba(10,10,10,.08)}
.form{background:var(--glass);border:1px solid var(--glass-brd);border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(18px) saturate(160%);-webkit-backdrop-filter:blur(18px) saturate(160%)}
.chips label span{background:rgba(255,255,255,.7)}
.tile__img{border-radius:22px;background:rgba(255,255,255,.7);box-shadow:var(--shadow)}
.tile__img--txt{background:var(--glass);border:1px solid var(--glass-brd)}
.portrait img{border-radius:28px;box-shadow:0 30px 70px -40px rgba(0,0,0,.35)}
.btn{box-shadow:0 10px 24px -14px rgba(0,0,0,.45)}
.btn--dark{transition:background .35s,transform .35s var(--out)}
.btn:active{transform:scale(.97)}
.plus{background:rgba(255,255,255,.6)}
.steps__dot{box-shadow:0 0 0 5px var(--page),0 0 0 6px rgba(227,6,19,.35)!important}
html.is-h .steps li::before{background:var(--page)}

/* Porträt auf einer Linie mit den Branchen-Bildern (Werte setzt main.js) */
html.is-h .panel--about.is-aligned{justify-content:flex-start;padding-top:var(--pt)}
html.is-h .panel--about.is-aligned .about{grid-template-columns:var(--ph) minmax(0,640px);align-items:start}
html.is-h .panel--about.is-aligned .portrait img{width:var(--ph);height:var(--ph)}
html.is-h .panel--about.is-aligned .about__text .h2{margin-top:-.08em}

/* Start: Inhalte fliegen von links herein */

/* Karten: ohne Hintergrund-Unschärfe (flüssiger), sanftes Öffnen/Schließen */
.card{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.72)}
html.is-h .card{transition:width .9s cubic-bezier(.65,0,.35,1),border-color .4s,background .4s;will-change:width}
html.is-h .card__detail{opacity:0;transition:opacity .18s ease}
html.is-h .card__inner{transform:translate3d(24px,0,0);transition:transform .2s ease}
html.is-h .card.is-open .card__detail{opacity:1;transition:opacity .5s ease .5s}
html.is-h .card.is-open .card__inner{transform:none;transition:transform .8s cubic-bezier(.22,1,.36,1) .45s}
html.is-h .card.is-closing{transition-delay:.12s}
html.is-h .panel--process{width:max(140vw,1900px)}

/* Karten haben auch die Einflieg-Klasse – Breitenanimation muss trotzdem greifen */
html.is-h.js .cards .card.rv{transition:width .9s cubic-bezier(.65,0,.35,1),opacity 1.1s var(--out) var(--d,0s),transform 1.4s var(--out) var(--d,0s),border-color .4s,background .4s;will-change:width}
html.is-h.js .cards .card.rv.in{transition-delay:0s}
html.is-h.js .cards .card.rv.is-closing{transition:width .9s cubic-bezier(.65,0,.35,1) .12s,opacity 1.1s,transform 1.4s,border-color .4s,background .4s}

/* Navigation mit allen Abschnitten */
.nav{gap:32px}
@media (max-width:1240px){.nav{gap:22px}.nav a{font-size:15px}.hdr{gap:28px}.hdr__cta{padding:0 18px}}

/* =========================================================
   FEINSCHLIFF: weniger Leerraum zwischen Abschnitten + weichere Animationen
   ========================================================= */

/* Einfliegen: von rechts, mit leichter Unschärfe und Skalierung – wirkt weicher */
html.is-h.js .rv:not(.split){filter:blur(10px);transform:translate3d(180px,0,0) scale(.97);
  transition:opacity 1.2s var(--out) var(--d,0s),transform 1.5s var(--out) var(--d,0s),filter 1.1s var(--out) var(--d,0s)}
html.is-h.js .rv.in:not(.split){filter:none;transform:none}
html.is-h.js .split .ln > span{filter:blur(8px);transition:transform 1.5s var(--out) calc(var(--d,0s) + var(--i) * .1s),opacity 1.1s var(--out) calc(var(--d,0s) + var(--i) * .1s),filter 1.1s var(--out) calc(var(--d,0s) + var(--i) * .1s)}
html.is-h.js .split.in .ln > span{filter:none}

/* Karten: Einfliegen + Hover-Lift, Breitenanimation bleibt */
html.is-h.js .cards .card.rv{transition:width .9s cubic-bezier(.65,0,.35,1),opacity 1.2s var(--out) var(--d,0s),transform 1.5s var(--out) var(--d,0s),filter 1.1s var(--out) var(--d,0s),translate .6s var(--out),border-color .4s,background .4s}
html.is-h.js .cards .card.rv.in{transition:width .9s cubic-bezier(.65,0,.35,1),opacity 1.2s var(--out),transform 1.5s var(--out),filter 1.1s var(--out),translate .6s var(--out),border-color .4s,background .4s}
html.is-h.js .cards .card.rv.is-closing{transition:width .9s cubic-bezier(.65,0,.35,1) .12s,translate .6s var(--out),border-color .4s,background .4s}
.card:not(.is-open):hover{translate:0 -8px}

/* Bilder & Kacheln: öffnen sich wie ein Vorhang von rechts, Foto zoomt dabei zurück */
html.is-h.js .tiles li.rv .tile__img{clip-path:inset(0 0 0 100% round 22px);transition:clip-path 1.3s var(--out) calc(var(--d,0s) + .15s),transform .7s var(--out),box-shadow .7s var(--out),background .4s}
html.is-h.js .tiles li.rv.in .tile__img{clip-path:inset(0 0 0 0 round 22px)}
html.is-h.js .tiles li.rv .tile__img img{scale:1.25;transition:scale 1.8s var(--out) calc(var(--d,0s) + .15s),transform 1s var(--out)}
html.is-h.js .tiles li.rv.in .tile__img img{scale:1}
html.is-h.js .portrait.rv{clip-path:inset(0 0 0 100% round 28px);transition:clip-path 1.4s var(--out) .1s,opacity 1.2s var(--out),transform 1.5s var(--out),filter 1.1s var(--out)}
html.is-h.js .portrait.rv.in{clip-path:inset(-60px round 28px)}
html.is-h.js .portrait.rv img{scale:1.2;transition:scale 1.8s var(--out) .1s}
html.is-h.js .portrait.rv.in img{scale:1}

/* "Weiter" wippt leicht – zeigt, dass es weitergeht */
.bar__next .arr{animation:nudge 2.4s var(--out) infinite}
@keyframes nudge{0%,100%{transform:translateX(0)}40%{transform:translateX(7px)}}
.bar__next:hover .arr{animation:none}

@media (prefers-reduced-motion:reduce){
  .js .rv,.js .split .ln > span{filter:none!important}
  html.is-h.js .tiles li.rv .tile__img,html.is-h.js .portrait.rv{clip-path:none!important}
  html.is-h.js .tiles li.rv .tile__img img,html.is-h.js .portrait.rv img{scale:1!important}
}

/* ===== PERFORMANCE: Start-Animation ohne Ruckeln ===== */
/* Start: reine CSS-Keyframes – laufen ab dem ersten Bild auf der Grafikkarte,
   warten nicht auf JavaScript/Schriften/Bilder und ruckeln daher nicht */
@keyframes heroIn{from{opacity:0;transform:translate3d(-160px,0,0);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes heroL0{from{opacity:0;transform:translate3d(-160px,0,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes heroL1{from{opacity:0;transform:translate3d(-270px,0,0);filter:blur(8px)}to{opacity:1;transform:none;filter:blur(0)}}
.hero__title .ln,.hero__title .ln > span{display:block}
.js .panel--hero .hin{animation:heroIn 1.4s var(--out) .15s both;will-change:transform,opacity,filter}
.js .panel--hero .hero__foot.hin{animation-delay:.65s}
.js .hero__title .ln > span{animation:heroL0 1.5s var(--out) .24s both;will-change:transform,opacity,filter}
.js .hero__title .ln + .ln > span{animation-name:heroL1;animation-delay:.34s}
@media (prefers-reduced-motion:reduce){.js .panel--hero .hin,.js .hero__title .ln > span{animation:none}}

/* ===== MOBIL-MENÜ: weich auf- und zuklappen, nichts verschiebt sich ===== */
@media (max-width:959.98px){
  .hdr{gap:0;flex-wrap:wrap;align-content:flex-start;overflow:hidden;
    transition:height .6s cubic-bezier(.32,.72,0,1),background-color .4s ease,box-shadow .4s ease}
  .hdr .logo{height:56px;display:flex;align-items:center}
  .burger{flex:0 0 44px;margin-left:auto}
  .hdr .nav{display:flex;flex-direction:column;gap:0;width:calc(100% - 10px);order:3;margin:6px 10px 0 0}
  .hdr .nav a{padding:15px 0;font-size:24px;letter-spacing:-.02em;color:var(--fg);border-top:1px solid var(--line);background:none}
  .hdr .hdr__cta{display:inline-flex;order:4;width:calc(100% - 10px);margin:14px 10px 18px 0;justify-content:center}
  /* Inhalte: geschlossen unsichtbar, beim Öffnen nacheinander von oben hereingleiten */
  .hdr .nav a,.hdr .hdr__cta{opacity:0;visibility:hidden;transform:translate3d(0,-10px,0);
    transition:opacity .25s ease,transform .3s ease,visibility 0s linear .3s}
  .hdr.is-open .nav a,.hdr.is-open .hdr__cta{opacity:1;visibility:visible;transform:none;
    transition:opacity .5s ease var(--k,0s),transform .7s cubic-bezier(.22,1,.36,1) var(--k,0s),visibility 0s}
  .hdr .nav a:nth-child(1){--k:.08s}.hdr .nav a:nth-child(2){--k:.12s}.hdr .nav a:nth-child(3){--k:.16s}
  .hdr .nav a:nth-child(4){--k:.2s}.hdr .nav a:nth-child(5){--k:.24s}.hdr .nav a:nth-child(6){--k:.28s}.hdr .hdr__cta{--k:.32s}
  .hdr.is-open{padding:0 8px 0 18px;background-color:rgba(255,255,255,.97)}
  .hdr.is-open.is-done{overflow-y:auto;overscroll-behavior:contain}
  html.menu-open{overflow:hidden}
  /* Porträt: gleiche Breite und Linie wie die Branchen-Bilder */
  .portrait{max-width:none;width:100%}
  .portrait img{width:100%;border-radius:22px}
}
@media (max-width:959.98px) and (prefers-reduced-motion:reduce){.hdr,.hdr .nav a,.hdr .hdr__cta{transition:none!important}}