/* onlinefabrik.com – Entwurf 3 */
@font-face{font-family:"Sora";src:url("../Fonts/sora.woff2") format("woff2");font-weight:300 800;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url("../Fonts/instrument.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --paper:#FAFAF8; --fog:#F3EEE6; --ink:#181B1A; --ink-2:#62676A; --line:#E0DDD4;
  --petrol:#2F5D62; --petrol-d:#1E3E42; --lichen:#BFCDB8; --tint:#E3EBE8;
  --orange:#E2622B; --beige:#F1DFC4;
  --display:"Sora","Segoe UI",system-ui,sans-serif;
  --sans:"Instrument Sans","Segoe UI",system-ui,sans-serif;
  --pad:clamp(20px,4.6vw,80px); --max:1480px;
  --ease:cubic-bezier(.22,1,.36,1);
  --f-hero:clamp(3.1rem,6.9vw,7.4rem);
  --f-h2:clamp(2.1rem,4.4vw,4.3rem);
  --f-lead:clamp(1.08rem,1.35vw,1.3rem);
  --hy:clamp(44px,4.6vw,64px); --lh:clamp(40px,4.4vw,58px); --bh:50px;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:1.0625rem;line-height:1.6;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg{display:block;max-width:100%}
a{color:inherit}
h1,h2,h3{font-family:var(--display);font-weight:600;line-height:1.04;letter-spacing:-.035em;margin:0;text-wrap:balance}
p{margin:0 0 1em;max-width:62ch;text-wrap:pretty}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--petrol);outline-offset:3px;border-radius:6px}
.of-skip{position:absolute;left:12px;top:-60px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;z-index:400;transition:top .2s}
.of-skip:focus{top:12px}
.of-wrap{max-width:var(--max);margin:0 auto;padding-inline:var(--pad)}
.of-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.of-cap{font-size:.95rem;color:var(--ink-2)}

@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .35s var(--ease) both}
::view-transition-new(root){animation:vt-in .6s var(--ease) both}
@keyframes vt-out{to{opacity:0;transform:translateY(-18px)}}
@keyframes vt-in{from{opacity:0;transform:translateY(26px)}}
.of-vt-switch::view-transition-group(*){animation-duration:.7s;animation-timing-function:var(--ease)}

.of-progress{position:fixed;left:0;top:0;height:3px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--orange);z-index:300}

/* Kopf: großes Logo + feste Buttons oben rechts */
.of-top{position:absolute;left:0;right:0;top:0;z-index:20;padding-top:calc(var(--hy) - var(--lh) / 2)}
.of-top .of-wrap{max-width:none}
.of-logo{display:block;height:var(--lh)}
.of-logo img{height:100%;width:auto}
.of-tn{position:fixed;top:calc(var(--hy) - var(--bh) / 2);right:var(--pad);z-index:200;display:flex;gap:8px}
.of-tb{display:inline-flex;align-items:center;gap:.65em;height:var(--bh);padding:0 24px;border-radius:999px;font:inherit;font-weight:600;font-size:1rem;text-decoration:none;border:0;cursor:pointer;white-space:nowrap;transition:background-color .3s ease,color .3s ease,box-shadow .3s ease}
.of-tb.of-cta{background:var(--ink);color:#fff;box-shadow:0 0 0 1.5px rgba(255,255,255,.35)}
.of-tb.of-cta:hover{background:var(--petrol)}
.of-tb.of-menu{background:rgba(250,250,248,.82);-webkit-backdrop-filter:blur(14px) saturate(1.4);backdrop-filter:blur(14px) saturate(1.4);color:var(--ink);box-shadow:inset 0 0 0 1.5px rgba(24,27,26,.16)}
.of-tb.of-menu:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.of-tb .of-ico{width:16px;height:10px;position:relative}
.of-tb .of-ico::before,.of-tb .of-ico::after{content:"";position:absolute;left:0;right:0;height:2px;background:currentColor;border-radius:2px}
.of-tb .of-ico::before{top:0}.of-tb .of-ico::after{bottom:0;right:30%}
@media (max-width:560px){:root{--bh:46px}.of-tb.of-cta{display:none}.of-tb{padding:0 20px}}

/* ===== MENÜ (Vollbild) ===== */
.of-cmd{border:0;padding:0;margin:0;width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;color:#FAFAF8;overflow:hidden;
  background:radial-gradient(900px circle at 86% 6%,rgba(226,98,43,.22),transparent 60%),radial-gradient(800px circle at 0% 100%,rgba(241,223,196,.09),transparent 60%),var(--petrol-d)}
.of-cmd::backdrop{background:transparent}
.of-cmd :focus-visible{outline-color:var(--beige)}
.of-mn{height:100%;display:flex;flex-direction:column;padding:0 var(--pad);position:relative}
.of-mn-top{display:flex;align-items:center;gap:clamp(12px,2vw,28px);padding-top:calc(var(--hy) - var(--lh) / 2);padding-bottom:8px;flex:none}
.of-mn-top .of-logo{flex:none}
.of-mn-search{flex:1;max-width:520px;margin-left:auto;margin-right:calc(clamp(120px,10vw,150px) + 8px);display:flex;align-items:center;gap:12px;height:var(--bh);padding:0 18px 0 20px;border-radius:999px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22);min-width:0;transition:background-color .3s,box-shadow .3s}
.of-mn-search:focus-within{background:rgba(255,255,255,.12);box-shadow:inset 0 0 0 1.5px var(--beige)}
.of-mn-search svg{width:20px;height:20px;flex:none;color:rgba(255,255,255,.7)}
.of-mn-search input{flex:1;min-width:0;border:0;background:transparent;font:inherit;font-size:1rem;color:#fff;outline:0;padding:0}
.of-mn-search input::placeholder{color:rgba(255,255,255,.55)}
.of-mn-search input::-webkit-search-cancel-button{display:none}
.of-mn-search kbd{font:inherit;font-size:.8rem;color:rgba(255,255,255,.7);border:1px solid rgba(255,255,255,.3);border-radius:6px;padding:.05em .5em}
.of-mn-close{position:absolute;top:calc(var(--hy) - var(--bh) / 2);right:var(--pad);z-index:5;display:inline-flex;align-items:center;gap:.65em;height:var(--bh);padding:0 22px 0 24px;border-radius:999px;border:0;background:rgba(255,255,255,.1);color:#fff;font:inherit;font-weight:600;font-size:1rem;cursor:pointer;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);transition:background-color .3s,color .3s}
.of-mn-close:hover{background:var(--beige);color:var(--ink)}
.of-mn-close svg{width:16px;height:16px}
.of-mn-body{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:clamp(24px,4vw,90px);align-items:center;padding:clamp(6px,1.5vh,20px) 0}
.of-mn-left{min-width:0;max-height:100%;overflow:auto;overscroll-behavior:contain;scrollbar-width:none;padding:.2em 0 .2em .6em}
.of-mn-left::-webkit-scrollbar{display:none}
.of-mn-list{display:grid;grid-template-columns:max-content minmax(0,1fr);column-gap:clamp(20px,3vw,60px);row-gap:clamp(0px,.6vh,8px)}
.of-mn-li{display:contents}
.of-mn-main{grid-column:1;grid-row:calc(var(--i) + 1);position:relative;display:flex;align-items:flex-start;gap:.3em;width:fit-content;max-width:100%;text-decoration:none;color:#FAFAF8;font-family:var(--display);font-weight:600;font-size:clamp(2.2rem,min(5.4vw,8.4vh),5.4rem);letter-spacing:-.05em;line-height:1.04;transition:color .3s,opacity .45s}
.of-mk{flex:none;display:block;overflow:hidden;padding:.03em .08em .16em 0;margin:-.03em -.08em -.16em 0}
.of-tx{display:block;transform:translateY(115%);transition:transform 1s var(--ease);transition-delay:calc(var(--i) * 60ms)}
.of-cmd.of-ready .of-tx{transform:none;transition-delay:calc(.3s + var(--i) * 70ms)}
.of-mn-main sup{display:none}
.of-mn-main::before{content:"";position:absolute;left:-.4em;top:.5em;width:.2em;height:.2em;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform .4s var(--ease)}
.of-mn-main.of-on,.of-mn-main:focus-visible{color:var(--beige)}
.of-mn-main.of-on::before,.of-mn-main:focus-visible::before{transform:scale(1)}
.of-mn-main[aria-current=page]{color:var(--beige)}
.of-mn-list.of-has-on .of-mn-main:not(.of-on){opacity:.32}
.of-mn-sub{--sf:clamp(1.35rem,min(2.7vw,5vh),3.4rem);grid-column:2;grid-row:1 / span 6;align-self:start;padding-top:.3em;opacity:0;visibility:hidden;transform:translateX(-16px);transition:opacity .3s,transform .5s var(--ease),visibility 0s .3s}
.of-mn-sub.of-on{opacity:1;visibility:visible;transform:none;transition:opacity .5s .06s,transform .8s var(--ease) .06s,visibility 0s}
.of-mn-sub::before{content:attr(aria-label);display:block;column-span:all;font-size:clamp(.95rem,1.05vw,1.15rem);font-weight:600;color:var(--beige);margin-bottom:.8em}
.of-mn-sub li{break-inside:avoid}
.of-mn-sub[data-k=kun]{--sf:clamp(1.15rem,min(2.2vw,3.9vh),2.7rem);columns:2 calc(var(--sf) * 9.5);column-gap:2.4em;max-width:calc(var(--sf) * 24)}
.of-mn-sub a{display:block;padding:.2em 0;font-family:var(--display);font-weight:500;font-size:var(--sf);letter-spacing:-.03em;line-height:1.2;color:rgba(255,255,255,.78);text-decoration:none;transition:color .25s,padding .45s var(--ease)}
.of-mn-sub a:hover,.of-mn-sub a:focus-visible{color:#fff;padding-left:12px}
.of-mn-res{display:none}
.of-cmd.of-searching .of-mn-nav{display:none}
.of-cmd.of-searching .of-mn-res{display:block}
.of-grp{padding:4px 0 12px}
.of-grp[hidden]{display:none}
.of-grp h3{font-family:var(--sans);font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--beige);padding:8px 14px 6px}
.of-grp li[hidden]{display:none}
.of-opt{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 14px;border-radius:14px;text-decoration:none;color:#fff;transition:background-color .2s}
.of-opt b{font-family:var(--display);font-weight:500;font-size:clamp(1.15rem,2vw,1.6rem);letter-spacing:-.03em}
.of-opt small{color:rgba(255,255,255,.6);font-size:.9rem;text-align:right;margin-left:auto}
.of-opt .of-x{width:14px;height:14px;flex:none;align-self:center;opacity:.5}
.of-opt:hover,.of-opt.of-on{background:rgba(255,255,255,.09)}
.of-opt.of-on{box-shadow:inset 0 0 0 1.5px var(--beige)}
.of-opt[aria-current=page] b::after{content:" · aktuell";font-weight:400;color:rgba(255,255,255,.6);font-family:var(--sans);font-size:.7em}
.of-cmd-empty{max-width:none;margin:0;padding:24px 14px;color:rgba(255,255,255,.75)}
.of-cmd-empty[hidden]{display:none}
.of-cmd-empty a{color:var(--beige)}
/* Vorschau rechts */
.of-mn-pv{position:relative;align-self:stretch;min-height:0}
.of-pv{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transform:translateY(20px) scale(.98);transition:opacity .4s,transform .9s var(--ease);pointer-events:none}
.of-pv-idle{opacity:1;transform:none}
.of-pv:not(.of-pv-idle){display:none}
.of-pv-idle{text-align:center}
.of-bigpill{position:relative;width:min(100%,400px);aspect-ratio:2/1;border-radius:999px;background:var(--orange);margin:0 auto 1.6rem}
.of-bigpill::after{content:"";position:absolute;top:50%;left:6%;width:36%;aspect-ratio:1;border-radius:50%;background:var(--beige);translate:0 -50%;transition:left 1.4s var(--ease) .7s}
.of-cmd.of-ready .of-bigpill::after{left:58%}
.of-pv-idle p{font-family:var(--display);font-weight:600;font-size:clamp(1.2rem,2vw,1.8rem);letter-spacing:-.035em;line-height:1.15;color:var(--beige);margin:0}
.of-lp{position:relative;width:min(100%,520px);aspect-ratio:1/1}
.of-lp img{position:absolute;width:78%;height:auto;filter:drop-shadow(0 26px 24px rgba(0,0,0,.4))}
.of-lp img:nth-child(1){left:0;top:0;rotate:-5deg}
.of-lp img:nth-child(2){right:0;top:30%;rotate:4deg;z-index:2}
.of-lp img:nth-child(3){left:8%;bottom:0;rotate:-2deg;z-index:3}
.of-tiles{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(100%,460px)}
.of-tiles span{aspect-ratio:1.15;border-radius:26px;background:var(--c);color:var(--t,var(--ink));padding:18px 20px;display:flex;align-items:flex-end;font-family:var(--display);font-weight:600;font-size:clamp(1.05rem,1.7vw,1.5rem);letter-spacing:-.035em;line-height:1.1}
.of-lgs{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;width:min(100%,460px)}
.of-lgt{aspect-ratio:300/190;border-radius:20px;background:#F3EEE6;display:grid;place-items:center}
.of-lgt img{width:66%;height:auto;mix-blend-mode:multiply}
.of-ag{display:flex;align-items:flex-end;gap:22px}
.of-ag img{width:min(46%,230px);height:auto;border-radius:26px;box-shadow:0 30px 50px -28px rgba(0,0,0,.6)}
.of-ag p{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(1.1rem,1.7vw,1.5rem);letter-spacing:-.03em;line-height:1.2;color:var(--beige)}
.of-ag p b{display:block;font-size:clamp(3.4rem,6vw,5.6rem);line-height:.9;letter-spacing:-.07em;color:var(--orange)}
.of-sv{display:grid;gap:10px;width:min(100%,420px)}
.of-sv span{padding:18px 24px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.6vw,1.4rem);letter-spacing:-.03em}
.of-kn p{margin:0 0 .5em;font-family:var(--display);font-weight:600;font-size:clamp(1.3rem,2.3vw,2.2rem);letter-spacing:-.045em;line-height:1.1;color:#fff;max-width:none;overflow-wrap:anywhere}
.of-kn p.of-s{font-family:var(--sans);font-weight:500;font-size:1rem;letter-spacing:0;color:var(--beige);margin-top:1em}
/* unten */
.of-mn-bot{flex:none;display:flex;justify-content:space-between;align-items:center;gap:14px 28px;flex-wrap:wrap;padding:clamp(14px,2vw,22px) 0 clamp(16px,2.2vw,28px);border-top:1px solid rgba(255,255,255,.16)}
.of-so-row{display:flex;flex-wrap:wrap;gap:8px}
.of-so{display:inline-flex;align-items:center;gap:.6em;height:44px;padding:0 18px 0 14px;border-radius:999px;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.28);color:#fff;text-decoration:none;font-weight:500;font-size:.95rem;transition:background-color .3s,color .3s,box-shadow .3s}
.of-so:hover,.of-so:focus-visible{background:var(--beige);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--beige)}
.of-so svg{width:18px;height:18px;flex:none}
.of-mn-contact{display:flex;gap:6px 26px;flex-wrap:wrap;margin:0;max-width:none}
.of-mn-contact a{color:rgba(255,255,255,.85);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.3);transition:color .3s,border-color .3s}
.of-mn-contact a:hover{color:var(--beige);border-color:var(--beige)}
.of-so-foot{margin-top:clamp(24px,3vw,40px)}
@media (max-width:900px){
  .of-cmd{overflow:auto}
  .of-mn{height:auto;min-height:100%}
  .of-mn-top{flex-wrap:wrap;row-gap:12px;padding-bottom:6px}
  .of-mn-search{order:3;flex:1 0 100%;max-width:none;margin:0}
  .of-mn-search kbd{display:none}
  .of-mn-body{display:block;padding:14px 0 10px}
  .of-mn-left{overflow:visible;max-height:none;padding-left:0}
  .of-mn-pv{display:none}
  .of-mn-list{display:block}
  .of-mn-li{display:block;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.14)}
  .of-mn-main{font-size:clamp(2.1rem,9.5vw,3rem)}
  .of-mn-main::before{display:none}
  .of-tx{transform:none}
  .of-mn-sub{opacity:1;visibility:visible;transform:none;padding:6px 0 0;display:flex;flex-wrap:wrap;gap:6px}
  .of-mn-sub::before{display:none}
  .of-mn-sub[data-k=kun]{columns:auto;column-gap:6px;max-width:none}
  .of-mn-sub a{font-family:var(--sans);font-size:.95rem;font-weight:500;padding:.4em .95em;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);color:rgba(255,255,255,.85)}
  .of-mn-sub a:hover,.of-mn-sub a:focus-visible{padding-left:.95em;background:var(--beige);color:var(--ink)}
  .of-mn-list.of-has-on .of-mn-main:not(.of-on){opacity:1}
  .of-mn-bot{padding-top:18px}
}
@media (max-width:560px){.of-mn-close{padding:0 18px}.of-mn-close span{font-size:.95rem}}

/* Cursor */
.of-cur{position:fixed;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--orange);pointer-events:none;z-index:500;opacity:0;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),opacity .3s;display:grid;place-items:center;color:#fff;font-size:.78rem;font-weight:600}
.of-cur.of-on{opacity:1}
.of-cur.of-big{width:88px;height:88px;margin:-44px 0 0 -44px}
.of-cur span{opacity:0;transition:opacity .2s}
.of-cur.of-big span{opacity:1}
@media (hover:none),(pointer:coarse){.of-cur{display:none}}

/* Buttons – ruhig: nur Farbwechsel */
.of-btn{display:inline-flex;align-items:center;gap:.65em;padding:.95em 1.6em;border-radius:999px;background:var(--ink);color:#fff;font:inherit;font-weight:600;text-decoration:none;border:0;cursor:pointer;transition:background-color .35s ease,color .35s ease,box-shadow .35s ease}
.of-btn:hover,.of-btn:focus-visible{background:var(--petrol)}
.of-btn.of-ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.of-btn.of-ghost:hover,.of-btn.of-ghost:focus-visible{background:var(--ink);color:#fff}
.of-btn svg{width:1.05em;height:1.05em;flex:none}
.of-cta{display:flex;flex-wrap:wrap;gap:12px}

/* ===== HERO ===== */
.of-hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;padding:clamp(110px,16vh,160px) 0 clamp(60px,10vh,110px);isolation:isolate}
.of-glow{position:absolute;inset:0;z-index:-2;background:radial-gradient(620px circle at var(--mx,30%) var(--my,40%),rgba(47,93,98,.11),transparent 60%);-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,#000 55%,transparent 100%)}
.of-hero .of-wrap{width:100%;position:relative;max-width:none}
.of-hero-copy{max-width:min(700px,48vw)}
.of-hero h1{font-size:var(--f-hero);line-height:1;letter-spacing:-.045em;font-weight:650}
.of-ln{display:block;overflow:hidden;padding:.22em 0 .16em;margin:-.22em 0 -.16em}
.of-ln>span{display:block;transform:translateY(115%);transition:transform 1.3s var(--ease);transition-delay:calc(var(--d,0) * 1ms)}
.of-is-in .of-ln>span{transform:none}
.of-hero .of-lead{font-size:var(--f-lead);line-height:1.55;color:var(--ink-2);max-width:42ch;margin:clamp(22px,3vw,36px) 0 clamp(26px,3vw,40px)}
.of-rise{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1.2s var(--ease);transition-delay:calc(.6s + var(--d,0) * 1ms)}
.of-is-in .of-rise{opacity:1;transform:none}

/* Hero-Element: „Website entsteht“ */
.of-stage{position:absolute;right:calc(var(--pad) + min(45vw,680px) * .047);top:50%;width:min(45vw,680px);translate:0 -47%;container-type:inline-size;perspective:1800px;opacity:0;animation:stage-in 1.4s var(--ease) .5s forwards}
@keyframes stage-in{from{opacity:0;translate:0 -40%}to{opacity:1;translate:0 -47%}}
.of-stage-in{position:relative;transform-style:preserve-3d;transform:rotateX(calc(3deg + var(--py,0) * -2deg)) rotateY(calc(-9deg + var(--px,0) * 4deg));transition:transform .35s ease-out}
.of-bw{position:relative;font-size:2.4cqw;background:#fff;border-radius:2.2em;overflow:hidden;box-shadow:0 0 0 1px var(--line),0 4.4em 6em -3.2em rgba(24,27,26,.42)}
.of-bw-bar{height:3.6em;display:flex;align-items:center;gap:.6em;padding:0 1.5em;background:var(--fog);border-bottom:1px solid var(--line)}
.of-bw-bar>i{width:.95em;height:.95em;border-radius:50%;background:#D9D3C5}
.of-url{margin-left:1.4em;flex:1;max-width:62%;height:2.2em;border-radius:1.1em;background:#fff;display:flex;align-items:center;gap:.7em;padding:0 1.1em;font-size:1em;color:var(--ink-2);white-space:nowrap;overflow:hidden}
.of-lock{width:.85em;height:.85em;border-radius:50%;background:#CFC9BB;flex:none;transition:background-color .6s}
.of-stage.of-live .of-lock{background:var(--petrol)}
.of-bw-body{padding:2.1em 2.3em 2.5em;display:grid;gap:2.1em}
[data-st]{background:#ECE7DC;transition:background-color .9s ease,transform 1s var(--ease),opacity .8s ease}
[data-st].of-on{background:var(--f,#1a1d1c)}
.of-b-nav{display:flex;align-items:center;gap:1.6em;height:2.6em}
.of-lg{width:7.6em;height:2.3em;border-radius:1.15em;--f:var(--orange)}
.of-nl{width:4.2em;height:.95em;border-radius:.5em;--f:#CFC9BB}
.of-btn-m{width:6.4em;height:2.3em;border-radius:1.15em;margin-left:auto;--f:var(--ink)}
.of-b-hero{display:grid;grid-template-columns:1.22fr 1fr;gap:2.2em;align-items:center}
.of-b-img{position:relative;aspect-ratio:1.22;border-radius:1.7em;overflow:hidden}
.of-b-img::before{content:"";position:absolute;inset:0;background:linear-gradient(150deg,var(--petrol),#6F9585 58%,var(--lichen));opacity:0;transition:opacity 1.1s ease}
.of-b-img.of-on::before{opacity:1}
.of-b-img.of-on{background:#ECE7DC}
.of-sun{position:absolute;right:15%;top:15%;width:27%;aspect-ratio:1;border-radius:50%;background:var(--orange);transform:scale(0);transition:transform 1.1s var(--ease) .35s}
.of-b-img.of-on .of-sun{transform:none}
.of-b-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;background:var(--beige);clip-path:polygon(0 62%,28% 22%,52% 56%,76% 18%,100% 52%,100% 100%,0 100%);transform:translateY(102%);transition:transform 1.1s var(--ease) .15s}
.of-b-img.of-on::after{transform:none}
.of-b-txt{display:grid;gap:1.05em;align-content:center}
.of-h{height:2.1em;border-radius:1.05em;transform-origin:left center;transform:scaleX(.35);--f:var(--ink)}
.of-h.of-on{transform:none}
.of-h.of-h2{width:72%}
.of-p{height:.85em;border-radius:.45em;--f:#BDB8AA}
.of-p.of-p2{width:78%}
.of-cta-m{width:8.4em;height:2.7em;border-radius:1.35em;margin-top:.5em;--f:var(--orange)}
.of-b-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5em}
.of-cd{position:relative;height:7.4em;border-radius:1.5em;--f:#fff}
.of-cd.of-on{box-shadow:inset 0 0 0 1px var(--line)}
.of-cd i{position:absolute;left:1.3em;top:1.3em;width:2.5em;height:2.5em;border-radius:50%;background:var(--c);transform:scale(0);transition:transform .9s var(--ease) .3s}
.of-cd.of-on i{transform:none}
.of-cd::after{content:"";position:absolute;left:1.3em;right:1.3em;bottom:1.5em;height:.75em;border-radius:.4em;background:rgba(24,27,26,.14);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--ease) .45s}
.of-cd.of-on::after{transform:none}
.of-ptr{position:absolute;left:50%;top:50%;z-index:6;display:flex;align-items:flex-start;gap:.3em;pointer-events:none;opacity:0;transition:left 1.2s var(--ease),top 1.2s var(--ease),opacity .5s}
.of-ptr.of-show{opacity:1}
.of-ptr svg{width:2.1em;height:2.1em;fill:var(--orange);filter:drop-shadow(0 .2em .3em rgba(24,27,26,.25))}
.of-ptr b{margin-top:1.3em;background:var(--orange);color:#fff;font-weight:600;font-size:.95em;padding:.4em 1em;border-radius:1em;white-space:nowrap}
.of-phm{--f:#fff;position:absolute;right:-3.5%;bottom:-9%;width:27%;aspect-ratio:9/18;font-size:2.4cqw;background:#fff;border:.55em solid var(--ink);border-radius:2.6em;padding:1.5em 1.1em;display:grid;gap:.9em;align-content:start;box-shadow:0 3em 5em -2.5em rgba(24,27,26,.5);transform:translate3d(0,3.2em,60px) scale(.94);opacity:0;transition:transform 1.1s var(--ease),opacity .7s ease}
.of-phm.of-on{transform:translate3d(0,0,60px);opacity:1}
.of-phm .of-pl{height:1.5em;width:40%;border-radius:.75em;background:var(--orange)}
.of-phm .of-pi{aspect-ratio:1.3;border-radius:1.1em;background:linear-gradient(150deg,var(--petrol),var(--lichen));position:relative;overflow:hidden}
.of-phm .of-pi::after{content:"";position:absolute;right:16%;top:16%;width:28%;aspect-ratio:1;border-radius:50%;background:var(--orange)}
.of-phm .of-pt{height:1.2em;border-radius:.6em;background:var(--ink)}
.of-phm .of-pt.of-s{width:70%}
.of-phm .of-pp{height:.75em;border-radius:.4em;background:#CFC9BB}
.of-phm .of-pb{height:2.1em;border-radius:1.05em;background:var(--orange);width:70%;margin-top:.4em}
.of-sc{--f:#fff;position:absolute;z-index:7;font-size:2.4cqw;font-weight:600;background:#fff;color:var(--ink);padding:.6em 1.2em;border-radius:2em;box-shadow:0 0 0 1px var(--line),0 1.6em 2.6em -1.4em rgba(24,27,26,.4);opacity:0;transform:translate3d(0,1.6em,80px) scale(.92);transition:transform .9s var(--ease),opacity .6s ease;white-space:nowrap;display:flex;align-items:center;gap:.6em}
.of-sc::before{content:"";width:.8em;height:.8em;border-radius:50%;background:var(--c,var(--orange))}
.of-sc.of-on{opacity:1;transform:translate3d(0,0,80px)}
.of-sc.of-a{left:-4%;top:-9.5%;--c:var(--orange)}
.of-sc.of-b{right:-4%;top:34%;--c:var(--petrol)}
.of-sc.of-c{left:12%;bottom:-9%;--c:var(--lichen)}
.of-stage.of-end .of-bw,.of-stage.of-end .of-phm,.of-stage.of-end .of-sc{opacity:.0;transition:opacity .6s ease}

@media (max-width:1000px){
  .of-hero{align-items:flex-start;flex-direction:column;min-height:auto;padding-top:clamp(110px,16vh,140px);padding-bottom:clamp(50px,8vw,80px)}
  .of-hero-copy{max-width:none}
  .of-stage{position:relative;right:auto;top:auto;translate:none;width:min(88%,600px);margin:clamp(60px,11vw,90px) auto 0;animation:stage-in-m 1.4s var(--ease) .5s forwards}
  @keyframes stage-in-m{from{opacity:0;translate:0 30px}to{opacity:1;translate:0 0}}
}

/* ===== Sektionen ===== */
.of-sec{padding:clamp(80px,11vw,170px) 0}
.of-sec.of-fog{background:var(--fog)}
.of-kick{display:block;font-size:.95rem;font-weight:600;color:var(--petrol);margin-bottom:18px}
h2{font-size:var(--f-h2)}
.of-reveal-line{display:block;overflow:hidden;padding:.22em 0 .16em;margin:-.22em 0 -.16em}
.of-reveal-line>span{display:block;transform:translateY(115%);transition:transform 1.1s var(--ease)}
.of-in .of-reveal-line>span,.of-reveal-line.of-in>span{transform:none}

.of-band{padding:clamp(26px,3.6vw,44px) 0;border-block:1px solid var(--line)}
.of-band-head{display:flex;justify-content:space-between;align-items:baseline;gap:20px;margin-bottom:20px;flex-wrap:wrap}
.of-band-head p{margin:0;font-weight:500}
.of-band-head a{font-weight:600;color:var(--petrol);text-underline-offset:4px}
.of-mq{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.of-mq-track{display:flex;gap:clamp(30px,4vw,64px);width:max-content;animation:mq 70s linear infinite}
.of-mq:hover .of-mq-track{animation-play-state:paused}
.of-mq img{height:clamp(44px,4.8vw,66px);width:auto;opacity:.62;filter:grayscale(1) contrast(1.05);mix-blend-mode:multiply;transition:opacity .3s,filter .3s}
.of-mq a:hover img,.of-mq a:focus-visible img{opacity:1;filter:none}
@keyframes mq{to{transform:translateX(-50%)}}

.of-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,120px)}
.of-intro h2 em{font-style:normal;color:var(--ink-2)}

.of-since{margin-top:clamp(64px,8vw,130px);border-top:1px solid var(--line);padding-top:clamp(28px,3vw,44px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(24px,5vw,90px);align-items:center}
.of-big25{font-family:var(--display);font-weight:700;font-size:clamp(6rem,16vw,15rem);line-height:.8;letter-spacing:-.07em;margin:0;color:var(--orange);display:flex;align-items:flex-end;gap:.1em}
.of-cnt{position:relative;display:inline-block}.of-cn-ph{visibility:hidden}.of-cn-v{position:absolute;left:0;top:0}
.of-big25 small{font-family:var(--sans);font-size:clamp(1rem,1.6vw,1.4rem);letter-spacing:0;font-weight:600;color:var(--ink);padding-bottom:.3em}

.of-tl2{min-width:0;padding:0 38px}
.of-tl2-track{position:relative;height:88px;margin-top:6px}
.of-tl2-ticks{position:absolute;left:0;right:0;top:40px;height:28px;display:flex;justify-content:space-between;align-items:flex-end}
.of-tl2-ticks i{width:2px;height:10px;border-radius:1px;background:var(--line);transition:background-color .35s,height .5s var(--ease)}
.of-tl2-ticks i:nth-child(5n+1){height:20px}
.of-tl2-ticks i.of-on{background:var(--orange)}
.of-tl2-ticks i.of-on:nth-child(5n+1){height:28px}
.of-tl2-fill{position:absolute;left:0;top:70px;height:3px;width:0;border-radius:2px;background:var(--orange)}
.of-tl2-mark{position:absolute;top:0;left:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.of-tl2-mark b{background:var(--orange);color:var(--ink);font-family:var(--display);font-weight:700;font-size:1rem;letter-spacing:-.02em;padding:.3em .85em;border-radius:999px;min-width:4.4ch;text-align:center}
.of-tl2-mark::after{content:"";width:2px;height:26px;background:var(--orange)}
.of-tl2-labels{list-style:none;position:relative;height:54px;margin:4px 0 12px;padding:0}
.of-tl2-labels li{position:absolute;top:0;left:var(--x);transform:translateX(-50%);text-align:center;line-height:1.25;color:var(--ink-2);transition:color .4s}
.of-tl2-labels b{display:block;font-family:var(--display);font-weight:600;font-size:1.05rem;letter-spacing:-.03em;color:var(--ink-2);transition:color .4s}
.of-tl2-labels span{font-size:.85rem;white-space:nowrap}.of-tl2-labels b{white-space:nowrap}
.of-tl2-labels li.of-on,.of-tl2-labels li.of-on b{color:var(--ink)}
.of-tl2-labels li.of-on b{color:#B4461A}
.of-press2{margin-top:clamp(72px,9vw,130px);padding-bottom:clamp(72px,9vw,130px)}
.of-p2-h{font-size:1.4rem;margin-bottom:16px}
.of-p2-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.of-pcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;padding:20px 22px;border-radius:28px;background:#fff;text-decoration:none;box-shadow:inset 0 0 0 1.5px var(--line),0 26px 40px -34px rgba(24,27,26,.4);transition:box-shadow .3s}
.of-pcard:hover,.of-pcard:focus-visible{box-shadow:inset 0 0 0 2px var(--orange),0 26px 40px -30px rgba(226,98,43,.55)}
.of-pc-ico{width:58px;height:58px;border-radius:50%;background:var(--beige);color:var(--orange);display:grid;place-items:center}
.of-pc-ico svg{width:26px;height:26px}
.of-pc-t time{display:block;font-size:.88rem;color:var(--ink-2)}
.of-pc-t strong{display:block;font-family:var(--display);font-weight:600;font-size:1.2rem;letter-spacing:-.03em;line-height:1.2}
.of-pc-go{display:inline-flex;align-items:center;gap:.5em;padding:.7em 1.15em;border-radius:999px;background:var(--ink);color:#fff;font-weight:600;font-size:.95rem;white-space:nowrap;transition:background-color .3s,color .3s}
.of-pcard:hover .of-pc-go,.of-pcard:focus-visible .of-pc-go{background:var(--orange);color:var(--ink)}
.of-pc-go svg{width:1em;height:1em}
@media (max-width:900px){.of-p2-grid{grid-template-columns:1fr}.of-since{grid-template-columns:1fr}.of-tl2{padding:0 34px}.of-pcard{grid-template-columns:auto 1fr}.of-pc-go{grid-column:1/-1;justify-self:start}}

/* Kundenband */
.of-lband{background:var(--fog);padding:clamp(64px,8vw,120px) 0 clamp(64px,8vw,110px);overflow:hidden}
.of-lb-head{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,90px);align-items:end;margin-bottom:clamp(40px,5vw,72px)}
.of-lb-r p{font-size:1.1rem;color:var(--ink-2);margin-bottom:18px}
.of-lchips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 22px}
.of-lchip{padding:.45em 1em;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1.5px var(--line);text-decoration:none;font-weight:500;font-size:.95rem;transition:background-color .3s,color .3s,box-shadow .3s}
.of-lchip:hover,.of-lchip:focus-visible{background:var(--ink);color:#fff;box-shadow:inset 0 0 0 1.5px var(--ink)}
.of-lrows{display:grid;gap:14px;margin:0 -6vw;transform:rotate(-1.6deg)}
.of-lrow{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.of-ltrack{display:flex;gap:14px;width:max-content;animation:mq 90s linear infinite}
.of-lrow.of-r .of-ltrack{animation-direction:reverse;animation-duration:110s}
.of-lrow:hover .of-ltrack{animation-play-state:paused}
.of-lt{flex:none;width:clamp(210px,20vw,310px);aspect-ratio:300/190;border-radius:28px;background:#fff;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line);transition:box-shadow .3s}
.of-lt img{width:72%;height:auto;filter:grayscale(1) contrast(1.08);opacity:.8;transition:filter .3s,opacity .3s}
.of-lt:hover,.of-lt:focus-visible{box-shadow:inset 0 0 0 2px var(--orange),0 0 0 1px var(--orange)}
.of-lt:hover img,.of-lt:focus-visible img{filter:none;opacity:1}
@media (max-width:900px){.of-lb-head{grid-template-columns:1fr}.of-lrows{margin:0 -14vw}}

/* Leistungen: Kartenstapel (wie Entwurf 1) */
.of-svc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,64px)}
.of-svc-head p{margin:0;color:var(--ink-2);max-width:40ch}
.of-stack{position:relative}
.of-card{position:sticky;top:calc(96px + var(--n) * 20px);min-height:min(66vh,540px);border-radius:32px;padding:clamp(24px,4vw,56px);display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:28px;background:var(--c);color:var(--fg,var(--ink));transform-origin:50% 0;will-change:transform;box-shadow:0 30px 60px -38px rgba(24,27,26,.4)}
.of-card h3{font-size:clamp(2.2rem,4.8vw,4.4rem);margin-bottom:.4em;letter-spacing:-.045em}
.of-card p{font-size:clamp(1.02rem,1.3vw,1.25rem);line-height:1.55;max-width:46ch;opacity:.95}
.of-c3 .of-more,.of-c4 .of-more{color:var(--beige)}
.of-more{display:inline-flex;align-items:center;gap:.6em;font-weight:600;text-decoration:none;border-bottom:1.5px solid currentColor;padding-bottom:2px;margin-top:8px}
.of-more svg{width:1em;height:1em;transition:transform .4s var(--ease)}
.of-more:hover svg{transform:translate(4px,-4px)}
.of-c1{--c:var(--beige);--ac:var(--orange)}.of-c2{--c:var(--orange);--fg:var(--ink);--ac:var(--beige)}.of-c3{--c:var(--ink);--fg:#fff;--ac:var(--orange)}.of-c4{--c:var(--petrol-d);--fg:#fff;--ac:var(--orange)}
/* Team */
.of-team{display:grid;grid-template-columns:.75fr 1.25fr;gap:clamp(32px,7vw,130px);align-items:center}
.of-portrait{margin:0;position:relative;max-width:460px;justify-self:center;width:100%}
.of-portrait img{border-radius:34px;width:100%;height:auto;box-shadow:0 50px 80px -44px rgba(24,27,26,.55)}
.of-portrait::after{content:"";position:absolute;z-index:-1;left:-16px;bottom:-16px;width:46%;aspect-ratio:1;border-radius:0 0 0 30px;background:var(--beige)}
.of-team h2{margin-bottom:.4em}
.of-team h3{font-family:var(--sans);font-size:1.2rem;font-weight:500;letter-spacing:-.01em;line-height:1.3;color:var(--ink-2);margin-bottom:1.1em}

/* Stimmen */
.of-rv{background:var(--beige)}
.of-rv-top{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;flex-wrap:wrap;margin-bottom:clamp(28px,4vw,52px)}
.of-rv-score{display:flex;align-items:center;gap:20px;background:#fff;border-radius:30px;padding:20px 30px 20px 26px;box-shadow:0 30px 50px -36px rgba(24,27,26,.5)}
.of-rv-score b{font-family:var(--display);font-weight:700;font-size:clamp(3.8rem,6vw,5.4rem);line-height:.8;letter-spacing:-.06em;color:var(--orange)}
.of-stars{letter-spacing:.14em;color:var(--orange);font-size:1.15rem}
.of-rv-main{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:clamp(14px,2vw,28px);align-items:stretch}
.of-rv-q{position:relative;overflow:hidden;background:#fff;border-radius:36px;padding:clamp(28px,4vw,56px);display:flex;flex-direction:column;justify-content:space-between;gap:24px}
.of-rv-mark{position:absolute;right:clamp(14px,3vw,36px);top:-.1em;font-family:var(--display);font-weight:700;font-size:clamp(9rem,15vw,15rem);line-height:1;color:var(--beige);pointer-events:none;user-select:none}
.of-q-stage{position:relative;z-index:1;display:grid}
.of-q-i{grid-area:1/1;margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:28px;opacity:0;visibility:hidden;transform:translateY(18px);transition:opacity .6s,transform .9s var(--ease),visibility 0s .6s}
.of-q-i.of-on{opacity:1;visibility:visible;transform:none;transition:opacity .8s .15s,transform 1.1s var(--ease) .15s,visibility 0s}
.of-q-i blockquote{margin:0;font-family:var(--display);font-weight:400;font-size:clamp(1.1rem,1.7vw,1.5rem);line-height:1.55;letter-spacing:-.02em;max-width:60ch;text-wrap:pretty}
.of-q-i figcaption{display:flex;gap:14px;align-items:center}
.of-av{width:48px;height:48px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;font-weight:700;flex:none}
.of-q-i figcaption b{display:block;line-height:1.2}
.of-q-i figcaption time{font-size:.9rem;color:var(--ink-2)}
.of-q-ctl{position:relative;z-index:1;display:flex;align-items:center;gap:14px}
.of-q-arrows{display:flex;gap:8px}
.of-q-arrows button{width:50px;height:50px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;cursor:pointer;display:grid;place-items:center;color:var(--ink);transition:background-color .3s,color .3s}
.of-q-arrows button:hover{background:var(--ink);color:#fff}
.of-q-arrows svg{width:20px;height:20px}
.of-q-count{font-variant-numeric:tabular-nums;color:var(--ink-2)}
.of-rv-tabs{display:grid;gap:10px;align-content:start;list-style:none;margin:0;padding:0}
.of-rv-tab{width:100%;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start;text-align:left;border:0;background:rgba(255,255,255,.6);padding:16px 18px 20px;border-radius:26px;cursor:pointer;font:inherit;color:inherit;position:relative;overflow:hidden;transition:background-color .3s,box-shadow .3s}
.of-rv-tab:hover{background:rgba(255,255,255,.9)}
.of-rv-tab[aria-pressed=true]{background:#fff;box-shadow:inset 0 0 0 2px var(--orange)}
.of-rv-tab .of-av{width:42px;height:42px;font-size:.95rem}
.of-rv-tt b{font-weight:600}
.of-rv-tt small{margin-left:.6em;color:var(--ink-2)}
.of-rv-ex{display:block;font-size:.92rem;color:var(--ink-2);margin-top:4px;line-height:1.4}
.of-pg{position:absolute;left:0;right:0;bottom:0;height:4px}
.of-pg i{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:0 50%}
.of-pg.of-run i{animation:qbar var(--t,9s) linear forwards}
@keyframes qbar{to{transform:none}}
.of-vo-links{margin-top:clamp(28px,3.4vw,44px)}
@media (max-width:900px){.of-rv-main{grid-template-columns:1fr}}

/* Kontakt / Footer */
.of-contact{background:var(--petrol-d);color:#fff;padding:clamp(80px,11vw,170px) 0 0}
.of-contact h2{font-size:clamp(3.6rem,14vw,13rem);line-height:.92;letter-spacing:-.06em;font-weight:700}
.of-contact .of-row{display:flex;flex-wrap:wrap;gap:12px 44px;margin-top:clamp(28px,4vw,56px)}
.of-contact .of-big{font-family:var(--display);font-weight:500;font-size:clamp(1.3rem,2.8vw,2.4rem);letter-spacing:-.035em;text-decoration:none;border-bottom:1.5px solid rgba(255,255,255,.3);transition:color .3s,border-color .3s}
.of-contact .of-big:hover{color:var(--beige);border-color:var(--beige)}
.of-sitemap{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:28px;margin-top:clamp(64px,9vw,130px);padding-top:32px;border-top:1px solid rgba(255,255,255,.16)}
.of-sitemap h3{font-family:var(--sans);font-size:.85rem;font-weight:600;letter-spacing:0;color:var(--beige);margin-bottom:12px}
.of-sitemap a{text-decoration:none;color:rgba(255,255,255,.8);display:block;padding:3px 0}
.of-sitemap a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}
.of-ft-legal{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px 28px;padding:30px 0 40px;margin-top:40px;border-top:1px solid rgba(255,255,255,.16);font-size:.9rem;color:rgba(255,255,255,.62)}
.of-ft-legal .of-logo{height:clamp(38px,3.6vw,48px)}
.of-ft-legal ul{display:flex;flex-wrap:wrap;gap:8px 22px}
.of-ft-legal a{text-decoration:none}.of-ft-legal a:hover{color:#fff;text-decoration:underline;text-underline-offset:4px}

/* Unterseiten */
.of-ph{padding:clamp(130px,19vh,200px) 0 clamp(26px,3.4vw,48px);position:relative;overflow:hidden;isolation:isolate}
.of-ph h1{font-size:clamp(3rem,10.5vw,10rem);line-height:1;letter-spacing:-.055em;font-weight:700}
.of-ph .of-lead{font-size:clamp(1.2rem,1.7vw,1.6rem);color:var(--ink);font-weight:500;letter-spacing:-.012em;margin:clamp(16px,2vw,28px) 0 0;max-width:52ch;line-height:1.45}
.of-ph .of-glow{z-index:-1}

/* Kunden */
.of-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 clamp(24px,3vw,40px)}
.of-chip{border:1.5px solid var(--line);background:transparent;border-radius:999px;padding:.6em 1.1em;font:inherit;font-weight:500;cursor:pointer;display:inline-flex;gap:.55em;align-items:baseline;transition:background-color .3s,color .3s,border-color .3s}
.of-chip sup{font-size:.72em;opacity:.55;vertical-align:baseline}
.of-chip:hover{border-color:var(--ink)}
.of-chip[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:#fff}
.of-grid-k{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:12px}
.of-kt{position:relative;display:grid;place-items:center;aspect-ratio:300/190;border-radius:24px;background:var(--fog);text-decoration:none;overflow:hidden;transition:background-color .4s,box-shadow .4s}
.of-kt img{width:66%;height:auto;mix-blend-mode:multiply}
.of-kt:hover,.of-kt:focus-visible{background:#fff;box-shadow:inset 0 0 0 1.5px var(--orange)}
.of-kt .of-nm{position:absolute;left:16px;right:14px;bottom:10px;font-size:.88rem;font-weight:600;color:var(--ink);transform:translateY(140%);transition:transform .5s var(--ease)}
.of-kt:hover .of-nm,.of-kt:focus-visible .of-nm{transform:none}
.of-kt[hidden]{display:none}
.of-note{margin-top:36px;color:var(--ink-2)}

/* Referenzen */
.of-ref-intro{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,100px);margin-bottom:clamp(36px,5vw,72px)}
.of-ref-intro p{color:var(--ink-2);font-size:1.1rem}
.of-ref-intro strong{color:var(--ink)}
.of-switch{display:inline-flex;padding:4px;border-radius:999px;background:var(--fog);margin-bottom:clamp(20px,2.6vw,32px)}
.of-switch button{border:0;background:transparent;font:inherit;font-weight:600;padding:.6em 1.3em;border-radius:999px;cursor:pointer;color:var(--ink-2);transition:background-color .3s,color .3s}
.of-switch button[aria-pressed=true]{background:var(--ink);color:#fff}
.of-switch[hidden]{display:none}
.of-rf{position:relative;text-decoration:none;color:inherit}
.of-rf img{width:100%;height:auto}
.of-rf-n{font-family:var(--display);font-weight:600;font-size:clamp(1.4rem,2.1vw,2rem);letter-spacing:-.04em;line-height:1.1;display:block}
.of-rf-u{display:block;font-size:.92rem;color:var(--ink-2);overflow-wrap:anywhere}
.of-rf-t{display:flex;flex-wrap:wrap;font-size:.92rem;color:var(--ink-2)}
.of-rf-t li:not(:last-child)::after{content:",\00a0"}
.of-rf-go{width:48px;height:48px;border-radius:50%;border:1.5px solid var(--ink);display:grid;place-items:center;transition:background-color .3s,color .3s,border-color .3s}
.of-rf-go svg{width:18px;height:18px}
.of-rf:hover .of-rf-go,.of-rf:focus-visible .of-rf-go{background:var(--ink);color:#fff}
.of-refs[data-view=grid]{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,440px),1fr));gap:clamp(16px,2vw,28px);align-items:start}
.of-refs[data-view=grid] .of-rf{display:grid;gap:14px;padding:clamp(14px,1.6vw,22px) clamp(14px,1.6vw,22px) 22px;border-radius:30px;background:var(--fog);transition:background-color .4s}
.of-refs[data-view=grid] .of-rf:hover{background:var(--beige)}
.of-refs[data-view=grid] .of-rf-n,.of-refs[data-view=grid] .of-rf-u,.of-refs[data-view=grid] .of-rf-t{padding:0 6px}
.of-refs[data-view=grid] .of-rf-go{position:absolute;right:20px;bottom:20px}
.of-refs[data-view=list]{display:block;border-bottom:1px solid var(--line)}
.of-refs[data-view=list] .of-rf{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1.5fr) minmax(0,1fr) 48px;gap:clamp(12px,2vw,32px);align-items:center;padding:clamp(18px,2vw,28px) 4px;border-top:1px solid var(--line);transition:opacity .35s,padding .5s var(--ease)}
.of-refs[data-view=list] .of-rf img{display:none}
.of-refs[data-view=list]:hover .of-rf{opacity:.3}
.of-refs[data-view=list] .of-rf:hover,.of-refs[data-view=list] .of-rf:focus-visible{opacity:1;padding-left:20px}
.of-peek{position:fixed;left:0;top:0;z-index:60;width:clamp(300px,30vw,480px);pointer-events:none;opacity:0;transition:opacity .3s;will-change:transform}
.of-peek.of-on{opacity:1}
.of-peek img{width:100%;height:auto;filter:drop-shadow(0 30px 30px rgba(24,27,26,.3))}
.of-refs-end{padding:clamp(72px,10vw,140px) 0 0}
.of-refs-end h2{margin-bottom:26px}
@media (max-width:1000px){
  .of-intro,.of-team,.of-ref-intro{grid-template-columns:1fr}
  .of-since{grid-template-columns:1fr}
  .of-card{grid-template-columns:1fr;min-height:auto;position:relative;top:auto}
  .of-card .of-viz{max-width:320px;justify-self:start}
}
@media (max-width:720px){
  .of-refs[data-view=list] .of-rf{grid-template-columns:1fr 48px}
  .of-refs[data-view=list] .of-rf-t,.of-refs[data-view=list] .of-rf-u{grid-column:1}
  .of-refs[data-view=list] .of-rf-go{grid-row:1/4;grid-column:2}
  .of-peek{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .of-ln>span,.of-reveal-line>span{transform:none}
  .of-rise{opacity:1;transform:none}
  .of-stage{opacity:1}
  .of-mq-track{animation:none}
  .of-rail .of-fg{transform:none}
  @view-transition{navigation:none}
}

/* ===== Unterseiten ===== */
.of-ph-long h1{font-size:clamp(2rem,4.6vw,4.4rem);line-height:1.08;letter-spacing:-.045em;font-weight:650}
.of-sec.of-tight{padding-top:clamp(20px,3vw,40px);margin-top:calc(-.6 * clamp(80px,11vw,170px))}
.of-split{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,5vw,96px);align-items:center}
.of-media img,.of-wide{width:100%;height:auto;border-radius:30px}
.of-prose h2,.of-card2 h2{font-size:clamp(1.7rem,3.2vw,2.8rem);margin:0 0 .55em}
.of-prose h3,.of-card2 h3{font-size:clamp(1.2rem,1.9vw,1.6rem);margin:1.6em 0 .6em;letter-spacing:-.03em}
.of-prose h2:first-child,.of-prose h3:first-child,.of-card2 h2:first-child,.of-card2 h3:first-child{margin-top:0}
.of-prose h4,.of-card2 h4{font-family:var(--display);font-size:1.1rem;margin:1.4em 0 .5em;letter-spacing:-.02em}
.of-prose p,.of-card2 p{max-width:66ch}
:is(.of-prose,.of-card2) ul,:is(.of-prose,.of-card2) ol{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:.6em;max-width:66ch}
:is(.of-prose,.of-card2,.of-ans-in) ul{margin:0 0 1.2em;padding:0;list-style:none;display:grid;gap:.6em;max-width:66ch}
:is(.of-prose,.of-card2,.of-ans-in) ul li{position:relative;padding-left:2.8em;--i:10}
:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(1){--i:0}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(2){--i:1}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(3){--i:2}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(4){--i:3}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(5){--i:4}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(6){--i:5}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(7){--i:6}:is(.of-prose,.of-card2,.of-ans-in) ul li:nth-child(8){--i:7}
/* Aufzählung = Schalter aus dem Logo (an = Orange, Knopf Beige rechts) */
:is(.of-prose,.of-card2,.of-ans-in) ul li::before{content:"";position:absolute;left:0;top:.25em;width:1.9em;height:1.1em;border-radius:1em;background:var(--orange);transition:background-color .7s ease calc(var(--i) * 110ms)}
:is(.of-prose,.of-card2,.of-ans-in) ul li::after{content:"";position:absolute;left:.15em;top:.4em;width:.8em;height:.8em;border-radius:50%;background:var(--beige);translate:.8em 0;transition:translate .85s var(--ease) calc(var(--i) * 110ms),background-color .6s ease calc(var(--i) * 110ms)}
:is(.of-prose,.of-card2,.of-ans-in) ul.of-sw-off li::before{background:#D6CFBF}
:is(.of-prose,.of-card2,.of-ans-in) ul.of-sw-off li::after{translate:0 0;background:#fff}
:is(.of-prose,.of-card2) ol{list-style:decimal;padding-left:1.4em;display:block}
:is(.of-prose,.of-card2) a{color:var(--petrol);text-underline-offset:3px;font-weight:500}
:is(.of-prose,.of-card2) a.of-btn{color:#fff;font-weight:600;text-decoration:none}
:is(.of-prose,.of-card2) a.of-btn.of-ghost{color:var(--ink)}
:is(.of-prose,.of-card2) a.of-btn.of-ghost:hover,:is(.of-prose,.of-card2) a.of-btn.of-ghost:focus-visible{color:#fff}
:is(.of-prose,.of-card2) a.of-btn.of-big{color:var(--ink)}
.of-prose.of-lead-prose p{font-size:clamp(1.15rem,1.7vw,1.5rem);line-height:1.55;max-width:62ch}
.of-badge{display:inline-block;margin-top:14px}.of-badge img{width:min(170px,50vw);height:auto}
.of-cards2{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:16px}
.of-card2{background:var(--fog);border-radius:32px;padding:clamp(24px,3vw,46px)}
.of-card2.of-narrow{max-width:760px}
.of-card2 .of-btn{margin-top:10px}
.of-de-badge img{width:min(340px,70vw);height:auto;border-radius:30px;margin:0 auto}
.of-ctac{background:var(--ink);color:#fff;border-radius:40px;padding:clamp(28px,5vw,64px);display:flex;justify-content:space-between;align-items:center;gap:28px;flex-wrap:wrap}
.of-ctac h2{font-size:clamp(1.7rem,3.4vw,3rem);max-width:24ch}
.of-ctac p{color:rgba(255,255,255,.78);margin:.8em 0 0;max-width:46ch}
.of-ctac p:empty{display:none}
.of-ctac p a{color:var(--beige)}
.of-btn.of-big{padding:1.15em 2em;font-size:1.05rem;background:var(--orange);color:var(--ink)}
.of-btn.of-big:hover,.of-btn.of-big:focus-visible{background:var(--beige);color:var(--ink)}
.of-ov-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.of-ovc{display:flex;flex-direction:column;justify-content:space-between;gap:28px;min-height:clamp(260px,26vw,360px);padding:clamp(24px,3vw,42px);border-radius:34px;text-decoration:none;background:var(--c);color:var(--fg,var(--ink));transition:box-shadow .4s}
.of-ovc:hover,.of-ovc:focus-visible{box-shadow:0 34px 50px -34px rgba(24,27,26,.55)}
.of-ovc h3{font-size:clamp(2rem,3.8vw,3.4rem);margin:0 0 .3em;letter-spacing:-.05em}
.of-ovc p{margin:0;max-width:44ch;opacity:.95}
.of-ovc .of-more{align-self:flex-start;color:inherit}
.of-ov1{--c:var(--beige)}.of-ov2{--c:var(--orange)}.of-ov3{--c:var(--ink);--fg:#fff}.of-ov4{--c:var(--petrol-d);--fg:#fff}
.of-ov3 .of-more,.of-ov4 .of-more{color:var(--beige)}
@media (max-width:760px){.of-ov-grid{grid-template-columns:1fr}}
/* FAQ */
.of-faq-head{margin-bottom:clamp(24px,3.4vw,44px)}
.of-faq-head h2{font-size:clamp(1.8rem,3.6vw,3.2rem);max-width:26ch}
.of-faq{border-top:1px solid #D9D3C5;max-width:980px}
.of-faq details{border-bottom:1px solid #D9D3C5}
.of-faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 4px;cursor:pointer;font-family:var(--display);font-weight:500;font-size:clamp(1.05rem,1.7vw,1.4rem);letter-spacing:-.03em;line-height:1.3}
.of-faq summary::-webkit-details-marker{display:none}
.of-faq summary i{flex:none;position:relative;width:42px;height:42px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--ink);transition:background-color .3s}
.of-faq summary i::before,.of-faq summary i::after{content:"";position:absolute;left:50%;top:50%;width:14px;height:2px;background:var(--ink);translate:-50% -50%;transition:rotate .4s var(--ease),background-color .3s}
.of-faq summary i::after{rotate:90deg}
.of-faq summary:hover i{background:var(--beige)}
.of-faq details[open] summary i{background:var(--ink)}
.of-faq details[open] summary i::before,.of-faq details[open] summary i::after{background:#fff}
.of-faq details[open] summary i::after{rotate:0deg}
.of-faq .of-ans{overflow:hidden}
.of-ans-in{padding:0 4px 26px;max-width:78ch}
.of-ans-in ul{margin:.6em 0 0}
/* Historie */
.of-vt{--yc:clamp(84px,13vw,190px);position:relative;list-style:none;margin:0;padding:0;display:grid;gap:clamp(26px,3.6vw,52px);max-width:1100px}
.of-vt-line{position:absolute;left:calc(var(--yc) + 14px);top:10px;bottom:10px;width:2px;background:var(--line)}
.of-vt-line i{position:absolute;left:0;top:0;width:100%;height:calc(var(--p,0) * 100%);background:var(--orange)}
.of-vt-i{position:relative;display:grid;grid-template-columns:var(--yc) 28px minmax(0,1fr);align-items:start;opacity:0;transform:translateY(26px);transition:opacity .8s,transform 1s var(--ease)}
.of-vt-i.of-in{opacity:1;transform:none}
.of-vt-y{grid-column:1;grid-row:1;margin:0;text-align:right;padding-right:14px;font-weight:700;font-size:clamp(1.6rem,4vw,3.6rem);letter-spacing:-.06em;line-height:1;color:var(--ink-2);transition:color .5s}
.of-vt-i.of-in .of-vt-y{color:var(--ink)}
.of-vt-dot{grid-column:2;grid-row:1;justify-self:center;width:16px;height:16px;margin-top:.55em;border-radius:50%;background:var(--paper);border:3px solid #CFC9BB;z-index:1;transition:background-color .5s,border-color .5s}
.of-vt-i.of-in .of-vt-dot{background:var(--orange);border-color:var(--orange)}
.of-vt-c{grid-column:3;grid-row:1;margin-left:clamp(12px,2.4vw,34px);background:var(--fog);border-radius:26px;padding:clamp(18px,2.4vw,30px)}
.of-vt-m .of-vt-c{background:var(--beige)}
.of-vt-t p{margin:0 0 .6em;max-width:62ch}.of-vt-t p:last-child{margin-bottom:0}
.of-vt-t h4{font-family:var(--display);font-size:1.25rem;margin:0 0 .4em;letter-spacing:-.03em}
.of-vt-t a{display:inline-flex;align-items:center;gap:.4em;margin:.3em .3em .3em 0;padding:.4em 1em;border-radius:999px;background:var(--ink);color:#fff;text-decoration:none;font-size:.92rem;font-weight:600;transition:background-color .3s,color .3s}
.of-vt-t a::after{content:"↗";font-size:.9em}
.of-vt-t a:hover,.of-vt-t a:focus-visible{background:var(--orange);color:var(--ink)}
.of-vt-img img{display:block;max-height:96px;width:auto;margin-top:14px;border-radius:12px}
/* Kontakt */
.of-kgrid{display:grid;grid-template-columns:.8fr 1.2fr;gap:16px;align-items:start}
.of-kinfo a{font-weight:600}
.of-cform{display:grid;gap:16px}
.of-cform .of-btn{justify-self:start}
.of-fgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.of-f{display:grid;gap:6px}
.of-f>span{font-weight:600;font-size:.95rem}
.of-f input,.of-f textarea{font:inherit;border:1.5px solid #D9D3C5;background:#fff;border-radius:16px;padding:.85em 1em;outline:0;width:100%;transition:border-color .25s,box-shadow .25s}
.of-f input:focus,.of-f textarea:focus{border-color:var(--petrol);box-shadow:0 0 0 4px rgba(47,93,98,.16)}
.of-f.of-bad input,.of-f.of-bad textarea{border-color:#B3261E}
.of-chk{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.of-chk input{width:22px;height:22px;margin-top:2px;accent-color:var(--orange);flex:none}
.of-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.of-fmsg{margin:0;font-weight:500;max-width:none}
@media (max-width:900px){.of-kgrid{grid-template-columns:1fr}.of-fgrid{grid-template-columns:1fr}.of-split{grid-template-columns:1fr}}
.of-pt2 img{border-radius:34px;width:100%;height:auto}
.of-pt2{max-width:460px}
/* Kundenbereich */
.of-kas{border-radius:28px;overflow:hidden;background:#fff;box-shadow:0 0 0 1px var(--line)}
.of-kas iframe{display:block;width:100%;height:min(78vh,760px);border:0}
/* Logo-Galerie */
.of-lgal{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:14px;list-style:none;margin:0;padding:0}
.of-lg-item{border:0;padding:0;background:none;cursor:zoom-in;border-radius:28px;overflow:hidden;display:block;width:100%;line-height:0}
.of-lg-item img{width:100%;height:auto;transition:filter .3s}
.of-lg-item:hover img,.of-lg-item:focus-visible img{filter:brightness(.94)}
.of-lb{border:0;padding:0;background:transparent;width:min(1100px,94vw);max-height:92vh;overflow:visible;margin:auto}
.of-lb::backdrop{background:rgba(24,27,26,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.of-lb img{display:block;width:100%;height:auto;max-height:86vh;object-fit:contain;border-radius:22px;background:#fff}
.of-lb-x,.of-lb-p,.of-lb-n{position:absolute;z-index:2;width:52px;height:52px;border-radius:50%;border:0;background:var(--beige);color:var(--ink);cursor:pointer;display:grid;place-items:center;font:inherit;font-size:1.6rem;line-height:1;transition:background-color .3s}
.of-lb-x:hover,.of-lb-p:hover,.of-lb-n:hover{background:var(--orange)}
.of-lb-x{top:-16px;right:-8px}.of-lb-p{left:-12px;top:50%;translate:0 -50%}.of-lb-n{right:-12px;top:50%;translate:0 -50%}
.of-lb-p svg,.of-lb-n svg{width:22px;height:22px}
/* Rechtstexte */
.of-legal{max-width:900px}
.of-legal h2{font-size:clamp(1.5rem,2.4vw,2.1rem);margin:1.6em 0 .5em}
.of-legal h3{font-size:1.2rem;margin:1.4em 0 .4em}
.of-legal h4{font-size:1.05rem}
.of-legal p{font-size:1rem;max-width:80ch}
.of-legal ul{list-style:disc;padding-left:1.4em;display:block}
.of-legal ul li{padding-left:0}.of-legal ul li::before,.of-legal ul li::after{display:none}
.of-legal,.of-legal *{overflow-wrap:anywhere}
.of-prose a,.of-card2 a{overflow-wrap:anywhere}

/* ===== Karten-Animationen (Startseite) ===== */
.of-viz{width:100%;max-width:400px;justify-self:center;aspect-ratio:1/1;container-type:inline-size;position:relative}
.of-vz{position:absolute;inset:0;font-size:3.1cqw;line-height:1.2;color:var(--ink)}
.of-vz *{box-sizing:border-box}
.of-viz *,.of-viz *::before,.of-viz *::after{animation-play-state:paused}
.of-card.of-in .of-viz *,.of-card.of-in .of-viz *::before,.of-card.of-in .of-viz *::after{animation-play-state:running}
.of-viz svg{display:block}

/* 1 · Webdesign: Fenster ändert die Breite, Layout bricht um */
.of-v1-stage{position:absolute;inset:0}
.of-v1-win{position:absolute;left:50%;top:47%;translate:-50% -50%;width:100%;container-type:inline-size;background:#fff;border-radius:1.6em;overflow:hidden;box-shadow:0 2.4em 3.6em -2em rgba(24,27,26,.4),0 0 0 1px rgba(24,27,26,.1);animation:v1w 11s cubic-bezier(.65,0,.35,1) infinite}
@keyframes v1w{0%,16%{width:100%}30%,46%{width:66%}60%,78%{width:37%}92%,100%{width:100%}}
.of-v1-bar{height:2.4em;background:var(--fog);display:flex;align-items:center;gap:.5em;padding:0 1em}
.of-v1-bar i{width:.7em;height:.7em;border-radius:50%;background:#D9D3C5}
.of-v1-body{padding:1.5em;display:grid;grid-template-columns:minmax(0,1fr);gap:1.3em}
.of-v1-nav{display:flex;align-items:center;gap:1em;height:1.9em;min-width:0;overflow:hidden}
.of-v1-nav b{width:5em;height:1.7em;border-radius:1em;background:var(--orange);flex:none}
.of-v1-nav span{width:3em;height:.7em;border-radius:.4em;background:#CFC9BB}
.of-v1-nav em{margin-left:auto;width:4.4em;height:1.7em;border-radius:1em;background:var(--ink);flex:none}
.of-v1-hero{display:grid;grid-template-columns:1.2fr 1fr;gap:1.4em;align-items:center}
.of-v1-img{position:relative;aspect-ratio:1.25;border-radius:1.2em;overflow:hidden;background:linear-gradient(150deg,var(--petrol),#6F9585 58%,var(--lichen))}
.of-v1-img::before{content:"";position:absolute;right:15%;top:15%;width:26%;aspect-ratio:1;border-radius:50%;background:var(--orange)}
.of-v1-img::after{content:"";position:absolute;left:0;right:0;bottom:0;height:44%;background:var(--beige);clip-path:polygon(0 62%,28% 22%,52% 56%,76% 18%,100% 52%,100% 100%,0 100%)}
.of-v1-tx{display:grid;gap:.7em}
.of-v1-tx s{display:block;height:1.2em;border-radius:.6em;background:var(--ink)}
.of-v1-tx s+s{width:70%}
.of-v1-tx u{display:block;height:.6em;border-radius:.3em;background:#BDB8AA}
.of-v1-tx u+u{width:78%}
.of-v1-tx .of-bt{display:block;width:6em;height:1.9em;border-radius:1em;background:var(--orange);margin-top:.3em}
.of-v1-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1em}
.of-v1-cards i{position:relative;display:block;height:4.2em;border-radius:1em;background:var(--fog)}
.of-v1-cards i::before{content:"";position:absolute;left:.9em;top:.9em;width:1.6em;height:1.6em;border-radius:50%;background:var(--c)}
.of-v1-cards i::after{content:"";position:absolute;left:.9em;right:.9em;bottom:.9em;height:.55em;border-radius:.3em;background:rgba(24,27,26,.14)}
@container (max-width:26em){
  .of-v1-body{padding:1.3em;gap:1.1em}
  .of-v1-nav{gap:.75em}
  .of-v1-nav b{width:4.4em}
  .of-v1-nav span:nth-of-type(3){display:none}
  .of-v1-nav em{width:3.6em}
  .of-v1-hero{grid-template-columns:1fr 1fr;gap:1.1em}
  .of-v1-img{aspect-ratio:1.05}
  .of-v1-tx{gap:.55em}
  .of-v1-tx s{height:1em}
  .of-v1-tx u+u{display:none}
  .of-v1-tx .of-bt{width:5em;height:1.7em}
  .of-v1-cards{gap:.7em}
  .of-v1-cards i{height:3.3em}
  .of-v1-cards i::before{left:.7em;top:.6em;width:1.2em;height:1.2em}
  .of-v1-cards i::after{left:.7em;right:.7em;bottom:.55em;height:.45em}
}
@container (max-width:17em){
  .of-v1-body{padding:1.1em;gap:.9em}
  .of-v1-nav span{display:none}
  .of-v1-nav b{width:4em}
  .of-v1-nav em{width:1.8em;border-radius:50%}
  .of-v1-hero{grid-template-columns:1fr}
  .of-v1-img{aspect-ratio:2}
  .of-v1-tx{gap:.55em}
  .of-v1-tx .of-bt{width:5em}
  .of-v1-cards{grid-template-columns:1fr;gap:.6em}
  .of-v1-cards i{height:1.9em}
  .of-v1-cards i::before{left:.5em;top:.35em;width:1.2em;height:1.2em}
  .of-v1-cards i::after{left:2.4em;bottom:auto;top:.7em}
}
.of-v1-tag{position:absolute;left:50%;bottom:.6em;translate:-50% 0;height:2.5em;width:16em}
.of-v1-tag span{position:absolute;left:50%;top:0;translate:-50% 0;background:var(--ink);color:#fff;font-weight:600;padding:.45em 1.2em;border-radius:1.5em;white-space:nowrap;opacity:0}
.of-v1-tag span:nth-child(1){opacity:1;animation:v1t1 11s infinite}
.of-v1-tag span:nth-child(2){animation:v1t2 11s infinite}
.of-v1-tag span:nth-child(3){animation:v1t3 11s infinite}
@keyframes v1t1{0%,18%{opacity:1}24%,86%{opacity:0}92%,100%{opacity:1}}
@keyframes v1t2{0%,24%{opacity:0}30%,48%{opacity:1}54%,100%{opacity:0}}
@keyframes v1t3{0%,54%{opacity:0}60%,80%{opacity:1}86%,100%{opacity:0}}

/* 2 · TYPO3: Inhalte selbst pflegen */
.of-v2-panel{position:absolute;inset:1em;background:#fff;border-radius:1.8em;box-shadow:0 2.4em 3.6em -2em rgba(0,0,0,.4);overflow:hidden}
.of-v2-tb{height:4.4em;border-bottom:1px solid #E8E2D6;display:flex;align-items:center;justify-content:space-between;padding:0 1.6em}
.of-v2-tb p{margin:0;font-weight:600;font-size:1.05em;max-width:none}
.of-v2-save{position:relative;width:9.6em;height:2.6em;border-radius:1.4em;background:var(--petrol);color:#fff;font-weight:600;overflow:hidden;animation:v2s 9s infinite}
.of-v2-save span{position:absolute;inset:0;display:grid;place-items:center;white-space:nowrap}
.of-v2-save .of-s1{opacity:0;animation:v2s1 9s infinite}
.of-v2-save .of-s2{animation:v2s2 9s infinite}
@keyframes v2s{0%,60%{background:var(--ink);transform:none}63%{transform:scale(.92)}67%{background:var(--petrol);transform:none}90%{background:var(--petrol)}96%,100%{background:var(--ink)}}
@keyframes v2s1{0%,62%{opacity:1}66%,92%{opacity:0}97%,100%{opacity:1}}
@keyframes v2s2{0%,62%{opacity:0}66%,92%{opacity:1}97%,100%{opacity:0}}
.of-v2-list{position:absolute;left:1.6em;right:1.6em;top:6em;height:21em}
.of-v2-row{position:absolute;left:0;right:0;height:6.2em;border-radius:1.2em;background:#FAF6EE;box-shadow:inset 0 0 0 1px #E8E2D6;display:flex;align-items:center;gap:1.1em;padding:0 1.3em}
.of-v2-row:nth-child(1){top:0;transform:translateY(7.4em);animation:v2a 9s cubic-bezier(.65,0,.35,1) infinite}
.of-v2-row:nth-child(2){top:7.4em;transform:translateY(7.4em);animation:v2b 9s cubic-bezier(.65,0,.35,1) infinite}
.of-v2-row:nth-child(3){top:14.8em;transform:translateY(-14.8em);z-index:2;animation:v2r 9s cubic-bezier(.65,0,.35,1) infinite}
@keyframes v2a{0%,26%{transform:none}46%,90%{transform:translateY(7.4em)}100%{transform:none}}
@keyframes v2b{0%,26%{transform:none}46%,90%{transform:translateY(7.4em)}100%{transform:none}}
@keyframes v2r{0%,22%{transform:none;box-shadow:inset 0 0 0 1px #E8E2D6}27%{transform:scale(1.035);box-shadow:inset 0 0 0 2px var(--orange),0 1.6em 2.4em -1.2em rgba(24,27,26,.45);background:#fff}46%{transform:translateY(-14.8em) scale(1.035);box-shadow:inset 0 0 0 2px var(--orange),0 1.6em 2.4em -1.2em rgba(24,27,26,.45);background:#fff}50%,90%{transform:translateY(-14.8em);box-shadow:inset 0 0 0 1px #E8E2D6;background:#FAF6EE}100%{transform:none;box-shadow:inset 0 0 0 1px #E8E2D6}}
.of-v2-row .of-dg{flex:none;width:1.1em;height:1.9em;background-image:radial-gradient(#8E8878 .14em,transparent .17em);background-size:.56em .62em}
.of-v2-row .of-ch{flex:none;font-weight:600;font-size:.95em;padding:.3em .85em;border-radius:1em;background:#EFE6D3}
.of-v2-row .of-ln{flex:1;display:grid;gap:.5em}
.of-v2-row .of-ln i{display:block;height:.7em;border-radius:.4em;background:#CFC9BB}
.of-v2-row .of-ln i+i{width:62%}
.of-v2-row .of-th{flex:none;position:relative;width:5.4em;height:3.6em;border-radius:.8em;background:linear-gradient(150deg,var(--petrol),var(--lichen));overflow:hidden}
.of-v2-row .of-th::after{content:"";position:absolute;right:.7em;top:.6em;width:1.1em;height:1.1em;border-radius:50%;background:var(--orange)}
.of-v2-row .of-bt{flex:none;width:7em;height:2.3em;border-radius:1.2em;background:var(--orange)}
.of-v2-cur{position:absolute;z-index:6;left:62%;top:46%;width:2.6em;height:2.6em;animation:v2cur 9s cubic-bezier(.65,0,.35,1) infinite}
.of-v2-cur svg{width:100%;height:100%;filter:drop-shadow(0 .2em .3em rgba(0,0,0,.3))}
@keyframes v2cur{0%,12%{left:62%;top:46%;transform:none}22%,26%{left:14%;top:77%;transform:none}46%,50%{left:14%;top:31%}60%{left:77%;top:10%;transform:none}63%{transform:scale(.85)}67%{transform:none}90%{left:77%;top:10%}100%{left:62%;top:46%}}

/* 3 · SEO · GEO · KI: Suche, Ranking steigt, KI-Antwort */
.of-v3-q{position:absolute;left:1em;right:1em;top:1em;height:4.2em;border-radius:2.2em;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);display:flex;align-items:center;gap:1em;padding:0 1.6em;color:#fff}
.of-v3-q svg{width:1.7em;height:1.7em;flex:none}
.of-v3-q .of-t{display:block;width:21ch;white-space:nowrap;overflow:hidden;font-weight:500;font-size:1.25em;border-right:.12em solid var(--beige);animation:v3t 10s infinite}
@keyframes v3t{0%{width:0;animation-timing-function:steps(21)}12%,90%{width:21ch}97%,100%{width:0}}
.of-v3-rk{position:absolute;left:1em;top:6.2em;width:2.6em;height:20em}
.of-v3-rk b{position:absolute;left:0;width:2.6em;height:2.6em;border-radius:50%;display:grid;place-items:center;font-weight:700;background:rgba(255,255,255,.12);color:#fff}
.of-v3-rk b:nth-child(1){top:.9em;background:var(--orange);color:var(--ink);animation:v3b 10s infinite}
.of-v3-rk b:nth-child(2){top:5.9em}.of-v3-rk b:nth-child(3){top:10.9em}.of-v3-rk b:nth-child(4){top:15.9em}
@keyframes v3b{0%,50%{background:rgba(255,255,255,.12);color:#fff}58%,88%{background:var(--orange);color:var(--ink)}96%,100%{background:rgba(255,255,255,.12);color:#fff}}
.of-v3-res{position:absolute;left:4.4em;right:1em;top:6.2em;height:20em}
.of-v3-r{position:absolute;left:0;right:0;height:4.4em;border-radius:1.2em;background:rgba(255,255,255,.09);padding:0 1.3em;display:grid;gap:.55em;align-content:center}
.of-v3-r i{display:block;height:.7em;border-radius:.4em;background:rgba(255,255,255,.3)}
.of-v3-r i:first-child{width:68%;height:.9em;background:rgba(255,255,255,.6)}
.of-v3-r i:last-child{width:44%;background:rgba(255,255,255,.22)}
.of-v3-r:nth-child(1){top:0;transform:translateY(5em);animation:v3o 10s cubic-bezier(.65,0,.35,1) infinite}
.of-v3-r:nth-child(2){top:5em;transform:translateY(5em);animation:v3o 10s cubic-bezier(.65,0,.35,1) infinite}
.of-v3-r:nth-child(3){top:10em;transform:translateY(5em);animation:v3o 10s cubic-bezier(.65,0,.35,1) infinite}
.of-v3-r.of-me{top:15em;transform:translateY(-15em);z-index:2;background:var(--orange);color:var(--ink);animation:v3m 10s cubic-bezier(.65,0,.35,1) infinite}
.of-v3-r .of-mt{font-weight:700;font-size:1.2em;line-height:1.1}
.of-v3-r .of-ms{font-size:.95em;opacity:1}
@keyframes v3o{0%,40%{transform:none}55%,88%{transform:translateY(5em)}100%{transform:none}}
@keyframes v3m{0%,40%{transform:none;box-shadow:none}48%{transform:translateY(-7em) scale(1.03);box-shadow:0 1.4em 2.2em -1em rgba(226,98,43,.6)}55%,88%{transform:translateY(-15em);box-shadow:none}100%{transform:none;box-shadow:none}}
.of-v3-ai{position:absolute;left:1em;right:1em;bottom:1em;height:4.8em;border-radius:1.7em;background:var(--beige);color:var(--ink);display:flex;align-items:center;gap:1em;padding:0 1.3em;animation:v3ai 10s infinite}
@keyframes v3ai{0%,58%{opacity:0;transform:translateY(1.4em)}66%,90%{opacity:1;transform:none}97%,100%{opacity:0;transform:translateY(1.4em)}}
.of-v3-ai .of-sp{flex:none;width:2.4em;height:2.4em;border-radius:50%;background:var(--ink);color:var(--beige);display:grid;place-items:center}
.of-v3-ai .of-sp svg{width:1.3em;height:1.3em}
.of-v3-ai .of-dots{position:absolute;left:4.7em;display:flex;gap:.45em;animation:v3d 10s infinite}
.of-v3-ai .of-dots i{width:.8em;height:.8em;border-radius:50%;background:var(--ink);animation:v3dot 1s ease-in-out infinite}
.of-v3-ai .of-dots i:nth-child(2){animation-delay:.15s}.of-v3-ai .of-dots i:nth-child(3){animation-delay:.3s}
@keyframes v3dot{50%{opacity:.25}}
@keyframes v3d{0%,74%{opacity:1}76%,100%{opacity:0}}
.of-v3-ai .of-ans{flex:1;display:grid;gap:.5em;animation:v3a 10s infinite}
.of-v3-ai .of-ans i{display:block;height:.7em;border-radius:.4em;background:rgba(24,27,26,.28)}
.of-v3-ai .of-ans i+i{width:62%}
@keyframes v3a{0%,74%{opacity:0}80%,100%{opacity:1}}
.of-v3-ai .of-chip{flex:none;background:var(--orange);color:var(--ink);font-weight:700;font-size:.95em;padding:.45em 1em;border-radius:1.2em;animation:v3a 10s infinite}

/* 4 · Webhosting: Server, Datenpakete, Erreichbarkeit */
.of-v4-top{position:absolute;left:1em;right:1em;top:1em;display:flex;gap:.7em;flex-wrap:nowrap}
.of-v4-top span{display:inline-flex;align-items:center;gap:.6em;padding:.45em 1.1em;border-radius:1.5em;font-weight:600;font-size:.98em;white-space:nowrap;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32);color:#fff}
.of-v4-top .of-eco::before{content:"";width:.9em;height:.9em;border-radius:50% 0 50% 0;background:var(--lichen)}
.of-v4-top .of-de::before{content:"";width:1.4em;height:1em;border-radius:.2em;background:linear-gradient(#111 0 33%,#D22 33% 66%,#F5C400 66%)}
.of-v4-srv{position:absolute;left:1em;top:5.4em;width:11em;height:21em}
.of-v4-u{position:absolute;left:0;width:11em;height:6.2em;border-radius:1.3em;background:rgba(255,255,255,.1);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.3);display:flex;align-items:center;justify-content:space-between;padding:0 1.3em}
.of-v4-u:nth-child(1){top:0}.of-v4-u:nth-child(2){top:7.4em}.of-v4-u:nth-child(3){top:14.8em}
.of-v4-u .of-led{display:flex;gap:.55em}
.of-v4-u .of-led i{width:.9em;height:.9em;border-radius:50%;background:var(--orange);animation:v4led 1.8s ease-in-out infinite;animation-delay:var(--d)}
.of-v4-u .of-led i:nth-child(2){background:var(--beige)}.of-v4-u .of-led i:nth-child(3){background:var(--lichen)}
@keyframes v4led{0%,100%{opacity:1}50%{opacity:.25}}
.of-v4-u .of-sl{display:grid;gap:.5em;width:3.6em}
.of-v4-u .of-sl i{display:block;height:.5em;border-radius:.3em;background:rgba(255,255,255,.32)}
.of-v4-ln{position:absolute;left:12.3em;width:8em;border-top:2px dashed rgba(255,255,255,.32)}
.of-v4-pk{position:absolute;left:12.3em;width:1.1em;height:1.1em;margin-top:-.55em;border-radius:50%;background:var(--orange);animation:v4k 3s linear infinite;animation-delay:var(--d)}
.of-v4-pk.of-b{background:var(--beige);animation-name:v4r}
@keyframes v4k{0%{transform:translateX(0);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateX(6.9em);opacity:0}}
@keyframes v4r{0%{transform:translateX(6.9em);opacity:0}12%{opacity:1}85%{opacity:1}100%{transform:translateX(0);opacity:0}}
.of-v4-tg{position:absolute;right:1em;top:5.4em;width:10.6em;height:21em}
.of-v4-t{position:absolute;left:0;right:0;height:6.2em;border-radius:1.3em;background:var(--beige);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35em;font-weight:600;animation:v4p 3s ease-out infinite;animation-delay:var(--d)}
.of-v4-t:nth-child(1){top:0}.of-v4-t:nth-child(2){top:7.4em}.of-v4-t:nth-child(3){top:14.8em}
.of-v4-t svg{width:2.3em;height:2.3em}
@keyframes v4p{0%,78%{box-shadow:0 0 0 0 rgba(226,98,43,0)}84%{box-shadow:0 0 0 .5em rgba(226,98,43,.6)}100%{box-shadow:0 0 0 1.4em rgba(226,98,43,0)}}
.of-v4-hb{position:absolute;left:1em;right:1em;bottom:.5em;color:#fff}
.of-v4-hb p{margin:0 0 .2em;font-size:.95em;font-weight:600;color:rgba(255,255,255,.8);max-width:none}
.of-v4-hb svg{width:100%;height:auto}
.of-v4-hb path{fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.of-v4-hb .of-b{stroke:rgba(255,255,255,.28)}
.of-v4-hb .of-p{stroke:var(--orange);stroke-dasharray:16 84;animation:v4hb 2.6s linear infinite}
@keyframes v4hb{from{stroke-dashoffset:16}to{stroke-dashoffset:-84}}
@media (prefers-reduced-motion:reduce){
  .of-v1-tag span:nth-child(1){opacity:1}
  .of-v2-save .of-s1{opacity:0}.of-v2-save .of-s2{opacity:1}
  .of-v3-ai .of-dots{opacity:0}
}

/* Leistungs-Unterseiten: Animationen statt Fotos */
.of-vizc{width:100%;max-width:540px;justify-self:center;border-radius:36px;padding:clamp(18px,3vw,38px);background:var(--c);color:var(--fg,var(--ink));box-shadow:0 40px 60px -44px rgba(24,27,26,.45)}
.of-vizc .of-viz,.of-vizc .of-viz *,.of-vizc .of-viz *::before,.of-vizc .of-viz *::after{animation-play-state:running}
.of-vizc .of-viz{max-width:none}


.of-tm{width:100%;max-width:520px;justify-self:center;aspect-ratio:1;container-type:inline-size;position:relative;overflow:hidden;border-radius:36px;background:radial-gradient(circle at 50% 50%,#fff 0,#F6F1E8 62%,var(--fog) 100%);box-shadow:inset 0 0 0 1px var(--line)}
.of-tm-v{position:absolute;inset:0;font-size:2.9cqw;--r:11em;color:var(--ink)}
.of-tm-ring{position:absolute;left:50%;top:50%;width:calc(var(--r) * 2);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1.5px dashed rgba(24,27,26,.2);animation:tm-spin 90s linear infinite}
.of-tm-ring.of-r2{width:calc(var(--r) * 1.2);border-style:dotted;border-color:rgba(226,98,43,.5);animation-direction:reverse;animation-duration:60s}
@keyframes tm-spin{to{rotate:360deg}}
.of-tm-sp{position:absolute;left:50%;top:50%;width:var(--r);height:0;transform-origin:0 0;transform:rotate(var(--a));border-top:1.5px solid rgba(24,27,26,.14);animation:tm-sp 56s linear infinite;z-index:1}
@keyframes tm-sp{to{transform:rotate(calc(var(--a) + 360deg))}}
.of-tm-sp i{position:absolute;top:-.4em;left:0;width:.75em;height:.75em;border-radius:50%;background:var(--orange);opacity:0;animation:tm-pk 3.6s ease-in-out infinite;animation-delay:var(--d,0s)}
@keyframes tm-pk{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - .75em);opacity:0}}
.of-tm-nd{position:absolute;left:50%;top:50%;transform-origin:0 0;translate:-50% -50%;z-index:2;transform:rotate(var(--a)) translateX(var(--r)) rotate(calc(var(--a) * -1));animation:tm-o 56s linear infinite}
@keyframes tm-o{to{transform:rotate(calc(var(--a) + 360deg)) translateX(var(--r)) rotate(calc(var(--a) * -1 - 360deg))}}
.of-tm-nd b{display:flex;align-items:center;gap:.6em;white-space:nowrap;font-weight:600;padding:.55em 1.2em;border-radius:2em;background:#fff;box-shadow:0 0 0 1px var(--line),0 1em 1.8em -1.2em rgba(24,27,26,.45)}
.of-tm-nd b::before{content:"";width:.8em;height:.8em;border-radius:50%;background:var(--c)}
.of-tm-core{position:absolute;left:50%;top:50%;width:7.2em;aspect-ratio:1;translate:-50% -50%;border-radius:50%;background:var(--orange);display:grid;place-items:center;z-index:3;box-shadow:0 1.2em 2.2em -1em rgba(226,98,43,.7)}
.of-tm-core b{font-family:var(--display);font-weight:700;font-size:1.9em;letter-spacing:-.04em;color:var(--ink)}
.of-tm-core::before,.of-tm-core::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--orange);opacity:0;animation:tm-pulse 3.6s ease-out infinite}
.of-tm-core::after{animation-delay:1.8s}
@keyframes tm-pulse{0%{transform:scale(1);opacity:.55}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion:reduce){.of-tm-sp i{opacity:1;left:50%}}
.of-stage{cursor:pointer}
.of-phm{gap:.8em}
.of-phm .of-pi{aspect-ratio:auto;height:6.1em;margin-bottom:.9em}
.of-rv-tabs{position:relative}
.of-rv-lw{position:relative;min-height:0}
.of-rv-lw .of-rv-tabs.of-scl{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--orange) transparent;padding-right:8px;align-content:start}
.of-rv-tabs.of-scl::-webkit-scrollbar{width:6px}.of-rv-tabs.of-scl::-webkit-scrollbar-thumb{background:var(--orange);border-radius:6px}
@media (max-width:900px){.of-rv-lw{height:440px}}

.of-ph .of-lead{font-size:clamp(1.2rem,1.7vw,1.6rem);line-height:1.45;color:var(--ink);font-weight:500;letter-spacing:-.012em;max-width:52ch;margin-bottom:0}
.of-v2h{position:absolute;left:1.2em;right:1.2em;top:1.1em;display:grid;gap:.9em}
.of-v2h-l{display:flex;align-items:center;gap:1em;line-height:1}
.of-v2h-fl{flex:none;width:4.4em;height:3em;border-radius:.5em;overflow:hidden;box-shadow:0 .6em 1.1em -.5em rgba(0,0,0,.55)}
.of-v2h-fl svg{display:block;width:100%;height:100%}
.of-v2h-de{background:linear-gradient(#111 0 33.3%,#D22 33.3% 66.6%,#F5C400 66.6%)}
.of-v2h-t{font-family:var(--display);font-size:1.75em;font-weight:700;letter-spacing:-.035em;white-space:nowrap}
.of-v2h-t span{font-weight:600;opacity:.78}
.of-v2-body{position:absolute;left:0;right:0;bottom:0;height:30.9em;font-size:.745em}
@keyframes v2cur{0%,12%{left:50%;top:55%;transform:none}22%,26%{left:10.5%;top:80.6%;transform:none}46%,50%{left:10.5%;top:32.7%}60%{left:83%;top:10.4%;transform:none}63%{transform:scale(.85)}67%{transform:none}90%{left:83%;top:10.4%}100%{left:50%;top:55%}}

.of-v4h .of-v4-srv,.of-v4h .of-v4-tg{top:10.2em;height:16em}
.of-v4h .of-v4-u,.of-v4h .of-v4-t{height:4.8em}
.of-v4h .of-v4-u:nth-child(2),.of-v4h .of-v4-t:nth-child(2){top:5.6em}
.of-v4h .of-v4-u:nth-child(3),.of-v4h .of-v4-t:nth-child(3){top:11.2em}
.of-v4h .of-v4-t{gap:.2em}.of-v4h .of-v4-t svg{width:1.9em;height:1.9em}
.of-v4h .of-v4-hb{bottom:.4em}
.of-v4h-t{position:absolute;left:1em;right:1em;top:1em;display:grid;gap:.7em;justify-items:start;color:#fff}
.of-v4h-r1{display:flex;align-items:center;gap:1em}
.of-v4h-flag{flex:none;width:4.4em;height:3em;border-radius:.5em;background:linear-gradient(#111 0 33.3%,#D22 33.3% 66.6%,#F5C400 66.6%);box-shadow:0 .6em 1.1em -.5em rgba(0,0,0,.6)}
.of-v4h-tx{display:grid;line-height:1.05}
.of-v4h-tx small{font-size:1.55em;font-weight:600;color:rgba(255,255,255,.85)}
.of-v4h-tx b{font-family:var(--display);font-size:2.7em;font-weight:700;letter-spacing:-.04em}
.of-v4h-eco{display:inline-flex;align-items:center;gap:.6em;padding:.45em 1.1em;border-radius:1.5em;font-weight:600;font-size:.98em;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.32)}
.of-v4h-eco::before{content:"";width:.9em;height:.9em;border-radius:50% 0 50% 0;background:var(--lichen)}
.of-cards2 .of-card2.of-wide{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(16px,4vw,64px);align-items:start}
.of-cards2 .of-card2.of-wide>h3{margin:0}
.of-cards2 .of-card2.of-wide>p{margin:0;max-width:none}
@media (max-width:760px){.of-cards2 .of-card2.of-wide{grid-template-columns:1fr}}

/* ===== Suche (indexed_search) ===== */
.of-sform .of-sbox{display:flex;align-items:center;gap:14px;background:#fff;border-radius:999px;padding:8px 8px 8px 24px;box-shadow:inset 0 0 0 1.5px rgba(24,27,26,.16),0 30px 50px -40px rgba(24,27,26,.45);max-width:820px}
.of-sform .of-sbox:focus-within{box-shadow:inset 0 0 0 2px var(--petrol),0 30px 50px -40px rgba(24,27,26,.45)}
.of-sform svg{width:24px;height:24px;flex:none;color:var(--ink-2)}
.of-sform input[type=search]{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:clamp(1.05rem,1.6vw,1.35rem);padding:.7em 0;color:var(--ink)}
.of-sform input[type=search]::-webkit-search-cancel-button{appearance:none}
.of-sform .of-btn{margin:0}
.of-sres-sum{font-size:1.1rem;color:var(--ink-2);margin:0 0 clamp(18px,2.4vw,32px)}
.of-sres-sum mark{background:var(--beige);color:var(--ink);padding:.05em .35em;border-radius:.4em}
.of-sres-list{list-style:none;margin:0;padding:0;display:grid;gap:14px;max-width:980px}
.of-sres{background:var(--fog);border-radius:28px;padding:clamp(20px,2.6vw,32px)}
.of-sres h3{margin:0 0 .35em;font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.03em}
.of-sres-d{margin:0 0 .5em;max-width:70ch}
.of-sres-d b,.of-sres-t b,.of-sres-d strong{background:var(--beige);font-weight:600;border-radius:.3em;padding:0 .15em}
.of-sres-p{margin:0;font-size:.92rem;color:var(--petrol);font-weight:500}
.of-sres-none{max-width:760px;background:var(--fog);border-radius:28px;padding:clamp(22px,3vw,40px)}
.of-sres-none h2{font-size:clamp(1.5rem,2.6vw,2.2rem);margin:0 0 .4em}
.of-sres-none p{margin:0}
.of-spag ul{display:flex;gap:8px;flex-wrap:wrap;list-style:none;margin:clamp(22px,3vw,40px) 0 0;padding:0}
.of-spag a{display:inline-flex;align-items:center;min-width:46px;height:46px;justify-content:center;padding:0 18px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--line);text-decoration:none;font-weight:600;transition:background-color .25s,color .25s}
.of-spag a:hover,.of-spag a:focus-visible{background:var(--ink);color:#fff}
.of-spag a.of-is-cur{background:var(--ink);color:#fff}
@media (max-width:560px){.of-sform .of-sbox{padding-left:16px}.of-sform .of-btn{padding:0 18px;height:46px}}

.of-sres-t a{text-decoration:none;color:var(--ink)}.of-sres-t a:hover,.of-sres-t a:focus-visible{text-decoration:underline;text-underline-offset:4px}

/* ===== Formular-Framework: Zusatzklassen ===== */
.of-cform .of-fgrid{grid-template-columns:1fr 1fr}
.of-cform .of-f.of-wide,.of-cform .of-wide{grid-column:1/-1}
.of-cform .of-req{color:var(--orange);font-weight:700}
.of-cform .of-ferr{color:#B3261E;font-weight:600;font-size:.95rem}
.of-cform .of-f.of-bad input,.of-cform .of-f.of-bad textarea{border-color:#B3261E}
.of-cform .of-fnav{margin-top:6px}
.of-cform .of-chk{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-2)}
.of-cform input[type=checkbox]{width:22px;height:22px;margin-top:2px;accent-color:var(--orange);flex:none}
.of-cform input[type=text],.of-cform input[type=tel],.of-cform input[type=email],.of-cform textarea{font:inherit;border:1.5px solid #D9D3C5;background:#fff;border-radius:16px;padding:.85em 1em;outline:0;width:100%;transition:border-color .25s,box-shadow .25s}
.of-cform input:focus,.of-cform textarea:focus{border-color:var(--petrol);box-shadow:0 0 0 4px rgba(47,93,98,.16)}
.of-cform .of-f>label>span:first-child{font-weight:600;font-size:.95rem}
.of-cform .of-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.of-fok{background:var(--beige);border-radius:20px;padding:22px 26px;font-size:1.1rem}
@media (max-width:900px){.of-cform .of-fgrid{grid-template-columns:1fr}}

/* Überschriftenebenen: semantisch h2, optisch wie bisher h3 */
.of-card2 h2.of-ct{font-size:clamp(1.2rem,1.9vw,1.6rem);margin:1.6em 0 .6em;letter-spacing:-.03em}
.of-card2 h2.of-ct:first-child{margin-top:0}
.of-ovc h2{font-size:clamp(2rem,3.8vw,3.4rem);margin:0 0 .3em;letter-spacing:-.05em}
.of-sres h2{margin:0 0 .35em;font-size:clamp(1.25rem,2vw,1.7rem);letter-spacing:-.03em}
.of-vt-t h3{font-family:var(--display);font-size:1.25rem;margin:0 0 .4em;letter-spacing:-.03em}
.of-prose h3.of-lvl2,.of-legal h3.of-lvl2{font-size:clamp(1.5rem,2.4vw,2.1rem)}