@font-face{font-family:'Spartan';src:url('assets/fonts/Spartan-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Spartan';src:url('assets/fonts/Spartan-Medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Spartan';src:url('assets/fonts/Spartan-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'Spartan';src:url('assets/fonts/Spartan-Bold.ttf') format('truetype');font-weight:700;font-style:normal;font-display:swap}

:root{
  --acc:#00A695;
  --acc-dunkel:#008a7c;
  --acc-text:#007a6e;
  --acc-hell:#2EE3C9;
  --ink:#0c0d0e;
  --ink-2:#4b5157;
  --ink-3:#7a8188;
  --papier:#ffffff;
  --grau:#f2f4f3;
  --grau-2:#e3e8e6;
  --nacht:#0b0c0d;
  --nacht-2:#15181a;
  --nacht-linie:rgba(255,255,255,.12);
  --hell-2:rgba(255,255,255,.72);

  --font:'Spartan', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  --wrap:1280px;
  --rand:clamp(16px, 4vw, 40px);
  --kopf-h:76px;
  --sek:clamp(88px, 10vw, 150px);
  --kopf-abstand:clamp(40px, 5vw, 72px);
  --radius:24px;
  --radius-gross:32px;
  --schatten:0 30px 80px -30px rgba(12,13,14,.35), 0 12px 30px -18px rgba(12,13,14,.25);
  --ease:cubic-bezier(.2,.7,.1,1);
}
@media (max-width:979px){
  :root{ --kopf-h:60px; }
}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--kopf-h) + 8px)}
body{margin:0;background:var(--papier);color:var(--ink);font-family:var(--font);font-size:18px;font-weight:500;line-height:1.8;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
h1,h2,h3,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
button{font:inherit;color:inherit;cursor:pointer}
[hidden]{display:none!important}
.wrap{width:100%;max-width:calc(var(--wrap) + 2 * var(--rand));margin-inline:auto;padding-inline:var(--rand)}
:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:6px}

.sprung{position:absolute;left:16px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:12px 18px;border-radius:10px;text-decoration:none;font-weight:600}
.sprung:focus{top:12px}

.duenn,.fett{display:block}
.duenn{font-weight:400}
.fett{font-weight:700}
.h2{font-size:clamp(2.2rem, 4.65vw, 4.4rem);line-height:1.1;letter-spacing:-.057em;text-wrap:balance}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.8px;line-height:1.25;text-transform:uppercase;color:#9a9a9a;margin-bottom:20px}
.eyebrow--hell{color:#9a9a9a}
.lead{font-size:18px;color:var(--ink);max-width:36em;margin-top:22px;text-wrap:pretty}
.lead--hell{color:var(--hell-2)}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;font-weight:500;font-size:16px;letter-spacing:1px;line-height:1;padding:16px 26px 14px;border-radius:999px;text-decoration:none;border:1.5px solid transparent;transition:background .25s,color .25s,border-color .25s,transform .35s var(--ease),box-shadow .3s;will-change:transform;white-space:nowrap}
.knopf--akzent{background:var(--acc);color:#fff;box-shadow:0 10px 26px -12px rgba(0,166,149,.7)}
.knopf--akzent:hover{background:var(--acc-dunkel)}
.knopf--rand{border-color:var(--ink);color:var(--ink);background:transparent}
.knopf--rand:hover{background:var(--ink);color:#fff}
.knopf--dunkel{background:var(--ink);color:#fff}
.knopf--dunkel:hover{background:var(--acc)}
.knopf--hell{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}
.knopf--hell:hover{background:#fff;color:var(--ink);border-color:#fff}
.knopf--gross{padding:20px 34px 18px;font-size:16px}
.knopf--klein{padding:12px 20px 10px;font-size:15.2px;letter-spacing:.5px}
.knopf--voll{width:100%}

.pfeillink{display:inline-flex;gap:8px;align-items:center;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:4px;transition:gap .3s var(--ease),color .2s}
.pfeillink:hover{gap:14px;color:var(--acc-hell)}

.kopf{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:saturate(1.6) blur(14px);-webkit-backdrop-filter:saturate(1.6) blur(14px);transition:box-shadow .3s}
.kopf.ist-gescrollt{box-shadow:0 1px 0 var(--grau-2), 0 8px 30px -22px rgba(0,0,0,.35)}
.kopf__leiste{display:flex;align-items:center;gap:32px;height:76px}
.marke{font-weight:700;font-size:32px;letter-spacing:-2px;text-decoration:none;color:var(--ink);line-height:1;padding-top:4px;flex-shrink:0}
.marke__punkt{color:inherit}
.kopf__nav{display:flex;gap:30px;margin-left:auto}
.kopf__nav a{text-decoration:none;font-weight:500;font-size:15.5px;color:var(--ink-2);padding-top:3px;position:relative;transition:color .2s}
.kopf__nav a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--acc);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
.kopf__nav a:hover{color:var(--ink)}
.kopf__nav a:hover::after{transform:scaleX(1)}
.kopf__rechts{display:flex;align-items:center;gap:22px}
.kopf__tel{display:inline-flex;align-items:center;gap:8px;text-decoration:none;font-weight:600;font-size:15.5px;padding-top:3px}
.kopf__tel svg{width:17px;height:17px;fill:none;stroke:var(--acc);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-top:-3px}
.kopf__burger,.kopf__nav-fuss{display:none}
.knopf .kurz{display:none}
.ampel{display:flex;gap:7px}

@media (max-width:1180px){
  .kopf__tel span{display:none}
  .kopf__tel{width:44px;height:44px;justify-content:center;border:1.5px solid var(--grau-2);border-radius:50%;padding:0}
  .kopf__tel svg{margin:0}
}
@media (max-width:979px){
  .kopf__leiste{height:60px;gap:12px}
  .kopf__rechts{margin-left:auto;gap:10px}
  .marke{font-size:26px;letter-spacing:-1.5px}
  .kopf__burger{position:relative;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:var(--ink);color:#fff;flex:0 0 auto}
  .kopf__burger span,.kopf__burger span::before,.kopf__burger span::after{display:block;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),background .2s}
  .kopf__burger span{position:relative}
  .kopf__burger span::before,.kopf__burger span::after{content:"";position:absolute;left:0}
  .kopf__burger span::before{transform:translateY(-6px)}
  .kopf__burger span::after{transform:translateY(6px)}
  .kopf__burger[aria-expanded="true"] span{background:transparent}
  .kopf__burger[aria-expanded="true"] span::before{transform:rotate(45deg)}
  .kopf__burger[aria-expanded="true"] span::after{transform:rotate(-45deg)}
  .kopf__nav{display:none;position:absolute;left:0;right:0;top:100%;height:calc(100dvh - var(--kopf-h));flex-direction:column;gap:0;margin:0;padding:18px var(--rand) 40px;background:#fff;border-top:1px solid var(--grau-2);overflow-y:auto;overscroll-behavior:contain;box-shadow:0 50vh 0 0 #fff}
  body.menu-open .kopf__nav{display:flex;animation:menue-ein .35s var(--ease) both}
  .kopf__nav a{font-size:28px;font-weight:600;letter-spacing:-1px;line-height:1.3;color:var(--ink);padding:14px 0 11px;border-bottom:1px solid var(--grau-2)}
  .kopf__nav a::after{display:none}
  .kopf__nav a[aria-current="page"]{color:var(--acc-text)}
  .kopf__nav-fuss{display:grid;gap:4px;margin-top:28px}
  .kopf__nav .kopf__nav-fuss a{font-size:17px;font-weight:600;letter-spacing:0;padding:6px 0;border:0;color:var(--ink-2)}
  body.menu-open{overflow:hidden;padding-top:var(--kopf-h)}
  body.menu-open .kopf{position:fixed;top:0;left:0;right:0;box-shadow:none}
  body.menu-open .schwebe{opacity:0;pointer-events:none}
}
@keyframes menue-ein{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (max-width:380px){
  .kopf__tel{display:none}
}
@media (max-width:420px){
  .knopf--gross{padding:17px 20px 15px;font-size:16px}
  .kopf__rechts .knopf--klein{padding:11px 14px 9px;font-size:14px}
  .knopf .lang{display:none}
  .knopf .kurz{display:inline}
}

.start{position:relative;overflow:hidden;background:var(--papier)}
.start__glanz{position:absolute;inset:0;pointer-events:none}
.start__glanz::after{content:"";position:absolute;inset:0;
  background-image:radial-gradient(rgba(12,13,14,.10) 1px, transparent 1.2px);background-size:26px 26px;
  -webkit-mask-image:radial-gradient(60% 70% at 78% 40%, #000 0%, transparent 72%);mask-image:radial-gradient(60% 70% at 78% 40%, #000 0%, transparent 72%)}
.start__raster{position:relative;display:grid;grid-template-columns:minmax(0, 1fr);gap:56px;padding-block:44px 72px}
.start__h1{font-size:clamp(1.6rem, 8.6vw, 3.4rem);line-height:1.1;letter-spacing:-.05em;text-wrap:balance}
.start__h1 .fett{white-space:nowrap}
.start__lead{font-size:18px;color:var(--ink);margin-top:22px;max-width:34em;text-wrap:pretty}

.haken{margin-top:24px;display:grid;gap:11px}
.haken li{position:relative;padding-left:34px;font-weight:500;font-size:18px;line-height:1.5}
.haken li::before{content:"";position:absolute;left:0;top:-1px;width:22px;height:22px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/13px no-repeat}
@media (max-width:979px){
  .start__knoepfe [data-rueckruf]{display:none}
  .haken{gap:9px;margin-top:20px}
  .haken li{font-size:clamp(14px, 3.8vw, 18px);padding-left:30px}
  .haken li::before{width:20px;height:20px;top:-2px;background-size:12px}
}

.start__knoepfe{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.vertrauen{display:flex;flex-wrap:wrap;gap:14px 26px;align-items:center;margin-top:30px;padding-top:24px;border-top:1px solid var(--grau-2)}
.vertrauen__google{display:flex;align-items:center;gap:12px;line-height:1.3}
.vertrauen strong{display:block;font-size:15px;font-weight:700}
.vertrauen span{font-size:14px;color:var(--ink-3)}
.vertrauen__pruefung{display:flex;align-items:center;gap:12px;line-height:1.3}
.vertrauen__ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:rgba(0,166,149,.12);color:var(--acc-text);flex:0 0 auto}
.vertrauen__ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sterne{color:#f5b400;letter-spacing:2px;font-size:17px;line-height:1}
.vertrauen .sterne{font-size:15px;letter-spacing:1px;color:#f5b400}

.dias{position:relative}
.dias__buehne{position:relative;transform-style:preserve-3d;transition:transform .9s var(--ease);margin-right:8%;margin-bottom:9%}
.dias__browser{position:relative;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--schatten), 0 0 0 1px rgba(12,13,14,.08)}
.dias__leiste,.projekt__leiste{display:flex;align-items:center;gap:7px;height:34px;padding:0 14px;background:#eef1f0;border-bottom:1px solid var(--grau-2)}
.dias__leiste i,.projekt__leiste i{width:10px;height:10px;border-radius:50%;background:#cfd6d3}
.dias__leiste i:nth-child(1){background:#ff6058}.dias__leiste i:nth-child(2){background:#ffbd2e}.dias__leiste i:nth-child(3){background:#28c941}
.dias__leiste .ampel + span,.projekt__leiste .ampel + span{margin-left:12px}
.dias__adresse,.projekt__leiste > span:last-child{flex:1;max-width:280px;background:#fff;border-radius:7px;font-size:12px;line-height:22px;height:22px;padding:1px 10px 0;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dias__fenster{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--grau)}
.dia{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;overflow:hidden}
.dia.is-aktiv{opacity:1;z-index:1}
.dia img{width:100%;height:100%;object-fit:cover;object-position:top}

.dias__handy{position:absolute;right:-8%;bottom:-11%;width:25%;aspect-ratio:390/844;border-radius:26px;background:var(--nacht);padding:6px;box-shadow:0 30px 60px -20px rgba(0,0,0,.55);transform:translateZ(60px)}
.dias__handy-fenster{position:relative;width:100%;height:100%;border-radius:20px;overflow:hidden;background:#fff}
.dias__handy-fenster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .9s ease}
.dias__handy-fenster img.is-aktiv{opacity:1}

.dias__fuss{display:flex;justify-content:flex-start;align-items:center;gap:16px}
.dias__steuer{display:flex;align-items:center;gap:8px}
.dias__punkte{display:flex;gap:6px;margin-right:6px}
.dias__punkte button{width:30px;height:30px;padding:0;border:0;background:none;display:grid;place-items:center}
.dias__punkte i{display:block;width:22px;height:4px;border-radius:4px;background:var(--grau-2);position:relative;overflow:hidden}
.dias__punkte i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(0);transform-origin:left}
.dias__punkte button[aria-selected="true"] i::after{animation:dias-fortschritt var(--takt,6500ms) linear forwards}
@keyframes dias-fortschritt{to{transform:scaleX(1)}}
.dias__pfeil{width:44px;height:44px;border-radius:50%;border:1.5px solid var(--grau-2);background:#fff;display:grid;place-items:center;transition:background .2s,border-color .2s}
.dias__pfeil:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.dias__pfeil svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

@media (max-width:979px){
  .dias__buehne{margin-left:2%;margin-right:9%}
  .dias__fuss{margin-top:4px}
}
@media (max-width:560px){
  .dias__punkte{display:none}
  .dias__handy{border-radius:18px;padding:4px}
  .dias__handy-fenster{border-radius:14px}
}

@media (min-width:980px){
  .start{min-height:calc(var(--hero-h, 100vh) - var(--kopf-h));max-height:calc(var(--hero-h, 100vh) - var(--kopf-h));display:flex;align-items:center}
  .start > .wrap{width:100%}
  .start__raster{grid-template-columns:minmax(0, 1fr) minmax(0, 1.12fr);align-items:center;gap:clamp(40px, 4.5vw, 80px);padding-block:4vh}
  .start__h1{font-size:clamp(2.4rem, min(3.9vw, 6.8vh), 3.7rem)}
  .start__lead{margin-top:2.4vh}
  .haken{margin-top:2.6vh;gap:1.1vh}
  .start__knoepfe{margin-top:3.2vh}
  .vertrauen{margin-top:3.2vh;padding-top:2.6vh;flex-wrap:nowrap}
  .dias{max-width:calc((var(--hero-h, 100vh) - var(--kopf-h) - 190px) * 1.5);margin-left:auto}
  .start__medien{position:relative;left:clamp(0px, calc((100vw - var(--wrap)) / 2 - 24px), 68px)}
  .dias__buehne{transform:perspective(1600px) rotateY(var(--ry, -5deg)) rotateX(var(--rx, 2deg))}
}
@media (min-width:980px) and (max-height:760px){
  .haken li{font-size:15px}
  .start__lead{font-size:1rem}
}

.js:not(.intro) .start__wort,.js .start.ist-bereit .start__wort{animation:wort-auf 1.1s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 120ms)}
.js:not(.intro) .start__auf,.js .start.ist-bereit .start__auf{animation:block-auf 1s var(--ease) both;animation-delay:calc(var(--i) * 110ms + 160ms)}
.js:not(.intro) .start__medien{animation:block-auf 1s var(--ease) both;animation-delay:.4s}

.start__medien{transition:transform 1.25s cubic-bezier(.75,0,.2,1)}
.start.ist-eilig .start__medien{transition-duration:.6s}
.start.ist-eilig .start__wort,.start.ist-eilig .start__auf{animation-duration:.6s!important;animation-delay:calc(var(--i) * 45ms)!important}
.intro .start:not(.ist-los) .start__medien{opacity:0}
.intro .start:not(.ist-bereit) .start__medien{transform:translate3d(var(--intro-x, 0px), 0, 0) scale(1.12)}
.intro .start.ist-los .dias{animation:dias-ein 1s var(--ease) both}
.intro .start:not(.ist-bereit) .dias__buehne{transform:none}
.intro .start:not(.ist-bereit) .dia{transition-duration:.28s}
.intro .start:not(.ist-bereit) .dias__handy-fenster img{transition-duration:.28s}
.intro .start:not(.ist-bereit) .dias__fuss{opacity:0}
.intro .start:not(.ist-bereit) .start__text{opacity:0}
.dias__fuss{transition:opacity .6s ease .9s}
@keyframes dias-ein{from{opacity:0;transform:scale(.86) translateY(30px);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
@keyframes wort-auf{from{opacity:0;transform:translateY(.55em);clip-path:inset(0 0 100% 0)}to{opacity:1;transform:none;clip-path:inset(0 0 -20% 0)}}
@keyframes block-auf{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.kunden{background:var(--grau);padding-block:48px 52px}
.kunden__titel{text-align:center;font-size:14px;font-weight:600;color:var(--ink-3);letter-spacing:.02em}
.laufband{margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.laufband__spur{display:flex;align-items:center;gap:72px;width:max-content;animation:laufband 48s linear infinite}
.laufband:hover .laufband__spur{animation-play-state:paused}
.laufband img{height:34px;width:auto;max-width:170px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.55;transition:opacity .3s}
.laufband img:hover{opacity:.9}
@keyframes laufband{to{transform:translateX(calc(-50% - 36px))}}

.buehne{background:var(--nacht);color:#fff;padding-block:var(--sek)}
.buehne__kopf{margin-bottom:var(--kopf-abstand)}
.buehne__liste{width:100%;max-width:calc(var(--wrap) + 2 * var(--rand));margin-inline:auto;padding-inline:var(--rand);display:grid;grid-template-columns:minmax(0, 1fr);gap:24px}
.projekt__karte{background:var(--nacht-2);border:1px solid var(--nacht-linie);border-radius:var(--radius-gross);padding:clamp(22px, 3vw, 44px);display:grid;grid-template-columns:minmax(0, 1fr);gap:28px;overflow:hidden;transform-origin:50% 0}
.projekt__art{display:block;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#9a9a9a}
.projekt__name{font-size:clamp(1.8rem, 3vw, 2.5rem);line-height:1.25;letter-spacing:-1px;font-weight:700;margin-top:12px}
.projekt__text p{color:var(--hell-2);margin-top:16px;max-width:30em}
.projekt__text .pfeillink{margin-top:24px}
.projekt__rahmen{border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 40px 90px -40px rgba(0,0,0,.8);display:flex;flex-direction:column;min-height:0}
.projekt__leiste{background:#1d2023;border-bottom-color:#2a2e31}
.projekt__leiste i{background:#3a3f43}
.projekt__leiste > span:last-child{background:#2a2e31;color:#9aa3a8}
.projekt__fenster{position:relative;overflow:hidden;aspect-ratio:16/10;flex:1;min-height:0}
.projekt__fenster img{position:absolute;left:0;top:0;width:100%;height:auto;will-change:transform}
.buehne__fuss{display:flex;flex-wrap:wrap;gap:18px 28px;align-items:center;justify-content:space-between;margin-top:var(--kopf-abstand);padding-top:32px;border-top:1px solid var(--nacht-linie)}
.buehne__knoepfe{display:flex;flex-wrap:wrap;gap:12px}
.buehne__fuss p{font-size:clamp(1.4rem, 2.6vw, 2.5rem);font-weight:700;letter-spacing:-1px}

@media (min-width:980px){
  .buehne__liste{gap:0}
  .projekt{position:sticky;top:calc(var(--kopf-h) + 3vh);height:calc(100vh - var(--kopf-h) - 6vh);margin-bottom:70vh}
  .projekt{z-index:1}
  .projekt:nth-last-child(2){margin-bottom:0}
  .buehne__nachlauf{height:calc(164vh - var(--kopf-h))}

  .projekt__karte{height:100%;grid-template-columns:minmax(0, .72fr) minmax(0, 1.5fr);align-items:center;gap:clamp(28px, 4vw, 64px);transform:scale(var(--s, 1));filter:brightness(var(--hell, 1));box-shadow:0 -30px 60px -30px rgba(0,0,0,.7)}
  .projekt__rahmen{height:100%}
  .projekt__fenster{aspect-ratio:auto}
}

.leistungen{background:var(--papier);padding-block:var(--sek);overflow:hidden}
.leistungen__h{margin-bottom:var(--kopf-abstand)}
.leistungen__h .duenn,.leistungen__h .fett{display:inline}
.eyebrow--grau{color:#9a9a9a;font-size:12px;font-weight:700;letter-spacing:.8px}
.leistungen__raster{display:grid;gap:40px}
.reiter{display:flex;flex-wrap:wrap;gap:8px}
.reiter button{position:relative;display:inline-flex;align-items:center;gap:10px;border:0;background:var(--grau);border-radius:999px;padding:10px 16px 8px;font-size:15.5px;font-weight:600;color:var(--ink-2);text-align:left;transition:color .3s,background .3s,padding .45s var(--ease),transform .5s var(--ease)}
.reiter button[aria-selected="true"]{background:var(--ink);color:#fff}
.reiter__pfeil{display:none}
.tafel p:not(.eyebrow){font-size:18px;line-height:1.8;color:#000}
.tafel p:not(.eyebrow) + p{margin-top:16px}
.tafel .eyebrow{margin-bottom:20px}
.tafel.ist-aktiv{animation:tafel-ein .55s var(--ease) both}
.tafel:not(.ist-aktiv){display:none}
@media (min-width:980px){
  .leistungen__text{display:grid;grid-template-columns:minmax(0, 1fr);align-content:start}
  .tafel{grid-area:1 / 1}
  .tafel:not(.ist-aktiv){display:block;visibility:hidden}
  .leistungen__text .knopf{grid-row:2;justify-self:start}
}
@keyframes tafel-ein{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.leistungen__text .knopf{margin-top:30px}
.leistungen__bild img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 40%}
@media (min-width:980px){
  .leistungen__h{white-space:nowrap;font-size:clamp(2rem, 3.4vw, 3.5rem)}
  .leistungen__raster{grid-template-columns:minmax(0, .75fr) minmax(0, 1.3fr) minmax(0, .95fr);gap:clamp(36px, 4vw, 72px);align-items:stretch}
  .reiter{flex-direction:column;flex-wrap:nowrap;gap:0;margin-top:4px}
  .reiter button{background:none;border-radius:0;padding:0;margin-bottom:11px;font-size:28px;font-weight:600;letter-spacing:-1px;line-height:1.7;color:#000}
  .reiter button:last-child{margin-bottom:0}
  .reiter[data-gewaehlt] button{color:#b9bfc3}
  .reiter button::before{content:"";position:absolute;left:0;top:50%;width:0;height:3px;margin-top:-3px;background:var(--acc);border-radius:3px;transition:width .45s var(--ease)}
  .reiter__pfeil{display:block;width:20px;height:20px;fill:none;stroke:var(--acc);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;opacity:.35;transform:translateX(-4px);transition:opacity .3s,transform .4s var(--ease)}
  .reiter button:hover{color:var(--ink)}
  .reiter button:hover .reiter__pfeil{opacity:1;transform:translateX(4px)}
  .reiter button[aria-selected="true"]{background:none;color:var(--ink);padding-left:30px}
  .reiter button[aria-selected="true"]::before{width:20px}
  .reiter button[aria-selected="true"] .reiter__pfeil{opacity:1;transform:translateX(4px)}
  .reiter.ist-welle button{animation:welle .9s var(--ease) both;animation-delay:calc(var(--n) * 90ms)}
  @keyframes welle{0%,100%{transform:none}40%{transform:translateX(12px)}}
  .reiter.ist-welle .reiter__pfeil{animation:welle-pfeil .9s var(--ease) both;animation-delay:calc(var(--n) * 90ms)}
  @keyframes welle-pfeil{0%,100%{opacity:.35}40%{opacity:1}}
  .leistungen__bild{position:relative;min-height:22rem;margin-right:calc(-1 * (100vw - min(100vw - 2 * var(--rand), var(--wrap))) / 2)}
  .leistungen__bild img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
}
.nur-schmal{display:none}
@media (max-width:979px){
  .nur-breit{display:none}
  .nur-schmal{display:inline}
  .leistungen__text{display:contents}
  .leistungen__text .tafel:first-child{display:block;order:1;animation:none}
  .leistungen__text .tafel:not(:first-child){display:none}
  .leistungen__liste{order:2}
  .leistungen__text .knopf{order:3;justify-self:start;margin-top:0}
  .leistungen__bild{order:4}
  .reiter{gap:10px}
  .reiter button{gap:8px;padding:12px 14px 10px 18px;background:#fff;border:1.5px solid var(--grau-2);color:var(--ink);font-size:15.5px;transition:border-color .2s,background .2s,transform .5s var(--ease)}
  .reiter button:active{background:var(--grau);border-color:var(--ink)}
  .reiter__pfeil{display:block;width:16px;height:16px;margin-top:-2px;fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
  .reiter.ist-welle button{animation:welle-schmal .9s var(--ease) both;animation-delay:calc(var(--n) * 90ms)}
  .reiter.ist-welle .reiter__pfeil{animation:pfeil-stups .9s var(--ease) both;animation-delay:calc(var(--n) * 90ms + 120ms)}
  @keyframes welle-schmal{0%,100%{transform:none;border-color:var(--grau-2)}40%{transform:translateY(-4px);border-color:var(--acc)}}
  @keyframes pfeil-stups{0%,100%{transform:none}45%{transform:translateX(5px)}}
}
.lblatt .kdialog__karte{width:min(34rem, 100%)}
.lblatt__titel{font-size:clamp(1.7rem, 6.5vw, 2.2rem);line-height:1.15;letter-spacing:-.04em;padding-right:44px;margin-top:-6px}
.lblatt .eyebrow{margin-bottom:12px;padding-right:44px}
.lblatt__text p{font-size:17px;line-height:1.75;color:var(--ink-2);margin-top:14px}
.lblatt__fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;margin-top:26px;padding-top:20px;border-top:1px solid var(--grau-2)}
.lblatt__weiter{display:inline-flex;align-items:center;gap:8px;border:0;background:none;padding:8px 0 6px;font-weight:600;font-size:15.5px;color:var(--ink)}
.lblatt__weiter svg{width:16px;height:16px;margin-top:-2px;fill:none;stroke:var(--acc);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@media (prefers-reduced-motion:reduce){ .tafel.ist-aktiv,.reiter.ist-welle button,.reiter.ist-welle .reiter__pfeil{animation:none} }

.vorteile{background:var(--grau);padding-block:var(--sek)}
.vorteile__kopf{margin-bottom:var(--kopf-abstand)}
.vorteile__liste{display:grid;grid-template-columns:minmax(0, 1fr);gap:18px}
@media (min-width:640px){ .vorteile__liste{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width:1260px){ .vorteile__liste{grid-template-columns:repeat(4, minmax(0, 1fr));gap:20px} }
@media (min-width:1260px) and (max-width:1365px){ .vorteile__liste .vorteil{padding-inline:18px} .vorteile__liste{gap:14px} }
.vorteil{background:#fff;border-radius:var(--radius);padding:clamp(24px, 2.4vw, 32px)}
.vorteil h3{font-size:clamp(1.25rem, 1.55vw, 1.5rem);line-height:1.3;letter-spacing:-1px;white-space:nowrap;margin-top:22px}
.vorteil p{color:var(--ink-2);font-size:16px;line-height:1.7;margin-top:10px}
.illu{display:block;width:100%;max-width:200px;height:auto;aspect-ratio:160/110;overflow:visible;fill:none;stroke-linecap:round;stroke-linejoin:round}
.illu__linie,.illu__skala{stroke:var(--ink);stroke-width:3}
.illu__skala{stroke-width:2.5;opacity:.35}
.illu__bogen,.illu__haken{stroke:var(--acc);stroke-width:6;stroke-dasharray:100;stroke-dashoffset:100}
.ist-sichtbar .illu__bogen{transition:stroke-dashoffset 1.4s var(--ease) .3s;stroke-dashoffset:22}
.ist-sichtbar .illu__haken{transition:stroke-dashoffset .9s var(--ease) .5s;stroke-dashoffset:0}
.illu__nadel{transform-origin:80px 92px;transform:rotate(-80deg)}
.illu__nadel path{stroke:var(--ink);stroke-width:4}
.illu__nadel circle{fill:var(--ink)}
.ist-sichtbar .illu__nadel{animation:nadel 1.6s var(--ease) .3s forwards, nadel-zittern 2.4s ease-in-out 2s infinite}
@keyframes nadel{to{transform:rotate(52deg)}}
@keyframes nadel-zittern{0%,100%{transform:rotate(52deg)}50%{transform:rotate(46deg)}}
.illu__puls{stroke:var(--acc);stroke-width:2;opacity:0;transform-origin:80px 56px}
.ist-sichtbar .illu__puls{animation:puls-ring 2.8s ease-out 1.4s infinite}
@keyframes puls-ring{0%{opacity:.5;transform:scale(.7)}100%{opacity:0;transform:scale(1.15)}}
.illu__fluss{stroke:var(--acc);stroke-width:3;stroke-dasharray:4 7}
.ist-sichtbar .illu__fluss{animation:fluss 1.2s linear infinite}
.ist-sichtbar .illu__fluss--2{animation-delay:-.6s}
@keyframes fluss{to{stroke-dashoffset:-22}}
.illu__code{stroke:var(--acc);stroke-width:3}
.illu__blase{stroke:var(--acc);stroke-width:3;fill:rgba(0,166,149,.08)}
.illu__punkt{fill:var(--acc)}
.ist-sichtbar .illu__punkt{animation:tippen 1.4s ease-in-out infinite}
.illu__punkt:nth-of-type(2){animation-delay:.18s}.illu__punkt:nth-of-type(3){animation-delay:.36s}
@keyframes tippen{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-5px);opacity:1}}
@media (prefers-reduced-motion:reduce){
  .illu *{animation:none!important;transition:none!important}
  .illu__bogen{stroke-dashoffset:22}.illu__haken{stroke-dashoffset:0}.illu__nadel{transform:rotate(52deg)}
}

.film{background:var(--papier);padding-bottom:0}
.film__rahmen{position:relative;height:clamp(460px, 88vh, 900px);overflow:hidden;
  clip-path:inset(calc(var(--zv, 1) * 9%) calc(var(--zh, 1) * 9%) round calc(var(--zh, 1) * 36px));background:var(--nacht)}
.film__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(calc(1 + var(--z, 1) * .12))}
.film__schleier{position:absolute;inset:0;background:linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.25) 45%, rgba(0,0,0,.62) 100%)}
.film__text{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#fff;padding:var(--rand)}
.film__zeile{font-size:clamp(2.6rem, 8.5vw, 7.5rem);line-height:1.05;letter-spacing:-.057em;text-shadow:0 10px 50px rgba(0,0,0,.35)}
.film__adresse{margin-top:22px;font-weight:500;font-size:clamp(.95rem, 1.3vw, 1.1rem);letter-spacing:.06em;color:rgba(255,255,255,.88)}

.ablauf{background:var(--grau);padding-block:var(--sek)}
.ablauf__kopf{margin-bottom:var(--kopf-abstand)}
.ablauf__fenster{width:100%;max-width:calc(var(--wrap) + 2 * var(--rand));margin-inline:auto;padding-inline:var(--rand)}
.schritte{position:relative;display:grid;gap:36px}
.schritte__linie{position:absolute;left:25px;top:26px;bottom:26px;width:2px;background:var(--grau-2)}
.schritte__linie span{position:absolute;inset:0;background:var(--acc);transform-origin:top;transform:scaleY(var(--p, 0))}
.schritt{position:relative;padding-left:76px;opacity:.28;transition:opacity .6s var(--ease)}
.schritt.ist-erreicht{opacity:1}
.schritt__nr{position:absolute;left:0;top:-4px;width:52px;height:52px;border-radius:50%;background:#fff;border:2px solid var(--grau-2);display:grid;place-items:center;font-weight:700;font-size:19px;padding-top:3px;transition:background .4s,border-color .4s,color .4s}
.schritt.ist-erreicht .schritt__nr{background:var(--acc);border-color:var(--acc);color:#fff}
.schritt h3{font-size:clamp(1.4rem, 2vw, 1.8rem);letter-spacing:-1px;line-height:1.3;padding-top:10px}
.schritt p{color:var(--ink-2);margin-top:10px;font-size:16px}
@media (min-width:980px){
  .ablauf{padding-block:0}
  .ablauf__spur{height:310vh}
  .ablauf__buehne{position:sticky;top:var(--kopf-h);height:calc(100vh - var(--kopf-h));display:flex;flex-direction:column;justify-content:center;overflow:hidden}
  .ablauf__fenster{overflow:visible}
  .schritte{display:flex;gap:clamp(40px, 5vw, 88px);width:max-content;transform:translate3d(var(--x, 0px), 0, 0);will-change:transform}
  .schritt{width:min(34vw, 440px);padding-left:0;padding-top:84px}
  .schritt__nr{top:0}
  .schritt h3{padding-top:0}
  .schritte__linie{left:26px;right:26px;top:25px;bottom:auto;width:auto;height:2px}
  .schritte__linie span{transform-origin:left;transform:scaleX(var(--p, 0))}
}

.person{background:var(--nacht);color:#fff;padding-block:var(--sek);overflow:hidden}
.person__raster{display:grid;gap:48px;align-items:center}
.person__bild{position:relative;max-width:440px}
.person__bild::before{content:"";position:absolute;inset:-14% -14% auto auto;width:80%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle, rgba(46,227,201,.35), transparent 65%);filter:blur(10px)}
.person__bild img{position:relative;width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;border-radius:var(--radius-gross)}
.person__rolle{margin-top:14px;font-weight:600;color:var(--acc-hell);font-size:15px}
.siegel{margin-top:34px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;background:#fff;color:var(--ink);border-radius:18px;padding:16px 22px;width:fit-content;max-width:100%}
.siegel img{height:42px;width:auto}
.siegel__google{display:flex;flex-direction:column;line-height:1.25;font-size:13.5px;color:var(--ink-2)}
.siegel__google strong{color:var(--ink)}
@media (min-width:880px){
  .person__raster{grid-template-columns:minmax(0, .8fr) minmax(0, 1.2fr);gap:clamp(48px, 7vw, 120px)}
}
@media (max-width:879px){
  .person__bild{width:min(260px, 70%)}
  .person__bild img{aspect-ratio:1;object-position:50% 25%}
}
@media (max-width:600px){
  .siegel{display:grid;grid-template-columns:repeat(2, minmax(0, 1fr));align-items:center;gap:14px 18px;padding:16px;width:100%}
  .siegel img{width:100%;height:auto;max-height:44px;object-fit:contain;object-position:left center}
  .siegel__google{grid-column:1 / -1;order:3;flex-direction:row;flex-wrap:wrap;align-items:center;gap:4px 10px;padding-top:14px;border-top:1px solid var(--grau-2)}
  .siegel__google .sterne{font-size:14px;letter-spacing:1px}
  .siegel__google > span:last-child{white-space:nowrap}
}

.stimmen{display:grid;grid-template-columns:minmax(0, 1fr);gap:18px;margin-top:var(--kopf-abstand)}
@media (min-width:980px){ .stimmen{grid-template-columns:repeat(3, minmax(0, 1fr));gap:20px} }
.stimme{margin:0;background:var(--nacht-2);border:1px solid var(--nacht-linie);border-radius:var(--radius);padding:clamp(24px, 2.4vw, 32px);display:flex;flex-direction:column;gap:16px}
.stimme .sterne{font-size:16px}
.stimme blockquote{margin:0;flex:1}
.stimme blockquote p{font-size:16px;line-height:1.75;color:var(--hell-2)}
.stimme blockquote p::before{content:"„"}
.stimme blockquote p::after{content:"“"}
.stimme figcaption{display:grid;gap:2px;padding-top:16px;border-top:1px solid var(--nacht-linie);line-height:1.35}
.stimme figcaption strong{color:#fff;font-size:16px}
.stimme figcaption span{font-size:13.5px;color:#9a9a9a}

.faq{background:var(--grau);padding-block:var(--sek)}
.faq__raster{display:grid;gap:var(--kopf-abstand)}
.faq__kopf .knopf{margin-top:28px}
@media (min-width:980px){
  .faq__raster{grid-template-columns:minmax(0, .8fr) minmax(0, 1.3fr);gap:clamp(48px, 6vw, 110px);align-items:start}
  .faq__kopf{position:sticky;top:calc(var(--kopf-h) + 48px)}
}
.faq__liste{display:grid;gap:12px}
.frage{background:#fff;border-radius:18px;transition:box-shadow .3s}
.frage[open]{box-shadow:0 20px 40px -28px rgba(12,13,14,.35)}
.frage summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 24px 20px;font-weight:700;font-size:clamp(1.05rem, 1.3vw, 1.2rem);letter-spacing:-.5px;line-height:1.35}
.frage summary::-webkit-details-marker{display:none}
.frage summary:focus-visible{outline:3px solid var(--acc);outline-offset:3px;border-radius:18px}
.frage summary i{position:relative;flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--grau);transition:background .3s,transform .4s var(--ease)}
.frage summary i::before,.frage summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--ink);border-radius:2px;transition:transform .4s var(--ease),background .3s}
.frage summary i::after{transform:rotate(90deg)}
.frage[open] summary i{background:var(--acc);transform:rotate(180deg)}
.frage[open] summary i::before,.frage[open] summary i::after{background:#fff}
.frage[open] summary i::after{transform:rotate(0deg)}
.frage p{padding:0 24px 24px;margin:0;color:var(--ink-2);font-size:17px;line-height:1.75;max-width:44em}
.frage[open] p{animation:tafel-ein .45s var(--ease) both}

.kontakt{background:var(--papier);padding-block:var(--sek)}
.kontakt__raster{display:grid;gap:48px}
.kontakt .h2{font-size:clamp(2rem, 3.6vw, 3.4rem)}
.kontaktwege{margin-top:34px;display:grid;gap:20px}
.kontaktwege li{display:grid;gap:2px}
.kontaktwege__label{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--ink-3)}
.kontaktwege a,.kontaktwege li > span:last-child{font-size:clamp(1.1rem, 1.6vw, 1.3rem);font-weight:600;text-decoration:none}
.kontaktwege a:hover{color:var(--acc-text)}
@media (min-width:980px){
  .kontakt__raster{grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:clamp(48px, 6vw, 100px);align-items:start}
}

.formular-karte{background:var(--grau);border-radius:var(--radius-gross);padding:clamp(22px, 3.4vw, 44px);scroll-margin-top:16px}
.formular{display:grid;grid-template-columns:minmax(0, 1fr) minmax(0, 1fr);gap:18px 14px}
.formular > *{grid-column:1 / -1}
@media (min-width:560px){ .feld--halb{grid-column:auto} }
.formular__art{display:grid;grid-template-columns:1fr 1fr;background:#fff;border-radius:999px;padding:5px;gap:4px}
.formular__art label{position:relative;cursor:pointer}
.formular__art input{position:absolute;opacity:0;pointer-events:none}
.formular__art span{display:block;text-align:center;padding:12px 10px 10px;border-radius:999px;font-weight:600;font-size:15px;color:var(--ink-2);transition:background .25s,color .25s}
.formular__art input:checked + span{background:var(--ink);color:#fff}
.formular__art input:focus-visible + span{outline:3px solid var(--acc);outline-offset:2px}
.feld{display:grid;gap:7px}
.feld label{font-weight:600;font-size:14.5px}
.feld__opt{font-weight:400;color:var(--ink-3)}
.feld input,.feld textarea,.feld select{font:inherit;font-size:16px;line-height:1.4;width:100%;max-width:100%;padding:14px 16px 12px;border:1.5px solid var(--grau-2);border-radius:14px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s;-webkit-appearance:none;appearance:none}
.feld select{background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c0d0e' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 14px center/18px no-repeat;padding-right:44px}
.feld textarea{resize:vertical;min-height:120px}
.feld input:focus,.feld textarea:focus,.feld select:focus{outline:none;border-color:var(--acc);box-shadow:0 0 0 4px rgba(0,166,149,.15)}
.feld.ist-fehler input{border-color:#c2410c}
.rechtstext{background:var(--papier);padding-block:clamp(56px, 8vw, 110px) var(--sek)}
.rechtstext h1{font-size:clamp(2.2rem, 4.65vw, 4rem);line-height:1.1;letter-spacing:-.057em}
.rechtstext__inhalt{max-width:46em;margin-top:clamp(28px, 4vw, 48px)}
.rechtstext__inhalt h2{font-size:clamp(1.2rem, 1.6vw, 1.45rem);line-height:1.3;letter-spacing:-.5px;margin-top:40px}
.rechtstext__inhalt h2:first-child{margin-top:0}
.rechtstext__inhalt p{margin-top:12px;color:var(--ink-2);font-size:17px;line-height:1.75}
.rechtstext__inhalt p > span{display:block}
.rechtstext__inhalt a{color:var(--acc-text)}
.formular__fehler{font-size:15px;line-height:1.5;color:#b42318;background:#fef3f2;border-radius:12px;padding:12px 14px}
.formular__fehler a{color:inherit;font-weight:600}
.formular__falle{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.formular__hinweis{font-size:13.5px;color:var(--ink-3);line-height:1.5}
.formular__hinweis a{color:var(--ink-2)}
.formular-danke{text-align:center;padding:40px 10px}
.formular-danke__haken{display:block;width:72px;height:72px;margin:0 auto 22px;border-radius:50%;background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/34px no-repeat}
.formular-danke h3{font-size:1.5rem;letter-spacing:-.02em}
.formular-danke p{color:var(--ink-2);margin-top:10px}

.fuss{background:var(--nacht);color:var(--hell-2);padding-top:88px;overflow:hidden}
.fuss a{text-decoration:none;color:var(--hell-2);transition:color .2s}
.fuss a:hover{color:#fff}
.fuss__raster{display:grid;grid-template-columns:repeat(auto-fit, minmax(190px, 1fr));gap:32px;font-size:15.5px}
.fuss__raster p + p{margin-top:6px}
.fuss__titel{color:#fff;font-weight:700;margin-bottom:10px}
.fuss__unten{margin-top:64px;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;padding-block:22px 26px;border-top:1px solid var(--nacht-linie);font-size:14px}

.seitenkopf{padding-block:clamp(56px, 8vw, 110px) clamp(32px, 4vw, 56px);background:var(--papier)}
.seitenkopf h1{font-size:clamp(2.4rem, 5.3vw, 5rem);line-height:1.1;letter-spacing:-.057em}
.filter{display:flex;flex-wrap:wrap;gap:8px;margin-top:34px}
.filter button{border:1.5px solid var(--grau-2);background:#fff;border-radius:999px;padding:10px 18px 8px;font-weight:600;font-size:15px;color:var(--ink-2);transition:background .25s,color .25s,border-color .25s}
.filter button:hover{border-color:var(--ink);color:var(--ink)}
.filter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.referenzen{padding-block:clamp(16px, 2vw, 32px) var(--sek);background:var(--papier)}
.ref-raster{display:grid;grid-template-columns:minmax(0, 1fr);gap:clamp(28px, 3vw, 44px) clamp(20px, 2.4vw, 32px)}
@media (min-width:640px){ .ref-raster{grid-template-columns:repeat(2, minmax(0, 1fr))} }
@media (min-width:1100px){ .ref-raster{grid-template-columns:repeat(3, minmax(0, 1fr))} }
.ref[hidden]{display:none!important}
.ref a{display:block;text-decoration:none;color:inherit}
.ref__rahmen{position:relative;border-radius:14px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px rgba(12,13,14,.08), 0 24px 50px -30px rgba(12,13,14,.45);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.ref__leiste{display:flex;align-items:center;gap:6px;height:28px;padding:0 12px;background:#eef1f0;border-bottom:1px solid var(--grau-2)}
.ref__leiste i{width:8px;height:8px;border-radius:50%;background:#cfd6d3}
.ref__leiste span{margin-left:8px;font-size:11.5px;line-height:1;padding-top:2px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ref__bild{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--grau)}
.ref__bild img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform .8s var(--ease)}
.ref__bild::after{content:"Website ansehen ↗";position:absolute;inset:0;display:grid;place-items:center;background:rgba(11,12,13,.55);color:#fff;font-weight:600;font-size:16px;opacity:0;transition:opacity .35s}
@media (hover:hover){
  .ref a:hover .ref__rahmen{transform:translateY(-6px);box-shadow:0 0 0 1px rgba(12,13,14,.08), 0 40px 70px -34px rgba(12,13,14,.55)}
  .ref a:hover .ref__bild img{transform:scale(1.04)}
  .ref a:hover .ref__bild::after{opacity:1}
}
.ref a:focus-visible .ref__bild::after{opacity:1}
.ref__art{display:block;margin-top:18px;font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:#9a9a9a}
.ref__name{font-size:clamp(1.25rem, 1.6vw, 1.5rem);line-height:1.3;letter-spacing:-1px;margin-top:6px}
.abschluss{background:var(--grau);padding-block:var(--sek)}   /* nicht dunkel: der Fuß darunter ist es schon */
.abschluss__raster{display:flex;flex-wrap:wrap;gap:28px 48px;align-items:flex-end;justify-content:space-between}
.abschluss .knoepfe{display:flex;flex-wrap:wrap;gap:12px}

.schwebe{position:fixed;right:clamp(14px, 2.5vw, 28px);bottom:clamp(14px, 2.5vw, 28px);z-index:90;display:inline-flex;align-items:center;gap:10px;padding:6px 20px 6px 6px;border:0;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:15.5px;line-height:1;box-shadow:0 14px 34px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,.08) inset;transition:transform .25s var(--ease),opacity .25s,background .2s}
.schwebe:hover{background:#25292c;transform:translateY(-2px)}
.schwebe__text{padding-top:2px}
.schwebe__foto{position:relative;width:46px;height:46px;border-radius:50%;flex:0 0 auto}
.schwebe__foto img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:2px solid var(--acc)}
.schwebe__foto::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 0 rgba(0,166,149,.55);animation:puls 2.4s ease-out 3s infinite}
@keyframes puls{70%{box-shadow:0 0 0 12px rgba(0,166,149,0)}100%{box-shadow:0 0 0 0 rgba(0,166,149,0)}}
body.dialog-auf .schwebe{opacity:0;pointer-events:none}
@media (max-width:600px){
  .schwebe{padding:5px;bottom:calc(18px + env(safe-area-inset-bottom, 0px));box-shadow:0 6px 16px -4px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08) inset}
  .schwebe__text{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .schwebe__foto{width:54px;height:54px}
}

.kdialog{position:fixed;left:0;top:0;width:100%;height:100dvh;z-index:150;display:grid;place-items:center;padding:var(--rand)}
.kdialog__grund{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px);opacity:0;transition:opacity .28s var(--ease)}
.kdialog__karte{position:relative;width:min(30rem, 100%);max-height:100%;overflow-y:auto;overscroll-behavior:contain;background:#fff;border-radius:var(--radius);padding:clamp(22px, 4vw, 34px);box-shadow:0 30px 70px rgba(0,0,0,.35);opacity:0;transform:translateY(14px) scale(.98);transition:opacity .28s var(--ease),transform .28s var(--ease)}
.kdialog.ist-auf .kdialog__grund{opacity:1}
.kdialog.ist-auf .kdialog__karte{opacity:1;transform:none}
.kdialog__x{position:absolute;top:12px;right:12px;width:40px;height:40px;display:grid;place-items:center;background:var(--grau);border:0;border-radius:50%}
.kdialog__x svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.kdialog__person{display:flex;align-items:center;gap:12px;padding-right:44px;line-height:1.3}
.kdialog__person img{width:52px;height:52px;border-radius:50%;object-fit:cover;border:2px solid var(--acc)}
.kdialog__person b{display:block}
.kdialog__person span{font-size:14px;color:var(--ink-3);white-space:nowrap}
@media (max-width:420px){
  .kdialog__person{padding-right:40px;gap:10px}
  .kdialog__person img{width:46px;height:46px}
  .kdialog__person span{font-size:clamp(11.5px, 3.3vw, 14px)}
}
@media (max-width:359px){
  .kdialog__person span{white-space:normal}
}
.kdialog__titel{font-size:clamp(1.5rem, 5vw, 1.9rem);line-height:1.1;letter-spacing:-.03em;margin-top:18px}
.kdialog__wege{display:grid;gap:10px;margin-top:22px}
.weg{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;width:100%;text-align:left;padding:12px 14px;border:1.5px solid var(--grau-2);border-radius:14px;background:#fff;color:var(--ink);text-decoration:none;font:inherit;line-height:1.3;transition:border-color .2s,background .2s}
.weg:hover{border-color:var(--ink)}
.weg--stark{background:var(--ink);border-color:var(--ink);color:#fff}
.weg--stark:hover{background:#25292c}
.weg__ic{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--grau);color:var(--ink)}
.weg--stark .weg__ic{background:var(--acc);color:#fff}
.weg__ic svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.weg__titel{display:block;font-weight:700;font-size:16px;padding-top:2px}
.weg__zeile{display:block;font-size:14px;color:var(--ink-3)}
.weg--stark .weg__zeile{color:rgba(255,255,255,.75)}
.weg__pfeil{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;opacity:.5}

.js .reveal{opacity:0;transform:translateY(30px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .reveal.ist-sichtbar{opacity:1;transform:none}
.js .formular-karte.reveal{transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .js .reveal{opacity:1;transform:none}
  .laufband__spur{animation:none}
  .dias__buehne{transform:none!important}
  .film__rahmen{clip-path:none}
  .film__video{transform:none}
  .schritt{opacity:1}
  .js .sprachen li{opacity:1;transform:none}
  .schwebe__foto::after{animation:none}
}