@font-face{font-family:'Outfit';src:url('../fonts/Outfit-Variable.woff') format('woff');font-weight:100 900;font-style:normal;font-display:swap}

/* Nachbau von Michaels Weblayout (Artboard 1500 px). calc(1*var(--u)) = 1 px des Entwurfs, skaliert unter 1500 px Breite. */
:root{
  --navy:#003651; --green:#21FFA7; --mint:#E9FFF6; --white:#FFFFFF; --grey:#B3C3CB; --rule:#999999; --gold:#D6B260; --shade:rgba(0,54,81,1);
  --serif:"Gilda Display","SangBleu Empire",Georgia,"Times New Roman",serif;
  --sans:"Outfit","N27","Helvetica Neue",Arial,sans-serif;
  --script:"Sacramento","Malina","Brush Script MT",cursive;
  --u:min(1px, calc(100vw / 1500));
  --fs-h:calc(80*var(--u)); --fs-lead:calc(35.9*var(--u)); --fs-title:calc(35*var(--u)); --fs-card:calc(45*var(--u)); --fs-body:calc(24*var(--u)); --fs-eye:calc(25.1*var(--u)); --fs-btn:calc(21.7*var(--u)); --fs-small:calc(20*var(--u)); --fs-script:calc(80*var(--u)); --fs-script2:calc(73*var(--u)); --fs-faq:calc(103.4*var(--u)); --fs-logo:calc(43.6*var(--u)); --fs-tech:calc(33.3*var(--u)); --fs-ctabtn:calc(40*var(--u));
  --gut:calc(150*var(--u));
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;background:var(--white);color:var(--navy);font-family:var(--sans);font-weight:300;font-size:var(--fs-body);line-height:1.46;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:-0.005em;line-height:1.19}
p{margin:0}
:focus-visible{outline:2px solid var(--green);outline-offset:3px}
[id]{scroll-margin-top:90px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.wrap{width:min(100%, calc(1500*var(--u)));margin:0 auto;padding-left:max(var(--gut), env(safe-area-inset-left,0px));padding-right:max(var(--gut), env(safe-area-inset-right,0px))}
.eyebrow{font-family:var(--sans);font-weight:300;font-size:var(--fs-eye);line-height:1.2;letter-spacing:.02em;text-transform:uppercase;color:var(--grey)}
.h{font-size:var(--fs-h)}
.lead{font-size:var(--fs-lead);line-height:1.407}
.script{font-family:var(--script);font-size:var(--fs-script);line-height:calc(94*var(--u));letter-spacing:.06em;transform:rotate(-2deg);transform-origin:0 50%;white-space:nowrap;pointer-events:none;margin:0}
.script span{display:block}
.swoosh{position:relative;display:inline-block}
.swoosh svg{position:absolute;left:calc(-13*var(--u));bottom:calc(-5*var(--u));width:calc(100% + calc(13*var(--u)));height:calc(12*var(--u));overflow:visible}
.swoosh path{fill:none;stroke:var(--green);stroke-width:calc(3.2*var(--u));stroke-linecap:round}

.pill{white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:300;font-size:var(--fs-btn);line-height:1;height:calc(47*var(--u));padding:0 calc(25*var(--u));border-radius:999px;border:1px solid var(--green);color:var(--navy);background:var(--white);text-decoration:none;cursor:pointer;transition:background .2s,color .2s}
.pill:hover{background:var(--green)}
.pill-line-white{border-color:var(--white);color:var(--white);background:transparent}
.pill-line-white:hover{background:rgba(255,255,255,.14)}
.pill-line-green{border-color:var(--green);color:var(--green);background:transparent}
.pill-line-green:hover{background:var(--green);color:var(--navy)}

.ph-tag{display:inline-block;font-family:var(--sans);font-size:13px;line-height:1.3;font-weight:400;letter-spacing:.02em;color:#6A7F88;border:1px dashed #9FB2BA;border-radius:6px;padding:3px 8px;background:rgba(255,255,255,.7);vertical-align:middle}

/* Kopfzeile */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;color:var(--white);transition:background .3s,padding .3s;padding-top:calc(calc(83*var(--u)) + env(safe-area-inset-top,0px))}
.nav.solid{background:var(--navy);padding-top:calc(calc(18*var(--u)) + env(safe-area-inset-top,0px));padding-bottom:calc(18*var(--u))}
.nav .in{width:min(100%,calc(1500*var(--u)));margin:0 auto;padding-left:max(calc(148*var(--u)), env(safe-area-inset-left,0px));padding-right:max(calc(135*var(--u)), env(safe-area-inset-right,0px));display:flex;align-items:center;justify-content:space-between;height:calc(60*var(--u))}
.logo{display:inline-flex;align-items:center;gap:calc(15*var(--u));text-decoration:none;font-family:var(--sans);font-weight:300;font-size:var(--fs-logo);line-height:1;color:var(--white);letter-spacing:-.005em}
.logo svg{width:calc(40*var(--u));height:calc(60*var(--u));flex:0 0 auto}
.nav-r{display:flex;align-items:center;gap:calc(83*var(--u))}
.nav .pill{height:calc(47*var(--u));padding:0 calc(30*var(--u))}
.burger{all:unset;cursor:pointer;width:calc(51*var(--u));height:calc(41*var(--u));display:flex;flex-direction:column;justify-content:space-between;padding:0;position:relative}
.burger i{display:block;height:calc(3*var(--u));min-height:2px;background:var(--green);width:calc(51*var(--u))}
.burger i:last-child{width:calc(38*var(--u))}
.burger:focus-visible{outline:2px solid var(--green);outline-offset:6px}
.menu{position:fixed;inset:0;z-index:55;background:var(--navy);color:var(--white);display:flex;align-items:center;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
.menu.open{opacity:1;visibility:visible}
.menu nav{width:min(100%,calc(1500*var(--u)));margin:0 auto;padding-left:max(calc(825*var(--u)), env(safe-area-inset-left,0px));padding-right:max(24px, env(safe-area-inset-right,0px))}
.menu a{display:block;font-size:max(28px, calc(50*var(--u)));line-height:1.6;text-decoration:none;color:var(--white)}
.menu a:hover{color:var(--green)}
.menu svg.big{position:absolute;right:calc(25*var(--u));bottom:0;width:calc(249*var(--u));height:calc(373*var(--u));opacity:.9}

/* 1 Hero */
.hero{position:relative;height:calc(1005*var(--u));color:var(--white);z-index:3}
.hero-bg{position:absolute;inset:0;overflow:hidden;background:#7B97B4}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,54,81,.9) 0%,rgba(0,54,81,.55) 30%,rgba(0,54,81,0) 62%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 58%);mask-image:linear-gradient(90deg,#000 0%,#000 30%,transparent 58%)}
.hero-c{position:absolute;left:0;right:0;top:calc(426*var(--u))}
.hero-c .eyebrow{color:var(--white)}
.hero h1{font-size:var(--fs-h);line-height:calc(95*var(--u));margin-top:calc(40*var(--u));color:var(--white)}
.hero-lead{color:var(--green);font-size:var(--fs-body);line-height:calc(35*var(--u));margin-top:calc(22*var(--u));max-width:none}
.hero .pill{margin-top:calc(27*var(--u));height:calc(46*var(--u));padding:0 calc(25*var(--u))}
.hero-tags{position:absolute;right:max(calc(148*var(--u)), env(safe-area-inset-right,0px));top:calc(681*var(--u));text-align:right;font-size:var(--fs-body);line-height:calc(35*var(--u));color:var(--white)}
.hero .script{position:absolute;left:calc(725*var(--u));top:calc(936*var(--u));color:var(--green);z-index:4}
.hero .script span:nth-child(1){margin-left:calc(131*var(--u))}
.hero .script span:nth-child(3){margin-left:calc(202*var(--u))}

/* 2 Herausforderung mit interaktiver Transformation */
.challenge{position:relative;padding-top:calc(126*var(--u));padding-bottom:calc(120*var(--u));background:var(--white)}
.challenge .h{margin-top:calc(73*var(--u));line-height:calc(95*var(--u))}
/* ===== Bereich 1: Herausforderung + Transformation ===== */
.s1-head{display:grid;grid-template-columns:1.15fr .85fr;gap:20px calc(70*var(--u));align-items:end}
.s1-head .lead{max-width:none}
.tpanel{margin-top:calc(60*var(--u));background:var(--navy);color:var(--white);border-radius:calc(30*var(--u));padding:calc(50*var(--u)) calc(60*var(--u)) calc(46*var(--u));position:relative;overflow:hidden}
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-bottom:1px solid rgba(255,255,255,.2)}
.tab{all:unset;cursor:pointer;padding:calc(6*var(--u)) 4px calc(22*var(--u));text-align:left;position:relative;transition:color .2s}
.tab .t{display:block;font-family:var(--serif);font-size:max(24px,calc(45*var(--u)));line-height:1.1;color:var(--grey);transition:color .2s}
.tab .s{display:block;font-size:max(13px,calc(19*var(--u)));color:var(--grey);margin-top:6px;opacity:.85}
.tab::after{content:"";position:absolute;left:0;right:20%;bottom:-1px;height:4px;background:var(--green);transform:scaleX(0);transform-origin:left;transition:transform .35s}
.tab[aria-selected=true] .t{color:var(--green)}
.tab[aria-selected=true] .s{color:var(--white)}
.tab[aria-selected=true]::after{transform:scaleX(1)}
.tab:hover .t{color:var(--white)}
.tab:focus-visible{outline:2px solid var(--white);outline-offset:4px}
.stage{position:relative;margin-top:calc(36*var(--u));touch-action:pan-y}
.field{display:block;width:100%;height:calc(270*var(--u));min-height:150px;color:var(--green);cursor:ew-resize}
.field path{fill:none;stroke:currentColor;stroke-width:1.8;vector-effect:non-scaling-stroke;stroke-linecap:round}
.field path.solo{stroke-width:3}
.field path.frame{stroke:var(--white);stroke-width:2.2}
.field path.ref{stroke:var(--grey);stroke-width:1;stroke-dasharray:3 7}
.slider{position:relative;margin-top:calc(18*var(--u));padding:22px 0 8px}
.slider input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:pointer;z-index:3}
.track{position:relative;height:2px;background:rgba(255,255,255,.28)}
.track .fill{position:absolute;left:0;top:0;bottom:0;background:var(--green)}
.knob{position:absolute;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--green);display:flex;align-items:center;justify-content:center;gap:5px;box-shadow:0 0 0 6px rgba(33,255,167,.16);pointer-events:none;transition:box-shadow .2s}
.knob i{display:block;width:6px;height:6px;border-left:2px solid var(--navy);border-bottom:2px solid var(--navy)}
.knob i:first-child{transform:rotate(45deg)}
.knob i:last-child{transform:rotate(-135deg)}
.slider input:focus-visible ~ .track .knob{box-shadow:0 0 0 4px var(--white)}
.hint{position:absolute;top:-30px;transform:translateX(-50%);font-size:13px;color:var(--navy);background:var(--white);padding:3px 9px;border-radius:999px;white-space:nowrap;pointer-events:none;transition:opacity .4s}
.hint.gone{opacity:0}
.ends{display:flex;justify-content:space-between;margin-top:18px;font-size:max(14px,calc(20*var(--u)));color:var(--grey)}
.ends span{transition:color .3s}
.pairs{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(60*var(--u));margin-top:calc(30*var(--u))}
.pairs h4{display:none;font-family:var(--sans);font-weight:400;font-size:max(13px,calc(18*var(--u)));letter-spacing:.04em;text-transform:uppercase;color:var(--grey);margin-bottom:6px}
.pairs ul{list-style:none;margin:0;padding:0}
.pairs li{padding:calc(12*var(--u)) 0;border-top:1px solid rgba(255,255,255,.14);line-height:1.4;transition:opacity .2s}
.col-von li{color:var(--grey)}
.col-zu li{color:var(--white);font-size:max(17px,calc(27*var(--u)))}
.t-foot{display:flex;justify-content:space-between;align-items:center;gap:12px 24px;flex-wrap:wrap;margin-top:calc(26*var(--u));font-size:max(14px,calc(20*var(--u)));color:var(--grey)}
.t-foot a{color:var(--green);text-underline-offset:5px}


/* 3 Kohärenz als Prinzip */
.principle{position:relative;background:var(--mint);z-index:2}
.pr-bg{position:absolute;left:0;right:0;top:0;bottom:calc(435*var(--u));overflow:hidden;background:#0B475F}
.pr-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pr-bg::after{content:"";position:absolute;inset:0;background:rgba(0,54,81,.22)}
.pr-c{position:relative;padding-top:calc(96*var(--u));color:var(--white)}
.principle .eyebrow{color:var(--grey)}
.principle .h{color:var(--green);margin-top:calc(65*var(--u));line-height:calc(95*var(--u))}
.principle .lead{margin-top:calc(32*var(--u));max-width:none;color:var(--white)}
.chev4{position:absolute;left:calc(898*var(--u));top:calc(875*var(--u));width:calc(545*var(--u));height:calc(218*var(--u));z-index:3}
.chev4 path{fill:var(--green)}
.pr-img{position:relative;margin-top:calc(72*var(--u));border-radius:calc(20*var(--u));overflow:hidden;aspect-ratio:1202/671;z-index:2}
.pr-img img{width:100%;height:100%;object-fit:cover}

/* 4 Drei Wege */
.wege{background:var(--mint);padding-top:calc(90*var(--u));padding-bottom:calc(100*var(--u));position:relative}
.wege .eyebrow,.wege .h-center{text-align:center}
.wege .h-center{font-size:var(--fs-h);line-height:calc(95*var(--u));margin-top:calc(53*var(--u))}
.w-cols{display:grid;grid-template-columns:calc(726*var(--u)) 1fr;gap:0 0;margin-top:calc(62*var(--u))}
.w-left{max-width:none}
.w-right{padding-left:0}
.w-right .q{border-left:calc(3*var(--u)) solid var(--green);margin-left:0;padding-left:calc(43*var(--u));padding-top:calc(16*var(--u));padding-bottom:calc(40*var(--u))}
.w-right .small{margin-top:calc(20*var(--u));line-height:calc(30*var(--u));max-width:none;padding-left:calc(50*var(--u))}
.wege .script{color:var(--navy);font-size:var(--fs-script2);line-height:calc(88*var(--u));margin-top:calc(70*var(--u));margin-left:calc(-35*var(--u))}
.wege .script span:nth-child(2){margin-left:calc(3*var(--u))}
.wege .script span:nth-child(3){margin-left:calc(6*var(--u))}
.va{display:flex;gap:4px;margin-top:calc(70*var(--u))}
/* A: Bildpaneele */
.va{display:flex;gap:4px;height:min(78vh,calc(720*var(--u)));min-height:460px;margin-top:calc(70*var(--u))}
.pa{position:relative;flex:1 1 0;overflow:hidden;border-radius:calc(20*var(--u));color:var(--white);background:var(--navy);transition:flex-grow .55s cubic-bezier(.3,.7,.2,1)}
.pa.open{flex-grow:1.4}
.pa img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s}
.pa:hover img{transform:scale(1.03)}
.pa::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,54,81,.96) 0%,rgba(0,54,81,.72) 36%,rgba(0,54,81,0) 64%)}
.pa .b{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:calc(34*var(--u)) calc(28*var(--u)) calc(36*var(--u))}
.pa .lab{font-size:var(--fs-btn);color:var(--green);letter-spacing:.02em;text-transform:uppercase}
.pa h4{font-size:max(28px,calc(42*var(--u)));line-height:1.08;margin-top:calc(10*var(--u));max-width:12ch}
.pa .more{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s}
.pa .more > div{overflow:hidden}
.pa.open .more{grid-template-rows:1fr}
.pa .more p{margin-top:calc(14*var(--u));max-width:34ch;font-size:var(--fs-body);line-height:1.45;color:#DCEAE6}
.pa .more .pill{margin-top:calc(20*var(--u))}
.pa .tog{all:unset;cursor:pointer;margin-top:calc(16*var(--u));font-size:var(--fs-btn);color:var(--green);display:inline-flex;align-items:center;gap:8px}
.pa .tog::after{content:"+";font-size:1.3em;line-height:1}
.pa.open .tog::after{content:"–"}
.pa .tog:focus-visible{outline:2px solid var(--green);outline-offset:4px}

.logos{display:flex;justify-content:center;gap:calc(64*var(--u));margin-top:calc(64*var(--u));padding:0 16px;flex-wrap:wrap}
.logo-c{width:calc(100*var(--u));height:calc(100*var(--u));border-radius:50%;border:calc(0.8*var(--u)) solid var(--navy);min-width:48px;min-height:48px;display:flex;align-items:center;justify-content:center;font-size:calc(27.4*var(--u))}
.logos-note{text-align:center;margin-top:calc(16*var(--u))}
.case{margin-top:calc(50*var(--u));position:relative}
.case-track{overflow:hidden;border-radius:calc(30*var(--u))}
.case-slides{display:flex;transition:transform .5s cubic-bezier(.3,.7,.2,1)}
.case-slide{flex:0 0 100%;background:var(--green);padding:calc(39*var(--u)) calc(50*var(--u)) calc(50*var(--u));text-align:center;min-height:calc(449*var(--u))}
.case-slide h3{font-family:var(--sans);font-weight:300;font-size:var(--fs-title);line-height:calc(42*var(--u));max-width:calc(560*var(--u));margin:0 auto}
.case-slide p{margin:calc(43*var(--u)) auto 0;line-height:calc(35*var(--u));max-width:calc(960*var(--u))}
.case-slide u{text-underline-offset:4px;text-decoration-thickness:calc(1.2*var(--u))}
.case-slide.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}
.dots{display:flex;justify-content:center;gap:calc(26*var(--u));margin-top:calc(37*var(--u))}
.dots button{all:unset;cursor:pointer;width:calc(14*var(--u));height:calc(14*var(--u));min-width:10px;min-height:10px;border-radius:50%;background:#CCCCCC}
.dots button[aria-current=true]{background:var(--green)}
.dots button:focus-visible{outline:2px solid var(--navy);outline-offset:3px}

/* 5 Über mich, Kohärenz-Ansatz, HPT */
.white{background:var(--white);position:relative;z-index:2;padding-bottom:calc(140*var(--u))}
.ueber{padding-top:calc(88*var(--u));display:grid;grid-template-columns:calc(541*var(--u)) 1fr;gap:0 calc(114*var(--u));align-items:start}
.u-left{position:relative;padding-top:calc(52*var(--u))}
.signet{position:absolute;left:calc(70*var(--u));top:0;width:calc(72*var(--u));text-align:center;z-index:2}
.signet .rings{display:flex;align-items:center;justify-content:center;width:calc(72*var(--u));height:calc(34*var(--u));min-width:46px;min-height:22px;border:1px dashed var(--gold);border-radius:4px;font-size:10px;color:var(--gold);background:var(--white)}
.signet small{display:block;font-size:calc(11.2*var(--u));line-height:calc(14*var(--u));color:var(--navy);letter-spacing:.02em;margin-top:calc(6*var(--u));white-space:nowrap}
.u-photo{border-radius:calc(20*var(--u));overflow:hidden;aspect-ratio:541/703}
.u-photo img{width:100%;height:100%;object-fit:cover}
.social{display:flex;justify-content:flex-end;gap:calc(12*var(--u));margin-top:calc(17*var(--u))}
.social a{font-size:max(12px, calc(17*var(--u)));line-height:1;border:1.5px solid var(--navy);border-radius:calc(7*var(--u));padding:calc(7*var(--u)) calc(9*var(--u));text-decoration:none;font-weight:400}
.social a:hover{background:var(--navy);color:var(--white)}
.checks{list-style:none;margin:calc(8*var(--u)) 0 0;padding:0;font-size:calc(25*var(--u));line-height:calc(47*var(--u))}
.checks li{display:flex;align-items:center;gap:calc(14*var(--u))}
.checks svg{width:calc(26*var(--u));height:calc(20*var(--u));min-width:14px;min-height:11px;flex:0 0 auto}
.u-right{padding-top:calc(26*var(--u))}
.u-right .h{margin-top:calc(42*var(--u));line-height:calc(95*var(--u))}
.u-right .lead{margin-top:calc(5*var(--u));max-width:none}
.u-right .body{margin-top:calc(43*var(--u));line-height:calc(35*var(--u));max-width:none}

.koh{position:relative;padding-top:calc(66*var(--u))}
.koh .h{margin-top:calc(44*var(--u));line-height:calc(95*var(--u));max-width:none}
.koh .lead{margin-top:calc(15*var(--u));max-width:30ch}
/* ===== Bereich 3: Dreiklang ===== */
.tri{display:grid;grid-template-columns:repeat(3,1fr);margin-top:calc(56*var(--u));position:relative;align-items:start}
.step{all:unset;cursor:pointer;display:block;position:relative;padding-right:calc(30*var(--u))}
.step:focus-visible{outline:2px solid var(--green);outline-offset:6px}
.step svg{display:block;width:100%;height:calc(200*var(--u));min-height:120px;overflow:visible}
.step .ln{fill:none;stroke:var(--navy);stroke-width:1.6;stroke-linecap:round;vector-effect:non-scaling-stroke;transition:stroke .3s,opacity .3s}
.step .mo{fill:none;stroke:var(--green);stroke-width:26;stroke-linecap:butt;stroke-linejoin:miter;transition:opacity .3s}
.step .mo.fillm{fill:var(--green);stroke:none}
.step .k{font-size:var(--fs-btn);color:var(--grey);letter-spacing:.02em;text-transform:uppercase;margin-top:calc(26*var(--u));transition:color .3s}
.step h3{font-size:max(26px,calc(45*var(--u)));line-height:1.12;margin-top:calc(10*var(--u));max-width:13ch}
.step p{margin-top:calc(12*var(--u));line-height:calc(35*var(--u));max-width:28ch}
.tri.focus .step{opacity:.38;transition:opacity .3s}
.tri.focus .step.on{opacity:1}
.tri .step.on .k{color:#003651}
.flow{animation:flow 2.4s linear infinite}
@keyframes flow2{to{stroke-dashoffset:-266}}
.step .pulse{fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:16 250}
.koh .script{position:static;color:var(--green);font-size:var(--fs-script2);line-height:calc(80*var(--u));margin-top:calc(60*var(--u));margin-left:calc(-6*var(--u))}
.koh .script span{display:block}


/* 6 Mensch & Technologie */
.tech{position:relative;color:var(--white);min-height:calc(1450*var(--u));z-index:1;overflow:hidden;background:var(--navy)}
.tech-bg{position:absolute;inset:0}
.tech-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.tech-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,54,81,.95) 0%,rgba(0,54,81,.86) 28%,rgba(0,54,81,.35) 46%,rgba(0,54,81,0) 64%)}
.tech-c{position:relative;padding-top:calc(251*var(--u));padding-bottom:calc(120*var(--u))}
.tech .h{color:var(--green);margin-top:calc(56*var(--u));line-height:calc(95*var(--u));max-width:none}
.tech .tp{font-size:var(--fs-tech);line-height:calc(47*var(--u));max-width:none;margin-top:calc(30*var(--u))}
.tech .tp + .tp{margin-top:calc(47*var(--u))}

/* 7 FAQ */
.faq{background:var(--mint);padding-top:calc(108*var(--u));padding-bottom:calc(30*var(--u));position:relative;z-index:2}
.faq h2{text-align:center;font-size:var(--fs-faq);line-height:1.1}
.faq-list{max-width:calc(872*var(--u));margin:calc(39*var(--u)) auto 0}
.faq-item{border-bottom:calc(2*var(--u)) solid var(--rule)}
.faq-item:last-child{border-bottom:0}
.faq-item.open{background:var(--mint);box-shadow:0 calc(12*var(--u)) calc(34*var(--u)) rgba(0,0,0,.28);margin:0 calc(-22*var(--u));padding:0 calc(22*var(--u));border-bottom-color:transparent;position:relative;z-index:1}
.faq-q{all:unset;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:calc(30*var(--u));width:100%;box-sizing:border-box;padding:calc(30*var(--u)) calc(34*var(--u)) calc(30*var(--u)) calc(24*var(--u));font-size:var(--fs-lead);line-height:calc(50*var(--u))}
.faq-q:focus-visible{outline:2px solid var(--navy);outline-offset:-4px}
.faq-q svg{width:calc(26*var(--u));height:calc(26*var(--u));min-width:18px;min-height:18px;flex:0 0 auto;margin-top:calc(8*var(--u))}
.faq-q svg circle{fill:none;stroke:var(--navy);stroke-width:2}
.faq-q svg path{stroke:var(--navy);stroke-width:2}
.faq-q .v{transition:opacity .2s}
.faq-item.open .faq-q .v{opacity:0}
.faq-a{display:none;padding:0 calc(120*var(--u)) calc(36*var(--u)) calc(24*var(--u));font-size:var(--fs-small);line-height:calc(30*var(--u))}
.faq-item.open .faq-a{display:block}
.faq-a .ph-tag{margin-top:10px}

/* 8 Der nächste Schritt */
.cta{background:var(--green);text-align:center;padding-top:calc(68*var(--u));padding-bottom:calc(92*var(--u))}
.cta .eyebrow{color:var(--white)}
.cta .h{margin-top:calc(57*var(--u));line-height:calc(95*var(--u))}
.cta .lead{margin:calc(34*var(--u)) auto 0;max-width:none}
.cta-btn{display:inline-flex;align-items:center;justify-content:center;margin-top:calc(42*var(--u));width:calc(404*var(--u));height:calc(86*var(--u));min-height:52px;border-radius:999px;background:var(--white);color:var(--navy);font-size:var(--fs-ctabtn);text-decoration:none;font-weight:300;transition:background .2s,color .2s}
.cta-btn:hover{background:var(--navy);color:var(--white)}
.cta{position:relative}
.cta-hint{position:absolute;left:0;right:0;bottom:calc(30*var(--u));font-size:var(--fs-small)}

/* 9 Footer */
footer{position:relative;background:var(--navy);color:var(--white);overflow:hidden;min-height:calc(567*var(--u))}
.f-bg{position:absolute;inset:0}
.f-bg img{width:100%;height:100%;object-fit:cover}
.f-bg::after{content:"";position:absolute;inset:0;background:rgba(0,30,46,.35)}
.f-in{position:relative;display:grid;grid-template-columns:calc(683*var(--u)) 1fr;padding-top:calc(110*var(--u));padding-bottom:calc(62*var(--u));min-height:calc(567*var(--u))}
.f-in .logo{align-self:start}
.f-left{display:flex;flex-direction:column;justify-content:space-between}
.f-nav a{display:block;font-size:var(--fs-title);line-height:calc(50*var(--u));text-decoration:none}
.f-nav a:hover,.f-legal a:hover{color:var(--green)}
.f-legal{margin-top:calc(36*var(--u))}
.f-legal a{display:block;font-size:var(--fs-small);line-height:calc(25*var(--u));text-decoration:none}
.copy{font-size:var(--fs-small)}
.f-chev{position:absolute;left:calc(1226*var(--u));top:calc(306*var(--u));width:calc(249*var(--u));height:calc(373*var(--u))}
@media (min-width:1501px){.f-chev{left:auto;right:calc(50% - 725px)}}
.f-chev path{fill:var(--green)}

/* Fassung 3: Ergänzungen nach dem Audit */
.hero-c{top:calc(318*var(--u))}
.hero-ctas{display:flex;align-items:center;gap:calc(30*var(--u));margin-top:calc(30*var(--u));flex-wrap:wrap}
.hero .hero-ctas .pill{margin-top:0}
.hero-video{display:inline-flex;align-items:center;gap:calc(10*var(--u));color:var(--white);text-decoration:none;font-size:var(--fs-btn)}
.hero-video svg{width:calc(30*var(--u));height:calc(30*var(--u));min-width:22px;min-height:22px}
.hero-video circle{fill:none;stroke:var(--green);stroke-width:1.4}
.hero-video path{fill:var(--green)}
.hero-video:hover{color:var(--green)}
.hero-tags{top:calc(640*var(--u))}
.occ{margin-top:calc(24*var(--u));font-size:var(--fs-small);line-height:1.5;color:var(--grey)}
.occ b{font-weight:400;color:var(--white)}
.fits a{white-space:nowrap}
.pr-imgw{position:relative;margin-top:calc(72*var(--u))}
.pr-imgw .pr-img{margin-top:0}
.pr-imgw .chev4{left:calc(748*var(--u));top:calc(-170*var(--u))}
.w-right .q{padding-bottom:calc(16*var(--u))}
.va{height:auto;min-height:0;align-items:stretch}
.pa{min-height:0;display:flex;flex-direction:column;justify-content:flex-start;background:var(--navy)}
.pa img{position:relative;inset:auto;height:calc(430*var(--u));min-height:220px;flex:0 0 auto}
.pa .b{position:relative;padding:0 calc(30*var(--u)) calc(34*var(--u));margin-top:calc(-90*var(--u));flex:1;display:flex;flex-direction:column}
.pa .acts{margin-top:auto;padding-top:calc(24*var(--u))}
.pa::after{top:0;bottom:auto;height:calc(430*var(--u));min-height:220px;background:linear-gradient(0deg,rgba(0,54,81,1) 0%,rgba(0,54,81,.75) 22%,rgba(0,54,81,0) 55%)}
.pa .lab{font-size:max(12px,calc(18*var(--u)))}
.pa .d{margin-top:calc(14*var(--u));font-size:var(--fs-small);line-height:1.5;color:#DCEAE6}
.kw{list-style:none;margin:calc(18*var(--u)) 0 0;padding:0;display:flex;flex-wrap:wrap;gap:calc(8*var(--u))}
.kw li{font-size:max(12px,calc(17*var(--u)));line-height:1.3;border:1px solid rgba(33,255,167,.55);color:var(--white);border-radius:999px;padding:calc(5*var(--u)) calc(12*var(--u))}
.lang{margin-top:calc(12*var(--u));font-size:max(12px,calc(17*var(--u)));color:var(--grey)}
.acts{display:flex;align-items:center;gap:calc(20*var(--u));flex-wrap:wrap}
.tlink{color:var(--green);font-size:var(--fs-btn);text-underline-offset:4px}
.pa.flash{box-shadow:0 0 0 3px var(--green)}
.ueber-s{padding-bottom:calc(120*var(--u))}
.u-left{padding-top:0}
.u-right{padding-top:0}
.checks{line-height:1.45;font-size:max(14px,calc(21*var(--u)));margin-top:calc(14*var(--u))}
.checks li{align-items:flex-start;padding:calc(7*var(--u)) 0}
.checks svg{margin-top:calc(5*var(--u))}
.way{margin:calc(40*var(--u)) 0 0;border-left:calc(3*var(--u)) solid var(--green);padding-left:calc(28*var(--u))}
.way p{font-family:var(--serif);font-size:max(22px,calc(38*var(--u)));line-height:1.2}
.u-right .way + .body{margin-top:calc(24*var(--u))}
.refs{background:var(--mint);padding-top:calc(100*var(--u));padding-bottom:calc(110*var(--u));position:relative;z-index:2}
.refs .eyebrow,.refs .h-center{text-align:center}
.refs .h-center{font-size:var(--fs-h);line-height:calc(95*var(--u));margin-top:calc(30*var(--u))}
.refs .case{margin-top:calc(60*var(--u))}
.case-slide{text-align:left;padding:calc(44*var(--u)) calc(60*var(--u)) calc(50*var(--u));min-height:0}
.case-slide .meta{font-size:max(12px,calc(18*var(--u)));letter-spacing:.04em;text-transform:uppercase;margin:0 0 calc(12*var(--u))}
.case-slide h3{margin:0;max-width:none}
.case-slide p{max-width:none}
.case-slide p.meta{margin-top:0}
.case-nav{display:flex;align-items:center;justify-content:center;gap:calc(24*var(--u));margin-top:calc(30*var(--u))}
.case-nav .dots{margin-top:0}
.cn{all:unset;cursor:pointer;width:44px;height:44px;border-radius:50%;border:1px solid var(--navy);display:flex;align-items:center;justify-content:center;box-sizing:border-box}
.cn svg{width:18px;height:18px}
.cn path{fill:none;stroke:var(--navy);stroke-width:2}
.cn:hover{background:var(--green);border-color:var(--green)}
.cn:focus-visible{outline:2px solid var(--navy);outline-offset:3px}
.voices{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(50*var(--u));margin-top:calc(100*var(--u))}
.voices figure{margin:0;border-top:calc(3*var(--u)) solid var(--green);padding-top:calc(24*var(--u))}
.voices blockquote{margin:0;font-family:var(--serif);font-size:max(19px,calc(28*var(--u)));line-height:1.3}
.voices figcaption{margin-top:calc(18*var(--u));font-size:var(--fs-small);line-height:1.4;color:#4B6469}
.voices figcaption b{display:block;font-weight:400;color:var(--navy)}
.clients{margin-top:calc(90*var(--u));text-align:center}
.clients ul{list-style:none;margin:calc(20*var(--u)) 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:calc(14*var(--u)) calc(44*var(--u))}
.clients li{font-size:max(17px,calc(28*var(--u)));color:var(--navy);opacity:.75}
.tech-pill{margin-top:calc(40*var(--u))}
.principle .lead{max-width:calc(720*var(--u))}
.tech .tp{max-width:calc(600*var(--u))}
.faq-a p + p{margin-top:10px}
.cta .lead{max-width:calc(860*var(--u));margin:calc(34*var(--u)) auto 0}
.kform{max-width:calc(900*var(--u));margin:calc(50*var(--u)) auto 0;background:var(--white);border-radius:calc(24*var(--u));padding:calc(40*var(--u)) calc(44*var(--u)) calc(36*var(--u));text-align:left}
.kform fieldset{border:0;margin:0 0 calc(22*var(--u));padding:0}
.kform legend,.kform label{display:block;font-size:var(--fs-small);margin-bottom:calc(8*var(--u));color:var(--navy)}
.chips{display:flex;flex-wrap:wrap;gap:calc(10*var(--u))}
.chips input{position:absolute;opacity:0;pointer-events:none}
.kform .chips label{margin:0;padding:calc(9*var(--u)) calc(18*var(--u));border-radius:999px;border:1px solid var(--navy);cursor:pointer}
.chips input:checked + label{background:var(--navy);color:var(--white)}
.chips input:focus-visible + label{outline:2px solid var(--navy);outline-offset:2px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:calc(16*var(--u))}
.fi{margin-bottom:calc(16*var(--u))}
.fi input,.fi textarea{width:100%;font:inherit;font-size:max(16px,calc(22*var(--u)));color:var(--navy);background:var(--mint);border:1px solid #B9D8CC;border-radius:calc(12*var(--u));padding:calc(12*var(--u)) calc(16*var(--u))}
.fi input:focus,.fi textarea:focus{outline:none;border-color:var(--navy)}
.kform .cta-btn{margin-top:calc(10*var(--u));border:0;cursor:pointer;background:var(--navy);color:var(--white);font-family:var(--sans)}
.kform .cta-btn:hover{background:var(--green);color:var(--navy)}
.status{margin-top:calc(14*var(--u));font-size:var(--fs-small);min-height:1.4em}
.status.err{color:#A3261B}
.direct{margin-top:calc(28*var(--u));font-size:var(--fs-small)}
.mail{font-weight:400;user-select:all}

/* ===== Ruhige Fassung ===== */
:root{--soft:#4B6469;--hair:rgba(0,54,81,.14);--acc:#003651;--paper:#F4F7F8;--serif:"Outfit","N27","Helvetica Neue",Arial,sans-serif}
/* Typografie: eine kräftige serifenlose Schrift für Überschriften */
h1,h2,h3,h4,.wb .wh,.tab .t{font-weight:500;letter-spacing:-.02em}
.hero h1{line-height:1.08;letter-spacing:-.025em}
.h,.h-center{line-height:1.1}
.way p{font-weight:400;letter-spacing:-.01em;line-height:1.3}
.voices blockquote{font-weight:300;letter-spacing:0}
.case-slide h3{font-weight:500}
body{line-height:1.55}
.logo img{display:block;height:calc(26*var(--u));width:auto}
.menu svg.big{width:calc(300*var(--u));height:calc(197*var(--u));right:calc(60*var(--u));bottom:calc(60*var(--u))}
.menu svg.big use{fill:var(--green)}
/* Hero */
.hero-c{top:calc(270*var(--u))}
.hero-cred{position:absolute;left:0;right:0;bottom:calc(60*var(--u));font-size:var(--fs-small);letter-spacing:.03em;color:rgba(255,255,255,.78)}
/* Herausforderung: heller Regler */
.challenge{padding-top:calc(150*var(--u));padding-bottom:calc(150*var(--u))}
.tpanel{background:var(--mint);color:var(--navy)}
.tabs{border-bottom-color:var(--hair)}
.tab .t,.tab .s{color:#6A8591}
.tab[aria-selected=true] .t,.tab:hover .t{color:var(--navy)}
.tab[aria-selected=true] .s{color:var(--soft)}
.tab:focus-visible{outline-color:var(--navy)}
.field{color:var(--navy)}
.field path{stroke-width:1.4}
.field path.solo{stroke-width:2.4}
.field path.frame{stroke:var(--navy);stroke-width:1.8}
.field path.ref{stroke:#8FA6AF}
.track{background:rgba(0,54,81,.18)}
.knob{box-shadow:0 0 0 6px rgba(33,255,167,.25)}
.slider input:focus-visible ~ .track .knob{box-shadow:0 0 0 4px var(--navy)}
.hint{background:var(--navy);color:var(--white)}
.ends,.t-foot{color:#5E7884}
.pairs li{border-top-color:var(--hair)}
.col-von li{color:#6A8591}
.col-zu li{color:var(--navy)}
.occ{color:#5E7884}.occ b{color:var(--navy)}
.t-foot a{color:var(--navy);text-decoration-color:var(--green);text-decoration-thickness:2px}
/* Leitfrage */
.leit{background:var(--white);padding:calc(40*var(--u)) 0 calc(170*var(--u));text-align:center}
.leit .eyebrow{color:#8FA6AF}
.leit-sc{width:min(100%,calc(760*var(--u)));height:auto;margin:calc(54*var(--u)) auto 0}
.leit-t{max-width:calc(600*var(--u));margin:calc(54*var(--u)) auto 0;font-size:var(--fs-body);line-height:1.6;color:var(--soft)}
/* Drei Wege */
.wege{padding-top:calc(150*var(--u));padding-bottom:calc(160*var(--u))}
.wege .h-center{margin-top:calc(30*var(--u))}
.w-lead{text-align:center;max-width:calc(720*var(--u));margin:calc(28*var(--u)) auto 0;color:var(--soft)}
.wcards{display:grid;grid-template-columns:repeat(3,1fr);gap:calc(36*var(--u));margin-top:calc(80*var(--u))}
.wcard{display:flex;flex-direction:column;background:var(--white);border-radius:calc(20*var(--u));overflow:hidden;text-decoration:none;color:var(--navy);transition:box-shadow .6s,transform .6s}
.wcard:hover{box-shadow:0 calc(24*var(--u)) calc(60*var(--u)) rgba(0,54,81,.10);transform:translateY(-3px)}
.wcard:focus-visible{outline:2px solid var(--navy);outline-offset:4px}
.wimg{display:block;aspect-ratio:4/3.3;overflow:hidden}
.wimg img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s}
.wcard:hover .wimg img{transform:scale(1.03)}
.wb{display:flex;flex-direction:column;flex:1;padding:calc(36*var(--u)) calc(36*var(--u)) calc(40*var(--u))}
.wb .lab{font-size:max(12px,calc(17*var(--u)));letter-spacing:.05em;text-transform:uppercase;color:var(--acc)}
.wb .wh{font-family:var(--serif);font-size:max(26px,calc(40*var(--u)));line-height:1.12;margin-top:calc(14*var(--u))}
.wb .d{margin-top:calc(16*var(--u));font-size:var(--fs-small);line-height:1.6;color:var(--soft)}
.wb .tlink{margin-top:auto;padding-top:calc(30*var(--u));color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:6px}
.wcard.flash{box-shadow:0 0 0 3px var(--green)}
/* Kohärenz */
.principle{background:var(--white)}
.pr-band{position:relative;min-height:calc(660*var(--u));display:flex;align-items:flex-end}
.pr-bg{inset:0;bottom:0}
.pr-bg::after{background:linear-gradient(0deg,rgba(0,54,81,.82) 0%,rgba(0,54,81,.35) 45%,rgba(0,54,81,.05) 80%)}
.pr-c{padding-top:calc(200*var(--u));padding-bottom:calc(100*var(--u));width:100%}
.principle .eyebrow{color:rgba(255,255,255,.75)}
.principle .h{color:var(--white);margin-top:calc(30*var(--u))}
.koh{padding-top:calc(110*var(--u));padding-bottom:calc(150*var(--u))}
.koh-intro{display:grid;grid-template-columns:1fr 1fr;gap:0 calc(90*var(--u));align-items:start}
.koh .koh-intro .lead{max-width:none;margin-top:0;color:var(--navy)}
.koh-intro .body{color:var(--soft);line-height:1.65}
.tri{margin-top:calc(100*var(--u))}
/* Über mich */
.ueber-s{background:var(--white);padding-top:calc(40*var(--u));padding-bottom:calc(160*var(--u));border-top:1px solid var(--hair)}
.ueber{padding-top:calc(110*var(--u))}
.u-right .h{margin-top:calc(30*var(--u))}
.u-right .lead{margin-top:calc(20*var(--u))}
.u-right .body{color:var(--soft)}
.social{justify-content:flex-start;margin-top:calc(26*var(--u))}
.social a{border-width:1px;border-color:var(--hair)}
/* Referenzen */
.refs{padding-top:calc(150*var(--u));padding-bottom:calc(160*var(--u))}
.refs .case{margin-top:calc(70*var(--u))}
.case-track{border-radius:calc(20*var(--u))}
.case-slide{background:var(--white);padding:calc(56*var(--u)) calc(64*var(--u)) calc(60*var(--u))}
.case-slide .meta{color:var(--acc)}
.case-slide h3{font-family:var(--serif);font-size:max(24px,calc(40*var(--u)));line-height:1.15;margin-top:calc(6*var(--u))}
.cs3{display:grid;grid-template-columns:1fr 1.3fr 1.3fr;gap:calc(44*var(--u));margin-top:calc(40*var(--u))}
.cs3 .k{font-size:max(12px,calc(16*var(--u)));letter-spacing:.06em;text-transform:uppercase;color:#8FA6AF;margin:0}
.case-slide .cs3 p{margin:0}
.case-slide .cs3 p + p{margin-top:calc(10*var(--u));font-size:var(--fs-small);line-height:1.65;color:#33505E}
.dots button{background:#C5D3D9}
.cn{border-color:var(--hair)}
.voices{margin-top:calc(120*var(--u));gap:calc(60*var(--u))}
.voices figure{border-top-width:2px}
.voices blockquote{font-size:max(18px,calc(26*var(--u)));line-height:1.4}
.clients{margin-top:calc(110*var(--u))}
.clients li{opacity:.6}
/* FAQ */
.faq{background:var(--white);padding-top:calc(150*var(--u));padding-bottom:calc(150*var(--u))}
.faq .eyebrow{text-align:center}
.faq .h-center{font-size:var(--fs-h);line-height:1.15;margin-top:calc(30*var(--u))}
.faq-list{margin-top:calc(60*var(--u))}
.faq-item{border-bottom:1px solid var(--hair)}
.faq-item:first-child{border-top:1px solid var(--hair)}
.faq-item:last-child{border-bottom:1px solid var(--hair)}
.faq-item.open{background:none;box-shadow:none;margin:0;padding:0;border-bottom-color:var(--hair)}
.faq-q{font-size:max(18px,calc(30*var(--u)));line-height:1.35}
.faq-a{font-size:var(--fs-small);line-height:1.7;color:var(--soft)}
/* Kontakt */
.cta{background:var(--mint);padding-top:calc(150*var(--u));padding-bottom:calc(150*var(--u))}
.cta .eyebrow{color:#8FA6AF}
.cta .lead{color:var(--soft)}
.kform{box-shadow:0 calc(20*var(--u)) calc(60*var(--u)) rgba(0,54,81,.06)}
.fi input,.fi textarea{background:#F6FBF9;border-color:var(--hair)}
.kform .chips label{border-color:var(--hair)}
/* Footer */
footer{background:var(--navy)}
.f-in .logo img{height:calc(28*var(--u))}
.f-mark{position:absolute;right:max(calc(130*var(--u)),calc(50% - 620px));bottom:calc(70*var(--u));width:calc(260*var(--u));height:calc(171*var(--u))}
.f-mark use{fill:var(--green)}

/* ===== Angleichung an andreaskuffner.de und nicoledufft.com: hell, ruhig, klar ===== */
.nav,.nav.solid{background:var(--white);color:var(--navy);padding-top:calc(calc(18*var(--u)) + env(safe-area-inset-top,0px));padding-bottom:calc(18*var(--u));transition:box-shadow .3s}
.nav.solid{box-shadow:0 1px 0 var(--hair)}
.nav .in{gap:calc(40*var(--u))}
.topnav{display:flex;gap:calc(44*var(--u));margin-left:auto;margin-right:calc(20*var(--u))}
.topnav a{text-decoration:none;font-size:var(--fs-btn);color:var(--navy)}
.topnav a:hover{color:var(--acc)}
.burger{display:none}
.burger i{background:var(--navy)}
.pill-navy{background:var(--navy);border-color:var(--navy);color:var(--white)}
.pill-navy:hover{background:var(--acc);border-color:var(--acc);color:var(--white)}
.hero-l{height:auto;color:var(--navy);background:var(--paper);padding-top:calc(190*var(--u));padding-bottom:calc(110*var(--u))}
.hl-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:0 calc(80*var(--u));align-items:center}
.hero-l .eyebrow{color:#8FA6AF}
.hero-l h1{color:var(--navy);margin-top:calc(30*var(--u))}
.hero-l .hero-lead{color:var(--soft);font-size:var(--fs-lead);line-height:1.5;margin-top:calc(30*var(--u));max-width:calc(600*var(--u))}
.hero-l .hero-ctas{margin-top:calc(44*var(--u))}
.hero-l .hero-video{color:var(--navy)}
.hero-l .hero-video:hover{color:var(--acc)}
.hero-l .hero-video circle{stroke:var(--navy)}.hero-l .hero-video path{fill:var(--navy)}
.hero-l .hero-cred{position:static;margin-top:calc(56*var(--u));color:#8FA6AF;font-size:var(--fs-small)}
.hl-img{border-radius:calc(20*var(--u));overflow:hidden;aspect-ratio:4/5}
.hl-img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%}
.wege,.refs,.cta,.tpanel{background:var(--paper)}
.challenge{padding-top:calc(160*var(--u))}
.kform{box-shadow:none;border:1px solid var(--hair)}
.hero-l h1{font-size:calc(70*var(--u))}
.hl-grid{grid-template-columns:1.25fr .75fr}
.s1-head{grid-template-columns:1.2fr .8fr}

/* ===== Vollflächiger Hero mit Text über dem Bild ===== */
.hero-f{position:relative;height:auto;min-height:min(100svh,calc(1000*var(--u)));display:flex;align-items:center;color:var(--navy);background:#E8EDF0;padding:calc(170*var(--u)) 0 calc(120*var(--u));overflow:hidden}
.hf-bg{position:absolute;inset:0}
.hf-bg img{width:100%;height:100%;object-fit:cover;object-position:68% 35%}
.hf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(236,241,243,.94) 0%,rgba(236,241,243,.82) 30%,rgba(236,241,243,.25) 50%,rgba(236,241,243,0) 62%)}
.hf-c{position:relative;width:100%}
.hf-c > *{max-width:calc(640*var(--u))}
.hero-f .eyebrow{color:#6A8591}
.hero-f h1{color:var(--navy);font-size:calc(70*var(--u));line-height:1.08;margin-top:calc(30*var(--u))}
.hero-f .hero-lead{color:#33505E;font-size:var(--fs-lead);line-height:1.5;margin-top:calc(30*var(--u));max-width:calc(560*var(--u))}
.hero-f .hero-ctas{margin-top:calc(44*var(--u))}
.hero-f .hero-video{color:var(--navy)}
.hero-f .hero-video circle{stroke:var(--navy)}.hero-f .hero-video path{fill:var(--navy)}
.hero-f .hero-cred{position:static;margin-top:calc(60*var(--u));color:#6A8591;font-size:var(--fs-small)}
/* Bildband mit Kundenstimme */
.band{position:relative;min-height:calc(760*var(--u));display:flex;align-items:flex-end;color:var(--white);overflow:hidden;background:var(--navy)}
.band-bg{position:absolute;inset:0}
.band-bg img{width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(0,40,60,.88) 0%,rgba(0,40,60,.45) 40%,rgba(0,40,60,.05) 75%)}
.band-c{position:relative;padding-top:calc(260*var(--u));padding-bottom:calc(100*var(--u));width:100%}
.band blockquote{margin:0;font-weight:400;font-size:max(28px,calc(56*var(--u)));line-height:1.15;letter-spacing:-.02em;max-width:calc(900*var(--u))}
.band p{margin-top:calc(22*var(--u));font-size:var(--fs-small);color:rgba(255,255,255,.8)}
.hero-f{background:#E9EEF1}
.hf-bg{left:34%}
.hf-bg img{object-position:60% 30%}
.hf-bg::after{background:linear-gradient(90deg,#E9EEF1 0%,rgba(233,238,241,.75) 14%,rgba(233,238,241,0) 42%)}
.hf-c > *{max-width:calc(600*var(--u))}
.hf-c > *{max-width:calc(640*var(--u))}
.hero-f h1{font-size:calc(64*var(--u))}
.hero-f .hero-lead{font-size:max(17px,calc(27*var(--u)));max-width:calc(520*var(--u))}
.hero-f{padding-top:calc(150*var(--u));padding-bottom:calc(100*var(--u))}

/* Hero-Variante: Bild links, Text rechts auf heller Wand */
.hf-right .hf-bg{left:0;right:0}
.hf-right .hf-bg img{object-position:30% 30%}
.hf-right .hf-bg::after{background:linear-gradient(270deg,rgba(242,243,240,.9) 0%,rgba(242,243,240,.78) 30%,rgba(242,243,240,.2) 48%,rgba(242,243,240,0) 58%)}
.hf-right .hf-c{display:flex;flex-direction:column;align-items:flex-start;padding-left:max(var(--gut),calc(50% + calc(40*var(--u))))}
.hf-right{background:#EEF0EC}
.hf-right .hf-bg img{object-position:0% 30%}
.hf-right .hf-c{padding-left:max(var(--gut),calc(50% + calc(90*var(--u))));padding-right:max(calc(60*var(--u)),calc(50% - 680px))}
.hf-right .hf-c > *{max-width:calc(600*var(--u))}
.hf-right.hero-f{padding-top:calc(130*var(--u));padding-bottom:calc(90*var(--u))}
.hf-right .hero-cred{margin-top:calc(40*var(--u))}
.hf-right .hf-bg img{object-position:100% 30%}

/* Kohärenz-Bild: der Achter, Text oben auf dem ruhigen Hintergrund */
.pr-band{min-height:calc(800*var(--u));align-items:flex-start}
.pr-bg img{object-position:58% 62%}
.pr-bg::after{background:linear-gradient(180deg,rgba(0,40,60,.62) 0%,rgba(0,40,60,.32) 38%,rgba(0,40,60,0) 62%)}
.pr-c{padding-top:calc(120*var(--u));padding-bottom:0}
.band-bg img{object-position:50% 45%}
.pr-band{min-height:min(calc(1050*var(--u)),100svh)}
.pr-bg img{object-position:58% 100%}
.pr-band{min-height:calc(900*var(--u))}
.pr-bg img{object-position:55% 70%}
.pr-bg::after{background:linear-gradient(180deg,rgba(0,40,60,.78) 0%,rgba(0,40,60,.5) 38%,rgba(0,40,60,.08) 62%,rgba(0,40,60,0) 75%)}

/* Grüner Schlusspunkt bei den Leitsätzen */
.dot{color:var(--green)}
.hero-f:not(.hf-dark) .dot,.challenge .dot,.wege .dot,.refs .dot,.faq .dot,.cta .dot{color:var(--green);-webkit-text-stroke:.5px rgba(0,54,81,.12)}
/* Ruhe-Linie im Hero: eine Welle, die sich glättet */
.calmline{display:block;width:calc(120*var(--u));min-width:84px;height:16px;overflow:visible;margin-bottom:calc(26*var(--u))}
.calmline path{fill:none;stroke:var(--green);stroke-width:2.2;stroke-linecap:round;animation:calm 3.2s cubic-bezier(.4,0,.2,1) .6s forwards}
@keyframes calm{to{d:path("M0 8 C 10 8, 20 8, 30 8 S 50 8, 60 8 S 80 8, 90 8 S 110 8, 120 8 S 140 8, 160 8")}}
@media (prefers-reduced-motion: reduce){.calmline path{animation:none;d:path("M0 8 C 10 8, 20 8, 30 8 S 50 8, 60 8 S 80 8, 90 8 S 110 8, 120 8 S 140 8, 160 8")}}
/* Video-Karte */
.vcard{display:inline-flex;align-items:center;gap:calc(14*var(--u));text-decoration:none;color:var(--navy);padding:6px 16px 6px 6px;border-radius:14px;background:rgba(255,255,255,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(0,54,81,.1);transition:background .3s,box-shadow .3s}
.vcard:hover{background:rgba(255,255,255,.85);box-shadow:0 0 0 1px rgba(0,54,81,.18),0 10px 30px rgba(0,54,81,.1)}
.vthumb{position:relative;display:block;width:96px;height:54px;border-radius:9px;overflow:hidden;flex:0 0 auto;background:var(--navy)}
.vthumb img{width:100%;height:100%;object-fit:cover;transition:transform .8s}
.vcard:hover .vthumb img{transform:scale(1.06)}
.vthumb svg{position:absolute;left:50%;top:50%;width:26px;height:26px;margin:-13px 0 0 -13px}
.vthumb circle{fill:rgba(0,30,46,.55);stroke:var(--white);stroke-width:1}
.vthumb path{fill:var(--green)}
.vtxt{display:flex;flex-direction:column;line-height:1.25}
.vtxt b{font-weight:400;font-size:var(--fs-btn)}
.vtxt span{font-size:max(12px,calc(16*var(--u)));color:#6A8591}

.koh-formats{margin-top:calc(70*var(--u));padding-top:calc(30*var(--u));border-top:1px solid var(--hair);font-size:max(18px,calc(28*var(--u)));line-height:1.45;color:var(--navy);max-width:calc(900*var(--u))}
@media (max-width:820px){.koh-formats{margin-top:36px;padding-top:20px}}

.s1-ctx{display:grid;grid-template-columns:1.2fr .8fr;gap:20px calc(80*var(--u));margin-top:calc(50*var(--u));padding-top:calc(34*var(--u));border-top:1px solid var(--hair);align-items:start}
.s1-ctx p{font-size:max(17px,calc(26*var(--u)));line-height:1.55;color:#33505E}
.s1-ctx .s1-bridge{color:var(--navy)}
@media (max-width:820px){.s1-ctx{grid-template-columns:1fr;margin-top:24px;padding-top:20px;gap:12px}}

/* Regler: gegenüberliegende Zeilen auf gleicher Höhe (nur Desktop) */
@media (min-width:821px){
  .pairs{display:grid;grid-template-columns:1fr 1fr;column-gap:calc(60*var(--u));grid-template-rows:auto auto auto}
  .pairs .col-von,.pairs .col-zu,.pairs ul{display:contents}
  .col-von li{grid-column:1}.col-zu li{grid-column:2}
  .pairs li:nth-child(1){grid-row:1}.pairs li:nth-child(2){grid-row:2}.pairs li:nth-child(3){grid-row:3}
  .pairs li{display:flex;align-items:flex-start}
}
/* Mehr Kraft: dunklere Grautöne, Hero-Verlauf leichter */
:root{--soft:#3A5663}
.eyebrow,.leit .eyebrow,.cta .eyebrow,.hero-f .eyebrow,.hero-l .eyebrow{color:#5E7A86}
.ends,.t-foot,.occ{color:#4E6A76}
.col-von li{color:#5E7A86}
.hf-right .hf-bg::after{background:linear-gradient(270deg,rgba(238,241,242,.88) 0%,rgba(238,241,242,.72) 28%,rgba(238,241,242,.12) 46%,rgba(238,241,242,0) 56%)}
.hero-f .hero-lead{color:#21404F}
.hero-f .hero-cred{color:#5E7A86}

.ey-cred span{white-space:normal}
.hf-c > .ey-cred{max-width:calc(760*var(--u))}
.hero-f .hf-c > .eyebrow.ey-cred{max-width:none;line-height:1.5}
.ey-cred b{font-weight:500;color:var(--navy);letter-spacing:.06em}

/* Kurzvita im Hero: eine Zeile, dezenter */
.hero-f .hf-c > .eyebrow.ey-cred{font-size:max(12px,calc(18*var(--u)));letter-spacing:.04em;line-height:1.6}
.ey-cred b{font-weight:500;letter-spacing:.08em}
.ey-cred .sep{color:#9AA6A8}
@media (max-width:820px){.hero-f .hf-c > .eyebrow.ey-cred{font-size:11.5px}}

/* Fallbeispiele: Ergebnis voran */
.case-slide h3{font-family:var(--sans);font-weight:500;font-size:max(15px,calc(21*var(--u)));line-height:1.35;letter-spacing:0;color:var(--navy);margin-top:calc(4*var(--u))}
.case-slide p.res{margin:calc(22*var(--u)) 0 0;font-weight:500;font-size:max(22px,calc(38*var(--u)));line-height:1.22;letter-spacing:-.015em;color:var(--navy);max-width:calc(1000*var(--u))}
.case-slide .cs3{margin-top:calc(44*var(--u));padding-top:calc(28*var(--u));border-top:1px solid var(--hair)}
.case-slide .cs3 p + p{color:#5C6B6F}
@media (max-width:820px){.case-slide h3{font-size:14.5px!important;line-height:1.35}.case-slide p.res{font-size:21px;margin-top:12px}.case-slide .cs3{margin-top:22px;padding-top:16px}}
/* Kundenleiste direkt nach dem Hero */
.trust{background:var(--bg,#fff);padding:calc(56*var(--u)) 0 calc(52*var(--u));border-bottom:1px solid var(--hair)}
.trust .wrap{display:flex;align-items:baseline;gap:20px calc(56*var(--u))}
.trust-k{flex:0 0 auto;font-size:max(11px,calc(16*var(--u)));letter-spacing:.08em;text-transform:uppercase;color:#7A8789}
.trust-l{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:calc(12*var(--u)) calc(40*var(--u));align-items:baseline}
.trust-l li{font-size:max(15px,calc(23*var(--u)));font-weight:500;letter-spacing:-.01em;color:#5F6E73;white-space:nowrap}
@media (max-width:820px){.trust{padding:28px 0}.trust .wrap{flex-direction:column;gap:12px}.trust-l{gap:6px 18px}.trust-l li{font-size:14.5px}}
/* Kunden vor dem Kontakt, nach dem Vorbild kohärenz.com */
.trust2{background:var(--bg,#fff);padding:calc(150*var(--u)) 0 calc(140*var(--u));text-align:center}
.trust2 .h-center{font-size:max(30px,calc(64*var(--u)));line-height:1.18;max-width:calc(900*var(--u));margin:0 auto}
.circ{position:relative;display:inline-block;padding:0 .12em}
.circ svg{position:absolute;left:-.22em;top:-.18em;width:calc(100% + .44em);height:calc(100% + .36em);overflow:visible;pointer-events:none}
.circ path{fill:none;stroke:var(--green);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
.logos2{list-style:none;margin:calc(100*var(--u)) auto 0;padding:0;max-width:calc(1150*var(--u));display:grid;grid-template-columns:repeat(6,1fr);gap:calc(56*var(--u)) calc(30*var(--u));align-items:center}
.logos2 li{font-size:max(15px,calc(24*var(--u)));font-weight:600;letter-spacing:-.01em;color:var(--navy);opacity:.82;line-height:1.2}
@media (max-width:820px){.trust2{padding:72px 0}.logos2{grid-template-columns:repeat(3,1fr);gap:26px 12px;margin-top:40px}.logos2 li{font-size:14px}}
.logos2{display:flex;flex-wrap:wrap;justify-content:center}
.logos2 li{flex:0 0 calc((100% - 5*calc(30*var(--u)))/6)}
@media (max-width:820px){.logos2 li{flex:0 0 calc((100% - 24px)/3)}}
.logos3{list-style:none;margin:calc(100*var(--u)) auto 0;padding:0;max-width:calc(1100*var(--u));display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:calc(70*var(--u)) 0}
.logos3 li{flex:0 0 33.333%;display:flex;justify-content:center;align-items:center;min-height:calc(110*var(--u))}
.logos3 img{width:auto;max-width:78%;opacity:.9}
.logos-more{margin:calc(80*var(--u)) auto 0;max-width:calc(900*var(--u));font-size:max(14px,calc(20*var(--u)));line-height:1.8;color:#5C6B6F}
@media (max-width:820px){.logos3{gap:30px 0;margin-top:40px}.logos3 li{min-height:56px}.logos3 img{max-width:84%}.logos-more{margin-top:36px}}
.logos-more span{white-space:nowrap}
.trust-sub{margin:calc(26*var(--u)) auto 0;max-width:calc(640*var(--u));font-size:max(15px,calc(22*var(--u)));line-height:1.6;color:#5C6B6F}
.trust-sub a,.koh-link a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:5px}
.koh-link{margin-top:calc(22*var(--u));font-size:max(15px,calc(21*var(--u)))}
.koh-link a::after{content:" →"}

/* Smartphone und Tablet hochkant */
@media (max-width:400px){.nav .pill{display:none}}
@media (max-width:820px){
  .lb{display:none}
  .hero-c{top:auto}
  .hero-ctas{gap:14px;margin-top:20px}
  .hero-tags{top:auto}
  .pr-imgw{margin-top:18px}
  .pr-imgw .chev4{position:relative;left:auto;top:auto;margin:0 0 -30px auto}
  .pa{min-height:0}
  .pa img,.pa::after{height:260px}
  .pa .b{padding:0 18px 22px;margin-top:-40px}
  .va{gap:12px}
  .voices{grid-template-columns:1fr;gap:28px;margin-top:44px}
  .clients{margin-top:44px}
  .clients ul{gap:8px 20px}
  .refs{padding-top:60px;padding-bottom:60px}
  .refs .h-center{line-height:1.12;margin-top:12px}
  .refs .case{margin-top:28px}
  .case-slide{padding:22px 18px 26px}
  .ueber-s{padding-bottom:60px}
  .way{margin-top:24px;padding-left:16px}
  .kform{padding:22px 16px 20px;border-radius:16px;margin-top:28px}
  .two{grid-template-columns:1fr;gap:0}
  .challenge{padding-top:96px;padding-bottom:60px}
  .s1-head{grid-template-columns:1fr}
  .tpanel{border-radius:16px;padding:22px 16px 22px;margin-top:28px}
  .tab{padding:4px 6px 14px 0}
  .tab .s{display:none}
  .pairs{grid-template-columns:1fr;gap:20px}
  .pairs h4{display:block}
  .col-von li,.col-zu li{padding:9px 0}
  .va{flex-direction:column;height:auto;min-height:0;margin-top:36px}
  .pa{min-height:66svh;flex:none;border-radius:14px}
  .pa .more{grid-template-rows:1fr}
  .pa .tog{display:none}
  .tri{grid-template-columns:1fr;gap:34px;margin-top:30px}
  .step{padding-right:0}
  .step svg{height:120px}
  .tri.focus .step{opacity:1}
  .step p{line-height:1.5}
  .koh .script{white-space:normal;line-height:1.15;margin-top:34px}
  .white{padding-bottom:70px}

  .challenge .lead,.principle .lead,.u-right .lead,.koh .lead,.cta .lead{max-width:none}
  :root{--u:.5px;--gut:20px;
    --fs-h:38px;--fs-lead:20px;--fs-title:21px;--fs-card:28px;--fs-body:16.5px;--fs-eye:13px;--fs-btn:15px;--fs-small:14px;--fs-script:44px;--fs-script2:40px;--fs-faq:54px;--fs-logo:21px;--fs-tech:18px;--fs-ctabtn:20px}
  body{line-height:1.5}
  .nav{padding-top:calc(18px + env(safe-area-inset-top,0px))}
  .nav.solid{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
  .nav .in{padding-left:max(20px, env(safe-area-inset-left,0px));padding-right:max(20px, env(safe-area-inset-right,0px));height:44px}
  .logo{gap:6px;font-size:18px}.logo svg{width:17px;height:26px}
  .nav .in{gap:12px}
  .nav-r{gap:16px}
  .nav .pill{height:34px;padding:0 12px;font-size:13px}
  .burger{width:30px;height:22px}.burger i{width:30px;height:2px}.burger i:last-child{width:22px}
  .menu nav{padding-left:max(28px, env(safe-area-inset-left,0px))}
  .menu svg.big{width:150px;height:225px}

  .hero{height:auto;min-height:640px;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:96px}
  .hero-bg img{object-position:62% 20%}
  .hero-bg::after{background:linear-gradient(0deg,rgba(0,54,81,.96) 0%,rgba(0,54,81,.8) 40%,rgba(0,54,81,0) 70%);-webkit-mask-image:none;mask-image:none}
  .hero-c{position:relative;top:auto;padding-top:300px}
  .hero h1{line-height:1.12;margin-top:12px}
  .hero-lead{line-height:1.45;margin-top:14px;max-width:340px}
  .hero .pill{margin-top:22px;height:40px}
  .hero-tags{position:relative;right:auto;top:auto;text-align:left;margin-top:22px;padding-left:20px;line-height:1.45;font-size:14px;opacity:.9}
  .hero .script{left:auto;right:12px;top:auto;bottom:-46px;line-height:46px}
  .hero .script span:nth-child(1){margin-left:46px}.hero .script span:nth-child(3){margin-left:70px}

  .challenge .h{margin-top:22px;padding-right:0}
  .trans{margin-top:48px}
  .panel{border-radius:16px;padding:28px 20px 26px}
  .panel h2{font-size:30px;line-height:1.15;margin-top:12px}
  .panel .intro{line-height:1.5;margin-top:12px}
  .t-tools{margin-top:22px;gap:16px}
  .lv{height:38px;padding:0 15px}
  .control{min-width:0;width:100%;max-width:none;gap:10px;white-space:normal;flex-wrap:wrap}
  .control input[type=range]{flex:1 1 100%;order:3}
  .control span:nth-of-type(2){margin-left:auto}
  .control .pill{order:4}
  .field{margin-top:20px}
  .f-cap{margin-bottom:18px}
  .rows-head{display:none}
  .row{grid-template-columns:1fr;gap:6px;padding:14px 0}
  .row .von{line-height:1.45}
  .row .von::before{content:"Ausgangslage: ";font-size:12px;letter-spacing:.02em;text-transform:uppercase}
  .row .zu{font-size:18px;line-height:1.4}
  .row .zu::before{content:"Mögliche Entwicklung: ";display:block;font-size:12px;letter-spacing:.02em;text-transform:uppercase;color:var(--grey)}

  .pr-bg{bottom:150px}
  .pr-c{padding-top:64px}
  .principle .h{margin-top:16px;line-height:1.12}
  .principle .lead{margin-top:18px}
  .chev4{position:relative;left:auto;top:auto;display:block;width:200px;height:80px;margin:30px 0 0 auto}
  .pr-img{margin-top:18px;border-radius:14px}

  .wege{padding-top:56px;padding-bottom:64px}
  .wege .h-center{margin-top:12px;line-height:1.12}
  .w-cols{grid-template-columns:1fr;margin-top:28px;gap:26px}
  .w-right{padding-left:0}
  .w-right .q{margin-left:0;padding:4px 0 4px 18px}
  .w-right .small{padding-left:21px;max-width:none}
  .wege .script{margin:34px 0 0;line-height:46px}
  .logos{gap:14px;margin-top:60px}
  .case{margin-top:34px}
  .case-track{border-radius:16px}
  .case-slide{padding:24px 20px 28px;min-height:0;text-align:left}
  .case-slide p{margin-top:16px;line-height:1.5}
  .dots{gap:16px;margin-top:18px}

  .ueber{grid-template-columns:1fr;padding-top:60px;gap:26px}
  .u-left{padding-top:46px}
  .signet{left:24px}
  .social a{padding:6px 8px}
  .checks{line-height:1.9;font-size:16px}
  .u-right .h,.koh .h,.hpt .h,.tech .h,.cta .h{margin-top:14px;line-height:1.12}
  .u-right .lead{margin-top:12px}
  .u-right .body{margin-top:16px;line-height:1.5}
  .koh{padding-top:64px}
  .koh .lead{margin-top:14px}
  .tech{min-height:0}
  .tech-bg img{object-position:66% 50%}
  .tech-bg::after{background:linear-gradient(0deg,rgba(0,54,81,.92) 0%,rgba(0,54,81,.82) 55%,rgba(0,54,81,.45) 100%)}
  .tech-c{padding-top:110px;padding-bottom:70px}
  .tech .tp{line-height:1.5;margin-top:16px}.tech .tp + .tp{margin-top:16px}
  .faq{padding-top:60px;padding-bottom:60px}
  .faq-list{margin-top:26px}
  .faq-item.open{margin:0 -8px;padding:0 8px}
  .faq-q{padding:18px 4px 18px 6px;line-height:1.4;font-size:18px}
  .faq-a{padding:0 10px 20px 6px;line-height:1.5}
  .cta{padding-top:52px;padding-bottom:60px}
  .cta .lead{margin-top:16px}
  .cta-btn{margin-top:26px;width:auto;padding:0 32px}
  .f-in{grid-template-columns:1fr;gap:34px;padding-top:50px;padding-bottom:40px;min-height:0}
  .f-left{gap:30px}
  .f-chev{left:auto;right:-40px;top:auto;bottom:-120px;width:150px;height:225px}
  footer{min-height:0}
  /* Ruhige Fassung mobil */
  .logo img{height:15px}
  .hero{padding-bottom:64px}
  .hero-cred{position:relative;bottom:auto;margin-top:26px;font-size:13px}
  .challenge{padding-top:84px;padding-bottom:72px}
  .leit{padding:8px 0 80px}
  .leit-sc{margin-top:28px}
  .leit-t{margin-top:28px;font-size:16px}
  .wege{padding-top:72px;padding-bottom:80px}
  .w-lead{margin-top:14px}
  .wcards{grid-template-columns:1fr;gap:18px;margin-top:32px}
  .wb{padding:20px 20px 24px}
  .wb .wh{font-size:26px;margin-top:8px}
  .wb .tlink{padding-top:18px}
  .pr-band{min-height:440px}
  .pr-bg{bottom:0}
  .pr-c{padding-top:120px;padding-bottom:40px}
  .koh{padding-top:44px;padding-bottom:72px}
  .koh-intro{grid-template-columns:1fr;gap:14px}
  .tri{margin-top:44px}
  .ueber-s{padding-top:0;padding-bottom:72px}
  .ueber{padding-top:60px}
  .u-left{padding-top:0}
  .refs{padding-top:72px;padding-bottom:80px}
  .case-slide{padding:24px 20px 28px}
  .case-slide h3{font-size:22px}
  .cs3{grid-template-columns:1fr;gap:16px;margin-top:20px}
  .voices{margin-top:48px}
  .clients{margin-top:48px}
  .faq{padding-top:72px;padding-bottom:72px}
  .faq-list{margin-top:28px}
  .faq-item.open{margin:0;padding:0}
  .faq-q{font-size:17px}
  .cta{padding-top:72px;padding-bottom:72px}
  .f-mark{right:20px;bottom:24px;width:120px;height:79px}
  .menu svg.big{width:150px;height:99px;right:24px;bottom:40px}
  .topnav{display:none}
  .burger{display:flex}
  .nav,.nav.solid{padding-top:calc(10px + env(safe-area-inset-top,0px));padding-bottom:10px}
  .hero-l{padding-top:84px;padding-bottom:56px;min-height:0;display:block}
  .hl-grid{grid-template-columns:1fr;gap:28px}
  .hl-img{order:-1;aspect-ratio:4/3.4;border-radius:14px}
  .hero-l h1{margin-top:12px}
  .hero-l .hero-lead{font-size:17px;margin-top:14px}
  .hero-l .hero-ctas{margin-top:22px}
  .hero-l .hero-cred{margin-top:22px;font-size:13px}
  .hero-l h1{font-size:36px}
  .hl-img img{object-position:50% 22%}
  .tab .t{font-size:19px}
  .hero-f{display:block;min-height:0;padding:56px 0 48px;background:#ECF1F3}
  .hf-bg{position:relative;inset:auto;height:58svh;min-height:340px;margin-bottom:-110px}
  .hf-bg img{object-position:66% 30%}
  .hf-bg::after{background:linear-gradient(0deg,#ECF1F3 0%,rgba(236,241,243,.85) 22%,rgba(236,241,243,0) 52%)}
  .hero-f h1{font-size:34px;margin-top:10px}
  .hero-f .hero-lead{font-size:17px;margin-top:14px}
  .hero-f .hero-ctas{margin-top:22px}
  .hero-f .hero-cred{margin-top:22px;font-size:13px}
  .band{min-height:460px}
  .band-c{padding-top:160px;padding-bottom:40px}
  .hf-bg{left:auto}
  .hf-bg img{object-position:66% 30%}
  .hf-bg::after{background:linear-gradient(0deg,#ECF1F3 0%,rgba(236,241,243,.85) 22%,rgba(236,241,243,0) 52%)}
  .hf-right .hf-c{padding-left:max(20px, env(safe-area-inset-left,0px))}
  .hf-right .hf-bg img{object-position:22% 30%}
  .hf-right .hf-bg::after{background:linear-gradient(0deg,#EEF0EC 0%,rgba(238,240,236,.85) 22%,rgba(238,240,236,0) 52%)}
  .hero-f.hf-right{background:#EEF0EC}
  .hf-right .hf-c{padding-right:max(20px, env(safe-area-inset-right,0px))}
  .hero-f .hero-lead,.hf-right .hf-c > *{max-width:none}
  .pr-band{min-height:460px}
  .pr-c{padding-top:48px;padding-bottom:0}
  .pr-bg img{object-position:52% 70%}
  .pr-band{min-height:560px}
  .pr-bg img{object-position:46% 100%}
  .pr-band{min-height:520px}
  .pr-bg img{object-position:40% 70%}
  .pr-bg img{object-position:52% 70%}
  .tab .t{font-size:17px}
  .tabs{gap:8px}
  .slider{margin-left:14px;margin-right:14px}
}
/* ===== Variante D: warme Grundfarben ===== */
:root{--bg:#F6F2EC;--bg2:#EDE6DC;--card:#FCFAF6;--hair:rgba(60,45,30,.13);--soft:#4A5A60}
html,body{background:var(--bg)}
.nav,.nav.solid{background:rgba(246,242,236,.96)!important}
.nav.solid{box-shadow:0 1px 0 var(--hair)}
.hero-f.hf-bw,.challenge,.leit,.principle,.ueber-s,.faq,.white,.koh{background:var(--bg)!important}
.wege,.refs,.cta,.tpanel{background:var(--bg2)!important}
.wcard,.case-slide,.kform{background:var(--card)!important}
.fi input,.fi textarea{background:var(--bg)!important;border-color:var(--hair)!important}
.ueber-s{border-top-color:var(--hair)}
.hf-bw .hf-bg::after{background:linear-gradient(0deg,var(--bg) 0%,rgba(246,242,236,0) 22%)!important}
@media (min-width:821px){.hf-bw .hf-bg::after{content:none!important}}
.vcard{background:rgba(252,250,246,.7)}
.menu{background:var(--navy)}
/* etwas wärmere Grautöne für Nebentexte */
.eyebrow,.hero-f .eyebrow,.leit .eyebrow,.cta .eyebrow{color:#6E7A7C}
.col-von li,.ends,.t-foot,.occ{color:#5C6B6F}
/* Variante F: Vollbild an der hellen Wand, Text links auf der Wand */
.hf-wall.hero-f{background:#EDEBEA!important;min-height:min(100svh,calc(980*var(--u)));align-items:center;padding:calc(150*var(--u)) 0 calc(110*var(--u))}
.hf-wall .hf-bg{position:absolute;inset:0}
.hf-wall .hf-bg img{width:100%;height:100%;object-fit:cover;object-position:85% 35%}
.hf-wall .hf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(240,238,236,.7) 0%,rgba(240,238,236,.35) 30%,rgba(240,238,236,0) 48%)}
.hf-wall .hf-c > *{max-width:calc(560*var(--u))}
.hf-wall .hf-c > .eyebrow.ey-cred{max-width:none}
@media (max-width:820px){
  .hf-wall.hero-f{display:block;min-height:0;padding:56px 0 48px;background:#EFEDEB!important}
  .hf-wall .hf-bg{position:relative;inset:auto;height:56svh;min-height:330px;margin-bottom:-80px}
  .hf-wall .hf-bg img{object-position:72% 30%}
  .hf-wall .hf-bg::after{background:linear-gradient(0deg,#EFEDEB 0%,rgba(239,237,235,.8) 20%,rgba(239,237,235,0) 45%)}
  .hf-wall .hf-c > *{max-width:none}
}
@media (min-width:821px) and (max-width:1200px){.hf-wall .hf-c > *:not(.ey-cred){max-width:44vw}.hf-wall .hf-bg{left:38%}.hf-wall .hf-bg img{object-position:80% 35%}.hf-wall .hf-bg{-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 18%);mask-image:linear-gradient(90deg,transparent 0%,#000 18%)}.hf-wall .hf-bg::after{content:none}}
@media (min-width:1201px){.hf-wall .hero-lead{max-width:calc(500*var(--u))!important}}
/* Variante G: Regler */
.stage{position:relative}
.axis{margin:0 0 6px;font-size:max(12px,calc(16*var(--u)));letter-spacing:.06em;text-transform:uppercase;color:#7A8A8F;display:flex;align-items:center;gap:8px}
.axis::before{content:"";width:0;height:0;border-left:5px solid transparent;border-right:5px solid transparent;border-bottom:8px solid var(--green)}
.field path.ref{stroke:#9AA9AD;stroke-dasharray:2 8}
.how{margin-top:calc(34*var(--u));padding:calc(20*var(--u)) 0 calc(20*var(--u)) calc(24*var(--u));border-left:3px solid var(--green);color:var(--navy)}
.how ul{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px 48px}
.how li{position:relative;padding:4px 0 4px 22px;font-size:max(16px,calc(22*var(--u)));line-height:1.4}
.how li::before{content:"";position:absolute;left:0;top:calc(.7em + 1px);width:10px;height:2px;background:var(--green)}
@media (max-width:820px){.how ul{grid-template-columns:1fr}}
.how b{display:block;font-family:var(--serif);font-weight:500;font-size:max(13px,calc(17*var(--u)));letter-spacing:.06em;text-transform:uppercase;color:#003651;margin-bottom:6px}
.ends span#endR{text-align:right}
@media (max-width:820px){.ends{gap:16px}.ends span{max-width:48%}.how{padding-left:16px}}

.koh-note a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:5px}
.stage .endmark{position:absolute;left:0;top:0;width:clamp(46px,calc(78*var(--u)),78px);height:auto;aspect-ratio:152/104;fill:var(--green);opacity:0;pointer-events:none;transform-origin:0 50%}

/* Leitfrage als Typo mit Kielwasser */
.leit2{padding:calc(110*var(--u)) 0 calc(150*var(--u));overflow:hidden}
.leit-q{font-family:var(--serif);font-weight:600;font-size:clamp(30px,calc(112*var(--u)),120px);line-height:1.04;letter-spacing:-.018em;color:var(--navy);margin:calc(34*var(--u)) 0 0}
.leit-q>span{display:block}
.leit-q em{font-style:normal}
.wake{position:relative;height:clamp(84px,calc(150*var(--u)),150px);margin-top:calc(26*var(--u))}
.wake-l{position:absolute;top:0;height:100%;overflow:visible}
.wake-l path{fill:none;stroke:var(--navy);stroke-width:1.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wake-m{position:absolute;top:0;left:0;width:clamp(44px,calc(74*var(--u)),74px);aspect-ratio:152/104;fill:var(--green);opacity:0;transform-origin:0 50%}
.leit2 .leit-t{margin-top:calc(40*var(--u))}
@media (max-width:820px){.leit-q{font-size:clamp(28px,8.4vw,40px);line-height:1.08}}
.leit-q .reg{font-size:max(10px,.24em);font-weight:400;vertical-align:super;margin-left:.06em;letter-spacing:0;color:var(--navy);position:relative;top:-.9em}
.koh-p2{margin-top:1em}
.hero-ctas .hero-tlink{align-self:center;white-space:nowrap;color:var(--navy)!important;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:6px}



.ph-photo{background:none!important;display:block!important;min-height:0!important;overflow:hidden}
.ph-photo img{display:block;width:100%;height:auto}
.sub-ico{display:block;width:clamp(64px,calc(92*var(--u)),92px);height:auto;margin:0 0 6px -6px;opacity:.85}
.sub-ico .ln path{fill:none;stroke:var(--navy);stroke-width:4;opacity:.55}
.sub-ico .gm path,.sub-ico .gb path{fill:none;stroke:var(--green);stroke-width:26}
.sub-ico .gm path{stroke-width:46}
.sub-ico .gf path{fill:var(--green)}
/* warm */
body{background:var(--bg)}
.sub-hero,.mint{background:var(--bg2)!important}
.nav,.nav.solid{background:rgba(246,242,236,.96)!important}
.fmt ol li,.sec.mint .fmt ol li,.case-one,.others a,.ph-img span{background:var(--card)!important}
.sec{background:var(--bg)}
/* Unterseiten */
.nav.solid,.nav{background:var(--white)}
.nav{padding-top:calc(calc(18*var(--u)) + env(safe-area-inset-top,0px));padding-bottom:calc(18*var(--u))}
.sub-hero{position:relative;background:var(--paper);color:var(--navy);padding-top:calc(220*var(--u));padding-bottom:calc(100*var(--u));overflow:hidden}
.sub-hero .bg{position:absolute;top:calc(200*var(--u));right:max(calc(150*var(--u)),calc(50% - 600px));bottom:calc(110*var(--u));width:min(36%,calc(520*var(--u)));border-radius:calc(20*var(--u));overflow:hidden}
.facts{max-width:min(56%,calc(800*var(--u)));grid-template-columns:repeat(2,1fr)!important;row-gap:calc(10*var(--u))}
.sub-hero .bg img{width:100%;height:100%;object-fit:cover}
.sub-hero .bg::after{content:none}
.sub-hero .c{position:relative;max-width:min(58%,calc(660*var(--u)))}
.sub-hero h1{font-size:max(32px,calc(64*var(--u)))!important}
.crumb{font-size:var(--fs-small);color:#8FA6AF;margin-bottom:calc(26*var(--u))}
.crumb a{color:#8FA6AF;text-underline-offset:4px}
.crumb a:hover{color:var(--green)}
.sub-hero .eyebrow{color:#003651}
.sub-hero h1{font-size:var(--fs-h);line-height:calc(95*var(--u));margin-top:calc(24*var(--u));color:var(--navy);line-height:1.1}
.sub-hero .lead{color:#4B6469;margin-top:calc(28*var(--u));max-width:calc(640*var(--u))}
.sub-hero .hero-video{color:var(--navy)}.sub-hero .hero-video circle{stroke:var(--navy)}.sub-hero .hero-video path{fill:var(--navy)}
.sub-hero .acts{display:flex;align-items:center;gap:calc(26*var(--u));flex-wrap:wrap;margin-top:calc(40*var(--u))}
.facts{position:relative;display:grid;grid-template-columns:repeat(4,1fr);margin-top:calc(80*var(--u));border-top:1px solid rgba(0,54,81,.14)}
.facts div{padding:calc(22*var(--u)) calc(24*var(--u)) 0 0}
.facts b{display:block;font-family:var(--serif);font-weight:400;font-size:max(22px,calc(36*var(--u)));line-height:1.15;color:var(--navy)}
.facts span{display:block;margin-top:calc(6*var(--u));font-size:var(--fs-small);color:#4B6469;line-height:1.4}
.sec{padding-top:calc(120*var(--u));padding-bottom:calc(120*var(--u))}
.sec.mint{background:var(--paper)}
.sec-h{display:grid;grid-template-columns:1fr 1fr;gap:20px calc(80*var(--u));align-items:end;margin-bottom:calc(56*var(--u))}
.sec-h h2{font-size:max(30px,calc(60*var(--u)));line-height:1.12}
.sec-h p{max-width:calc(560*var(--u))}
.items{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(44*var(--u)) calc(70*var(--u))}
.items.three{grid-template-columns:repeat(3,1fr)}
.item{border-top:calc(3*var(--u)) solid var(--green);padding-top:calc(20*var(--u))}
.item h3{font-size:max(22px,calc(34*var(--u)));line-height:1.15}
.item p{margin-top:calc(12*var(--u));line-height:1.5}
.item .k{font-size:max(12px,calc(18*var(--u)));letter-spacing:.04em;text-transform:uppercase;color:#4B6469;margin-bottom:calc(8*var(--u))}
.fmt{display:grid;grid-template-columns:calc(330*var(--u)) 1fr;gap:20px calc(70*var(--u));padding:calc(44*var(--u)) 0;border-top:1px solid #CFE3DA}
.fmt:last-child{border-bottom:1px solid #CFE3DA}
.fmt .meta{display:flex;flex-direction:column;gap:calc(8*var(--u))}
.fmt .meta .lab{font-size:max(12px,calc(18*var(--u)));letter-spacing:.04em;text-transform:uppercase;color:#4B6469}
.fmt .meta b{font-family:var(--serif);font-weight:400;font-size:max(22px,calc(34*var(--u)));line-height:1.15}
.fmt .meta span{font-size:var(--fs-small);color:#4B6469;line-height:1.45}
.fmt h3{font-size:max(22px,calc(38*var(--u)));line-height:1.15}
.fmt p{margin-top:calc(12*var(--u));line-height:1.5;max-width:calc(720*var(--u))}
.fmt ol{margin:calc(22*var(--u)) 0 0;padding:0;list-style:none;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(16*var(--u))}
.fmt ol li{counter-increment:s;background:var(--white);border-radius:calc(16*var(--u));padding:calc(18*var(--u)) calc(18*var(--u)) calc(20*var(--u));font-size:var(--fs-small);line-height:1.45}
.sec.mint .fmt ol li{background:var(--white)}
.fmt ol li::before{content:counter(s);display:block;font-family:var(--serif);font-size:max(22px,calc(34*var(--u)));color:var(--green);line-height:1;margin-bottom:calc(8*var(--u));-webkit-text-stroke:.4px var(--navy)}
.fmt ol li b{display:block;font-weight:400;font-size:max(15px,calc(21*var(--u)));margin-bottom:calc(4*var(--u))}
.fmt .more{margin-top:calc(16*var(--u));font-size:var(--fs-small)}
.fmt .more a{color:var(--navy);text-underline-offset:4px}
.tlist{list-style:none;margin:0;padding:0;border-top:1px solid rgba(255,255,255,.18)}
.ph-img{position:relative;border-radius:calc(20*var(--u));min-height:calc(420*var(--u));background:repeating-linear-gradient(135deg,#DCEFE7 0 22px,#D2E8DF 22px 44px);display:flex;align-items:flex-end;margin-top:calc(70*var(--u))}
.ph-img span{margin:18px;background:var(--white);border:1px dashed #9FB2BA;border-radius:10px;padding:10px 14px;font-size:14px;line-height:1.4;color:#4B6469;max-width:460px}
.ph-img span b{display:block;color:var(--navy);font-weight:400}
.case-one .ck{display:block;font-weight:400;font-size:max(12px,calc(16*var(--u)));letter-spacing:.06em;text-transform:uppercase;color:#8FA6AF;margin:calc(18*var(--u)) 0 calc(4*var(--u))}
.case-one{background:var(--white);box-shadow:0 0 0 1px rgba(0,54,81,.1);border-radius:calc(30*var(--u));padding:calc(44*var(--u)) calc(60*var(--u)) calc(50*var(--u));margin-top:calc(10*var(--u))}
.case-one .meta{font-size:max(12px,calc(18*var(--u)));letter-spacing:.04em;text-transform:uppercase;margin-bottom:calc(12*var(--u))}
.case-one h3{font-family:var(--sans);font-weight:300;font-size:var(--fs-title);line-height:1.2}
.case-one p{margin-top:calc(24*var(--u));line-height:1.5}
.case-one u{text-underline-offset:4px}
.case-one + .case-one{margin-top:calc(24*var(--u))}
.steps{list-style:none;margin:0;padding:0;counter-reset:s;display:grid;grid-template-columns:repeat(4,1fr);gap:calc(24*var(--u))}
.steps li{counter-increment:s;border-top:calc(3*var(--u)) solid var(--green);padding-top:calc(18*var(--u))}
.steps li::before{content:counter(s);display:block;font-family:var(--serif);font-size:max(28px,calc(48*var(--u)));line-height:1;color:var(--navy)}
.steps li b{display:block;font-weight:400;font-size:max(17px,calc(24*var(--u)));margin-top:calc(12*var(--u))}
.steps li span{display:block;margin-top:calc(6*var(--u));font-size:var(--fs-small);line-height:1.45;color:#4B6469}
.note-k{margin-top:calc(30*var(--u));font-size:var(--fs-small);color:#4B6469;max-width:calc(760*var(--u))}
.note-k a{color:var(--navy);text-underline-offset:4px}
.voices.two{grid-template-columns:repeat(2,1fr)}
.voices.one{grid-template-columns:1fr;max-width:calc(900*var(--u))}
.sec .voices{margin-top:0}
.others{display:grid;grid-template-columns:repeat(2,1fr);gap:calc(16*var(--u));margin-top:calc(40*var(--u))}
.others a{display:block;background:var(--white);color:var(--navy);box-shadow:0 0 0 1px rgba(0,54,81,.1);text-decoration:none;border-radius:calc(20*var(--u));padding:calc(30*var(--u)) calc(34*var(--u))}
.others a .lab{font-size:max(12px,calc(18*var(--u)));letter-spacing:.04em;text-transform:uppercase;color:#003651}
.others a b{display:block;font-family:var(--serif);font-weight:400;font-size:max(22px,calc(38*var(--u)));line-height:1.15;margin-top:calc(8*var(--u))}
.others a:hover{box-shadow:0 0 0 3px var(--green)}
@media (max-width:820px){
  .sub-hero{padding-top:110px;padding-bottom:50px}
  .sub-hero .bg{position:relative;width:auto;height:260px;margin:-110px calc(-1 * max(20px, env(safe-area-inset-left,0px))) 30px;inset:auto}
  .sub-hero .bg{margin:-30px 20px 26px;border-radius:14px}
  .facts{max-width:none}
  .sub-hero .c{max-width:none}
  .sub-hero h1{line-height:1.12;margin-top:12px}
  .facts{grid-template-columns:1fr 1fr;gap:0 16px;margin-top:40px}
  .facts div{padding:16px 0 0}
  .sec{padding-top:60px;padding-bottom:60px}
  .sec-h{grid-template-columns:1fr;margin-bottom:28px}
  .items,.items.three{grid-template-columns:1fr;gap:26px}
  .fmt{grid-template-columns:1fr;gap:12px;padding:26px 0}
  .fmt ol{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr;gap:20px}
  .case-one{padding:22px 18px 26px;border-radius:16px}
  .voices.two{grid-template-columns:1fr}
  .others{grid-template-columns:1fr}
  .ph-img{min-height:220px;margin-top:36px}
}


/* Test G2: grüner Kontaktbereich als Schlusspunkt */
.cta{background:#E4F8EE!important}
.cta .eyebrow{color:var(--navy)!important;opacity:.75}
.cta .h,.cta h2{color:var(--navy)!important}
.cta .lead{color:var(--navy)!important}
.cta .dot{color:var(--green)!important;-webkit-text-stroke:.5px rgba(0,54,81,.12)!important}
.cta .kform{box-shadow:0 20px 50px rgba(0,54,81,.12)}
.cta-btn:hover{background:#00263A!important;color:#fff!important}
.cta p:not(.lead):not(.eyebrow),.cta p a{color:var(--navy)!important}

/* Desktop kompakter */
@media (min-width:821px){:root{--u:min(1px, calc(100vw / 1500), calc(100vh / 1000))}}
@media (min-width:821px){
#herausforderung{padding-top:calc(99*var(--u))!important}
#herausforderung{padding-bottom:calc(93*var(--u))!important}
#herausforderung h2{font-size:calc(68*var(--u))!important}
#leitfrage{padding-top:calc(68*var(--u))!important}
#leitfrage{padding-bottom:calc(93*var(--u))!important}
#wege{padding-top:calc(93*var(--u))!important}
#wege{padding-bottom:calc(99*var(--u))!important}
#wege h2{font-size:calc(68*var(--u))!important}
#kohaerenz h2{font-size:calc(68*var(--u))!important}
#ueber{padding-bottom:calc(99*var(--u))!important}
#ueber h2{font-size:calc(68*var(--u))!important}
#referenzen{padding-top:calc(93*var(--u))!important}
#referenzen{padding-bottom:calc(99*var(--u))!important}
#referenzen h2{font-size:calc(68*var(--u))!important}
#faq{padding-top:calc(93*var(--u))!important}
#faq{padding-bottom:calc(93*var(--u))!important}
#faq h2{font-size:calc(68*var(--u))!important}
section.trust2{padding-top:calc(93*var(--u))!important}
section.trust2{padding-bottom:calc(87*var(--u))!important}
section.trust2 h2{font-size:calc(54*var(--u))!important}
#kontakt{padding-top:calc(93*var(--u))!important}
#kontakt{padding-bottom:calc(93*var(--u))!important}
#kontakt h2{font-size:calc(68*var(--u))!important}
section.sec.mint{padding-top:calc(74*var(--u))!important}
section.sec.mint{padding-bottom:calc(74*var(--u))!important}
section.sec.mint h2{font-size:calc(51*var(--u))!important}
section.sec{padding-top:calc(74*var(--u))!important}
section.sec{padding-bottom:calc(74*var(--u))!important}
section.sec h2{font-size:calc(51*var(--u))!important}
.leit-q{font-size:clamp(30px,calc(96*var(--u)),104px)!important}
#kohaerenz .wrap.koh{padding-top:calc(70*var(--u))!important;padding-bottom:calc(90*var(--u))!important}
#kohaerenz #tri{margin-top:calc(60*var(--u))!important}
#kohaerenz .koh-formats{margin-top:calc(44*var(--u))!important}
#kohaerenz .pr-c{padding-top:calc(80*var(--u))!important}
#ueber .wrap.ueber{padding-top:calc(70*var(--u))!important}
#wege .wcards{margin-top:calc(50*var(--u))!important}
#referenzen .voices{margin-top:calc(70*var(--u))!important}
#referenzen div.case{margin-top:calc(44*var(--u))!important}
section.trust2 .logos3{margin-top:calc(60*var(--u))!important;row-gap:calc(44*var(--u))!important}
section.trust2 .logos-more{margin-top:calc(50*var(--u))!important}
section.band .band-c{padding-top:calc(180*var(--u))!important}
#herausforderung #h-challenge{margin-top:calc(50*var(--u))!important}
}

/* Farbsprache: Navy-Moment auch auf den Unterseiten */
.sec-navy{color:var(--white)}
.sec-navy>.wrap{box-sizing:border-box;width:calc(min(100%, calc(1500*var(--u))) - 2*var(--gut));background:var(--navy);border-radius:calc(30*var(--u));padding:calc(56*var(--u)) calc(60*var(--u)) calc(60*var(--u))}
@media (max-width:820px){.sec-navy>.wrap{border-radius:16px;padding:28px 20px 30px;margin:0 16px;width:auto}}
.sec-navy h2{color:var(--white)!important}
.sec-navy .sec-h p{color:rgba(255,255,255,.72)!important}
.sec-navy .steps li::before{color:var(--green)!important}
.sec-navy .steps li b{color:var(--white);font-weight:500}
.sec-navy .steps li span{color:rgba(255,255,255,.72)!important}

/* Unterseiten: Bilder auf dem Desktop zurücknehmen */
@media (min-width:821px){
.sub-hero .bg{bottom:auto!important;height:min(64vh,calc(600*var(--u)))!important;width:min(32%,calc(460*var(--u)))!important}
.ph-photo{aspect-ratio:2.75/1;max-height:calc(420*var(--u))}
.ph-photo img{height:100%!important;object-fit:cover;object-position:50% 42%}
}

/* Unterseiten: Einstieg kompakt, Eckdaten im ersten Blick */
@media (min-width:821px){
.sub-hero{padding-top:calc(140*var(--u))!important;padding-bottom:calc(56*var(--u))!important}
.sub-hero .crumb{margin-bottom:calc(14*var(--u))}
.sub-hero .sub-ico{height:calc(34*var(--u));width:auto}
.sub-hero h1{font-size:max(30px,calc(52*var(--u)))!important;margin-top:calc(12*var(--u))!important}
.sub-hero .lead{font-size:max(17px,calc(24*var(--u)))!important;line-height:1.5;margin-top:calc(16*var(--u))!important;max-width:calc(620*var(--u))!important}
.sub-hero .acts{margin-top:calc(26*var(--u))}
.sub-hero .facts{grid-template-columns:repeat(4,1fr)!important;width:min(60%,calc(720*var(--u)));max-width:none!important;column-gap:calc(18*var(--u))!important;margin-top:calc(40*var(--u))!important}
.sub-hero .facts b{font-size:max(18px,calc(26*var(--u)))!important}
.sub-hero .bg{top:calc(140*var(--u))!important;bottom:calc(56*var(--u))!important;height:auto!important;width:min(32%,calc(440*var(--u)))!important}
}

/* Rechtstexte */
.legal-hero{padding-bottom:calc(30*var(--u))!important}
.legal-hero .c{max-width:min(100%,calc(820*var(--u)))!important}
.legal{padding-top:calc(30*var(--u))!important;background:var(--bg)!important}
.legal-in{display:block!important}
.legal-in>*{max-width:calc(860*var(--u))}
section.sec.legal h2{font-size:max(20px,calc(30*var(--u)))!important;line-height:1.25;margin:calc(46*var(--u)) 0 calc(12*var(--u));color:var(--navy)}
.legal h2:first-child{margin-top:0}
.legal p{font-size:max(16px,calc(20*var(--u)));line-height:1.65;color:#33505E;margin:0 0 calc(14*var(--u))}
.legal a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:4px;word-break:break-word}
.legal .legal-date{margin-top:calc(40*var(--u));color:#5C6B6F}

/* Einwilligung, Video, Formular-Hinweis */
.ak-consent{position:fixed;left:20px;bottom:20px;z-index:9999;max-width:440px;background:#FCFAF6;color:var(--navy);border-radius:16px;padding:22px 22px 18px;box-shadow:0 18px 50px rgba(0,38,58,.22);font-size:15px;line-height:1.5}
.ak-consent[hidden]{display:none}
.ak-consent b{display:block;font-size:17px;margin-bottom:6px}
.ak-consent p{margin:0 0 14px;color:#33505E}
.ak-consent a{color:var(--navy);text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:3px}
.ak-consent .row{display:flex;gap:10px;flex-wrap:wrap}
.ak-consent button{flex:1 1 140px;font:inherit;font-weight:500;padding:11px 16px;border-radius:999px;cursor:pointer;border:1.5px solid var(--navy)}
.ak-consent .yes{background:var(--navy);color:#fff}
.ak-consent .no{background:transparent;color:var(--navy)}
.ak-consent button:focus-visible{outline:2px solid var(--green);outline-offset:3px}
@media (max-width:820px){.ak-consent{left:12px;right:12px;bottom:12px;max-width:none}}
.ak-video{position:fixed;inset:0;z-index:9998;background:rgba(0,26,40,.82);display:flex;align-items:center;justify-content:center;padding:20px}
.ak-video[hidden]{display:none}
.ak-video .box{position:relative;width:min(100%,960px);aspect-ratio:16/9;background:var(--navy);border-radius:14px;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff}
.ak-video .box iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.ak-video .note{max-width:520px;padding:24px;font-size:15px;line-height:1.55}
.ak-video .note p{margin:0 0 16px;color:rgba(255,255,255,.8)}
.ak-video .note a{color:#fff;text-decoration:underline;text-decoration-color:var(--green)}
.ak-video .play{font:inherit;font-weight:500;background:var(--green);color:var(--navy);border:0;border-radius:999px;padding:12px 22px;cursor:pointer}
.ak-video .close{position:absolute;top:-46px;right:0;background:none;border:0;color:#fff;font:inherit;font-size:15px;cursor:pointer;padding:8px}
.kform .hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
.kform .privacy{margin-top:12px;font-size:13px;line-height:1.5;color:#5C6B6F}
.kform .privacy a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* Footer-Rechtslinks luftiger */
.f-legal a{line-height:1.45!important;padding:3px 0}
@media (max-width:820px){.f-legal{margin-top:22px}.f-legal a{padding:7px 0;font-size:14px}}

/* Footer kompakt: drei Spalten */
footer{min-height:0!important}
footer .f-grid{display:grid;grid-template-columns:1.5fr 1.1fr .9fr .9fr;gap:calc(48*var(--u));padding-top:calc(80*var(--u));padding-bottom:calc(30*var(--u))}
footer .f-brand .logo img{height:calc(24*var(--u));min-height:18px;width:auto;display:block}
footer .f-tag{margin-top:calc(22*var(--u));font-size:max(15px,calc(19*var(--u)));line-height:1.55;color:rgba(255,255,255,.72);max-width:26em}
footer .f-col h3{margin:0 0 calc(14*var(--u));font-size:max(12px,calc(14*var(--u)));font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.55)}
footer .f-col a{display:block;color:var(--white);text-decoration:none;font-size:max(15px,calc(19*var(--u)));line-height:1.35;padding:calc(4*var(--u)) 0}
footer .f-col a:hover{color:var(--green)}
footer .f-bottom{position:relative;display:flex;justify-content:space-between;align-items:center;padding-top:calc(22*var(--u));padding-bottom:calc(30*var(--u));font-size:max(13px,calc(15*var(--u)));color:rgba(255,255,255,.5)}
footer .f-bottom::before{content:"";position:absolute;top:0;left:max(var(--gut), env(safe-area-inset-left,0px));right:max(var(--gut), env(safe-area-inset-right,0px));height:1px;background:rgba(255,255,255,.14)}
footer .f-bottom svg{width:calc(54*var(--u));min-width:40px;height:auto;aspect-ratio:2000/1316}
footer .f-bottom svg use{fill:var(--green)}
@media (max-width:820px){
 footer .f-grid{grid-template-columns:1fr 1fr;gap:28px 20px;padding-top:44px;padding-bottom:22px}
 footer .f-brand{grid-column:1/-1}
 footer .f-brand .logo img{height:13px!important;min-height:0}
 footer .f-tag{margin-top:12px;font-size:14px}
 footer .f-col a{font-size:15px;padding:3px 0}
 footer .f-col.f-legal2{grid-column:2}
 footer .f-col.f-direct{grid-column:2;grid-row:2}
 footer .f-col.f-over{grid-row:2 / span 2}
}

/* Farbsprache: nur Navy und Neongrün */
.topnav a:not(.pill):hover{color:var(--navy)!important;text-decoration:underline;text-decoration-color:var(--green);text-decoration-thickness:2px;text-underline-offset:7px}
@media (max-width:820px){
 #ueber .wrap.ueber{display:flex!important;flex-direction:column}
 #ueber .u-left,#ueber .u-right{display:contents}
 #ueber .u-right .eyebrow{order:1}
 #ueber #h-ueber{order:2;margin-bottom:18px}
 #ueber .u-photo{order:3}
 #ueber .checks{order:4}
 #ueber .social{order:5}
 #ueber .u-right>*:not(.eyebrow):not(#h-ueber){order:6}
}