/* HANZ IT · style.css · v1.7.0 */
:root{
  --bg:#ffffff;
  --bg-alt:#f5f5f7;
  --surface:#ffffff;
  --surface-2:#fbfbfd;
  --ink:#1d1d1f;
  --ink-2:#424245;
  --muted:#6e6e73;
  --line:#d2d2d7;
  --line-soft:#e8e8ed;
  --accent:#d0021b;
  --accent-ink:#ffffff;
  --accent-soft:#ffeef0;
  --brand:#e2001a;
  --it-green:#009036;
  --it-green-soft:#e5f4ea;
  --ok:#1f8f4e;
  --ok-soft:#e6f5ec;
  --warn:#b25e00;
  --warn-soft:#fff3e2;
  --dark:#000000;
  --dark-2:#161617;
  --dark-ink:#f5f5f7;
  --dark-muted:#a1a1a6;
  --nav-bg:rgba(255,255,255,.78);
  --shadow:0 2px 6px rgba(0,0,0,.04),0 12px 32px rgba(0,0,0,.06);
  --glass-bg:rgba(255,255,255,.58);
  --glass-bg-strong:rgba(255,255,255,.74);
  --glass-edge:rgba(255,255,255,.7);
  --glass-shadow:inset 0 1px 1px rgba(255,255,255,.8),inset 0 -10px 20px -14px rgba(255,255,255,.6),0 12px 34px -12px rgba(20,20,30,.28),0 2px 6px rgba(20,20,30,.06);
  --glass-hi:rgba(255,255,255,.75);
  --radius:22px;
  --radius-s:14px;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Display","SF Pro Text","Helvetica Neue","Segoe UI",Roboto,Arial,sans-serif;
  --maxw:1080px;
  --gutter:22px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#000000;--bg-alt:#101012;--surface:#161617;--surface-2:#1c1c1e;
    --ink:#f5f5f7;--ink-2:#d2d2d7;--muted:#a1a1a6;--line:#38383d;--line-soft:#2a2a2e;
    --accent:#ff5a6a;--accent-ink:#000000;--accent-soft:#3a0c12;--brand:#ff2e45;--it-green:#3cc56e;--it-green-soft:#0f2a1a;
    --ok:#4cd07d;--ok-soft:#0f2a1a;--warn:#ffb454;--warn-soft:#2e2010;
    --nav-bg:rgba(22,22,23,.78);--shadow:0 2px 6px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);--glass-bg:rgba(40,40,44,.5);--glass-bg-strong:rgba(40,40,44,.72);--glass-edge:rgba(255,255,255,.16);--glass-shadow:inset 0 1px 1px rgba(255,255,255,.18),inset 0 -10px 20px -14px rgba(255,255,255,.12),0 14px 36px -12px rgba(0,0,0,.6);--glass-hi:rgba(255,255,255,.22);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#000000;--bg-alt:#101012;--surface:#161617;--surface-2:#1c1c1e;
  --ink:#f5f5f7;--ink-2:#d2d2d7;--muted:#a1a1a6;--line:#38383d;--line-soft:#2a2a2e;
  --accent:#ff5a6a;--accent-ink:#000000;--accent-soft:#3a0c12;--brand:#ff2e45;--it-green:#3cc56e;--it-green-soft:#0f2a1a;
  --ok:#4cd07d;--ok-soft:#0f2a1a;--warn:#ffb454;--warn-soft:#2e2010;
  --nav-bg:rgba(22,22,23,.78);--shadow:0 2px 6px rgba(0,0,0,.4),0 12px 32px rgba(0,0,0,.4);--glass-bg:rgba(40,40,44,.5);--glass-bg-strong:rgba(40,40,44,.72);--glass-edge:rgba(255,255,255,.16);--glass-shadow:inset 0 1px 1px rgba(255,255,255,.18),inset 0 -10px 20px -14px rgba(255,255,255,.12),0 14px 36px -12px rgba(0,0,0,.6);--glass-hi:rgba(255,255,255,.22);
  color-scheme:dark;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:17px;line-height:1.47;letter-spacing:-.01em;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:6px}
[hidden]{display:none!important}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--bg);padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.wrap-wide{max-width:1280px;margin:0 auto;padding-inline:var(--gutter)}
.nb{white-space:nowrap}

/* Typography */
h1,h2,h3,h4{margin:0;color:var(--ink);text-wrap:balance;letter-spacing:-.025em}
.display{font-size:clamp(44px,8vw,88px);line-height:1.04;font-weight:700;letter-spacing:-.04em}
.h1{font-size:clamp(38px,6vw,64px);line-height:1.06;font-weight:700;letter-spacing:-.035em}
.h2{font-size:clamp(30px,4.4vw,48px);line-height:1.08;font-weight:700}
.h3{font-size:clamp(22px,2.6vw,28px);line-height:1.15;font-weight:650}
.h4{font-size:19px;line-height:1.25;font-weight:650;letter-spacing:-.015em}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.38;color:var(--ink-2);font-weight:450;letter-spacing:-.018em}
.eyebrow{font-size:14px;font-weight:600;letter-spacing:.02em;color:var(--accent);margin:0 0 10px}
.muted{color:var(--muted)}
.small{font-size:14px;line-height:1.45}
.tiny{font-size:12px;line-height:1.45;color:var(--muted)}
p{margin:0}
.stack>*+*{margin-top:14px}
.stack-l>*+*{margin-top:22px}
.prose{max-width:68ch}
.prose h2{font-size:28px;margin-top:44px;margin-bottom:12px}
.prose h3{font-size:20px;margin-top:28px;margin-bottom:8px}
.prose p,.prose ul,.prose ol{margin:0 0 14px;color:var(--ink-2)}
.prose li{margin-bottom:6px}
.grad{color:var(--brand)}

/* Navigation */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
.nav-in{max-width:1280px;margin:0 auto;padding-inline:var(--gutter);height:56px;display:flex;align-items:center;gap:22px}
.logo{display:flex;align-items:center;flex:none}
.logo img{height:36px;width:auto}
@media (max-width:760px){.logo img{height:30px}}
.logo-txt{font-weight:700;font-size:18px;letter-spacing:-.02em;color:var(--ink)}
.nav-links{display:flex;gap:4px;margin-left:auto;list-style:none;padding:0;margin-block:0}
.nav-links a{display:block;white-space:nowrap;color:var(--ink);font-size:14px;padding:8px 10px;border-radius:8px;opacity:.86}
.nav-links a:hover{opacity:1;text-decoration:none;background:var(--bg-alt)}
.nav-links a[aria-current="page"]{opacity:1;font-weight:600}
.nav-cta{display:flex;gap:8px;align-items:center}
.nav-cta .btn{white-space:nowrap}
.nav-toggle{display:none;margin-left:auto;background:none;border:0;width:44px;height:44px;border-radius:10px;color:var(--ink);cursor:pointer}
.nav-toggle svg{width:22px;height:22px}
@media (max-width:1239px){
  .nav-links{position:fixed;inset:56px 0 auto 0;flex-direction:column;background:var(--bg);padding:12px var(--gutter) 24px;border-bottom:1px solid var(--line);box-shadow:var(--shadow);max-height:calc(100vh - 56px);overflow:auto}
  .nav-links a{font-size:19px;padding:13px 6px;border-bottom:1px solid var(--line-soft);border-radius:0}
  .nav-links:not(.open){display:none}
  .nav-toggle{display:inline-grid;place-items:center}
  .nav-cta .btn-text{display:none}
}
@media (max-width:1380px) and (min-width:1240px){.nav-links{gap:0}.nav-links a{padding:8px 7px}.nav-cta{gap:6px}.nav-cta .btn{padding-inline:14px}}
@media (max-width:1239px){.nav-cta{margin-left:auto}.nav-toggle{margin-left:6px}}
@media (max-width:420px){.nav-cta .btn{padding:8px 11px}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:8px;border-radius:980px;padding:11px 20px;font-size:16px;font-weight:500;line-height:1.1;border:1px solid transparent;cursor:pointer;transition:background .2s,transform .2s;text-decoration:none!important;font-family:inherit}
.btn svg{width:17px;height:17px;flex:none}
.btn-primary{background:var(--accent);color:var(--accent-ink)}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn-secondary:hover{background:var(--accent-soft)}
.btn-ghost{background:var(--bg-alt);color:var(--ink)}
.btn-ghost:hover{background:var(--line-soft)}
.btn-sm{padding:8px 14px;font-size:14px}
.btn-dark{background:var(--dark-ink);color:#000}
.btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.link-arrow{font-weight:500;font-size:17px;display:inline-flex;align-items:center;gap:4px}
.link-arrow::after{content:"›";font-size:1.25em;line-height:1;transform:translateY(-1px)}

/* Sections */
.section{padding-block:clamp(64px,10vw,120px)}
.section-s{padding-block:clamp(44px,7vw,80px)}
.alt{background:var(--bg-alt)}
.dark{background:var(--dark);color:var(--dark-ink);--ink:#f5f5f7;--ink-2:#d2d2d7;--muted:#a1a1a6;--line:#38383d;--line-soft:#2a2a2e;--surface:#161617;--surface-2:#1c1c1e;--bg-alt:#161617;--accent:#ff6a4d;--accent-ink:#000;--accent-soft:#3a1409;color-scheme:dark}
.center{text-align:center}
.center .lead,.center .prose{margin-inline:auto}
.head{max-width:760px;margin-bottom:clamp(32px,5vw,56px)}
.center.head,.head.center{margin-inline:auto}

/* Hero */
.hero{padding-block:clamp(56px,9vw,112px) clamp(40px,6vw,72px);text-align:center}
.hero .lead{max-width:720px;margin:20px auto 0}
.hero .btn-row{justify-content:center;margin-top:30px}
.hero-img{margin:clamp(36px,6vw,64px) auto 0;max-width:560px}
.page-hero{padding-block:clamp(48px,8vw,96px) clamp(32px,5vw,56px)}
.page-hero .lead{max-width:720px;margin-top:18px}
.page-hero .btn-row{margin-top:28px}
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:820px){.split{grid-template-columns:1fr}}

/* Tiles */
.tiles{display:grid;gap:14px}
.tiles-2{grid-template-columns:repeat(2,1fr)}
.tiles-3{grid-template-columns:repeat(3,1fr)}
.tiles-4{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.tiles-3,.tiles-4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.tiles-2,.tiles-3,.tiles-4{grid-template-columns:1fr}}
.tile{background:var(--surface);border-radius:var(--radius);padding:clamp(26px,3.4vw,40px);display:flex;flex-direction:column;gap:12px;position:relative;overflow:hidden}
.alt .tile{background:var(--surface)}
.section:not(.alt):not(.dark) .tile,.section-s:not(.alt):not(.dark) .tile{background:var(--bg-alt)}
.tile.tile-dark{background:var(--dark)}
.tile .h3{margin-top:2px}
.tile p{color:var(--ink-2)}
.tile .link-arrow{margin-top:auto;padding-top:8px}
.tile-feature{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center;padding:clamp(32px,5vw,64px)}
@media (max-width:760px){.tile-feature{grid-template-columns:1fr}}
.tile-dark{background:var(--dark)!important;color:var(--dark-ink)}
.tile-dark h2,.tile-dark h3{color:#f5f5f7}
.tile-dark p{color:#a1a1a6}
.tile-dark .eyebrow{color:#ff6a4d}
.tile-dark a:not(.btn){color:#ff6a4d}
.ico{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent);flex:none}
.ico svg{width:24px;height:24px}
.tile-img{margin-top:8px;border-radius:14px;align-self:center;max-height:220px;width:auto;object-fit:contain}

/* Stats */
.facts{display:grid;grid-template-columns:repeat(4,1fr);gap:28px}
@media (max-width:820px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact b{display:block;font-size:clamp(34px,4.6vw,52px);font-weight:700;letter-spacing:-.035em;line-height:1.05;font-variant-numeric:tabular-nums}
.fact span{color:var(--muted);font-size:15px}

/* Chips */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:980px;background:var(--surface);border:1px solid var(--line);font-size:14px;color:var(--ink-2)}
.chip-btn{cursor:pointer;font-family:inherit;transition:background .2s,color .2s,border-color .2s}
.chip-btn:hover{border-color:var(--ink-2)}
.chip-btn[aria-pressed="true"],.chip-btn[aria-selected="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:980px;font-size:12px;font-weight:600;letter-spacing:.01em;background:var(--accent-soft);color:var(--accent)}
.badge-ok{background:var(--ok-soft);color:var(--ok)}
.badge-warn{background:var(--warn-soft);color:var(--warn)}
.badge-grey{background:var(--bg-alt);color:var(--muted)}

/* Device cards */
.devices{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:960px){.devices{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.devices{grid-template-columns:1fr}}
.device{background:var(--surface);border-radius:var(--radius);padding:24px;display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none!important;transition:transform .25s,box-shadow .25s;border:1px solid var(--line-soft)}
.section:not(.alt) .device{background:var(--surface-2)}
.device:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.device-img{aspect-ratio:4/3;display:grid;place-items:center;background:#fff;border-radius:14px;overflow:hidden;max-width:100%}
.device-img img{max-height:100%;object-fit:contain;padding:10px}
.device-badges{display:flex;gap:6px;flex-wrap:wrap;min-height:24px}
.device h3{font-size:20px;font-weight:650;letter-spacing:-.02em}
.device p{color:var(--ink-2);font-size:15px}
.price{font-size:17px;font-weight:600;margin-top:auto;padding-top:6px;font-variant-numeric:tabular-nums}
.price small{font-weight:400;color:var(--muted);font-size:13px}
.noimg{display:grid;place-items:center;gap:6px;color:var(--muted);font-size:13px;text-align:center;padding:12px}
.noimg svg{width:54px;height:54px;opacity:.45}

/* Product detail */
.pd{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:start}
@media (max-width:820px){.pd{grid-template-columns:1fr}}
.pd-img{background:#fff;border-radius:var(--radius);aspect-ratio:1/1;display:grid;place-items:center;overflow:hidden;border:1px solid var(--line-soft);max-width:100%}
.pd-img img{max-height:100%;object-fit:contain;padding:28px}
.pd-price{font-size:30px;font-weight:700;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.specs{width:100%;border-collapse:collapse;font-size:15px}
.specs th,.specs td{text-align:left;vertical-align:top;padding:12px 0;border-bottom:1px solid var(--line-soft)}
.specs th{width:42%;font-weight:500;color:var(--muted);padding-right:16px}
.checks{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.checks li{display:flex;gap:10px;align-items:flex-start;color:var(--ink-2)}
.checks li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:var(--ok-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.5 10.5l3 3 6-7' fill='none' stroke='%231f8f4e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.note{border-radius:var(--radius-s);padding:16px 18px;background:var(--warn-soft);color:var(--ink);font-size:15px}
.note-info{background:var(--accent-soft)}
.crumbs{font-size:13px;color:var(--muted);display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:0 0 18px}
.crumbs li+li::before{content:"›";margin-right:6px;color:var(--line)}
.crumbs a{color:var(--muted)}

/* Tool panels */
.tool{background:var(--surface);border-radius:var(--radius);padding:clamp(22px,3.5vw,40px);border:1px solid var(--line-soft)}
.alt .tool{border-color:transparent}
.tool-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,4vw,48px)}
@media (max-width:820px){.tool-grid{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field+.field{margin-top:20px}
.field label,.lbl{font-size:15px;font-weight:600}
.field .hint{font-size:13px;color:var(--muted)}
.range-row{display:flex;align-items:center;gap:14px}
input[type="range"]{flex:1;accent-color:var(--accent);min-width:0}
.num{width:108px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px;font-variant-numeric:tabular-nums;text-align:right}
select.sel,input.txt{width:100%;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);color:var(--ink);font:inherit;font-size:16px}
.result{background:var(--bg-alt);border-radius:var(--radius-s);padding:22px}
.result-big{font-size:clamp(36px,5vw,52px);font-weight:700;letter-spacing:-.04em;line-height:1.05;font-variant-numeric:tabular-nums}
.result-rows{display:grid;gap:10px;margin-top:16px}
.result-row{display:flex;justify-content:space-between;gap:16px;font-size:15px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line-soft);padding-top:10px}
.result-row span:first-child{color:var(--muted)}
.seg{display:inline-flex;background:var(--bg-alt);border-radius:980px;padding:3px;gap:2px;flex-wrap:wrap}
.seg button{border:0;background:none;padding:8px 16px;border-radius:980px;font:inherit;font-size:14px;color:var(--ink-2);cursor:pointer}
.seg button[aria-pressed="true"],.seg button[aria-selected="true"]{background:var(--surface);color:var(--ink);box-shadow:0 1px 4px rgba(0,0,0,.12);font-weight:600}

/* DocBox process stepper */
.steps-nav{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:22px}
@media (max-width:600px){.steps-nav{grid-template-columns:1fr}}
.step-btn{text-align:left;border:1px solid var(--line);background:var(--surface);border-radius:16px;padding:16px 18px;cursor:pointer;font:inherit;color:var(--ink);display:grid;gap:4px;transition:border-color .2s,background .2s}
.step-btn .n{font-size:13px;color:var(--muted);font-weight:600;font-variant-numeric:tabular-nums}
.step-btn b{font-size:18px;letter-spacing:-.02em}
.step-btn[aria-selected="true"]{border-color:var(--accent);background:var(--accent-soft)}
.step-btn[aria-selected="true"] .n{color:var(--accent)}
.stage{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,48px);align-items:center}
@media (max-width:760px){.stage{grid-template-columns:1fr}}
.stage-vis{background:var(--bg-alt);border-radius:18px;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;max-width:100%}
.stage-vis svg{width:88%;height:auto}

/* Search demo */
.search-box{display:flex;align-items:center;gap:10px;background:var(--surface-2);border:1px solid var(--line);border-radius:14px;padding:4px 6px 4px 14px}
.search-box svg{width:20px;height:20px;color:var(--muted);flex:none}
.search-box input{flex:1;border:0;background:none;font:inherit;font-size:17px;color:var(--ink);padding:10px 0;min-width:0}
.search-box input:focus{outline:none}
.search-box:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.hits{display:grid;gap:10px;margin-top:16px}
.hit{display:grid;grid-template-columns:44px 1fr;gap:12px;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:14px;padding:14px;animation:pop .3s ease both}
@keyframes pop{from{transform:translateY(4px)}to{transform:none}}
.hit-ico{width:44px;height:54px;border-radius:6px;background:var(--surface);border:1px solid var(--line);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--muted)}
.hit b{font-size:15px}
.hit p{font-size:14px;color:var(--ink-2);margin-top:4px}
.hit mark{background:#ffe27a;color:#000;border-radius:3px;padding:0 2px}
.hit-meta{font-size:12px;color:var(--muted);margin-top:6px}
.search-stats{font-size:13px;color:var(--muted);margin-top:12px;font-variant-numeric:tabular-nums}
.suggest{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}

/* Flow (Eingangsverarbeitung) */
.flow{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;position:relative;margin-top:8px}
@media (max-width:760px){.flow{grid-template-columns:1fr}}
.flow-step{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:16px;padding:18px 16px;display:grid;gap:8px;align-content:start;transition:border-color .3s,background .3s,transform .3s}
.flow-step .ico{width:40px;height:40px}
.flow-step b{font-size:16px;letter-spacing:-.015em}
.flow-step p{font-size:14px;color:var(--ink-2)}
.flow-step .n{font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.flow-step.on{border-color:var(--accent);background:var(--accent-soft);transform:translateY(-3px)}
.flow-step.done .n{color:var(--ok)}

/* Modules */
.mod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:20px}
@media (max-width:820px){.mod-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.mod-grid{grid-template-columns:1fr}}
.mod{background:var(--surface-2);border:1px solid var(--line-soft);border-radius:14px;padding:16px;display:grid;gap:4px}
.mod b{font-size:15px}
.mod span{font-size:14px;color:var(--ink-2)}

/* Compare table */
.tbl-wrap{overflow-x:auto;border-radius:var(--radius-s)}
.cmp{width:100%;border-collapse:collapse;font-size:15px;min-width:520px}
.cmp th,.cmp td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
.cmp thead th{font-size:14px;color:var(--muted);font-weight:600}
.cmp tbody th{font-weight:500}
.yes{color:var(--ok);font-weight:600}
.no{color:var(--muted)}

/* Tabs panel */
.tabpanel{margin-top:22px}
.akte{display:grid;grid-template-columns:260px 1fr;gap:24px;align-items:start}
@media (max-width:700px){.akte{grid-template-columns:1fr}}
.folder{background:linear-gradient(180deg,#ff3b17,#c41f00);color:#fff;border-radius:6px 16px 16px 16px;padding:22px;min-height:180px;display:grid;align-content:end;position:relative;max-width:100%}
.folder::before{content:"";position:absolute;top:-12px;left:0;width:44%;height:14px;background:#ff3b17;border-radius:8px 8px 0 0}
.folder b{font-size:20px;letter-spacing:-.02em}
.folder span{font-size:13px;opacity:.85}
.akte ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.akte li{display:flex;gap:12px;align-items:center;background:var(--surface-2);border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;font-size:15px}
.akte li svg{width:20px;height:20px;color:var(--accent);flex:none}

/* FAQ */
.faq{max-width:820px;margin:0 auto;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;padding:22px 40px 22px 0;font-size:19px;font-weight:600;letter-spacing:-.018em;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:4px;top:50%;transform:translateY(-50%);font-size:26px;font-weight:300;color:var(--muted);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq .ans{padding:0 0 22px;color:var(--ink-2);max-width:68ch}

/* Contact band */
.cta-band{text-align:center}
.cta-band .lead{margin:16px auto 0;max-width:640px}
.contact-big{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.contact-card{display:grid;gap:4px;background:var(--surface);border-radius:var(--radius);padding:22px 26px;min-width:0;text-align:left;border:1px solid var(--line-soft);color:var(--ink);text-decoration:none!important;transition:transform .2s,box-shadow .2s}
.contact-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.contact-card span{font-size:13px;color:var(--muted)}
.contact-card b{font-size:22px;letter-spacing:-.025em;color:var(--accent)}
.hours{font-size:14px;color:var(--muted);margin-top:18px}

/* Footer */
.footer{background:var(--bg-alt);color:var(--muted);font-size:13px;padding-block:44px 34px;border-top:1px solid var(--line-soft)}
.f-grid{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:28px}
@media (max-width:900px){.f-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:480px){.f-grid{grid-template-columns:1fr}}
.footer h2{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:10px;letter-spacing:0}
.footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.footer a{color:var(--ink-2)}
.f-bottom{border-top:1px solid var(--line);margin-top:30px;padding-top:18px;display:flex;flex-wrap:wrap;gap:10px 24px;justify-content:space-between}
.f-contact{display:grid;gap:6px;color:var(--ink-2)}
.f-contact b{color:var(--ink)}

/* Reveal: visible at rest, subtle lift on enter */
.rv{transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.js .rv.pre{transform:translateY(22px)}

/* Timeline (Über uns) */
.timeline{display:grid;gap:0;border-left:2px solid var(--line);margin-left:8px}
.tl{position:relative;padding:0 0 28px 26px}
.tl::before{content:"";position:absolute;left:-8px;top:4px;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--bg)}
.tl b{display:block;font-size:22px;letter-spacing:-.02em;font-variant-numeric:tabular-nums}

.placeholder-legal{border:2px dashed var(--warn);border-radius:var(--radius-s);padding:22px;background:var(--warn-soft)}
.news-list{display:grid;gap:0;border-top:1px solid var(--line)}
.news-item{display:grid;grid-template-columns:130px 1fr;gap:18px;padding:22px 0;border-bottom:1px solid var(--line)}
@media (max-width:600px){.news-item{grid-template-columns:1fr;gap:4px}}
.news-item time{color:var(--muted);font-size:14px;font-variant-numeric:tabular-nums}
.news-item h2{font-size:21px;letter-spacing:-.02em}
.news-item p{color:var(--ink-2);margin-top:6px}
.err{text-align:center;padding-block:120px}

/* Logo im Dunkelmodus: Schwarz wird Weiß, Rot bleibt Rot */
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .logo img{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme="dark"] .logo img{filter:invert(1) hue-rotate(180deg)}

/* Markenmotiv: die drei Diagonalstreifen aus dem HANZ-Z */
.stripes{display:inline-flex;gap:6px;height:22px;align-items:stretch}
.stripes i{display:block;width:6px;background:var(--brand);transform:skewX(-38deg);border-radius:1px}
.hero-stripes{position:relative}
.hero-stripes::after{content:"";position:absolute;inset:auto 0 0 0;height:1px;background:var(--line-soft)}
.z-band{display:flex;gap:10px;justify-content:center;margin:0 auto 26px;height:34px}
.z-band i{width:9px;background:var(--brand);transform:skewX(-38deg);border-radius:1px;animation:zin .9s cubic-bezier(.2,.7,.2,1) both}
.z-band i:nth-child(2){animation-delay:.08s}.z-band i:nth-child(3){animation-delay:.16s}
@keyframes zin{from{transform:skewX(-38deg) translateY(10px)}to{transform:skewX(-38deg)}}
.pillars{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
@media (max-width:960px){.pillars{grid-template-columns:repeat(3,1fr)}}
@media (max-width:520px){.pillars{grid-template-columns:repeat(2,1fr)}}
.pillar{display:grid;gap:8px;justify-items:center;text-align:center;padding:18px 10px;border-radius:18px;background:var(--bg-alt);color:var(--ink);text-decoration:none!important;transition:background .2s,transform .2s}
.pillar:hover{transform:translateY(-2px)}
.pillar span{font-size:14px;font-weight:600}
.pillar .ico{background:var(--surface)}

/* ---------- v1.1 Ergänzungen ---------- */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
ol.flow,ol.numbered,ol.mini-steps,ol.chain{list-style:none;padding:0;margin:0}

/* Startseite */
.hero .eyebrow{margin-bottom:14px}
.hero-shelf{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,2vw,24px);max-width:880px;margin:clamp(40px,6vw,72px) auto 0;align-items:end}
.shelf-item{background:#fff;border-radius:var(--radius);aspect-ratio:4/5;display:grid;place-items:end center;overflow:hidden;max-width:100%;padding:clamp(10px,2vw,22px)}
.shelf-item img{max-height:100%;width:auto;object-fit:contain}
.shelf-item:nth-child(2){aspect-ratio:4/4.4}
.tile-img-row{display:flex;gap:12px;justify-content:center;align-items:flex-end;margin-top:auto;padding-top:18px}
.tile-img-row img{max-height:220px;width:auto;max-width:48%;border-radius:12px;background:#fff;padding:8px}
.tile-img-row img:only-child{max-width:70%}
.mini-steps{display:grid;gap:12px;counter-reset:ms}
.mini-steps li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start;background:rgba(255,255,255,.06);border-radius:16px;padding:18px}
.mini-steps li>span{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:700;font-variant-numeric:tabular-nums}
.mini-steps b{font-size:18px;letter-spacing:-.02em}
.mini-steps p{font-size:15px;color:#a1a1a6;margin-top:4px}
.chain{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative}
.chain::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;background:linear-gradient(90deg,var(--brand),var(--accent));opacity:.35}
@media (max-width:760px){.chain{grid-template-columns:1fr 1fr}.chain::before{display:none}}
.chain li{position:relative;display:grid;justify-items:center;text-align:center;gap:8px;background:var(--surface);border-radius:var(--radius);padding:26px 16px}
.chain li .ico{width:52px;height:52px;border-radius:50%;background:var(--accent-soft)}
.chain li b{font-size:19px;letter-spacing:-.02em}
.chain li span{font-size:14px;color:var(--muted)}
.facts-2{grid-template-columns:repeat(2,1fr)!important;gap:30px 24px}
.partners{margin-top:clamp(40px,6vw,64px);padding-top:28px;border-top:1px solid var(--line-soft);display:grid;gap:14px}
.partners ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px 36px;align-items:baseline}
.partners li{font-size:clamp(20px,2.4vw,28px);font-weight:700;letter-spacing:-.03em;color:var(--ink-2)}
.partners li:last-child{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.partners-c{border:0;margin-top:14px;padding:0;justify-items:center}
.partners-c ul{justify-content:center}

/* Seitenelemente */
.tile-link{color:var(--ink);text-decoration:none!important;transition:transform .25s,box-shadow .25s}
.tile-link:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.filterbar{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;margin-bottom:22px}
.numbered{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;counter-reset:n}
@media (max-width:900px){.numbered{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.numbered{grid-template-columns:1fr}}
.numbered li{counter-increment:n;background:var(--surface);border-radius:var(--radius);padding:26px 22px;display:grid;gap:8px;align-content:start}
.section:not(.alt) .numbered li{background:var(--bg-alt)}
.numbered li::before{content:counter(n);font-size:44px;font-weight:700;letter-spacing:-.04em;line-height:1;color:var(--brand);font-variant-numeric:tabular-nums}
.numbered b{font-size:19px;letter-spacing:-.02em}
.numbered span{color:var(--ink-2);font-size:15px}
.numbered-compact{grid-template-columns:1fr 1fr!important}
@media (max-width:520px){.numbered-compact{grid-template-columns:1fr!important}}
.numbered-compact li{background:var(--surface)!important}

/* DocBox */
.db-hero{padding-block:clamp(40px,7vw,88px) clamp(56px,8vw,96px)}
.db-hero .display{margin-top:26px}
.db-hero .lead{max-width:720px;margin:20px auto 0}
.db-hero .btn-row{justify-content:center;margin-top:30px}
.db-logo{width:min(300px,70%);height:auto;margin:0 auto;background:#fff;border-radius:18px;padding:10px 18px}
.crumbs-c{justify-content:center;margin-bottom:28px}
.dark .crumbs a,.dark .crumbs{color:#a1a1a6}
.db-stat{display:grid;gap:6px;max-width:520px;margin:clamp(40px,6vw,64px) auto 0;padding-top:28px;border-top:1px solid #333}
.db-stat b{font-size:clamp(40px,6vw,64px);letter-spacing:-.04em;line-height:1;color:#ff6a4d}
.db-stat span{font-size:15px;color:#a1a1a6}
.subnav{position:sticky;top:calc(env(safe-area-inset-top,0px) + 56px);z-index:40;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-bottom:1px solid var(--line-soft)}
.subnav-in{max-width:1280px;margin:0 auto;padding:0 var(--gutter);display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav-in::-webkit-scrollbar{display:none}
.subnav a{flex:none;font-size:13px;color:var(--ink-2);padding:12px 10px;white-space:nowrap}
.subnav a:hover{color:var(--accent);text-decoration:none}
[id]{scroll-margin-top:120px}
.sv-card{fill:var(--surface);stroke:var(--line);stroke-width:1.5}
.sv-soft{fill:var(--line)}
.sv-line{stroke:var(--line);stroke-width:4;stroke-linecap:round;fill:none}
.sv-cap{fill:var(--muted);font-size:11px;font-family:var(--font)}
.sv-ink{fill:var(--ink);font-family:var(--font)}
.sv-on{fill:#fff;font-family:var(--font)}
.sv-acc{fill:var(--brand)}
.sv-mark{fill:#ffd84d}
.sv-arrow{stroke:var(--muted);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sv-stroke{stroke:var(--muted);stroke-width:2;fill:none;stroke-linecap:round}
.sv-hit{fill:var(--accent-soft);stroke:var(--accent);stroke-width:1.5}
.needs{border:0;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.needs legend{margin-bottom:12px;padding:0}
.need{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--surface-2);cursor:pointer;font-size:15px;line-height:1.35;transition:border-color .2s,background .2s}
.need:has(input:checked){border-color:var(--accent);background:var(--accent-soft)}
.need input{width:18px;height:18px;margin:1px 0 0;accent-color:var(--accent);flex:none}
.mf-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.mf-list li{background:var(--surface);border:1px solid var(--line-soft);border-radius:12px;padding:12px 14px;display:grid;gap:2px;animation:pop .3s ease both}
.mf-list b{font-size:15px}
.mf-list span{font-size:13px;color:var(--ink-2)}
.all-mods{margin-top:18px}
.all-mods summary{cursor:pointer;font-weight:600;color:var(--accent);padding:8px 0;list-style:none}
.all-mods summary::-webkit-details-marker{display:none}
.all-mods summary::after{content:" +";}
.all-mods[open] summary::after{content:" \2212";}
.dark .tile{background:var(--surface)!important}

/* Kontakt */
.contact-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.contact-grid{grid-template-columns:1fr}}
.contact-card-l{padding:26px;gap:6px;background:var(--bg-alt);border-color:transparent}
.contact-card-l .cc-ico{width:28px;height:28px;color:var(--accent);margin-bottom:8px}
.contact-card-l b{font-size:21px;overflow-wrap:anywhere}
.contact-card-l b.addr{color:var(--ink);font-size:18px;line-height:1.35}
.contact-card-l small{font-size:13px;color:var(--muted)}
div.contact-card-l:hover{transform:none;box-shadow:none}

/* Rechtliches */
.legal{max-width:76ch}
.legal h2{font-size:22px}
.legal p,.legal li{font-size:16px}
.legal a{overflow-wrap:anywhere}

.head>*+*{margin-top:16px}
.head>.eyebrow+*{margin-top:0}

/* =====================================================================
   v1.2 · Liquid Glass
   ===================================================================== */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden}
.glass{position:relative;isolation:isolate;background:var(--glass-bg);-webkit-backdrop-filter:blur(18px) saturate(185%);backdrop-filter:blur(18px) saturate(185%);border:1px solid transparent;box-shadow:var(--glass-shadow);--mx:30%;--my:0%}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(90% 120% at var(--mx) var(--my),var(--glass-hi),rgba(255,255,255,0) 55%);transition:background .2s}
.glass::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;padding:1px;background:linear-gradient(140deg,var(--glass-edge),rgba(255,255,255,.08) 38%,rgba(255,255,255,0) 60%,var(--glass-edge));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.glass-dark{--glass-bg:rgba(255,255,255,.08);--glass-edge:rgba(255,255,255,.28);--glass-hi:rgba(255,255,255,.2);--glass-shadow:inset 0 1px 1px rgba(255,255,255,.2),0 14px 34px -14px rgba(0,0,0,.6)}
/* echte Lichtbrechung (Chromium): verzerrt den Hintergrund hinter dem Glas */
.lg-refract .nav-in.glass,.lg-refract .float-chip,.lg-refract .pcard-label,.lg-refract .ba-knob,.lg-refract .btn-glass{-webkit-backdrop-filter:url(#lg-refract) blur(10px) saturate(190%);backdrop-filter:url(#lg-refract) blur(10px) saturate(190%)}
a.glass,button.glass{transition:transform .5s cubic-bezier(.2,.9,.25,1.25),box-shadow .3s}
a.glass:hover{transform:translateY(-2px) scale(1.015)}
a.glass:active{transform:scale(.97)}
.btn-glass{color:var(--ink);font-weight:500}
.btn-glass:hover{color:var(--ink)}

/* Navigation als schwebende Glas-Kapsel */
.nav{background:transparent!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;top:calc(env(safe-area-inset-top,0px) + 10px);padding:10px var(--gutter) 0;margin-bottom:-66px;pointer-events:none}
.nav-in{pointer-events:auto;max-width:1240px;height:56px;border-radius:999px;padding:0 8px 0 22px;--glass-bg:var(--glass-bg-strong);transition:height .35s,box-shadow .35s,max-width .5s cubic-bezier(.2,.8,.2,1)}
.nav.scrolled .nav-in{height:50px}
.nav-links a{border-radius:999px}
.nav-links a:hover{background:rgba(127,127,127,.12)}
.nav-cta .btn{border-radius:999px}
main>:first-child{padding-top:calc(clamp(40px,6vw,88px) + 70px)!important}
.subnav{top:calc(env(safe-area-inset-top,0px) + 70px);background:transparent;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;padding:0 var(--gutter)}
.subnav-in{max-width:1080px;border-radius:999px;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(18px) saturate(185%);backdrop-filter:blur(18px) saturate(185%);box-shadow:var(--glass-shadow);margin-top:8px;padding:0 12px}
[id]{scroll-margin-top:140px}
@media (max-width:1239px){
  .nav-links{top:76px;left:var(--gutter);right:var(--gutter);inset:76px var(--gutter) auto var(--gutter);border-radius:26px;background:var(--glass-bg-strong);-webkit-backdrop-filter:blur(24px) saturate(185%);backdrop-filter:blur(24px) saturate(185%);box-shadow:var(--glass-shadow);border:0;max-height:calc(100vh - 100px)}
  .nav-links a{border-radius:12px}
  .nav-in{padding:0 6px 0 16px}
}

/* Startseite · Hero mit Bühne */
.hero-v2{position:relative;padding-bottom:clamp(28px,5vw,56px);overflow:hidden}
.hero-aura{position:absolute;left:0;right:0;top:-120px;height:680px;z-index:-1;filter:blur(70px);opacity:.5;pointer-events:none}
.hero-aura i{position:absolute;border-radius:50%;animation:drift 18s ease-in-out infinite alternate}
.hero-aura i:nth-child(1){width:520px;height:520px;left:8%;top:40px;background:#ff5a36}
.hero-aura i:nth-child(2){width:460px;height:460px;right:6%;top:120px;background:#ffb340;animation-duration:22s}
.hero-aura i:nth-child(3){width:380px;height:380px;left:42%;top:260px;background:#ff2d55;animation-duration:26s;opacity:.7}
@keyframes drift{from{transform:translate(0,0) scale(1)}to{transform:translate(40px,-30px) scale(1.12)}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hero-aura{opacity:.28}}
:root[data-theme="dark"] .hero-aura{opacity:.28}
.hero-stage{position:relative;margin-top:clamp(36px,5vw,64px)}
.stage-frame{position:relative;border-radius:clamp(22px,3vw,36px);overflow:hidden;aspect-ratio:21/9;background:var(--bg-alt);box-shadow:0 30px 80px -30px rgba(40,10,0,.45);max-width:100%}
@media (max-width:760px){.stage-frame{aspect-ratio:4/3}}
.parallax{position:absolute;left:0;top:-8%;width:100%;height:116%;object-fit:cover;will-change:transform}
.float-chip{position:absolute;display:flex;align-items:center;gap:12px;padding:10px 18px 10px 10px;border-radius:24px;color:var(--ink);text-decoration:none!important;animation:bob 7s ease-in-out infinite alternate}
.float-chip .ico{background:var(--surface);width:40px;height:40px;border-radius:14px}
.float-chip b{display:block;font-size:16px;letter-spacing:-.02em}
.float-chip small{display:block;font-size:13px;color:var(--ink-2)}
.fc-1{left:clamp(12px,4vw,48px);top:clamp(12px,5vw,54px)}
.fc-2{right:clamp(12px,4vw,48px);top:38%;animation-delay:-2.5s}
.fc-3{left:34%;bottom:clamp(12px,4vw,40px);animation-delay:-4s}
@keyframes bob{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (max-width:760px){.float-chip{padding:8px 12px 8px 8px;gap:8px;border-radius:18px}.float-chip .ico{width:32px;height:32px}.float-chip b{font-size:14px}.float-chip small{display:none}.fc-2{top:auto;bottom:14px;right:12px}.fc-3{display:none}}

/* Leistungs-Karten */
.pcards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.pcards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pcards{grid-template-columns:1fr}}
.pcard{position:relative;display:block;border-radius:28px;overflow:hidden;aspect-ratio:4/4.4;background:var(--bg-alt);color:var(--ink);text-decoration:none!important;isolation:isolate;max-width:100%}
@media (max-width:600px){.pcard{aspect-ratio:4/3.4}}
.pcard>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pcard:hover>img{transform:scale(1.05)}
.pcard-product{background:radial-gradient(120% 90% at 50% 30%,#ffffff 0,#eef0f3 70%)}
.pc-product{position:absolute;inset:0 0 70px 0;display:flex;align-items:center;justify-content:center;padding:28px}
.pc-product img{max-height:100%;max-width:100%;width:auto;object-fit:contain;transition:transform 1s cubic-bezier(.2,.7,.2,1);mix-blend-mode:multiply}
.pcard:hover .pc-product img{transform:scale(1.05) translateY(-4px)}
.pcard-label{position:absolute;left:12px;right:12px;bottom:12px;padding:14px 18px;border-radius:20px;display:grid;gap:2px}
.pcard-label b{font-size:20px;letter-spacing:-.025em}
.pcard-label small{font-size:14px;color:var(--ink-2)}

/* Feature-Kachel mit Foto */
.tile-photo{position:relative;overflow:hidden}
.tile-photo>*:not(.tf-bg){position:relative;z-index:1}
.tf-bg{position:absolute!important;inset:0;z-index:0;overflow:hidden}
.tf-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(0,0,0,.92) 0,rgba(0,0,0,.72) 45%,rgba(0,0,0,.45) 100%)}
.tf-bg img{opacity:.9}
.mini-steps li.glass{background:var(--glass-bg)}

/* Produktpalette als Laufband */
.mq-head{display:flex;justify-content:space-between;align-items:end;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.mq-track{display:flex;gap:14px;width:max-content;animation:mq 70s linear infinite;padding-block:6px 14px}
.marquee:hover .mq-track,.marquee:focus-within .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-item{position:relative;flex:none;width:250px;aspect-ratio:4/5;border-radius:26px;background:linear-gradient(180deg,#fff,#eff1f4);overflow:hidden;color:var(--ink);text-decoration:none!important;transition:transform .5s cubic-bezier(.2,.9,.25,1.2)}
.mq-item:hover{transform:translateY(-4px)}
.mq-img{position:absolute;inset:16px 16px 76px;display:flex;align-items:center;justify-content:center}
.mq-img img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}
.mq-cap{position:absolute;left:10px;right:10px;bottom:10px;padding:10px 14px;border-radius:18px;display:grid}
.mq-cap b{font-size:15px;letter-spacing:-.015em;color:#1d1d1f}
.mq-cap small{font-size:12px;color:#6e6e73}
.mq-cap{--glass-bg:rgba(255,255,255,.62)}
@media (prefers-reduced-motion:reduce){.mq-track{animation:none}.marquee{overflow-x:auto}}

/* Unternehmen */
.company{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:900px){.company{grid-template-columns:1fr}}
.company-photo{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:709/337;max-width:100%;box-shadow:0 30px 70px -35px rgba(0,0,0,.45)}
.company-photo>img{width:100%;height:100%;object-fit:cover}
.company-badge{position:absolute;left:14px;bottom:14px;display:flex;gap:10px;align-items:center;padding:8px 16px 8px 8px;border-radius:18px;color:var(--ink)}
.company-badge .ico{background:var(--surface);width:36px;height:36px;border-radius:12px}
.company-badge b{display:block;font-size:15px}
.company-badge small{display:block;font-size:12px;color:var(--ink-2)}

/* Kontakt-Band mit Foto */
.band-photo{position:relative;overflow:hidden;padding-block:clamp(72px,11vw,140px);color:#fff;isolation:isolate}
.band-bg{position:absolute;inset:0;z-index:-1;overflow:hidden}
.band-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.72))}
.band-photo .h2,.band-photo .lead{color:#fff}
.band-photo .lead{color:rgba(255,255,255,.86)}
.band-photo .hours{color:rgba(255,255,255,.8)}
.band-photo .contact-card{border:0}
.band-photo .contact-card span{color:var(--ink-2)}

/* Seiten-Hero mit Bild */
.page-hero-img{padding-block:clamp(40px,6vw,80px) clamp(28px,4vw,48px)}
.ph-grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,64px);align-items:center}
@media (max-width:860px){.ph-grid{grid-template-columns:1fr}}
.ph-txt .lead{max-width:600px}
.ph-photo{border-radius:30px;overflow:hidden;aspect-ratio:4/3;max-width:100%;box-shadow:0 30px 70px -35px rgba(0,0,0,.45)}
.ph-photo img{width:100%;height:100%;object-fit:cover}
.ph-product{position:relative;border-radius:30px;aspect-ratio:1/1;max-height:520px;max-width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(90% 80% at 50% 40%,#fff 0,#eceef2 75%);padding:clamp(24px,5vw,56px)}
.ph-product img{max-height:100%;max-width:100%;width:auto;object-fit:contain;mix-blend-mode:multiply}

/* Produktdetail */
.pd-sec{position:relative;overflow:hidden}
.pd-aura{position:absolute;left:-10%;top:-20%;width:60%;height:120%;background:radial-gradient(closest-side,rgba(255,80,40,.16),transparent);filter:blur(20px);pointer-events:none;z-index:-1}
.pd-img.glass-frame{background:linear-gradient(180deg,#fff,#f1f2f5);border:1px solid var(--line-soft);box-shadow:0 30px 70px -40px rgba(0,0,0,.35)}
.pd-img img{mix-blend-mode:multiply}
.device-img img{mix-blend-mode:multiply}

/* Reveal für Bilder */
.reveal-img{transition:transform 1.4s cubic-bezier(.2,.7,.2,1),filter 1.4s}
.js .reveal-img.ri-pre{transform:scale(1.08);filter:saturate(.7)}

/* Vorher / Nachher */
.ba{position:relative;aspect-ratio:16/9;border-radius:30px;overflow:hidden;--pos:50%;max-width:100%;background:var(--bg-alt);box-shadow:0 30px 70px -35px rgba(0,0,0,.45);touch-action:pan-y}
@media (max-width:640px){.ba{aspect-ratio:4/3.3}}
.ba-img{position:absolute;inset:0}
.ba-img img{width:100%;height:100%;object-fit:cover}
.ba-before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-line{position:absolute;top:0;bottom:0;left:var(--pos);width:2px;background:rgba(255,255,255,.9);transform:translateX(-1px);pointer-events:none;box-shadow:0 0 12px rgba(0,0,0,.3)}
.ba-knob{position:absolute;top:50%;left:50%;width:58px;height:58px;border-radius:50%;transform:translate(-50%,-50%);display:grid;place-items:center}
.ba-knob::before{content:"\2039\00a0\203A";position:relative;font-size:26px;font-weight:600;color:var(--ink);line-height:1}
.ba-tag{position:absolute;top:16px;padding:8px 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink);pointer-events:none}
.ba-tag-l{left:16px}.ba-tag-r{right:16px}
.ba-range{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize}
.ba-range:focus-visible~.ba-line .ba-knob,.ba:focus-within .ba-knob{outline:3px solid var(--brand);outline-offset:3px}

/* DocBox-Hero mit Foto */
.db-hero{position:relative;overflow:hidden;isolation:isolate}
.db-hero .band-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.78),rgba(0,0,0,.9))}
.db-logo-wrap{display:inline-block;padding:10px;border-radius:26px;--glass-bg:rgba(255,255,255,.12);--glass-edge:rgba(255,255,255,.4)}
.db-logo-wrap .db-logo{display:block;margin:0;width:300px;max-width:66vw}
.akte-photo{position:relative;margin-top:28px;border-radius:28px;overflow:hidden;height:clamp(220px,32vw,340px);max-width:100%}
.akte-photo-cap{position:absolute;left:16px;bottom:16px;right:16px;max-width:480px;padding:14px 18px;border-radius:20px;font-weight:600;color:var(--ink)}

/* Galerie Über uns */
.photo-round{border-radius:24px;overflow:hidden;aspect-ratio:16/9;max-width:100%}
.photo-round img{width:100%;height:100%;object-fit:cover}

/* News mit Bild */
.news-item{grid-template-columns:150px 1fr!important;align-items:start}
@media (max-width:600px){.news-item{grid-template-columns:84px minmax(0,1fr)!important;gap:14px!important}.news-item h2{font-size:19px;overflow-wrap:anywhere;hyphens:auto}}
.news-th{aspect-ratio:4/3;border-radius:16px;overflow:hidden;background:var(--bg-alt)}
.news-th img{width:100%;height:100%;object-fit:cover}
.news-th-p{background:#fff;display:grid;place-items:center;padding:10px;border:1px solid var(--line-soft)}
.news-th-p img{object-fit:contain;height:auto;max-height:100%;mix-blend-mode:multiply}
.news-th-e{display:grid;place-items:center;color:var(--muted)}
.news-th-e svg{width:34px;height:34px;opacity:.5}
.news-item time{display:block;margin-bottom:4px}

@media (prefers-reduced-motion:reduce){.hero-aura i,.float-chip{animation:none}.parallax{transform:none!important}}

/* ================= v1.3.0 ================= */
.badge-ink{background:var(--it-green-soft);color:var(--it-green)}
.dev-meta{font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums;margin-top:-4px}
.grp-h{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:clamp(20px,2.4vw,26px);font-weight:650;letter-spacing:-.02em;margin:clamp(34px,5vw,54px) 0 18px;scroll-margin-top:110px}
.filterbar+.grp-h{margin-top:8px}
.device-more{justify-content:center;background:var(--bg-alt);border-style:dashed}
.device-more .ico{margin-bottom:6px}
.f-logo{width:150px;height:auto;margin-bottom:6px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .f-logo{filter:invert(1) hue-rotate(180deg)}}
:root[data-theme="dark"] .f-logo{filter:invert(1) hue-rotate(180deg)}

/* Druckberater */
.berater{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(22px,4vw,48px);align-items:start;scroll-margin-top:100px}
@media (max-width:880px){.berater{grid-template-columns:1fr}}
.bx-in{display:grid;gap:20px}
.bx-in .field+.field{margin-top:0}
.seg-l{display:flex;width:100%;flex-wrap:nowrap}
.seg-l button{flex:1 1 0;padding:11px 12px;font-size:15px;white-space:nowrap}
@media (max-width:420px){.seg-l button{font-size:14px;padding:10px 6px}}
.bx-in .range-row input[type=range]{flex:1;min-width:0}
.bx-scale{display:flex;justify-content:space-between;font-variant-numeric:tabular-nums;padding-right:122px}
@media (max-width:420px){.bx-scale{padding-right:0}}
.bx-out{display:grid;gap:14px;min-width:0}
.bx-rec{position:relative;border-radius:22px;padding:clamp(18px,2.6vw,26px);background:radial-gradient(120% 90% at 0% 0%,var(--accent-soft) 0,transparent 55%),var(--surface-2);border:1px solid var(--line-soft);box-shadow:var(--shadow)}
.bx-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent)}
.bx-main{display:grid;grid-template-columns:132px minmax(0,1fr);gap:18px;align-items:center;margin-top:10px}
@media (max-width:480px){.bx-main{grid-template-columns:1fr}.bx-img{max-width:180px}}
.bx-img{aspect-ratio:1/1;background:#fff;border-radius:16px;display:grid;place-items:center;overflow:hidden}
.bx-img img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.bx-txt{display:grid;gap:8px;min-width:0}
.bx-txt .h3{font-size:clamp(20px,2.4vw,26px)}
.bx-load{display:grid;gap:6px;margin-top:4px}
.bx-bar{height:8px;border-radius:8px;background:var(--line-soft);overflow:hidden}
.bx-bar i{display:block;height:100%;border-radius:8px;background:linear-gradient(90deg,var(--it-green),#6cc88f);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.bx-txt .btn-row{margin-top:6px}
.bx-note{font-size:14px;color:var(--ink-2);background:var(--warn-soft);border-radius:14px;padding:12px 14px;margin:0}
.bx-alts{display:grid;gap:8px}
.bx-alts a,.bx-tip a{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line-soft);color:var(--ink);text-decoration:none!important;transition:border-color .2s}
.bx-alts a:hover,.bx-tip a:hover{border-color:var(--accent)}
.bx-alts small,.bx-tip small{color:var(--muted);font-size:13px}
.bx-tip{display:grid;gap:8px;padding:16px;border-radius:18px;background:var(--it-green-soft)}
.bx-tip .bx-kicker{color:var(--it-green)}
.bx-empty{padding:22px;border-radius:18px;background:var(--bg-alt);display:grid;gap:8px}

/* Firmengebäude als Panorama */
.bld{position:relative;border-radius:clamp(26px,3.4vw,44px);overflow:hidden;isolation:isolate;padding:clamp(34px,6vw,80px) clamp(10px,3vw,40px) clamp(16px,2vw,24px);max-width:100%}
.bld-sky{position:absolute;inset:0;z-index:-2;background:radial-gradient(70% 90% at 78% 8%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 60%),linear-gradient(180deg,#cfe0ef 0%,#e9f0f6 48%,#f7f7f9 78%,#eef0f3 100%)}
.bld-img{position:relative;max-width:1180px;margin:0 auto}
.bld-photo{display:block;width:100%;height:auto;filter:drop-shadow(0 34px 36px rgba(20,40,60,.22))}
.z-band-bld{position:absolute;z-index:-1;right:6%;top:-8%;height:130%;gap:clamp(16px,2.4vw,34px);margin:0;opacity:.13}
.z-band-bld i{width:clamp(22px,3.2vw,46px);animation:none}
.bld-chip{position:absolute;display:flex;align-items:center;gap:10px;padding:8px 16px 8px 8px;border-radius:20px;color:var(--ink);text-decoration:none!important;animation:bob 8s ease-in-out infinite alternate}
.bld-chip .ico{background:var(--surface);width:36px;height:36px;border-radius:12px}
.bld-chip b{display:block;font-size:15px;letter-spacing:-.02em}
.bld-chip small{display:block;font-size:12px;color:var(--ink-2)}
.bc-1{left:clamp(12px,4vw,56px);top:clamp(14px,3vw,34px)}
.bc-2{right:clamp(12px,4vw,56px);top:clamp(14px,3vw,34px);animation-delay:-3s}
.bc-3{left:50%;bottom:clamp(12px,2.4vw,26px);transform:translateX(-50%);animation:none}
@media (max-width:760px){.bld{padding-top:70px;padding-bottom:64px}.bld-chip{padding:6px 12px 6px 6px;gap:8px;border-radius:16px}.bld-chip .ico{width:30px;height:30px}.bld-chip b{font-size:13px}.bld-chip small{display:none}.bc-3{bottom:12px}}
@media (max-width:430px){.bc-2{display:none}}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bld-sky{background:radial-gradient(70% 90% at 78% 8%,rgba(120,150,190,.28) 0,rgba(0,0,0,0) 60%),linear-gradient(180deg,#1b2433 0%,#141a24 55%,#101216 100%)}}
:root[data-theme="dark"] .bld-sky{background:radial-gradient(70% 90% at 78% 8%,rgba(120,150,190,.28) 0,rgba(0,0,0,0) 60%),linear-gradient(180deg,#1b2433 0%,#141a24 55%,#101216 100%)}
.bld-hero{padding-bottom:clamp(20px,3vw,40px)}
.bld-hero .wrap-wide{margin-top:clamp(28px,4vw,48px)}
.bld-sec .head{margin-bottom:clamp(26px,4vw,44px)}
.bld-sec .head .lead{margin-inline:auto;max-width:720px}

/* Tinte oder Laser */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:800px){.duo{grid-template-columns:1fr}}
.duo-card{display:grid;grid-template-rows:auto 1fr;border-radius:var(--radius);overflow:hidden;background:var(--surface);border:1px solid var(--line-soft);color:var(--ink);text-decoration:none!important;transition:transform .25s,box-shadow .25s}
.duo-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.duo-vis{aspect-ratio:16/10;overflow:hidden;background:var(--bg-alt)}
.duo-vis img{width:100%;height:100%;object-fit:cover}
.duo-prod{background:radial-gradient(80% 80% at 50% 40%,#fff 0,#eceef2 80%);display:grid;place-items:center}
.duo-prod img{width:auto;height:92%;object-fit:contain;mix-blend-mode:multiply}
.duo-txt{padding:clamp(20px,3vw,30px);display:grid;gap:8px;align-content:start}
.duo-ink .eyebrow{color:var(--it-green)}

/* DocBox: Partner und GoBD */
.trust{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:14px;margin-top:14px}
@media (max-width:760px){.trust{grid-template-columns:1fr}}
.trust-card{border-radius:var(--radius);padding:clamp(22px,3.4vw,36px);display:grid;gap:14px;align-content:center;--glass-bg:var(--glass-bg-strong)}
.trust-card img{width:100%;max-width:520px;height:auto}
.trust-seal{border-radius:var(--radius);padding:clamp(18px,3vw,28px);display:grid;grid-template-columns:120px minmax(0,1fr);gap:18px;align-items:center;background:var(--surface)}
.trust-seal img{width:120px;height:auto;filter:drop-shadow(0 10px 18px rgba(240,100,40,.3));transform:rotate(-8deg)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .trust-card img,:root:not([data-theme="light"]) .partner-card img:not(.seal),:root:not([data-theme="light"]) .partner-logo{background:#fff;border-radius:12px;padding:10px 14px}}
:root[data-theme="dark"] .trust-card img,:root[data-theme="dark"] .partner-card img:not(.seal),:root[data-theme="dark"] .partner-logo{background:#fff;border-radius:12px;padding:10px 14px}

/* Über uns: Marke und Partner */
.brand-stage{display:grid;justify-items:center;gap:22px}
.brand-logo{border-radius:clamp(26px,3vw,40px);padding:clamp(26px,5vw,56px) clamp(28px,6vw,72px);width:min(760px,100%);--glass-bg:rgba(255,255,255,.72)}
.brand-logo img{display:block;width:100%;height:auto}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand-logo{--glass-bg:rgba(255,255,255,.92)}}
:root[data-theme="dark"] .brand-logo{--glass-bg:rgba(255,255,255,.92)}
.brand-stage .lead{max-width:620px}
.brand-sec{background:radial-gradient(60% 50% at 50% 0%,var(--accent-soft) 0,transparent 70%)}
.partner-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:14px}
@media (max-width:760px){.partner-grid{grid-template-columns:1fr}}
.partner-card{border-radius:var(--radius);padding:clamp(22px,3.4vw,36px);display:grid;gap:14px;justify-items:center;align-content:center;text-align:center;--glass-bg:var(--glass-bg-strong)}
.partner-card img{width:100%;max-width:460px;height:auto}
.partner-card img.seal{width:140px;filter:drop-shadow(0 10px 18px rgba(240,100,40,.3));transform:rotate(-8deg)}
.partner-logo{width:min(320px,80%);height:auto;margin-top:10px}

/* v1.3.0: Produktbilder immer vollständig zeigen */
.device-img{position:relative}
.device-img img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;padding:12px}
.device-img .noimg{position:absolute;inset:0}
.duo-prod{position:relative}
.duo-prod img{position:absolute;inset:5%;width:90%;height:90%;object-fit:contain}
.bld-sky{background:radial-gradient(70% 90% at 78% 8%,rgba(255,255,255,.95) 0,rgba(255,255,255,0) 60%),linear-gradient(180deg,#dbe6f0 0%,#eef3f8 45%,#fafbfc 74%,#f2f3f5 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .bld-sky{background:radial-gradient(70% 90% at 78% 8%,rgba(120,150,190,.28) 0,rgba(0,0,0,0) 60%),linear-gradient(180deg,#1b2433 0%,#141a24 55%,#101216 100%)}}
:root[data-theme="dark"] .bld-sky{background:radial-gradient(70% 90% at 78% 8%,rgba(120,150,190,.28) 0,rgba(0,0,0,0) 60%),linear-gradient(180deg,#1b2433 0%,#141a24 55%,#101216 100%)}
.bld-chip b{white-space:nowrap}
@media (max-width:760px){.bld{padding-left:0;padding-right:0}.bld-img{width:175%;max-width:none;margin-left:-68%}}
.pd-img{position:relative}
.pd-img img{position:absolute;inset:0;width:100%;height:100%;max-height:none;object-fit:contain;padding:28px}
.ph-product{position:relative}
.ph-product img{position:absolute;inset:6%;width:88%;height:88%;max-height:none;object-fit:contain}

/* ================= v1.4.0 ================= */
/* Firmensitz als Foto */
.bld{padding:0;aspect-ratio:21/9;background:var(--bg-alt);box-shadow:0 34px 80px -40px rgba(0,0,0,.45)}
.bld-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;filter:none}
.bld::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));pointer-events:none}
.bld-chip{z-index:1}
@media (max-width:760px){.bld{aspect-ratio:4/3;padding:0}}

/* Über uns: Gründer */
.founder{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(28px,6vw,80px);align-items:center}
@media (max-width:760px){.founder{grid-template-columns:1fr}}
.founder-photo{position:relative;margin:0;border-radius:clamp(24px,3vw,36px);overflow:hidden;aspect-ratio:4/5;max-width:440px;width:100%;box-shadow:0 34px 70px -34px rgba(0,0,0,.45);justify-self:center}
.founder-photo img{width:100%;height:100%;object-fit:cover}
.founder-photo figcaption{position:absolute;left:14px;right:14px;bottom:14px;padding:12px 16px;border-radius:18px;color:var(--ink)}
.founder-photo figcaption b{display:block;font-size:17px;letter-spacing:-.02em}
.founder-photo figcaption small{display:block;font-size:13px;color:var(--ink-2)}
.founder-txt .lead{max-width:560px}

/* DocBox: roter Faden */
.db-scroll{margin-top:28px;font-size:14px;color:#a1a1a6}
.chapnav a{display:inline-flex;align-items:center;gap:6px}
.chapnav a span{font-size:11px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.chapnav a.on{color:var(--ink);font-weight:600}
.chapnav a.on span{color:var(--brand)}
.chapnav .subnav-in{position:relative}
.chapnav-bar{position:absolute;left:18px;right:18px;bottom:4px;height:2px;border-radius:2px;background:var(--line-soft);overflow:hidden;pointer-events:none}
.chapnav-bar i{display:block;height:100%;width:100%;background:var(--brand);transform-origin:0 50%;transform:scaleX(0)}
.faden{position:relative;--fx:max(20px,calc((100vw - var(--maxw)) / 2 - 36px))}
.faden-track{position:absolute;top:0;bottom:0;left:var(--fx);width:3px;margin-left:-1.5px;background:var(--line-soft);z-index:3;pointer-events:none;border-radius:3px}
.faden-track i{position:absolute;inset:0;background:linear-gradient(180deg,var(--brand),var(--accent));transform-origin:50% 0;transform:scaleY(0);border-radius:3px}
.chap{position:relative;scroll-margin-top:110px}
.faden-dot{position:absolute;left:var(--fx);top:clamp(64px,10vw,120px);transform:translate(-50%,6px);z-index:4;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums;background:var(--surface);color:var(--muted);border:2px solid var(--line-soft);transition:background .35s,color .35s,border-color .35s,box-shadow .35s}
.faden-dot.on{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 0 0 6px color-mix(in srgb,var(--brand) 18%,transparent)}
@media (max-width:1239px){.faden-track,.faden-dot{display:none}}
.chap-head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.chap-head.center{margin-inline:auto;text-align:center}
.chap-head>*+*{margin-top:14px}
.chap-n{display:block;font-size:clamp(44px,6vw,72px);font-weight:700;letter-spacing:-.05em;line-height:.9;color:var(--brand);font-variant-numeric:tabular-nums}
.chap-head .eyebrow{margin-top:10px}
.chap-intro{align-items:center}
.chap-intro .chap-head{margin-bottom:0}
.chap-photo{border-radius:28px;overflow:hidden;aspect-ratio:4/3;box-shadow:0 30px 70px -35px rgba(0,0,0,.45)}
.chap-photo img{width:100%;height:100%;object-fit:cover}
.db-stat-l{margin:24px 0 0;max-width:460px;border-top:1px solid var(--line-soft)}
.db-stat-l b{color:var(--brand)}
.db-stat-l span{color:var(--muted)}
.sub-head{max-width:760px;margin:clamp(56px,8vw,96px) 0 clamp(22px,3vw,34px)}
.sub-head>*+*{margin-top:14px}
.chap-next{display:flex;flex-direction:column;gap:4px;max-width:640px;margin:clamp(40px,6vw,72px) auto 0;padding:18px 24px 18px 56px;position:relative;border-radius:20px;background:var(--surface);border:1px solid var(--line-soft);color:var(--ink);text-decoration:none!important;transition:transform .25s,box-shadow .25s}
.section.alt .chap-next{background:var(--bg)}
.dark .chap-next{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#f5f5f7}
.chap-next::before{content:"";position:absolute;left:22px;top:50%;width:18px;height:18px;margin-top:-9px;border-radius:50%;background:var(--brand) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 5v10M5.5 10.5 10 15l4.5-4.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.chap-next span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--brand)}
.chap-next b{font-size:17px;font-weight:600;letter-spacing:-.01em}
.chap-next:hover{transform:translateY(-2px);box-shadow:var(--shadow)}

/* Scrollytelling: der Weg einer Rechnung */
.story{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,5vw,72px);align-items:start}
.story-sticky{position:sticky;top:130px}
.story-steps{display:grid;gap:0;padding-bottom:10vh}
.story-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:12px;padding:24px 0 24px 22px;border-left:3px solid var(--line-soft);opacity:.38;transition:opacity .4s,border-color .4s}
.story-step.on{opacity:1;border-left-color:var(--brand)}
.story-step p{color:var(--ink-2)}
.story-n{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow)}
.story-n .ico{background:none;width:auto;height:auto}
.story-step.on .story-n{background:var(--brand);color:#fff}
.story-step.on .story-n .ico,.story-step.on .story-n svg{color:#fff}
.story-prog{display:flex;gap:6px;justify-content:center;margin-top:16px}
.story-prog i{width:26px;height:4px;border-radius:4px;background:var(--line);transition:background .3s,width .3s}
.story-prog i.on{background:var(--brand)}
.story-prog i.now{width:44px}
@media (max-width:860px){
  .story{grid-template-columns:1fr;gap:0}
  .story-sticky{top:124px;z-index:5;padding:10px 0 12px;background:linear-gradient(180deg,var(--bg-alt) 88%,transparent)}
  .story-step{min-height:58vh;padding-left:16px}
  .story-prog{margin-top:10px}
}

.doc-stage{position:relative;aspect-ratio:5/4;border-radius:clamp(22px,3vw,34px);background:radial-gradient(90% 80% at 20% 10%,var(--accent-soft) 0,transparent 60%),var(--surface);border:1px solid var(--line-soft);box-shadow:0 30px 70px -40px rgba(0,0,0,.35);overflow:hidden;font-size:14px}
@media (max-width:860px){.doc-stage{aspect-ratio:auto;height:min(44vh,330px);font-size:12px}}
.ds-doc{position:absolute;left:6%;top:9%;width:40%;height:78%;background:#fff;color:#1d1d1f;border-radius:14px;box-shadow:0 18px 40px -18px rgba(0,0,0,.35);padding:5% 5% 0;overflow:hidden;transition:transform .6s cubic-bezier(.2,.7,.2,1),box-shadow .5s}
.ds-doc-top b{display:block;font-size:1.25em;letter-spacing:-.02em}
.ds-doc-top span{display:block;font-size:.8em;color:#6e6e73}
.ds-lines{display:grid;gap:9%;margin-top:14%}
.ds-lines{gap:.7em}
.ds-lines i{display:block;height:.45em;border-radius:4px;background:#d9dbe1;transition:background .5s}
.ds-lines i:nth-child(2){width:80%}.ds-lines i:nth-child(4){width:65%}.ds-lines i:nth-child(6){width:85%}.ds-lines i:nth-child(7){width:50%}
.ds-sum{position:absolute;left:10%;right:10%;bottom:9%;display:flex;justify-content:space-between;border-top:1px solid #e3e4e8;padding-top:.6em;font-size:.85em}
.ds-beam{position:absolute;left:0;right:0;top:0;height:18%;background:linear-gradient(180deg,rgba(226,0,26,0),rgba(226,0,26,.28),rgba(226,0,26,0));opacity:0}
.ds-tag{position:absolute;right:6%;top:4%;padding:.3em .7em;border-radius:999px;font-size:.72em;font-weight:700;display:inline-flex;align-items:center;gap:.3em;opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s}
.ds-ocr{background:#e8f5ec;color:#1f8f4e}
.ds-lock{top:auto;bottom:22%;background:#1d1d1f;color:#fff}
.ds-lock svg{width:1.1em;height:1.1em}
.ds-stamp{position:absolute;left:14%;top:46%;padding:.25em .8em;border:3px solid #e2001a;color:#e2001a;border-radius:8px;font-weight:800;font-size:1.3em;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-14deg) scale(1.6);opacity:0;transition:opacity .35s,transform .45s cubic-bezier(.3,1.5,.5,1)}
.ds-p{position:absolute;left:52%;right:5%;top:50%;transform:translate(16px,-50%);opacity:0;transition:opacity .45s,transform .55s cubic-bezier(.2,.7,.2,1);display:grid;gap:.8em;pointer-events:none}
.ds-k{font-size:.72em;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent)}
.ds-src{display:grid;gap:.5em}
.ds-src span{display:flex;align-items:center;gap:.6em;padding:.6em .8em;border-radius:12px;background:var(--bg-alt);font-weight:600;animation:dsin 2.4s ease-in-out infinite}
.ds-src span:nth-child(2){animation-delay:.3s}.ds-src span:nth-child(3){animation-delay:.6s}.ds-src span:nth-child(4){animation-delay:.9s}
.ds-src svg,.ds-pill svg,.ds-route svg,.ds-folder svg,.ds-q svg{width:1.3em;height:1.3em;flex:none;color:var(--accent)}
@keyframes dsin{0%,100%{transform:translateX(0)}50%{transform:translateX(-6px)}}
.ds-ocrtxt{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.82em;line-height:1.55;color:var(--ink-2);background:var(--bg-alt);padding:.8em;border-radius:12px}
.ds-ocrtxt mark{background:var(--accent-soft);color:var(--accent);border-radius:3px;padding:0 .15em}
.ds-pill{justify-self:start;display:inline-flex;align-items:center;gap:.4em;padding:.35em .8em;border-radius:999px;background:var(--ok-soft);color:var(--ok);font-weight:700;font-size:.85em}
.ds-pill svg{color:var(--ok)}
.ds-fields{margin:0;display:grid;gap:.45em}
.ds-fields div{display:grid;gap:.1em;padding:.5em .75em;border-radius:12px;background:var(--bg-alt);border-left:3px solid var(--brand)}
.ds-fields dt{font-size:.72em;color:var(--muted)}
.ds-fields dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.ds-route{list-style:none;margin:0;padding:0;display:grid;gap:.5em}
.ds-route li{display:flex;align-items:center;gap:.7em;padding:.6em .8em;border-radius:12px;background:var(--bg-alt);opacity:.6}
.ds-route li b{display:block}.ds-route li small{display:block;color:var(--muted);font-size:.8em}
.ds-route li.done{opacity:1}
.ds-route li.now{opacity:1;background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.ds-folder{display:flex;align-items:center;gap:.7em;padding:.8em;border-radius:14px;background:var(--bg-alt)}
.ds-folder b{display:block}.ds-folder small{display:block;color:var(--muted);font-size:.8em}
.ds-seal{width:38%;max-width:120px;justify-self:center;transform:rotate(-8deg);filter:drop-shadow(0 10px 18px rgba(240,100,40,.3))}
.ds-q{display:flex;align-items:center;gap:.6em;padding:.7em 1em;border-radius:999px;background:var(--bg-alt);border:1px solid var(--line)}
.ds-typed{font-weight:600}
.ds-typed i{display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.ds-hit{display:grid;gap:.15em;padding:.75em .9em;border-radius:12px;background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.ds-hit small{color:var(--muted);font-size:.8em}
.ds-note{position:absolute;left:6%;bottom:3.5%;font-size:.7em;color:var(--muted)}

/* Zustände je Station (Klassen p0 bis p5 werden kumulativ gesetzt) */
.doc-stage[data-step="0"] .ds-p0,.doc-stage[data-step="1"] .ds-p1,.doc-stage[data-step="2"] .ds-p2,
.doc-stage[data-step="3"] .ds-p3,.doc-stage[data-step="4"] .ds-p4,.doc-stage[data-step="5"] .ds-p5{opacity:1;transform:translate(0,-50%)}
.doc-stage[data-step="0"] .ds-doc{transform:translateX(-8%) rotate(-4deg) scale(.94)}
.doc-stage[data-step="1"] .ds-beam{opacity:1;animation:beam 1.8s ease-in-out infinite}
@keyframes beam{0%{top:-18%}100%{top:100%}}
.doc-stage.p1 .ds-ocr{opacity:1;transform:none}
.doc-stage.p1 .ds-lines i{background:#c4c7d0}
.doc-stage.p2 .ds-lines i:nth-child(1),.doc-stage.p2 .ds-lines i:nth-child(3),.doc-stage.p2 .ds-lines i:nth-child(5){background:color-mix(in srgb,#e2001a 45%,#fff)}
.doc-stage.p3 .ds-stamp{opacity:1;transform:rotate(-14deg) scale(1)}
.doc-stage.p4 .ds-lock{opacity:1;transform:none}
.doc-stage[data-step="4"] .ds-doc{transform:scale(.94);box-shadow:0 0 0 3px #1d1d1f,0 18px 40px -18px rgba(0,0,0,.35)}
.doc-stage[data-step="5"] .ds-doc{box-shadow:0 0 0 3px #e2001a,0 18px 40px -18px rgba(0,0,0,.35)}
@media (max-width:860px){.ds-doc{left:5%;width:40%;top:10%;height:80%;padding:4% 4% 0}.ds-p{left:50%;right:4%}.ds-seal{display:none}.ds-ocrtxt{font-size:.78em;padding:.6em}.ds-src span{padding:.4em .6em}.ds-fields div{padding:.35em .6em}.ds-route li{padding:.4em .6em}}
.story-vis{align-self:stretch}
@media (max-width:860px){
  .story{display:block}
  .story-vis{position:sticky;top:122px;z-index:5;padding:8px 0 10px;background:linear-gradient(180deg,var(--bg-alt) 90%,rgba(0,0,0,0))}
  .story-sticky{position:static;padding:0;background:none}
  .doc-stage{height:min(36vh,290px)}
  .story-step{min-height:52vh}
}
@media (max-width:860px){.story-vis{background:var(--bg-alt);box-shadow:0 12px 16px -12px rgba(0,0,0,.12)}.story-prog{margin-top:8px}}
.bld-photo{object-position:50% 28%}

/* ================= v1.5.0: Story-Stil für alle Bereiche ================= */
.wrap-in{max-width:calc(var(--maxw) - 2 * var(--gutter));margin-inline:auto}
.section-s>.faden-dot{top:clamp(44px,7vw,80px)}
.chap-n-l{color:var(--brand);font-size:clamp(40px,5vw,60px);margin-bottom:-4px}
.tile-dark .chap-n-l{color:#ff5a6a}
.mq-sec{padding-block:clamp(10px,2vw,20px)}
.xstage .st-p{position:absolute;inset:0;opacity:0;transform:translateY(18px) scale(.985);transition:opacity .5s,transform .6s cubic-bezier(.2,.7,.2,1);pointer-events:none}
.xstage[data-step="0"] .st-p0,.xstage[data-step="1"] .st-p1,.xstage[data-step="2"] .st-p2,.xstage[data-step="3"] .st-p3,
.xstage[data-step="4"] .st-p4,.xstage[data-step="5"] .st-p5,.xstage[data-step="6"] .st-p6{opacity:1;transform:none}
.xs-light{background:radial-gradient(90% 80% at 50% 35%,#fff 0,#eceef2 78%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .xs-light{background:radial-gradient(90% 80% at 50% 35%,#fff 0,#dfe2e8 78%)}}
:root[data-theme="dark"] .xs-light{background:radial-gradient(90% 80% at 50% 35%,#fff 0,#dfe2e8 78%)}
/* Produkt-Panel */
.xs-prod{position:absolute;inset:0}
.xs-img{position:absolute;left:8%;right:8%;top:5%;bottom:30%}
.xs-img img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.xs-cap{position:absolute;left:5%;right:5%;bottom:5%;padding:.9em 1.1em;border-radius:18px;color:#1d1d1f;display:grid;gap:.35em;--glass-bg:rgba(255,255,255,.78)}
.xs-cap b{font-size:1.2em;letter-spacing:-.02em}
.xs-chips{display:flex;flex-wrap:wrap;gap:.4em}
.xs-chips span{font-size:.8em;padding:.25em .7em;border-radius:999px;background:rgba(0,0,0,.06);color:#424245;font-weight:600}
/* Kennzahl-Panel */
.xs-stat{position:absolute;inset:0}
.xs-statimg{position:absolute;right:5%;top:6%;width:52%;bottom:8%}
.xs-statimg img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.xs-stattxt{position:absolute;left:7%;bottom:10%;width:48%;display:grid;gap:.3em;color:#1d1d1f}
.xs-big{font-size:clamp(40px,6vw,76px);font-weight:700;letter-spacing:-.045em;line-height:1;color:#e2001a}
.xs-cap2{font-size:1em;color:#424245;line-height:1.35}
/* Icon-Panel */
.xs-icon{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:.5em;padding:8% 9%}
.xs-ico{width:clamp(56px,7vw,84px);height:clamp(56px,7vw,84px);border-radius:24px;display:grid;place-items:center;background:var(--brand);color:#fff;box-shadow:0 18px 36px -16px color-mix(in srgb,var(--brand) 70%,transparent);margin-bottom:.6em}
.xs-ico svg{width:55%;height:55%}
.xs-title{font-size:clamp(22px,2.6vw,32px);letter-spacing:-.03em;line-height:1.1}
.xs-list{list-style:none;margin:.6em 0 0;padding:0;display:grid;gap:.45em;width:100%}
.xs-list li{padding:.6em .9em;border-radius:12px;background:var(--bg-alt);font-weight:600;display:flex;align-items:center;gap:.6em}
.xs-list li::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--brand);flex:none}
/* Jahres-Panel */
.xs-year{position:absolute;inset:0}
.xs-yvis{position:absolute;inset:0;display:grid;place-items:center}
.xs-yphoto{position:absolute;inset:0}
.xs-yphoto img{width:100%;height:100%;object-fit:cover}
.xs-yphoto::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55))}
.xs-yicon{width:30%;aspect-ratio:1;border-radius:28%;display:grid;place-items:center;background:var(--brand);color:#fff;margin-bottom:22%}
.xs-yicon svg{width:52%;height:52%}
.xs-ylogo{width:62%;margin-bottom:22%;padding:1em 1.4em;background:#fff;border-radius:18px;box-shadow:0 16px 36px -18px rgba(0,0,0,.3)}
.xs-ylogo img{width:100%;height:auto;display:block}
.xs-ytxt{position:absolute;left:7%;right:7%;bottom:8%;display:grid;gap:.2em}
.xs-year:has(.xs-yphoto) .xs-big{color:#fff}
.xs-year:has(.xs-yphoto) .xs-cap2{color:rgba(255,255,255,.88)}
/* Miete: Rate baut sich auf */
.rate-stage{display:grid;place-items:center}
.rt-card{width:84%;background:var(--surface);border-radius:22px;border:1px solid var(--line-soft);box-shadow:0 26px 60px -34px rgba(0,0,0,.4);padding:1.2em 1.3em;display:grid;gap:.8em}
.rt-head b{display:block;font-size:1.25em;letter-spacing:-.02em}
.rt-list{list-style:none;margin:0;padding:0;display:grid;gap:.4em}
.rt-row{display:flex;align-items:center;gap:.7em;padding:.5em .7em;border-radius:12px;background:var(--bg-alt);opacity:.28;transform:translateX(-8px);transition:opacity .4s,transform .45s cubic-bezier(.2,.7,.2,1),background .4s}
.rt-row>svg{width:1.3em;height:1.3em;flex:none;color:var(--accent)}
.rt-row span{flex:1;min-width:0}
.rt-row b{display:block;font-size:.95em}
.rt-row small{display:block;font-size:.75em;color:var(--muted)}
.rt-ok{width:1.5em;height:1.5em;border-radius:50%;display:grid;place-items:center;background:var(--line);color:#fff;transition:background .3s}
.rt-ok svg{width:70%;height:70%}
.rate-stage.p0 .r0,.rate-stage.p1 .r1,.rate-stage.p2 .r2,.rate-stage.p3 .r3,.rate-stage.p4 .r4,.rate-stage.p5 .r5{opacity:1;transform:none}
.rate-stage.p0 .r0 .rt-ok,.rate-stage.p1 .r1 .rt-ok,.rate-stage.p2 .r2 .rt-ok,.rate-stage.p3 .r3 .rt-ok,.rate-stage.p4 .r4 .rt-ok,.rate-stage.p5 .r5 .rt-ok{background:var(--ok)}
.rate-stage[data-step="0"] .r0,.rate-stage[data-step="1"] .r1,.rate-stage[data-step="2"] .r2,.rate-stage[data-step="3"] .r3,.rate-stage[data-step="4"] .r4,.rate-stage[data-step="5"] .r5{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.rt-foot{display:flex;align-items:baseline;justify-content:space-between;gap:.6em;border-top:1px solid var(--line-soft);padding-top:.7em;opacity:.3;transition:opacity .4s}
.rt-foot b{font-size:1.4em;color:var(--brand);letter-spacing:-.02em}
.rate-stage.p5 .rt-foot{opacity:1}
@media (max-width:860px){
  .rate-stage{height:min(46vh,360px)}
  .rt-card{width:92%;padding:.8em;gap:.5em}.rt-row{padding:.3em .5em}.rt-row small{display:none}
  .xs-cap{padding:.6em .8em}.xs-img{bottom:34%}
  .xs-stattxt{width:56%}.xs-statimg{width:46%}
  .xs-list li{padding:.4em .7em}.xs-icon{padding:6% 7%}
}
.story-sticky{z-index:5}
@media (min-width:861px){.story-vis{position:relative;z-index:5}}
.xs-big{white-space:nowrap}
.xs-big-s{font-size:clamp(30px,4.2vw,54px)}
@media (max-width:860px){
  .story-vis{top:100px;padding-top:12px}
  .section:not(.alt) .story-vis{background:var(--bg)}
}
.chap .wrap-wide{position:relative;z-index:4}
.faden-dot{z-index:6}

/* ================= v1.6.0 ================= */
.db-badges{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px}
.db-badges span{padding:7px 14px;border-radius:999px;font-size:13px;font-weight:600;color:#f5f5f7;--glass-bg:rgba(255,255,255,.1);--glass-edge:rgba(255,255,255,.3)}
.award-line{margin:0}
.award{display:inline-flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border-radius:999px;background:linear-gradient(135deg,#f7d774,#e2a93b);color:#3b2600;font-weight:700;font-size:14px;box-shadow:0 8px 20px -10px rgba(180,120,20,.7)}
.award svg{width:18px;height:18px;background:#fff;border-radius:50%;padding:2px;color:#b07a10}
.hero-points{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:10px}
.hero-points li{display:flex;align-items:center;gap:12px}
.hero-points li>svg{width:36px;height:36px;padding:8px;border-radius:12px;background:var(--accent-soft);color:var(--accent);flex:none}
.hero-points b{display:block;font-size:16px;letter-spacing:-.01em}
.hero-points small{display:block;font-size:13px;color:var(--muted)}
.rate-stage.p6 .r6{opacity:1;transform:none}
.rate-stage.p6 .r6 .rt-ok{background:var(--ok)}
.rate-stage[data-step="6"] .r6{background:var(--accent-soft);box-shadow:inset 0 0 0 2px var(--brand)}
.rate-stage.p5 .rt-foot{opacity:.3}
.rate-stage.p6 .rt-foot{opacity:1}
.rt-list{gap:.32em}
@media (max-width:860px){.rate-stage{height:min(50vh,390px)}.rt-row{padding:.25em .5em}.rt-head b{font-size:1.05em}}
.btn-tv{background:#0e8ee9;color:#fff}
.btn-tv:hover{background:#0b78c6;color:#fff;text-decoration:none}
.btn-tv svg{width:16px;height:16px}
.pcard-wide{grid-column:1/-1;aspect-ratio:auto;height:clamp(220px,26vw,340px)}
.pcard-wide img{object-position:50% 60%}
.xs-photo{position:absolute;inset:0}
.xs-photo>img{width:100%;height:100%;object-fit:cover}
.xs-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 40%,rgba(0,0,0,.6))}
.xs-photo .xs-ptxt{position:absolute;left:6%;right:6%;bottom:7%;z-index:1;display:grid;gap:.25em;color:#fff}
.xs-photo .ds-k{color:#ffb3bb}
.xs-photo b{font-size:clamp(20px,2.4vw,30px);letter-spacing:-.02em;line-height:1.15}

/* v1.6 Bildnachweise */
.src-list{list-style:none;padding:0;margin:18px 0 8px;display:grid;gap:12px}
.src-list li{display:flex;gap:16px;align-items:center;padding:12px;border-radius:16px;background:var(--bg-alt);margin:0}
.src-list img{width:120px;height:80px;object-fit:cover;border-radius:10px;flex:none;background:#fff}
.src-list img.contain{object-fit:contain;padding:8px}
.src-list div{display:flex;flex-direction:column;gap:3px;min-width:0}
.src-list b{color:var(--ink);font-size:16px}
.src-list span{font-size:14px;color:var(--ink-2)}
.src-links{padding-left:20px}
.src-links li{font-size:15px}
@media (max-width:560px){.src-list li{align-items:flex-start}.src-list img{width:84px;height:64px}}

/* v1.6 Cookie-Einstellungen */
.consent{position:fixed;left:var(--gutter);right:var(--gutter);bottom:16px;z-index:200;display:none;justify-content:center;pointer-events:none}
.consent.show{display:flex}
.consent-in{pointer-events:auto;width:100%;max-width:760px;max-height:calc(100vh - 110px);overflow:auto;background:rgba(255,255,255,.95);-webkit-backdrop-filter:blur(24px) saturate(185%);backdrop-filter:blur(24px) saturate(185%);box-shadow:var(--glass-shadow),0 20px 60px -20px rgba(0,0,0,.35);border-radius:24px;padding:20px 22px}
.consent h2{font-size:18px;margin:0 0 6px}
.consent p{font-size:14px;color:var(--ink-2);margin:0 0 14px}
.consent-list{list-style:none;padding:0;margin:0 0 14px;display:grid;gap:8px}
.consent-row{display:flex;gap:14px;align-items:center;justify-content:space-between;background:var(--bg);border-radius:14px;padding:12px 14px;cursor:pointer;position:relative}
.consent-row span{display:flex;flex-direction:column;gap:2px}
.consent-row b{font-size:15px}
.consent-row small{font-size:13px;color:var(--muted);line-height:1.4}
.consent-sw{position:absolute;opacity:0;width:1px;height:1px}
.consent-row i{flex:none;width:44px;height:26px;border-radius:99px;background:var(--line);position:relative;transition:background .2s}
.consent-row i::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .2s}
.consent-sw:checked+i{background:var(--ok)}
.consent-sw:checked+i::after{transform:translateX(18px)}
.consent-sw:disabled+i{opacity:.6}
.consent-sw:focus-visible+i{outline:2px solid var(--accent);outline-offset:2px}
.consent-btns{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.consent-btns .btn{white-space:nowrap}
.consent-btns [hidden]{display:none}
@media (max-width:560px){.consent{bottom:10px}.consent-in{padding:16px}.consent-btns .btn{flex:1 1 auto;justify-content:center}}
.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;text-decoration:none}
.linklike:hover{text-decoration:underline}
/* v1.6: sieben Bausteine passen in die Bühne */
.rate-stage .rt-card{gap:.6em;padding:1em 1.2em}
.rate-stage .rt-list{gap:.3em}
.rate-stage .rt-row{padding:.42em .7em}
.rate-stage .rt-row small{display:none}

/* ================= v1.7.0: SEO-Bausteine ================= */
.glance-sec{padding-block:0 clamp(12px,2vw,24px)}
.glance{max-width:860px;background:var(--bg-alt);border-radius:var(--radius);padding:clamp(20px,3vw,30px) clamp(22px,3.4vw,36px);border-left:4px solid var(--brand)}
.glance-h{font-size:13px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.glance ul{margin:0;padding-left:20px;display:grid;gap:6px}
.glance li{color:var(--ink-2);font-size:16px}
.art-meta{font-size:14px;color:var(--muted);margin-top:14px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(32px,5vw,64px);align-items:start}
.art{max-width:72ch}
.art h2{font-size:clamp(22px,2.6vw,28px);margin-top:44px;margin-bottom:12px;scroll-margin-top:110px}
.art table{font-size:15px}
.art .tbl-wrap{margin:8px 0 16px}
.art ol{padding-left:22px}
.art ol li{margin-bottom:8px;color:var(--ink-2)}
.art .checks{margin-bottom:16px}
.art .faq{margin-top:8px}
.answer{background:var(--accent-soft);border-radius:var(--radius);padding:clamp(20px,3vw,28px);margin-bottom:12px}
.answer p:last-child{margin:0;color:var(--ink);font-size:17px;line-height:1.55}
.art-side{position:sticky;top:110px;display:grid;gap:16px}
.toc{background:var(--bg-alt);border-radius:18px;padding:18px 20px}
.toc ol{margin:0;padding-left:20px;display:grid;gap:6px;font-size:14px}
.toc a{color:var(--ink-2)}
.side-cta{background:var(--bg-alt);border-radius:18px;padding:18px 20px;display:grid;gap:12px}
.side-cta p{margin:0;font-size:15px;color:var(--ink-2)}
.side-cta .btn-row{display:grid;gap:8px}
.side-cta .btn{justify-content:center}
@media (max-width:960px){.art-grid{grid-template-columns:1fr}.art-side{position:static}.toc{display:none}}
.art-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
@media (max-width:980px){.art-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.art-cards{grid-template-columns:1fr}}
.art-card{background:var(--surface);border:1px solid var(--line-soft);border-radius:var(--radius);padding:clamp(22px,3vw,32px);display:flex;flex-direction:column;gap:10px;color:var(--ink);text-decoration:none!important;transition:transform .25s,box-shadow .25s}
.alt .art-card{border-color:transparent}
.art-card:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.art-card .eyebrow{margin:0}
.art-card h2,.art-card h3{margin:0}
.art-card p{margin:0;color:var(--ink-2);flex:1}
.region-line{margin-top:clamp(28px,4vw,40px);display:flex;gap:10px;align-items:flex-start;color:var(--ink-2);font-size:16px}
.region-line svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}
.rel-links{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px;margin-top:14px}
.rel-link{display:flex;flex-direction:column;gap:2px;padding:14px 16px;border-radius:14px;background:var(--bg-alt);color:var(--ink);text-decoration:none!important}
.alt .rel-link{background:var(--surface)}
.rel-link span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em}
.rel-link b{font-size:15px}
.rel-link:hover b{color:var(--accent)}
.tile-link{color:var(--ink);text-decoration:none!important;transition:transform .25s}
.tile-link:hover{transform:translateY(-3px)}
.glance-sec{padding-block:clamp(24px,3.4vw,40px) 0}
.page-hero+.glance-sec{padding-top:0}
.region-line{display:block}
.region-line svg{display:inline-block;vertical-align:-4px;margin-right:6px}
.reg-faq .faq{margin-inline:0}
@media (max-width:960px){.art-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:600px){.h1,.h2,.art h2{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}}

/* v1.7 Mobil: größere Tippflächen, lesbare Hinweise, kompakter Footer */
@media (max-width:760px){
  .footer{font-size:15px}
  .footer ul{gap:0}
  .footer ul a{display:block;padding:9px 0}
  .f-contact a{display:inline-block;padding:6px 0}
  .f-bottom{flex-direction:column;gap:0}
  .f-bottom a,.f-bottom .linklike{display:inline-block;padding:9px 0}
  .crumbs{font-size:14px;margin-bottom:10px}
  .crumbs a{display:inline-block;padding:8px 0}
  .link-arrow{padding-block:8px}
}
@media (max-width:480px){
  .f-grid{grid-template-columns:1fr 1fr;gap:22px 16px}
  .f-contact{grid-column:1/-1}
}
@media (max-width:860px){
  .ds-note{font-size:11px;left:5%;right:5%;bottom:2.5%;line-height:1.3}
  .doc-stage .ds-k,.doc-stage dt,.doc-stage small,.doc-stage .ds-tag,.doc-stage mark,.doc-stage .ds-ocrtxt{font-size:max(.8em,10px)}
}
/* v1.7 Lesbarkeit: inaktive Stationen kräftiger, Links im Fließtext unterstrichen, dunkleres Grün für Text */
.story-step{opacity:.5}
@media (max-width:860px){.story-step{opacity:.62}}
.story-step.on{opacity:1}
main p a:not(.btn):not(.link-arrow),.prose li a,.legal li a,.ans a,.src-links a,.footer .tiny a,.consent p a{text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:1px}
.duo-ink .eyebrow,.bx-tip .bx-kicker,.badge-ink{color:#007a2e}
/* v1.7 Mobil: Vergleichstabellen als gestapelte Karten */
@media (max-width:600px){
  .cmp{min-width:0;font-size:15px}
  .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tr{display:block;padding:12px 0;border-bottom:1px solid var(--line-soft)}
  .cmp th,.cmp td{display:block;padding:3px 0;border:0}
  .cmp tbody th{font-weight:600;color:var(--ink);padding-bottom:6px}
  .cmp td[data-label]::before{content:attr(data-label) ": ";font-weight:600;color:var(--muted)}
}