/* fischkopp.digital, geteilte Website. Ausgelagert aus index.html am 05.11.2026 */
:root{
  --step-7: clamp(4.7684rem, -0.0494rem + 21.4123vw, 19.2217rem);
  --step-6: clamp(3.8147rem, 0.8148rem + 13.333vw, 12.8145rem);
  --step-5: clamp(3.0518rem, 1.2214rem + 8.1351vw, 8.543rem);
  --step-4: clamp(2.4414rem, 1.3568rem + 4.8206vw, 5.6953rem);
  --step-3: clamp(1.9531rem, 1.3385rem + 2.7315vw, 3.7969rem);
  --step-2: clamp(1.5625rem, 1.2396rem + 1.4352vw, 2.5313rem);
  --step-1: clamp(1.25rem, 1.1042rem + 0.6481vw, 1.6875rem);
  --step-0: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --step--1: clamp(0.75rem, 0.8167rem + -0.0741vw, 0.8rem);
  --step--2: clamp(0.5rem, 0.6867rem + -0.2074vw, 0.64rem);
  --space-3xs: clamp(0.25rem, 0.2292rem + 0.0926vw, 0.3125rem);
  --space-2xs: clamp(0.5rem, 0.4792rem + 0.0926vw, 0.5625rem);
  --space-xs: clamp(0.75rem, 0.7083rem + 0.1852vw, 0.875rem);
  --space-s: clamp(1rem, 0.9583rem + 0.1852vw, 1.125rem);
  --space-m: clamp(1.5rem, 1.4375rem + 0.2778vw, 1.6875rem);
  --space-l: clamp(2rem, 1.9167rem + 0.3704vw, 2.25rem);
  --space-xl: clamp(3rem, 2.875rem + 0.5556vw, 3.375rem);
  --space-2xl: clamp(4rem, 3.8333rem + 0.7407vw, 4.5rem);
  --space-3xl: clamp(6rem, 5.75rem + 1.1111vw, 6.75rem);
  --space-4xl: clamp(8rem, 7.6667rem + 1.4815vw, 9rem);
  --space-3xs-2xs: clamp(0.25rem, 0.1458rem + 0.463vw, 0.5625rem);
  --space-2xs-xs: clamp(0.5rem, 0.375rem + 0.5556vw, 0.875rem);
  --space-xs-s: clamp(0.75rem, 0.625rem + 0.5556vw, 1.125rem);
  --space-s-m: clamp(1rem, 0.7708rem + 1.0185vw, 1.6875rem);
  --space-m-l: clamp(1.5rem, 1.25rem + 1.1111vw, 2.25rem);
  --space-l-xl: clamp(2rem, 1.5417rem + 2.037vw, 3.375rem);
  --space-xl-2xl: clamp(3rem, 2.5rem + 2.2222vw, 4.5rem);
  --space-2xl-3xl: clamp(4rem, 3.0833rem + 4.0741vw, 6.75rem);
  --space-3xl-4xl: clamp(6rem, 5rem + 4.4444vw, 9rem);
}
:root{
  --gut:clamp(16px, 7.2vw - 32px, 72px);
  --ease-out:cubic-bezier(.25,1,.5,1); --ease-io:cubic-bezier(.65,0,.35,1); --ease:var(--ease-out);
  --dur-press:.14s; --dur-hover:.2s; --dur-ui:.28s; --dur-expand:.32s; --dur-reveal:.6s; --dur-move:.7s; --dur-hero:.9s;
  --mono:'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sans:'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  color-scheme:light;
}
:root{ --on-light:#0b0b0b; --display:var(--sans); --d-w:600; --d-tr:-.035em; --d-wd:100%; --d-k:1; --mono-k:1; --ic-acc:var(--accent) }
:root{
  --bg:#ffffff; --card:#e3ebf1; --panel:#fbfcfd; --field:#fdfdfe; --ink:#14202c; --muted:#5f6872; --line:#e1e5e8; --line-strong:#cfd3d8; --field-line:#899098; --dark:#0e3a5f; --dark-2:#1c4669; --dark-line:#325877; --on-dark:#f9fbfd; --on-dark-muted:#a9b9c8; --accent:#2f7fc0; --acc-fill:#2f7fc0; --acc-on-dark:#a9d4f5; --on-acc:#ffffff; --btn:#2a75b2; --btn-hover:#286ca3; --on-btn:#ffffff; --pill-light:#fafcfd; --pill-hover:#ffffff; --on-light:#14202c; --sh-front:#c6e5fb; --sh-mid:#2f7fc0; --sh-back:#0e3a5f;
}
.nav{transition:width var(--dur-move) var(--ease-io)}
:root .nav-bar{--on-dark:var(--ink); --on-dark-muted:#3d4853; --dark-2:color-mix(in srgb, var(--ink) 8%, transparent); color:var(--ink); background:color-mix(in srgb, color-mix(in srgb, var(--bg) 84%, #808080) 72%, transparent); border-color:color-mix(in srgb, var(--ink) 14%, transparent); -webkit-backdrop-filter:blur(16px) saturate(1.2); backdrop-filter:blur(16px) saturate(1.2); transition:height var(--dur-move) var(--ease-io)}
.claim{transition:opacity var(--dur-ui) var(--ease-out)}
.nav-runter .nav:not(:has(.menu:not([hidden]))):not(:has(:focus-visible)){width:min(222px, calc(100% - 32px))}
.nav-runter .nav:not(:has(.menu:not([hidden]))):not(:has(:focus-visible)) .claim{opacity:0; visibility:hidden; width:0; overflow:hidden; transition:opacity .16s var(--ease-out), visibility 0s linear .16s, width 0s linear .16s}
:root.nav-runter .nav-bar{height:46px}
.ct-form[hidden]{display:none}
/* Sektionen im Wechsel: Weiß und #F4F7FC */
/* Tonwechsel der Blöcke: siehe .tn-g */
.foot{margin-top:0}
:root .stn{border:0}
:root .stn .ic,:root .pr .stn .ic,:root .fq-ic .ic{width:var(--s); height:var(--s)}
.on-dark,.pk.rec{--ic-acc:var(--acc-on-dark)}
h1,h2,h3,.h2,.big2,.disp,.pos p,.foot-w,.menu a:not(.pill){font-family:var(--display); font-stretch:var(--d-wd)}
h1,h2,.h2,.big2{font-weight:var(--d-w)}
.ic{display:block; width:1em; height:1em; flex:none; overflow:visible}
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent],.lenis [data-lenis-prevent-wheel],.lenis [data-lenis-prevent-touch]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
*,*::before,*::after{box-sizing:border-box}
html{background:var(--bg); -webkit-text-size-adjust:100%; text-size-adjust:100%; interpolate-size:allow-keywords}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans); font-size:var(--step-0); line-height:1.55; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility}
img,svg{display:block; max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4,p,ul,ol,figure,blockquote,dl,dd{margin:0}
ul,ol{padding:0; list-style:none}
:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.on-dark :focus-visible{outline-color:var(--on-dark)}
[tabindex="-1"]:focus{outline:none}
.sr-only{position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.skip{position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--bg); padding:12px 16px; border-radius:10px; text-decoration:none}
.skip:focus{top:12px}
::selection{background:var(--ink); color:var(--bg)}
.wrap{max-width:1440px; margin-inline:auto; padding-inline:var(--gut)}
.mono{font-family:var(--mono); font-size:calc(var(--step--1) * var(--mono-k)); font-weight:400; letter-spacing:.04em; text-transform:uppercase; line-height:1.45}
.br{display:inline-block; padding-inline:.45em; opacity:.9}
.muted{color:var(--muted)}
.sec{padding-block:var(--space-3xl-4xl)}
.sh{display:grid; grid-template-columns:1fr auto; gap:var(--space-s) var(--space-l); align-items:start; margin-bottom:var(--space-xl-2xl)}
.h2{font-size:calc(var(--step-3) * var(--d-k)); font-weight:600; line-height:1; letter-spacing:var(--d-tr)}
.h2 span{display:block}
.tag{text-align:right; color:var(--muted)}
.tag b{display:block; font-weight:400; color:var(--ink)}
.pill{display:inline-flex; align-items:center; gap:14px; min-height:48px; padding:7px 7px 7px 20px; border-radius:999px; border:1px solid transparent; font-weight:500; font-size:var(--t-ui); line-height:1.2; text-decoration:none; cursor:pointer; white-space:nowrap; transition:background-color .25s, color .25s, border-color .25s, transform .2s var(--ease)}

.sq{flex:none; display:grid; place-items:center; width:32px; height:32px; border-radius:8px}
.sq svg{width:12px; height:12px}
@media (hover:hover){ .pill:hover .sq svg{transform:translate(1px,-1px)} }
.sq svg{transition:transform .25s var(--ease)}
.pill--dark{background:var(--btn); color:var(--on-btn)}
.pill--dark .sq{background:var(--on-btn); color:var(--btn)}
@media (hover:hover){ .pill--dark:hover{background:var(--btn-hover)} }
.pill--light{background:var(--pill-light); color:var(--on-light)}
.pill--light .sq{background:var(--on-light); color:var(--pill-light)}
@media (hover:hover){ .pill--light:hover{background:var(--pill-hover)} }
.pill--line{background:transparent; color:var(--ink); border-color:var(--field-line)}
.pill--line .sq{background:var(--ink); color:var(--bg)}
@media (hover:hover){ .pill--line:hover{border-color:var(--ink)} }

.tlink{display:inline-flex; align-items:center; min-height:44px; gap:8px; font-weight:500; text-decoration:underline; text-underline-offset:.25em; text-decoration-thickness:1px; color:var(--ink); background:none; border:0; padding:0; cursor:pointer}
@media (hover:hover){ .tlink:hover{text-decoration-thickness:2px} }
.nav{position:fixed; z-index:60; top:calc(16px + env(safe-area-inset-top)); left:50%; transform:translateX(-50%); width:min(600px, calc(100% - 32px)); color:var(--on-dark)}
.nav-bar{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:54px; padding:0 5px 0 8px; background:var(--dark); border:1px solid var(--dark-line); border-radius:14px}
.brand{display:inline-flex; align-items:center; gap:10px; min-height:44px; padding-right:6px; text-decoration:none; font-weight:500; font-size:var(--t-ui); letter-spacing:-.01em; justify-self:start}
.brand img{width:30px; height:30px; border-radius:50%; background:#fff}
.brand .tld{color:var(--on-dark-muted)}
.claim{color:var(--on-dark); text-align:center; white-space:nowrap}
.menu-btn{justify-self:end; display:grid; place-items:center; width:44px; height:44px; border:0; border-radius:10px; background:transparent; color:var(--on-dark); cursor:pointer; transition:transform var(--dur-press) var(--ease-out)}
@media (hover:hover){ .menu-btn:hover{background:var(--dark-2)} }
.menu-btn svg{width:14px; height:14px; transition:transform .35s var(--ease)}
.menu-btn[aria-expanded="true"] svg{transform:rotate(45deg)}
.menu{position:absolute; left:0; right:0; top:calc(100% + 8px); background:var(--dark); border:1px solid var(--dark-line); border-radius:14px; padding:10px 18px 18px}
.menu[hidden]{display:none}
.menu a:not(.pill){display:flex; justify-content:space-between; align-items:center; min-height:52px; border-bottom:1px solid var(--dark-line); text-decoration:none; font-size:var(--step-1); font-weight:500; letter-spacing:-.02em}
.menu a:not(.pill) span{color:var(--on-dark-muted)}
@media (hover:hover){ .menu a:not(.pill):hover{color:var(--acc-on-dark)} }
.menu .pill{margin-top:16px}
.no-js .menu-btn{visibility:hidden}
.stk{--s1:var(--line-strong); --s2:var(--line); box-shadow:0 6px 0 -2px var(--s1), 0 12px 0 -5px var(--s2)}
.on-dark .stk,.stk.dk{--s1:var(--dark-line); --s2:color-mix(in srgb, var(--dark-line) 50%, var(--dark))}
.stn{--s:44px; position:relative; display:grid; place-items:center; flex:none; width:var(--s); height:var(--s); border-radius:50%; border:1.5px solid var(--line-strong); background:var(--bg); color:var(--ink); transition:border-color .4s, background-color .4s}
.stn .ic{width:calc(var(--s) * .5); height:calc(var(--s) * .5)}
.stn.on{border-color:var(--ink)}
.on-dark .stn{background:var(--dark); border-color:var(--dark-line); color:var(--on-dark)}
.on-dark .stn.on{border-color:var(--on-dark)}
.rt{position:relative; background:var(--line-strong)}
.rt > i{position:absolute; inset:0; background:var(--acc-fill); transform:scaleY(var(--k, 1)); transform-origin:50% 0}
.rt--x > i{transform:scaleX(var(--k, 1)); transform-origin:0 50%}
.on-dark .rt{background:var(--dark-line)}
.on-dark .rt > i{background:var(--acc-on-dark)}
.hero{position:relative; isolation:isolate; margin:8px; height:calc(100svh - 16px); min-height:600px; max-height:1080px; border-radius:20px; overflow:hidden; background:var(--dark); color:var(--on-dark)}
.hero-fx{position:absolute; inset:0; z-index:-1; background:var(--dark)}
.hero-fx canvas{display:block}
.hero{--hpad:max(20px, calc(var(--gut) - 8px))}
.hero-fx{-webkit-mask-image:linear-gradient(14deg, rgba(0,0,0,.22) 22%, #000 68%); mask-image:linear-gradient(14deg, rgba(0,0,0,.22) 22%, #000 68%)}
.hero-in{height:100%; display:flex; align-items:flex-end; justify-content:space-between; gap:40px; padding:0 var(--hpad) clamp(20px, 3vw, 44px)}
.hero h1{--fs:min(var(--step-6), 11rem, calc((100vw - 16px - 2 * var(--hpad) - 350px - 40px) / 7.1)); font-size:calc(var(--fs) * var(--d-k)); line-height:.9; letter-spacing:var(--d-tr); font-weight:600; color:var(--on-dark); white-space:nowrap}
.ln-m{display:block; overflow:clip; padding-bottom:.11em; margin-bottom:-.11em}
.ln{display:block}
.status{flex:none; display:flex; align-items:center; gap:12px; padding:6px; background:var(--dark-2); border:1px solid var(--dark-line); border-radius:999px; color:var(--on-dark); text-decoration:none; transition:border-color .3s}
@media (hover:hover){ .status:hover{border-color:var(--on-dark-muted)} }
.status-img{width:44px; height:44px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:#d3d3d3; flex:none}
.status-t{display:flex; flex-direction:column; gap:2px; padding-right:6px; font-size:var(--t-ui); line-height:1.25; white-space:nowrap}
.status-t b{font-weight:500}
.status-t span{color:var(--on-dark-muted); font-size:var(--t-s)}
.status .sq{width:34px; height:34px; border-radius:50%; background:var(--pill-light); color:var(--on-light); flex:none}
.hero{--hrt-y:clamp(26px, 2.8vw, 38px)}
.hero-in{padding-bottom:calc(var(--hrt-y) + 18px + clamp(18px, 2.2vw, 32px))}
.hero h1 .w{display:inline-block}
.hrt{position:absolute; left:0; right:0; bottom:0; height:calc(var(--hrt-y) + 18px); pointer-events:none}
.hrt-svg{position:absolute; inset:0; width:100%; height:100%; overflow:visible}
.hrt-ln{fill:none; stroke:var(--acc-on-dark); stroke-width:2}
.hrt-st{--s:36px; position:absolute; top:0; right:var(--hpad)}
.pos{padding-block:0 var(--space-xl); text-align:center}
.pos-in{width:2px; height:calc(var(--space-3xl-4xl) - var(--space-s)); margin:0 auto var(--space-m)}
.pos-t{max-width:21em; margin-inline:auto; font-size:var(--step-2); font-weight:500; line-height:1.18; letter-spacing:-.025em; text-wrap:balance}
.pr{position:relative; max-width:960px; margin:var(--space-xl) auto 0}
.pr-rail{position:absolute; left:12.5%; right:12.5%; top:22px; height:2px; margin-top:-1px}
.pr-list{position:relative; z-index:1; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:8px}
.pr a,.pr .pr-a{display:flex; flex-direction:column; align-items:center; gap:12px; min-height:44px; padding-bottom:4px; text-decoration:none; color:var(--muted); font-weight:600; font-size:var(--t-ui); line-height:1.25; letter-spacing:.01em; text-transform:uppercase; transition:color .25s}
@media (hover:hover){ .pr a:hover{color:var(--ink)} }
@media (hover:hover){ .pr a:hover .stn{border-color:var(--ink)} }
.pr .stn .ic{width:22px; height:22px}
@media (max-width:699.98px){
  .pr{width:max-content; max-width:100%}
  .pr-list{grid-template-columns:minmax(0,1fr); gap:14px}
  .pr a,.pr .pr-a{flex-direction:row; gap:16px; text-align:left}
  .pr-rail{left:22px; right:auto; top:22px; bottom:22px; width:2px; height:auto; margin:0 0 0 -1px}
  .pr-rail.rt--x > i{transform:scaleY(var(--k, 1)); transform-origin:50% 0}
}
@media (max-width:1199.98px){
  .hero-in{flex-direction:column; align-items:flex-start; justify-content:flex-end; gap:28px}
  .hero h1{--fs:min(var(--step-6), 11rem, calc((100vw - 16px - 2 * var(--hpad)) / 7.1))}
}
@media (max-width:700px){
  .hero{min-height:560px}
  .hero-in{gap:18px}
  .status{max-width:100%}
  .status-t{white-space:normal; font-size:var(--t-ui)}
  .status-t span{font-size:var(--t-s)}
}
.plus{position:relative; display:inline-grid; place-items:center; width:26px; height:26px; border-radius:7px; background:var(--ink); color:var(--card); flex:none}
.plus::before,.plus::after{content:""; position:absolute; width:10px; height:1.5px; background:currentColor; transition:transform .45s var(--ease)}
.plus::after{transform:rotate(90deg)}
.plus.x::before{transform:rotate(45deg)} .plus.x::after{transform:rotate(135deg)}

.pk-head{display:grid; grid-template-columns:1fr auto; gap:var(--space-m) var(--space-l); align-items:end; margin-bottom:var(--space-xl)}
.tabs{position:relative; display:inline-flex; padding:5px; background:var(--dark); border-radius:999px; max-width:100%}
.tab{position:relative; z-index:1; min-height:46px; padding:0 20px; border:0; border-radius:999px; background:transparent; color:var(--on-dark-muted); font-weight:500; font-size:var(--t-ui); white-space:nowrap; cursor:pointer; transition:color .3s, transform var(--dur-press) var(--ease-out)}
@media (hover:hover){ .tab:hover{color:var(--on-dark)} }
.tab[aria-selected="true"]{color:var(--on-light)}
.tab:focus-visible{outline:2px solid var(--acc-on-dark); outline-offset:2px}
.tab .s{display:none}
.tab-ind{position:absolute; z-index:0; top:5px; bottom:5px; left:0; width:0; border-radius:999px; background:var(--pill-light)}
.no-js .tabs{display:none}
.pn{outline:none}
.js .pn[hidden]{display:none}
.pn-h{display:none}
.no-js .pn{margin-bottom:var(--space-2xl)}
.no-js .pn-h{display:block; font-size:var(--step-2); font-weight:600; letter-spacing:-.02em; margin-bottom:var(--space-s)}
.pn-intro{display:flex; justify-content:space-between; gap:var(--space-l); align-items:end; margin-bottom:var(--space-m)}
.pn-intro p{max-width:52ch; text-wrap:pretty; font-size:var(--step-1); line-height:1.35; letter-spacing:-.015em}
.pn-intro .mono{color:var(--muted); white-space:nowrap}
.pk-grid{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.pk{display:flex; flex-direction:column; padding:clamp(18px, 2vw, 26px); background:var(--card); border-radius:16px; min-width:0}
.pk-top:has(> span:only-child){justify-content:flex-end}
.pk-top{display:flex; justify-content:space-between; gap:12px; color:var(--muted)}
.pk-badge{display:inline-flex; align-items:center; gap:8px; color:var(--ink); text-align:right}
.pk-ic{width:40px; height:40px; margin-top:clamp(28px, 3vw, 48px)}
.pk h3{margin-top:14px; font-size:var(--step-2); font-weight:600; line-height:1.05; letter-spacing:-.03em}
.pk-who{margin-top:6px; color:var(--muted)}
.pk-fmt{margin-top:18px; padding-top:12px; border-top:1px solid var(--line-strong)}
.pk-price{margin-top:6px; font-size:var(--step-3); font-weight:600; line-height:1.05; letter-spacing:var(--d-tr); font-variant-numeric:tabular-nums}
.pk-price small{margin-left:8px; font-family:var(--mono); font-size:var(--step--1); font-weight:400; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.pk-res{margin-top:20px}
.pk-res .mono{color:var(--muted)}
.pk-res p{margin-top:4px; line-height:1.45}
.pk-pts{margin-top:16px; display:grid; gap:8px}
.pk-pts li{position:relative; padding-left:18px; line-height:1.45}
.pk-pts li::before{content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; border-radius:1px; background:currentColor}
.pk-cta{margin-top:auto; padding-top:26px}
.pk.rec{background:var(--dark); color:var(--on-dark)}
.pk.rec .pk-top,.pk.rec .pk-who,.pk.rec .pk-res .mono,.pk.rec .pk-price small{color:var(--on-dark-muted)}
.pk.rec .pk-badge{color:var(--on-dark)}
.pk.rec .pk-fmt{border-top-color:var(--dark-line)}
.pk.rec :focus-visible{outline-color:var(--on-dark)}
.pn-foot{margin-top:var(--space-m); color:var(--muted)}
.stack{display:grid}
.stack > li{position:sticky; top:calc(92px + var(--i) * 18px); padding-bottom:26svh}
.stack > li:last-child{padding-bottom:0}
.sk{position:relative; display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--space-l) var(--space-xl); min-height:min(460px, calc(100svh - 240px)); padding:clamp(22px, 3vw, 44px); background:var(--panel); border:1px solid var(--line-strong); border-radius:20px; transform-origin:50% 0; --dim:0}
.sk::after{content:""; position:absolute; inset:-1px; border-radius:inherit; background:var(--dark); opacity:var(--dim); pointer-events:none}
.sk.dk{background:var(--dark); color:var(--on-dark); border-color:var(--dark-line)}
.sk-l{display:flex; flex-direction:column; justify-content:space-between; gap:var(--space-l); min-width:0}
.sk-k{display:flex; flex-wrap:wrap; gap:4px 18px; color:var(--muted)}
.sk-k span:first-child{color:var(--ink)}
.sk.dk .sk-k{color:var(--on-dark-muted)}
.sk.dk .sk-k span:first-child{color:var(--on-dark)}
.sk-h{font-size:calc(min(var(--step-4), 4.75rem) * var(--d-k)); font-weight:var(--d-w); line-height:.95; letter-spacing:var(--d-tr); hyphens:auto; overflow-wrap:break-word}
.sk-seg{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:6px}
.sk-seg i{display:block; height:4px; border-radius:2px; background:var(--line-strong); transform-origin:left center}
.sk-seg i.on{background:var(--acc-fill)}
.sk.dk .sk-seg i{background:var(--dark-line)}
.sk.dk .sk-seg i.on{background:var(--acc-on-dark)}
.sk-r{display:flex; flex-direction:column; gap:var(--space-m); min-width:0}
.sk-ic{width:64px; height:64px; align-self:flex-end}
.sk-d{font-size:var(--step-1); line-height:1.35; letter-spacing:-.015em; max-width:34ch; text-wrap:pretty}
.sk-m{margin-top:auto; border-top:1px solid var(--line-strong)}
.sk-m div{display:grid; grid-template-columns:6.5rem minmax(0,1fr); gap:12px; padding:12px 0; border-bottom:1px solid var(--line-strong)}
.sk-m dt{color:var(--muted); padding-top:.15em}
.sk-m dd{font-weight:500}
.sk.dk .sk-m,.sk.dk .sk-m div{border-color:var(--dark-line)}
.sk.dk .sk-m dt{color:var(--on-dark-muted)}
.flow-note{margin-top:var(--space-l); color:var(--muted)}
@media (max-width:767.98px){
  .stack{gap:22px}
  .stack > li{position:relative; top:auto; padding-bottom:0}
  .sk{grid-template-columns:minmax(0,1fr); min-height:0}
  .sk-ic{width:48px; height:48px; align-self:flex-start; order:-1}
  .sk-h{font-size:calc(var(--step-3) * var(--d-k))}
  .sk-m div{grid-template-columns:5rem minmax(0,1fr)}
}
.cc{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-xl-2xl); align-items:center}
.cc-intro{display:flex; flex-direction:column; gap:var(--space-m)}
.cc-intro > .mono{color:var(--muted)}
.cc-intro > p:not(.mono){max-width:40ch; color:var(--muted)}
.ck-steps{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:8px; align-items:end; margin-top:var(--space-s)}
.ck-steps li{display:flex; flex-direction:column; gap:3px}
.ck-steps i{display:block; height:12px; border-radius:2px; background:var(--line-strong); transition:background-color .4s}
.ck-steps .lab{min-height:calc(1.35em + 2.6rem); margin-top:8px; color:var(--muted); font-family:var(--mono); font-size:var(--step--1); letter-spacing:.04em; line-height:1.35}
.ck-steps .lab em{display:block; font-style:normal; font-family:var(--sans); letter-spacing:0; font-size:var(--t-ui); line-height:1.3}
.ck-steps li.on i{background:var(--acc-fill)}
.ck-steps li.cur .lab{color:var(--ink)}
.chat{position:relative; display:flex; flex-direction:column; height:clamp(540px, 44vw, 620px); min-width:0; overflow:hidden; background:var(--panel); border:1px solid var(--line-strong); border-radius:20px}
.chat-hd{flex:none; display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--line)}
.chat-hd img{flex:none; width:40px; height:40px; border-radius:50%; object-fit:cover; object-position:50% 30%; background:var(--card)}
.chat-who{display:flex; flex-direction:column; min-width:0; line-height:1.3}
.chat-who b{font-weight:600}
.chat-who span{color:var(--muted)}
.chat-st{margin-left:auto; color:var(--muted); white-space:nowrap}
.chat-log{flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:20px 18px 24px}
.chat-log > :first-child{margin-top:auto}
.msg{flex:none; max-width:min(88%, 34rem); padding:12px 16px; border-radius:18px; line-height:1.45}
.msg.bot{background:var(--card); color:var(--ink); border-bottom-left-radius:6px}
.msg.me{align-self:flex-end; background:var(--ink); color:var(--bg); border-bottom-right-radius:6px}
.msg .k{display:block; margin-bottom:4px; color:var(--muted)}
.msg.q{font-size:var(--step-1); font-weight:500; line-height:1.3; letter-spacing:-.015em}
.msg.typing{display:inline-flex; gap:5px; padding:16px 18px}
.msg.typing i{width:7px; height:7px; border-radius:50%; background:var(--muted); animation:tp 1s infinite ease-in-out}
.msg.typing i:nth-child(2){animation-delay:.15s}
.msg.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,80%,100%{opacity:.25; transform:translateY(0)} 40%{opacity:1; transform:translateY(-3px)}}
.chat-in{flex:none; padding:12px 18px 18px; border-top:1px solid var(--line); background:var(--bg)}
.chat-in[hidden]{display:none}
.chat-in-h{display:flex; justify-content:space-between; align-items:center; gap:12px; color:var(--muted)}
.ck-back{min-height:44px; padding:0 4px; border:0; background:none; color:var(--ink); cursor:pointer; font-weight:500}
.ck-back:disabled{opacity:.35; cursor:default}
.qr{display:flex; flex-wrap:wrap; gap:8px; margin-top:4px}
.qr button{min-height:48px; padding:10px 18px; border:1px solid var(--field-line); border-radius:999px; background:var(--panel); color:var(--ink); cursor:pointer; text-align:left; line-height:1.25; transition:border-color .22s, background-color .22s, box-shadow .22s, transform .22s var(--ease, ease)}
@media (hover:hover){ .qr button:hover{border-color:var(--btn); background:color-mix(in srgb, var(--btn) 11%, var(--panel)); box-shadow:0 6px 18px -8px color-mix(in srgb, var(--btn) 55%, transparent); transform:translateX(5px)} }
@media (hover:hover){ .qr button:hover .L{color:var(--btn)} }
.qr button:active{transform:translateX(5px) scale(.985); background:color-mix(in srgb, var(--btn) 18%, var(--panel))}
@media (prefers-reduced-motion:reduce){.qr button:hover,.qr button:active{transform:none}}
.qr .L{margin-right:8px; font-family:var(--mono); font-size:var(--t-s); color:var(--muted)}
.no-js .chat-in{display:none}
.cr{position:absolute; inset:0; z-index:2; display:flex; flex-direction:column; overflow:hidden; padding:clamp(20px, 2.6vw, 32px); background:var(--dark); color:var(--on-dark); outline:none}
.cr .mono{color:var(--on-dark-muted)}
.cr-name{margin-top:8px; font-family:var(--display); font-stretch:var(--d-wd); font-weight:var(--d-w); font-size:calc(var(--step-2) * var(--d-k)); line-height:1; letter-spacing:var(--d-tr)}
.cr-desc{margin-top:10px; max-width:52ch; color:var(--on-dark-muted)}
.cr-num{display:grid; grid-template-columns:auto minmax(0,1fr); gap:18px; align-items:center; margin-top:var(--space-s); padding-top:var(--space-s); border-top:1px solid var(--dark-line)}
.cr-num b{font-family:var(--display); font-size:var(--step-3); font-weight:600; line-height:1; letter-spacing:-.04em; font-variant-numeric:tabular-nums}
.cr-num b small{font-size:.45em}
.cr-num p{color:var(--on-dark-muted); line-height:1.45}
.cr-num strong{color:var(--on-dark); font-weight:500}
.cr-next{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:2px 14px; align-items:center; margin-top:var(--space-s); padding:14px 16px; border:1px solid var(--dark-line); border-radius:12px}
.cr-next .ic{grid-row:span 2; width:36px; height:36px}
.cr-next h4{font-size:var(--step-1); font-weight:600; letter-spacing:-.02em}
.cr-next .cr-pr{font-family:var(--mono); white-space:nowrap}
.cr-next .fmt{grid-column:2 / -1; font-size:var(--t-ui); color:var(--on-dark-muted)}
.cr-next .why{grid-column:1 / -1; margin-top:8px; font-size:var(--t-ui); line-height:1.45}
.cr-acts{display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:auto; padding-top:var(--space-m)}
.cr-acts .tlink{color:var(--on-dark)}
.cr-fine{margin-top:10px; font-size:var(--t-ui); line-height:1.4; color:var(--on-dark-muted)}
@media (max-width:1023.98px){
  .cc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .chat{height:640px}
  .cr-fine{display:none}
  .cr-num{gap:6px}
  .cr-next .ic{grid-row:auto}
  .ck-steps .lab em{display:none}
  .ck-steps .lab{min-height:0}
  .cr-num{grid-template-columns:minmax(0,1fr)}
  .chat-hd{padding:12px}
  .chat-st{display:none}
  .chat-log{padding:16px 12px 20px}
  .chat-in{padding:10px 12px 14px}
  .msg{max-width:92%}
  .qr button{width:100%; min-height:44px; padding:8px 16px}
  .cr-next{grid-template-columns:auto minmax(0,1fr)}
  .cr-next .cr-pr{grid-column:2}
}
.rk{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:10px}
.rk-ctl{display:grid; gap:var(--space-m); align-content:center; padding:clamp(18px, 2.4vw, 28px); border-radius:20px; background:var(--card)}
.sl-head{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.sl-head label{font-weight:500}
.sl-v{font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap}
.sl-row{display:grid; grid-template-columns:44px minmax(0,1fr) 44px; gap:8px; align-items:center; margin-top:8px}
.sl-b{width:44px; height:44px; border:1px solid var(--field-line); border-radius:10px; background:transparent; color:var(--ink); font-size:1.2rem; line-height:1; cursor:pointer}
@media (hover:hover){ .sl-b:hover{border-color:var(--ink)} }
.sl-b:disabled{opacity:.35; cursor:default}
.sl-t{--p:.5; position:relative; height:44px; border-radius:8px; cursor:pointer; touch-action:pan-y}
.sl-t::before{content:""; position:absolute; left:13px; right:13px; top:50%; height:2px; margin-top:-1px; background:var(--line-strong)}
.sl-f{position:absolute; left:13px; top:50%; width:calc((100% - 26px) * var(--p)); height:2px; margin-top:-1px; background:var(--ink)}
.sl-th{position:absolute; top:50%; left:calc(13px + (100% - 26px) * var(--p)); width:22px; height:22px; border-radius:5px; background:var(--ink); transform:translate(-50%,-50%); transition:transform .2s var(--ease)}
.sl-t.drag .sl-th{transform:translate(-50%,-50%) scale(1.12)}
.sl-t:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.rk-out{display:flex; flex-direction:column; gap:12px; min-height:clamp(320px, 28vw, 400px); padding:clamp(20px, 2.6vw, 32px); border-radius:20px; background:var(--dark); color:var(--on-dark)}
.rk-out .mono{color:var(--on-dark-muted)}
.rk-n{display:flex; align-items:baseline; gap:.12em; margin-top:auto; font-family:var(--display); font-stretch:var(--d-wd); font-weight:var(--d-w); font-size:calc(clamp(4rem, 7.4vw, 7rem) * var(--d-k)); line-height:.88; letter-spacing:-.045em; font-variant-numeric:tabular-nums; white-space:nowrap}
.rk-n small{font-size:.28em; font-weight:500; letter-spacing:-.01em}
.rk-s{color:var(--on-dark-muted); line-height:1.45}
.rk-s b{color:var(--on-dark); font-weight:500; font-variant-numeric:tabular-nums}
.rk-bar{height:6px; border-radius:3px; background:var(--dark-line); overflow:hidden}
.rk-bar i{display:block; height:100%; background:var(--acc-on-dark); transform-origin:0 50%; transform:scaleX(var(--k, .3)); transition:transform .8s var(--ease)}
.rk-out .tlink{color:var(--on-dark); align-self:flex-start}
.rc-note{margin-top:var(--space-s); color:var(--muted)}
@media (max-width:860px){
  .rk{grid-template-columns:minmax(0,1fr)}
  .rk-out{min-height:0}
}
.prin{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); margin-top:var(--space-xl); border-top:1px solid var(--line-strong)}
.prin li{padding:20px 24px 22px 0; border-bottom:1px solid var(--line-strong)}
.prin li:nth-child(odd){border-right:1px solid var(--line-strong)}
.prin li:nth-child(even){padding-left:24px}
.prin .mono{color:var(--muted)}
.prin b{display:block; margin-top:14px; font-weight:600; letter-spacing:-.01em}
.prin p{margin-top:4px; color:var(--muted); line-height:1.5}
.ap-ph{display:block; flex:none; border-radius:50%; object-fit:cover; object-position:50% 28%; background:var(--card)}
.apa{display:grid; grid-template-columns:minmax(0,6fr) minmax(0,6fr); gap:var(--space-l) var(--space-xl-2xl); align-items:start}
.apa-h{--hs:calc(var(--step-3) * var(--d-k)); display:flex; flex-direction:row; align-items:center; gap:var(--space-s)}
.apa .ap-ph{width:calc(var(--hs) * 2); height:calc(var(--hs) * 2)}
.apa-lead{font-size:var(--step-1); line-height:1.4; letter-spacing:-.015em; max-width:40ch}
@media (max-width:1023.98px){
  .apa{grid-template-columns:minmax(0,1fr)}
}

@media (max-width:700px){
  .prin{grid-template-columns:minmax(0,1fr)}
  .prin li:nth-child(odd){border-right:0}
  .prin li:nth-child(even){padding-left:0}
}
.faq{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-xl)}
.faq-l p{margin-top:var(--space-m); color:var(--muted); max-width:30ch}
.faq-list{border-top:1px solid var(--line-strong)}
.faq details{border-bottom:1px solid var(--line-strong)}
.faq summary{display:flex; justify-content:space-between; align-items:center; gap:20px; min-height:68px; padding:12px 0; cursor:pointer; list-style:none; font-size:var(--step-0); font-weight:500; letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.fq-i{position:relative; flex:none; width:18px; height:18px}
.fq-i::before,.fq-i::after{content:""; position:absolute; left:0; right:0; top:50%; height:1.5px; margin-top:-.75px; background:currentColor; transition:transform .4s var(--ease)}
.fq-i::after{transform:rotate(90deg)}
.faq details[open] .fq-i::after{transform:rotate(0deg)}
.faq details::details-content{block-size:0; overflow-y:clip; transition:block-size .24s var(--ease-out), content-visibility .24s allow-discrete}
.faq details[open]::details-content{block-size:auto; transition-duration:var(--dur-expand)}
.faq .ans{padding:0 48px 24px 50px; color:var(--muted); max-width:62ch}
.fq-ic{--s:36px}
.fq-ic .ic{width:18px; height:18px}
.fq-t{flex:1; min-width:0}
.faq summary{justify-content:flex-start; gap:14px}
.faq details[open] .fq-ic{border-color:var(--ink)}
@media (hover:hover){ .faq summary:hover .fq-ic{border-color:var(--ink)} }
@media (max-width:1023.98px){ .faq{grid-template-columns:minmax(0,1fr)} }
@media (max-width:700px){ .faq .ans{padding-right:0} }
.cta{position:relative; isolation:isolate; margin:8px; border-radius:20px; overflow:hidden; background:var(--dark); color:var(--on-dark); padding:0 var(--gut) clamp(56px, 7vw, 104px); text-align:center}
.cta-rt{width:2px; height:clamp(64px, 9vw, 128px); margin:0 auto}
.cta-st{--s:60px; margin:0 auto}
.cta-k{margin:var(--space-s) 0 var(--space-l); color:var(--on-dark-muted)}
.cta h2{font-size:calc(min(var(--step-6), 11rem, 12.4vw) * var(--d-k)); font-weight:600; line-height:.9; letter-spacing:var(--d-tr)}
.cta h2 span{display:block}
.cta p{max-width:40ch; margin:var(--space-m) auto 0; color:var(--on-dark-muted); font-size:var(--step-1); line-height:1.4}
.cta .acts{display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:var(--space-l)}
@media (max-width:700px){ .cta{padding-bottom:96px} }
.ct{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-xl-2xl); align-items:start}
.ct-l h2{font-size:var(--step-3); font-weight:600; line-height:1; letter-spacing:var(--d-tr)}
.ct-l h2 span{display:block}
.ct-list{margin-top:var(--space-l); border-top:1px solid var(--line-strong)}
.ct-list li{display:grid; grid-template-columns:6.5rem 1fr; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-strong)}
.ct-list .mono{color:var(--muted); padding-top:.2em}
.ct-mail{margin-top:var(--space-l); color:var(--muted)}
.ct-mail a{display:inline-flex; align-items:center; min-height:44px; color:var(--ink); font-weight:500; font-size:var(--step-1); letter-spacing:-.02em; text-underline-offset:.2em; text-decoration-thickness:1px}
.ct-card{background:var(--card); border-radius:16px; padding:clamp(18px, 2.6vw, 34px)}
.ct-meta{display:flex; flex-wrap:wrap; gap:6px 24px; padding-bottom:14px; margin-bottom:18px; border-bottom:1px solid var(--line-strong)}
.ct-meta span{color:var(--muted); margin-right:8px}
.ct-form{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:16px}
.fld{display:flex; flex-direction:column; gap:6px; min-width:0}
.fld.full{grid-column:1 / -1}
.fld label{font-weight:500; font-size:var(--t-ui)}
.fld input,.fld select,.fld textarea{width:100%; min-height:48px; padding:11px 14px; border:1px solid var(--field-line); border-radius:10px; background:var(--field); color:var(--ink); font-size:1rem}
.fld textarea{min-height:140px; resize:vertical; line-height:1.5}
.fld ::placeholder{color:var(--muted); opacity:1}
.fld input:focus-visible,.fld select:focus-visible,.fld textarea:focus-visible{outline:2px solid var(--ink); outline-offset:1px; border-color:var(--ink)}
.hp{position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden}
.ct-foot{grid-column:1 / -1; display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:4px}
.ct-foot p{color:var(--muted); font-size:var(--t-ui)}
.ct-sent{padding:var(--space-l) 0}
.ct-sent[hidden]{display:none}
.ct-sent h3{margin-top:12px; font-size:var(--step-2); font-weight:600; letter-spacing:-.03em}
.ct-sent p{margin-top:8px; color:var(--muted)}
.foot{margin-top:8px; background:var(--dark); color:var(--on-dark); padding:var(--space-2xl-3xl) 0 calc(var(--space-l) + 64px)}
.foot-g{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--space-xl)}
.foot-b{display:flex; flex-direction:column; gap:var(--space-m)}
.foot-b img{width:76px; height:76px; border-radius:50%; background:#fff}
.foot-b .foot-w{color:var(--on-dark)}
.foot-w{font-size:var(--step-2); font-weight:600; letter-spacing:-.03em; line-height:1}
.foot-w .tld{color:var(--on-dark-muted)}
.foot-b p{color:var(--on-dark-muted); max-width:30ch}
.foot-nav a{display:flex; justify-content:space-between; align-items:center; padding:6px 0 8px; border-bottom:1px solid var(--dark-line); font-size:var(--step-3); font-weight:500; letter-spacing:var(--d-tr); line-height:1.1; text-decoration:none; transition:color .25s}
@media (hover:hover){ .foot-nav a:hover{color:var(--acc-on-dark)} }
.foot-nav a span{font-family:var(--mono); font-size:var(--step--1); letter-spacing:.04em; color:var(--on-dark-muted)}
.foot-bot{display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px 24px; margin-top:var(--space-2xl); padding-top:var(--space-s); border-top:1px solid var(--dark-line); color:var(--on-dark-muted)}
.foot-bot nav{display:flex; gap:24px}
.foot-bot a{display:inline-flex; align-items:center; min-height:44px; color:var(--on-dark); text-underline-offset:.25em}
.foot-bot p{display:flex; align-items:center}
@media (max-width:1023.98px){
  .pk-head{grid-template-columns:minmax(0,1fr); align-items:start}
  .pk-grid{grid-template-columns:minmax(0,1fr)}
  .pk h3{margin-top:28px}
  .ct{grid-template-columns:minmax(0,1fr)}
  .foot-g{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .nav-bar{grid-template-columns:auto 1fr auto}
  .claim{font-size:.72rem}
  .sh{grid-template-columns:minmax(0,1fr)}
  .tag{text-align:left}
  .tabs{display:flex; width:100%}
  .tab{flex:1; padding:0 8px}
  .tab .l{display:none} .tab .s{display:inline}
  .pn-intro{flex-direction:column; align-items:flex-start; gap:8px}
  .ct-form{grid-template-columns:minmax(0,1fr)}
  .ct-list li{grid-template-columns:5.5rem 1fr}
  .foot-nav a{font-size:var(--step-2)}
}
@media (max-width:420px){
  .claim{display:none}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important; animation-duration:.01ms!important; scroll-behavior:auto!important}
}
/* Referenzen */
#referenzen{padding-top:var(--sec-y)}
.rf-lead{margin-top:var(--space-s); max-width:44ch; color:var(--muted); font-size:var(--step-1); line-height:1.4; letter-spacing:-.01em; text-wrap:pretty}
.rf-nojs{display:none}
.no-js .rf-nojs{display:block; border-top:1px solid var(--line-strong)}
.no-js .rf-nojs li{padding:14px 0; border-bottom:1px solid var(--line-strong)}
.no-js .rf-card,.no-js .rf-more{display:none}
html.rf-lock{overflow:hidden; padding-right:var(--rf-sb,0px)}
.rf-b{padding:0; border:0; background:none; cursor:pointer; -webkit-tap-highlight-color:transparent}
.rf-card{--cp:clamp(12px, 2vw, 28px); position:relative; isolation:isolate; overflow:hidden; overflow:clip; border-radius:20px; background:var(--dark) url(../assets/ref/wasser.webp) center/cover no-repeat; color:var(--on-dark); padding:var(--cp); display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"cnt seg" "stage stage" "ctl ctl" "strip strip"; align-items:center; gap:16px}
.rf-cw{grid-area:cnt; min-width:0}
.rf-cw .mono{display:block; color:var(--on-dark-muted)}
.rf-cnt{display:block; white-space:nowrap; font-weight:600; font-size:1.3rem; line-height:1.15; letter-spacing:-.025em}
.rf-seg{grid-area:seg; justify-self:end; display:none; position:relative; gap:2px; padding:4px; max-width:100%; border-radius:999px; background:color-mix(in srgb, var(--dark) 60%, transparent); border:1px solid var(--dark-line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px)}
.rf-ind{position:absolute; z-index:0; left:0; top:0; width:0; height:0; border-radius:999px; background:var(--pill-light); pointer-events:none; transition:transform .6s var(--ease), width .6s var(--ease), height .6s var(--ease)}
.rf-nosnap .rf-ind{transition:none}
.rf-gt{position:relative; z-index:1; display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 16px; border-radius:999px; font-weight:500; font-size:var(--t-ui); white-space:nowrap; color:var(--on-dark); transition:color .3s, background-color .25s, transform var(--dur-press) var(--ease-out)}
.rf-gt svg{width:18px; height:18px; flex:none}
.rf-gt[aria-checked="true"]{color:var(--on-light)}
@media (hover:hover){ .rf-gt:hover:not([aria-checked="true"]){background:color-mix(in srgb, var(--on-dark) 12%, transparent)} }
.rf-stage{grid-area:stage; position:relative; margin-inline:calc(-1 * var(--cp)); touch-action:pan-y; transition:height var(--dur-move) var(--ease-io); -webkit-user-select:none; user-select:none}
.rf-set{position:absolute; inset:0; perspective:1700px; transition:opacity .45s ease, visibility 0s}
.rf-set.off{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s ease, visibility 0s .35s}
.rf-unit{position:absolute; left:50%; top:50%; transform-origin:50% 50%; transform:translate(-50%,-50%) translateX(calc(var(--x,0px) + var(--dx,0px))) scale(var(--sc,.5)) rotateY(var(--ry,0deg)); transition:transform .65s var(--ease), opacity .45s ease; will-change:transform; cursor:pointer}
.rf-unit.far{opacity:0; pointer-events:none}
.rf-unit.jump{opacity:0; transition:none}
.rf-unit:focus-visible{outline:none}
.rf-unit:focus-visible .rf-ph,.rf-unit:focus-visible .rf-win,.rf-unit:focus-visible .rf-inv{outline:4px solid var(--on-dark); outline-offset:8px}
.rf-drag .rf-unit,.rf-nosnap .rf-unit{transition:none}
.rf-unit img{-webkit-user-drag:none; user-drag:none}
.rf-dim{position:absolute; inset:0; z-index:6; background:rgba(6,24,41,.5); transition:opacity .6s ease; pointer-events:none}
.rf-m .rf-dim{border-radius:70px}
.rf-d .rf-dim{border-radius:20px}
.rf-unit.act .rf-dim{opacity:0}
.rf-ph{position:relative; width:420px; height:874px; border-radius:70px; background:#b8bdc4; box-shadow:0 0 0 1px #4d545c, inset 0 0 0 1.5px #eceef0, inset 0 0 0 3.5px #959ca4, inset 3px 3px 3px 2px rgba(255,255,255,.75), inset -3px -4px 4px 2px rgba(30,36,44,.4), 0 64px 70px -36px rgba(2,12,22,.85), 0 26px 40px -12px rgba(2,12,22,.45)}
.rf-bt{position:absolute; width:5px; border-radius:3px; background:#a3a9b0; box-shadow:inset 1px 0 0 rgba(255,255,255,.7), inset -1px 0 0 rgba(30,36,44,.45), 0 0 0 .5px rgba(0,0,0,.35)}
.rf-bt.l{left:-4px}
.rf-bt.r{right:-4px}
.rf-bez{position:absolute; inset:5px; border-radius:65px; background:#05070a; box-shadow:0 0 0 1.5px #1c2229}
.rf-dsp{position:absolute; inset:10px; border-radius:55px; overflow:hidden; background:#fff; isolation:isolate}
.rf-sb{position:absolute; left:0; right:0; top:0; height:54px; background:var(--bar,#fff); color:#0b1520; z-index:2}
.rf-sb .tm{position:absolute; left:0; width:128px; top:17px; text-align:center; font:600 17px/20px -apple-system, BlinkMacSystemFont, 'Geist', system-ui, sans-serif; letter-spacing:-.01em}
.rf-sb .ico{position:absolute; right:0; width:128px; top:20px; height:14px; display:flex; align-items:center; justify-content:center; gap:6px}
.rf-sb .ico svg{display:block}
.rf-isl{position:absolute; z-index:8; top:11px; left:50%; width:124px; height:36px; margin-left:-62px; border-radius:20px; background:#000}
.rf-isl::after{content:""; position:absolute; right:13px; top:11px; width:14px; height:14px; border-radius:50%; background:#0a101c; box-shadow:0 0 0 1.5px #0b0f17, inset 0 0 0 3px #16223a, inset 2px 2px 0 3px #1c2c48}
.rf-ph .rf-scr{position:absolute; left:0; right:0; top:54px; bottom:70px; background:#fff}
.rf-tbar{position:absolute; left:0; right:0; bottom:0; height:70px; background:#f5f6f8; border-top:1px solid rgba(20,32,44,.1); z-index:2}
.rf-url{position:absolute; left:16px; right:16px; top:7px; height:40px; border-radius:14px; background:#e3e6ea; color:#14202c; display:flex; align-items:center; justify-content:center; gap:7px; font:500 15px/1 -apple-system, BlinkMacSystemFont, 'Geist', system-ui, sans-serif; letter-spacing:-.005em}
.rf-url .aa{position:absolute; left:14px; font-weight:600; font-size:14px; color:#4a5662}
.rf-url .aa i{font-style:normal; font-size:11px}
.rf-url .rl{position:absolute; right:12px; top:11px; width:18px; height:18px; color:#4a5662}
.rf-url svg.lk{width:11px; height:13px; flex:none; color:#4a5662}
.rf-url .d{max-width:210px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-hi{position:absolute; z-index:4; bottom:8px; left:50%; width:136px; margin-left:-68px; height:5px; border-radius:3px; background:#0b1520}
.rf-win{position:relative; width:1440px; height:1080px; border-radius:20px; background:#fff; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 0 0 1px rgba(20,32,44,.34), inset 0 0 0 1px rgba(255,255,255,.75), 0 56px 70px -34px rgba(2,12,22,.85), 0 22px 36px -10px rgba(2,12,22,.45)}
.rf-wt{flex:none; height:52px; display:flex; align-items:flex-end; gap:16px; padding:0 22px 0 24px; background:#d3d9e0}
.rf-wc{display:flex; gap:9px; align-self:center; padding-right:10px}
.rf-wc i{display:block; width:15px; height:15px; border-radius:50%; background:#a9b3be; box-shadow:inset 0 0 0 1px rgba(20,32,44,.18)}
.rf-wtab{display:flex; align-items:center; gap:10px; height:40px; min-width:330px; max-width:420px; padding:0 20px; border-radius:14px 14px 0 0; background:#f0f3f6; font:500 15px/1 var(--sans); color:#26323d; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.rf-wtab svg{width:15px; height:15px; flex:none; color:#5f6872}
.rf-wplus{align-self:center; width:30px; height:30px; display:grid; place-items:center; color:#5f6872}
.rf-wa{flex:none; height:60px; display:flex; align-items:center; gap:18px; padding:0 24px; background:#f0f3f6; border-bottom:1px solid #d6dce3; color:#5f6872}
.rf-wa svg{width:22px; height:22px; flex:none}
.rf-wurl{flex:0 1 860px; margin-inline:auto; height:38px; border-radius:999px; background:#fff; border:1px solid #d6dce3; display:flex; align-items:center; justify-content:center; gap:9px; font:400 16px/1 var(--sans); color:#26323d}
.rf-wurl svg{width:13px; height:15px}
.rf-win .rf-scr{position:relative; flex:1; min-height:0; background:#fff}
.rf-scr{overflow:hidden; overscroll-behavior:contain}
.rf-shot{position:relative; width:100%; aspect-ratio:var(--ar); background:#eef2f6}
.rf-shot img{display:block; width:100%; height:auto; opacity:0; transition:opacity .4s ease}
.rf-shot img.in{opacity:1}
.rf-inv{position:relative; width:420px; height:874px; border-radius:70px; background:var(--pill-light); color:var(--on-light); padding:72px 48px 56px; display:flex; flex-direction:column; align-items:flex-start; box-shadow:0 0 0 1px var(--dark-line), 0 64px 70px -36px rgba(2,12,22,.85), 0 26px 40px -12px rgba(2,12,22,.45); --ic-acc:var(--accent)}
.rf-inv .ic{width:104px; height:104px}
.rf-inv .mono{margin-top:auto; font-size:20px; color:var(--muted)}
.rf-inv h3{margin-top:18px; font-size:58px; font-weight:600; line-height:1; letter-spacing:-.035em; text-wrap:balance}
.rf-inv p.s{margin-top:22px; font-size:28px; line-height:1.3; color:var(--muted)}
.rf-inv .go{display:inline-flex; align-items:center; gap:18px; margin-top:44px; height:84px; padding:0 13px 0 32px; border-radius:999px; background:var(--btn); color:var(--on-btn); font-size:26px; white-space:nowrap; font-weight:500; line-height:1}
.rf-inv .go i{display:grid; place-items:center; width:58px; height:58px; border-radius:50%; background:var(--on-btn); color:var(--btn)}
.rf-inv .go svg{width:22px; height:22px}
.rf-d .rf-inv{width:1440px; height:1080px; border-radius:20px; padding:120px 150px 110px}
.rf-d .rf-inv .ic{width:160px; height:160px}
.rf-d .rf-inv .mono{font-size:28px}
.rf-d .rf-inv h3{font-size:110px; max-width:11em}
.rf-d .rf-inv p.s{font-size:44px}
.rf-d .rf-inv .go{height:120px; font-size:40px; padding:0 20px 0 52px; margin-top:64px}
.rf-d .rf-inv .go i{width:80px; height:80px}
.rf-ctl{grid-area:ctl; display:flex; align-items:center; justify-content:center; gap:10px}
.rf-arr{flex:none; display:grid; place-items:center; width:48px; height:48px; border-radius:50%; background:color-mix(in srgb, var(--dark) 60%, transparent); border:1px solid var(--dark-line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--on-dark); transition:background-color .25s, transform .2s var(--ease), opacity .25s}
@media (hover:hover){ .rf-arr:hover{background:color-mix(in srgb, var(--on-dark) 16%, transparent)} }
.rf-arr:active{transform:scale(.94)}
.rf-arr[aria-disabled="true"]{opacity:.35; cursor:default}
.rf-arr svg{width:20px; height:20px}
.rf-cap{display:none; min-width:0; flex:1; color:var(--on-dark)}
.rf-cap b{display:block; font-weight:500; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-cap span{display:block; color:var(--on-dark-muted); font-family:var(--sans); font-size:var(--t-ui); line-height:1.4; letter-spacing:0; text-transform:none; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-ctl .rf-big{flex:1 1 auto; max-width:260px; justify-content:space-between}
.rf-ctl .rf-big[hidden]{display:none}
.rf-strip{grid-area:strip; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px}
.rf-pj{display:grid; gap:4px; text-align:left; padding:6px; border-radius:16px; min-height:44px; min-width:0; background:color-mix(in srgb, var(--dark) 60%, transparent); border:1px solid var(--dark-line); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); color:var(--on-dark); transition:background-color .3s, color .3s, border-color .3s, transform var(--dur-press) var(--ease-out)}
@media (hover:hover){ .rf-pj:hover:not([aria-current="true"]){background:color-mix(in srgb, var(--dark-2) 80%, transparent)} }
.rf-pj[aria-current="true"]{background:var(--pill-light); color:var(--on-light); border-color:transparent}
.rf-pj .th{display:block; height:52px; border-radius:10px; overflow:hidden; background:#eef2f6}
.rf-pj .th img{width:100%; height:100%; object-fit:cover; object-position:top}
.rf-pj .tx{display:grid; gap:1px; min-width:0; padding:0 2px 2px}
.rf-pj .nm{font-weight:500; font-size:.88rem; line-height:1.2; letter-spacing:-.005em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-pj .dm{font-family:var(--mono); font-size:.66rem; letter-spacing:.02em; color:var(--on-dark-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-pj[aria-current="true"] .dm{color:var(--muted)}
.rf-tg{display:flex; align-items:center; justify-content:space-between; gap:20px; width:100%; min-height:76px; margin-top:var(--space-s); padding:14px 0; border-top:1px solid var(--line-strong); border-bottom:1px solid var(--line-strong); text-align:left}
.rf-tg-t{display:grid; gap:2px; min-width:0}
.rf-tg-t b{font-size:var(--step-0); font-weight:500; letter-spacing:-.01em; line-height:1.25}
.rf-tg-t span{color:var(--muted)}
@media (hover:hover){ .rf-tg:not([aria-expanded="true"]):hover .plus::after{transform:rotate(0deg)} }
.rf-pn{display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s var(--ease)}
.rf-pn > div{min-height:0; overflow:hidden; visibility:hidden; transition:visibility 0s .6s}
.rf-pn.open{grid-template-rows:1fr}
.rf-pn.open > div{visibility:visible; transition-delay:0s}
.rf-dp{margin-top:var(--space-m); background:var(--panel); border:1px solid var(--line-strong); border-radius:20px; overflow:hidden}
.rf-dp[hidden]{display:none}
.rf-dp.in{animation:rf-rise .55s var(--ease) both}
@keyframes rf-rise{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}
.rf-dh{display:grid; grid-template-columns:auto minmax(0,1fr); gap:var(--space-m) var(--space-xl-2xl); align-items:center; padding:clamp(18px, 2.4vw, 30px)}
.rf-who{display:flex; align-items:center; gap:12px}
.rf-who img{width:44px; height:44px; border-radius:50%; background:#fff; border:1px solid var(--line)}
.rf-who .mono{display:block; color:var(--muted)}
.rf-who b{display:block; font-weight:600; letter-spacing:-.01em}
.rf-meta{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:0}
.rf-meta > div{padding:0 clamp(12px, 2vw, 28px); border-left:1px solid var(--line-strong); min-width:0}
.rf-meta dt{color:var(--muted)}
.rf-meta dd{margin-top:4px; line-height:1.35}
.rf-grid{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--line-strong); border-top:1px solid var(--line-strong)}
.rf-a{background:var(--panel); padding:clamp(18px, 2vw, 26px); min-width:0}
.rf-a .ic{width:44px; height:44px}
.rf-al{margin-top:14px; font-weight:400; color:var(--muted)}
.rf-ul{margin-top:12px; display:grid; gap:12px}
.rf-ul li{line-height:1.4; font-size:var(--t-ui); text-wrap:pretty}
.rf-ul b{font-weight:600; letter-spacing:-.005em}
.rf-fn{margin-top:var(--space-s); color:var(--muted)}
.rf-ov{position:fixed; inset:0; z-index:300; background:color-mix(in srgb, var(--dark) 66%, #000); color:var(--on-dark); display:flex; flex-direction:column; opacity:0; transition:opacity .3s ease; --on-dark-muted:#a9b9c8}
.rf-ov[hidden]{display:none}
.rf-ov:focus{outline:none}
.rf-ov.in{opacity:1}
.rf-ov :focus-visible{outline-color:var(--on-dark)}
.rf-ov-bar{flex:none; display:flex; align-items:center; gap:8px; min-height:60px; padding:max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); border-bottom:1px solid var(--dark-line)}
.rf-ov .pill-s{padding:0 6px 0 16px; gap:10px; min-height:44px; font-size:var(--t-ui)}
.rf-ov .pill-s .sq{width:32px; height:32px}
.rf-ov-ttl{display:none; flex:1; min-width:0; padding-inline:8px}
.rf-ov-ttl b{display:block; font-weight:500; letter-spacing:-.01em; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-ov-ttl span{display:block; color:var(--on-dark-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rf-ov-nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.rf-ov-nav .rf-arr{width:44px; height:44px}
.rf-ov-nav .mono{min-width:3.6em; text-align:center; color:var(--on-dark)}
.rf-ov .rf-ov-open{padding:5px; gap:0; min-height:44px}
.rf-ov .rf-ov-open .t{display:none}
.rf-ov-stage{position:relative; flex:1; min-height:0; overflow:hidden; overflow:clip; touch-action:none}
.rf-ov-unit{position:absolute; left:0; top:0; transform-origin:0 0}
.rf-ov-slide{width:100%; height:100%; transition:transform .3s var(--ease), opacity .25s ease}
.rf-ov-slide.o{opacity:0; transform:translateX(calc(var(--sd,1) * -90px))}
.rf-ov-slide.i{opacity:0; transform:translateX(calc(var(--sd,1) * 90px)); transition:none}
.rf-ov:not(.in) .rf-ov-slide{opacity:0; transform:translateY(24px)}
.rf-ov-unit .rf-ph{box-shadow:0 0 0 1px #4d545c, inset 0 0 0 1.5px #eceef0, inset 0 0 0 3.5px #959ca4, inset 3px 3px 3px 2px rgba(255,255,255,.75), inset -3px -4px 4px 2px rgba(30,36,44,.4), 0 40px 60px -30px rgba(0,0,0,.8)}
.rf-ov-unit .rf-win{height:100%}
.rf-ov .rf-scr{overflow-x:hidden; overflow-y:auto; touch-action:pan-y}
.rf-ov-unit .rf-ph .rf-scr{scrollbar-width:none}
.rf-ov-unit .rf-ph .rf-scr::-webkit-scrollbar{display:none}
.rf-ov-unit .rf-win .rf-scr{scrollbar-width:thin; scrollbar-color:#b9c3cc transparent}
.rf-ov .rf-scr:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
.rf-ov-hint{position:absolute; left:50%; bottom:max(14px, env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:5; width:max-content; max-width:calc(100% - 32px); padding:10px 16px; border-radius:16px; text-transform:none; letter-spacing:0; font-size:var(--t-s); background:color-mix(in srgb, var(--dark) 88%, #000); border:1px solid var(--dark-line); color:var(--on-dark); text-align:center; pointer-events:none; opacity:0; transition:opacity .5s ease}
.rf-ov-hint.show{opacity:1}
@media (min-width:700px){
  .rf-cap{display:block}
  .rf-pj{grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; padding:7px 14px 7px 7px}
  .rf-pj .th{width:104px; height:60px}
  .rf-pj .nm{font-size:.95rem}
  .rf-pj .dm{font-size:.7rem}
  .rf-strip{width:100%; max-width:960px; justify-self:center}
  .rf-ctl .rf-big{flex:none}
  .rf-ov-ttl{display:block}
  .rf-ov .rf-ov-open{padding:7px 7px 7px 20px; gap:12px; min-height:48px}
  .rf-ov .rf-ov-open .t{display:inline}
}
@media (min-width:900px){
  .rf-seg{display:flex}
}
@media (max-width:1099.98px){
  .rf-grid{grid-template-columns:repeat(2, minmax(0,1fr))}
}
@media (max-width:899.98px){
  .rf-dh{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  .rf-pn,.rf-pn > div,.rf-stage,.rf-unit,.rf-set,.rf-ind,.rf-ov,.rf-ov-slide,.rf-dim,.rf-shot img{transition:none}
  .rf-dp.in{animation:none}
}
@media (max-width:699.98px){
  .rf-grid{grid-template-columns:minmax(0,1fr)}
  .rf-meta{grid-template-columns:minmax(0,1fr)}
  .rf-meta > div{padding:10px 0; border-left:0; border-top:1px solid var(--line-strong)}
  .rf-meta > div:first-child{border-top:0}
  .rf-ctl .rf-big{padding-left:18px}
  .rf-tg-t span{font-size:var(--t-s)}
}

/* ===================================================================
   Geteilte Website: drei Themenseiten (Webseiten ist Standard)
   Ein Schaltelement, zwei Orte: Desktop als Mitte des Headers (beim Runterscrollen klein), mobil unter dem Hero.
   =================================================================== */
:root{ --ok:#2f8a5b; --warn:#e2aa2c; --no:#c5413a; --lamp-off:#2a4f70; --link:#1f67a3; }
/* Tonwechsel der Blöcke (statt Ids): Weiß ist Standard, .tn-g ist der helle Blauton */
.tn-g{--bg:#f4f7fc; --card:#fbfcfd; --panel:#ffffff; --field:#ffffff; --muted:#56616c; --line:color-mix(in srgb, #f4f7fc 86%, #14202c); --line-strong:color-mix(in srgb, #f4f7fc 76%, #14202c); background:#f4f7fc}
.slot{display:block}
#parking{display:none}

/* Hero etwas niedriger, damit die Leiste schon im ersten Bild unten sichtbar ist */
@media (max-width:899.98px){ .hero{height:calc(100svh - 92px)} }
@media (max-width:700px){ .hero{height:calc(100svh - 104px)} }

/* ---------- Header: Mitte nimmt Claim oder Leiste auf ---------- */
.nav-mid{display:flex; justify-content:center; align-items:center; min-width:0; overflow:hidden; transition:opacity .3s var(--ease-out) .35s}
@media (min-width:900px){
  html .sw-home{display:none}
  html.sw-docked .nav-mid .claim{display:none}
  html.sw-docked .nav{width:min(560px, calc(100% - 32px))}
  html.sw-docked .nav-bar{grid-template-columns:auto minmax(0,1fr) auto}
  /* beim Runterscrollen schrumpft der Header auf Logo, Schriftzug und Menü, beim Hochscrollen kommt die Leiste zurück */
  html.sw-docked.nav-runter .nav:not(:has(.menu:not([hidden]))):not(:has(:focus-visible)){width:min(222px, calc(100% - 32px))}
  html.sw-docked.nav-runter .nav:not(:has(.menu:not([hidden]))):not(:has(:focus-visible)) .nav-mid{opacity:0; visibility:hidden; pointer-events:none; transition:opacity .16s var(--ease-out), visibility 0s linear .16s}
  html.sw-docked.nav-runter .nav:not(:has(.menu:not([hidden]))):not(:has(:focus-visible)){transition-delay:.08s}
}

/* ---------- Die Leiste ---------- */
.sw-home{height:76px; display:grid; place-items:center; padding-inline:var(--gut)}
.sw-home-in{display:flex; justify-content:center; width:100%; min-width:0}
.no-js .sw-home{display:none}
.sw{--sw-on:#f9fbfd; --sw-on-m:#a9b9c8; --sw-acc:#a9d4f5; position:relative; display:inline-flex; align-items:stretch; gap:2px; max-width:100%; padding:4px; background:#fff; border:1px solid var(--line-strong); border-radius:999px; color:var(--ink)}
.sw-tab{position:relative; z-index:1; display:inline-flex; align-items:center; gap:10px; min-height:52px; padding:0 22px 0 16px; border:0; border-radius:999px; background:transparent; color:var(--muted); cursor:pointer; text-align:left; white-space:nowrap; transition:background-color .3s, color .3s, transform var(--dur-press) var(--ease-out)}
.sw-tab .ic{width:26px; height:26px; --ic-acc:var(--accent)}
.sw-t{display:flex; flex-direction:column; line-height:1.2}
.sw-n{font-weight:500; font-size:.97rem; letter-spacing:-.01em}
.sw-s{font-size:.78rem}
@media (hover:hover){ .sw-tab:hover{color:var(--ink)} }
.sw-tab[aria-selected="true"]{color:var(--sw-on); --ic-acc:var(--sw-acc)}
.sw-tab[aria-selected="true"] .ic{--ic-acc:var(--sw-acc)}
.sw-tab[aria-selected="true"] .sw-s{color:var(--sw-on-m)}
.sw-tab:focus-visible{outline:2px solid var(--ink); outline-offset:2px}
.sw.is-dock{gap:0; padding:2px; background:rgba(255,255,255,.58); border-color:color-mix(in srgb, var(--ink) 14%, transparent)}
.sw.is-dock .sw-tab{min-height:36px; padding:0 14px 0 10px; gap:7px; color:#3d4853}
.sw.is-dock .sw-tab[aria-selected="true"]{color:var(--sw-on)}
@media (hover:hover){ .sw.is-dock .sw-tab:hover{color:var(--ink)} }
@media (hover:hover){ .sw.is-dock .sw-tab[aria-selected="true"]:hover{color:var(--sw-on)} }
.sw.is-dock .sw-tab .ic{width:20px; height:20px}
.sw.is-dock .sw-s{display:none}
.sw.is-dock .sw-n{font-size:.88rem}
.sw.is-dock .sw-tab::before{content:""; position:absolute; inset:-8px -3px}
@media (max-width:899px){ .sw:not(.is-dock) .sw-s{display:none} }
@media (max-width:859px){
  .sw.is-dock .sw-tab:not([aria-selected="true"]){padding:0 9px}
  .sw.is-dock .sw-p{display:none}
  .sw.is-dock .sw-tab:not([aria-selected="true"]) .sw-t{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
}
@media (max-width:700px){
  .sw-home{height:88px}
  .sw:not(.is-dock){display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); width:100%; max-width:430px; border-radius:24px; gap:2px}
  .sw:not(.is-dock) .sw-tab{flex-direction:column; justify-content:center; gap:4px; min-height:62px; padding:8px 4px; border-radius:20px; text-align:center; white-space:normal}
  .sw:not(.is-dock) .sw-t{align-items:center}
  .sw:not(.is-dock) .sw-n{font-size:.78rem; line-height:1.15; text-wrap:balance}
  .sw:not(.is-dock) .sw-tab .ic{width:22px; height:22px}
  .sw.is-dock .sw-n{font-size:.85rem}
}

/* ---------- Seiten und Wischübergang ---------- */
.pages{position:relative; display:grid}
.pg{grid-area:1 / 1; min-width:0; outline:none}
.pg[hidden]{display:none}
.pg.is-in{position:relative; z-index:2; background:var(--bg)}
.wipe-edge{position:absolute; left:0; right:0; top:0; height:2px; background:var(--accent); z-index:6; opacity:0; pointer-events:none}

/* Positionierung mit 3 Stationen */
@media (min-width:700px){
  .pr-list{grid-template-columns:repeat(var(--n,4), minmax(0,1fr))}
  .pr-rail{left:calc(50% / var(--n,4)); right:calc(50% / var(--n,4))}
}
.sk-seg{grid-template-columns:repeat(var(--n,4), minmax(0,1fr))}
.lead3{margin-top:var(--space-s); max-width:44ch; color:var(--muted); font-size:var(--step-1); line-height:1.4; letter-spacing:-.01em; text-wrap:pretty}

/* ---------- Pakete: Knopf zur kompletten Seite ---------- */
.pn-go{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-s) var(--space-l); margin-top:var(--space-m); padding:clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 28px); background:var(--dark); color:var(--on-dark); border-radius:16px}
.pn-go p{max-width:50ch; line-height:1.4}
.pn-go .mono{display:block; margin-bottom:4px; color:var(--on-dark-muted)}
.pn-go :focus-visible{outline-color:var(--on-dark)}
.no-js .pn-go{display:none}
#pakete[data-cur="web"] .pn-go[data-go="web"],
#pakete[data-cur="ki"] .pn-go[data-go="ki"]{display:none}
@media (max-width:700px){ .pn-go .pill{width:100%; justify-content:space-between; white-space:normal; text-align:left} }

/* ---------- Kategorie: Was Sie auf den anderen Seiten finden ---------- */
.kat .sh{align-items:end}
.kat-g{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:10px}
.kc{display:flex; flex-direction:column; gap:var(--space-s); min-width:0; padding:clamp(20px, 2.4vw, 32px); background:var(--panel); border:1px solid var(--line-strong); border-radius:20px}
.kc-h{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:48px}
.kc .stn{--s:48px}
.kc .stn .ic{width:26px; height:26px}
.kc-here{display:none; padding:5px 12px; border:1px solid #fff; border-radius:999px; background:#fff; color:#000; font-weight:600}
.kc-t{font-family:var(--display); font-stretch:var(--d-wd); font-size:calc(var(--step-1) * var(--d-k)); font-weight:600; line-height:1.05; letter-spacing:-.03em}
.kc-s{color:var(--muted); line-height:1.4}

.kc-f{margin-top:auto; padding-top:var(--space-s)}
.kc[aria-current="page"]{--ink:var(--on-dark); --bg:var(--dark); --muted:var(--on-dark-muted); --line-strong:var(--dark-line); --ic-acc:var(--acc-on-dark); background:var(--dark); color:var(--on-dark); border-color:var(--dark)}
.kc[aria-current="page"] .stn{background:var(--dark)}
.kc[aria-current="page"] .kc-here{display:inline-block}
.kc[aria-current="page"] .kc-f{display:none}

@media (min-width:900px) and (max-width:1279px){ .kc-t{min-height:2.1em} }
@media (max-width:899px){ .kat-g{grid-template-columns:minmax(0,1fr)} }

/* ---------- Seite Webseiten ---------- */
.rp{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:var(--space-m) var(--space-l); align-items:center; padding:clamp(20px, 2.6vw, 32px); background:var(--panel); border:1.5px dashed var(--field-line); border-radius:20px}
.rp > .ic{width:56px; height:56px}
.rp .mono{display:block; margin-bottom:6px; color:var(--muted)}
.rp h3{font-family:var(--display); font-weight:600; font-size:calc(var(--step-2) * var(--d-k)); line-height:1.08; letter-spacing:-.03em}
.rp p:not(.mono){margin-top:6px; color:var(--muted)}
@media (max-width:760px){
  .rp{grid-template-columns:minmax(0,1fr)}
  .rp .pill{width:100%; justify-content:space-between}
}

/* ---------- Seite Schulung ---------- */
.fk{display:grid; grid-template-columns:minmax(0,4fr) minmax(0,8fr); gap:var(--space-l) var(--space-xl-2xl); align-items:start}
.fk-l{display:flex; align-items:center; gap:14px}
.fk-l .mono{color:var(--muted)}
.fk-t{font-family:var(--display); font-stretch:var(--d-wd); font-weight:var(--d-w); font-size:calc(var(--step-2) * var(--d-k)); line-height:1.12; letter-spacing:-.03em; max-width:30ch; text-wrap:pretty}
.fk-n{margin-top:var(--space-s); color:var(--muted); max-width:52ch}
@media (max-width:899px){ .fk{grid-template-columns:minmax(0,1fr)} }
.am{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--space-l) var(--space-xl); align-items:start}
.am-ex{border-top:1px solid var(--line-strong)}
.am-b{position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 14px; align-items:center; width:100%; min-height:64px; padding:12px 8px 12px 14px; border:0; border-bottom:1px solid var(--line-strong); background:transparent; text-align:left; cursor:pointer; font-weight:500; line-height:1.3; transition:background-color .3s}
.am-b::before{content:""; position:absolute; left:0; top:10px; bottom:10px; width:3px; border-radius:3px; background:var(--ink); transform:scaleY(0); transition:transform .4s var(--ease)}
.am-b[aria-pressed="true"]{background:var(--card)}
@media (hover:hover){ .am-b:hover{background:var(--card)} }
.am-b[aria-pressed="true"]::before{transform:scaleY(1)}
.am-st{display:inline-flex; align-items:center; gap:8px; min-height:30px; padding:0 12px; border:1px solid var(--line-strong); border-radius:999px; background:var(--panel); color:var(--muted); font-family:var(--mono); font-size:var(--t-s); letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.am-st i{display:block; width:10px; height:10px; border-radius:3px; background:currentColor}
.am-st.g i{background:var(--ok)} .am-st.y i{background:var(--warn)} .am-st.r i{background:var(--no)}
.am-st.none{border-style:dashed}
.am-c{margin-top:12px; color:var(--muted)}
.am-card{display:grid; grid-template-columns:92px minmax(0,1fr); gap:0 28px; padding:clamp(20px, 2.6vw, 30px); background:var(--card); border-radius:20px}
.am-lamps{display:flex; flex-direction:column; gap:12px; align-self:start; padding:12px; border-radius:30px; background:var(--dark)}
.lamp{display:block; width:68px; height:68px; border-radius:50%; background:var(--lamp-off); transform:scale(.9); transition:background-color .4s, transform .55s var(--ease)}
.lamp.on{transform:scale(1)}
.lamp.r.on{background:var(--no)} .lamp.y.on{background:var(--warn)} .lamp.g.on{background:var(--ok)}
.am-r .mono{color:var(--muted)}
.am-r h3{margin-top:8px; font-size:clamp(1.35rem, 2.3vw, 1.9rem); font-weight:600; line-height:1.15; letter-spacing:-.03em}
.am-guess{display:flex; flex-wrap:wrap; gap:10px; margin-top:22px}
.am-guess button{min-height:48px; padding:0 18px; border:1.5px solid var(--ink); border-radius:999px; background:transparent; font-weight:600; cursor:pointer; transition:background-color .3s, color .3s, transform var(--dur-press) var(--ease-out)}
@media (hover:hover){ .am-guess button:hover{background:var(--ink); color:var(--bg)} }
.am-guess button[disabled]{opacity:.45; cursor:default; background:transparent; color:inherit}
.am-guess button.pick{opacity:1; background:var(--ink); color:var(--bg)}
.am-v{margin-top:22px; padding-top:18px; border-top:1px solid var(--line-strong)}
.am-v .vh{font-weight:600; font-size:var(--step-0); letter-spacing:-.02em}
.am-v .vh span{display:block; margin-bottom:4px; font-size:var(--t-ui); font-weight:500; color:var(--muted); letter-spacing:0}
.am-v .vt{margin-top:8px; line-height:1.5}
.am-v .pill{margin-top:16px}
.am-hint{margin-top:22px; color:var(--muted)}
.am-disc{margin-top:var(--space-m); padding:14px 18px; border:1px dashed var(--field-line); border-radius:12px; color:var(--muted); font-size:var(--t-ui); line-height:1.45}
@media (max-width:899px){ .am{grid-template-columns:minmax(0,1fr)} }
@media (max-width:560px){
  .am-card{grid-template-columns:minmax(0,1fr); gap:18px 0}
  .am-lamps{flex-direction:row; width:max-content; gap:10px; padding:10px; border-radius:999px}
  .lamp{width:44px; height:44px}
  .am-b{grid-template-columns:minmax(0,1fr)}
  .am-st{justify-self:start}
}

/* ---------- Seite Automatisierung: Beispielablauf (Schema) ---------- */
.sc{padding:clamp(20px, 3vw, 40px); background:var(--dark); color:var(--on-dark); border-radius:20px}
.sc-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px}
.sc-chips{display:flex; flex-wrap:wrap; gap:10px}
.sc-chips button{min-height:48px; padding:0 20px; border:1.5px solid var(--dark-line); border-radius:999px; background:transparent; color:var(--on-dark); font-weight:500; cursor:pointer; transition:background-color .3s, border-color .3s, color .3s, transform var(--dur-press) var(--ease-out)}
@media (hover:hover){ .sc-chips button:hover{border-color:var(--acc-on-dark)} }
.sc-chips button[aria-pressed="true"]{background:var(--on-dark); color:var(--dark); border-color:var(--on-dark)}
.sc-replay{margin-left:auto; display:inline-flex; align-items:center; min-height:48px; padding:0 6px; border:0; background:none; color:var(--acc-on-dark); font-weight:500; text-decoration:underline; text-underline-offset:5px; text-decoration-thickness:1px; cursor:pointer}
.sc-flow{display:grid; grid-template-columns:repeat(5, minmax(0,1fr)); gap:0 44px; margin-top:var(--space-l)}
.sc-node{position:relative; display:flex; flex-direction:column; gap:10px; min-height:150px; padding:16px 16px 18px; border:1.5px solid var(--dark-line); border-radius:16px; background:var(--dark-2); opacity:0; transform:translateY(16px)}
.sc-node .mono{color:var(--acc-on-dark)}
.sc-node b{font-size:var(--step-0); line-height:1.3; font-weight:600; letter-spacing:-.015em}
.sc-node.t-ki{border-color:var(--acc-on-dark)}
.sc-node.t-sie{background:var(--sh-front); color:var(--dark); border-color:var(--sh-front)}
.sc-node.t-sie .mono{color:var(--dark)}
.sc-node.t-erg{background:var(--on-dark); color:var(--dark); border-color:var(--on-dark)}
.sc-node.t-erg .mono{color:var(--btn)}
.sc-node .w{position:absolute; left:100%; top:50%; width:44px; height:2px; background:var(--acc-on-dark); transform:scaleX(0); transform-origin:left}
.sc-node .w::after{content:""; position:absolute; right:-1px; top:-5px; width:10px; height:10px; border-top:2px solid var(--acc-on-dark); border-right:2px solid var(--acc-on-dark); transform:rotate(45deg) translate(-1px,1px); opacity:0}
.sc-node:last-child .w{display:none}
.sc.built .sc-node{opacity:1; transform:none; transition:opacity .5s var(--ease) calc(var(--i) * .34s), transform .7s var(--ease) calc(var(--i) * .34s)}
.sc.built .sc-node .w{transform:scaleX(1); transition:transform .35s var(--ease) calc(var(--i) * .34s + .3s)}
.sc.built .sc-node .w::after{opacity:1; transition:opacity .2s calc(var(--i) * .34s + .6s)}
.sc-tb{display:grid; grid-template-columns:auto auto; width:max-content; max-width:100%; margin:var(--space-m) 0 0 auto; border:1.5px solid var(--dark-line); border-radius:10px; font-size:var(--t-ui); overflow:hidden}
.sc-tb span{padding:8px 14px; border-bottom:1px solid var(--dark-line)}
.sc-tb span:nth-child(odd){display:flex; align-items:center; border-right:1px solid var(--dark-line); color:var(--acc-on-dark); font-family:var(--mono); font-size:var(--t-s); letter-spacing:.09em; text-transform:uppercase}
.sc-tb span:nth-last-child(-n+2){border-bottom:0}
.sc-lg{display:flex; flex-wrap:wrap; gap:8px 22px; margin-top:var(--space-s)}
.sc-lg span{display:inline-flex; align-items:center; gap:8px; font-size:var(--t-ui); color:var(--on-dark-muted)}
.sc-lg i{display:block; width:16px; height:12px; border:1.5px solid var(--dark-line); border-radius:3px; background:var(--dark-2)}
.sc-lg i.k{border-color:var(--acc-on-dark)} .sc-lg i.s{background:var(--sh-front); border-color:var(--sh-front)} .sc-lg i.e{background:var(--on-dark); border-color:var(--on-dark)}
.sc :focus-visible{outline-color:var(--on-dark)}
@media (max-width:1023px){ .sc-flow{gap:0 28px} .sc-node .w{width:28px} .sc-node b{font-size:var(--t-ui)} }
@media (max-width:899px){
  .sc-flow{grid-template-columns:minmax(0,1fr); gap:46px 0}
  .sc-node{min-height:0}
  .sc-node .w{left:50%; top:100%; width:2px; height:46px; margin-left:-1px; transform:scaleY(0); transform-origin:top}
  .sc-node .w::after{right:auto; top:auto; left:-5px; bottom:-1px; transform:rotate(135deg) translate(-1px,1px)}
  .sc.built .sc-node .w{transform:scaleY(1)}
  .sc-tb{width:100%; grid-template-columns:auto minmax(0,1fr)}
}

.nb{white-space:nowrap}
.ph{background:#fff3b0; color:#14202c; padding:0 .3em; border-radius:3px}
.rp h2{font-family:var(--display); font-weight:600; font-size:calc(var(--step-2) * var(--d-k)); line-height:1.08; letter-spacing:-.03em}

/* ===== Bestandteile (Konzept B1) ===== */
.bz-k{margin:var(--space-xl) 0 var(--space-s); color:var(--muted)}
.bz-note{margin-top:var(--space-m); color:var(--muted)}
.bz-ul{display:grid; gap:10px; margin-top:var(--space-s)}
.bz-ul li{position:relative; padding-left:26px; line-height:1.4}
.bz-ul li::before{content:""; position:absolute; left:2px; top:.38em; width:11px; height:6px; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
.bz-ic{width:56px; height:56px; flex:none}

.bz1-main{display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--space-s)}
.bz1-c{display:flex; flex-direction:column; gap:var(--space-s); padding:clamp(22px, 3vw, 40px); border-radius:24px; background:var(--panel); border:1px solid var(--line-strong)}
.bz1-c .bz-ic{width:64px; height:64px}
.bz1-c h3{font-family:var(--display); font-weight:600; font-size:calc(var(--step-3) * var(--d-k)); line-height:1; letter-spacing:-.035em}
.bz1-c > p{color:var(--muted); font-size:var(--step-0); line-height:1.45; max-width:42ch}
.bz1-web{background:var(--dark); border-color:var(--dark); color:var(--on-dark)}
.bz1-web > p{color:var(--on-dark-muted)}
.bz1-web .bz-ul li::before{border-color:var(--acc-on-dark)}
.bz1-c .pill{align-self:flex-start; margin-top:auto}
.bz1-add{display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:var(--space-s)}
.bz1-add li{display:flex; flex-direction:column; gap:8px; padding:18px 18px 20px; border-radius:18px; border:1.5px dashed var(--field-line); background:transparent}
.bz1-add .bz-ic{width:40px; height:40px}
.bz1-add b{font-weight:600; font-size:var(--step-0); letter-spacing:-.01em; line-height:1.2}
.bz1-add p{color:var(--muted); font-size:var(--t-ui); line-height:1.4}
@media (max-width:1000px){ .bz1-add{grid-template-columns:repeat(2, minmax(0,1fr))} }
@media (max-width:760px){ .bz1-main{grid-template-columns:minmax(0,1fr)} }
@media (max-width:420px){ .bz1-add{grid-template-columns:minmax(0,1fr)} }

/* Empfohlen-Pille wie "Sie sind hier" */
.pk-recpill,.pk.rec .pk-badge.pk-recpill{padding:5px 12px; border:1px solid #fff; border-radius:999px; background:#fff; color:#000; font-weight:600}
/* Kontakt */
.ct-l h2 .muted{color:#0e3a5f}
.ct-wa .pill--line .sq{background:none; color:var(--ink); overflow:visible}
.ct-wa .sq svg{width:38px; height:38px; flex:none}
.ct-wa{margin-top:var(--space-s); display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px}
[data-sec="partner"]{padding-block:var(--space-xl)}

/* Druck-Rueckmeldung */
.pill:active,.sw-tab:active,.tab:active,.rf-gt:active,.rf-pj:active,.menu-btn:active,.sc-chips button:active,.am-guess button:active,.rf-arr:active{transform:scale(.97)}
.am-b:active{transform:scale(.99)}

/* Scroll-Reveal */
html.js .rv{opacity:0; transform:translateY(20px)}
html.js .rv.rv-in{opacity:1; transform:none; transition:opacity var(--dur-reveal) var(--ease-out) var(--rd,0s), transform var(--dur-reveal) var(--ease-out) var(--rd,0s)}
@media (prefers-reduced-motion:reduce){ html.js .rv{opacity:1; transform:none} }

/* Hero-Intro: Startzustand per CSS, damit nichts aufblitzt */
html.intro .hero .w{transform:translateY(112%)}
html.intro .hero .status,html.intro .nav-bar,html.intro .hrt-st{opacity:0}

/* Switch: gleitender Indikator */
.sw-ind{position:absolute; left:0; top:0; width:0; height:0; z-index:0; border-radius:999px; background:var(--dark); pointer-events:none; transition:transform var(--dur-move) var(--ease-io), width var(--dur-move) var(--ease-io), height var(--dur-move) var(--ease-io)}
.sw-ind.nosnap{transition:none}
@media (prefers-reduced-motion:reduce){ .sw-ind{transition:none} }

@property --dx{syntax:'<length>'; inherits:false; initial-value:0px}

/* Typografie: Mono nur fuer Etiketten und Daten, Fussnoten in Satzschreibung, Mindestgroesse 13 px */
.mono{font-size:max(13px, calc(var(--step--1) * var(--mono-k)))}
.rf-fn.mono,.bz-note.mono,.rc-note.mono,.pn-foot.mono{font-family:var(--sans); font-size:var(--t-s); text-transform:none; letter-spacing:0; line-height:1.5}
.rf-pj .dm{font-size:.78rem}
@media (max-width:700px){ .rf-pj .nm,.rf-pj .dm{white-space:normal; overflow:visible; text-overflow:clip; overflow-wrap:anywhere} }
@media (hover:hover){ .pr a:hover > span:last-child{text-decoration:underline; text-underline-offset:.22em; text-decoration-thickness:1px} }

/* Bündel A (05.11.2026) */
html{scroll-padding-top:calc(88px + env(safe-area-inset-top, 0px)); -webkit-tap-highlight-color:transparent}
a,button,summary,[role="button"],[role="tab"]{touch-action:manipulation}
.pill,.status,.sw-tab,.tab,.rf-pj{-webkit-touch-callout:none; -webkit-user-select:none; user-select:none}
.pr a:active,.kat a:active,summary:active,.foot-nav a:active,.menu a:not(.pill):active{opacity:.6; transition:opacity var(--dur-press) var(--ease-out)}
.rf-inv .go{align-self:stretch; justify-content:space-between; gap:14px; padding:0 11px 0 28px; font-size:23px}
.rf-inv .go i{width:56px; height:56px}
.ct-wa .pill{padding-right:8px}
.ct-wa .sq,.ct-wa .sq svg{width:30px; height:30px}
@media (max-width:700px){ .rf-pj .dm{white-space:nowrap; overflow:hidden; text-overflow:clip; overflow-wrap:normal; letter-spacing:0} }

/* Schrift T0 (05.11.2026): Etiketten in Geist ohne Versalien und Sperrung, Mono nur für echte Daten, kleine Größen auf zwei Stufen */
:root{ --t-s:.8125rem; --t-ui:.9375rem }
.mono{font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:var(--t-ui); font-weight:500; line-height:1.4}
.tag.mono b{font-weight:500}
.pk-price small{font-family:var(--sans); text-transform:none; letter-spacing:0; font-size:var(--t-ui); font-weight:500}
.pk-badge{text-transform:none; letter-spacing:0}
.sc-tb span:nth-child(odd),.ck-steps .lab,.am-st,.pr a,.pr .pr-a{text-transform:none; letter-spacing:0}
.sc-tb span:nth-child(odd),.ck-steps .lab{font-family:var(--sans); font-size:var(--t-s); font-weight:500}
.rf-pj .dm,.cr-next .cr-pr,.qr .L{font-family:var(--mono); font-weight:400; font-size:var(--t-s); letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums}
.pk-price{font-variant-numeric:lining-nums proportional-nums}
.cr-num b,.rk-n,.qr .L{font-variant-numeric:tabular-nums lining-nums}

/* Pakete-Tabs Variante C (05.11.2026) */
.pn-stage{position:relative; overflow-x:clip; overflow-clip-margin:24px}
.pn.is-out{position:absolute; left:0; right:0; top:0; pointer-events:none}
.tab-hl{position:absolute; inset:0; z-index:2; display:flex; padding:5px; pointer-events:none; clip-path:inset(5px 100% 5px 0 round 999px)}
.tab-hl .tab{display:inline-flex; align-items:center; justify-content:center; color:var(--on-light); transition:none}
.tabs.has-hl .tab[aria-selected="true"]{color:var(--on-dark-muted)}

/* Runde 05.11.2026 (spät): Kategorie als Verweis-Karten, Textlinks mit Chevron, Stationen ohne Sprung */
.tlink .tl-ic{width:12px; height:12px; flex:none; transition:transform var(--dur-hover) var(--ease-out)}
@media (hover:hover){ .tlink:hover .tl-ic{transform:translateX(2px)} }
.kat-g{grid-template-columns:repeat(2, minmax(0,1fr))}
@media (max-width:899px){ .kat-g{grid-template-columns:minmax(0,1fr)} }
.kc{position:relative}
.kc[aria-current="page"]{display:none}
.kc-go::after{content:""; position:absolute; inset:0; border-radius:inherit}
@media (hover:hover){ .kc:hover{border-color:var(--ink)} .kc{transition:border-color var(--dur-hover) var(--ease-out)} }
.kc:has(.kc-go:focus-visible){outline:2px solid var(--ink); outline-offset:3px}
.kc-go:focus-visible{outline:none}
.pn-go .tlink{color:var(--on-dark)}
.cta .acts .tlink{color:var(--on-dark)}

/* Runde 05.11.2026 (spät): Bewegung, Formular, große Schrift, schmale Geräte */
.sw-ind{transition-duration:.45s}
.sw-tight .sw-tab .ic{display:none}
.sw-tight .sw-tab{padding:0 14px}
.sw-tight .sw{overflow-x:auto; scrollbar-width:none}
.fld-msg{margin-top:6px; font-size:var(--t-s); line-height:1.4; color:#a4262c}
.fld input[aria-invalid="true"]{border-color:#a4262c}
@keyframes msgIn{from{opacity:0; transform:translateY(4px)}}
#ctErr:not([hidden]),.ct-sent:not([hidden]),.fld-msg:not([hidden]){animation:msgIn var(--dur-ui) var(--ease-out) both}
@keyframes tflash{0%{box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 40%, transparent); background-color:color-mix(in srgb, var(--accent) 12%, var(--field))} 100%{box-shadow:0 0 0 3px transparent}}
.fld select.flash{animation:tflash 1.4s var(--ease-out)}
@media (prefers-reduced-motion:reduce){ #ctErr,.ct-sent,.fld-msg,.fld select.flash{animation:none} }
@media (max-width:700px){ .tab{white-space:normal; line-height:1.15; text-align:center} }
@media (max-width:379.98px){ .pill{white-space:normal; text-align:left} .hero h1{-webkit-hyphens:auto; hyphens:auto} }

/* Runde 06 (06.11.2026) */
/* Bestandteile: große Karten genau eine Hälfte, kleine genau ein Viertel (gleiche Lücke); Flächen statt gestrichelter Rahmen */
.bz1-c{border:0}
.bz1-add li{border:0; background:var(--panel)}
/* Paketkarten (Quiz Punkt 6): Häkchen, nur Fläche, 20 px Ecken, Zeilen in allen Karten auf gleicher Höhe */
.pk{border-radius:20px; border:0}
.pk-pts li{padding-left:24px}
.pk-pts li::before{left:1px; top:.42em; width:11px; height:6px; border-radius:0; background:none; border-left:2px solid var(--accent); border-bottom:2px solid var(--accent); transform:rotate(-45deg)}
.pk.rec .pk-pts li::before{border-color:var(--acc-on-dark)}
@media (min-width:1024px){
  .pk-grid{grid-template-rows:repeat(9, auto); row-gap:0}
  .pk{display:grid; grid-row:span 9; grid-template-rows:subgrid; align-content:start}
  .pk-cta{align-self:end}
}
/* KI-Pakete: Umsetzung als Band unter den drei Karten */
.pk-band{display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:var(--space-s) var(--space-l); margin-top:10px; padding:clamp(20px, 2.4vw, 30px) clamp(20px, 2.6vw, 34px); border-radius:20px; background:var(--dark); color:var(--on-dark); --ic-acc:var(--acc-on-dark)}
.pk-band-ic{width:48px; height:48px}
.pk-band-k{color:var(--on-dark-muted); font-size:var(--t-ui); font-weight:500}
.pk-band h3{margin-top:2px; font-size:var(--step-2); font-weight:600; line-height:1.05; letter-spacing:-.03em}
.pk-band-t > p:last-child{margin-top:8px; max-width:58ch; color:var(--on-dark-muted); line-height:1.45}
.pk-band-p{display:flex; align-items:baseline; gap:6px; white-space:nowrap; font-size:var(--step-3); font-weight:600; line-height:1; letter-spacing:var(--d-tr)}
.pk-band-p small{font-size:var(--step-0); font-weight:500; letter-spacing:0; color:var(--on-dark-muted)}
.pk-band :focus-visible{outline-color:var(--on-dark)}
@media (max-width:1023.98px){
  .pk-band{grid-template-columns:auto minmax(0,1fr); align-items:start}
  .pk-band-t{grid-column:2}
  .pk-band-p{grid-column:1 / -1; margin-top:4px}
  .pk-band-go{grid-column:1 / -1; justify-self:start}
}
/* Handy: Paketkarten kompakt statt Wischen: Icon, Name und Preis in einer Kopfzeile, alles sichtbar */
@media (max-width:700px){
  .pk{display:grid; grid-template-columns:auto minmax(0,1fr) auto; column-gap:12px; align-items:center; padding:18px}
  .pk > *{grid-column:1 / -1}
  .pk-top{grid-row:1; margin-bottom:10px}
  .pk-top:empty,.pk-top:not(:has(.pk-recpill)){display:none}
  .pk-ic{grid-column:1; grid-row:2; width:36px; height:36px; margin:0}
  .pk h3{grid-column:2; grid-row:2; margin:0; font-size:var(--step-1)}
  .pk-price{grid-column:3; grid-row:2; margin:0; font-size:var(--step-1); white-space:nowrap}
  .pk-who{grid-row:3; margin-top:4px}
  .pk-fmt{grid-row:4; margin-top:10px; padding-top:10px}
  .pk-res{grid-row:5; margin-top:10px}
  .pk-pts{grid-row:6; margin-top:10px; gap:4px}
  .pk-cta{grid-row:7; padding-top:14px}
  .pk-band{grid-template-columns:minmax(0,1fr); gap:10px}
  .pk-band-t,.pk-band-p,.pk-band-go{grid-column:auto}
}

/* /review-animations (06.11.2026): Indikatoren per clip-path (kein width/height pro Bild), UI-Dauern unter 300 ms, ease-out */
.sw-ind{border-radius:0; transform:none; transition:clip-path .45s var(--ease-io)}
.sw-ind.nosnap{transition:none}
.tab-ind{border-radius:0}
.rf-pn{transition-duration:var(--dur-expand)}
.fq-i::before,.fq-i::after{transition-duration:var(--dur-hover)}
.rf-dim{transition:opacity var(--dur-ui) var(--ease-out)}
.rf-shot img{transition:opacity var(--dur-ui) var(--ease-out)}
.stn{transition-duration:var(--dur-hover)}
.ck-steps i{transition-duration:var(--dur-ui)}
.rk-bar i{transition:transform var(--dur-ui) var(--ease-out)}
@media (prefers-reduced-motion:reduce){ .sw-ind,.rk-bar i{transition:none} }

/* Runde 07: echter Seitenwechsel zwischen index.html und ki.html, Header bleibt stehen, Inhalt blendet über */
@view-transition{navigation:auto}
.nav{view-transition-name:kopf}
::view-transition-old(root){animation:.16s var(--ease-out) both vt-aus}
::view-transition-new(root){animation:.32s var(--ease-out) both vt-ein}
@keyframes vt-aus{to{opacity:0}}
@keyframes vt-ein{from{opacity:0}}
@media (prefers-reduced-motion:reduce){ ::view-transition-old(root),::view-transition-new(root){animation:none} }

/* Sektion „Was ich sonst noch für Sie tun kann“, Variante D: Wasser-Streifen als ein Link */
.sd{position:relative; isolation:isolate; overflow:hidden; overflow:clip; display:grid; gap:20px; padding:clamp(24px, 3.2vw, 44px); border-radius:20px; background:var(--dark); color:var(--on-dark); text-decoration:none; transition:transform var(--dur-press) var(--ease-out)}
.sd::before{content:""; position:absolute; inset:-10%; z-index:-2; background:url(../assets/ref/wasser.webp) center/cover no-repeat}
.sd::after{content:""; position:absolute; inset:0; z-index:-1; background:rgb(14 58 95 / .34); transition:background-color var(--dur-ui) var(--ease-out)}
.sd:focus-visible{outline:2px solid var(--ink); outline-offset:3px}
.sd:active{transform:scale(.995)}
.sd-k{display:flex; align-items:center; gap:10px; font-size:var(--t-ui); font-weight:500; line-height:1.2; color:var(--acc-on-dark)}
.sd-ic{width:36px; height:36px; color:var(--on-dark); --ic-acc:var(--acc-on-dark)}
.sd-h{margin-top:14px; font-size:clamp(1.75rem, 1.2rem + 1.6vw, 3rem); font-weight:600; line-height:1; letter-spacing:-.035em; color:var(--on-dark); text-wrap:balance}
.sd-r{display:flex; flex-direction:column; gap:18px}
.sd-s{color:var(--on-dark-muted); line-height:1.4}
.sd .pill{align-self:flex-start}
.sd .pill .sq svg{transition:transform var(--dur-hover) var(--ease-out)}
@media (hover:hover){
  .sd:hover::after{background-color:rgb(14 58 95 / .18)}
  .sd:hover .pill .sq svg{transform:translateX(2px)}
}
@media (min-width:900px){
  .sd{min-height:216px; grid-template-columns:minmax(0,1fr) auto; align-items:end; column-gap:clamp(40px, 5vw, 96px)}
  .sd-h span{display:inline-block}
  .sd-r{max-width:300px}
}
@media (prefers-reduced-motion:reduce){ .sd,.sd::after,.sd .pill .sq svg{transition:none} }

/* Runde 08: Menü fährt weich nach unten aus (Maske von oben), Einträge folgen leise */
.menu{transform-origin:top center; will-change:clip-path}

/* Runde 10 (06.11.2026): Paketname groß, darunter ein klarer Satz (Konzept V1 ohne Etikett) */
.pk h3{font-size:calc(var(--step-3) * var(--d-k))}
.pk-who{margin-top:10px; font-size:clamp(1.0625rem, 1rem + .3vw, 1.25rem); font-weight:500; line-height:1.35; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty}
.pk.rec .pk-who{color:var(--on-dark)}
@media (min-width:1024px){
  .pk-grid{grid-template-rows:repeat(8, auto)}
  .pk{grid-row:span 8}
}
@media (max-width:700px){
  .pk h3{font-size:var(--step-1)}
  .pk-who{font-size:1.0625rem}
}
/* Runde 11: Schild oben rechts auf einer Mittellinie mit dem Icon (Desktop und Tablet) */
@media (min-width:701px){
  .pk{position:relative; --pk-pad:clamp(18px, 2vw, 26px); padding:var(--pk-pad)}
  .pk-top{position:absolute; top:var(--pk-pad); right:var(--pk-pad); left:var(--pk-pad); height:40px; align-items:center}
  .pk-ic{margin-top:0}
  .pk h3{margin-top:clamp(22px, 2.2vw, 32px)}
}

/* Runde 12 (06.11.2026): ein Abstand für alle Abschnitte, Maß ist der obere Abstand bei Referenzen (etwas mehr) */
:root{--sec-y:clamp(78px, 3.9rem + 3.6vw, 120px)}
[data-sec]:not([data-sec="top"]):not([data-sec="pos"]):not([data-sec="cta"]){padding-block:var(--sec-y)}
/* Referenzpartner: Titel groß in der Display-Schrift, Untertitel größer in Geist */
.rp p.rp-sub{margin-top:8px; font-size:var(--step-1); font-weight:500; line-height:1.3; letter-spacing:-.01em; color:var(--ink); text-wrap:pretty}
.rp .rp-sub + p{margin-top:6px}