@font-face{font-family:"Figtree";font-style:normal;font-weight:400 900;font-display:swap;src:url(schrift/figtree-400-900-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap;src:url(schrift/ibm-plex-mono-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap;src:url(schrift/ibm-plex-mono-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
/* Layout: ein großer Moment (der Stand verwandelt sich beim Scrollen), sonst wechselnde Dichte: beschriftetes Rendering, eine riesige Zahl, echte Fälle, ein Datenblatt, ein dunkler Dashboard-Teil. Maßband und Maßlinien sind das Motiv. Eine feste helle Welt nach dem VISPAL Brand Guide. */
:root{
  --beige:#E2DACD; --papier:#F4EFE6; --tinte:#1D2026; --holz:#8B6C56; --blau:#0052CC; --weiss:#FFFFFF;
  --gruen:#2F7D4F; --mut:#57534D; --linie:#CFC6B7; --nacht:#16191E; --nmut:#A9A39A; --nlinie:#3A3F47;
  --text:"Figtree",system-ui,-apple-system,"Segoe UI",sans-serif; --zahl:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --rand:clamp(18px,5vw,72px);
  color-scheme:light;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--beige);color:var(--tinte);font:17px/1.55 var(--text);margin:0}
img{display:block;width:100%;height:auto}
.sec{padding:clamp(48px,8vw,112px) var(--rand);position:relative}
.sec.papier{background:var(--papier)} .sec.dunkel{background:var(--nacht);color:var(--papier)}
.innen{max-width:1180px;margin:0 auto}
h2{font:800 clamp(28px,4.2vw,50px)/1.04 var(--text);letter-spacing:-.025em;margin:0 0 18px;text-wrap:balance;max-width:18ch}
h3{font:700 20px/1.25 var(--text);margin:0 0 6px}
p{margin:0;max-width:58ch}
.mut{color:var(--mut)} .dunkel .mut{color:var(--nmut)}
.zahl{font-family:var(--zahl);font-variant-numeric:tabular-nums}
.knopf{display:inline-block;background:var(--tinte);color:var(--weiss);font-weight:600;padding:13px 20px;border-radius:3px;text-decoration:none}
.knopf.hell{background:var(--papier);color:var(--tinte)}
a:focus-visible,summary:focus-visible{outline:2px solid currentColor;outline-offset:3px}
/* Maßband: das wiederkehrende Motiv */
.massband{height:16px;background:
  repeating-linear-gradient(90deg,currentColor 0 1.5px,transparent 1.5px 60px) 0 100%/100% 100% no-repeat,
  repeating-linear-gradient(90deg,currentColor 0 1px,transparent 1px 12px) 0 100%/100% 45% no-repeat;opacity:.55;border-bottom:1.5px solid currentColor}
.mass{display:flex;align-items:center;gap:10px;font:500 13px var(--zahl);color:var(--mut);margin-bottom:18px}
.mass::before,.mass::after{content:"";height:11px;border-left:1.5px solid currentColor}
.mass i{flex:1;border-top:1.5px solid currentColor;order:2}.mass::after{order:3}
.dunkel .mass{color:var(--nmut)}
/* Kopf */
.nav{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px var(--rand)}
.nav svg{width:160px}
.nav ul{display:flex;gap:22px;list-style:none;margin:0;padding:0;font-weight:500;font-size:15px}
.kopf{padding:clamp(36px,6vw,88px) var(--rand) 0;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.25fr);gap:12px;align-items:center}
.kopf>div:first-child{position:relative;z-index:1;padding-bottom:40px}
header{padding-bottom:clamp(8px,2vw,28px);min-height:100vh;min-height:100svh;display:flex;flex-direction:column}
header .kopf{flex:1;align-content:center}
@media(min-width:821px){header .kopf{transform:translateY(-5vh)}}
h1{font:900 clamp(38px,min(5.6vw,10.5vh),108px)/.98 var(--text);letter-spacing:-.035em;margin:0 0 22px;text-wrap:balance}
.wort{display:inline-block;animation:wort .7s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i)*70ms)}
@keyframes wort{from{opacity:0;transform:translateY(.5em)}}
.h1k{display:inline-block;font-size:.58em;font-weight:800;letter-spacing:-.025em;line-height:1.2;margin-top:.25em}
.kopf h1{margin-bottom:12px;font-size:clamp(34px,min(4.25vw,8.6vh),86px)}
.kopf2{font:600 clamp(17px,min(1.75vw,3.5vh),30px)/1.2 var(--text);letter-spacing:-.012em;margin:0 0 24px;max-width:none;text-wrap:balance}
.fz{display:flex;flex-direction:column;gap:5px;list-style:none;margin:0 0 26px;padding:0;font-weight:500;font-size:clamp(16px,1.15vw,21px)}
.fz li{padding-left:12px;border-left:1.5px solid currentColor}
.buehne{position:relative;margin-right:calc(-1*var(--rand));min-width:0}
.buehne img{-webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 90%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 14%,#000 90%,transparent),linear-gradient(transparent,#000 12%,#000 88%,transparent);mask-composite:intersect}
.buehne svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.buehne svg path{fill:none;stroke:var(--tinte);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:ziehen 1s ease-out forwards;animation-delay:calc(.9s + var(--i)*.25s)}
.buehne svg circle{fill:var(--tinte);opacity:0;animation:da .3s forwards;animation-delay:calc(1.7s + var(--i)*.25s)}
@keyframes ziehen{to{stroke-dashoffset:0}} @keyframes da{to{opacity:1}}
.marke{position:absolute;font:500 13px/1.3 var(--zahl);transform:translate(-50%,-100%);padding-bottom:6px;white-space:nowrap;opacity:0;animation:da .5s forwards;animation-delay:calc(1.5s + var(--i)*.25s)}
.marke b{display:block;font:700 15px var(--text)}
/* Beleg */
.beleg{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(24px,5vw,80px);align-items:end}
.riesig{font:900 clamp(84px,17vw,230px)/.82 var(--text);letter-spacing:-.05em;margin:0 0 14px -.05em}
.riesig small{font-size:.32em;letter-spacing:0;vertical-align:.9em;margin-right:.15em;font-family:var(--text);font-weight:700}
.beleg .gross{font:700 clamp(20px,2.3vw,28px)/1.2 var(--text);max-width:22ch}
.partner{border-left:1.5px solid var(--tinte);padding-left:20px}
.band{overflow:hidden;padding:26px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent)}
.band div{display:flex;gap:64px;width:max-content;animation:laufen 30s linear infinite}
.band div{align-items:center}
.band img{width:auto;height:var(--h,34px);flex:none;filter:grayscale(calc(1 - var(--n,0))) contrast(calc(.85 + var(--n,0)*.15));opacity:calc(.5 + var(--n,0)*.5);transform:scale(calc(1 + var(--n,0)*.08));transition:filter .35s ease,opacity .35s ease,transform .35s ease}
.partner img{width:auto;height:40px;margin-bottom:14px}
@keyframes laufen{to{transform:translateX(-50%)}}
/* Film */
.film{position:relative;background:var(--beige);height:calc(100vh + 210vh + clamp(140px,22vh,260px));padding-bottom:clamp(140px,22vh,260px)}
.fstage{background:var(--beige);position:sticky;top:0;height:100vh;min-height:0;padding-bottom:70px;overflow:hidden;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.4fr);align-items:center;padding:0 var(--rand);gap:12px}
.ftext{position:relative;z-index:1;min-height:450px}
.ftext>div{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transition:opacity .25s linear,transform .25s linear}
.ftext>div:first-child{opacity:1}
.ftext>div.akt{opacity:1;transform:none}
.ftext h2{margin-bottom:12px}
.std{font:500 13px var(--zahl);color:var(--mut);margin-top:16px}
.sw{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.sw li{padding-left:12px;border-left:2.5px solid var(--blau);color:var(--mut);font-size:15.5px;line-height:1.4}
.sw b{display:block;color:var(--tinte);font-size:18px}
.sw.kurz{flex-direction:row;flex-wrap:wrap;gap:8px 18px}
.fbilder{position:relative;margin-right:calc(-1*var(--rand));aspect-ratio:2688/1520}
.fbilder .fr{position:absolute;inset:0;opacity:0;transition:opacity .3s linear}
.fbilder .fr:first-child{opacity:1}
.fbilder .fr img{position:absolute;inset:0;width:100%;height:100%}
.fbilder .fr svg{position:absolute;inset:0;overflow:visible}
.fbilder .fr img.weich{-webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent),linear-gradient(transparent,#000 9%,#000 91%,transparent);mask-composite:intersect}
.fbilder .fr path{fill:none;stroke:var(--tinte);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .7s ease-out}
.fbilder .fr circle{fill:var(--tinte);opacity:0;transition:opacity .3s}
.fbilder .fr.akt path{stroke-dashoffset:0;transition-delay:calc(.1s + var(--i)*.12s)}
.fbilder .fr.akt circle{opacity:1;transition-delay:calc(.6s + var(--i)*.12s)}
.fm{position:absolute;font:500 12.5px/1.3 var(--zahl);white-space:nowrap;background:#DEE7F6;color:var(--tinte);border-left:4px solid var(--blau);padding:4px 9px;opacity:0;transition:opacity .4s}
.fm b{display:block;font:700 15px var(--text)}
.fm.gut{background:#DDEEDD;border-left-color:var(--gruen)}
.fm.l{transform:translate(-100%,-50%);text-align:right} .fm.r{transform:translate(0,-50%)}
.fr.akt .fm{opacity:1;transition-delay:calc(.35s + var(--i)*.12s)}
.fbilder .fr.akt{opacity:1}
.fbilder svg{width:100%;height:100%;display:block}
.fbilder .tag{position:absolute;right:var(--rand);bottom:-4px;font:400 11.5px var(--zahl);color:var(--mut)}
@keyframes marsch{to{stroke-dashoffset:-24}}
.marsch{animation:marsch 1.2s linear infinite}
.zug{stroke-dasharray:1;stroke-dashoffset:1}
.fr.akt .zug{animation:ziehen 1.1s ease-out .5s forwards}
.frat{position:absolute;left:58%;top:74%;background:var(--weiss);padding:10px 14px;border-radius:3px;border-left:4px solid var(--blau);font-size:14.5px;opacity:0;transform:translateY(10px);transition:opacity .5s .2s,transform .5s .2s;box-shadow:0 10px 26px rgba(29,32,38,.16)}
.frat b{display:block} .frat.akt{opacity:1;transform:none}
.fskala{position:absolute;left:var(--rand);right:var(--rand);bottom:28px;color:var(--tinte)}
.fskala .massband{opacity:.35}
.fskala i{position:absolute;left:0;bottom:0;height:4px;background:var(--tinte);width:calc(var(--p,0)*100%)}
.fskala ol{display:grid;grid-template-columns:repeat(4,1fr);list-style:none;margin:8px 0 0;padding:0;font:500 13px var(--zahl);color:var(--mut)}
.fskala li{cursor:pointer;padding:4px 0}
.fskala li:hover{color:var(--tinte)}
.fskala li:focus-visible{outline:2px solid var(--tinte);outline-offset:2px}
.fskala li.akt{color:var(--tinte);font-weight:700}
/* Fälle */
.fall{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:center;padding-block:28px}
.fall.dreh>div:first-child{order:2}
.fall .n{white-space:nowrap;font:900 clamp(56px,9vw,124px)/.85 var(--text);letter-spacing:-.045em;margin:0 0 10px}
.qp .fsatz{font-size:clamp(17px,1.5vw,19px)!important;margin-bottom:10px}
.qp .balken{margin:12px 0;gap:7px}.qp .balken div{height:14px}
.qp .mut{font-size:15px}
.fall .fsatz,.qp .fsatz{font:700 clamp(20px,2.4vw,30px)/1.18 var(--text);max-width:22ch;margin-bottom:16px}
.balken{display:flex;flex-direction:column;gap:10px;margin:18px 0;max-width:460px;font:500 12.5px var(--zahl)}
.balken div{height:20px;background:var(--linie);position:relative}
.balken div i{position:absolute;left:0;top:0;bottom:0;background:var(--tinte);width:0}
.balken.an div i{width:var(--w);transition:width 1.4s cubic-bezier(.2,.7,.2,1) .15s}
.balken.an div+span+div i{transition-delay:.45s}
.balken div i.blau{background:var(--blau)}
.fall a{color:var(--tinte);font-weight:600}
.fall figure{margin:0} .fall figcaption{font:400 12.5px var(--zahl);color:var(--mut);margin-top:8px}
/* Datenblatt */
.technik{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start}
.blatt{width:100%;border-collapse:collapse;font-size:16px}
.blatt th,.blatt td{text-align:left;padding:11px 0;border-top:1px solid var(--linie);vertical-align:top}
.blatt th{font:500 13.5px var(--zahl);color:var(--mut);width:34%;padding-right:14px}
.blatt td{font-weight:600}
.blatt tr:last-child th,.blatt tr:last-child td{border-bottom:1px solid var(--linie)}
/* Dashboard */
.dash{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(24px,5vw,64px);align-items:center;margin-top:10px}
.schirm{border:1px solid var(--nlinie);border-radius:6px;overflow:hidden;box-shadow:0 30px 70px rgba(0,0,0,.45);margin-left:calc(-1*var(--rand));transform:perspective(1600px) rotateY(calc(6deg - var(--p,0)*6deg));transform-origin:right center;transition:transform .2s linear}
.dliste{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.dliste li{padding:18px 0;border-top:1px solid var(--nlinie)}
.dliste li:last-child{border-bottom:1px solid var(--nlinie)}
.dliste b{display:block;font-size:19px;margin-bottom:2px}
.dliste em{font:500 12px var(--zahl);font-style:normal;border:1px solid var(--nmut);border-radius:99px;padding:2px 8px;margin-left:8px;vertical-align:2px}
/* Ablauf */
.ablauf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px)}
.linie{position:relative;padding-left:40px;display:flex;flex-direction:column;gap:38px}
.linie::before{content:"";position:absolute;left:9px;top:6px;bottom:6px;width:3px;background:var(--linie)}
.linie::after{content:"";position:absolute;left:9px;top:6px;width:3px;height:calc((100% - 12px)*var(--p,0));background:var(--tinte)}
.linie>div{position:relative}
.linie>div::before{content:"";position:absolute;left:-40px;top:5px;width:21px;height:21px;border-radius:50%;background:var(--papier);border:3px solid var(--tinte)}
/* Einsatz */
.innen.blaukasten{max-width:1560px}
.blaukasten{background:var(--blau);border-radius:clamp(20px,2.6vw,36px);padding:clamp(22px,4vw,56px)}
.blaukasten h2{color:var(--weiss);max-width:none;margin-bottom:0}
.blaukasten .einsatz{margin-top:clamp(30px,3.6vw,52px)}
@media(min-width:760px){.blaukasten h2{white-space:nowrap}}
.blaukasten .einsatz>div{border-radius:clamp(10px,1.2vw,16px);color:var(--tinte)}
.einsatz{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:22px}
.einsatz>div{overflow:hidden;min-width:0;display:flex;flex-direction:column}
.einsatz img{min-width:0;aspect-ratio:16/8;object-fit:contain;transform:scale(.94);transition:transform .7s cubic-bezier(.2,.7,.2,1)}

.einsatz>div:hover img{transform:scale(1)}
.einsatz span{display:block;padding:14px 18px 18px;background:inherit;position:relative}
.einsatz b{display:block;font-size:20px}
/* Datenschutz */
.schutz{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(24px,5vw,72px);align-items:center}
.haken{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 32px;list-style:none;margin:20px 0 0;padding:0}
.haken li{padding-left:34px;position:relative;font-weight:700}
.haken li span{display:block;font-weight:400;color:var(--mut);font-size:15.5px}
.haken li::before{content:"";position:absolute;left:0;top:4px;width:20px;height:11px;border-left:3px solid var(--tinte);border-bottom:3px solid var(--tinte);transform:rotate(-45deg)}
@keyframes weg{0%,25%{opacity:1}45%,80%{opacity:0}100%{opacity:1}} @keyframes hin{0%,25%{opacity:0}45%,80%{opacity:1}100%{opacity:0}}
@keyframes puls{0%,100%{opacity:.95;transform:scale(1)}50%{opacity:.45;transform:scale(1.2)}}
.figur{animation:weg 6s ease-in-out infinite} .punkt{animation:hin 6s ease-in-out infinite}
.ring{transform-box:fill-box;transform-origin:center;animation:puls 2.6s ease-in-out infinite}
/* Pakete, Fragen, Kontakt */
.pakete{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0;margin-top:22px;border-top:2px solid var(--tinte)}
.pakete>div{padding:22px 24px 22px 0;min-width:0} .pakete>div+div{border-left:1px solid var(--linie);padding-left:24px}
.pakete ul{margin:10px 0 0;padding-left:18px;color:var(--mut)}
.platz{font:400 12.5px var(--zahl);border:1px dashed currentColor;border-radius:3px;padding:8px 10px;opacity:.75;margin-top:14px;display:inline-block}
.fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px)}
details{border-top:1px solid var(--linie);padding:15px 0}
details:last-child{border-bottom:1px solid var(--linie)}
summary{font-weight:700;cursor:pointer;font-size:18px}
details p{margin-top:8px;color:var(--mut)}
.kontakt{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.kontakt h2{font-size:clamp(34px,6vw,76px);max-width:14ch}
.karte{border-top:2px solid var(--papier);padding-top:16px}
.in [data-a]{animation:hoch .8s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--d,0)*90ms)}
@keyframes hoch{from{opacity:0;transform:translateY(24px)}}
/* Ein Satz */
.satz{background:var(--nacht);color:var(--papier);padding:clamp(40px,5.5vw,84px) 0;overflow:hidden}
.satz p{margin:0;max-width:none;font:900 clamp(54px,13.5vw,220px)/.9 var(--text);letter-spacing:-.045em;white-space:nowrap}
.satz p{white-space:nowrap;font-size:clamp(34px,7vw,112px);max-width:1180px;margin:0 auto}
.satz span{display:block;padding:0 var(--rand);opacity:0;transform:translateX(-60vw)}
.satz span+span{color:var(--beige);text-align:right;transform:translateX(60vw)}
.satz.an span{animation:vonlinks 1s cubic-bezier(.16,.84,.3,1) both}
.satz.an span+span{animation-name:vonrechts;animation-delay:.18s}
@keyframes vonlinks{from{opacity:0;transform:translateX(-60vw)}to{opacity:1;transform:none}}
@keyframes vonrechts{from{opacity:0;transform:translateX(60vw)}to{opacity:1;transform:none}}
/* Fälle laufen quer */
.quer{background:var(--papier);padding:clamp(36px,5vw,72px) 0}
.quer .qstage{max-width:calc(960px + 2*var(--rand))}
.qstage{max-width:calc(1180px + 2*var(--rand));margin:0 auto}
.qtrack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);padding:0 var(--rand)}
.qp{display:flex;flex-direction:column;gap:14px;background:var(--weiss);padding:clamp(16px,1.8vw,22px);border-top:4px solid var(--tinte)}
.qp figure{order:-1}
.qp>div{display:flex;flex-direction:column;flex:1}
.qp .knopf{align-self:flex-start;margin-top:auto}
.qp .mut{margin-bottom:14px}
.knopf.blau,.qp a.knopf.blau{background:var(--blau);color:var(--weiss)}
.qp figure{margin:0} .qp figure img{aspect-ratio:668/300;object-fit:cover;object-position:50% 58%} .qp figcaption{font:400 12.5px var(--zahl);color:var(--mut);margin-top:8px}
.qp .n{white-space:nowrap;font:900 clamp(38px,4.2vw,56px)/.9 var(--text);letter-spacing:-.045em;margin:0 0 10px}
.qp a{color:var(--tinte);font-weight:600}
.qp.qintro{display:block;background:none;border:0;padding:0;grid-column:1/-1}
/* Standplan zum Anfassen */
.zplan{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);align-items:center;margin-top:22px}
.zone{cursor:pointer;transition:fill-opacity .25s}
.zone:focus-visible{outline:none;stroke:var(--tinte);stroke-width:4}
.zinfo{border-top:4px solid var(--tinte);padding-top:14px}
.zinfo h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;margin-bottom:14px}
.zinfo dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:0}
.zinfo dt{color:var(--mut)} .zinfo dd{margin:0;font:500 clamp(20px,2.4vw,28px) var(--zahl);text-align:right}
.zinfo .ant{height:10px;background:var(--linie);margin-top:16px} .zinfo .ant i{display:block;height:100%;background:var(--blau);transition:width .5s cubic-bezier(.2,.7,.2,1)}
.bsp{font:400 12px var(--zahl);color:var(--mut);margin-top:10px}
.dreier{list-style:none;margin:34px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 28px;border-top:2px solid var(--tinte)}
.dreier li{padding-top:16px} .dreier b{display:block;font-size:19px;margin-bottom:2px}
.dreier em{font:500 12px var(--zahl);font-style:normal;border:1px solid var(--mut);border-radius:99px;padding:2px 8px;margin-left:8px;vertical-align:2px}
/* Dashboard-Ansicht */
.dbrowser{margin-top:22px;background:var(--weiss);border:1px solid var(--linie);border-radius:10px;box-shadow:0 30px 70px rgba(29,32,38,.18);overflow:hidden}
.dbar{display:flex;align-items:center;gap:6px;padding:10px 14px;background:var(--papier);border-bottom:1px solid var(--linie);font:400 12px var(--zahl);color:var(--mut)}
.dwahl{display:flex;flex-wrap:wrap;gap:4px;margin-left:12px}
.dwahl button{appearance:none;border:0;background:none;font:600 13.5px var(--text);color:var(--mut);padding:6px 12px;border-radius:6px;cursor:pointer;transition:background .2s,color .2s}
.dwahl button:hover{background:var(--weiss);color:var(--tinte)}
.dwahl button[aria-pressed="true"]{background:var(--weiss);color:var(--tinte);box-shadow:inset 0 -2px 0 var(--blau)}
.dwahl button:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.dschau{position:relative;background:#F4F1EA}
.dschau::before{content:"";display:block;padding-top:62.5%}
.dschau img{position:absolute;left:0;top:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0;transition:opacity .35s}
.dschau img.an{opacity:1}
@media(prefers-reduced-motion:reduce){.dschau img{transition:none}}
.dbar i{width:10px;height:10px;border-radius:50%;background:var(--linie)} .dbar span{margin-left:10px}
.dbody{padding:clamp(14px,2.2vw,26px)}
.dtop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.dtop b{font-size:20px} .dfrei{flex:1}
.live{display:inline-flex;align-items:center;gap:7px;font:500 12.5px var(--zahl);border:1px solid var(--linie);border-radius:99px;padding:3px 10px}
.live i{width:9px;height:9px;border-radius:50%;background:var(--blau);animation:puls 1.4s ease-in-out infinite}
.dbtn{font-weight:600;font-size:14px;padding:8px 13px;border-radius:3px;background:var(--tinte);color:var(--weiss)}
.dbtn.hell{background:none;color:var(--tinte);border:1.5px solid var(--tinte)}
.dgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(16px,2.5vw,32px);align-items:start}
.dgrid figure{margin:0;background:#E9E3D8;border-radius:6px;overflow:hidden}
.dgrid figure img{mix-blend-mode:darken} .dgrid figcaption{font:400 12px var(--zahl);color:var(--mut);padding:8px 12px}
.dk3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:14px}
.dk3 div{border:1px solid var(--linie);border-radius:6px;padding:10px 12px;min-width:0}
.dk3 span{display:block;font-size:13px;color:var(--mut)} .dk3 b{font:500 clamp(20px,2.4vw,30px) var(--zahl)}
.dtab{width:100%;border-collapse:collapse;font-size:14.5px}
.dtab th,.dtab td{text-align:left;padding:9px 8px 9px 0;border-top:1px solid var(--linie)}
.dtab th{font:500 12px var(--zahl);color:var(--mut);border-top:0}
.dtab .r{text-align:right;font-family:var(--zahl)}
.dtab .bk{width:28%} .dtab .bk i{display:block;height:9px;background:var(--blau);width:0}
.in .dtab .bk i{width:var(--w);transition:width 1.2s cubic-bezier(.2,.7,.2,1) .5s}
/* Sensor in Originalgröße */
.sensor{background:var(--nacht);color:var(--papier);text-align:center;padding:clamp(28px,4vw,56px) var(--rand) clamp(40px,5vw,72px);display:flex;flex-direction:column;align-items:center}
.sq{display:grid;place-items:center;width:3cm;height:3cm;background:#2A2E36;border:1px solid #4A4F58;border-radius:5px;animation:senden 3s ease-out infinite}
.sq i{width:1.15cm;height:1.15cm;border-radius:50%;background:radial-gradient(circle at 35% 35%,#3B7BEA,#0A1A3A 70%)}
@keyframes senden{0%{box-shadow:0 0 0 0 rgba(0,82,204,.55)}100%{box-shadow:0 0 0 90px rgba(0,82,204,0)}}
.smass{position:absolute;left:0;right:0;top:-34px;font-size:13px;color:var(--nmut);border-bottom:1px solid var(--nmut);padding-bottom:4px}
.smass::before,.smass::after{content:"";position:absolute;bottom:-6px;height:12px;border-left:1px solid var(--nmut)} .smass::before{left:0} .smass::after{right:0}
.s11{position:relative;width:6.57cm;max-width:86vw;aspect-ratio:1;margin-bottom:6px}
.s11 img{position:relative;width:100%;height:100%;-webkit-mask-image:radial-gradient(circle,#000 52%,transparent 72%);mask-image:radial-gradient(circle,#000 52%,transparent 72%)}
.s11 .smass{left:27.2%;right:27.2%;top:13%;z-index:2}
.pw{position:absolute;left:50%;top:49%;width:.8cm;height:.8cm;margin:-.4cm 0 0 -.4cm;border-radius:50%;border:1.5px solid #3B7BEA;opacity:0;animation:welle 3.9s cubic-bezier(.2,.6,.3,1) infinite;z-index:1;pointer-events:none}
.pw.p2{animation-delay:1.3s} .pw.p3{animation-delay:2.6s}
@keyframes welle{0%{width:.8cm;height:.8cm;margin:-.4cm 0 0 -.4cm;opacity:0}12%{opacity:.8}100%{width:8cm;height:8cm;margin:-4cm 0 0 -4cm;opacity:0}}
.sensor h2{max-width:none;font-size:clamp(26px,3.4vw,40px)}
.s11{margin-top:-10px} .sensor p{color:var(--nmut)}
/* Buchen: Paket-Szenerie auf dunklem Holz, Angebote als Versandetiketten */
.buchen{background:var(--beige);color:var(--tinte);padding:clamp(56px,9vw,128px) var(--rand);position:relative;overflow:hidden}
.buchen .innen{position:relative}
.bkopf{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.buchen h2{font-size:clamp(34px,5.4vw,68px);max-width:14ch}
.bkopf p{color:var(--mut);font-size:19px}
.buchen .knopf.hell{background:var(--blau);color:var(--weiss)}
.bknoepfe{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px}
.knopf.rand{background:none;color:var(--blau);box-shadow:inset 0 0 0 1.5px var(--blau)}
.waage{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:0;border-top:2px solid var(--blau);container-type:inline-size}
.waage>div{padding:14px 18px 0 0} .waage>div+div{border-left:1px solid var(--linie);padding-left:18px}
.waage span{font-size:13px;color:var(--blau)}
.waage ul{list-style:none;margin:8px 0 0;padding:0;font-weight:600;font-size:clamp(12px,3.35cqw,17px);line-height:1.5;white-space:nowrap}
.waage>div:first-child ul{font-size:clamp(14px,4.4cqw,22px);line-height:1.35}
.waage small{display:block;font:400 clamp(11px,2.9cqw,14.5px)/1.35 var(--text);color:var(--mut);margin-top:2px;white-space:normal}
.waage>div:first-child li+li{margin-top:8px}
.waage>div+div li{padding-left:22px;position:relative}
.waage>div+div li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:6px;border-left:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);transform:rotate(-45deg)}
.modelle{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2.4vw,28px);margin-top:clamp(36px,6vw,72px)}
.etikett{background:var(--weiss);color:var(--tinte);padding:clamp(20px,2.6vw,34px);position:relative;display:flex;flex-direction:column;gap:12px;min-width:0;
  --z:radial-gradient(circle at 50% 0,transparent 7px,#000 7.5px);-webkit-mask:var(--z) 0 0/22px 100% repeat-x;mask:var(--z) 0 0/22px 100% repeat-x;padding-top:clamp(30px,3.4vw,44px)}
.etikett h3{font-size:clamp(26px,3vw,38px);letter-spacing:-.02em;margin:0}
.etikett p{color:var(--mut)}
.etikett ul{margin:0;padding:0;list-style:none;border-top:1.5px dashed var(--linie)}
.etikett li{padding:9px 0;border-bottom:1.5px dashed var(--linie);font-weight:600}
.etikett .knopf{align-self:flex-start;margin-top:auto}
.egrafik{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;background:var(--beige);padding:10px}
.egrafik.eins{grid-template-columns:1fr}
.egrafik svg{display:block;width:100%;height:auto}
.etitel{display:flex;justify-content:space-between;align-items:center;gap:16px}
.etikett .knopf:not(.blau){background:var(--blau)}
.stempel{flex:none;width:104px;height:104px;margin-block:-18px -6px;border-radius:50%;border:3px solid var(--blau);color:var(--blau);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px;transform:rotate(9deg);background:rgba(244,239,230,.9);z-index:1}
.stempel b{font:500 27px var(--zahl);line-height:1}
.in .stempel{animation:stempeln .5s cubic-bezier(.3,1.6,.5,1) .6s both}
@keyframes stempeln{from{opacity:0;transform:rotate(-14deg) scale(1.9)}}
.optionen{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.optionen span{font-size:12.5px;color:var(--mut);width:100%}
.optionen b{font-weight:600;font-size:14.5px;border:1.5px solid var(--tinte);border-radius:99px;padding:4px 12px}
.platzh{font-size:11.5px;color:var(--mut)}
.etikett.test{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(18px,3vw,40px);align-items:center}
.einh{display:flex;flex-direction:column;gap:12px;min-width:0}
.efoto{background:var(--beige);overflow:hidden}
.efoto img{aspect-ratio:16/9;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.etikett:hover .efoto img{transform:scale(1.05)}
.mass10{position:relative}
.mass10 svg{position:absolute;inset:0;width:100%;height:100%}
.mass10 path{fill:none;stroke:var(--tinte);stroke-width:1.6}
.mass10 span{position:absolute;font-size:13px;background:rgba(244,239,230,.9);padding:1px 6px;transform:translate(-50%,-50%)}
.eart{font-size:12.5px;color:var(--mut)}
.eart+h3{margin-top:-8px}
.dazu{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2.4vw,28px);border-top:2px solid var(--blau);padding-top:16px}
.dazu span{font-size:13px;color:var(--blau)}
.dazu p{color:var(--tinte);font-weight:600;margin-top:6px}
.dazu .optionen{margin-top:8px}
.dazu .optionen b{border-color:var(--blau);color:var(--blau)}

/* Buchen als Preisblatt: Easy Test als Streifen, Analytics und Vision im Vergleich */
.a-klein{font-size:13px;color:var(--blau);display:block;margin-bottom:6px}
.a-kopf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,5vw,72px);align-items:end}
.a-kopf p{color:var(--mut);font-size:19px}
.a-teile{margin-top:clamp(32px,4vw,52px);border-top:2px solid var(--tinte)}
.a-teile div{display:grid;grid-template-columns:150px 1fr;gap:18px;padding:13px 0;border-bottom:1px solid var(--linie);align-items:baseline}
.a-teile span{font-size:13px;color:var(--mut)} .a-teile p{max-width:none;font-weight:600}
.a-teile i{font-style:normal;color:var(--linie);margin:0 9px}
.a-haken{list-style:none;margin:0;padding:0} .a-haken li{padding-left:22px;position:relative}
.a-haken li::before{content:"";position:absolute;left:0;top:.55em;width:12px;height:6px;border-left:2.5px solid var(--blau);border-bottom:2.5px solid var(--blau);transform:rotate(-45deg)}
.a-easy{margin-top:clamp(36px,5vw,64px);background:var(--weiss);border-radius:16px;overflow:hidden;box-shadow:inset 6px 0 0 var(--blau);display:grid;grid-template-columns:minmax(0,300px) minmax(0,1.3fr) minmax(0,1fr) auto;gap:clamp(18px,2.4vw,34px);align-items:center;padding:16px clamp(18px,2.4vw,34px) 16px 22px}
.a-noch{margin-top:clamp(56px,8vw,112px)}
.a-noch h3{font-size:clamp(28px,3.6vw,46px);letter-spacing:-.025em;line-height:1.04}
.a-noch p{font-size:clamp(17px,1.6vw,22px);color:var(--mut);margin-top:8px;max-width:none}
.a-noch + .a-easy{margin-top:24px}
.a-teile + .a-tabw{margin-top:clamp(36px,5vw,64px)}
.a-easy img{aspect-ratio:4/3;object-fit:cover;border-radius:10px}
.a-easy h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em}
.a-easy p{color:var(--mut);font-size:15.5px} .a-easy ul{font-size:15px;font-weight:600;display:flex;flex-direction:column;gap:6px}
.a-preis{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.a-preis b{font:500 clamp(34px,3.6vw,46px)/1 var(--zahl);letter-spacing:-.03em} .a-preis span{font-size:12.5px;color:var(--mut);margin-bottom:12px}
.a-tabw{margin-top:clamp(20px,2.4vw,28px);background:var(--weiss);border-radius:16px;overflow:hidden}
.a-tab{width:100%;border-collapse:collapse}
.a-tab th,.a-tab td{padding:13px clamp(14px,2vw,28px);border-bottom:1px solid var(--linie);text-align:left;vertical-align:middle}
.a-tab thead th{vertical-align:top;padding-top:clamp(14px,2vw,28px);padding-bottom:20px;width:36%;border-bottom:2px solid var(--tinte);font-weight:400}
.a-tab thead th:first-child{width:28%;vertical-align:bottom;font:500 13px var(--zahl);color:var(--mut)}
.a-tab thead img{aspect-ratio:16/8;object-fit:cover;margin-bottom:16px;border-radius:10px}
.a-tab thead h3{font-size:clamp(24px,2.6vw,32px);letter-spacing:-.02em;margin:2px 0 6px} .a-tab thead p{color:var(--mut);font-size:15.5px}
.a-tab tbody th{font-weight:600;font-size:16px}
.a-tab td,.a-tab thead th+th{border-left:1px solid var(--linie)}
.a-tab tbody tr{transition:background .2s} .a-tab tbody tr:hover{background:var(--papier)}
.a-ja{display:inline-block;width:18px;height:9px;border-left:3px solid var(--blau);border-bottom:3px solid var(--blau);transform:rotate(-45deg) translateY(-3px)}
.a-nein{display:inline-block;width:14px;border-top:2px solid var(--linie)}
.a-tab tfoot td{border-bottom:0;padding-block:20px clamp(18px,2vw,28px)}
.a-fuss{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(20px,4vw,56px);margin-top:26px}
.a-fuss p{font-weight:600;max-width:none}
.a-opt{display:flex;flex-wrap:wrap;gap:14px 26px}
.a-opt small{display:block;font-size:12px;color:var(--mut);margin:6px 0 0 14px}
.a-paar{display:inline-flex;align-items:center;border:1.5px solid var(--blau);border-radius:99px;color:var(--blau);font-size:14.5px;white-space:nowrap}
.a-paar b{font-weight:600;padding:5px 14px}
.a-paar i{font:500 15px var(--zahl);font-style:normal;margin:0 -6px}
.a-paar.wahl i{font-size:11px;background:var(--blau);color:var(--weiss);border-radius:99px;padding:3px 8px;margin:0 -4px}
@media (max-width:820px){
  .a-kopf,.a-easy,.a-fuss{grid-template-columns:minmax(0,1fr)}
  .a-teile div{grid-template-columns:1fr;gap:4px} .a-preis{align-items:flex-start;text-align:left}
  .a-tab thead th:first-child,.a-tab tbody th,.a-tab tfoot td:first-child{display:none} .a-tab td::before{content:attr(data-m);display:block;font-size:13px;color:var(--mut)} .a-tab thead th{width:50%}
}

/* Häufige Fragen */
.fragen{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.25fr);gap:clamp(20px,5vw,80px);align-items:start}
.faq{border-bottom:1px solid var(--linie)}
.faq details{border-top:1px solid var(--linie)}
.faq summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:1em;padding:16px 0;font-weight:700;font-size:clamp(17px,1.35vw,20px);line-height:1.25}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:14px;height:14px;margin-top:5px;background:linear-gradient(var(--blau),var(--blau)) center/100% 2px no-repeat,linear-gradient(var(--blau),var(--blau)) center/2px 100% no-repeat;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--blau)}
.faq summary:focus-visible{outline:2px solid var(--blau);outline-offset:2px}
.faq p{margin:0 0 18px;max-width:60ch;color:var(--mut)}
@media(max-width:820px){.fragen{grid-template-columns:minmax(0,1fr)}}
@media(prefers-reduced-motion:reduce){.faq summary::after{transition:none}}
/* Kontakt: Formular oder Termin */
.kontakt{align-items:start}
.kontakt .karte{margin-top:28px;max-width:320px}
.kbox{min-width:0}
.schalter{display:inline-flex;background:#262A31;border-radius:99px;padding:4px;margin-bottom:18px}
.schalter button{appearance:none;border:0;background:none;color:var(--nmut);font:600 15px var(--text);padding:9px 18px;border-radius:99px;cursor:pointer}
.schalter button[aria-selected="true"]{background:var(--papier);color:var(--tinte)}
.schalter button:focus-visible{outline:2px solid var(--papier);outline-offset:2px}
#p-form{display:flex;flex-direction:column;gap:12px} #p-form[hidden],#p-termin[hidden]{display:none}
#p-form .zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
#p-form label{display:flex;flex-direction:column;gap:5px;font-size:13.5px;color:var(--nmut);min-width:0}
#p-form input,#p-form textarea{font:inherit;font-size:16px;color:var(--papier);background:#22262C;border:1.5px solid var(--nlinie);border-radius:4px;padding:11px 12px;width:100%}
#p-form input:focus,#p-form textarea:focus{outline:none;border-color:var(--papier)}
#p-form textarea{resize:vertical}
#p-form .knopf{align-self:flex-start;border:0;cursor:pointer;font:600 16px var(--text)}
.khin{font-size:14px;color:var(--nmut);min-height:1.4em;margin:0}
.terminrahmen{border-radius:8px;overflow:hidden;background:#fff;min-height:420px}
.terminrahmen iframe{display:block;width:100%;height:780px;border:0}
.terminrahmen p{padding:24px;color:#57534D}
.terminhilfe{font-size:14px;margin-top:10px}
.terminhilfe a{color:inherit}
.termin{border:1.5px dashed var(--nlinie);border-radius:6px;padding:24px;display:flex;flex-direction:column;gap:12px;align-items:flex-start;min-height:300px;justify-content:center}
/* Suchspiel */
.sensor .knopf{margin-top:26px;border:0;cursor:pointer;font:600 16px var(--text)}
#spiel{width:min(1120px,94vw,calc((94vh - 190px)*16/9));width:min(1120px,94vw,calc((94dvh - 190px)*16/9));min-width:min(300px,94vw);max-height:94vh;border:0;padding:0;background:var(--papier);color:var(--tinte);border-radius:8px;box-shadow:0 40px 100px rgba(0,0,0,.5);overflow:auto}
#spiel::backdrop{background:rgba(14,16,20,.78)}
.spk{display:flex;justify-content:space-between;align-items:center;padding:16px 20px 0}
.spk h3{font-size:clamp(18px,2.4vw,24px);margin:0}
#sp-zu{appearance:none;border:0;background:none;font:400 30px/1 var(--text);color:var(--tinte);cursor:pointer;padding:2px 8px;border-radius:4px}
#sp-zu:hover{background:var(--beige)} #sp-zu:focus-visible{outline:2px solid var(--tinte)}
.sph{padding:4px 20px 12px;max-width:none;color:var(--mut);font-size:clamp(13.5px,1.6vw,16px);line-height:1.4;min-height:2.8em}
.spb{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--nacht)}
.spz{position:absolute;inset:0;transform-origin:66.0714% 23.8625%;transition:transform 1.6s cubic-bezier(.45,0,.2,1)}
.spz>img{position:absolute;inset:0;width:100%;height:100%}
.spz .det{left:55.0595%;top:19.8854%;width:16.6667%;height:16.6667%;opacity:0;transition:opacity .5s}
.spz svg{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .4s}
.spb.zoom .spz{transform:scale(6)}
.spb.zoom .det{opacity:1;transition-delay:1.2s}
.spb.zoom svg{opacity:1;transition-delay:1.9s}
.spf{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 12px;padding:12px 20px 14px}
.spf .knopf{border:0;cursor:pointer;font:600 16px var(--text)}
.spf span{font-size:12.5px;color:var(--mut)}
/* Bewegung beim Überfahren */
.knopf{transition:transform .2s ease,box-shadow .2s ease,filter .2s ease}
.knopf:hover{transform:translateY(-2px);box-shadow:0 10px 22px rgba(29,32,38,.25);filter:brightness(1.08)}
.knopf:active{transform:translateY(0);box-shadow:none}
.knopf.rand:hover{box-shadow:inset 0 0 0 1.5px var(--blau),0 10px 22px rgba(0,82,204,.18);background:rgba(0,82,204,.06)}
.schalter button:not([aria-selected="true"]):hover{color:var(--papier)}
.bw{display:block;overflow:hidden}
.bw img{transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.qp:hover .bw img{transform:scale(1.06)}
.qp{transition:box-shadow .3s ease,transform .3s ease}
.qp:not(.qintro):hover{box-shadow:0 18px 40px rgba(29,32,38,.14);transform:translateY(-3px)}
/* Fuß mit Siegel */
.fuss{background:var(--papier);padding:clamp(40px,6vw,80px) var(--rand) 28px}
.trust{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,5vw,72px)}
.siegelw{position:relative;width:clamp(150px,15vw,196px);aspect-ratio:1;flex:none}
.siegel{position:absolute;inset:0;width:100%;height:100%}
.skern{position:absolute;left:17.5%;top:17.5%;width:65%;height:65%;border-radius:50%;object-fit:cover;box-shadow:0 6px 16px rgba(29,32,38,.22)}
.swort{position:absolute;left:0;right:0;top:67%;text-align:center;color:#F4EFE6;font:800 clamp(10.5px,1.05vw,13.5px)/1 var(--text);letter-spacing:.16em;padding-left:.16em}
.siegel .dreh{transform-origin:100px 100px;animation:drehen 40s linear infinite}
@keyframes drehen{to{transform:rotate(360deg)}}
.tb{display:flex;flex-direction:column;gap:10px;min-width:0}
.tb span{font-size:13px;color:var(--mut)}
.tb img{width:auto;height:clamp(34px,4vw,50px);max-width:100%}
.tb img.flach{height:clamp(20px,2.3vw,28px);margin-block:clamp(7px,.85vw,11px)}
.fzeile{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:clamp(28px,4vw,48px);padding-top:18px;border-top:1px solid var(--linie);font-size:14px;color:var(--mut)}
.fzeile span:first-child{margin-right:auto;color:var(--tinte);font-weight:600}
/* Zeitachse */
.zeit{margin-top:34px}
.zskala{position:relative;color:var(--tinte)}
.zlauf{position:absolute;left:calc(var(--p,0)*100%);bottom:-2px;width:3px;height:34px;background:var(--blau);transform:translateX(-1px)}
.zlauf::after{content:"";position:absolute;left:-6px;top:-8px;width:15px;height:15px;border-radius:50%;background:var(--blau)}
.zeit ol{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0 22px}
.zeit li{opacity:.38;transition:opacity .4s;min-width:0} .zeit li.akt{opacity:1}
.zeit li span{display:block;font-size:13px;color:var(--mut)} .zeit li b{display:block;font-size:21px;line-height:1.2;margin:4px 0}
.zeit li em{font-style:normal;color:var(--mut);font-size:15.5px}
/* Datenschutz als Verwandlung */
#menge{margin:18px 0 8px}
.fig2{opacity:calc(1 - var(--q,0));transition:opacity .15s linear}
.pkt2{opacity:var(--q,0);transition:opacity .15s linear}
.haken.vier{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 26px}
@media (max-width:820px){
  .kopf,.beleg,.fall,.technik,.dash,.ablauf,.schutz,.fragen,.kontakt{grid-template-columns:1fr}
  .fall.dreh>div:first-child{order:0} .nav ul{display:none} .buehne{margin-right:0} .marke{font-size:9px;padding-bottom:3px} .marke b{font-size:11px} .buehne .marke:last-child{transform:translate(-50%,3px);padding:0}
  .buehne{margin-block:22px 30px}
  @media (max-width:359px){.fskala ol{font-size:11px}}
  .fstage{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;height:var(--fh,600px);top:var(--ft,0px)}
  .fbilder{margin-right:0;order:-1} .fbilder .fr svg,.fm{display:none} .fbilder{width:var(--bw,100%);justify-self:center} .ftext{min-height:var(--th,340px);font-size:calc(16px*var(--fk,1))} .ftext>div{justify-content:flex-start} .ftext h2{font-size:1.75em;margin-bottom:.4em} .ftext p.mut{font-size:1.06em} .ftext .std{font-size:.8em;margin-top:.9em} .ftext .sw{gap:.55em;margin-top:.8em} .ftext .sw li{font-size:.95em} .ftext .sw b{font-size:1.15em} .fstage{padding-block:var(--fo,16px) var(--fu,96px)} .fskala{bottom:22px} .frat{left:30%;top:60%}
  .schirm{margin-left:0;transform:none} .haken,.pakete{grid-template-columns:1fr} .pakete>div+div{border-left:0;padding-left:0;border-top:1px solid var(--linie)}
  .quer{height:auto;padding:48px 0} .qstage{position:static;height:auto;overflow:visible} .qtrack{grid-template-columns:minmax(0,1fr)}
  #p-form .zwei{grid-template-columns:1fr}
  .bkopf,.modelle,.waage,.etikett.test,.dazu{grid-template-columns:1fr} .waage>div+div{border-left:0;padding-left:0}
  .zplan,.dreier,.dgrid{grid-template-columns:1fr} .dtab .bk{display:none} .dreier li{border-top:1px solid var(--linie);margin-top:14px} .dreier li:first-child{border-top:0;margin-top:0}
  .zeit ol{grid-template-columns:1fr;gap:18px} .zskala{display:none} .zeit li{opacity:1} .haken.vier{grid-template-columns:1fr}
  .einsatz{grid-template-columns:minmax(0,1fr)}
}
/* Handy-Feinschliff (umbau_handy.py): die drei Portal-Umschalter in einer Zeile, Tippziele ab 44 px, Kleintext größer */
@media (max-width:820px){
  .dbar{padding:6px 8px} .dbar i{display:none} .dwahl{margin-left:0;flex-wrap:nowrap;width:100%;gap:2px} .dwahl button{flex:1 1 auto;padding:13px 4px;font-size:13.5px;white-space:nowrap}
  .a-opt small{font-size:14px} .a-tab td::before{font-size:14px}
  .fzeile{font-size:16px;gap:0 22px} .fzeile a{display:inline-block;padding:11px 0} .fzeile span:first-child{width:100%;padding:8px 0}
  .schalter button{padding:12px 18px} #p-form label{font-size:16px}
  .kwege a{display:inline-block;padding:9px 0}
}
@media (max-width:379px){.dwahl button{font-size:12.5px;padding-inline:2px}}
@media (prefers-reduced-motion:reduce){.satz span{opacity:1!important;transform:none!important}.balken div i{width:var(--w)}*,*::before,*::after{animation:none!important;transition:none!important}.buehne svg path,.fbilder .fr path{stroke-dashoffset:0}.buehne svg circle,.marke{opacity:1}html{scroll-behavior:auto}}
/* Nur Webfassung */
.nav svg{width:196px;display:block}
.navr{display:flex;align-items:center;gap:clamp(12px,1.8vw,24px)} .markenwahl{display:inline-flex;background:rgba(29,32,38,.08);border-radius:99px;padding:3px;font-size:14px;font-weight:600} .markenwahl a{padding:6px 14px;border-radius:99px;color:var(--mut);text-decoration:none;transition:color .2s,background .2s} .markenwahl a:hover{color:var(--tinte)} .markenwahl a.an,.markenwahl a.an:hover{background:var(--blau);color:#fff} .nav .nk{display:block;box-sizing:border-box;width:88px;text-align:center;padding:10px 0;font-size:15px;line-height:1.2;border:0} .nav a.nk{color:#fff}
@media (max-width:820px){ .nav{gap:8px;padding-inline:14px} .nav svg{width:106px} .nav{padding-top:calc(env(safe-area-inset-top,0px) + 24px)} .navr{gap:8px} .markenwahl{font-size:13px} .markenwahl a{padding:12px 10px;line-height:20px} .nav .nk{padding:13px 12px;width:auto;font-size:14px}}
@media (max-width:379px){.nav img,.nav svg{width:86px} .markenwahl a{padding-inline:8px} .nav .nk{padding-inline:10px}}
.nav a{color:inherit;text-decoration:none}.nav ul{align-items:center}.zu-freunde{font:500 13px var(--zahl);border:1px solid var(--linie);padding:6px 10px;border-radius:3px;transition:background .25s,color .25s,border-color .25s}.nav ul a.zu-freunde:hover{background:#E6000F;border-color:#E6000F;color:#fff;text-decoration:none}.nav ul a:hover{text-decoration:underline;text-underline-offset:5px}.navlogo{display:block}
.ftext h3.wie-h2{font:800 clamp(28px,4.2vw,50px)/1.04 var(--text);letter-spacing:-.025em;margin:0 0 12px;text-wrap:balance;max-width:18ch}
.kwege{margin-top:10px;line-height:1.7}.kwege a{color:inherit;text-decoration:none}.kwege a:hover{text-decoration:underline}
.khin a,.fzeile a{color:inherit}.fzeile a{text-decoration:none}.fzeile a:hover{text-decoration:underline}
.falle{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
#p-form button[disabled]{opacity:.6;cursor:progress}