/* S&I Solutions – Bereichsseiten v11 (Gebäudesicherheit & Reparaturservice)
   Schrift: Inter (lokal, siehe site-theme.css), helle Silbergrau-Flächen. */

:root{
  --ink:#14181c;--ink-2:#39424a;--muted:#5d666e;--paper:#f4f5f7;--paper-2:#eaecef;--card:#fff;--line:#e1e4e8;
  --dark:#1b1b1b;--dark-2:#262626;--glass:rgba(255,255,255,.08);--glass-line:rgba(255,255,255,.14);
  --accent:#12b5d3;--accent-2:#0a93b3;--accent-ink:#05697d;--accent-soft:#dff4f8;--accent-glow:rgba(18,181,211,.34);
  --grad-a:#79daff;--grad-b:#12b5d3;
  --ok:#3cc027;--warn:#f5a524;--alarm:#ff5a4e;
  --r-xl:32px;--r-lg:24px;--r-md:16px;--r-sm:12px;
  --shadow:0 1px 2px rgba(20,24,28,.04),0 18px 50px rgba(20,24,28,.08);
  --display:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;--body:Inter,system-ui,-apple-system,'Segoe UI',sans-serif;
}
body.sx[data-accent="energy"]{--accent:#3cc027;--accent-2:#2a9a1c;--accent-ink:#286a1a;--accent-soft:#e4f3dc;--accent-glow:rgba(60,192,39,.32);--grad-a:#c4ec9f;--grad-b:#3cc027}
body.sx[data-accent="repair"]{--accent:#9b6bff;--accent-2:#7c4ddb;--accent-ink:#6d3fb8;--accent-soft:#f0e8ff;--accent-glow:rgba(155,107,255,.34);--grad-a:#d9c4ff;--grad-b:#9b6bff}

body.sx{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.sx *,.sx *::before,.sx *::after{box-sizing:border-box}
:where(.sx) img{max-width:100%;display:block}
:where(.sx) a{color:inherit}
:where(.sx) button{font:inherit;color:inherit;cursor:pointer}
.sx h1,.sx h2,.sx h3,.sx h4{font-family:var(--display);margin:0;letter-spacing:-.019em;line-height:1.06;font-weight:750}
:where(.sx) p{margin:0}
.sx :focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:6px}
.sx .skip{position:absolute;left:-999px;top:8px;z-index:20000;background:#fff;padding:10px 14px;border-radius:10px}
.sx .skip:focus{left:calc(var(--site-rail,0px) + 12px)}
.sx .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.sx-progress{position:fixed;top:0;left:var(--site-rail,0);right:0;height:3px;z-index:900;pointer-events:none}
.sx-progress i{display:block;height:100%;width:100%;transform-origin:left;transform:scaleX(0);background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}

.wrap{width:100%;max-width:1180px;margin:0 auto;padding:0 clamp(18px,4vw,56px)}
.section{padding:clamp(72px,9vw,128px) 0}
.section.tight{padding:clamp(48px,6vw,80px) 0}
.section.white{background:#fff}
.section.dark{background:radial-gradient(1200px 500px at 80% -10%,rgba(18,181,211,.14),transparent 60%),linear-gradient(160deg,#0c0d0e 0%,#1d1f21 60%,#2a2c2e 100%);color:#fff}
body[data-accent="energy"] .section.dark{background:radial-gradient(1200px 500px at 80% -10%,rgba(60,192,39,.14),transparent 60%),linear-gradient(160deg,#0b0d0b 0%,#1b1e1b 60%,#282b28 100%)}
body[data-accent="energy"] .dark .pill,body[data-accent="energy"] .hero .pill{color:#e6f6dc}
body[data-accent="energy"] .checklist li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%232f7d1f' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
body[data-accent="repair"] .section.dark{background:radial-gradient(1200px 500px at 80% -10%,rgba(155,107,255,.16),transparent 60%),linear-gradient(160deg,#0c0c0e 0%,#1d1d21 60%,#2a2a2e 100%)}

/* ---------- Pills, Buttons ---------- */
.pill{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:600;letter-spacing:.01em}
.dark .pill,.hero .pill,.cta .pill{background:rgba(255,255,255,.08);color:#dff7fc;box-shadow:inset 0 0 0 1px var(--glass-line)}
body[data-accent="repair"] .dark .pill,body[data-accent="repair"] .hero .pill{color:#efe6ff}
.pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--accent-glow)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:54px;padding:14px 26px;border-radius:16px;font-weight:650;font-size:17px;text-decoration:none;border:0;transition:transform .25s ease,box-shadow .25s ease,background .25s ease;white-space:nowrap}
.btn svg{width:20px;height:20px;flex:none}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 20px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px var(--accent-glow)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.btn-ghost:hover{background:rgba(255,255,255,.16);transform:translateY(-2px)}
.btn-light{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1px var(--line)}
.btn-light:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--line),var(--shadow)}
.btn-sm{min-height:44px;padding:10px 18px;font-size:15px;border-radius:12px}
.actions{display:flex;flex-wrap:wrap;gap:14px}
.textlink{display:inline-flex;align-items:center;gap:8px;font-weight:650;color:var(--accent-ink);text-decoration:none}
.textlink:hover{text-decoration:underline;text-underline-offset:4px}
.textlink svg{width:18px;height:18px;flex:none}
.dark .textlink{color:var(--grad-a)}

/* ---------- Hero ---------- */
.hero{position:relative;overflow:hidden;color:#fff;background:linear-gradient(135deg,#000 0%,#262626 58%,#4d4d4d 100%);min-height:min(100dvh,940px);display:flex;align-items:center;padding:clamp(88px,10vw,120px) 0 clamp(72px,8vw,110px)}
.hero-mark{position:absolute;right:-6%;top:50%;width:min(52vw,760px);height:auto;transform:translateY(-50%);opacity:.09;pointer-events:none;user-select:none}
.hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(36px,5vw,72px);align-items:center}
.hero h1{font-size:clamp(40px,5.1vw,74px);font-weight:700;letter-spacing:-.025em;line-height:1.02;margin:22px 0 22px;text-wrap:balance}
.grad{background:linear-gradient(135deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero .lead{font-size:clamp(18px,1.5vw,21px);color:rgba(255,255,255,.72);max-width:560px;margin-bottom:34px}
.hero .actions{margin-bottom:34px}
.trust{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:600px}
.trust span{display:flex;align-items:center;gap:8px;padding:11px 12px;border-radius:12px;background:var(--glass);box-shadow:inset 0 0 0 1px var(--glass-line);font-size:14px;font-weight:500;color:rgba(255,255,255,.9);line-height:1.3}
.trust svg{width:16px;height:16px;color:var(--accent);flex:none}
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:14px;color:rgba(255,255,255,.55)}
.crumbs a{color:rgba(255,255,255,.75);text-decoration:none}
.crumbs a:hover{color:#fff}
.chapters{display:flex;gap:6px;margin-top:18px}
.chapters a{flex:1;min-width:0;display:block;text-decoration:none;color:rgba(255,255,255,.55);font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase}
.chapters a i{display:block;height:3px;border-radius:3px;background:rgba(255,255,255,.14);margin-bottom:8px}
.chapters a[aria-current] {color:#fff}
.chapters a[aria-current] i{background:linear-gradient(90deg,var(--grad-a),var(--grad-b))}
.chapters a:hover{color:#fff}

/* Glass panels */
.glass{background:var(--glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);box-shadow:inset 0 0 0 1px var(--glass-line),0 30px 80px rgba(0,0,0,.25);border-radius:var(--r-lg)}
.floater{position:absolute;display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:16px;background:rgba(255,255,255,.95);color:var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.08),0 12px 36px rgba(0,0,0,.18);font-size:14px;line-height:1.3;z-index:3}
.floater b{display:block;font-weight:650}
.floater small{color:var(--muted);font-size:12.5px}
.floater .ico{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink);flex:none}
.floater .ico svg{width:20px;height:20px}

/* ---------- Section heads & cards ---------- */
.head{max-width:760px;margin-bottom:clamp(36px,5vw,60px)}
.head.center{margin-left:auto;margin-right:auto;text-align:center}
.head h2{font-size:clamp(32px,4vw,54px);margin:18px 0 16px;text-wrap:balance}
.head p{font-size:19px;color:var(--muted)}
.dark .head p{color:rgba(255,255,255,.65)}
.split-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.split-head .head{margin:0}
.split-head .note{padding:22px 24px;border-radius:var(--r-lg);background:#fff;box-shadow:var(--shadow);color:var(--ink-2);font-size:16px}
.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.cards.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.card{position:relative;background:var(--card);border-radius:var(--r-xl);padding:clamp(24px,2.6vw,34px);box-shadow:var(--shadow);min-width:0}
.card h3{font-size:clamp(20px,1.7vw,24px);margin:18px 0 10px;letter-spacing:-.014em}
.card p{color:var(--muted);font-size:16px}
.num{display:inline-flex;align-items:center;justify-content:center;min-width:36px;height:30px;padding:0 10px;border-radius:999px;background:#eceef1;font-size:13px;font-weight:700;color:var(--ink-2);letter-spacing:.04em}
.icon-tile{width:54px;height:54px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 8px 20px var(--accent-glow)}
.icon-tile svg{width:26px;height:26px}
.dark .card{background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px var(--glass-line);color:#fff}
.dark .card p{color:rgba(255,255,255,.62)}
.dark .num{background:rgba(255,255,255,.1);color:#fff}
.checklist{list-style:none;padding:0;margin:18px 0 0;display:grid;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;font-size:15.5px;color:var(--ink-2)}
.checklist li::before{content:"";flex:none;width:18px;height:18px;margin-top:3px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%23067d94' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
body[data-accent="repair"] .checklist li::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%236d3fb8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.dark .checklist li{color:rgba(255,255,255,.8)}
.checklist.cons li::before{background:#f4ece4 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 10h8' fill='none' stroke='%23a2622a' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/12px no-repeat}
.photo{position:relative;border-radius:var(--r-xl);overflow:hidden;background:#ddd;box-shadow:var(--shadow)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo-credit{position:absolute;right:12px;bottom:10px;font-size:11px;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.5)}
.footnote{font-size:13.5px;color:var(--muted);margin-top:18px;max-width:780px}
.dark .footnote{color:rgba(255,255,255,.5)}

/* ---------- Segmented controls, ranges ---------- */
.seg{display:inline-flex;flex-wrap:wrap;gap:6px;padding:6px;border-radius:16px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px var(--glass-line)}
.seg button{border:0;background:transparent;color:rgba(255,255,255,.72);padding:10px 16px;border-radius:11px;font-weight:600;font-size:15px;min-height:44px;transition:background .2s,color .2s}
.seg button:hover{color:#fff}
.seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.2)}
.light-seg{background:#eaecef;box-shadow:none}
.light-seg button{color:var(--ink-2)}
.light-seg button:hover{color:var(--ink)}
.light-seg button[aria-pressed="true"]{background:#fff;color:var(--ink);box-shadow:0 4px 14px rgba(20,24,28,.1)}
.field{display:grid;gap:10px;margin-top:22px}
.field label,.field .label{display:flex;justify-content:space-between;gap:12px;font-size:15px;font-weight:600;color:rgba(255,255,255,.82)}
.field output{font-family:var(--display);font-weight:700;color:var(--grad-a)}
.sx input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;margin:-4px 0;outline-offset:2px;cursor:pointer;touch-action:pan-y;--track:rgba(255,255,255,.16)}
.sx input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--track) var(--p,50%))}
.sx input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--accent) var(--p,50%),var(--track) var(--p,50%))}
.sx input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-11px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px var(--accent-glow),0 2px 8px rgba(0,0,0,.3);cursor:grab}
.sx input[type=range]::-moz-range-thumb{width:28px;height:28px;border-radius:50%;background:#fff;border:0;box-shadow:0 0 0 6px var(--accent-glow);cursor:grab}
.light input[type=range]{--track:#dfe2e6}
.range-ends{display:flex;justify-content:space-between;font-size:13px;color:rgba(255,255,255,.45)}

/* ---------- Lab shell ---------- */
.lab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,3vw,44px);padding:clamp(20px,3vw,40px);border-radius:var(--r-xl);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--glass-line),0 40px 100px rgba(0,0,0,.35)}
.lab-controls{min-width:0}
.lab-controls h3{font-size:24px;margin-bottom:8px}
.lab-controls>p{color:rgba(255,255,255,.62);font-size:16px}
.lab-stage{position:relative;min-width:0;align-self:start;border-radius:var(--r-lg);background:#0f1113;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);overflow:hidden}
.readouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:22px}
.readout{padding:14px;border-radius:14px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);min-width:0}
.readout b{display:block;font-family:var(--display);font-size:clamp(18px,1.8vw,24px);letter-spacing:-.017em;line-height:1.15;color:#fff;overflow-wrap:anywhere}
.readout small{display:block;font-size:12.5px;color:rgba(255,255,255,.55);margin-top:4px;line-height:1.35}
.stage-label{position:absolute;left:14px;top:14px;z-index:2;font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:rgba(255,255,255,.6);background:rgba(0,0,0,.45);padding:5px 10px;border-radius:999px}
.notice{display:flex;gap:10px;align-items:flex-start;margin-top:16px;padding:12px 14px;border-radius:14px;font-size:14.5px;line-height:1.45;background:rgba(245,165,36,.12);color:#ffd79a;box-shadow:inset 0 0 0 1px rgba(245,165,36,.3)}
.notice.ok{background:rgba(60,192,39,.12);color:#b9f0ab;box-shadow:inset 0 0 0 1px rgba(60,192,39,.3)}
.notice svg{width:18px;height:18px;flex:none;margin-top:2px}

/* ---------- Security overview hero (house explorer) ---------- */
.explorer{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/2;background:#111;box-shadow:0 40px 100px rgba(0,0,0,.45),inset 0 0 0 1px rgba(255,255,255,.1)}
.explorer>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:filter .5s}
.explorer svg.layers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.explorer .layer{opacity:0;transition:opacity .5s ease}
.explorer[data-layer="video"] .layer-video,.explorer[data-layer="alarm"] .layer-alarm,.explorer[data-layer="access"] .layer-access,.explorer[data-layer="all"] .layer{opacity:1}
.explorer[data-layer]:not([data-layer="none"])>img{filter:brightness(.72) saturate(.9)}
.cone{fill:url(#coneGrad);stroke:rgba(121,218,255,.7);stroke-width:1.5}
.pulse-ring{fill:none;stroke:#ffb4ae;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
.door-glow{fill:rgba(18,181,211,.25);stroke:#79daff;stroke-width:2}
@keyframes ring{0%{transform:scale(.6);opacity:1}100%{transform:scale(2.4);opacity:0}}
.spot{position:absolute;z-index:2;transform:translate(-50%,-50%);width:44px;height:44px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center}
.spot::before{content:"";position:absolute;inset:8px;border-radius:50%;background:rgba(255,255,255,.95);box-shadow:0 0 0 6px rgba(255,255,255,.22),0 6px 18px rgba(0,0,0,.4);transition:transform .25s}
.spot::after{content:"";position:absolute;inset:8px;border-radius:50%;border:2px solid #fff;animation:spot 2.4s ease-out infinite}
.spot span{position:relative;font-size:13px;font-weight:700;color:var(--ink);font-family:var(--display)}
.spot:hover::before,.spot[aria-expanded="true"]::before{transform:scale(1.15);background:var(--accent)}
.spot[aria-expanded="true"] span,.spot:hover span{color:#fff}
@keyframes spot{0%{transform:scale(1);opacity:.9}100%{transform:scale(2.1);opacity:0}}
.spot-card{position:absolute;z-index:4;width:min(300px,78%);padding:18px 18px 16px;border-radius:18px;background:rgba(255,255,255,.97);color:var(--ink);box-shadow:0 20px 50px rgba(0,0,0,.35);font-size:14.5px;line-height:1.45}
.spot-card[hidden]{display:none}
.spot-card .k{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.spot-card h3{font-size:19px;margin:6px 0 6px;letter-spacing:-.011em}
.spot-card p{color:var(--ink-2)}
.spot-card a{margin-top:10px}
.spot-card .close{position:absolute;right:8px;top:8px;width:34px;height:34px;border:0;border-radius:50%;background:#eceef1;font-size:18px;line-height:1}
.explorer-wrap{position:relative}
.layer-bar{position:absolute;left:14px;right:14px;bottom:14px;z-index:3;display:flex;justify-content:center}
.spot-list,.spot-dots,.car-dots{display:none}
.m-hero-bg,.lead-m{display:none}
.seg small{font-size:inherit;font-weight:inherit}
.seg small .sep{font-style:normal}
.who-head{background:none!important;box-shadow:none!important;padding-top:0!important;padding-bottom:0!important}
.compare input{pointer-events:none}
.compare:focus-within .handle i{outline:3px solid var(--accent);outline-offset:3px}
.layer-bar .seg{background:rgba(10,12,14,.55);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.layer-bar .seg button{padding:8px 14px;font-size:14px;min-height:40px}

/* Pillars */
.pillars{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.pillar{position:relative;display:flex;flex-direction:column;min-height:520px;border-radius:var(--r-xl);overflow:hidden;color:#fff;text-decoration:none;background:#111;box-shadow:var(--shadow);isolation:isolate}
.pillar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.pillar::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,.05) 25%,rgba(0,0,0,.82) 78%)}
.pillar:hover img{transform:scale(1.05)}
.pillar .top{display:flex;justify-content:space-between;align-items:center;padding:22px 22px 0}
.pillar .step{font-family:var(--display);font-weight:700;font-size:14px;padding:6px 12px;border-radius:999px;background:rgba(255,255,255,.14);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.pillar .body{margin-top:auto;padding:26px}
.pillar h3{font-size:clamp(26px,2.4vw,34px);margin-bottom:8px}
.pillar p{color:rgba(255,255,255,.78);font-size:16px}
.pillar .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:650}
.pillar .go svg{width:18px;height:18px;transition:transform .25s}
.pillar:hover .go svg{transform:translateX(4px)}

/* Wizard / Check */
.wizard{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(20px,3vw,40px);align-items:start}
.q{padding:clamp(22px,3vw,34px);border-radius:var(--r-xl);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--glass-line)}
.q+.q{margin-top:16px}
.q legend{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.011em;padding:0;margin-bottom:6px}
.q fieldset{border:0;padding:0;margin:0;min-width:0}
.q .hint{font-size:14px;color:rgba(255,255,255,.55);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;width:100%;height:100%;margin:0;cursor:pointer}
.chip span{display:flex;align-items:center;gap:8px;min-height:44px;padding:10px 16px;border-radius:12px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font-size:15px;font-weight:550;transition:background .2s,box-shadow .2s,color .2s}
.chip input:checked+span{background:rgba(18,181,211,.18);box-shadow:inset 0 0 0 1.5px var(--accent);color:#fff}
body[data-accent="repair"] .chip input:checked+span{background:rgba(155,107,255,.2)}
.chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.light .chip span{background:#eef0f3;box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2)}
.light .chip input:checked+span{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--ink)}
.result{position:sticky;top:24px;padding:clamp(24px,3vw,34px);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(18,181,211,.16),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(121,218,255,.35)}
.result .k{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--grad-a)}
.result h3{font-size:clamp(24px,2.3vw,32px);margin:10px 0 10px}
.result>p{color:rgba(255,255,255,.7);font-size:16px}
.rec{display:grid;gap:10px;margin:20px 0 22px}
.rec a{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.07);text-decoration:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:background .2s}
.rec a:hover{background:rgba(255,255,255,.12)}
.rec a b{display:block;font-weight:650}
.rec a small{display:block;color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.4}
.rec .n{font-family:var(--display);font-weight:700;font-size:14px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--accent);color:#06222d;flex:none}
.rec a[data-weight="low"]{opacity:.7}

/* Steps (process) */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;counter-reset:s;position:relative;margin-bottom:28px}
.steps.six{grid-template-columns:repeat(3,minmax(0,1fr))}
.step-card{background:#fff;border-radius:var(--r-lg);padding:26px;box-shadow:var(--shadow);min-width:0}
.step-card .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:20px}
.step-card .tag{font-size:12.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#eceef1;color:var(--ink-2)}
.step-card small{font-size:13px;color:var(--muted);font-weight:600}
.step-card h3{font-size:21px;margin-bottom:8px}
.step-card p{font-size:15.5px;color:var(--muted)}

/* Team */
.team{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(28px,5vw,70px);align-items:center}
.team-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.person{border-radius:var(--r-xl);overflow:hidden;background:#1f1f1f;color:#fff;box-shadow:var(--shadow)}
.person img{aspect-ratio:4/4.2;height:auto;object-fit:cover;object-position:top;width:100%}
.person div{padding:16px 18px 18px}
.person b{font-family:var(--display);font-size:18px;letter-spacing:-.011em;display:block}
.person small{color:rgba(255,255,255,.6);font-size:13.5px}

/* FAQ */
.faq{max-width:820px;margin:0 auto;display:grid;gap:12px}
.faq details{background:#fff;border-radius:20px;box-shadow:var(--shadow);overflow:hidden}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:22px 24px;font-weight:650;font-size:17px}
.faq summary::-webkit-details-marker{display:none}
.faq summary i{flex:none;width:32px;height:32px;border-radius:50%;background:#eceef1;display:grid;place-items:center;font-style:normal;font-size:20px;transition:transform .3s}
.faq details[open] summary i{transform:rotate(45deg);background:var(--accent-soft);color:var(--accent-ink)}
.faq .a{padding:0 24px 22px;color:var(--ink-2);font-size:16px}
.faq .a p+p{margin-top:10px}

/* CTA + next chapter */
.cta{position:relative;overflow:hidden;border-radius:var(--r-xl);padding:clamp(32px,5vw,64px);color:#fff;background:linear-gradient(135deg,#000 0%,#262626 58%,#4d4d4d 100%);display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:32px;align-items:center}
.cta h2{font-size:clamp(30px,3.6vw,50px);margin:16px 0 12px;text-wrap:balance}
.cta p{color:rgba(255,255,255,.7)}
.cta .actions{justify-content:flex-end}
.cta .hero-mark{opacity:.1;width:330px;right:-40px}
.next{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-radius:var(--r-xl);overflow:hidden;background:#fff;box-shadow:var(--shadow);text-decoration:none;margin-top:20px;min-height:260px}
.next .photo{border-radius:0;box-shadow:none;min-height:220px}
.next .txt{padding:clamp(26px,4vw,48px);display:flex;flex-direction:column;justify-content:center}
.next .k{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-ink)}
.next h3{font-size:clamp(26px,3vw,40px);margin:10px 0 10px}
.next p{color:var(--muted)}
.next .go{display:inline-flex;align-items:center;gap:8px;margin-top:18px;font-weight:650;color:var(--ink)}
.next .go svg{width:18px;height:18px;transition:transform .25s}
.next:hover .go svg{transform:translateX(5px)}

/* Footer */
.sx-footer{background:#111;color:rgba(255,255,255,.6);font-size:14px;padding:44px 0}
.sx-footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:18px}
.sx-footer nav{display:flex;flex-wrap:wrap;gap:18px}
.sx-footer a{color:rgba(255,255,255,.75);text-decoration:none}
.sx-footer a:hover{color:#fff}

/* ---------- Live view (video hero) ---------- */
.monitor{position:relative;border-radius:26px;padding:12px;background:linear-gradient(180deg,#2a2d30,#141618);box-shadow:0 40px 100px rgba(0,0,0,.5),inset 0 0 0 1px rgba(255,255,255,.1)}
.screen{position:relative;border-radius:16px;overflow:hidden;aspect-ratio:16/10;background:#000}
.screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease,transform 6s ease}
.screen img:not(.on){opacity:0}
.screen img.on{transform:scale(1.04)}
.screen .scan{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.osd{position:absolute;left:12px;right:12px;top:10px;display:flex;justify-content:space-between;font:600 12.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7);pointer-events:none}
.osd .rec{display:inline-flex;align-items:center;gap:6px}
.osd .rec::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--alarm);animation:blink 1.4s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
.motion-box{position:absolute;border:2px solid #7ee0f5;border-radius:6px;box-shadow:0 0 0 1px rgba(0,0,0,.3);opacity:0;transition:opacity .3s}
.motion-box.on{opacity:1}
.motion-box span{position:absolute;left:6px;top:6px;font:600 11px ui-monospace,Menlo,monospace;background:#7ee0f5;color:#062a33;padding:3px 6px;border-radius:4px;white-space:nowrap}
.cam-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
.cam-tabs button{border:0;border-radius:12px;padding:10px 8px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.7);font-size:13.5px;font-weight:600;min-height:44px;text-align:left;display:flex;align-items:center;gap:8px}
.cam-tabs button i{width:8px;height:8px;border-radius:50%;background:#3cc027;flex:none}
.cam-tabs button[aria-pressed="true"]{background:rgba(255,255,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(121,218,255,.5)}

/* Kamera-Planer v13 */
.cp{--cp-c:#79daff;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#16191c,#0f1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 50px 120px rgba(0,0,0,.45)}
.cp-k{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.cp-k output{white-space:nowrap;font:700 15px/1 var(--display);letter-spacing:-.006em;text-transform:none;color:#fff;font-variant-numeric:tabular-nums}
.cp-bar{display:flex;align-items:center;gap:16px;padding:14px 18px 14px 22px;border-bottom:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.cp-title{display:flex;align-items:center;gap:10px;font:700 15px var(--display);letter-spacing:-.006em;color:#fff}
.cp-live{width:8px;height:8px;border-radius:50%;background:#ff5a4e;box-shadow:0 0 0 4px rgba(255,90,78,.18);animation:cpLive 1.6s ease-in-out infinite}
@keyframes cpLive{50%{opacity:.35}}
.cp-meta{font:500 12.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.5);letter-spacing:.02em}
.cp-reset{margin-left:auto;display:inline-flex;align-items:center;gap:8px;min-height:38px;padding:0 14px;border:0;border-radius:99px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.75);font-size:13.5px;font-weight:600;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cp-reset:hover{background:rgba(255,255,255,.12);color:#fff}
.cp-main{display:grid;grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
.cp-plan{position:relative;margin:0;border-right:1px solid rgba(255,255,255,.07)}
.cp-plan svg{display:block;width:100%;height:auto;user-select:none;-webkit-user-select:none}
.cp-hint{position:absolute;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;padding:7px 12px;border-radius:99px;background:rgba(10,12,14,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12.5px;color:rgba(255,255,255,.75);pointer-events:none;transition:opacity .3s}
.cp.is-dragging .cp-hint{opacity:0}
.cp-hint svg{width:15px;height:15px;flex:none}
.cp-trees circle{fill:#18241b;stroke:#203126;stroke-width:1.5}
.cp-out[hidden]{display:none}
.cp-plan .cp-nb rect:nth-child(2){fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.16);stroke-dasharray:5 5}
.cp-plan text{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;fill:rgba(255,255,255,.4)}
.cp-plan .cp-nb text{fill:rgba(255,255,255,.3)}
.cp-hedge circle{fill:#1b2a1f;stroke:#22382a}
.cp-slab line{stroke:#171a1c;stroke-width:1.5}
.cp-bld rect{fill:#1d2125}
.cp-wall path{fill:none;stroke:#e9edf0;stroke-width:6;stroke-linejoin:round}
.cp-wall .cp-gdoor{stroke:rgba(233,237,240,.45);stroke-width:3;stroke-dasharray:6 5}
.cp-wall .cp-door{stroke:rgba(233,237,240,.6);stroke-width:1.5}
.cp-wall .cp-win{stroke:#79daff;stroke-width:3;opacity:.55}
.cp-plan .cp-lbl-b{font:700 14px var(--display);letter-spacing:.02em;text-transform:none;fill:rgba(255,255,255,.55)}
.cp-bound{stroke:rgba(255,255,255,.45);stroke-width:1.5;stroke-dasharray:10 6}
.cp-plan .cp-bound-t{font-size:10.5px;fill:rgba(255,255,255,.4)}
.cp-north circle{fill:rgba(10,12,14,.6);stroke:rgba(255,255,255,.25)}
.cp-north path{fill:#fff}
.cp-plan .cp-north text{fill:rgba(255,255,255,.6);font-size:11px}
.cp-scale path{fill:none;stroke:rgba(255,255,255,.6);stroke-width:2}
.cp-plan .cp-scale text{font-size:11px;fill:rgba(255,255,255,.55);text-transform:none}
.cp-band{stroke-width:1;transition:none}
.cp-band.cp-detect{fill:rgba(121,218,255,.1);stroke:rgba(121,218,255,.3)}
.cp-band.cp-observe{fill:rgba(121,218,255,.16);stroke:rgba(121,218,255,.4)}
.cp-band.cp-recognize{fill:rgba(121,218,255,.24);stroke:rgba(121,218,255,.55)}
.cp-band.cp-identify{fill:rgba(121,218,255,.42);stroke:rgba(121,218,255,.9)}
.cp-mount{fill:rgba(10,12,14,.8);stroke:rgba(255,255,255,.55);stroke-width:2;stroke-dasharray:3 3;cursor:pointer;transition:stroke .2s}
.cp-mount:hover{stroke:#fff;stroke-dasharray:none}
.cp-cam-dot{fill:#0b0c0d;stroke:var(--cp-c);stroke-width:3}
.cp-cam-lens{fill:var(--cp-c)}
.cp-handle{cursor:grab;touch-action:none}
.cp-axis{stroke:rgba(255,255,255,.5);stroke-width:1.5;stroke-dasharray:4 4;pointer-events:none;vector-effect:non-scaling-stroke}
.cp-rot-dot{fill:#fff;stroke:rgba(0,0,0,.25);stroke-width:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.5))}
.cp-rot-ic{fill:none;stroke:#0b0c0d;stroke-width:1.6;stroke-linecap:round;pointer-events:none}
.cp-handle.is-drag{cursor:grabbing}
.cp-dline{stroke:#fff;stroke-width:1.5;stroke-dasharray:2 5;stroke-linecap:round;opacity:.8}
.cp-dline.off{stroke:#ff8a80;opacity:.6}
.cp-person{cursor:grab;touch-action:none;outline:none}
.cp-person.is-drag{cursor:grabbing}
.cp-p-ring{fill:#fff;stroke:rgba(255,255,255,.35);stroke-width:8;paint-order:stroke;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:fill .2s}
.cp-p-ic{fill:#0b0c0d}.cp-p-ic2{fill:none;stroke:#0b0c0d;stroke-width:2.6;stroke-linecap:round}
.cp-person[data-lv=out] .cp-p-ring,.cp-person[data-lv=none] .cp-p-ring{fill:#ff8a80}
.cp-person:focus-visible .cp-p-ring{stroke:#79daff}
.cp-tag rect{fill:rgba(10,12,14,.85);stroke:rgba(255,255,255,.18)}
.cp-plan .cp-tag text{font:700 13px var(--display);letter-spacing:0;text-transform:none;fill:#fff;font-variant-numeric:tabular-nums}
.cp-view{display:flex;flex-direction:column;gap:14px;padding:18px 20px 20px;min-width:0}
.cp-vhead{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.cp-subject{padding:4px;border-radius:12px}
.cp-subject button{min-height:34px;padding:6px 12px;font-size:13px;border-radius:9px}
.cp-screen{position:relative;aspect-ratio:16/10;border-radius:16px;overflow:hidden;background:#050607;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.cp-screen canvas{display:block;width:100%;height:100%;filter:saturate(.82) contrast(1.06) brightness(.96)}
.cp-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px),radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.45))}
.cp-osd{position:absolute;z-index:2;font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.8);font-variant-numeric:tabular-nums}
.cp-tl{left:12px;top:12px;display:flex;align-items:center;gap:6px}.cp-tl i{width:7px;height:7px;border-radius:50%;background:#ff5a4e;animation:cpLive 1.6s ease-in-out infinite}
.cp-tr{right:12px;top:12px}.cp-bl{left:12px;bottom:12px}.cp-br{right:12px;bottom:12px;color:var(--cp-c)}
.cp-corners{position:absolute;inset:22px 22px;z-index:2;pointer-events:none;background:linear-gradient(#fff,#fff) left top/16px 1.5px,linear-gradient(#fff,#fff) left top/1.5px 16px,linear-gradient(#fff,#fff) right top/16px 1.5px,linear-gradient(#fff,#fff) right top/1.5px 16px,linear-gradient(#fff,#fff) left bottom/16px 1.5px,linear-gradient(#fff,#fff) left bottom/1.5px 16px,linear-gradient(#fff,#fff) right bottom/16px 1.5px,linear-gradient(#fff,#fff) right bottom/1.5px 16px;background-repeat:no-repeat;opacity:.55}
.cp-out{position:absolute;inset:0;z-index:3;display:grid;place-content:center;gap:4px;text-align:center;background:rgba(5,6,7,.55)}
.cp-out b{font:700 18px var(--display);color:#fff}.cp-out span{font-size:13px;color:rgba(255,255,255,.65)}
.cp-levels{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.cp-levels li{position:relative;padding:10px 8px 9px;border-radius:10px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .25s,box-shadow .25s}
.cp-levels li::before{content:"";display:block;height:3px;margin-bottom:8px;border-radius:2px;background:rgba(255,255,255,.12);transition:background .25s}
.cp-levels b{display:block;font-size:12.5px;font-weight:650;color:rgba(255,255,255,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cp-levels small{display:block;margin-top:2px;font-size:10.5px;color:rgba(255,255,255,.35);font-variant-numeric:tabular-nums}
.cp-levels li.ok::before{background:var(--cp-c)}
.cp-levels li.ok b{color:#fff}
.cp-levels li.cur{background:rgba(121,218,255,.1);box-shadow:inset 0 0 0 1px rgba(121,218,255,.45)}
.cp-verdict{margin:0;font-size:15px;line-height:1.5;color:rgba(255,255,255,.72)}
.cp-verdict b{display:block;margin-bottom:4px;font:700 19px var(--display);letter-spacing:-.011em;color:#fff}
.cp-verdict[data-lv=identify] b{color:var(--cp-c)}
.cp-verdict[data-lv=out] b,.cp-verdict[data-lv=none] b{color:#ff8a80}
.cp-controls{display:grid;grid-template-columns:auto auto repeat(3,minmax(0,1fr));gap:18px 26px;align-items:start;padding:20px 22px 6px;border-top:1px solid rgba(255,255,255,.07)}
.cp-ctl{display:grid;gap:10px;min-width:0}
.cp-ctl .seg{padding:4px;border-radius:12px;flex-wrap:nowrap}
.cp-ctl .seg button{min-height:38px;padding:7px 13px;font-size:14px;border-radius:9px;white-space:nowrap}
.cp-ctl input[type=range]{margin:-8px 0 -10px}
.cp-ctl .range-ends{font-size:11.5px}
.cp-ruler{padding:16px 22px 18px}
.cp-bar-wrap{position:relative;margin-top:12px}
.cp-scale-bar{display:flex;height:10px;border-radius:6px;overflow:hidden;background:rgba(255,255,255,.06)}
.cp-scale-bar i{display:block;height:100%;transition:width .25s ease}
.cp-scale-bar .cp-identify,.cp-legend .cp-identify i{background:rgba(121,218,255,.95)}
.cp-scale-bar .cp-recognize,.cp-legend .cp-recognize i{background:rgba(121,218,255,.62)}
.cp-scale-bar .cp-observe,.cp-legend .cp-observe i{background:rgba(121,218,255,.36)}
.cp-scale-bar .cp-detect,.cp-legend .cp-detect i{background:rgba(121,218,255,.18)}
.cp-pin{position:absolute;top:-6px;width:3px;height:22px;margin-left:-1.5px;border-radius:2px;background:#fff;box-shadow:0 0 0 3px rgba(11,12,13,.8);transition:left .15s ease}
.cp-pin[data-lv=out],.cp-pin[data-lv=none]{background:#ff8a80}
.cp-ticks{position:relative;height:18px;margin-top:6px;font:500 11px var(--body);color:rgba(255,255,255,.4);font-variant-numeric:tabular-nums}
.cp-ticks span{position:absolute;transform:translateX(-50%)}
.cp-ticks span:first-child{transform:none}.cp-ticks span:last-child{transform:translateX(-100%)}
.cp-ticks span:last-child::after{content:"\00a0m"}
.cp-ticks span{white-space:nowrap}
.cp-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 22px;margin:10px 0 0;padding:0;font-size:13px;color:rgba(255,255,255,.6)}
.cp-legend li{display:flex;align-items:center;gap:7px}
.cp-legend i{width:10px;height:10px;border-radius:3px}
.cp-legend b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
.cp-notice{margin:0 22px 22px}
.cp-notice b{font-weight:650}
@media (max-width:1180px){.cp-main{grid-template-columns:minmax(0,1fr)}.cp-plan{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.cp-view{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}.cp-vhead,.cp-levels{grid-column:1/-1}.cp-screen{grid-row:2}.cp-verdict{grid-row:2}.cp-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .cp{border-radius:22px;margin:0 -6px}
  .cp-bar{padding:12px 14px;gap:10px}.cp-meta{display:none}.cp-reset span{display:none}.cp-reset{padding:0 11px}
  .cp-hint{left:10px;bottom:10px;font-size:11.5px;padding:6px 10px}
  .cp-view{display:flex;padding:16px}
  .cp-levels b{font-size:11px}.cp-levels small{font-size:9.5px}.cp-levels li{padding:8px 6px}
  .cp-controls{grid-template-columns:minmax(0,1fr);padding:16px}
  .cp-ruler{padding:12px 16px 16px}
  .cp-notice{margin:0 16px 16px}
}
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:13px;color:rgba(255,255,255,.7)}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}

/* Mask compare */
.compare{position:relative;border-radius:var(--r-xl);overflow:hidden;aspect-ratio:3/2;background:#111;box-shadow:var(--shadow);--split:55%;touch-action:pan-y}
.compare img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.compare .after{position:absolute;inset:0;clip-path:inset(0 0 0 var(--split))}
.mask{position:absolute;background:repeating-linear-gradient(135deg,rgba(12,14,16,.94) 0 14px,rgba(28,32,36,.94) 14px 28px);display:grid;place-items:center;color:rgba(255,255,255,.8);font:700 12px var(--body);letter-spacing:.08em;text-transform:uppercase;text-align:center;padding:6px}
.compare .handle{position:absolute;z-index:3;top:0;bottom:0;left:var(--split);width:2px;transform:translateX(-1px);pointer-events:none;background:linear-gradient(180deg,rgba(255,255,255,.2),#fff 18%,#fff 82%,rgba(255,255,255,.2));box-shadow:0 0 0 1px rgba(0,0,0,.08),0 0 18px rgba(0,0,0,.45)}
.compare .handle i{position:absolute;top:50%;left:50%;display:grid;place-items:center;width:54px;height:54px;border-radius:50%;transform:translate(-50%,-50%);background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);box-shadow:0 10px 30px rgba(0,0,0,.4),inset 0 0 0 1px rgba(255,255,255,.6);transition:transform .2s}
.compare .handle svg{width:24px;height:24px;fill:none;stroke:#14181c;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.compare:active .handle i{transform:translate(-50%,-50%) scale(.94)}
.compare input{position:absolute;inset:0;width:100%;height:100%;opacity:0;margin:0;cursor:ew-resize}
.compare .tagl,.compare .tagr{position:absolute;top:14px;z-index:2;padding:6px 12px;border-radius:999px;font-size:12.5px;font-weight:700;background:rgba(255,255,255,.92);color:var(--ink);pointer-events:none}
.compare .tagl{left:14px}.compare .tagr{right:14px}

/* System flow */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;position:relative;margin-top:26px}
.flow::before{content:"";position:absolute;left:12%;right:12%;top:46px;height:2px;background:rgba(255,255,255,.14)}
.flow .packet{position:absolute;top:41px;left:12%;width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 18px var(--accent);animation:packet 3.2s linear infinite}
.flow .packet:nth-of-type(2){animation-delay:1.06s}.flow .packet:nth-of-type(3){animation-delay:2.13s}
@keyframes packet{0%{left:12%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:86%;opacity:0}}
.flow[data-link="wifi"]::before{background:repeating-linear-gradient(90deg,rgba(255,255,255,.3) 0 6px,transparent 6px 14px)}
.node{position:relative;z-index:1;border:0;text-align:center;background:transparent;padding:0;min-width:0}
.node .disc{width:92px;height:92px;margin:0 auto 14px;border-radius:26px;display:grid;place-items:center;background:#202326;box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);transition:box-shadow .25s,transform .25s}
.node svg{width:40px;height:40px;color:#fff}
.node b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.011em}
.node small{display:block;font-size:13px;color:rgba(255,255,255,.55);line-height:1.35;margin-top:3px}
.node[aria-pressed="true"] .disc,.node:hover .disc{box-shadow:inset 0 0 0 2px var(--accent),0 0 40px var(--accent-glow);transform:translateY(-3px)}
.node-info{margin-top:26px;padding:22px 24px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);min-height:120px}
.node-info h4{font-size:19px;margin-bottom:6px}
.node-info p{color:rgba(255,255,255,.68);font-size:15.5px}

/* Storage */
.meter{height:14px;border-radius:10px;background:rgba(255,255,255,.08);overflow:hidden;margin-top:12px}
.meter i{display:block;height:100%;width:var(--w,30%);background:linear-gradient(90deg,var(--grad-a),var(--grad-b));border-radius:10px;transition:width .35s ease}
.big-num{font-family:var(--display);font-weight:700;font-size:clamp(46px,6vw,78px);letter-spacing:-.028em;line-height:1;background:linear-gradient(135deg,var(--grad-a),var(--grad-b));-webkit-background-clip:text;background-clip:text;color:transparent}

/* Alarm simulator */
.alarm-sim{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);gap:clamp(18px,2.5vw,32px);align-items:start}
.floor svg{display:block;width:100%;height:auto}
.floor .room{fill:#1c1f22;stroke:#3a4046;stroke-width:3;transition:fill .4s}
.floor .room.alarm{fill:rgba(255,90,78,.28);animation:roomflash 1s ease-in-out infinite alternate}
.floor .room.pending{fill:rgba(245,165,36,.2)}
@keyframes roomflash{to{fill:rgba(255,90,78,.12)}}
.floor .rname{fill:rgba(255,255,255,.4);font:600 13px var(--body);letter-spacing:.05em;text-transform:uppercase;pointer-events:none}
.floor .sensor{cursor:pointer}
.floor .slabel{fill:rgba(255,255,255,.75);font:600 12px var(--body);pointer-events:none}
.floor .sensor.trig .slabel{fill:#ffb0a8}
.floor .sensor .hitarea{fill:transparent}
.floor .sensor .body{fill:#fff;stroke:#0f1113;stroke-width:2;transition:fill .25s}
.floor .sensor.armed .body{fill:#7ee0f5}
.floor .sensor.off .body{fill:#6b747c}
.floor .sensor.trig .body{fill:var(--alarm)}
.floor .sensor:hover .body,.floor .sensor:focus-visible .body{stroke:#fff;stroke-width:3}
.floor .sensor:focus{outline:none}
.floor .zone{fill:rgba(126,224,245,.08);stroke:rgba(126,224,245,.35);stroke-dasharray:5 5;transition:opacity .3s}
.floor .zone.off{opacity:.15}
.floor .opening{stroke:#fff;stroke-width:6;stroke-linecap:round;transition:transform .4s}
.floor .siren-wave{fill:none;stroke:var(--alarm);stroke-width:2;opacity:0}
.floor.alarming .siren-wave{animation:wave 1.2s ease-out infinite}
.floor.alarming .siren-wave:nth-of-type(2){animation-delay:.4s}
.floor.alarming .siren-wave:nth-of-type(3){animation-delay:.8s}
@keyframes wave{0%{opacity:.9;r:8}100%{opacity:0;r:46}}
.panel{border-radius:var(--r-lg);background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--glass-line);padding:20px;min-width:0}
.panel h4{font-size:15px;letter-spacing:.02em;margin-bottom:12px;color:rgba(255,255,255,.7);font-family:var(--body);font-weight:600}
.state{display:flex;align-items:center;gap:12px;padding:14px;border-radius:14px;background:rgba(255,255,255,.06);margin-bottom:14px}
.state .led{width:14px;height:14px;border-radius:50%;background:#6b747c;flex:none;box-shadow:0 0 0 5px rgba(255,255,255,.06)}
.state[data-s="armed"] .led{background:var(--accent);box-shadow:0 0 0 5px var(--accent-glow)}
.state[data-s="pending"] .led{background:var(--warn);box-shadow:0 0 0 5px rgba(245,165,36,.25);animation:blink 1s steps(2) infinite}
.state[data-s="alarm"] .led{background:var(--alarm);box-shadow:0 0 0 5px rgba(255,90,78,.3);animation:blink .6s steps(2) infinite}
.state b{display:block;font-family:var(--display);font-size:18px;letter-spacing:-.011em}
.state small{color:rgba(255,255,255,.6);font-size:13.5px}
.log{list-style:none;margin:0;padding:0;display:grid;gap:8px;max-height:260px;overflow:auto;font-size:14px}
.log li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:9px 11px;border-radius:10px;background:rgba(255,255,255,.04);animation:logIn .35s ease}
.log time{font:600 12px ui-monospace,Menlo,monospace;color:rgba(255,255,255,.45);padding-top:2px}
.log li.a{background:rgba(255,90,78,.14);color:#ffc9c4}
.log li.w{background:rgba(245,165,36,.12);color:#ffe0a8}
.log li.g{background:rgba(60,192,39,.12);color:#c8f5bd}
@keyframes logIn{from{opacity:0;transform:translateY(-6px)}}
.countdown{font-family:var(--display);font-weight:700;font-size:44px;letter-spacing:-.022em;color:var(--warn);line-height:1}
.phone-toast{position:absolute;right:14px;top:14px;width:min(290px,80%);display:flex;gap:10px;padding:12px 14px;border-radius:16px;background:rgba(245,246,247,.96);color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.4);transform:translateY(-140%);transition:transform .45s cubic-bezier(.2,.9,.3,1.2);z-index:4;font-size:13.5px;line-height:1.35}
.phone-toast.on{transform:none}
.phone-toast .app{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--accent),var(--accent-2));flex:none;display:grid;place-items:center;color:#fff}
.phone-toast .app svg{width:18px;height:18px}
.phone-toast b{display:block}

/* Access */
.access-hero{position:relative}
.access-hero .photo{aspect-ratio:4/5;border-radius:var(--r-xl)}
.access-log{position:absolute;left:-40px;bottom:36px;width:min(330px,88%);padding:16px;border-radius:20px;z-index:3;background:rgba(16,18,20,.74)}
.access-log h4{font:600 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:10px}
.access-log ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.access-log li{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:12px;background:rgba(255,255,255,.08);font-size:13.5px;line-height:1.3;animation:logIn .4s ease}
.access-log li i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex:none;background:rgba(18,181,211,.2);color:#9be8f7;font-style:normal}
.access-log li i svg{width:16px;height:16px}
.access-log li.deny i{background:rgba(255,90,78,.2);color:#ffb0a8}
.access-log li small{display:block;color:rgba(255,255,255,.55);font-size:12px}
.planner{display:grid;gap:12px;margin-top:8px}
.who{display:grid;grid-template-columns:minmax(150px,.7fr) minmax(0,2fr) 128px;gap:16px;align-items:center;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);transition:box-shadow .25s,background .25s}
.who b{display:block;font-family:var(--display);font-size:16px;letter-spacing:-.011em}
.who small{display:block;color:rgba(255,255,255,.55);font-size:13px;line-height:1.35}
.week{position:relative;height:30px;border-radius:8px;background:repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 calc(100%/7 - 1px),rgba(255,255,255,.14) calc(100%/7 - 1px) calc(100%/7))}
.week .win{position:absolute;top:4px;bottom:4px;border-radius:5px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));opacity:.85}
.week .head-line{position:absolute;top:-4px;bottom:-4px;width:2px;background:#fff;border-radius:2px;box-shadow:0 0 10px rgba(255,255,255,.7);left:var(--t,0%)}
.days{display:grid;grid-template-columns:repeat(7,1fr);font-size:12px;color:rgba(255,255,255,.45);text-align:center;margin:0 128px 0 calc(min(150px,.7fr) + 16px)}
.badge{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:8px 10px;border-radius:10px;font-size:13px;font-weight:700;background:rgba(255,90,78,.14);color:#ffb0a8;min-height:36px}
.badge.yes{background:rgba(60,192,39,.16);color:#b9f0ab}
.who.revoked{opacity:.55}
.who.revoked .win{background:repeating-linear-gradient(135deg,#ff5a4e 0 6px,transparent 6px 12px);opacity:.5}
.time-now{font-family:var(--display);font-weight:700;font-size:clamp(28px,3vw,40px);letter-spacing:-.022em}
.keycompare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.keycol{padding:clamp(22px,3vw,32px);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow);min-width:0}
.keycol h3{font-size:22px;margin:14px 0 16px}
.keycol ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:k}
.keycol li{counter-increment:k;display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start;padding:12px 14px;border-radius:14px;background:#f4f5f7;font-size:15.5px;color:var(--ink-2);opacity:.8;transform:translateY(6px);transition:opacity .4s,transform .4s}
.keycol li::before{content:counter(k);width:30px;height:30px;border-radius:9px;background:#fff;display:grid;place-items:center;font-weight:700;font-size:13px;color:var(--ink)}
.keycol li.on{opacity:1;transform:none}
.keycol.fast li::before{background:var(--accent);color:#fff}
.keycol .sum{margin-top:16px;padding-top:14px;border-top:1px solid var(--line);font-weight:650;color:var(--ink)}
.methods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.method{background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.method .photo{border-radius:0;box-shadow:none;aspect-ratio:4/3}
.method .ic{height:0;padding-bottom:75%;position:relative;background:linear-gradient(160deg,#1b1d20,#33373b)}
.method .ic svg{position:absolute;inset:0;margin:auto;width:64px;height:64px;color:#9be8f7}
.method div.t{padding:20px 20px 22px}
.method h3{font-size:19px;margin-bottom:8px}
.method p{font-size:15px;color:var(--muted)}
.method .checklist li{font-size:14px}

/* Intercom demo */
.intercom{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:center}
.phone{position:relative;width:min(300px,100%);margin:0 auto;aspect-ratio:9/18.5;border-radius:44px;padding:12px;background:linear-gradient(160deg,#3a3d40,#0e0f10);box-shadow:0 40px 90px rgba(0,0,0,.5),inset 0 0 0 2px rgba(255,255,255,.08)}
.phone .scr{position:relative;height:100%;border-radius:34px;overflow:hidden;background:#0b0c0d;display:flex;flex-direction:column}
.phone .notch{position:absolute;left:50%;top:10px;width:84px;height:24px;border-radius:14px;background:#000;transform:translateX(-50%);z-index:3}
.phone .idle{flex:1;display:grid;place-items:center;text-align:center;color:rgba(255,255,255,.5);font-size:14px;padding:24px}
.phone .idle b{display:block;font-family:var(--display);font-size:38px;color:#fff;letter-spacing:-.022em}
.phone .call{position:absolute;inset:0;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .4s}
.phone[data-state="ring"] .call,.phone[data-state="talk"] .call,.phone[data-state="open"] .call{opacity:1;pointer-events:auto}
.phone[data-state="ring"] .idle,.phone[data-state="talk"] .idle,.phone[data-state="open"] .idle{opacity:0}
.phone .feed{position:relative;flex:1.1;overflow:hidden}
.phone .feed img{width:100%;height:100%;object-fit:cover;object-position:62% 55%}
.phone .feed .osd{top:40px}
.phone .who-rings{padding:14px 16px 6px;color:#fff}
.phone .who-rings b{font-family:var(--display);font-size:19px;display:block;letter-spacing:-.011em}
.phone .who-rings small{color:rgba(255,255,255,.55);font-size:13px}
.phone .btns{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:10px 14px 22px}
.phone .btns button{border:0;border-radius:16px;min-height:62px;display:grid;place-items:center;gap:2px;font-size:11.5px;font-weight:600;color:#fff;background:rgba(255,255,255,.1);padding:8px 4px}
.phone .btns button svg{width:20px;height:20px}
.phone .btns .open{background:linear-gradient(135deg,var(--accent),var(--accent-2))}
.phone .btns .deny{background:rgba(255,90,78,.85)}
.phone .wave{display:none;gap:3px;align-items:center;height:18px;margin-top:6px}
.phone[data-state="talk"] .wave{display:flex}
.phone .wave i{width:3px;border-radius:2px;background:var(--grad-a);animation:wv .9s ease-in-out infinite alternate}
.phone .wave i:nth-child(2n){animation-delay:.2s}.phone .wave i:nth-child(3n){animation-delay:.45s}
@keyframes wv{from{height:3px}to{height:18px}}
.phone .opened{position:absolute;left:14px;right:14px;top:50%;transform:translateY(-50%) scale(.9);padding:18px;border-radius:18px;background:rgba(60,192,39,.95);color:#fff;text-align:center;font-weight:700;opacity:0;transition:.35s;z-index:4}
.phone[data-state="open"] .opened{opacity:1;transform:translateY(-50%) scale(1)}
.ring-anim{animation:shake .5s ease-in-out 3}
@keyframes shake{25%{transform:rotate(-2deg)}75%{transform:rotate(2deg)}}
.ic-steps{display:grid;gap:12px;margin-top:26px}
.ic-steps li{list-style:none;display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.04);color:rgba(255,255,255,.55);transition:.3s}
.ic-steps li.on{background:rgba(18,181,211,.12);color:#fff;box-shadow:inset 0 0 0 1px rgba(121,218,255,.35)}
.ic-steps li b{font-family:var(--display);width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(255,255,255,.08);flex:none;font-size:13px}
.ic-steps{padding:0;margin-bottom:0}

/* Repair */
.tracker{position:absolute;left:-36px;bottom:30px;width:min(330px,90%);padding:18px;border-radius:20px;z-index:3;background:rgba(16,16,20,.74)}
.tracker h4{font:600 12.5px var(--body);letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.6);margin-bottom:12px}
.tracker ol{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.tracker li{display:flex;align-items:center;gap:10px;padding:7px 8px;border-radius:10px;font-size:14px;color:rgba(255,255,255,.45);transition:.4s}
.tracker li i{width:22px;height:22px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);display:grid;place-items:center;font-style:normal;font-size:12px}
.tracker li.done{color:rgba(255,255,255,.85)}
.tracker li.done i{background:var(--accent);box-shadow:none;color:#fff}
.tracker li.now{color:#fff;background:rgba(255,255,255,.08)}
.tracker li.now i{box-shadow:inset 0 0 0 2px var(--grad-a),0 0 0 4px var(--accent-glow);animation:blink 1.2s steps(2) infinite}
.tracker li small{margin-left:auto;font-size:11.5px;color:var(--grad-a);font-weight:600}
.repair-photo{aspect-ratio:4/4.4}
.picker{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
.devices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:22px}
.device{border:0;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);padding:18px 10px 14px;display:grid;justify-items:center;gap:8px;font-weight:650;font-size:15px;min-height:44px;transition:.25s}
.device svg{width:40px;height:40px;color:rgba(255,255,255,.8)}
.device[aria-pressed="true"]{background:rgba(155,107,255,.18);box-shadow:inset 0 0 0 1.5px var(--accent)}
.device[aria-pressed="true"] svg{color:#fff}
.diag{padding:clamp(22px,3vw,32px);border-radius:var(--r-xl);background:linear-gradient(160deg,rgba(155,107,255,.18),rgba(255,255,255,.04));box-shadow:inset 0 0 0 1px rgba(217,196,255,.3)}
.diag .k{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--grad-a)}
.diag h3{font-size:clamp(22px,2.2vw,30px);margin:10px 0 10px}
.diag p{color:rgba(255,255,255,.72);font-size:16px}
.diag .checklist{margin-bottom:20px}
.model{display:grid;gap:8px;margin:18px 0 20px}
.model label{font-size:14px;font-weight:600;color:rgba(255,255,255,.75)}
.model input{width:100%;min-height:48px;padding:12px 14px;border-radius:12px;border:0;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font:inherit;font-size:16px}
.model input::placeholder{color:rgba(255,255,255,.4)}
.model small{font-size:12.5px;color:rgba(255,255,255,.5)}
.timeline{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(20px,4vw,56px);align-items:start}
.tl-list{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:relative}
.tl-list button{width:100%;display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;border:0;border-radius:16px;background:#fff;box-shadow:var(--shadow);font-weight:650;font-size:16px;min-height:56px;transition:.25s}
.tl-list button b{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:#eceef1;font-family:var(--display);font-size:13px;flex:none}
.tl-list button small{margin-left:auto;font-size:12.5px;color:var(--muted);font-weight:600}
.tl-list button[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent),var(--shadow)}
.tl-list button[aria-pressed="true"] b{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff}
.tl-list li.you button small{color:var(--accent-ink)}
.tl-detail{position:sticky;top:24px;padding:clamp(24px,3vw,36px);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow)}
.tl-detail .k{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;font-weight:700;color:var(--accent-ink)}
.tl-detail h3{font-size:clamp(24px,2.4vw,32px);margin:10px 0 12px}
.tl-detail p{color:var(--ink-2)}
.tl-detail .cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:20px}
.tl-detail .cols div{padding:16px;border-radius:16px;background:var(--paper)}
.tl-detail .cols b{display:block;font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);margin-bottom:6px}
.tl-detail .cols p{font-size:15px}
.prep{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(20px,3vw,40px);align-items:start}
.prep-list{display:grid;gap:10px}
.prep-item{position:relative;display:flex;gap:14px;align-items:flex-start;padding:18px 18px;border-radius:18px;background:#fff;box-shadow:var(--shadow);cursor:pointer;transition:box-shadow .2s}
.prep-item input{position:absolute;opacity:0;width:1px;height:1px}
.prep-item .box{width:28px;height:28px;border-radius:9px;flex:none;box-shadow:inset 0 0 0 2px #d5d9de;display:grid;place-items:center;transition:.2s;margin-top:1px}
.prep-item .box svg{width:16px;height:16px;color:#fff;opacity:0}
.prep-item input:checked~.box{background:linear-gradient(135deg,var(--accent),var(--accent-2));box-shadow:none}
.prep-item input:checked~.box svg{opacity:1}
.prep-item input:focus-visible~.box{outline:3px solid var(--accent);outline-offset:2px}
.prep-item b{display:block;font-size:16.5px}
.prep-item small{display:block;color:var(--muted);font-size:14.5px;line-height:1.45;margin-top:3px}
.ring{position:sticky;top:24px;padding:30px;border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow);text-align:center}
.ring-dial{position:relative;width:170px;height:170px;margin:0 auto 14px}
.ring svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
.ring circle{fill:none;stroke-width:12}
.ring .bg{stroke:#eaecef}
.ring .fg{stroke:url(#ringGrad);stroke-linecap:round;stroke-dasharray:440;stroke-dashoffset:440;transition:stroke-dashoffset .5s ease}
.ring .val{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-weight:700;font-size:40px;letter-spacing:-.022em}
.ring-t{display:block;font-family:var(--display);font-size:17px;letter-spacing:-.011em;margin-bottom:4px}
.ring p{color:var(--muted);font-size:15px}

/* ---------- Startseite v13: Wer wir sind, Bereiche, Arbeitsweise ---------- */
.h-display{font-size:clamp(38px,5vw,76px);line-height:.98;letter-spacing:-.03em;margin:20px 0 clamp(28px,4vw,52px);text-wrap:balance}
.h-display em{font-style:normal;background:linear-gradient(90deg,var(--accent-ink),var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent}
.h-lead{font-size:clamp(18px,1.45vw,20.5px);line-height:1.55;color:var(--ink-2);max-width:56ch}
.h-about .actions{margin-top:32px}
.h-about-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(32px,5vw,80px);align-items:start}
.h-about .h-about-grid .actions{margin-top:28px}
.h-count{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:clamp(56px,7vw,100px) 0 0;border-top:1px solid var(--line)}
.h-count div{padding:30px clamp(14px,2vw,28px) 0;border-left:1px solid var(--line);min-width:0}
.h-count div:first-child{border-left:0;padding-left:0}
.h-count dt{font:700 clamp(76px,8.4vw,132px)/.78 var(--display);letter-spacing:-.041em;background:linear-gradient(180deg,var(--ink) 35%,var(--accent) 135%);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em}
.h-count dd{margin:22px 0 0;font-size:15px;line-height:1.45;color:var(--muted)}
.h-count dd b{display:block;margin-bottom:4px;font-family:var(--display);font-size:clamp(17px,1.4vw,20px);letter-spacing:-.014em;line-height:1.2;color:var(--ink)}

.h-areas{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.h-area{--c:#79daff;position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:620px;border-radius:var(--r-xl);overflow:hidden;color:#fff;background:#111;box-shadow:var(--shadow)}
.h-area[data-area=repair]{--c:#c9a8ff}
.h-area[data-area=energy]{--c:#a4e58f}
.h-area>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.h-area::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(8,10,12,.35) 0%,rgba(8,10,12,.05) 26%,rgba(8,10,12,.82) 58%,rgba(8,10,12,.95) 100%)}
.h-area:hover>img{transform:scale(1.045)}
.h-area-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:22px 24px 0}
.h-area-n{font:700 13px/1 var(--display);padding:8px 12px;border-radius:99px;background:rgba(255,255,255,.14);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.h-area-tag{font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--c);text-align:right;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.h-area-body{margin-top:auto;padding:28px 26px 26px}
.h-area h3{font-size:clamp(24px,2vw,30px);letter-spacing:-.022em;line-height:1.05;hyphens:auto;-webkit-hyphens:auto}
.h-area-main{color:#fff;text-decoration:none}
.h-area-main::after{content:"";position:absolute;inset:0;z-index:1}
.h-area-main:focus-visible{outline:none}
.h-area:has(.h-area-main:focus-visible){outline:3px solid var(--c);outline-offset:3px}
.h-area-body>p{margin-top:12px;color:rgba(255,255,255,.76);font-size:16px}
.h-area-links{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16)}
.h-area-links a{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:48px;border-bottom:1px solid rgba(255,255,255,.16);color:#fff;text-decoration:none;font-size:15.5px;font-weight:550}
.h-area-links a svg{width:18px;height:18px;flex:none;color:var(--c);transition:transform .25s}
.h-area-links a:hover svg,.h-area-links a:focus-visible svg{transform:translateX(4px)}
.h-area-links a:focus-visible{outline:3px solid var(--c);outline-offset:2px}
.h-area-go{display:inline-flex;align-items:center;gap:12px;margin-top:24px;height:50px;padding:0 6px 0 20px;border-radius:99px;background:var(--c);color:#0b1620;font-weight:700;font-size:15px;transition:gap .25s}
.h-area-go i{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#0b1620;color:var(--c)}
.h-area-go svg{width:18px;height:18px}
.h-area:hover .h-area-go{gap:16px}

.h-voice{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(28px,5vw,80px);align-items:end;padding-bottom:clamp(40px,5vw,64px);margin-bottom:clamp(32px,4vw,48px);border-bottom:1px solid var(--line)}
.h-voice figure{margin:0}
.h-voice blockquote{margin:0;font:600 clamp(28px,3.5vw,50px)/1.1 var(--display);letter-spacing:-.022em;text-wrap:balance}
.h-voice blockquote .h-qm{color:var(--accent-ink)}
.h-voice figcaption{margin-top:20px;font-size:14px;color:var(--muted)}
.h-rating{display:flex;flex-direction:column;align-items:flex-end;text-align:right}
.h-rating .stars{color:#f5c542;letter-spacing:4px;font-size:18px}
.h-rating b{font:700 clamp(72px,7.4vw,116px)/.9 var(--display);letter-spacing:-.033em;margin-top:6px}
.h-rating>span:not(.stars){margin:6px 0 12px;font-size:14.5px;color:var(--muted)}
.h-quotes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.h-qcard{margin:0;display:flex;flex-direction:column;justify-content:space-between;gap:18px;padding:26px 24px 22px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.h-qcard blockquote{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.h-qcard figcaption{font-size:13px;color:var(--muted)}
.h-qcard figcaption::before{content:"★★★★★";display:block;margin-bottom:6px;color:#f5c542;letter-spacing:3px;font-size:13px}

.h-sources{padding-top:0!important}
.h-sources .wrap>p{font-size:13.5px;color:var(--ink-2)}
.h-sources ol{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;max-width:960px;font-size:13px;line-height:1.5;color:var(--muted)}
.h-sources a{color:var(--ink-2);text-underline-offset:3px}

@media (max-width:1180px){.h-areas{gap:14px}.h-area{min-height:560px}.h-area-body{padding:24px 20px 20px}.h-area-top{padding:18px 20px 0}.h-area-go{font-size:14px}}
@media (max-width:1023px){.h-about-grid{grid-template-columns:minmax(0,1fr)}.h-about-grid .team-cards{max-width:560px}.h-count{grid-template-columns:repeat(2,minmax(0,1fr))}.h-count div:nth-child(3){border-left:0;padding-left:0}.h-count div:nth-child(n+3){margin-top:30px;border-top:1px solid var(--line)}.h-areas{grid-template-columns:minmax(0,1fr)}.h-area{min-height:430px}.h-area-body{max-width:620px}}
@media (max-width:700px){
  .h-display{font-size:clamp(34px,9.6vw,44px)}
  .h-area h3{font-size:28px}
  .h-about .actions{flex-direction:column}
  .h-about .actions .btn{width:100%}
  .h-count dt{font-size:72px}
  .h-count div{padding:22px 14px 0}
  .h-count dd{font-size:14px;margin-top:16px}
  .h-area{min-height:440px;border-radius:22px}
  .h-area-body{padding:22px 18px 18px}
  .h-area-top{padding:16px 18px 0}
  .h-area-go{width:100%;justify-content:space-between}
  .h-voice{grid-template-columns:minmax(0,1fr)}
  .h-rating{align-items:flex-start;text-align:left}
  .h-quotes{grid-template-columns:minmax(0,1fr)}
}

/* ---------- Reparatur: Was ist kaputt? (Durchblick) ---------- */
.rp{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,56px);align-items:start}
.rp-devs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));width:100%;padding:4px;border-radius:14px}
.rp-devs button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;font-size:14.5px}
.rp-stage{position:relative;margin-top:16px;padding:clamp(18px,3vw,34px);border-radius:var(--r-xl);background:radial-gradient(420px 260px at 50% 30%,rgba(155,107,255,.16),transparent 70%),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.rp-art{position:relative;margin:0 auto;max-width:260px}
.rp[data-dev=Tablet] .rp-art{max-width:330px}
.rp[data-dev=Notebook] .rp-art{max-width:520px}
.dv-svg{display:block;width:100%;height:auto;overflow:visible}
.dv-svg[hidden]{display:none}
.dv-body{fill:#1d1a24;stroke:rgba(255,255,255,.22);stroke-width:2}
.dv-screen{fill:#0f0d13;stroke:rgba(255,255,255,.08)}
.dv-part{fill:none;stroke:rgba(201,168,255,.32);stroke-width:2;stroke-linecap:round;transition:stroke .3s,filter .3s,opacity .3s}
.has-part .dv-part:not(.on):not(.dv-glass){opacity:.45}
.dv-part.on{stroke:#c9a8ff;filter:drop-shadow(0 0 8px rgba(155,107,255,.8))}
.dv-part[data-part=battery].on rect{fill:rgba(155,107,255,.18)}
.dv-part[data-part=board] rect{fill:rgba(255,255,255,.02)}
.dv-glass{stroke:none}
.dv-glass>rect{fill:none}
.dv-crack{stroke:none;fill:none}
.dv-glass.on>rect{fill:rgba(155,107,255,.08);stroke:#c9a8ff;stroke-width:2}
.dv-glass.on .dv-crack{stroke:rgba(255,255,255,.85);stroke-width:1.6;stroke-dasharray:240;stroke-dashoffset:240;animation:dvCrack .9s ease-out forwards}
@keyframes dvCrack{to{stroke-dashoffset:0}}
.dv-water path{fill:rgba(121,218,255,.12);stroke:rgba(121,218,255,.55)}
.dv-water.on path{fill:rgba(121,218,255,.3);stroke:#79daff;filter:drop-shadow(0 0 10px rgba(121,218,255,.7))}
.rp-hots{position:absolute;inset:0}
.rp-hot{position:absolute;width:44px;height:44px;margin:-22px 0 0 -22px;padding:0;border:0;border-radius:50%;background:transparent;cursor:pointer}
.rp-hot i{position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;box-shadow:0 0 0 5px rgba(155,107,255,.45),0 4px 12px rgba(0,0,0,.4);transition:transform .25s,background .25s}
.rp-hot i::after{content:"";position:absolute;inset:-9px;border-radius:50%;border:2px solid rgba(201,168,255,.6);animation:rpPing 2.4s ease-out infinite}
@keyframes rpPing{0%{transform:scale(.6);opacity:1}80%,100%{transform:scale(1.5);opacity:0}}
.rp-hot b{position:absolute;left:50%;bottom:calc(100% - 4px);transform:translate(-50%,4px);padding:5px 10px;border-radius:99px;background:#fff;color:#14181c;font-size:12.5px;font-weight:700;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.rp-hot:hover b,.rp-hot:focus-visible b,.rp-hot.on b{opacity:1;transform:translate(-50%,0)}
.rp-hot.on i{background:#9b6bff;transform:scale(1.2)}
.rp-hot.on i::after{animation:none;opacity:0}
.rp-hot:focus-visible{outline:2px solid #c9a8ff;outline-offset:2px}
.rp-hint{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.55)}
.rp-list{border:0;padding:0;margin:20px 0 0}
.rp-list legend{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);margin-bottom:10px}
.rp-diag{position:sticky;top:24px}
@media (max-width:1180px){.rp{grid-template-columns:minmax(0,1fr)}.rp-diag{position:static}}
@media (max-width:700px){.rp-art{max-width:200px}.rp[data-dev=Tablet] .rp-art{max-width:250px}.rp-devs button{font-size:13px;gap:5px}.rp-hot b{font-size:11.5px}}
@media (prefers-reduced-motion:reduce){.rp-hot i::after{animation:none}.dv-glass.on .dv-crack{animation:none;stroke-dashoffset:0}}

/* ---------- Ratgeber v13 ---------- */
.rg-hero h1{max-width:20ch}
.rg-pill{margin-top:22px}
.rg-hero .lead{max-width:62ch}
.rg-meta{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:18px;font-size:13.5px;color:rgba(255,255,255,.6)}
.rg-meta span+span::before{content:"·";margin-right:18px;opacity:.5}
.rg-layout{display:grid;grid-template-columns:260px minmax(0,760px);gap:clamp(28px,5vw,72px);justify-content:center;padding-top:clamp(40px,5vw,72px);padding-bottom:clamp(24px,3vw,40px)}
.rg-aside{position:relative}
.rg-toc,.rg-svc{position:sticky;top:24px}
.rg-toc b{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px}
.rg-toc ol{list-style:none;margin:0;padding:0;border-left:1px solid var(--line)}
.rg-toc a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14.5px;line-height:1.35;color:var(--ink-2);text-decoration:none}
.rg-toc a:hover,.rg-toc a.on{color:var(--ink);border-left-color:var(--accent)}
.rg-svc{display:flex;flex-direction:column;gap:4px;margin-top:28px;padding:18px;border-radius:18px;background:var(--accent-soft);color:var(--ink);text-decoration:none;top:auto}
.rg-svc b{font:700 17px/1.25 var(--display);letter-spacing:-.011em}
.rg-k{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.rg-go{display:inline-flex;align-items:center;gap:6px;margin-top:6px;font-weight:650;color:var(--accent-ink)}
.rg-go svg{width:17px;height:17px;transition:transform .25s}
a:hover>.rg-go svg,a:hover .rg-go svg{transform:translateX(4px)}
.rg-article{min-width:0;font-size:18px;line-height:1.7;color:var(--ink-2)}
.rg-photo{aspect-ratio:16/8;margin-bottom:28px}
.rg-short{padding:22px 24px;border-radius:20px;background:#fff;box-shadow:var(--shadow),inset 3px 0 0 var(--accent)}
.rg-short-k{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:10px}
.rg-short ul{margin:0;padding-left:20px;display:grid;gap:8px;font-size:17px;color:var(--ink)}
.rg-sec{scroll-margin-top:24px;margin-top:clamp(36px,4vw,52px)}
.rg-sec h2{font-size:clamp(24px,2.4vw,32px);color:var(--ink);margin-bottom:14px;letter-spacing:-.017em}
.rg-sec p+p{margin-top:14px}
.rg-sec ul,.rg-sec ol{padding-left:22px;display:grid;gap:8px;margin:14px 0}
.rg-sec .checklist{padding-left:0}
.rg-sec b{color:var(--ink)}
.rg-formula{padding:16px 18px;border-radius:14px;background:var(--paper-2,#eaecef);font:600 15.5px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--ink)}
.rg-table{width:100%;border-collapse:collapse;margin:16px 0;font-size:15.5px;line-height:1.45}
.rg-table th{text-align:left;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);padding:10px 12px;border-bottom:2px solid var(--line)}
.rg-table td{padding:11px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.rg-table td:first-child{font-weight:650;color:var(--ink);white-space:nowrap}
.rg-faq{max-width:none}
.rg-src ol{font-size:15px;line-height:1.5}
.rg-src a{color:var(--accent-ink);text-underline-offset:3px}
.rg-next{margin-top:clamp(36px,4vw,52px)}
.rg-rel-head,.rg-group-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 20px;margin-bottom:18px}
.rg-rel-head h2,.rg-group-head h2{font-size:clamp(24px,2.4vw,32px)}
.rg-group-head p{color:var(--muted);flex:1;min-width:200px}
.rg-group+.rg-group{margin-top:clamp(48px,6vw,80px)}
.rg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.rg-card{display:flex;flex-direction:column;gap:6px;padding:22px;border-radius:22px;background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s;min-width:0}
.rg-card:hover{transform:translateY(-4px);box-shadow:0 30px 60px rgba(20,24,28,.12),inset 0 0 0 1px var(--line)}
.rg-card b{font:700 19px/1.25 var(--display);letter-spacing:-.011em}
.rg-card small{font-size:14.5px;line-height:1.5;color:var(--muted)}
.rg-card .rg-go{margin-top:auto;padding-top:10px}
.rg-card-img{padding:0;overflow:hidden}
.rg-card-img .photo{display:block;aspect-ratio:16/9;border-radius:0;box-shadow:none}
.rg-card-b{display:flex;flex-direction:column;gap:6px;flex:1;padding:18px 20px 20px}
[data-accent-card=repair] .rg-k,[data-accent-card=repair] .rg-go{color:#6d3fb8}
[data-accent-card=energy] .rg-k,[data-accent-card=energy] .rg-go{color:#2f7d1f}
@media (max-width:1023px){.rg-layout{grid-template-columns:minmax(0,1fr)}.rg-aside{display:none}.rg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.rg-cards{grid-template-columns:minmax(0,1fr)}.rg-article{font-size:17px}.rg-table{font-size:14px}.rg-table td:first-child{white-space:normal}.rg-short{padding:18px}}

/* ---------- Reparatur-Partnerprogramm v13 ---------- */
.pp-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;counter-reset:pp}
.pp-step{position:relative;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.pp-step::after{content:"";position:absolute;left:30px;right:30px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));opacity:.0;transition:opacity .3s}
.pp-step:hover::after{opacity:1}
.pp-n{position:absolute;right:18px;top:8px;font:700 64px/1 var(--display);letter-spacing:-.033em;color:transparent;-webkit-text-stroke:1.5px var(--line)}
.pp-step h3{font-size:21px;margin:18px 0 8px}
.pp-step p{color:var(--muted);font-size:15.5px}
.pp-check{max-width:820px}
.pp-check li{font-size:16.5px}
.pp-teaser{margin-top:0}
/* Login */
.pl-hero{min-height:min(100dvh,860px);align-items:center}
.pl-card{position:relative;max-width:520px;margin:0 auto;padding:clamp(26px,4vw,44px);border-radius:30px;background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12),0 40px 120px rgba(0,0,0,.45)}
.pl-back{display:inline-flex;align-items:center;gap:8px;margin-bottom:24px;color:rgba(255,255,255,.65);font-size:14px;text-decoration:none}
.pl-back svg{transform:rotate(180deg)}
.pl-back:hover{color:#fff}
.pl-card h1{font-size:clamp(34px,4vw,46px);margin:20px 0 10px}
.pl-card .lead{font-size:17px;margin-bottom:24px}
.pl-steps{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.pl-steps li{display:flex;gap:14px;align-items:flex-start;padding:14px 16px;border-radius:16px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.pl-steps i{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;font:700 13px var(--display);font-style:normal}
.pl-steps b{display:block;font-size:15.5px}
.pl-steps small{display:block;font-size:13.5px;color:rgba(255,255,255,.62);margin-top:2px}
.pl-go{width:100%}
.pl-foot{margin-top:18px;font-size:14px;color:rgba(255,255,255,.6);text-align:center}
.pl-foot a{color:#fff}
/* Partnerbereich */
.pa-hero{padding-bottom:clamp(36px,4vw,56px)}
.pa-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:clamp(28px,3vw,40px)}
.pa-tiles a{display:flex;flex-direction:column;gap:4px;padding:18px;border-radius:20px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;text-decoration:none;transition:background .25s,transform .25s}
.pa-tiles a:hover{background:rgba(255,255,255,.11);transform:translateY(-3px)}
.pa-ic{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,var(--accent),var(--accent-2));margin-bottom:10px}
.pa-tiles b{font:700 17px/1.2 var(--display);letter-spacing:-.011em}
.pa-tiles small{font-size:13.5px;color:rgba(255,255,255,.62)}
.rp-plugin{border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow);overflow:hidden;min-height:120px}
.rp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:340px;padding:40px 24px;text-align:center;background:repeating-linear-gradient(135deg,rgba(155,107,255,.04) 0 14px,transparent 14px 28px),#fff;box-shadow:inset 0 0 0 2px rgba(155,107,255,.28)}
.rp-empty b{font:700 22px var(--display);letter-spacing:-.011em;margin-top:8px}
.rp-empty p{max-width:52ch;color:var(--muted)}
.rp-empty small{margin-top:6px;padding:6px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;font-weight:600}
@media (max-width:1023px){.pp-steps{grid-template-columns:repeat(2,minmax(0,1fr))}.pa-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){.pp-steps{grid-template-columns:minmax(0,1fr)}.pa-tiles a{padding:14px}.pl-hero{padding-top:110px}}

/* ---------- Einbruch-Simulation v13 ---------- */
.bs{border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#15181b,#0e1012);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 50px 120px rgba(0,0,0,.45)}
.bs-bar{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid rgba(255,255,255,.07)}
.bs-bar .seg{padding:4px;border-radius:13px}.bs-bar .seg button{min-height:40px;padding:8px 14px;font-size:14px;border-radius:10px}
.bs[data-prot="0"] .bs-modes{opacity:.45}
.bs-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:stretch}
.bs-stage{position:relative;border-right:1px solid rgba(255,255,255,.07)}
.bs-svg{display:block;width:100%;height:auto}
.bs-trees circle{fill:#16261a;stroke:#1d3322;stroke-width:1.5}
.bs-bound{fill:none;stroke:rgba(255,255,255,.3);stroke-width:1.5;stroke-dasharray:8 6}
.bs-path{fill:none;stroke:#1f272a;stroke-width:26;stroke-linecap:round;stroke-linejoin:round}
.bs-path-k{stroke-width:0}
.bs-floor{fill:#1a1e22}
.bs-room{fill:#ffe7a8;opacity:0;transition:opacity .6s}
.bs-room.lit{opacity:.13}
.bs-wall{fill:none;stroke:#dfe4e8;stroke-width:6;stroke-linecap:square}
.bs-lbl text,text.bs-lbl{font:600 12px var(--body);letter-spacing:.08em;text-transform:uppercase;fill:rgba(255,255,255,.4)}
.bs-openings path{fill:none;stroke:#79daff;stroke-width:6;opacity:.55;transition:stroke .3s,opacity .3s}
.bs-openings path.open{stroke:#ff5a4e;opacity:1;stroke-dasharray:6 6;animation:bsDash .6s linear infinite}
@keyframes bsDash{to{stroke-dashoffset:-12}}
.bs-dev{transition:opacity .6s}
.bs[data-prot="0"] .bs-dev,.bs[data-prot="0"] .bs-bbox,.bs[data-prot="0"] .bs-bbox-t{opacity:0}
.bs-cone{fill:rgba(121,218,255,.1);stroke:rgba(121,218,255,.45);stroke-width:1.2;transition:fill .3s,stroke .3s}
.bs.detect #bs-cone-g{fill:rgba(245,165,36,.2);stroke:#f5a524}
.bs-pir{fill:rgba(121,218,255,.05);stroke:rgba(121,218,255,.4);stroke-dasharray:4 5;transition:opacity .4s}
.bs[data-sit=night] .bs-pir{opacity:.15}
.bs-sensor rect{fill:#79daff;transition:fill .3s}
.bs-sensor.hit rect{fill:#ff5a4e;animation:bsBlink .5s steps(2) infinite}
@keyframes bsBlink{50%{fill:#fff}}
.bs-camdot circle{fill:#0b0c0d;stroke:#79daff;stroke-width:3}.bs-camdot .lens{fill:#79daff;stroke:none}
.bs.detect .bs-camdot:first-of-type .lens{fill:#f5a524}
.bs-siren-body{fill:#2a2f34;stroke:#ff8a80;stroke-width:2}
.bs-flash{opacity:0}
.bs.alarm .bs-flash{animation:bsFlash .7s ease-in-out infinite}
.bs.alarm .bs-siren-body{fill:#ff5a4e}
@keyframes bsFlash{0%,100%{opacity:.15}50%{opacity:1}}
.bs-panel{fill:#9aa3ab}
.bs-bbox{fill:none;stroke:#f5a524;stroke-width:2.5;opacity:0;transition:opacity .2s}
.bs-bbox-t{font:700 11px var(--body);fill:#f5a524;opacity:0;transition:opacity .2s}
.bs.detect .bs-bbox,.bs.detect .bs-bbox-t{opacity:1}
.bs-bad circle{fill:#eef1f3}.bs-bad .halo{fill:rgba(255,255,255,.12)}.bs-bad .ic{fill:none;stroke:#14181c;stroke-width:2;stroke-linecap:round}
.bs.alarm .bs-bad .halo{fill:rgba(255,90,78,.3)}
.bs-res{display:none}.bs-res circle{fill:#79daff}.bs-res .halo{fill:rgba(121,218,255,.18)}
.bs[data-scen=night] .bs-res{display:block}
.bs-alarm{position:absolute;inset:0;display:flex;align-items:flex-start;justify-content:center;padding-top:16px;font:700 13px var(--display);letter-spacing:.3em;text-transform:uppercase;color:#fff;pointer-events:none;opacity:0;box-shadow:inset 0 0 0 3px #ff5a4e,inset 0 0 80px rgba(255,90,78,.35)}
.bs.alarm .bs-alarm{animation:bsAlarm 1.4s ease-in-out infinite}
@keyframes bsAlarm{0%,100%{opacity:.35}50%{opacity:1}}
/* halbe Handyansicht */
.bs-phone{position:relative;overflow:hidden;padding:22px 22px 0;background:radial-gradient(400px 300px at 50% 0%,rgba(121,218,255,.08),transparent 70%)}
.bs-ph{position:relative;height:100%;min-height:420px;border-radius:38px 38px 0 0;padding:14px 12px 0;background:linear-gradient(180deg,#22313a,#141a20 55%,#0f1316);box-shadow:inset 0 0 0 7px #0a0b0c,inset 0 0 0 8px #2b3036;color:#fff;overflow:hidden}
.bs-ph::after{content:"";position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(180deg,transparent,#0e1012);pointer-events:none}
.bs-ph-island{position:absolute;left:50%;top:14px;width:84px;height:24px;margin-left:-42px;border-radius:14px;background:#000}
.bs-ph-status{display:flex;justify-content:space-between;padding:4px 16px 0;font-size:12px}
.bs-ph-clock{margin-top:26px;text-align:center;font:600 54px/1 var(--display);letter-spacing:-.022em}
.bs-ph-date{text-align:center;font-size:13px;color:rgba(255,255,255,.7);margin-top:4px}
.bs-ph-notes{display:grid;gap:8px;margin-top:20px;padding:0 4px}
.bs-ph-empty{margin-top:30px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.4)}
.bs.has-notes .bs-ph-empty{display:none}
.bs-n{display:flex;gap:10px;padding:10px 11px;border-radius:18px;background:rgba(40,46,52,.82);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:0 8px 24px rgba(0,0,0,.3)}
.bs-n.new{animation:bsIn .5s cubic-bezier(.2,.8,.2,1)}
@keyframes bsIn{from{opacity:0;transform:translateY(-14px) scale(.96)}}
.bs-n-ic{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:#1d6a7d;color:#fff}
.bs-n-ic svg{width:17px;height:17px}
.bs-n.alarm{background:rgba(120,28,22,.88)}.bs-n.alarm .bs-n-ic{background:#ff5a4e}
.bs-n.ok .bs-n-ic{background:#2f7d1f}
.bs-n-b{min-width:0;flex:1}
.bs-n-top{display:flex;justify-content:space-between;gap:6px;font-size:10.5px;color:rgba(255,255,255,.6)}
.bs-n-top b{font-weight:600;text-transform:uppercase;letter-spacing:.04em}
.bs-n strong{display:block;font-size:13px;line-height:1.25;margin-top:1px}
.bs-n p{font-size:12px;color:rgba(255,255,255,.75);line-height:1.35}
.bs-n-thumb{position:relative;margin-top:7px;height:74px;border-radius:9px;overflow:hidden}
.bs-n-thumb img{width:100%;height:100%;object-fit:cover;object-position:50% 70%;filter:grayscale(1) brightness(.62) contrast(1.25)}
.bs-n-fig{position:absolute;left:31%;top:30%;width:8%;height:56%;fill:#0d0f10;opacity:.92;filter:blur(.4px)}
.bs-n-thumb i{position:absolute;left:27%;top:24%;width:16%;height:66%;border:2px solid #f5a524;border-radius:3px}
.bs-n-thumb::after{content:"IR";position:absolute;right:6px;top:5px;font:700 8px ui-monospace,Menlo,monospace;color:rgba(255,255,255,.8);letter-spacing:.06em}
.bs-n-act{display:flex;gap:6px;margin-top:8px}
.bs-n-act span{flex:1;padding:6px 4px;border-radius:9px;background:rgba(255,255,255,.14);font-size:11.5px;font-weight:600;text-align:center}
/* Zeile, Zeitleiste, Ergebnis */
.bs-cap{display:flex;gap:14px;align-items:baseline;padding:18px 22px 4px;border-top:1px solid rgba(255,255,255,.07);min-height:64px}
.bs-cap time{flex:none;font:600 13px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--grad-a)}
.bs-cap span{font:600 clamp(16px,1.5vw,20px)/1.35 var(--display);letter-spacing:-.008em;color:#fff}
.bs.alarm .bs-cap time{color:#ff8a80}
.bs-tl{display:flex;align-items:center;gap:12px;padding:10px 22px 18px}
.bs-play,.bs-restart{flex:none;display:grid;place-items:center;width:40px;height:40px;border:0;border-radius:50%;background:#fff;color:#0b0c0d}
.bs-restart{background:rgba(255,255,255,.08);color:#fff}
.bs-play .i-pause{display:block;width:12px;height:13px;border-left:4px solid currentColor;border-right:4px solid currentColor}
.bs:not(.playing) .bs-play .i-pause{width:0;height:0;border-style:solid;border-width:7px 0 7px 12px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.bs-track{position:relative;flex:1;height:8px;border-radius:6px;background:rgba(255,255,255,.1)}
.bs-fill{position:absolute;inset:0;border-radius:6px;background:linear-gradient(90deg,var(--grad-a),var(--grad-b));transform-origin:left;transform:scaleX(0)}
.bs.alarm .bs-fill{background:linear-gradient(90deg,var(--grad-a),#ff5a4e 70%)}
.bs-marks i{position:absolute;top:50%;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:#0e1012;box-shadow:inset 0 0 0 2px rgba(255,255,255,.6)}
.bs-marks i.pu{box-shadow:inset 0 0 0 2px #f5a524}.bs-marks i.al{box-shadow:inset 0 0 0 3px #ff5a4e}
.bs-track input{position:absolute;inset:-16px 0;width:100%;height:40px;margin:0;opacity:0;cursor:pointer}
.bs-res-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:0;border-top:1px solid rgba(255,255,255,.07)}
.bs-res-grid div{padding:16px 22px;border-left:1px solid rgba(255,255,255,.07)}
.bs-res-grid div:first-child{border-left:0}
.bs-res-grid dt{font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.bs-res-grid dd{margin:6px 0 0;font:700 17px/1.25 var(--display);color:rgba(255,255,255,.35);transition:color .3s}
.bs.done .bs-res-grid dd{color:#fff}
.bs.done[data-scen=none] .bs-res-grid dd{color:#ff8a80}
.bs.done:not([data-scen=none]) .bs-res-grid dd{color:var(--grad-a)}
@media (max-width:1180px){.bs-main{grid-template-columns:minmax(0,1fr) 260px}}
@media (max-width:900px){.bs-main{grid-template-columns:minmax(0,1fr)}.bs-stage{border-right:0}.bs-phone{height:300px;padding:16px 16% 0}.bs-ph{min-height:0}}
@media (max-width:700px){
  .bs{border-radius:22px;margin:0 -6px}
  .bs-bar{padding:12px}.bs-bar .seg{display:grid;grid-template-columns:1fr 1fr;width:100%}.bs-bar .seg button{padding:8px 6px;font-size:13px}
  .bs-phone{height:260px;padding:14px 10% 0}.bs-ph-clock{font-size:40px;margin-top:18px}
  .bs-cap{padding:14px 16px 2px;min-height:76px}.bs-cap span{font-size:15.5px}
  .bs-tl{padding:8px 16px 14px}
  .bs-res-grid div{padding:12px}.bs-res-grid dd{font-size:14px}
}
@media (prefers-reduced-motion:reduce){.bs.alarm .bs-flash,.bs.alarm .bs-alarm,.bs-sensor.hit rect,.bs-openings path.open{animation:none}.bs.alarm .bs-flash{opacity:.7}.bs.alarm .bs-alarm{opacity:1}}

/* ---------- Sparenergie v13 ---------- */
.en-photo{aspect-ratio:4/4.6;max-height:640px}
.en-float{position:absolute;left:-28px;bottom:36px;display:grid;gap:2px;padding:16px 18px;border-radius:18px;max-width:270px;color:#fff}
.en-float-k{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--grad-a)}
.en-float b{font:700 19px/1.2 var(--display);letter-spacing:-.011em;margin-top:4px}
.en-float small{font-size:13.5px;color:rgba(255,255,255,.7)}
.en-tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:12px;border-radius:26px}
.en-tiles a{display:flex;flex-direction:column;gap:4px;min-height:170px;padding:18px;border-radius:18px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;text-decoration:none;transition:background .25s,transform .25s}
.en-tiles a:hover{background:rgba(255,255,255,.1);transform:translateY(-3px)}
.en-tiles span{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--grad-a)}
.en-tiles b{font:700 18px/1.2 var(--display);letter-spacing:-.011em;margin-top:6px}
.en-tiles small{margin-top:auto;font-size:13px;line-height:1.45;color:rgba(255,255,255,.62)}
/* Rechnung verstehen */
.bill-lab{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,56px);align-items:start}
.bill-steps{list-style:none;margin:0;padding:0;display:grid;gap:8px;position:sticky;top:24px}
.bill-steps button{width:100%;display:flex;gap:14px;align-items:flex-start;text-align:left;padding:16px 18px;border:0;border-radius:18px;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);color:#fff;transition:background .25s,box-shadow .25s}
.bill-steps button:hover{background:rgba(255,255,255,.07)}
.bill-steps button i{flex:none;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.1);font:700 13px var(--display);font-style:normal;transition:background .25s,color .25s}
.bill-steps b{display:block;font:700 17px/1.25 var(--display);letter-spacing:-.011em}
.bill-steps small{display:block;max-height:0;overflow:hidden;opacity:0;font-size:14.5px;line-height:1.5;color:rgba(255,255,255,.7);transition:max-height .4s ease,opacity .3s ease,margin .3s}
.bill-steps button[aria-pressed=true]{background:rgba(60,192,39,.12);box-shadow:inset 0 0 0 1.5px var(--accent)}
.bill-steps button[aria-pressed=true] i{background:var(--accent);color:#0b130b}
.bill-steps button[aria-pressed=true] small{max-height:160px;opacity:1;margin-top:6px}
.bill-stage{position:relative;padding:clamp(14px,2.5vw,28px);border-radius:var(--r-xl);background:radial-gradient(600px 300px at 70% 0%,rgba(60,192,39,.12),transparent 60%),rgba(255,255,255,.03);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.bill{position:relative;max-width:520px;margin:0 auto;padding:26px 26px 20px;border-radius:14px;background:#fbfbf8;color:#1c211c;font-size:13.5px;line-height:1.45;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:rotate(-1.2deg);transition:transform .6s cubic-bezier(.2,.7,.2,1)}
.bill-lab:hover .bill{transform:rotate(0)}
.bill-head{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:14px;margin-bottom:12px;border-bottom:2px solid #1c211c}
.bill-head b{display:block;font:700 16px var(--display);letter-spacing:-.011em}
.bill-head small{color:#6a706a}
.bill-logo{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#1c211c;color:#c4ec9f}
.bill-f{position:relative;padding:10px 12px 10px 14px;margin:6px 0;border-radius:10px;transition:background .3s,box-shadow .3s,opacity .3s,transform .3s}
.bill-f>i{position:absolute;left:-12px;top:10px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:#1c211c;color:#fff;font:700 11px var(--display);font-style:normal;transition:background .3s,transform .3s}
.bill-k{display:block;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#474d47;margin-bottom:4px}
.bill-f p{margin:0}.bill-f>small{color:#474d47;font-size:12px}
.bill-f mark{background:transparent;color:inherit;font-weight:700}
.bill-rows>div{display:flex;justify-content:space-between;gap:12px;padding:3px 0;border-bottom:1px dashed #d9dbd5}
.bill-rows>div:last-child{border-bottom:0}
.bill-rows b{font-variant-numeric:tabular-nums;white-space:nowrap}
.bill-split{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.bill-foot{display:flex;justify-content:space-between;margin-top:10px;padding-top:12px;border-top:2px solid #1c211c;font-weight:700}
.bill-sheet-dim .bill-f:not(.on){opacity:.82}
.bill .bill-f.on{background:#e8f6df;box-shadow:inset 0 0 0 2px #3cc027,0 10px 26px rgba(60,192,39,.25);transform:scale(1.02);opacity:1}
.bill .bill-f.on>i{background:#3cc027;transform:scale(1.15)}
.bill .bill-f.on mark{background:#c4ec9f;border-radius:4px;padding:0 3px}
/* Zwei Wege */
.ways{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.way{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:clamp(24px,3vw,36px);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.way h3{font-size:clamp(22px,2vw,28px);margin:18px 0 0}
.way .checklist{margin-bottom:24px}
.way .btn{margin-top:auto}
.way-main{box-shadow:var(--shadow),inset 0 0 0 2px var(--accent)}
.way-tag{position:absolute;right:20px;top:20px;padding:6px 12px;border-radius:99px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;font-weight:700}
.icon-tile.soft{background:var(--accent-soft);color:var(--accent-ink);box-shadow:none}
/* Gewerbe */
.biz-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.biz-step{position:relative;padding:clamp(24px,3vw,34px);border-radius:var(--r-xl);background:#fff;box-shadow:var(--shadow);overflow:hidden}
.biz-n{position:absolute;right:18px;top:6px;font:700 76px/1 var(--display);letter-spacing:-.033em;color:transparent;-webkit-text-stroke:1.5px var(--line)}
.biz-step h3{font-size:22px;margin:20px 0 8px}
.biz-step p{color:var(--muted);font-size:16px}
.biz-limit{display:flex;gap:12px;align-items:flex-start;margin-top:22px;padding:18px 20px;border-radius:18px;background:var(--accent-soft);color:var(--ink-2)}
.biz-limit svg{flex:none;margin-top:2px;color:var(--accent-ink)}
/* Partnerkarten */
.pc-group{display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:clamp(28px,3vw,40px) 0 14px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.pc-group:first-of-type{margin-top:0}
.pc-group h3{font-size:19px;letter-spacing:-.011em}
.pc-group p{font-size:14px;color:var(--muted)}
.pcs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:22px;border-radius:22px;background:#fff;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);min-width:0}
.section.white .pc{background:var(--paper)}
.pc-ic{display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);margin-bottom:8px}
.pc h4{font:700 19px/1.2 var(--display);letter-spacing:-.011em}
.pc p{font-size:15px;color:var(--muted)}
.pc small{font-size:13px;color:var(--muted);padding-top:8px;border-top:1px solid var(--line);width:100%}
.pc .btn{margin-top:auto}
.pc>p+.btn,.pc>small+.btn{margin-top:14px}
.pc-feature{grid-column:span 2;grid-row:span 2;justify-content:flex-end;padding:clamp(24px,3vw,34px);background:linear-gradient(150deg,#16301a,#0f1a10)!important;color:#fff;box-shadow:0 30px 70px rgba(15,40,18,.35)}
.pc-feature .pc-ic{background:rgba(196,236,159,.14);color:#c4ec9f;margin-bottom:auto}
.pc-feature h4{font-size:clamp(24px,2.4vw,32px);margin-top:40px}
.pc-feature p{color:rgba(255,255,255,.72);font-size:16.5px;max-width:46ch}
.pc-feature small{color:rgba(255,255,255,.55);border-color:rgba(255,255,255,.14)}
/* v15.7 Gesamtprüfung: Solar-Karte in der Bereichsfarbe statt Orange (Marke: Schwarz, Weiß, Silber, Akzent Grün) */
.pc-sun{background:linear-gradient(150deg,#16301a,#0f1a10)!important}
.pcs-3 .pc{grid-column:auto}
.cta-list{margin-top:18px}
.cta .cta-list li{color:rgba(255,255,255,.8);font-size:15px}
/* Auswahl-Dialoge */
.opt-dialog{width:min(760px,calc(100% - 32px));max-height:min(86vh,760px);padding:clamp(20px,3vw,32px);border:0;border-radius:28px;background:var(--paper);color:var(--ink);box-shadow:0 40px 120px rgba(0,0,0,.4)}
.opt-dialog::backdrop{background:rgba(8,10,12,.55);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.opt-dialog[open]{animation:optIn .35s cubic-bezier(.2,.7,.2,1)}
@keyframes optIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.opt-head{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}
.opt-head h3{font-size:clamp(22px,2.4vw,28px)}
.opt-close{display:grid;place-items:center;width:44px;height:44px;border:0;border-radius:50%;background:rgba(20,24,28,.06);color:var(--ink)}
.opt-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.opt{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:18px;border-radius:18px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
.opt h4{font:700 17px/1.25 var(--display);letter-spacing:-.011em}
.opt p{font-size:14px;color:var(--muted);margin-bottom:12px}
.opt .btn{margin-top:auto}
.opt-dialog .footnote{margin-top:16px}
.opt-page .opt{padding:22px;box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
/* Kleiner Hero (Partnerseiten) */
.hero-sm{min-height:0;padding:clamp(96px,10vw,130px) 0 clamp(48px,6vw,72px)}
.hero-sm-row{display:flex;align-items:center;gap:18px;margin:22px 0 14px}
.hero-sm h1{margin:8px 0 0;font-size:clamp(36px,4.4vw,60px)}
.hero-sm .lead{margin-bottom:0}
@media (max-width:1180px){.pcs{grid-template-columns:repeat(2,minmax(0,1fr))}.pc-feature{grid-row:auto}.bill-lab{grid-template-columns:minmax(0,1fr)}.bill-steps{position:static}}
@media (max-width:900px){.ways,.biz-steps{grid-template-columns:minmax(0,1fr)}.en-float{left:12px;bottom:12px}}
@media (max-width:700px){
  .pcs{grid-template-columns:minmax(0,1fr)}.pc-feature{grid-column:auto}
  .bill{padding:18px 16px 14px;font-size:12.5px;transform:none}.bill-f>i{left:-8px}.bill-split{grid-template-columns:minmax(0,1fr)}
  .bill-lab{gap:16px}.bill-stage{padding:10px;margin:0 -6px}
  .bill-steps{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:8px;margin:0 -18px;padding:2px 18px 6px;scrollbar-width:none}
  .bill-steps::-webkit-scrollbar{display:none}
  .bill-steps li{flex:0 0 82%;scroll-snap-align:start}
  .bill-steps button{height:100%}
  .bill-steps small{max-height:none;opacity:.85;margin-top:6px}
  .en-tiles a{min-height:0}
  .way-tag{position:static;margin-bottom:6px}
}

/* ---------- Reveal ---------- */
.js .rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:none}
.js .rv.d1{transition-delay:.08s}.js .rv.d2{transition-delay:.16s}.js .rv.d3{transition-delay:.24s}

/* ---------- Responsive ---------- */
@media (max-width:1180px){
  .hero-grid,.split-head,.team,.cta,.intercom,.timeline,.prep,.picker,.wizard,.alarm-sim,.lab{grid-template-columns:minmax(0,1fr)}
  .cta .actions{justify-content:flex-start}
  .result,.tl-detail,.ring{position:static}
  .access-log,.tracker{left:14px}
  .floater[style*="left:-"]{left:12px!important}
  .floater[style*="right:-"]{right:12px!important}
  .floater[style*="top:-"]{top:12px!important}
  .methods{grid-template-columns:repeat(2,minmax(0,1fr))}
  .cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .cards,.pillars,.steps.six,.keycompare{grid-template-columns:minmax(0,1fr)}
  .cards.two{grid-template-columns:minmax(0,1fr)}
  .pillar{min-height:420px}
  .next{grid-template-columns:minmax(0,1fr)}
  .who{grid-template-columns:minmax(0,1fr) auto;gap:10px}
  .who .week{grid-column:1/-1;grid-row:2}
  .who-head{display:block!important;padding:0 16px!important}
  .who-head>span{display:none}
  .days{margin:0}
  .flow{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:24px}
  .flow::before,.flow .packet{display:none}
  .trust{grid-template-columns:minmax(0,1fr)}
}

/* ================= Smartphone (≤700px) ================= */
@media (max-width:700px){
  body.sx{font-size:16px}
  .wrap{padding:0 18px}
  .section{padding:52px 0}
  .section.tight{padding:32px 0}
  .head{margin-bottom:24px}
  .head h2{font-size:clamp(28px,8.2vw,36px);margin:14px 0 12px}
  .head p{font-size:16.5px}
  .pill{font-size:13px;padding:5px 12px}
  .split-head{gap:14px;margin-bottom:24px}
  .split-head .note{padding:14px 16px;font-size:14.5px;line-height:1.5;border-radius:16px;box-shadow:none;background:rgba(20,24,28,.05);color:var(--ink-2)}
  .footnote{font-size:12.5px;margin-top:14px}
  .hero-mark{display:none}

  /* Hero mobil: eigenes Konzept – Foto zuerst, Headline und eine Handlung darauf */
  .hero{--mh:clamp(560px,calc(100svh - 34px),900px);display:block;min-height:0;padding:0 0 28px;background:#0b0c0d;overflow:hidden}
  .m-hero-bg{display:block;position:absolute;left:0;right:0;top:0;height:var(--mh);z-index:0}
  .m-hero-bg picture,.m-hero-bg img{display:block;width:100%;height:100%;object-fit:cover}
  .m-hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,13,.62) 0,rgba(11,12,13,0) 120px,rgba(11,12,13,0) 36%,rgba(11,12,13,.66) 58%,rgba(11,12,13,.94) 80%,#0b0c0d 100%)}
  @media (prefers-reduced-motion:no-preference){.m-hero-bg img{animation:mHeroIn 1.6s cubic-bezier(.2,.7,.2,1) both}}
  @keyframes mHeroIn{from{transform:scale(1.08);opacity:.6}to{transform:none;opacity:1}}
  .m-hero-bg--bright img{filter:brightness(.62) contrast(1.08) saturate(.9)}
  .hero-grid{position:relative;z-index:1;gap:0}
  .hero-grid>div:first-child{min-height:var(--mh);display:flex;flex-direction:column;justify-content:flex-end;padding:84px 0 26px}
  .hero .crumbs,.hero .lead,.hero .trust{display:none}
  .lead-m{display:block;font-size:17px;line-height:1.5;color:rgba(255,255,255,.8);margin:0 0 22px;max-width:30em;text-wrap:pretty}
  .chapters{margin:0 0 16px;gap:4px}
  .chapters a{display:flex;flex-direction:column;justify-content:center;min-height:44px;font-size:11px;letter-spacing:.05em;color:rgba(255,255,255,.62)}
  .chapters a i{margin-bottom:7px;background:rgba(255,255,255,.22)}
  .hero h1{font-size:clamp(36px,10.8vw,48px);line-height:1;margin:0 0 14px;text-shadow:0 2px 24px rgba(0,0,0,.35)}
  .hero .actions{flex-direction:column;align-items:stretch;gap:4px;margin:0}
  .hero .actions .btn-ghost{background:none;box-shadow:none;min-height:44px;padding:6px 0;font-size:15.5px;font-weight:600;color:rgba(255,255,255,.78);text-decoration:underline;text-underline-offset:5px;text-decoration-color:rgba(255,255,255,.3)}
  .hero .actions .btn-ghost:hover{transform:none;background:none}
  .btn{white-space:normal;text-align:center;width:100%;min-height:54px;font-size:16.5px;padding:12px 20px}
  .actions{flex-direction:column;gap:10px}
  .floater,.m-hide{display:none!important}
  .hero-grid>div+div{margin-top:6px}
  .access-hero .photo,.hero .repair-photo{display:none}
  .access-log,.tracker{position:relative;left:auto!important;bottom:auto;width:100%;margin-top:0}
  .monitor{padding:8px;border-radius:20px}
  .screen{border-radius:13px}
  .osd{font-size:11px}
  .cam-tabs{gap:6px}
  .cam-tabs button{font-size:13.5px;padding:8px 10px}

  /* Haus-Explorer: Bild randlos, Ebenen darunter, Stationen als Wischkarten */
  .explorer-wrap{margin:0 -18px}
  .explorer{border-radius:0;box-shadow:none}
  .explorer .spot-card{display:none!important}
  .spot{width:44px;height:44px}
  .spot.is-active::before{background:var(--accent);transform:scale(1.15)}
  .spot.is-active span{color:#fff}
  .layer-bar{position:static;margin:12px 18px 0;display:block}
  .layer-bar .seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;background:rgba(255,255,255,.07);backdrop-filter:none;-webkit-backdrop-filter:none}
  .layer-bar .seg button{min-height:44px;font-size:14px;padding:8px 4px}
  .spot-list{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px;padding:12px 18px 4px;scroll-padding:0 18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .spot-list::-webkit-scrollbar{display:none}
  .spot-item{flex:0 0 86%;scroll-snap-align:start;display:flex;gap:12px;padding:16px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);color:#fff;transition:box-shadow .25s,background .25s}
  .spot-item.is-active{background:rgba(18,181,211,.14);box-shadow:inset 0 0 0 1.5px rgba(121,218,255,.55)}
  .spot-n{width:30px;height:30px;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center;font:700 13px var(--display);flex:none}
  .spot-item.is-active .spot-n{background:var(--accent);color:#fff}
  .spot-item .k{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--grad-a)}
  .spot-item h3{font-size:18px;margin:3px 0 6px;letter-spacing:-.011em}
  .spot-item p{font-size:14.5px;color:rgba(255,255,255,.72);line-height:1.45}
  .spot-item .textlink{margin-top:8px;min-height:40px;color:var(--grad-a)}
  .spot-dots,.car-dots{display:flex;justify-content:center;gap:6px;margin-top:12px}
  .spot-dots i,.car-dots i{width:6px;height:6px;border-radius:3px;background:rgba(20,24,28,.18);transition:width .25s,background .25s}
  .spot-dots i{background:rgba(255,255,255,.25)}
  .spot-dots i.on,.car-dots i.on{width:18px;background:var(--accent)}

  /* Karten: kompakte Zeilen statt hoher Kacheln */
  .cards,.cards.four{grid-template-columns:minmax(0,1fr);gap:10px}
  .card{border-radius:20px;padding:18px}
  .card:has(>.icon-tile){display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:14px;align-items:start}
  .card>.icon-tile{width:44px;height:44px;border-radius:13px;grid-row:span 2;box-shadow:none}
  .card>.icon-tile svg{width:22px;height:22px}
  .card h3{font-size:18px;margin:12px 0 6px}
  .card:has(>.icon-tile) h3{margin:1px 0 4px}
  .card p{font-size:15px;line-height:1.5}
  .checklist{margin-top:12px;gap:8px}
  .checklist li{font-size:15px}

  /* Bereiche & Zugangsmedien als Karussell */
  .pillars,.methods{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;margin:0 -18px;padding:4px 18px 8px;scroll-padding:0 18px;scrollbar-width:none;overscroll-behavior-x:contain}
  .pillars::-webkit-scrollbar,.methods::-webkit-scrollbar{display:none}
  .pillar{flex:0 0 84%;min-height:400px;scroll-snap-align:start;border-radius:24px}
  .pillar .body{padding:22px}
  .method{flex:0 0 80%;scroll-snap-align:start;border-radius:20px}
  .method .photo,.method .ic{aspect-ratio:16/10}
  .method .ic{height:auto;padding-bottom:0}
  .method div.t{padding:16px 18px 18px}

  .steps{grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:18px}
  .step-card{padding:18px;border-radius:20px}
  .step-card .top{margin-bottom:10px}
  .step-card h3{font-size:18px;margin-bottom:4px}
  .step-card p{font-size:15px}

  /* Labore: Wirkung immer im Blick (Ergebnis klebt oben, Regler darunter) */
  .lab{padding:14px;gap:16px;border-radius:24px;margin:0 -6px}
  .seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);width:100%;padding:5px;gap:4px}
  .seg button{padding:8px 6px;font-size:14.5px;min-height:46px;line-height:1.15}
  .seg small{display:block;font-size:11.5px;font-weight:500;opacity:.7;margin-top:2px}
  .seg small .sep,.seg .lg{display:none}
  .field{margin-top:18px;gap:6px}
  .lab[data-fov] .lab-stage{order:-1;position:sticky;top:8px;z-index:3;box-shadow:0 14px 34px rgba(0,0,0,.5)}
  .lab[data-fov] .legend{padding:0 10px 10px!important;gap:4px 10px;font-size:11px;margin-top:6px}
  .lab[data-fov] .legend span:first-child{display:none}
  .readouts{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:16px}
  .readout{padding:10px 8px;border-radius:12px}
  .readout b{font-size:17px}
  .readout small{font-size:11px}
  .notice{font-size:13.5px;padding:10px 12px}
  .compare{border-radius:20px;margin:0 -6px}
  .compare .handle i{width:46px;height:46px}
  .compare .tagl,.compare .tagr{font-size:11.5px;top:10px}
  .compare .tagl{left:10px}.compare .tagr{right:10px}
  .mask{font-size:10px}
  .flow{gap:10px}
  .node .disc{width:72px;height:72px;border-radius:20px;margin-bottom:10px}
  .node svg{width:32px;height:32px}
  .node-info{padding:16px;min-height:0;margin-top:18px}

  /* Alarm-Simulation */
  [data-alarm]>div:first-child{gap:10px!important}
  [data-alarm] [data-reset]{width:auto;min-height:44px;margin-left:auto}
  .alarm-sim{gap:12px}
  .floor{padding:4px!important}
  .floor .rname{font-size:22px}
  .floor .slabel{font-size:21px}
  .phone-toast{top:auto;bottom:8px;left:8px;right:8px;width:auto;transform:translateY(150%)}
  .phone-toast.on{transform:none}
  .panel{padding:14px}
  .state{padding:12px;margin-bottom:10px}
  .countdown{font-size:36px}
  .log{max-height:210px;font-size:13.5px}

  /* Zutritt */
  .who{padding:12px 14px}
  .who [data-revoke]{min-height:44px!important;padding-top:0!important}
  .time-now{font-size:26px}
  .keycol{padding:18px;border-radius:22px}
  .keycol li{font-size:14.5px;padding:10px 12px}
  .intercom{gap:18px}
  .intercom>div:first-child{display:contents}
  .intercom>div:first-child>.pill{order:1;justify-self:start}
  .intercom>div:first-child>h2{order:2;font-size:clamp(30px,8.4vw,38px)!important;margin:0!important}
  .intercom>div:first-child>p{order:3;font-size:16.5px!important}
  .intercom>div:first-child>.actions{order:4;margin-top:0!important}
  .intercom>div:last-child{order:5}
  .intercom>div:first-child>.ic-steps{order:6;margin-top:0}
  .phone{width:min(236px,72vw)}

  /* Reparatur */
  .devices{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
  .device{padding:12px 4px;font-size:13.5px}
  .device svg{width:30px;height:30px}
  .diag{padding:18px;border-radius:22px}
  .tl-list li>.tl-detail{position:static;margin:8px 0 6px;padding:18px;border-radius:18px;box-shadow:inset 0 0 0 2px var(--accent-soft)}
  .tl-detail .cols{grid-template-columns:minmax(0,1fr);gap:8px;margin-top:14px}
  .tl-detail h3{font-size:21px}
  .prep{gap:12px}
  .ring{order:-1;position:sticky;top:8px;z-index:3;display:flex;align-items:center;gap:16px;text-align:left;padding:12px 16px;border-radius:20px}
  .ring-dial{width:64px;height:64px;margin:0;flex:none}
  .ring .val{font-size:17px}
  .ring p{font-size:14px}
  .prep-item{padding:14px;border-radius:16px}
  .prep-item b{font-size:15.5px}
  .prep-item small{font-size:13.5px}

  /* Check */
  .q{padding:18px;border-radius:22px}
  .q+.q{margin-top:10px}
  .q legend{font-size:18px}
  .q .hint{font-size:13.5px;margin-bottom:10px}
  .chip span{padding:9px 13px;font-size:14.5px}
  .result{padding:20px;border-radius:22px}

  /* Team, FAQ, CTA, Weiter, Footer */
  .team{gap:22px}
  .team>div:last-child{order:-1}
  .team-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .person{border-radius:20px}
  .person img{aspect-ratio:1/1.05}
  .person div{padding:10px 12px 12px}
  .person b{font-size:15px}
  .person small{font-size:12px;line-height:1.3;display:block}
  .faq{gap:8px}
  .faq details{border-radius:16px}
  .faq summary{padding:15px 16px;font-size:16px;min-height:56px}
  .faq .a{padding:0 16px 16px;font-size:15px}
  .cta{padding:26px 20px;border-radius:24px;gap:18px}
  .cta h2{font-size:clamp(26px,7.6vw,32px);margin:12px 0 8px}
  .next{border-radius:22px}
  .next .photo{min-height:0;aspect-ratio:16/9}
  .next .txt{padding:20px}
  .next h3{font-size:26px}
  .sx-footer{padding:30px 0 20px}
  .sx-footer nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;width:100%}
  .sx-footer nav a{min-height:44px;display:flex;align-items:center}
}
@media (prefers-reduced-motion:reduce){
  .sx *,.sx *::before,.sx *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .js .rv{opacity:1;transform:none}
}

/* ---------- Speicherrechner v13: Rekorder mit Ringspeicher ---------- */
.sto{--cp-c:#79daff;--amber:#ffc46b;--accent:#79daff;--accent-glow:rgba(121,218,255,.22);border-radius:28px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#16191c,#0f1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 50px 120px rgba(0,0,0,.45)}
.sto[data-over=true] #st-days{--accent:var(--amber);--accent-glow:rgba(255,196,107,.22)}
.sto-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,3.4vw,52px);align-items:center;padding:clamp(22px,3vw,40px) clamp(20px,3vw,40px) clamp(18px,2.4vw,30px)}
.sto-disk{margin:0;display:grid;justify-items:center;gap:18px;min-width:0}
.sto-ring{position:relative;width:min(100%,390px);aspect-ratio:1}
.sto-ring svg{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 34px 48px rgba(0,0,0,.55))}
.sto-plat{stroke:rgba(255,255,255,.09);stroke-width:1}
.sto-grooves circle{fill:none;stroke:rgba(255,255,255,.035);stroke-width:1}
.sto-track{fill:none;stroke:rgba(255,255,255,.055);stroke-width:26}
.sto-dial line{stroke:rgba(255,255,255,.16);stroke-width:1.2}
.sto-dial line.l{stroke:rgba(255,255,255,.38);stroke-width:1.6}
.sto-win{transform-box:view-box;transform-origin:50% 50%;animation:stoSpin 70s linear infinite}
@keyframes stoSpin{to{transform:rotate(360deg)}}
.sto-seg{fill:none;stroke:var(--cp-c);stroke-width:26}
.sto-head{fill:#fff}
.sto-head-glow{fill:var(--cp-c);opacity:.55;filter:url(#sto-glow)}
.sto-tail{fill:#ff8a80;stroke:#14171a;stroke-width:3}
.sto-center{position:absolute;inset:22%;display:grid;place-content:center;justify-items:center;gap:8px;text-align:center;pointer-events:none}
.sto-center .cp-k{justify-content:center}
.sto-center b{font:700 clamp(36px,4.6vw,56px)/1 var(--display);letter-spacing:-.028em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sto-center small{font-size:13px;line-height:1.4;color:rgba(255,255,255,.58);font-variant-numeric:tabular-nums}
.sto-legend{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 20px;font-size:12.5px;color:rgba(255,255,255,.55)}
.sto-legend span{display:inline-flex;align-items:center;gap:8px}
.sto-legend i{width:9px;height:9px;border-radius:50%}
.sto-lg-h{background:#fff;box-shadow:0 0 0 3px rgba(121,218,255,.35)}
.sto-lg-t{background:#ff8a80}
.sto-side{display:grid;gap:22px;min-width:0}
.sto-nvr{display:flex;align-items:center;gap:18px;padding:15px 18px;border-radius:14px;background:linear-gradient(180deg,#25292d,#1a1d20);box-shadow:inset 0 1px 0 rgba(255,255,255,.09),inset 0 0 0 1px rgba(255,255,255,.06),0 14px 30px rgba(0,0,0,.35)}
.sto-nvr-n{font:700 12px var(--display);letter-spacing:.22em;color:rgba(255,255,255,.6)}
.sto-leds{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.sto-leds i{width:9px;height:9px;border-radius:2.5px;background:rgba(255,255,255,.09);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);transition:background .2s,box-shadow .2s}
.sto-leds i.on{background:var(--cp-c);box-shadow:0 0 9px rgba(121,218,255,.75)}
.sto-hdd{display:inline-flex;align-items:center;gap:7px;font:600 11px ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.06em;color:rgba(255,255,255,.5)}
.sto-hdd i{width:7px;height:7px;border-radius:50%;background:#7dffb0;box-shadow:0 0 8px rgba(125,255,176,.7);animation:stoHdd .9s steps(2,jump-none) infinite}
@keyframes stoHdd{50%{opacity:.15;box-shadow:none}}
.sto-stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0;border-radius:14px;overflow:hidden;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.sto-stats div{padding:14px 16px 15px;background:#131619}
.sto-stats dt{font-size:11px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.sto-stats dd{margin:7px 0 0;font:700 23px/1.1 var(--display);letter-spacing:-.014em;color:#fff;font-variant-numeric:tabular-nums;white-space:nowrap}
.sto-time{display:grid;gap:0}
.sto-time .cp-k output{color:var(--cp-c)}
.sto[data-over=true] .sto-time .cp-k output{color:var(--amber)}
.sto-tl{position:relative;height:12px;margin-top:34px;border-radius:7px;background:rgba(255,255,255,.07)}
.sto-tl>i{position:absolute;top:0;bottom:0;transition:left .3s ease,width .3s ease}
.sto-tl-ok{left:0;border-radius:7px 0 0 7px;background:var(--cp-c)}
.sto-tl-over{border-radius:0 7px 7px 0;background:repeating-linear-gradient(135deg,var(--amber) 0 5px,rgba(255,196,107,.5) 5px 10px)}
.sto-72{position:absolute;top:-26px;bottom:-5px;border-left:1.5px dashed rgba(255,255,255,.75)}
.sto-72 b{position:absolute;top:-3px;left:7px;font:700 12px var(--display);white-space:nowrap;color:#fff}
.sto-full{position:absolute;top:50%;width:14px;height:14px;margin:-7px 0 0 -7px;transform:rotate(45deg);border-radius:2px;background:#fff;box-shadow:0 0 0 3px #14171a;transition:left .3s ease}
.sto-full.beyond{background:transparent;box-shadow:inset 0 0 0 2px #fff,0 0 0 3px #14171a}
.sto-ticks{margin-top:10px}
.sto-ticks span:last-child::after{content:none}
.sto-tl-legend{list-style:none;display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;font-size:12.5px;color:rgba(255,255,255,.55)}
.sto-tl-legend li{display:inline-flex;align-items:center;gap:7px}
.sto-tl-legend i{width:10px;height:10px;border-radius:3px}
.sto-tl-legend b{color:#fff;font-weight:650;font-variant-numeric:tabular-nums}
.sto-lg-ok{background:var(--cp-c)}
.sto-lg-over{background:repeating-linear-gradient(135deg,var(--amber) 0 3px,rgba(255,196,107,.5) 3px 6px)}
.sto-lg-full{width:9px!important;height:9px!important;border-radius:1.5px!important;transform:rotate(45deg);background:#fff}
.sto-verdict{margin:0;padding:16px 18px;border-radius:14px;font-size:14.5px;line-height:1.55;color:rgba(255,255,255,.7);background:rgba(121,218,255,.07);box-shadow:inset 0 0 0 1px rgba(121,218,255,.22)}
.sto-verdict b{display:block;margin-bottom:4px;font:700 18px var(--display);letter-spacing:-.011em;color:var(--cp-c)}
.sto[data-over=true] .sto-verdict{background:rgba(255,196,107,.07);box-shadow:inset 0 0 0 1px rgba(255,196,107,.25)}
.sto[data-over=true] .sto-verdict b{color:var(--amber)}
.sto-verdict span:last-child{display:block;margin-top:8px;color:#fff}
.sto-controls{grid-template-columns:minmax(0,1fr) auto auto minmax(0,1fr);padding:20px clamp(20px,3vw,40px) 18px}
@media (prefers-reduced-motion:reduce){.sto-win,.sto-hdd i{animation:none}}
@media (max-width:1100px){.sto-main{grid-template-columns:minmax(0,1fr)}.sto-ring{width:min(100%,360px)}.sto-controls{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:700px){
  .sto{border-radius:22px;margin:0 -6px}
  .sto .cp-meta{display:none}
  .sto{display:flex;flex-direction:column}
  .sto-main{display:contents}
  .sto-disk{order:1;padding:20px 16px 4px}
  .sto-controls{order:2}
  .sto-side{order:3;padding:4px 16px 18px;gap:20px}
  .sto-ring{width:min(100%,300px)}
  .sto-center b{font-size:38px}.sto-center small{font-size:12px}
  .sto-nvr{padding:12px 14px;gap:12px}.sto-leds{gap:4px}.sto-leds i{width:7px;height:7px}
  .sto-stats dd{font-size:19px}.sto-stats div{padding:12px 13px}
  .sto-controls{grid-template-columns:minmax(0,1fr);padding:14px 16px 18px;border-top:0}
  .sto-controls .seg{width:100%}.sto-controls .seg button{flex:1}
}

/* ---------- Privatzonen v13: Kamerabild mit Maske ---------- */
.pz{border-radius:24px;box-shadow:0 40px 100px rgba(10,12,14,.28),inset 0 0 0 1px rgba(255,255,255,.08);cursor:ew-resize}
.pz>img{filter:saturate(.9) contrast(1.04)}
.pz::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(130% 100% at 50% 45%,transparent 60%,rgba(0,0,0,.35)),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px)}
.pz-svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.pz-mask{fill:rgba(9,11,13,.96);stroke:rgba(255,255,255,.55);stroke-width:2.5;stroke-dasharray:10 7}
.pz-chip{position:absolute;z-index:1;display:inline-flex;align-items:center;gap:9px;padding:8px 13px 8px 10px;border-radius:12px;transform:translate(-50%,-50%);background:rgba(255,255,255,.1);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.18);color:#fff;font:700 13px/1.15 var(--display);white-space:nowrap}
.pz-chip svg{width:16px;height:16px;flex:none;opacity:.9}
.pz-chip small{display:block;margin-top:2px;font:500 11.5px var(--body);color:rgba(255,255,255,.65)}
.pz-line{z-index:2}
.pz-line path{fill:none;stroke:#ffc46b;stroke-width:3;stroke-dasharray:14 9;stroke-linecap:round;filter:drop-shadow(0 1px 3px rgba(0,0,0,.6))}
.pz-bound{position:absolute;z-index:2;transform:rotate(-1.2deg);transform-origin:left top;margin-top:6px;font:700 11px var(--body);letter-spacing:.12em;text-transform:uppercase;color:#ffc46b;text-shadow:0 1px 3px rgba(0,0,0,.8);pointer-events:none;white-space:nowrap}
.pz-osd{position:absolute;z-index:3;top:16px;left:18px;display:flex;align-items:center;gap:12px;font:600 12px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.05em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.85);pointer-events:none;font-variant-numeric:tabular-nums}
.pz-rec{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.45)}
.pz-rec i{width:7px;height:7px;border-radius:50%;background:#ff5a4e;animation:cpLive 1.6s ease-in-out infinite}
.pz-time{left:auto;right:18px}
.pz .tagl,.pz .tagr{top:auto;bottom:16px;z-index:3;padding:8px 13px;border-radius:99px;background:rgba(12,14,16,.62);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;font:650 12.5px var(--body)}
.pz .tagl{left:16px}.pz .tagr{right:16px}
@media (max-width:700px){
  .pz{border-radius:20px}
  .pz-osd{top:10px;left:10px;font-size:10px;gap:7px}.pz-time{left:auto;right:10px}.pz-osd span:not(.pz-rec){display:none}.pz-time.pz-osd{display:flex}
  .pz-chip{left:auto!important;right:8px;transform:translateY(-50%);font-size:11px;padding:6px 9px 6px 8px;gap:6px}.pz-chip small{font-size:9.5px}.pz-chip svg{width:13px;height:13px}
  .pz-bound{display:none}
  .pz .tagl,.pz .tagr{bottom:10px;font-size:11px;padding:6px 10px}.pz .tagl{left:10px}.pz .tagr{right:10px}
}

/* ---------- Zutrittsplaner v13: Zeitfenster wie in einer Verwaltungsoberfläche ---------- */
.zp{--cp-c:#79daff;--accent:#79daff;--accent-glow:rgba(121,218,255,.22);border-radius:28px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#16191c,#0f1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 50px 120px rgba(0,0,0,.45)}
.zp-door{display:grid;place-items:center;width:28px;height:28px;border-radius:8px;background:rgba(121,218,255,.12);color:var(--cp-c)}
.zp-door svg{width:16px;height:16px}
.zp .cp-meta b{color:var(--cp-c);font-weight:700}
.zp-play svg{width:15px;height:15px}
.zp-i-play{fill:currentColor}.zp-i-pause{display:none;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round}
.zp-play[aria-pressed=true] .zp-i-play{display:none}.zp-play[aria-pressed=true] .zp-i-pause{display:inline}
.zp-play[aria-pressed=true]{background:rgba(121,218,255,.14);color:#fff;box-shadow:inset 0 0 0 1px rgba(121,218,255,.4)}
.zp-now{display:flex;flex-wrap:wrap;gap:16px 48px;align-items:flex-end;justify-content:space-between;padding:26px 28px 6px}
.zp-time{margin-top:10px;font:700 clamp(28px,3.2vw,42px)/1.05 var(--display);letter-spacing:-.022em;font-variant-numeric:tabular-nums;white-space:nowrap}
.zp-scrub{flex:1;min-width:240px;max-width:620px}
.zp-scrub .range-ends{font-size:11.5px}
.zp-grid{padding:6px 28px 8px}
.zp-row,.zp-head{display:grid;grid-template-columns:minmax(200px,250px) minmax(0,1fr) 224px;gap:24px;align-items:center}
.zp-head{padding:14px 0 10px}
.zp-days{position:relative;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding-top:30px;font-size:11px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.38)}
.zp-days span{padding-left:7px;border-left:1px solid rgba(255,255,255,.1);transition:color .2s}
.zp-days span.on{color:#fff}
.zp-bubble{position:absolute;z-index:1;top:0;left:clamp(36px,var(--t,20%),calc(100% - 36px));transform:translateX(-50%);padding:4px 9px;border-radius:7px;background:#fff;color:#0b0c0d;font:700 11.5px/1.2 var(--body);letter-spacing:0;text-transform:none;white-space:nowrap;font-variant-numeric:tabular-nums;box-shadow:0 6px 16px rgba(0,0,0,.4)}
.zp-days::before{content:"";position:absolute;left:var(--t,20%);top:18px;bottom:-10px;width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.55)}
.zp-row{padding:16px 0;border-top:1px solid rgba(255,255,255,.07)}
.zp-who{display:flex;align-items:center;gap:14px;min-width:0;transition:opacity .3s}
.zp-av{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:rgba(121,218,255,.09);color:var(--cp-c);box-shadow:inset 0 0 0 1px rgba(121,218,255,.22)}
.zp-av svg{width:20px;height:20px}
.zp-who b{display:block;font:700 16px var(--display);letter-spacing:-.011em;color:#fff}
.zp-who small{display:flex;flex-wrap:wrap;align-items:center;gap:0 5px;margin-top:3px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.55)}
.zp-who small svg{width:14px;height:14px;flex:none;margin-right:2px;opacity:.75}
.zp-week{position:relative;height:36px;border-radius:9px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/7 - 1px),rgba(255,255,255,.1) calc(100%/7 - 1px) calc(100%/7)),linear-gradient(90deg,rgba(0,0,0,.22) 0 25%,transparent 25% 91.667%,rgba(0,0,0,.22) 91.667%) 0 0/calc(100%/7) 100% repeat-x,rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.zp-win{position:absolute;top:6px;bottom:6px;min-width:4px;border-radius:6px;background:rgba(121,218,255,.32);box-shadow:inset 0 0 0 1px rgba(121,218,255,.7);transition:background .25s,box-shadow .25s}
.zp-win.on{background:var(--cp-c);box-shadow:0 0 0 1px var(--cp-c),0 0 22px rgba(121,218,255,.55)}
.zp-cursor{position:absolute;top:-17px;bottom:-17px;left:var(--t,20%);width:2px;margin-left:-1px;background:#fff;box-shadow:0 0 10px rgba(255,255,255,.55);pointer-events:none}
.zp-state{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.zp-badge{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 12px;border-radius:99px;font-size:13px;font-weight:700;white-space:nowrap;background:rgba(255,255,255,.06);color:rgba(255,255,255,.5);transition:background .2s,color .2s}
.zp-badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.zp-badge.yes{background:rgba(60,192,39,.15);color:#9ff08a}
.zp-badge.yes::before{box-shadow:0 0 8px #9ff08a}
.zp-badge.off{background:rgba(255,90,78,.14);color:#ff9a90}
.zp-lock{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 11px;border:0;border-radius:99px;background:rgba(255,255,255,.06);color:rgba(255,255,255,.72);font-size:12.5px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.1);cursor:pointer}
.zp-lock svg{width:15px;height:15px}
.zp-lock:hover{background:rgba(255,255,255,.12);color:#fff}
.zp-lock[aria-pressed=true]{background:rgba(255,90,78,.16);color:#ffb0a8;box-shadow:inset 0 0 0 1px rgba(255,90,78,.45)}
.zp-row.revoked .zp-who{opacity:.45}
.zp-row.revoked .zp-win{background:repeating-linear-gradient(135deg,rgba(255,90,78,.55) 0 5px,rgba(255,90,78,.12) 5px 10px);box-shadow:inset 0 0 0 1px rgba(255,90,78,.55)}
.zp-foot{display:flex;align-items:center;gap:22px;min-height:76px;padding:14px 28px 18px;border-top:1px solid rgba(255,255,255,.07);background:rgba(255,255,255,.02)}
.zp-log{list-style:none;flex:1;min-width:0;display:flex;gap:10px;margin:0;padding:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,#000 82%,transparent);mask-image:linear-gradient(90deg,#000 82%,transparent)}
.zp-log li{flex:none;display:flex;align-items:center;gap:9px;padding:9px 13px;border-radius:12px;background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08);font-size:12.5px;color:rgba(255,255,255,.68);white-space:nowrap;animation:zpIn .35s ease}
.zp-log li:nth-child(2){opacity:.75}.zp-log li:nth-child(3){opacity:.5}
.zp-log li.zp-empty{flex:1;white-space:normal;background:none;box-shadow:none;padding:0;color:rgba(255,255,255,.45);animation:none}
.zp-log i{width:8px;height:8px;border-radius:50%;background:var(--cp-c)}
.zp-log li.open i{background:#9ff08a;box-shadow:0 0 8px #9ff08a}
.zp-log li.close i{background:rgba(255,255,255,.4)}
.zp-log li.lock i{background:#ff8a80;box-shadow:0 0 8px #ff8a80}
.zp-log time{font:600 11.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.5);font-variant-numeric:tabular-nums}
.zp-log b{color:#fff;font-weight:650}
@keyframes zpIn{from{opacity:0;transform:translateX(-12px)}}
@media (prefers-reduced-motion:reduce){.zp-log li{animation:none}}
@media (max-width:980px){
  .zp-row{grid-template-columns:minmax(0,1fr) auto;gap:12px 14px}
  .zp-row .zp-week{grid-column:1/-1;grid-row:2}
  .zp-head{grid-template-columns:minmax(0,1fr)}.zp-head>span{display:none}
  .zp-cursor{top:-6px;bottom:-6px}
  .zp-foot{flex-direction:column;align-items:stretch;gap:10px}
  .zp-log{flex-direction:column;-webkit-mask-image:none;mask-image:none}
  .zp-log li:nth-child(n+3){display:none}
}
@media (max-width:700px){
  .zp{border-radius:22px;margin:0 -6px}
  .zp .cp-meta{display:none}.zp-play span{display:none}.zp-play{padding:0 12px}
  .zp-now{flex-direction:column;align-items:stretch;padding:18px 16px 4px;gap:8px}.zp-time{font-size:26px}
  .zp-scrub{min-width:0;width:100%}
  .zp-grid{padding:4px 16px 6px}
  .zp-days{font-size:10px;letter-spacing:.06em}.zp-days span{padding-left:4px}
  .zp-row{padding:14px 0}
  .zp-av{width:36px;height:36px;border-radius:10px}.zp-av svg{width:17px;height:17px}
  .zp-who{gap:10px}.zp-who b{font-size:15px}.zp-who small{font-size:11.5px}
  .zp-state{flex-direction:column;align-items:flex-end;gap:6px}
  .zp-badge,.zp-lock{min-height:30px;font-size:12px;padding:0 10px}
  .zp-foot{padding:12px 16px 16px}
  .zp-log li{white-space:normal;flex-wrap:wrap}
}

/* ---------- Sicherheits-Check v13: Schutzebenen am Objekt ---------- */
.chk-house{display:block;width:100%;height:auto;margin:20px 0 14px;overflow:visible}
.ch-ground{stroke:rgba(255,255,255,.22);stroke-width:1.5}
.ch-body rect,.ch-body path{fill:rgba(255,255,255,.035);stroke:rgba(255,255,255,.34);stroke-width:1.5;stroke-linejoin:round}
.ch-body [data-obj]{display:none}
.chk-house[data-obj=Einfamilienhaus] [data-obj=Einfamilienhaus],.chk-house[data-obj=Wohnung] [data-obj=Wohnung],.chk-house[data-obj=Gewerbe] [data-obj=Gewerbe]{display:inline}
.ch-body .ch-faint{fill:rgba(255,255,255,.03);stroke:rgba(255,255,255,.14)}
.ch-body .ch-line{fill:none;stroke:rgba(255,255,255,.14)}
.ch-body .ch-band{fill:rgba(121,218,255,.08);stroke:rgba(255,255,255,.34)}
.ch-body .ch-win{fill:rgba(255,255,255,.07)}
.ch-body .ch-door{fill:rgba(255,255,255,.08)}
.ch-l{opacity:.32;transition:opacity .4s ease}
.chk-house[data-video=on] [data-l=video],.chk-house[data-alarm=on] [data-l=alarm],.chk-house[data-access=on] [data-l=access]{opacity:1}
.chk-house[data-video=off] [data-l=video],.chk-house[data-alarm=off] [data-l=alarm],.chk-house[data-access=off] [data-l=access]{opacity:.08}
.ch-cone{fill:rgba(121,218,255,.12);stroke:rgba(121,218,255,.45);stroke-width:1;stroke-dasharray:3 4}
.ch-scan{fill:rgba(121,218,255,.22);opacity:0}
.chk-house[data-video=on] .ch-scan{animation:chScan 2.8s ease-in-out infinite}
.chk-house[data-video=on] .ch-scan+.ch-scan{animation-delay:1.4s}
@keyframes chScan{0%,100%{opacity:0}50%{opacity:1}}
.ch-cam rect{fill:#79daff}
[data-l=alarm] circle{fill:#79daff}
.ch-siren{fill:#79daff}
.ch-wave{fill:none;stroke:#79daff;stroke-width:1.8;stroke-linecap:round;opacity:0}
.chk-house[data-alarm=on] .ch-wave{animation:chWave 1.6s ease-out infinite}
.chk-house[data-alarm=on] .ch-wave.w2{animation-delay:.3s}
@keyframes chWave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.ch-door-on{fill:rgba(121,218,255,.18);stroke:#79daff;stroke-width:2}
.chk-house[data-access=on] .ch-door-on{filter:drop-shadow(0 0 8px rgba(121,218,255,.6))}
.ch-pad{fill:#0f1214;stroke:#79daff;stroke-width:1.5}
.ch-pad-dots{stroke:#79daff;stroke-width:1.4;stroke-linecap:round}
@media (prefers-reduced-motion:reduce){.chk-house *{animation:none!important}}

/* ---------- Systemweg v13: Schema PoE / WLAN ---------- */
.sw{--cp-c:#79daff;--amber:#ffc46b;border-radius:28px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#16191c,#0f1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 50px 120px rgba(0,0,0,.45)}
.sw-seg{margin-left:auto;padding:4px;border-radius:12px}
.sw-seg button{min-height:36px;padding:6px 14px;font-size:13.5px;border-radius:9px;gap:7px}
.sw-seg svg{width:16px;height:16px}
.sw-main{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,1fr)}
.sw-plan{margin:0;padding:18px 18px 16px;border-right:1px solid rgba(255,255,255,.07)}
.sw-svg{display:block;width:100%;height:auto;overflow:visible}
.sw [data-only]{transition:opacity .35s}
.sw[data-link=poe] [data-only=wifi],.sw[data-link=wifi] [data-only=poe]{opacity:0;pointer-events:none;visibility:hidden}
.sw-legend span[data-only]{transition:none}
.sw-roof{fill:rgba(255,255,255,.025);stroke:rgba(255,255,255,.28);stroke-width:1.5;stroke-linejoin:round}
.sw-house{fill:rgba(255,255,255,.035);stroke:none}
.sw-wall{fill:none;stroke:rgba(255,255,255,.3);stroke-width:5;stroke-linecap:square}
.sw-tech{stroke:none}
.sw-ground{stroke:rgba(255,255,255,.25);stroke-width:1.5}
.sw-cone{fill:rgba(121,218,255,.08);stroke:rgba(121,218,255,.3);stroke-dasharray:4 5}
.sw-lbl{font:700 13px var(--body);letter-spacing:.12em;text-transform:uppercase;fill:rgba(255,255,255,.45)}
.sw-tag{font:600 15px var(--body);fill:rgba(255,255,255,.75)}
.sw-cable{fill:none;stroke:rgba(121,218,255,.55);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.sw-cable.thin{stroke:rgba(255,196,107,.6);stroke-width:2.5;stroke-dasharray:2 5}
.sw-air{fill:none;stroke:rgba(121,218,255,.55);stroke-width:2;stroke-dasharray:3 7;stroke-linecap:round}
.sw-air.dim{stroke:rgba(255,255,255,.28)}
.sw-wavemark path{fill:none;stroke:rgba(255,196,107,.7);stroke-width:2;stroke-linecap:round}
.sw-pk.data{fill:var(--cp-c);filter:drop-shadow(0 0 4px rgba(121,218,255,.9))}
.sw-pk.power{fill:var(--amber);filter:drop-shadow(0 0 4px rgba(255,196,107,.9))}
.sw-cam rect{fill:#e9edf0}
.sw-phone rect{fill:#0b0c0d;stroke:rgba(255,255,255,.5);stroke-width:1.5}
.sw-phone .sw-phone-s{fill:rgba(121,218,255,.1);stroke:none}
.sw-node{cursor:pointer;outline:none;color:#fff}
.sw-disc{fill:#1b1f23;stroke:rgba(255,255,255,.28);stroke-width:1.5;transition:fill .2s,stroke .2s}
.sw-halo{fill:rgba(121,218,255,.14);stroke:rgba(121,218,255,.45);opacity:0;transition:opacity .25s}
.sw-node:hover .sw-disc{stroke:#fff}
.sw-node.on .sw-disc{fill:#0e2a35;stroke:var(--cp-c);stroke-width:2}
.sw-node.on .sw-halo{opacity:1;animation:swHalo 2s ease-in-out infinite}
.sw-node:focus-visible .sw-disc{stroke:var(--cp-c);stroke-width:3}
.sw-node.on{color:var(--cp-c)}
@keyframes swHalo{50%{opacity:.4}}
.sw-legend{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:10px;font-size:12.5px;color:rgba(255,255,255,.58)}
.sw-legend span{display:inline-flex;align-items:center;gap:8px}
.sw-legend i{width:9px;height:9px;border-radius:50%}
.sw-legend .data{background:var(--cp-c);box-shadow:0 0 6px var(--cp-c)}
.sw-legend .power{background:var(--amber);box-shadow:0 0 6px var(--amber)}
.sw-legend .air{width:18px;height:0;border-radius:0;border-top:2px dashed rgba(121,218,255,.7)}
.sw[data-link=poe] .sw-legend [data-only=wifi],.sw[data-link=wifi] .sw-legend [data-only=poe]{display:none}
.sw-side{display:grid;align-content:center;gap:22px;padding:28px 28px 30px;min-width:0}
.sw-info{min-height:230px}
.sw-cmp-wrap{padding:18px 28px 24px;border-top:1px solid rgba(255,255,255,.07)}
.sw-info h4{margin:10px 0 0;font:700 24px/1.15 var(--display);letter-spacing:-.014em;color:#fff}
.sw-info small{display:block;margin-top:4px;font-size:13px;font-weight:600;color:var(--cp-c)}
.sw-info p{margin:12px 0 0;font-size:15px;line-height:1.55;color:rgba(255,255,255,.72)}
.sw-cmp{width:100%;border-collapse:collapse;font-size:14px;table-layout:fixed}
.sw-cmp thead td{width:22%}
.sw-cmp caption{caption-side:top;text-align:left;padding-bottom:10px}
.sw-cmp th,.sw-cmp td{padding:9px 8px;text-align:left;vertical-align:top;border-top:1px solid rgba(255,255,255,.07)}
.sw-cmp thead th,.sw-cmp thead td{border-top:0;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.sw-cmp tbody th{font-weight:600;color:rgba(255,255,255,.5);white-space:nowrap;padding-left:0}
.sw-cmp td{color:rgba(255,255,255,.45);transition:color .25s,background .25s}
.sw[data-link=poe] [data-col=poe],.sw[data-link=wifi] [data-col=wifi]{color:#fff;background:rgba(121,218,255,.06)}
.sw[data-link=poe] thead [data-col=poe],.sw[data-link=wifi] thead [data-col=wifi]{color:var(--cp-c)}
@media (prefers-reduced-motion:reduce){.sw-pk{display:none}.sw-node.on .sw-halo{animation:none}}
@media (max-width:1100px){.sw-main{grid-template-columns:minmax(0,1fr)}.sw-plan{border-right:0;border-bottom:1px solid rgba(255,255,255,.07)}.sw-info{min-height:0}}
@media (max-width:700px){
  .sw{border-radius:22px;margin:0 -6px}
  .sw .cp-bar{flex-wrap:wrap}.sw .cp-title{font-size:14px}
  .sw-seg{margin-left:0;width:100%}.sw-seg button{flex:1}
  .sw-plan{padding:12px 8px 12px}
  .sw-lbl{font-size:22px}.sw-lbl-x,.sw-tag{display:none}
  .sw-cmp-wrap{padding:14px 12px 18px;overflow-x:auto}.sw-cmp{min-width:340px}.sw-cmp thead td{width:30%}
  .sw-side{padding:18px 16px 20px}
  .sw-info h4{font-size:21px}
  .sw-cmp{font-size:12.5px}.sw-cmp tbody th{white-space:normal}
}

.h-about .h-display{margin-bottom:0}.h-about .h-lead{margin-top:clamp(20px,2.4vw,30px)}

.opt-page{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.opt .btn{max-width:100%;white-space:normal;text-align:left}
.opt-page{grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}.opt .btn{white-space:nowrap}
.osd>span{padding:4px 8px;border-radius:6px;background:rgba(0,0,0,.5);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.osd{align-items:flex-start}
.osd .rec{margin:0}

/* ---------- Unser Standard v13: Anlagendokumentation ---------- */
.qs-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(24px,3.4vw,52px);align-items:start}
.qs-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.qs-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 22px;border-radius:20px;background:var(--card,#fff);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.qs-ic{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--accent-soft);color:var(--accent-ink)}
.qs-item small{font:700 11.5px var(--display);letter-spacing:.14em;color:var(--accent-ink)}
.qs-item h3{margin:4px 0 6px;font-size:19px;letter-spacing:-.011em}
.qs-item p{margin:0;font-size:15px;line-height:1.55;color:var(--muted)}
.qs{--cp-c:#79daff;position:sticky;top:24px;border-radius:26px;overflow:hidden;color:#fff;background:linear-gradient(180deg,#16191c,#0f1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09),0 40px 100px rgba(0,0,0,.35)}
.qs .cp-title svg{width:16px;height:16px;color:var(--cp-c)}
.qs-fault[aria-pressed=true]{background:rgba(255,90,78,.18);color:#ffb0a8;box-shadow:inset 0 0 0 1px rgba(255,90,78,.45)}
.qs-fault svg{width:16px;height:16px}
.qs-body{display:grid;gap:4px;padding:16px 18px 6px}
.qs-rack{margin:0}
.qs-svg{display:block;width:100%;height:auto}
.qs-cab{fill:#0b0d0f;stroke:rgba(255,255,255,.14);stroke-width:1.5}
.qs-rail{stroke:rgba(255,255,255,.12);stroke-width:6;stroke-dasharray:2 6}
.qs-unit{fill:#1b1f23;stroke:rgba(255,255,255,.12)}
.qs-unit.dim{fill:#15181b}
.qs-u{font:600 10px var(--body);letter-spacing:.08em;text-transform:uppercase;fill:rgba(255,255,255,.42)}
.qs-u.big{font:700 15px var(--display);letter-spacing:.12em;fill:rgba(255,255,255,.7)}
.qs-lab{font:700 10.5px ui-monospace,SFMono-Regular,Menlo,monospace;fill:rgba(255,255,255,.6)}
.qs-pp{fill:#0d1012;stroke:rgba(255,255,255,.28)}
.qs-sp{fill:#0d1012;stroke:rgba(255,255,255,.28)}
.qs-patch{fill:none;stroke:#3b82c4;stroke-width:4;stroke-linecap:round;opacity:.85}
.qs-port:nth-child(2n) .qs-patch{stroke:#2f9e8f}
.qs-led{fill:#7dffb0}.qs-led2{fill:#ffc46b;opacity:.8}
.qs-port{cursor:pointer}
.qs-port[data-p="5"] .qs-patch,.qs-port[data-p="5"] .qs-led,.qs-port[data-p="5"] .qs-led2{opacity:.15}
.qs-port.on .qs-pp,.qs-port.on .qs-sp{stroke:var(--cp-c);stroke-width:2.5;fill:#0e2a35}
.qs-port.on .qs-patch{stroke:var(--cp-c);opacity:1}
.qs-port.on .qs-lab{fill:#fff}
.qs-port.fault .qs-led,.qs-port.fault .qs-led2{fill:#ff5a4e;animation:qsBlink 1s steps(2) infinite}
.qs-port.fault .qs-patch{stroke:#ff8a80;stroke-dasharray:4 5}
@keyframes qsBlink{50%{opacity:.2}}
.qs-hdd{fill:#7dffb0;animation:stoHdd .9s steps(2,jump-none) infinite}
.qs-bay{fill:#0d1012;stroke:rgba(255,255,255,.18)}
.qs-tw{overflow-x:auto}
.qs-table{width:100%;border-collapse:collapse;font-size:13px}
.qs-table th{padding:8px 8px;text-align:left;font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45);border-bottom:1px solid rgba(255,255,255,.1)}
.qs-table td{padding:8px 8px;border-bottom:1px solid rgba(255,255,255,.06);color:rgba(255,255,255,.78);white-space:nowrap}
.qs-table .mono{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:rgba(255,255,255,.62)}
.qs-pn{font:700 12px var(--display);color:rgba(255,255,255,.5)}
.qs-table tbody tr{cursor:pointer;outline:none;transition:background .15s}
.qs-table tbody tr:hover,.qs-table tbody tr.on,.qs-table tbody tr:focus-visible{background:rgba(121,218,255,.08)}
.qs-table tbody tr.on td{color:#fff}
.qs-st{display:flex;align-items:center;gap:7px;font-size:12.5px}
.qs-st i{width:7px;height:7px;border-radius:50%;background:#7dffb0;box-shadow:0 0 6px #7dffb0}
.qs-st span{color:rgba(255,255,255,.4)}
.qs-table tr.fault td{color:#ffb0a8}.qs-table tr.fault .qs-st i{background:#ff5a4e;box-shadow:0 0 6px #ff5a4e}
.qs-budget{position:relative;display:flex;align-items:baseline;gap:8px;margin:12px 0 0;padding-bottom:12px;font-size:12.5px;color:rgba(255,255,255,.6)}
.qs-budget span{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.45)}
.qs-budget b{color:#fff;font-variant-numeric:tabular-nums}
.qs-budget i{position:absolute;left:0;right:0;bottom:0;height:5px;border-radius:3px;background:linear-gradient(90deg,var(--cp-c) var(--w),rgba(255,255,255,.08) var(--w))}
.qs-msg{margin:0;padding:14px 18px 18px;border-top:1px solid rgba(255,255,255,.07);font-size:14px;line-height:1.5;color:rgba(255,255,255,.7);min-height:72px}
.qs-msg b{color:#fff}
@media (max-width:1100px){.qs-grid{grid-template-columns:minmax(0,1fr)}.qs{position:relative;top:0}}
@media (max-width:700px){.qs .cp-reset span{display:inline}.qs-table :is(th,td):nth-child(5){display:none}.qs-table{font-size:12.5px}.qs-table :is(th,td){padding:8px 6px}.qs{border-radius:22px;margin:0 -6px}.qs .cp-bar{flex-wrap:wrap}.qs-fault{margin-left:0}.qs-body{padding:12px 10px 4px}.qs-item{padding:16px;grid-template-columns:38px minmax(0,1fr);gap:12px}.qs-ic{width:38px;height:38px}}
.h-sign{margin:18px 0 0;font-size:14.5px;font-weight:600;color:var(--ink-2)}

/* ---------- v14 Warum S&I: bildgeführt, ruhig, ohne Symbole ---------- */
.ws-stakes{padding:clamp(64px,8vw,120px) 0 clamp(24px,3vw,40px);background:var(--paper)}
.ws-stakes-txt{max-width:920px;text-align:center}
.ws-stakes h2{font-size:clamp(34px,4.8vw,66px);line-height:1.04;letter-spacing:-.03em;font-weight:700;color:var(--ink)}
.ws-stakes h2 span{color:var(--accent-ink)}
.ws-stakes p{max-width:56ch;margin:20px auto 0;font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:var(--muted)}
.ws-stakes-img{max-width:1360px;margin:clamp(36px,4.4vw,64px) auto 0;padding:0 clamp(16px,3vw,40px)}
.ws-stakes-img img{display:block;width:100%;height:auto;aspect-ratio:16/8;object-fit:cover;border-radius:clamp(20px,2.4vw,32px)}
.ws-head{max-width:900px;margin:0 auto clamp(36px,4vw,56px);text-align:center}
.ws-head h2{margin:16px 0 0;font-size:clamp(32px,4.2vw,56px);line-height:1.06;letter-spacing:-.03em;font-weight:700}
.ws-head p{max-width:60ch;margin:18px auto 0;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--muted)}
.ws-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,2vw,28px)}
.ws-c{margin:0;border-radius:26px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.ws-c img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ws-bad img{filter:saturate(.75)}
.ws-c figcaption{padding:22px 26px 26px}
.ws-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.ws-tag::before{content:"";width:9px;height:9px;border-radius:50%;background:#e5534b}
.ws-good .ws-tag{color:var(--accent-ink)}.ws-good .ws-tag::before{background:var(--accent)}
.ws-c ul{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.ws-c li{font-size:17px;line-height:1.4;color:var(--ink)}
.ws-bad li{color:var(--ink-2)}
.ws-promise{display:grid;grid-template-columns:1.15fr 1fr 1fr;gap:clamp(16px,2vw,28px);margin-top:clamp(16px,2vw,28px)}
.ws-promise>div{padding:clamp(24px,2.6vw,34px);border-radius:26px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.ws-promise h3{font-size:21px;letter-spacing:-.02em;font-weight:700}
.ws-promise p{margin:10px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.ws-g{background:linear-gradient(150deg,var(--accent-soft),var(--card) 70%)!important}
.ws-g b{display:block;font-size:clamp(52px,6vw,84px);line-height:1;letter-spacing:-.035em;font-weight:700;color:var(--accent-ink)}
.ws-g p{color:var(--ink-2);font-size:17px}
.ws-strip{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);border-radius:28px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.ws-strip-img img{display:block;width:100%;height:100%;min-height:280px;object-fit:cover}
.ws-strip-txt{padding:clamp(26px,3.4vw,52px);align-self:center}
.ws-strip-txt h2{margin:14px 0 0;font-size:clamp(26px,2.8vw,38px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
.ws-strip-txt p{margin:14px 0 18px;font-size:17px;line-height:1.55;color:var(--muted)}
@media (max-width:900px){.ws-compare,.ws-promise,.ws-strip{grid-template-columns:minmax(0,1fr)}.ws-strip-img img{min-height:0;height:auto;aspect-ratio:16/9}}
@media (max-width:700px){.ws-stakes-img img{aspect-ratio:4/3}.ws-c figcaption{padding:18px 20px 22px}.ws-c li{font-size:16px}}

/* ---------- Kontakt v14: hell, bildgeführt ---------- */
.ct-hero{padding:clamp(48px,6vw,96px) 0 clamp(8px,1vw,16px);background:var(--paper)}
.ct-hero .crumbs a,.ct-hero .crumbs span{color:var(--muted)}
.ct-hero h1{margin:18px 0 0;font-size:clamp(40px,5.6vw,76px);line-height:1.02;letter-spacing:-.035em;font-weight:700;color:var(--ink)}
.ct-hero .lead{margin-top:16px;max-width:52ch;font-size:clamp(18px,1.5vw,21px);color:var(--muted)}
.ct-sec{padding-top:clamp(24px,3vw,40px)}
.ct-grid{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,.8fr);gap:clamp(24px,4vw,64px);align-items:start}
.ct-form{display:grid;gap:clamp(18px,2vw,26px)}
.ct-step{margin:0;padding:clamp(20px,2.4vw,30px);border:0;border-radius:26px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);min-width:0}
.ct-step[hidden]{display:none}
.ct-step legend{float:left;width:100%;display:flex;align-items:center;gap:12px;margin:0 0 18px;padding:0;font-size:clamp(20px,1.8vw,24px);font-weight:700;letter-spacing:-.02em;color:var(--ink)}
.ct-step legend+*{clear:both}
.ct-n{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink);font-size:14px;font-weight:700}
.ct-topics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.ct-topic{position:relative;display:block;border-radius:20px;overflow:hidden;cursor:pointer;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);transition:box-shadow .2s,transform .2s}
.ct-topic:hover{transform:translateY(-2px)}
.ct-topic input{position:absolute;opacity:0;pointer-events:none}
.ct-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.ct-tx{display:block;padding:12px 14px 14px}
.ct-tx b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
.ct-tx small{display:block;margin-top:2px;font-size:13.5px;color:var(--muted)}
.ct-tick{position:absolute;top:10px;right:10px;width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.85);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.ct-topic:has(input:checked){box-shadow:inset 0 0 0 2.5px var(--accent),0 12px 30px rgba(18,181,211,.18)}
.ct-topic:has(input:checked) .ct-tick{background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/16px no-repeat}
.ct-topic:has(input:focus-visible){outline:3px solid var(--accent);outline-offset:3px}
.ct-other{display:inline-flex;align-items:center;gap:10px;margin-top:14px;font-size:15px;color:var(--ink-2);cursor:pointer}
.ct-other input{width:18px;height:18px;accent-color:var(--accent)}
.ct-q{margin:20px 0 10px;font-size:15px;font-weight:600;color:var(--ink-2)}
.ct-chips{display:flex;flex-wrap:wrap;gap:8px}
.ct-chip{position:relative}
.ct-chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.ct-chip span{display:inline-flex;align-items:center;min-height:42px;padding:9px 16px;border-radius:99px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;color:var(--ink);transition:background .15s,box-shadow .15s}
.ct-chip:hover span{box-shadow:inset 0 0 0 1px var(--ink-2)}
.ct-chip input:checked+span{background:var(--ink);color:var(--paper);box-shadow:none}
.ct-chip input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.ct-step textarea,.ct-result textarea{display:block;width:100%;padding:14px 16px;border:0;border-radius:16px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;line-height:1.5;color:var(--ink);resize:vertical}
.ct-step textarea:focus,.ct-result textarea:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.ct-hint{margin:10px 0 0;font-size:13.5px;color:var(--muted)}
.ct-send{display:flex;flex-wrap:wrap;align-items:center;gap:14px 22px}
.ct-send .footnote{margin:0;max-width:44ch}
.ct-result{display:grid;gap:10px;padding:22px;border-radius:22px;background:var(--accent-soft)}
.ct-result label{font-weight:600}
.ct-result .btn{justify-self:start}
.ct-aside{position:sticky;top:24px;display:grid;gap:18px}
.ct-a-k{margin:0;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.ct-people{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.ct-people figure{margin:0}
.ct-people img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:18px}
.ct-people figcaption{margin-top:8px}
.ct-people b{display:block;font-size:15px}
.ct-people small{font-size:13px;color:var(--muted)}
.ct-direct{list-style:none;margin:0;padding:18px 20px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);display:grid;gap:10px;font-size:15px;color:var(--ink)}
.ct-direct span{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:980px){.ct-grid{grid-template-columns:minmax(0,1fr)}.ct-aside{position:static}}
@media (max-width:640px){.ct-topics{grid-template-columns:minmax(0,1fr)}.ct-topic{display:grid;grid-template-columns:110px minmax(0,1fr);align-items:center}.ct-ph img{aspect-ratio:1}.ct-tick{top:50%;transform:translateY(-50%)}}

/* ---------- v14 Querscroll-Sektion ---------- */
.hs{position:relative;background:var(--paper)}
.hs-pin{padding:clamp(56px,7vw,96px) 0 clamp(40px,5vw,72px)}
.hs.is-pinned .hs-pin{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;gap:clamp(20px,3svh,40px);padding:0;overflow:hidden}
body:has(.ln) .hs.is-pinned .hs-pin{top:52px;height:calc(100svh - 52px)}
.hs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.hs-head h2{margin:14px 0 0;font-size:clamp(32px,4vw,54px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.hs-head p{max-width:56ch;margin:12px 0 0;font-size:clamp(16px,1.3vw,19px);line-height:1.5;color:var(--muted)}
.hs-bar{flex:none;width:160px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-bottom:10px}
.hs-bar i{display:block;width:0;height:100%;background:var(--accent);transition:width .1s linear}
.hs-vp{overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.hs-vp::-webkit-scrollbar{display:none}
.hs.is-pinned .hs-vp{overflow:visible}
.hs-track{display:flex;gap:clamp(14px,1.6vw,22px);list-style:none;margin:0;padding:6px max(var(--gutter,22px),calc((100vw - 1240px)/2 + 22px)) 12px;width:max-content;will-change:transform}
.hs-card{flex:none;display:flex;flex-direction:column;width:clamp(260px,26vw,370px);border-radius:26px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);scroll-snap-align:start}
.hs-ph img{display:block;width:100%;height:clamp(200px,34svh,330px);object-fit:cover}
.hs-tx{padding:20px 22px 24px}
.hs-tx h3{font-size:22px;letter-spacing:-.02em;font-weight:700}
.hs-line{margin:4px 0 0;font-size:16px;font-weight:600;color:var(--accent-ink)}
.hs-tx p:not(.hs-line){margin:8px 0 0;font-size:15px;line-height:1.5;color:var(--muted)}
.hs-tx .textlink{display:inline-flex;margin-top:12px}
.hs-end{justify-content:center;background:var(--ink);color:var(--paper);box-shadow:none}
.hs-end h3{font-size:28px;color:var(--paper)}
.hs-end p{color:rgba(255,255,255,.72)!important}
.hs-end .btn{margin-top:20px}
html[data-theme=dark] .hs-end{background:#f2f2f2;color:#111}html[data-theme=dark] .hs-end h3{color:#111}html[data-theme=dark] .hs-end p{color:#444!important}
@media (max-width:899px){.hs-head{flex-direction:column;align-items:flex-start;gap:14px}.hs-bar{width:120px}.hs-card{width:min(78vw,340px)}}
/* ---------- v14 Hersteller (Logos aus dem Distributoren-Sortiment) ---------- */
.br{display:grid;gap:20px;padding:clamp(24px,3vw,40px);border-radius:28px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.br-head h2{font-size:clamp(22px,2.2vw,30px);letter-spacing:-.02em;font-weight:700}
.br-head p{margin:6px 0 0;max-width:70ch;font-size:15.5px;line-height:1.5;color:var(--muted)}
.br-row{display:grid;grid-template-columns:120px minmax(0,1fr);align-items:start;gap:16px;padding-top:18px;border-top:1px solid var(--line)}
.br-k{padding-top:14px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.br-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px;list-style:none;margin:0;padding:0}
.br-item{display:grid;justify-items:center;align-content:start;gap:6px;padding:14px 8px 12px;border-radius:16px;background:var(--paper);text-align:center;transition:background .2s,box-shadow .2s}
.br-item:hover{background:var(--card);box-shadow:0 10px 24px rgba(20,24,28,.08),inset 0 0 0 1px var(--line)}
.br-logo{display:grid;place-items:center;height:40px;width:100%}
.br-logo img{display:block;max-height:40px;max-width:100px;width:auto;height:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.78;transition:filter .25s,opacity .25s}
.br-item:hover .br-logo img{filter:none;opacity:1}
.br-logo img[data-inv]{filter:invert(1) grayscale(1);opacity:.78}
.br-item:hover .br-logo img[data-inv]{filter:invert(1);opacity:1}
html[data-theme=dark] .br-logo img[data-inv]{filter:grayscale(1)}
html[data-theme=dark] .br-logo img:not([data-inv]){filter:grayscale(1) invert(1) brightness(1.2);opacity:.85}
html[data-theme=dark] .br-item:hover .br-logo img:not([data-inv]){filter:none}
.br-name{font-size:13.5px;font-weight:650;line-height:1.2;color:var(--ink)}
.br-item small{font-size:11.5px;line-height:1.25;color:var(--muted)}
@media (max-width:640px){.br-row{grid-template-columns:minmax(0,1fr);gap:10px}.br-k{padding-top:0}.br-list{grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:8px}.br-logo img{max-width:80px;max-height:34px}}
.rp-devs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));flex-wrap:nowrap}
.rp-devs button{justify-content:center;min-width:0;padding-left:8px;padding-right:8px;white-space:nowrap}
@media (max-width:700px){.rp-devs{grid-template-columns:repeat(2,minmax(0,1fr))}}
[data-dev=Konsole] .rp-art{max-width:560px;margin:0 auto}
.rp-devs{grid-auto-flow:row!important}

/* ---------- v14 Gebäudesicherheit: Bedarf, Objekte, System, Abstecher ---------- */
.nd-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.nd-tile{position:relative;display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:transform .3s,box-shadow .3s}
.nd-tile:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,24,28,.14),inset 0 0 0 1px var(--line)}
.nd-ph{display:block;overflow:hidden}
.nd-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transition:transform .6s}
.nd-tile:hover .nd-ph img{transform:scale(1.04)}
.nd-tx{display:flex;flex-direction:column;gap:4px;padding:18px 20px 22px;flex:1}
.nd-tx small{font-size:13px;font-weight:600;color:var(--accent-ink)}
.nd-tx b{font-size:clamp(19px,1.6vw,23px);line-height:1.15;letter-spacing:-.02em}
.nd-tx>span{font-size:15px;line-height:1.45;color:var(--muted)}
.nd-go{position:absolute;right:16px;bottom:18px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--ink);transition:background .2s,color .2s}
.nd-go svg{width:16px;height:16px}
.nd-tile:hover .nd-go{background:var(--accent);color:#fff}
.nd-tx>span{padding-right:36px}
.zg{border-radius:30px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);overflow:hidden}
.zg-tabs{display:flex;gap:6px;padding:10px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.zg-tabs::-webkit-scrollbar{display:none}
.zg-tabs button{flex:none;min-height:44px;padding:0 18px;border:0;border-radius:99px;background:none;font:600 15px var(--body);color:var(--muted);cursor:pointer;transition:background .2s,color .2s}
.zg-tabs button:hover{color:var(--ink)}
.zg-tabs button[aria-selected=true]{background:var(--ink);color:var(--paper)}
.zg-tabs button:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.zg-panel{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);min-height:460px}
.zg-panel[hidden]{display:none}
.zg-ph img{display:block;width:100%;height:100%;min-height:320px;object-fit:cover}
.zg-tx{display:flex;flex-direction:column;align-items:flex-start;padding:clamp(24px,3.2vw,48px)}
.zg-tx h3{font-size:clamp(24px,2.4vw,34px);line-height:1.1;letter-spacing:-.025em;font-weight:700}
.zg-k{margin:20px 0 8px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zg-list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.zg-list li{position:relative;padding-left:22px;font-size:16.5px;line-height:1.45;color:var(--ink)}
.zg-list li::before{content:"";position:absolute;left:2px;top:.55em;width:9px;height:9px;border-radius:50%;background:var(--accent)}
.zg-note{margin:16px 0 0;font-size:14.5px;line-height:1.5;color:var(--muted)}
.zg-price{display:grid;gap:2px;margin:22px 0 18px;padding:14px 18px;border-radius:16px;background:var(--paper)}
.zg-price span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.zg-price b{font-size:26px;letter-spacing:-.02em}
.zg-price small{font-size:13px;color:var(--muted)}
.zg-tx .btn{margin-top:auto}
.sy-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,24px)}
.sy-col{position:relative;margin:0;border-radius:26px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.sy-col img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.sy-col figcaption{display:grid;gap:6px;padding:20px 22px 24px}
.sy-col b{font-size:22px;letter-spacing:-.02em}
.sy-col figcaption span{font-size:15.5px;line-height:1.5;color:var(--muted)}
.sy-n{position:absolute;top:14px;left:14px;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);font-size:13px;font-weight:700;color:var(--ink);box-shadow:0 4px 12px rgba(0,0,0,.15)}
.sy-col:not(:last-child)::after{content:"";position:absolute;top:calc(37.5% - 1px);right:-24px;width:24px;height:2px;background:var(--line)}
.dt-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px;margin-bottom:20px}
.dt-head h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.025em;font-weight:700}
.dt-head p{margin:0;font-size:15.5px;color:var(--muted)}
.dt-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.dt-card{display:grid;gap:4px;padding:10px 10px 16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.dt-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,24,28,.1),inset 0 0 0 1px var(--line)}
.dt-ph img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;border-radius:12px;margin-bottom:8px}
.dt-card b{padding:0 6px;font-size:16.5px}
.dt-card>span:last-child{padding:0 6px;font-size:14px;line-height:1.4;color:var(--muted)}
.steps:has(> :nth-child(5)){grid-template-columns:repeat(5,minmax(0,1fr))}
@media (max-width:1100px){.nd-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dt-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.steps:has(> :nth-child(5)){grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){.zg-panel{grid-template-columns:minmax(0,1fr)}.zg-ph img{min-height:0;height:auto;aspect-ratio:16/10}.sy-grid{grid-template-columns:minmax(0,1fr)}.sy-col::after{display:none}.sy-col img{aspect-ratio:16/9}}
@media (max-width:640px){.nd-grid{grid-template-columns:minmax(0,1fr)}.nd-tile{display:grid;grid-template-columns:120px minmax(0,1fr)}.nd-ph img{aspect-ratio:auto;height:100%}.nd-tx{padding:14px 16px 16px}.nd-go{display:none}.nd-tx>span{padding-right:0}.dt-grid{grid-template-columns:minmax(0,1fr)}.dt-card{grid-template-columns:96px minmax(0,1fr);align-items:center;column-gap:12px}.dt-ph{grid-row:span 2}.dt-ph img{margin:0;aspect-ratio:1}.steps:has(> :nth-child(5)){grid-template-columns:minmax(0,1fr)}}
/* Reparatur: echte Gerätefotos statt Zeichnung */
.rp-art.rp-art-photo{position:relative;max-width:none!important;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:#111}
.rp-art-photo .rp-img{display:block;width:100%;height:100%;object-fit:cover}
.rp-art-photo .rp-img[hidden]{display:none}
.rp-art-photo::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,0) 30%,rgba(0,0,0,.18))}
.rp-art-photo .rp-hots{z-index:2}
.rp-stage:has(.rp-art-photo){padding:12px}
.dp{max-width:760px;margin:0 auto;padding:clamp(28px,3.4vw,44px);border-radius:28px;text-align:center;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.dp h2{margin:14px 0 0;font-size:clamp(26px,2.8vw,38px);letter-spacing:-.025em;font-weight:700}
.dp p{margin:10px auto 0;max-width:52ch;font-size:16.5px;line-height:1.5;color:var(--muted)}

/* ---------- v14 Ratgeber-Verweise auf Leistungsseiten ---------- */
.rgl-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:18px}
.rgl-head h2{font-size:clamp(24px,2.4vw,32px);letter-spacing:-.025em;font-weight:700}
.rgl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.rgl-card{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);text-decoration:none;color:var(--ink);transition:transform .25s,box-shadow .25s}
.rgl-card:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,24,28,.1),inset 0 0 0 1px var(--line)}
.rgl-ph img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.rgl-tx{display:flex;flex-direction:column;gap:10px;padding:16px 18px 18px;flex:1}
.rgl-tx b{font-size:17px;line-height:1.3;letter-spacing:-.01em}
.rgl-go{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600;color:var(--accent-ink)}
.rgl-go svg{width:16px;height:16px}
.dark .rgl-card,.section.dark .rgl-card{background:rgba(255,255,255,.06)}

/* v14: keine dekorativen Symbole in Textkarten (Nutzervorgabe: echte Bilder statt Symbole) */
.card>.icon-tile,.biz-step>.icon-tile,.pp-step>.icon-tile,.way>.icon-tile,.way .way-ic{display:none}
.rg-hero h1{margin-bottom:18px}
.br-compact .br-list{grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:8px}
.br-compact .br-item{padding:10px 6px 9px;gap:4px}
.br-compact .br-item small{display:none}
.br-compact .br-logo{height:30px}.br-compact .br-logo img{max-height:30px;max-width:84px}
.br-compact .br-name{font-size:12.5px}
.br-compact .br-row{padding-top:14px}
.br-compact .br-k{padding-top:10px}
/* Produktfreisteller (Herstellerbilder auf Weiß): ganz zeigen, nicht anschneiden */
.hs-card.is-product .hs-ph{display:grid;place-items:center;background:linear-gradient(180deg,#fff,#f2f3f5)}
.hs-card.is-product .hs-ph img{object-fit:contain;padding:22px;mix-blend-mode:multiply}
.sy-col:has(img[src*="prod-"]) img{object-fit:contain;padding:18px;background:#fff}
html[data-theme=dark] .hs-card.is-product .hs-ph{background:linear-gradient(180deg,#f2f3f5,#e3e6e9)}

/* v14: Werkzeuge als dunkle Module auf hellen Abschnitten */
.mod{padding:clamp(20px,3vw,40px);border-radius:30px;color:#fff;background:radial-gradient(900px 400px at 85% -10%,rgba(121,218,255,.10),transparent 60%),linear-gradient(180deg,#16191c,#0f1113);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 40px 100px rgba(10,12,14,.22)}
body[data-accent=repair] .mod{background:radial-gradient(900px 400px at 85% -10%,rgba(155,107,255,.14),transparent 60%),linear-gradient(180deg,#17151c,#0f0e12)}
body[data-accent=energy] .mod{background:radial-gradient(900px 400px at 85% -10%,rgba(60,192,39,.12),transparent 60%),linear-gradient(180deg,#141814,#0e110e)}
@media (max-width:700px){.mod{padding:16px;border-radius:22px;margin-left:-6px;margin-right:-6px}}
.compare img,.compare svg{-webkit-user-drag:none;user-select:none;-webkit-user-select:none;pointer-events:none}
.compare{user-select:none;-webkit-user-select:none}

/* ---------- v14 Hersteller-Laufband ---------- */
.bm-sec{position:relative;overflow:hidden;padding:clamp(64px,8vw,112px) 0;background:radial-gradient(900px 420px at 15% 0%,var(--accent-soft),transparent 70%),radial-gradient(700px 380px at 90% 100%,rgba(18,181,211,.10),transparent 70%),var(--paper)}
.bm-head{max-width:860px;text-align:center;margin-bottom:clamp(28px,3.4vw,48px)}
.bm-head h2{margin:14px 0 0;font-size:clamp(32px,4.2vw,56px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.bm-head p{max-width:62ch;margin:14px auto 0;font-size:clamp(16px,1.3vw,18.5px);line-height:1.5;color:var(--muted)}
.bm-row+.bm-row{margin-top:clamp(18px,2.2vw,28px)}
.bm-k{margin:0 0 12px;font-size:12.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink)}
.bm-vp{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;cursor:grab;outline:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.bm-vp::-webkit-scrollbar{display:none}
.bm-vp.is-drag{cursor:grabbing}
.bm-vp:focus-visible{box-shadow:inset 0 0 0 3px var(--accent)}
.bm-track{display:flex;gap:clamp(12px,1.4vw,18px);width:max-content;margin:0;padding:10px 0 18px;list-style:none;user-select:none;-webkit-user-select:none}
.bm-item{flex:none;display:grid;justify-items:center;align-content:center;gap:6px;width:clamp(170px,15vw,220px);height:clamp(150px,13vw,176px);padding:18px 16px 16px;border-radius:24px;background:#fff;box-shadow:0 1px 2px rgba(20,24,28,.05),0 14px 34px rgba(20,24,28,.08),inset 0 0 0 1px rgba(20,24,28,.06);text-align:center;transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .3s}
.bm-item:hover{transform:translateY(-6px);box-shadow:0 2px 4px rgba(20,24,28,.06),0 26px 50px rgba(20,24,28,.16),inset 0 0 0 1px rgba(18,181,211,.35)}
.bm-logo{display:grid;place-items:center;height:clamp(64px,5.6vw,80px);width:100%}
.bm-logo img{display:block;max-height:100%;max-width:150px;width:auto;height:auto;object-fit:contain;-webkit-user-drag:none;pointer-events:none}
.bm-name{font-size:15px;font-weight:700;letter-spacing:-.01em;color:#14181c}
.bm-item small{font-size:12px;line-height:1.2;color:#5d666e}
html[data-theme=dark] .bm-sec{background:radial-gradient(900px 420px at 15% 0%,rgba(18,181,211,.14),transparent 70%),#0e1012}
@media (max-width:700px){.bm-item{width:150px;height:140px;border-radius:20px;padding:14px 12px}.bm-logo{height:58px}.bm-logo img{max-width:118px}.bm-name{font-size:14px}.bm-vp{-webkit-mask-image:none;mask-image:none}}
@media (prefers-reduced-motion:reduce){.bm-item{transition:none}}
.bm-logo{height:76px;overflow:hidden}.bm-logo img{max-height:72px!important;max-width:150px!important;width:auto!important;height:auto!important}
@media (max-width:700px){.bm-logo{height:58px}.bm-logo img{max-height:54px!important;max-width:118px!important}}

/* ---------- v14 Warum S&I (Reparatur, Sparenergie) ---------- */
.wa{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(28px,4.4vw,72px);align-items:center}
.wa-ph{margin:0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.wa-ph img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.wa-tx h2{margin:14px 0 0;font-size:clamp(30px,3.8vw,50px);line-height:1.06;letter-spacing:-.03em;font-weight:700}
.wa-list{list-style:none;margin:28px 0 30px;padding:0;display:grid;gap:4px}
.wa-item{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding:16px 0;border-top:1px solid var(--line)}
.wa-n{font-size:13px;font-weight:700;color:var(--accent-ink);padding-top:3px}
.wa-item h3{font-size:19px;letter-spacing:-.015em;font-weight:700}
.wa-item p{margin:6px 0 0;font-size:15.5px;line-height:1.5;color:var(--muted)}
@media (max-width:900px){.wa{grid-template-columns:minmax(0,1fr)}.wa-ph img{aspect-ratio:16/10}}

/* ---------- v14 Impressum / Datenschutz ---------- */
.lg{max-width:760px}
.lg-sec{padding:22px 0;border-top:1px solid var(--line)}
.lg-sec:first-child{border-top:0;padding-top:0}
.lg-sec h2{font-size:22px;letter-spacing:-.02em;font-weight:700;margin:0 0 10px}
.lg-sec p{margin:0;font-size:16.5px;line-height:1.6;color:var(--ink-2)}

/* ===================== v15.4: Garantie-Siegel (dunkle Scheibe, umlaufender Schriftzug, S&I-Sechseck) ===================== */
.gw{--gw:120px;position:relative;display:inline-block;flex:none;width:var(--gw);height:var(--gw);border-radius:50%;filter:drop-shadow(0 14px 30px rgba(0,0,0,.28))}
.gw svg{display:block;width:100%;height:100%;overflow:visible}
.gw-rt{font:700 12.5px Inter,system-ui,sans-serif;letter-spacing:.16em;fill:#d6dde2}
.gw-rt .gw-dot{fill:#3fd7ee}
.gw-hex{fill:rgba(18,181,211,.1);stroke-width:2.6;stroke-linejoin:round}
.gw-4{font:800 58px Inter,system-ui,sans-serif;letter-spacing:-.04em}
.gw-j{font:700 10px Inter,system-ui,sans-serif;letter-spacing:.28em;fill:#c9d1d6}
.gw-ring{transform-box:view-box;transform-origin:50% 50%}
.gw-sm{--gw:58px}.gw-sm .gw-ring{display:none}.gw-md{--gw:110px}.gw-lg{--gw:140px}.gw-xl{--gw:clamp(170px,17vw,230px)}
.gw-float{--gw:104px;position:absolute;z-index:5;right:16px;top:16px}
@media (max-width:700px){.gw-float{--gw:84px}}
@media (prefers-reduced-motion:no-preference){.gw-ring{animation:gw-spin 40s linear infinite}.gw-sm .gw-ring{animation:none}@keyframes gw-spin{to{transform:rotate(360deg)}}}
/* Garantie-Block bei Preisen und auf Produktseiten */
.gb{position:relative;overflow:hidden;display:grid;grid-template-columns:auto minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center;padding:clamp(28px,4vw,56px) clamp(24px,4.5vw,72px);border-radius:32px;background:radial-gradient(70% 120% at 12% 50%,rgba(18,181,211,.26),rgba(18,181,211,0) 60%),linear-gradient(135deg,#0b0e11,#15191d);color:#f5f5f7;box-shadow:var(--shadow)}
.gx-pk-sec .gb{margin-top:clamp(16px,2vw,24px)}
.gb-seal{position:relative;display:grid;place-items:center}
.gb-seal::before{content:"";position:absolute;inset:-18%;border-radius:50%;background:radial-gradient(circle,rgba(63,215,238,.35),rgba(63,215,238,0) 65%);filter:blur(6px)}
.gb-seal .gw{filter:drop-shadow(0 24px 50px rgba(0,0,0,.55))}
.gb-k{font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6ee1ed}
.gb h3{margin:8px 0 0;font-size:clamp(36px,4.6vw,64px);line-height:1;letter-spacing:-.04em;font-weight:800;color:#fff}
.gb-tx>p{margin:14px 0 0;max-width:52ch;font-size:clamp(16px,1.35vw,19px);line-height:1.5;color:#c7c7cc}
.gb-scope{list-style:none;display:flex;flex-wrap:wrap;gap:10px;margin:22px 0 0;padding:0}
.gb-scope li{display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px rgba(255,255,255,.12);font-size:15px;font-weight:650;color:#fff}
.gb-ph{display:block;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#fff}
.gb-ph img{display:block;width:100%;height:100%;object-fit:contain;padding:4px;mix-blend-mode:multiply}
.gb .textlink{margin-top:20px;color:#6ee1ed}
@media (max-width:760px){.gb{grid-template-columns:minmax(0,1fr);justify-items:start;text-align:left}.gb-seal{justify-self:center}}
.ws-g{display:grid!important;grid-template-columns:auto minmax(0,1fr);gap:22px;align-items:center}
.ws-g p{margin:0!important}
.ws-g .ws-g-b{display:block;margin-bottom:4px;font-size:clamp(24px,2.4vw,32px);line-height:1.1;letter-spacing:-.025em;font-weight:750;color:var(--accent-ink)}
.ws-strip-img{position:relative}
.ws-strip-txt .ws-strip-g{margin:14px 0 0;font-size:18px;color:var(--ink-2)}
.ws-strip-txt .ws-strip-g b{color:var(--ink)}
.ws-strip-txt .checklist{margin:18px 0 0}
@media (max-width:640px){.ws-g{grid-template-columns:minmax(0,1fr);justify-items:start}}

/* ===================== v15: Das bekommen Sie ===================== */
.gx-box{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);align-items:center}
.gx-box-ph{margin:0;border-radius:30px;overflow:hidden;box-shadow:var(--shadow)}
.gx-box-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3.3;object-fit:cover}
.gx-box-ph.is-product{background:linear-gradient(180deg,#fff,#eff1f3)}
.gx-box-ph.is-product img{object-fit:contain;padding:8%;mix-blend-mode:multiply}
.gx-box-tx h2{margin:16px 0 0;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.03em;font-weight:700}
.gx-box-lead{margin:16px 0 0;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--muted)}
.gx-box-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:14px}
.gx-box-list li{display:grid;grid-template-columns:30px minmax(0,1fr);gap:12px;align-items:start}
.gx-box-list b{display:block;font-size:17px;letter-spacing:-.01em}
.gx-box-list li>div>span{display:block;font-size:15.5px;line-height:1.45;color:var(--muted)}
.gx-tick{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--accent-soft);color:var(--accent-ink)}
.gx-box-list .gx-box-g{grid-template-columns:auto minmax(0,1fr);align-items:center;gap:16px;margin-top:6px;padding:14px 18px 14px 14px;border-radius:20px;background:linear-gradient(150deg,var(--accent-soft),var(--card) 80%);box-shadow:inset 0 0 0 1px var(--line)}
.gx-box-g b{font-size:21px!important;color:var(--accent-ink)}
@media (max-width:899px){.gx-box{grid-template-columns:minmax(0,1fr)}}

/* ===================== v15: Anschluss ===================== */
.gx-con{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gx-con-card{display:flex;flex-direction:column;border-radius:26px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gx-con-ph img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gx-con-tx{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px}
.gx-tag{align-self:flex-start;padding:5px 11px;border-radius:999px;background:var(--accent-soft);color:var(--accent-ink);font-size:12.5px;font-weight:700}
.gx-con-tx h3{margin:12px 0 0;font-size:24px;letter-spacing:-.02em;font-weight:700}
.gx-con-line{margin:4px 0 14px;font-size:16px;font-weight:600;color:var(--ink-2)}
.gx-con-tx .checklist{margin:0 0 16px}
.gx-con-for{margin:auto 0 0;padding-top:14px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.gx-con-for b{display:block;margin-bottom:2px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gx-foot{margin:22px auto 0;max-width:820px;text-align:center;font-size:15px;color:var(--muted)}
.gx-foot .textlink{margin-left:6px}
@media (max-width:899px){.gx-con{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(82vw,340px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.gx-con::-webkit-scrollbar{display:none}.gx-con-card{scroll-snap-align:start}}

/* ===================== v15: Preise ===================== */
.gx-pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gx-pk-card{display:flex;flex-direction:column;padding:clamp(24px,2.4vw,32px);border-radius:26px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gx-pk-k{font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.gx-pk-card h3{margin:8px 0 0;font-size:26px;letter-spacing:-.025em;font-weight:700}
.gx-pk-for{margin:4px 0 0;font-size:15.5px;color:var(--muted)}
.gx-pk-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:20px 0 18px;padding:14px 16px;border-radius:16px;background:var(--paper)}
.gx-pk-price small{font-size:15px;color:var(--muted)}
.gx-pk-price b{font-size:32px;letter-spacing:-.03em;font-weight:750}
.gx-pk-price span{flex-basis:100%;font-size:13px;color:var(--muted)}
.gx-pk-card .checklist{margin:0 0 22px}
.gx-pk-card .btn{margin-top:auto;justify-content:center}
@media (max-width:899px){.gx-pk{grid-template-columns:minmax(0,1fr)}}
/* ===================== v15: Ausprobieren (Werkzeuge eingeklappt) ===================== */
.gx-lab-sec{background:var(--paper-2)}
.gx-lab-head{max-width:760px;margin-bottom:clamp(22px,3vw,32px)}
.gx-lab-head h2{margin:14px 0 0;font-size:clamp(28px,3.2vw,42px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.gx-lab-head p{margin:12px 0 0;font-size:17px;color:var(--muted)}
.gx-lab-row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.gx-lab-row:has(> :nth-child(3):last-child){grid-template-columns:repeat(3,minmax(0,1fr))}
.gx-lab-tile{all:unset;box-sizing:border-box;position:relative;display:flex;flex-direction:column;width:100%;height:100%;border-radius:22px;overflow:hidden;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);cursor:pointer;color:var(--ink);transition:transform .25s,box-shadow .25s}
.gx-lab-tile:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(20,24,28,.12),inset 0 0 0 1px var(--line)}
.gx-lab-tile:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
.gx-lab-tile[aria-expanded="true"]{box-shadow:inset 0 0 0 2px var(--accent),0 16px 34px var(--accent-glow)}
.gx-lab-ph img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover}
.gx-lab-ph.is-product{background:linear-gradient(180deg,#fff,#eff1f3)}
.gx-lab-ph.is-product img{object-fit:contain;padding:10px;mix-blend-mode:multiply}
.gx-lab-tx{display:flex;flex-direction:column;gap:4px;padding:14px 56px 18px 16px}
.gx-lab-tx b{font-size:17px;letter-spacing:-.01em}
.gx-lab-tx span{font-size:14px;line-height:1.4;color:var(--muted)}
.gx-lab-go{position:absolute;right:14px;bottom:16px;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--paper);color:var(--ink);transition:transform .3s,background .2s,color .2s}
.gx-lab-go svg{width:16px;height:16px}
button.gx-lab-tile .gx-lab-go::before,button.gx-lab-tile .gx-lab-go::after{content:"";position:absolute;width:14px;height:2px;border-radius:2px;background:currentColor}
button.gx-lab-tile .gx-lab-go::after{transform:rotate(90deg)}
.gx-lab-tile:hover .gx-lab-go,.gx-lab-tile[aria-expanded="true"] .gx-lab-go{background:var(--accent);color:#fff}
.gx-lab-tile[aria-expanded="true"] .gx-lab-go{transform:rotate(45deg)}
.gx-lab-panel{background:var(--paper-2);scroll-margin-top:60px}
.gx-lab-panel .lab-tool{padding-top:clamp(8px,2vw,24px);padding-bottom:clamp(24px,3vw,40px)}
.gx-lab-close-w{display:flex;justify-content:center;padding-bottom:clamp(40px,5vw,64px)}
@media (max-width:1000px){.gx-lab-row,.gx-lab-row:has(> :nth-child(3):last-child){grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(70vw,280px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.gx-lab-row::-webkit-scrollbar{display:none}.gx-lab-row li{scroll-snap-align:start}}

/* ===================== v15: Produktseiten (Bauformen, Komponenten, Zutritt) ===================== */
.gp-hero{padding:clamp(28px,4vw,56px) 0 clamp(32px,4vw,56px)}
.gp-hero .crumbs,.gp-hero .crumbs a,.gp-hero .crumbs span{color:var(--muted)}
.gp-hero .crumbs a:hover{color:var(--ink)}
.gp-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,80px);align-items:center}
.gp-hero-tx .pill{margin-top:22px}
.gp-hero h1{margin:16px 0 0;font-size:clamp(38px,4.6vw,64px);line-height:1.04;letter-spacing:-.035em;font-weight:700;text-wrap:balance;hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
.gp-line{margin:10px 0 0;font-size:clamp(20px,1.9vw,26px);font-weight:600;letter-spacing:-.015em;color:var(--accent-ink)}
.gp-lead{margin:16px 0 0;max-width:52ch;font-size:clamp(17px,1.4vw,19px);line-height:1.55;color:var(--muted)}
.gp-hero .actions{margin-top:28px}
.gp-hero-ph{position:relative;margin:0;border-radius:32px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gp-hero-ph img{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover}
.gp-hero-ph.is-product{background:linear-gradient(180deg,#fff,#eef0f3)}
.gp-hero-ph.is-product img{object-fit:contain;padding:9%;mix-blend-mode:multiply}
.gp-sib{border-block:1px solid var(--line);background:var(--card)}
.gp-sib-row{display:flex;gap:10px;overflow-x:auto;padding:12px 0;scrollbar-width:none}
.gp-sib-row::-webkit-scrollbar{display:none}
.gp-sib-i{flex:none;display:inline-flex;align-items:center;gap:10px;padding:5px 16px 5px 5px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink-2);font-size:14.5px;font-weight:600;text-decoration:none;white-space:nowrap;transition:box-shadow .2s,color .2s}
.gp-sib-i:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink-2)}
.gp-sib-i[aria-current="page"]{color:var(--ink);box-shadow:inset 0 0 0 2px var(--accent)}
.gp-sib-ph{display:block;width:38px;height:38px;border-radius:50%;overflow:hidden;background:#fff}
.gp-sib-ph img{display:block;width:100%;height:100%;object-fit:cover}
.gp-sib-ph.is-product img{object-fit:contain;padding:3px;mix-blend-mode:multiply}
.gp-h{margin:0 0 clamp(20px,2.4vw,30px);font-size:clamp(28px,3.4vw,44px);line-height:1.08;letter-spacing:-.03em;font-weight:700}
.gp-points{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gp-points li{padding:clamp(22px,2.4vw,30px);border-radius:26px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gp-n{font-size:13px;font-weight:700;letter-spacing:.08em;color:var(--accent-ink)}
.gp-points h3{margin:10px 0 0;font-size:22px;letter-spacing:-.02em;font-weight:700}
.gp-points p{margin:8px 0 0;font-size:16px;line-height:1.55;color:var(--muted)}
.gp-alt{background:var(--card)}
.gp-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(28px,5vw,72px);align-items:start}
.gp-places{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.gp-places li{padding:10px 16px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:15.5px;font-weight:600;color:var(--ink-2)}
.gp-know{display:grid;gap:12px}
.gp-know article{padding:20px 22px;border-radius:20px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.gp-know h3{font-size:18px;letter-spacing:-.01em;font-weight:700}
.gp-know p{margin:6px 0 0;font-size:15.5px;line-height:1.55;color:var(--muted)}
.gp-rel-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 24px}
.gp-rel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,22px)}
.gp-rel-c{display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:transform .25s,box-shadow .25s}
.gp-rel-c:hover{transform:translateY(-3px);box-shadow:0 20px 40px rgba(20,24,28,.12),inset 0 0 0 1px var(--line)}
.gp-rel-ph img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gp-rel-ph.is-product{background:linear-gradient(180deg,#fff,#eff1f3)}
.gp-rel-ph.is-product img{object-fit:contain;padding:18px;mix-blend-mode:multiply}
.gp-rel-tx{display:grid;gap:4px;padding:16px 20px 20px}
.gp-rel-tx b{font-size:18px;letter-spacing:-.01em}
.gp-rel-tx span{font-size:15px;color:var(--muted)}
@media (max-width:899px){.gp-hero-grid,.gp-two{grid-template-columns:minmax(0,1fr)}.gp-hero-ph{max-width:520px}.gp-points{grid-template-columns:minmax(0,1fr)}
  .gp-rel{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(72vw,300px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.gp-rel::-webkit-scrollbar{display:none}.gp-rel-c{scroll-snap-align:start}}
html[data-theme=dark] body.sx :is(.gx-box-ph.is-product,.gx-lab-ph.is-product,.gp-hero-ph.is-product,.gp-rel-ph.is-product){background:linear-gradient(180deg,#f2f3f5,#e3e6e9)}
html[data-theme=dark] body.sx .gp-sib-ph{background:#f2f3f5}

/* ===================== v15: Übersicht Gebäudesicherheit · erst das Problem, dann die Lösung ===================== */
.gx-hero{position:relative;overflow:hidden;isolation:isolate;display:flex;align-items:flex-end;min-height:min(calc(100svh - 52px),920px);background:#07090b;color:#fff}
.gx-hero-bg{position:absolute;inset:0;z-index:-2}
.gx-hero-bg img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.92)}
.gx-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,rgba(5,7,9,.94) 0%,rgba(5,7,9,.72) 34%,rgba(5,7,9,.1) 62%,rgba(5,7,9,0) 100%),linear-gradient(0deg,rgba(5,7,9,.7),rgba(5,7,9,0) 38%)}
.gx-hero-flash{position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;box-shadow:inset 0 0 180px rgba(255,59,48,.55)}
.gx-hero-in{width:100%;padding-top:clamp(110px,15vh,170px);padding-bottom:clamp(40px,6vh,80px)}
.gx-hero-tx{max-width:700px}
.gx-hero h1{margin:20px 0 0;font-size:clamp(40px,4.5vw,66px);line-height:1.02;letter-spacing:-.04em;font-weight:750}
.gx-hero .lead{margin:22px 0 0;max-width:540px;font-size:clamp(18px,1.5vw,21px);line-height:1.5;color:rgba(255,255,255,.8)}
.gx-hero .actions{margin:30px 0 24px}
.gx-hero-cap{margin:14px 0 0;font-size:12.5px;color:rgba(255,255,255,.5)}
.gx-hd{position:absolute;left:54.8%;top:27%;width:0;height:0}
.gx-hd i{position:absolute;left:-30px;top:-30px;width:60px;height:60px;border-radius:50%;border:2px solid rgba(255,69,58,.9);opacity:0}
.gx-hd b{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;background:#ff453a;box-shadow:0 0 0 5px rgba(255,69,58,.3),0 0 28px #ff453a}
.gx-hd-chip{position:absolute;left:26px;top:22px;white-space:nowrap;padding:7px 13px;border-radius:999px;background:rgba(255,59,48,.94);color:#fff;font-size:13px;font-weight:700;letter-spacing:.01em;box-shadow:0 10px 30px rgba(0,0,0,.45)}
.gx-hero-note{position:absolute;z-index:2;right:clamp(16px,5vw,80px);top:clamp(80px,13vh,140px);width:min(360px,calc(100% - 32px));display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 16px;border-radius:22px;background:rgba(246,246,248,.88);-webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);color:#111;box-shadow:0 24px 60px rgba(0,0,0,.5);font-size:14px;line-height:1.35}
.gx-hn-ic{display:grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ff3b30;color:#fff}
.gx-hero-note b{display:block;font-size:14.5px;letter-spacing:-.005em}
.gx-hero-note div>span{color:#3a3a3c}
.gx-hero-note time{font-size:12px;color:#6e6e73}
@media (prefers-reduced-motion:no-preference){
  .gx-hd i{animation:gx-ring 1.9s ease-out infinite}.gx-hd i.r2{animation-delay:.95s}
  .gx-hd b{animation:gx-pop .5s cubic-bezier(.2,.9,.3,1.4) .4s both}.gx-hd-chip{animation:gx-pop .5s cubic-bezier(.2,.9,.3,1.3) .7s both}
  .gx-hero-note{animation:gx-note .7s cubic-bezier(.2,.9,.3,1.15) 1.1s both}
  .gx-hero-flash{animation:gx-flash 1.5s ease-in-out 1.1s 3}
  @keyframes gx-ring{from{transform:scale(.4);opacity:1}to{transform:scale(2.3);opacity:0}}
  @keyframes gx-pop{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
  @keyframes gx-note{from{opacity:0;transform:translateY(-26px) scale(.96)}to{opacity:1;transform:none}}
  @keyframes gx-flash{0%,100%{opacity:0}50%{opacity:1}}}
@media (prefers-reduced-motion:reduce){.gx-hd i{opacity:.6}}
@media (max-width:760px){
  .gx-hero{min-height:calc(100svh - 52px)}
  .gx-hero::after{background:linear-gradient(0deg,rgba(5,7,9,.96) 0%,rgba(5,7,9,.82) 40%,rgba(5,7,9,.15) 66%,rgba(5,7,9,.4) 100%)}
  .gx-hero-in{padding-top:52vh;padding-bottom:28px}
  .gx-hero .trust{grid-template-columns:repeat(3,minmax(0,1fr))}
  .gx-hero-note{left:16px;right:16px;top:16px;width:auto}
  .gx-hd-chip{display:none}}
.gx-stage{position:relative;padding:clamp(10px,1.2vw,16px);border-radius:clamp(26px,3vw,40px);background:#0d0f11;color:#fff;box-shadow:var(--shadow)}
.gx-stage .explorer{box-shadow:none}
@media (max-width:700px){.gx-stage{margin:0 -4px;padding:0 0 18px;overflow:hidden}.gx-stage .explorer-wrap{margin:0}.gx-stage .spot-dots i{background:rgba(255,255,255,.25)}}
.gx-lab-panel .lab-tool{scroll-margin-top:104px}

/* ===================== v15.1: Kurz beantwortet · dunkles Bento mit Grafiken ===================== */
.gx-qa-sec{background:#08090b;color:#f5f5f7}
.gx-qa-sec .ws-head h2{color:#f5f5f7}
.gx-qa-sec .ws-head p{color:#a1a1a6}
.gx-qa-sec .pill{background:rgba(18,181,211,.16);color:#6ee1ed}
.gx-qa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.gx-qa-card{grid-column:span 5;display:flex;flex-direction:column;padding:10px;border-radius:32px;background:#141619;box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.gx-qa-card.is-wide{grid-column:span 7}
.gx-qa-tx{display:flex;flex-direction:column;flex:1;padding:clamp(18px,2vw,26px) clamp(14px,1.6vw,22px)}
.gx-qa-card h3{font-size:15px;font-weight:650;letter-spacing:0;line-height:1.35;color:#6ee1ed}
.gx-qa-a{margin:6px 0 0;font-size:clamp(26px,2.6vw,36px);line-height:1.08;letter-spacing:-.03em;font-weight:750;color:#fff}
.gx-qa-tx p:not(.gx-qa-a){margin:12px 0 0;font-size:15.5px;line-height:1.55;color:#a1a1a6}
.gx-qa-tx .textlink{margin-top:auto;padding-top:16px;color:#6ee1ed}
@media (max-width:980px){.gx-qa-card,.gx-qa-card.is-wide{grid-column:span 6}}
@media (max-width:640px){.gx-qa-card,.gx-qa-card.is-wide{grid-column:span 12}}

.qv{position:relative;flex:none;overflow:hidden;isolation:isolate;height:clamp(260px,23vw,310px);border-radius:24px;background:radial-gradient(90% 80% at 50% 0%,rgba(18,181,211,.24),rgba(18,181,211,0) 70%),linear-gradient(180deg,#1b1f23,#0e1012);color:#fff}
.qv img{display:block}
.qv-chip{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border-radius:999px;background:rgba(20,22,25,.72);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:#fff;font-size:12.5px;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.qv-chip svg{color:#3ddc84}
.qv-chip-tr{right:14px;top:14px}
/* Aufzeichnung */
.qv-rec{display:flex;flex-direction:column;justify-content:flex-end;padding:14px}
.qv-cam{position:absolute;inset:0;margin:0;z-index:-1}
.qv-cam img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) brightness(.82)}
.qv-cam::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3),rgba(0,0,0,0) 35%,rgba(0,0,0,.78))}
.qv-osd{position:absolute;z-index:2;left:14px;top:16px;display:inline-flex;align-items:center;gap:6px;font:600 11.5px/1 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.04em;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.qv-osd i{width:8px;height:8px;border-radius:50%;background:#ff453a;box-shadow:0 0 10px #ff453a}
.qv-osd-r{top:auto;bottom:92px;left:auto;right:16px}
.qv-tl{position:relative;padding:12px 12px 10px;border-radius:16px;background:rgba(14,16,18,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
.qv-tl-bar{position:relative;height:22px;border-radius:6px;background:rgba(255,255,255,.08)}
.qv-tl-bar i{position:absolute;top:3px;bottom:3px;border-radius:4px;background:linear-gradient(180deg,#5fe2f3,#0fa6c6);transform-origin:left}
.qv-tl-head{position:absolute;top:-4px;bottom:-4px;left:58%;width:2px;border-radius:2px;background:#fff;box-shadow:0 0 10px #fff}
.qv-tl-k{display:flex;justify-content:space-between;margin-top:7px;font-size:11px;color:#a1a1a6}
/* Telefon */
.qv-center{display:flex;justify-content:center;align-items:flex-start;padding-top:22px}
.qv-phone{position:relative;flex:none;width:clamp(150px,13vw,176px);aspect-ratio:9/19;padding:6px;border-radius:34px;background:#050607;box-shadow:0 0 0 1.5px #3a3e43,0 30px 60px rgba(0,0,0,.6)}
.qv-ph{position:relative;height:100%;border-radius:28px;overflow:hidden;background:#0d0f11;color:#fff;font-size:10.5px;line-height:1.3}
.qv-ph::before{content:"";position:absolute;z-index:5;top:7px;left:50%;width:36%;height:15px;transform:translateX(-50%);border-radius:10px;background:#000}
.qv-live{position:relative;height:50%}
.qv-live img{width:100%;height:100%;object-fit:cover}
.qv-live-k{position:absolute;left:10px;top:28px;display:inline-flex;align-items:center;gap:4px;padding:3px 7px;border-radius:6px;background:rgba(0,0,0,.55);font-weight:700;font-size:9.5px;letter-spacing:.06em}
.qv-live-k i{width:6px;height:6px;border-radius:50%;background:#ff453a}
.qv-live-n{position:absolute;left:10px;bottom:8px;font-weight:700;font-size:12px;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.qv-note{display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px;align-items:center;margin:8px;padding:8px;border-radius:14px;background:rgba(255,255,255,.1)}
.qv-note>b,.qv-n>b{display:grid;place-items:center;width:24px;height:24px;border-radius:7px;background:linear-gradient(135deg,#3fd7ee,#0a93b3)}
.qv-note span b,.qv-n span b{display:block;font-size:10.5px}
.qv-note small,.qv-n small{display:block;color:#c7c7cc;font-size:9.5px}
.qv-thumbs{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 8px}
.qv-thumbs img{width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:8px}
.qv-app,.qv-arm,.qv-open{padding:32px 10px 10px}
.qv-app-h{margin:0 0 8px;font-size:15px;font-weight:750;letter-spacing:-.01em}
.qv-tile{display:flex;align-items:center;gap:8px;margin-bottom:6px;padding:8px;border-radius:12px;background:rgba(255,255,255,.08)}
.qv-tile>b{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:8px;background:rgba(255,255,255,.14)}
.qv-tile>b.ok{background:#1f8f4e}
.qv-tile span{font-weight:650;font-size:11px}
.qv-tile small{display:block;font-weight:500;color:#a1a1a6;font-size:9.5px}
.qv-tile-img{position:relative;display:block;height:74px;padding:0;overflow:hidden}
.qv-tile-img img{width:100%;height:100%;object-fit:cover}
.qv-tile-img span{position:absolute;left:8px;bottom:6px;display:inline-flex;align-items:center;gap:4px;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.qv-tile-img i{width:6px;height:6px;border-radius:50%;background:#ff453a}
.qv-lock{height:100%;padding:34px 6px 8px;text-align:center;background:radial-gradient(120% 70% at 50% 0%,#2d3a46,#0d0f11)}
.qv-lock-t{margin:0;font-size:40px;font-weight:700;letter-spacing:-.02em;line-height:1}
.qv-lock-d{margin:3px 0 12px;font-size:10.5px;color:#d1d1d6}
.qv-n{display:grid;grid-template-columns:24px minmax(0,1fr);gap:7px;align-items:center;margin:0 2px 6px;padding:7px 8px;border-radius:13px;background:rgba(255,255,255,.16);text-align:left}
.qv-n>b{background:#48484a}.qv-n>b.r{background:#ff3b30}
.qv-ring{display:grid;justify-items:center;align-content:center;gap:2px;width:108px;height:108px;margin:8px auto 14px;border-radius:50%;background:radial-gradient(circle,rgba(61,220,132,.2),rgba(61,220,132,.03) 70%);box-shadow:inset 0 0 0 2px #3ddc84}
.qv-ring b{color:#3ddc84}
.qv-ring span{font-size:14px;font-weight:750}
.qv-ring small{font-size:9.5px;color:#a1a1a6}
.qv-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:3px;padding:3px;border-radius:10px;background:rgba(255,255,255,.08)}
.qv-seg span{padding:6px 0;border-radius:8px;text-align:center;font-size:9.5px;font-weight:650;color:#a1a1a6}
.qv-seg .on{background:#fff;color:#111}
.qv-call{position:relative;height:100%}
.qv-call img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.qv-call::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(0,0,0,0) 38%,rgba(0,0,0,.6))}
.qv-call-top{position:absolute;z-index:2;left:0;right:0;top:34px;text-align:center}
.qv-call-top b{display:block;font-size:15px}
.qv-call-top small{font-size:10px;color:#e5e5ea}
.qv-call-bt{position:absolute;z-index:2;left:0;right:0;top:54%;display:flex;justify-content:space-around}
.qv-call-bt i{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#fff}
.qv-call-bt .no{background:#ff3b30}.qv-call-bt .no svg{transform:rotate(135deg)}
.qv-call-bt .yes{background:#34c759}
.qv-duo{display:flex;justify-content:center;align-items:flex-start;gap:clamp(12px,2vw,24px);padding-top:22px}
.qv-station{flex:none;width:clamp(86px,8.5vw,108px);aspect-ratio:3/4;margin-top:34px;border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 18px 40px rgba(0,0,0,.5)}
.qv-station img{width:100%;height:100%;object-fit:contain;padding:8px;mix-blend-mode:multiply}
.qv-open{text-align:center}
.qv-unlock{position:relative;display:grid;place-items:center;width:84px;height:84px;margin:12px auto 6px;border-radius:50%;background:rgba(255,255,255,.08)}
.qv-unlock svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.qv-unlock circle{fill:none;stroke:#3fd7ee;stroke-width:3;stroke-dasharray:126;stroke-dashoffset:40;stroke-linecap:round}
.qv-open-s{margin:0;font-size:10px;color:#a1a1a6}
.qv-open-ok{display:inline-flex;align-items:center;gap:4px;margin-top:10px;padding:5px 9px;border-radius:999px;background:rgba(52,199,89,.2);color:#6ff09a;font-size:10px;font-weight:700}
/* Erkennung */
.qv-detect>img{position:absolute;inset:0;z-index:-1;width:100%;height:100%;object-fit:cover}
.qv-detect::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(0,0,0,0) 50%,rgba(0,0,0,.72))}
.qv-box{position:absolute;z-index:2;border:2px solid #3fd7ee;border-radius:10px;box-shadow:0 0 0 1px rgba(0,0,0,.25),0 0 26px rgba(63,215,238,.45)}
.qv-box b{position:absolute;left:6px;top:6px;padding:4px 8px;border-radius:7px;background:#3fd7ee;color:#04252d;font-size:11.5px;font-weight:750}
.qv-legend{position:absolute;z-index:3;left:12px;right:12px;bottom:12px;display:flex;flex-wrap:wrap;gap:6px}
.qv-legend span{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border-radius:999px;background:rgba(14,16,18,.78);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);font-size:12px;font-weight:650;color:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.qv-legend .ok svg{color:#3ddc84}.qv-legend .no svg{color:#ff7a70}.qv-legend .no{color:#d1d1d6}
/* Kosten, Preise, Zugänge */
.qv-cost,.qv-price,.qv-lost{display:grid;place-items:center;padding:18px}
.qv-cost-in,.qv-receipt,.qv-listcard{width:min(100%,340px)}
.qv-zero{margin:0 0 14px;text-align:center}
.qv-zero b{display:block;font-size:clamp(58px,6vw,80px);line-height:1;letter-spacing:-.05em;font-weight:800;background:linear-gradient(135deg,#fff 30%,#7fe6f5);-webkit-background-clip:text;background-clip:text;color:transparent}
.qv-zero span{display:block;margin-top:6px;font-size:12.5px;color:#a1a1a6}
.qv-rows,.qv-receipt,.qv-listcard{list-style:none;margin:0;padding:4px 14px;border-radius:18px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.qv-rows li{display:grid;grid-template-columns:minmax(0,1fr) auto 38px;align-items:center;gap:10px;padding:10px 0;font-size:13.5px;color:#f5f5f7}
.qv-rows li+li,.qv-list li+li{border-top:1px solid rgba(255,255,255,.08)}
.qv-rows small{color:#8e8e93;font-size:12px}
.qv-tog{position:relative;width:38px;height:22px;border-radius:11px;background:rgba(255,255,255,.18)}
.qv-tog::after{content:"";position:absolute;left:2px;top:2px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.4)}
.qv-receipt,.qv-listcard{padding:14px 16px}
.qv-receipt-h{margin:0 0 6px;font-size:11.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#8e8e93}
.qv-receipt ul,.qv-list{list-style:none;margin:0;padding:0}
.qv-receipt li{display:flex;justify-content:space-between;gap:12px;padding:9px 0;font-size:14px;color:#f5f5f7}
.qv-receipt li+li{border-top:1px dashed rgba(255,255,255,.14)}
.qv-receipt li b{color:#6ee1ed;font-weight:700;white-space:nowrap}
.qv-receipt-f{margin:8px 0 0;font-size:11.5px;color:#8e8e93}
.qv-list li{display:grid;grid-template-columns:30px minmax(0,1fr) auto;gap:10px;align-items:center;padding:9px 6px;margin:0 -6px;border-radius:10px}
.qv-list li>b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.12);font-size:12px}
.qv-list span{font-size:13.5px;font-weight:650;color:#f5f5f7}
.qv-list small{display:block;font-size:11.5px;font-weight:500;color:#8e8e93}
.qv-list em{font-style:normal;font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:999px;background:rgba(52,199,89,.16);color:#6ff09a}
.qv-list .is-lost em{background:rgba(255,69,58,.2);color:#ff8a80}
.qv-list .is-lost span{color:#d1d1d6}
/* Haustier */
.qv-pet>svg{position:absolute;inset:8px 6px 0;width:calc(100% - 12px);height:calc(100% - 8px)}
.qv-fan{fill:rgba(63,215,238,.16)}
.qv-rays line{stroke:rgba(63,215,238,.65);stroke-width:1.3;stroke-dasharray:4 5}
.qv-petzone{fill:rgba(61,220,132,.12);stroke:rgba(61,220,132,.55);stroke-dasharray:5 5}
.qv-floor,.qv-wall{stroke:rgba(255,255,255,.35);stroke-width:2}
.qv-pet-t{fill:#c9f7da;font:600 13px Inter,system-ui,sans-serif}
.qv-pir{fill:#fff}
@media (prefers-reduced-motion:no-preference){
  .qv-osd i{animation:qv-blink 1.4s steps(2) infinite}
  .gx-qa-card.in .qv-tl-bar i{animation:qv-grow .9s cubic-bezier(.2,.9,.3,1) both}
  .gx-qa-card.in .qv-tl-head{animation:qv-play 7s linear infinite}
  .qv-phone{transform:translateY(18px);transition:transform 1s cubic-bezier(.2,.9,.3,1)}
  .gx-qa-card.in .qv-phone{transform:none}
  .qv-pop{opacity:0;transform:translateY(-8px) scale(.97)}
  .gx-qa-card.in .qv-pop{animation:qv-pop .6s cubic-bezier(.2,.9,.3,1.2) .6s both}
  .gx-qa-card.in .qv-pop.d2{animation-delay:1.1s}.gx-qa-card.in .qv-pop.d3{animation-delay:1.6s}
  .gx-qa-card.in .qv-box{animation:qv-lock .9s cubic-bezier(.2,.9,.3,1) .4s both}
  .gx-qa-card.in .qv-ring{animation:qv-pulse 2.4s ease-out infinite}
  .gx-qa-card.in .qv-call-bt .yes{animation:qv-wiggle 1.2s ease-in-out infinite}
  .gx-qa-card.in .qv-unlock circle{animation:qv-hold 3.4s ease-in-out infinite}
  .gx-qa-card.in .qv-open-ok{animation:qv-okshow 3.4s ease-in-out infinite}
  .gx-qa-card.in .qv-rays line{animation:qv-dash 1.2s linear infinite}
  .gx-qa-card.in .qv-rows li,.gx-qa-card.in .qv-receipt li{animation:qv-pop .5s ease both}
  .gx-qa-card.in .qv-rows li:nth-child(2),.gx-qa-card.in .qv-receipt li:nth-child(2){animation-delay:.12s}
  .gx-qa-card.in .qv-rows li:nth-child(3),.gx-qa-card.in .qv-receipt li:nth-child(3){animation-delay:.24s}
  .gx-qa-card.in .qv-receipt li:nth-child(4){animation-delay:.36s}.gx-qa-card.in .qv-receipt li:nth-child(5){animation-delay:.48s}
  .gx-qa-card.in .qv-list .is-lost{animation:qv-flash 1.2s ease 1s both}
  @keyframes qv-blink{50%{opacity:.25}}
  @keyframes qv-grow{from{transform:scaleX(0)}to{transform:none}}
  @keyframes qv-play{from{left:0}to{left:100%}}
  @keyframes qv-pop{from{opacity:0;transform:translateY(-8px) scale(.97)}to{opacity:1;transform:none}}
  @keyframes qv-lock{from{opacity:0;transform:scale(1.25)}to{opacity:1;transform:none}}
  @keyframes qv-pulse{0%{box-shadow:inset 0 0 0 2px #3ddc84,0 0 0 0 rgba(61,220,132,.45)}70%{box-shadow:inset 0 0 0 2px #3ddc84,0 0 0 16px rgba(61,220,132,0)}100%{box-shadow:inset 0 0 0 2px #3ddc84,0 0 0 0 rgba(61,220,132,0)}}
  @keyframes qv-wiggle{0%,100%{transform:none}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
  @keyframes qv-hold{0%{stroke-dashoffset:126}55%,100%{stroke-dashoffset:0}}
  @keyframes qv-okshow{0%,55%{opacity:0}62%,92%{opacity:1}100%{opacity:0}}
  @keyframes qv-dash{to{stroke-dashoffset:-18}}
  @keyframes qv-flash{0%{background:rgba(255,69,58,0)}40%{background:rgba(255,69,58,.16)}100%{background:rgba(255,69,58,0)}}}
.gx-con-ph.is-product{background:linear-gradient(180deg,#fff,#eff1f3)}
.gx-con-ph.is-product img{object-fit:contain;padding:4px;mix-blend-mode:multiply}
html[data-theme=dark] body.sx .gx-con-ph.is-product{background:linear-gradient(180deg,#f2f3f5,#e3e6e9)}
@media (max-width:980px){.qv-cost,.qv-price,.qv-lost{height:auto;min-height:260px}}
.hero-sm .hero-mark{width:min(30vw,400px);right:5%}

.gx-hero-bg picture{display:contents}
@media (max-width:760px){.gx-hero-bg{top:-27svh;bottom:auto;height:120svh}.gx-hero-bg img{object-position:30% 50%!important}}

/* ===================== v15.6: Einstieg Gebäudesicherheit · drei klare Wege mit Produktbild ===================== */
.nd-sec .nd-h{margin:0 0 clamp(22px,3vw,36px);text-align:center;font-size:clamp(32px,4.4vw,58px);line-height:1.04;letter-spacing:-.035em;font-weight:750}
.nd-sec .nd-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(12px,1.4vw,20px)}
.nd-sec .nd-tile{position:relative;display:flex;flex-direction:column;border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#fff 0%,#eef0f3 100%);color:#14181c;box-shadow:var(--shadow),inset 0 0 0 1px var(--line);text-decoration:none;transition:transform .3s,box-shadow .3s}
.nd-sec .nd-tile:hover{transform:translateY(-4px);box-shadow:0 24px 50px rgba(20,24,28,.14),inset 0 0 0 1px var(--line)}
.nd-sec .nd-ph{display:grid;place-items:center;padding:clamp(22px,3vw,40px) clamp(22px,3vw,40px) 0}
.nd-sec .nd-ph img{display:block;width:min(80%,300px);height:auto;aspect-ratio:1;object-fit:contain;mix-blend-mode:multiply;transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.nd-sec .nd-tile:hover .nd-ph img{transform:scale(1.05) translateY(-4px)}
.nd-sec .nd-tx{display:block;padding:10px clamp(22px,2.4vw,30px) clamp(22px,2.4vw,30px)}
.nd-sec .nd-tx b{display:block;font-size:clamp(24px,2.3vw,32px);line-height:1.05;letter-spacing:-.025em;font-weight:750;color:#14181c}
.nd-sec .nd-tx>span{display:block;margin-top:6px;padding:0;font-size:16px;color:#5d666e}
.nd-sec .nd-go{position:absolute;right:clamp(16px,1.8vw,22px);top:clamp(16px,1.8vw,22px);display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#14181c;color:#fff;transition:background .2s,transform .2s}
.nd-sec .nd-tile:hover .nd-go{background:var(--accent);transform:translateX(3px)}
@media (max-width:800px){.nd-sec .nd-grid{grid-template-columns:minmax(0,1fr)}.nd-sec .nd-tile{display:grid;grid-template-columns:100px minmax(0,1fr);align-items:center}.nd-sec .nd-ph{padding:10px}.nd-sec .nd-ph img{width:100%}.nd-sec .nd-tx{padding:16px 40px 16px 4px}.nd-sec .nd-tx b{font-size:21px}.nd-sec .nd-tx>span{font-size:15px}.nd-sec .nd-go{display:grid;top:50%;right:10px;width:28px;height:28px;margin-top:-14px;background:none;color:#14181c}.nd-sec .nd-tile:hover .nd-go{background:none;color:var(--accent-ink)}}

/* ===================== v15.6: Anschluss-Grafiken, Ablauf, System-Handy, Türsprechanlage finden ===================== */
.gx-con-ph.is-graphic{display:block;aspect-ratio:16/10;background:radial-gradient(90% 70% at 50% 0%,var(--accent-soft),rgba(255,255,255,0) 70%),linear-gradient(180deg,#f7f8fa,#eceef1)}
.gx-con-ph.is-graphic svg{display:block;width:100%;height:100%}
.cg .cg-dev{fill:#fff;stroke:#c3cad1;stroke-width:1.5}
.cg .cg-dark{fill:#1d2227}.cg .cg-lens{fill:#4a5964}.cg .cg-scr{fill:#2a3137}.cg .cg-live{fill:#45525c}.cg .cg-fig{fill:#56626c}.cg .cg-fig2{fill:#8b98a3}
.cg .cg-grill{stroke:#aab3bb;stroke-width:2;stroke-linecap:round}
.cg .cg-btn{fill:none;stroke:var(--accent);stroke-width:2.5}.cg .cg-acc{fill:var(--accent)}
.cg .cg-bat{fill:none;stroke:#1d2227;stroke-width:1.5}.cg .cg-bat-t{fill:#1d2227}
.cg .cg-ok{fill:#34c759}.cg .cg-no{fill:#ff453a}
.cg .cg-ant{stroke:#c3cad1;stroke-width:3;stroke-linecap:round}
.cg .cg-wire{stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.cg .cg-cable{stroke:var(--accent);stroke-width:7;stroke-linecap:round}
.cg .cg-wave{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.cg .cg-t{font:600 14px var(--body);fill:#5d666e}
.cg .cg-power{fill:none;stroke:#9aa4ad;stroke-width:3;stroke-linecap:round}
.cg .cg-dash{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:2 8}
.cg .cg-solar{fill:#1f3346;stroke:#c3cad1;stroke-width:1.5}.cg .cg-solar-l{stroke:#4f7393;stroke-width:1.2}.cg .cg-sun{fill:#ffc94a}
.cg .cg-glass{fill:#e3f1f6;stroke:#c3cad1;stroke-width:1}.cg .cg-frame{stroke:#c3cad1;stroke-width:3}
.cg .cg-key{fill:#aab3bb}.cg .cg-chip{fill:#fff;opacity:.85}
.cg .cg-tl{font:700 14px var(--body);fill:var(--accent-ink)}
html[data-theme=dark] body.sx .gx-con-ph.is-graphic{background:radial-gradient(90% 70% at 50% 0%,rgba(18,181,211,.18),rgba(18,181,211,0) 70%),linear-gradient(180deg,#1c2024,#14171a)}
html[data-theme=dark] body.sx .cg .cg-t{fill:#9aa3aa}html[data-theme=dark] body.sx .cg .cg-tl{fill:#6ee1ed}
.gx-con-note{display:flex;gap:8px;align-items:flex-start;margin:-4px 0 16px;padding:10px 12px;border-radius:12px;background:var(--paper);font-size:14px;line-height:1.45;color:var(--ink-2)}
.gx-con-note svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent-ink)}

.gx-lab-row:has(> :nth-child(5):last-child){grid-template-columns:repeat(5,minmax(0,1fr))}

.sy-vis{position:relative;display:flex;justify-content:center;aspect-ratio:4/3;overflow:hidden;padding-top:22px;background:radial-gradient(90% 80% at 50% 0%,rgba(18,181,211,.24),rgba(18,181,211,0) 70%),linear-gradient(180deg,#1b1f23,#0e1012)}
.sy-vis .qv-phone{width:clamp(150px,40%,180px);height:max-content;box-shadow:0 0 0 1.5px #3a3e43,0 30px 60px rgba(0,0,0,.6)}
.sy-vis .qv-pop{opacity:1;transform:none;animation:none}
.sy-acts{display:flex;gap:6px;margin:0 8px}
.sy-acts span{flex:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;padding:8px 0;border-radius:12px;background:rgba(255,255,255,.12);font-weight:700;font-size:10.5px}
.sy-acts span.on{background:#34c759}
.sy-acts svg{width:13px;height:13px}
@media (max-width:900px){.sy-vis{aspect-ratio:16/10}}

.fl{list-style:none;margin:0 0 28px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(14px,1.4vw,20px)}
.fl-step{position:relative;display:flex;flex-direction:column;padding:10px 10px 24px;border-radius:26px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.fl-step:not(:last-child)::after{content:"";position:absolute;z-index:2;top:30%;right:calc(clamp(14px,1.4vw,20px) / -2);width:9px;height:9px;border-top:2.5px solid var(--accent);border-right:2.5px solid var(--accent);transform:translate(65%,-50%) rotate(45deg)}
.fl-vis{display:grid;place-items:center;aspect-ratio:16/11;border-radius:18px;background:radial-gradient(110% 90% at 50% 0%,var(--accent-soft),rgba(255,255,255,0) 72%),linear-gradient(180deg,#f8f9fa,#eceef1)}
.fl-vis svg{display:block;width:84%;height:auto}
.fl-vis .s{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.fl-vis .s.thin{stroke-width:1.6;opacity:.55}
.fl-vis .f{fill:#fff}
.fl-vis .a{fill:none;stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.fl-vis .a.thick{stroke-width:6}
.fl-vis .f.a{fill:#fff}
.fl-vis .af{fill:var(--accent)}
.fl-vis .af.soft{opacity:.28}
.fl-vis .w{fill:#fff}
.fl-vis .w-s{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.fl-vis .t{fill:var(--ink);font:800 34px var(--display);letter-spacing:-.02em}
.fl-vis .t.sm{font:700 8.5px var(--body);letter-spacing:.18em}
.fl-n{position:relative;z-index:1;display:grid;place-items:center;width:34px;height:34px;margin:-17px 0 0 14px;border-radius:50%;background:var(--ink);color:var(--card);font-size:14px;font-weight:700;box-shadow:0 0 0 4px var(--card)}
.fl-step h3{margin:12px 14px 4px;font-size:20px;line-height:1.2;letter-spacing:-.02em}
.fl-step p{margin:0 14px;font-size:15px;line-height:1.5;color:var(--muted)}
.fl-cta{display:flex;justify-content:center;margin:0 0 22px}
html[data-theme=dark] body.sx .fl-vis{background:radial-gradient(110% 90% at 50% 0%,rgba(18,181,211,.16),rgba(18,181,211,0) 72%),linear-gradient(180deg,#1c2024,#14171a)}
html[data-theme=dark] body.sx .fl-vis .f{fill:#22272c}
@media (max-width:1100px){.fl{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(64vw,250px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.fl::-webkit-scrollbar{display:none}.fl-step{scroll-snap-align:start}}

.tf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(16px,2vw,28px);align-items:start}
.tf-qs{display:grid;gap:14px}
.tf-q{min-width:0;margin:0;padding:20px 22px 22px;border:0;border-radius:24px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.tf-q legend{float:left;width:100%;display:flex;align-items:center;gap:10px;margin:0 0 14px;padding:0;font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--ink)}
.tf-qn{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--ink);color:var(--card);font-size:13px}
.tf-opts{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.tf-o{position:relative;cursor:pointer}
.tf-o input{position:absolute;opacity:0;pointer-events:none}
.tf-o span{display:inline-flex;align-items:center;min-height:44px;padding:10px 18px;border-radius:999px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font-size:15.5px;font-weight:600;color:var(--ink-2);transition:background .15s,color .15s,box-shadow .15s}
.tf-o:hover span{box-shadow:inset 0 0 0 1.5px var(--ink-2)}
.tf-o input:checked+span{background:var(--ink);color:var(--card);box-shadow:none}
.tf-o input:focus-visible+span{outline:3px solid var(--accent);outline-offset:2px}
.tf-res{position:sticky;top:84px;padding:22px;border-radius:28px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.tf-top{display:grid;grid-template-columns:112px minmax(0,1fr);gap:18px;align-items:center;margin-bottom:14px}
.tf-ph{display:grid;place-items:center;aspect-ratio:1;border-radius:18px;background:linear-gradient(180deg,#fff,#eef0f3);box-shadow:inset 0 0 0 1px var(--line)}
.tf-ph>span{display:contents}
.tf-ph img{display:block;width:100%;height:100%;object-fit:contain;padding:10px;mix-blend-mode:multiply}
.tf-k{display:block;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-ink)}
.tf-res h3{margin:4px 0 4px;font-size:clamp(21px,2vw,26px);line-height:1.12;letter-spacing:-.02em}
.tf-sub{margin:0;font-size:15px;color:var(--muted)}
.tf-list{list-style:none;margin:0;padding:0}
.tf-list li{position:relative;display:grid;gap:2px;padding:11px 0 11px 34px;border-top:1px solid var(--line)}
.tf-list li::before{content:"";position:absolute;left:0;top:12px;width:22px;height:22px;border-radius:50%;background:var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.5l3 3 7-7' fill='none' stroke='%2305697d' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.tf-list b{font-size:16px;line-height:1.3}
.tf-list span{font-size:14.5px;line-height:1.45;color:var(--muted)}
.tf-note{display:block;margin-top:6px;padding:8px 10px;border-radius:10px;background:var(--paper);font-size:13.5px;line-height:1.45;color:var(--ink-2)}
.tf-g{display:flex;align-items:center;gap:12px;margin:6px 0 0;padding-top:12px;border-top:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.tf-g b{color:var(--ink)}
.tf-price{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin:14px 0 16px;padding:14px 16px;border-radius:16px;background:var(--paper)}
.tf-price>span{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.tf-price b{font-size:26px;letter-spacing:-.02em}
.tf-price small{flex-basis:100%;font-size:13.5px;color:var(--muted)}
.tf-cta{width:100%;justify-content:center}
[data-when][hidden]{display:none!important}
@media (max-width:900px){.tf{grid-template-columns:minmax(0,1fr)}.tf-res{position:static}}
@media (max-width:560px){.tf-q{padding:16px}.tf-o span{min-height:40px;padding:8px 14px;font-size:15px}.tf-res{padding:16px}.tf-top{grid-template-columns:88px minmax(0,1fr);gap:14px}}
/* v15.6: einzelner Garantie-Chip im Hero nicht in eine schmale Spalte zwingen */
.trust:has(> span:only-child){display:flex}
.trust span:only-child{white-space:nowrap}

/* v15.7: Datenschutz, Cookie-Liste und Einstellungen */
.lg-sec p+p,.lg-sec .lg-store+p,.lg-sec p+.lg-store{margin-top:12px}
.lg-store{list-style:none;margin:12px 0 0;padding:0;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.lg-store li{display:grid;grid-template-columns:110px 1fr;gap:14px;padding:14px 16px;font-size:15.5px;line-height:1.5;color:var(--ink-2)}
.lg-store li+li{border-top:1px solid var(--line)}
.lg-store b{color:var(--ink);font-weight:600}
.lg-store code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13.5px;color:var(--ink);padding-top:2px}
@media(max-width:560px){.lg-store li{grid-template-columns:1fr;gap:4px}}
.lg-prefs{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px 14px;flex-wrap:wrap;padding:12px 12px 12px 16px;border-radius:16px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.lg-sec .lg-prefs p{margin:0;font-size:15px}
.lg-prefs [hidden]{display:none!important}
.lg-sec[id]{scroll-margin-top:90px}

/* v15.7: Kontakt mit echten Daten, Senden per E-Mail oder WhatsApp */
.ct-call{margin:14px 0 0;font-size:17px;color:var(--ink-2)}
.ct-call a{font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap}
.ct-call a:hover{text-decoration:underline}
.ct-btns{display:flex;flex-wrap:wrap;gap:10px}
.ct-direct a{color:var(--ink);text-decoration:none;font-weight:500}
.ct-direct a:hover{text-decoration:underline}
.ct-result #copy-status{margin:0;font-weight:600;color:var(--ink)}
.ct-result #copy-status:empty{display:none}
.ct-fallback{margin:0;font-size:14.5px;color:var(--ink-2)}
.ct-fallback a{color:var(--ink);font-weight:600}
.lg-sec a[href^="tel:"],.lg-sec a[href^="mailto:"]{color:var(--ink);font-weight:500}

/* v15.7: Startseite, Kontaktblock statt Gründer-Block */
.h-reach{max-width:880px;margin:0 auto;text-align:center}
.h-reach .h-lead{margin-left:auto;margin-right:auto}
.h-reach .actions{justify-content:center}
.h-reach-list{list-style:none;margin:28px 0 26px;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.h-reach-list li{display:grid;gap:4px;padding:18px 16px;border-radius:20px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.h-reach-list span{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.h-reach-list a{font-size:17px;font-weight:600;color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.h-reach-list a:hover{text-decoration:underline}
@media(max-width:700px){.h-reach-list{grid-template-columns:1fr}}

/* v15.7: Reparaturservice B2B ------------------------------------------------------------ */
/* Nutzen mit Aufschlag-Schema */
.pb{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,64px);align-items:center}
.pb-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:20px}
.pb-list li{display:grid;grid-template-columns:44px 1fr;gap:14px;align-items:start}
.pb-ic{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-ink)}
.pb-list b{display:block;font-size:18px;letter-spacing:-.01em;color:var(--ink)}
.pb-list div span{display:block;margin-top:3px;color:var(--muted);font-size:15.5px;line-height:1.5}
.pb-fig{margin:0;padding:clamp(16px,2.4vw,26px);border-radius:28px;background:radial-gradient(110% 90% at 50% 0%,var(--accent-soft),rgba(255,255,255,0) 70%),linear-gradient(180deg,#f8f9fa,#eceef1);box-shadow:inset 0 0 0 1px var(--line)}
.pb-fig figcaption{text-align:center;color:var(--muted);font-size:15px;line-height:1.5;margin-top:6px}
.mk-svg{display:block;width:100%;height:auto}
.mk-ground{stroke:var(--line);stroke-width:2}
.mk-gray{fill:#fff;stroke:var(--ink);stroke-width:2.4}
.mk-vio{fill:var(--accent)}
.mk-eur{fill:var(--ink);font:700 26px var(--display)}
.mk-eur.w{fill:#fff}
.mk-sym{fill:var(--ink);font:800 34px var(--display)}
.mk-lab{fill:var(--ink-2);font:600 14px var(--body)}
.mk-lab.a{fill:var(--accent-ink)}
.mk-grow{transform-box:fill-box;transform-origin:50% 100%}
.pb-fig.in .mk-grow{animation:mkGrow .9s .35s cubic-bezier(.2,.8,.2,1) both}
@keyframes mkGrow{from{transform:scaleY(0)}to{transform:scaleY(1)}}
html[data-theme=dark] body.sx .pb-fig{background:radial-gradient(110% 90% at 50% 0%,rgba(155,107,255,.18),rgba(155,107,255,0) 72%),linear-gradient(180deg,#1c2024,#14171a)}
html[data-theme=dark] body.sx .mk-gray{fill:#22272c;stroke:#e6e8eb}
@media(max-width:900px){.pb{grid-template-columns:1fr}}

/* Was wir reparieren: dunkle Bühne, Geräte in echten Proportionen */
.rw{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;padding:clamp(12px,1.8vw,20px);border-radius:34px;background:#0c0d12;box-shadow:0 30px 80px rgba(20,12,40,.28)}
.rw-devs{display:grid;grid-template-columns:repeat(4,1fr);width:100%}
.rw-devs button{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px 8px}
.rw-stage{position:relative;margin-top:12px;padding:8px;border-radius:24px;background:radial-gradient(70% 60% at 50% 45%,rgba(139,92,246,.16),rgba(139,92,246,0) 70%),linear-gradient(180deg,#15161d,#0b0c11);box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.rw-svg{display:block;width:100%;height:auto}
.rw-svg[hidden]{display:none}
.rw-body{fill:#20232b;stroke:rgba(255,255,255,.34);stroke-width:2;stroke-linejoin:round}
.rw-back{fill:#262a33}
.rw-lip{fill:#191b22}
.rw-scr{fill:#06070a}
.rw-isl{fill:#000;stroke:rgba(255,255,255,.14)}
.rw-key{fill:#2c3039;stroke:rgba(255,255,255,.22);stroke-width:1}
.rw-hinge{fill:#2a2e37}
.rw-x,.rw-x *{fill:none;stroke:rgba(196,181,253,.24);stroke-width:1.4;stroke-linecap:round}
.rw-p{cursor:pointer;opacity:.55;transition:opacity .35s}
.rw-svg.has-on .rw-p:not(.on){opacity:.3}
.rw-p.on{opacity:1}
.rw-p .g{fill:none;stroke:#b9a5ff;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:stroke .3s}
.rw-p .g.thin{stroke-width:1.3}
.rw-p .g.thick{stroke-width:4}
.rw-p .g.fill{fill:#2a2340}
.rw-p .g.dash{stroke-dasharray:7 6}
.rw-p.on .g{stroke:#e4dcff;filter:drop-shadow(0 0 6px rgba(167,139,250,.9))}
.rw-p .glass{fill:rgba(167,139,250,0);stroke:none;transition:fill .4s}
.rw-p.on .glass{fill:rgba(167,139,250,.1)}
.rw-crack path{fill:none;stroke:#fff;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:440;stroke-dashoffset:440;opacity:0}
.rw-p.on .rw-crack path{opacity:1;animation:rwCrack 1.1s cubic-bezier(.2,.7,.2,1) forwards;filter:drop-shadow(0 0 3px rgba(255,255,255,.8))}
@keyframes rwCrack{to{stroke-dashoffset:0}}
.rw-swell{fill:rgba(245,165,36,0);transform-box:fill-box;transform-origin:center}
.rw-p.on .rw-swell{animation:rwSwell 1.8s ease-in-out infinite alternate}
@keyframes rwSwell{from{fill:rgba(245,165,36,.06);transform:scale(.8,.9)}to{fill:rgba(245,165,36,.34);transform:scale(1.06,1.03)}}
.rw-p.on[data-p=battery] .g{stroke:#fcd34d;filter:drop-shadow(0 0 6px rgba(245,165,36,.9))}
.rw-water{fill:rgba(96,165,250,.34)}
.rw-rise{transform:translateY(140px)}
.rw-p.on .rw-rise{animation:rwRise 2.4s cubic-bezier(.3,.6,.3,1) forwards}
@keyframes rwRise{to{transform:translateY(0)}}
.rw-drop{fill:#60a5fa;opacity:0}
.rw-p.on .rw-drop{animation:rwDrop 1.6s ease-in infinite}
.rw-p.on .rw-drop:nth-of-type(2){animation-delay:.55s}
.rw-p.on .rw-drop:nth-of-type(3){animation-delay:1.1s}
@keyframes rwDrop{0%{opacity:0;transform:translateY(-24px)}25%{opacity:1}100%{opacity:0;transform:translateY(38px)}}
.rw-rust circle{fill:#2dd4bf;opacity:0}
.rw-p.on .rw-rust circle{animation:rwShow .6s 1.4s forwards}
@keyframes rwShow{to{opacity:.85}}
.rw-p.on .rw-plug{animation:rwPlug 1.6s ease-in-out infinite}
@keyframes rwPlug{0%,100%{transform:translateY(8px)}50%{transform:translateY(-6px)}}
.rw-p.on .rw-plugx{animation:rwPlugX 1.6s ease-in-out infinite}
@keyframes rwPlugX{0%,100%{transform:translateX(10px)}50%{transform:translateX(-5px)}}
.rw-spark{fill:none;stroke:#fcd34d;stroke-width:2;stroke-linecap:round;opacity:0}
.rw-p.on .rw-spark{animation:rwSpark 1.6s ease-in-out infinite}
@keyframes rwSpark{0%,40%,100%{opacity:0}48%,58%{opacity:1}}
.rw-wave{fill:none;stroke:#c4b5fd;stroke-width:2.2;stroke-linecap:round;opacity:0}
.rw-p.on .rw-wave{animation:rwWave 1.4s ease-out infinite}
.rw-p.on .rw-wave.w2{animation-delay:.35s}
@keyframes rwWave{0%{opacity:0}30%{opacity:1}100%{opacity:0}}
.rw-fan,.rw-disc{transform-box:fill-box;transform-origin:center}
.rw-p.on .rw-fan{animation:rwSpin .7s linear infinite}
.rw-p.on .rw-disc{animation:rwSpin 1.3s linear infinite}
@keyframes rwSpin{to{transform:rotate(360deg)}}
.rw-heat{fill:none;stroke:#fb923c;stroke-width:2.2;stroke-linecap:round;opacity:0}
.rw-p.on .rw-heat{animation:rwHeat 1.6s ease-in-out infinite}
.rw-p.on .rw-heat.h2{animation-delay:.45s}
.rw-p.on .rw-heat.h3{animation-delay:.9s}
@keyframes rwHeat{0%{opacity:0;transform:translateY(8px)}40%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.rw-p .k{fill:rgba(196,181,253,0);stroke:none}
.rw-p.on .k{fill:rgba(196,181,253,.7)}
.rw-p.on .rw-blink{animation:rwBlink 1.1s ease-in-out infinite}
@keyframes rwBlink{50%{opacity:.2}}
.rw-drift{transform-box:fill-box;transform-origin:center}
.rw-p.on .rw-drift{animation:rwDrift 2s ease-in-out infinite}
@keyframes rwDrift{0%,100%{transform:translate(0,0)}30%{transform:translate(6px,-3px)}60%{transform:translate(-4px,5px)}}
.rw-lab{position:absolute;z-index:2;transform:translate(-50%,-50%);padding:6px 12px;border-radius:999px;background:#fff;color:#111;font-size:12.5px;font-weight:700;white-space:nowrap;box-shadow:0 8px 24px rgba(0,0,0,.45);pointer-events:none;animation:rwPop .35s cubic-bezier(.2,.9,.3,1.3)}
.rw-lab[hidden]{display:none}
@keyframes rwPop{from{opacity:0;transform:translate(-50%,-30%) scale(.9)}}
.rw-list{border:0;margin:14px 0 0;padding:0}
.rw-list .chip span{color:#e5e7eb}
.rw-right{display:flex;flex-direction:column;min-height:100%;padding:clamp(20px,2.4vw,30px);border-radius:26px;background:linear-gradient(160deg,rgba(139,92,246,.22),rgba(139,92,246,.05));box-shadow:inset 0 0 0 1px rgba(196,181,253,.18);color:#fff}
.rw-k{display:block;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#c4b5fd}
.rw-info h3{margin:10px 0 14px;font-size:clamp(24px,2.3vw,31px);line-height:1.15;letter-spacing:-.02em;color:#fff}
.rw-info p{margin:0;color:rgba(255,255,255,.66);font-size:15px}
.rw-info .checklist{margin-top:10px}
.rw-info .checklist li{color:rgba(255,255,255,.92)}
.rw-foot{margin-top:auto;padding-top:22px;border-top:1px solid rgba(255,255,255,.1)}
.rw-foot p{margin:0 0 14px;color:rgba(255,255,255,.66);font-size:14.5px;line-height:1.5}
.rw-info+.rw-foot,.rw-info:not([hidden])~.rw-foot{margin-top:auto}
@media(max-width:960px){.rw{grid-template-columns:1fr}.rw-foot{margin-top:22px}}
@media(max-width:560px){.rw{border-radius:26px}.rw-devs{grid-template-columns:repeat(2,1fr)}.rw-lab{font-size:11.5px;padding:5px 10px}}
@media(prefers-reduced-motion:reduce){.rw-p.on *{animation:none!important}.rw-p.on .rw-crack path{stroke-dashoffset:0;opacity:1}.rw-p.on .rw-rise{transform:none}.rw-p.on .rw-drop,.rw-p.on .rw-wave,.rw-p.on .rw-heat,.rw-p.on .rw-spark{opacity:1}.rw-p.on .rw-rust circle{opacity:.85}}

/* Partner werden: Kurzformular */
.pj-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,64px);align-items:start}
.pj-head h2{margin:16px 0 12px;font-size:clamp(34px,4.2vw,54px);line-height:1.04;letter-spacing:-.035em}
.pj-head>p{margin:0;color:var(--muted);font-size:18px;line-height:1.55}
.pj-head .pj-alt{margin-top:22px;font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.pj-alt a{color:var(--ink);font-weight:600}
.pj{display:grid;gap:16px;padding:clamp(20px,2.6vw,30px);border-radius:28px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.pj-f{display:grid;gap:7px;margin:0;padding:0;border:0;min-width:0}
.pj-f>span,.pj-f>legend{padding:0;font-size:14.5px;font-weight:600;color:var(--ink)}
.pj-f small{font-weight:500;color:var(--muted)}
.pj input:not([type=radio]){width:100%;padding:13px 14px;border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;color:var(--ink)}
.pj input:not([type=radio]):focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
.pj .chip span{background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink)}
.pj .chip input:checked+span{background:var(--accent-soft);box-shadow:inset 0 0 0 1.5px var(--accent);color:var(--ink)}
.pj .chip input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.pj .footnote{margin:0}
@media(max-width:900px){.pj-wrap{grid-template-columns:1fr}}

/* Partnerbereich: Rückfragen */
.pa-contact{max-width:720px}
.pa-contact h2{margin:16px 0 10px;font-size:clamp(28px,3.4vw,42px);line-height:1.08;letter-spacing:-.03em}
.pa-contact p{margin:0;color:var(--muted);font-size:18px;line-height:1.55}
.pa-contact .actions{margin-top:22px}
.rw-chips[hidden]{display:none}
.rw-p[data-p=other]:not(.on),.rw-p:not(.on) .rw-plug,.rw-p:not(.on) .rw-plugx{opacity:0}
.rw-p[data-p=other]{pointer-events:none}
.rw-svg .rw-p[data-p=other]:not(.on),.rw-svg.has-on .rw-p[data-p=other]:not(.on),.rw-p:not(.on) .rw-only{opacity:0}
.rw .rw-devs{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;overflow:visible}
.rw .rw-devs button{min-width:0;white-space:nowrap}
@media(max-width:560px){.rw .rw-devs{grid-template-columns:repeat(2,minmax(0,1fr))}.rw .rw-devs button{font-size:14.5px}}
.rw .rw-devs{grid-auto-flow:row}

/* v15.7: Das bekommen Sie, Schema-Kacheln */
.gt{list-style:none;margin:26px 0 0;padding:0;display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.gt-item{display:flex;flex-direction:column;padding:10px 10px 22px;border-radius:26px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gt-item h3{margin:16px 14px 4px;font-size:19px;line-height:1.2;letter-spacing:-.02em}
.gt-item p{margin:0 14px;font-size:15px;line-height:1.5;color:var(--muted)}
.gt-foot{display:flex;align-items:center;gap:16px;margin-top:22px;padding:16px 20px;border-radius:22px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.gt-foot p{margin:0;font-size:16px;line-height:1.5;color:var(--ink-2)}
.gt-foot b{color:var(--ink)}
@media(max-width:1000px){.gt{grid-template-columns:repeat(min(var(--n,4),3),minmax(0,1fr))}}
@media(max-width:700px){.gt{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(62vw,230px);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 10px}.gt-item{scroll-snap-align:start}.gt-foot{align-items:flex-start}}
.gt{grid-template-columns:repeat(var(--n,4),minmax(0,270px));justify-content:center}
@media(max-width:1000px){.gt{grid-template-columns:repeat(min(var(--n,4),3),minmax(0,1fr))}}
@media(max-width:700px){.gt{grid-template-columns:none;justify-content:start}}
@media(min-width:1001px){.gt-foot{max-width:calc(var(--n,4) * 270px + (var(--n,4) - 1) * 18px);margin-left:auto;margin-right:auto}}
/* v15.7: Startseiten-Kacheln, Text auch auf hellen Fotos lesbar */
.h-area::after{background:linear-gradient(180deg,rgba(8,10,12,.35) 0%,rgba(8,10,12,.05) 20%,rgba(8,10,12,.72) 40%,rgba(8,10,12,.93) 60%,rgba(8,10,12,.97) 100%)}

/* v15.7: Überschriften mit langen Wörtern dürfen nie aus ihrer Spalte laufen */
.hero-grid>div:has(>h1.h-long){container-type:inline-size}
.hero h1.h-long{font-size:clamp(32px,min(5.1vw,11.2cqi),74px)}
@media(max-width:700px){.hero h1.h-long{font-size:clamp(28px,min(10.8vw,11.2cqi),48px)}
body.sx h1,body.sx h2{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6}}
body.sx h3{-webkit-hyphens:auto;hyphens:auto;hyphenate-limit-chars:14 6 6;overflow-wrap:break-word}

/* v15.7: Kontakt, Postleitzahl bei Tarifen */
.ct-plz{display:grid;gap:8px;margin-top:6px;max-width:260px}
.ct-plz .ct-q{margin:14px 0 0}
.ct-plz input{width:100%;padding:13px 14px;border:0;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line);font:inherit;font-size:16px;color:var(--ink)}
.ct-plz input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--accent)}
/* v15.7: Hintergrundzeichen immer hinter dem Inhalt */
.hero,.cta,.ct-hero,.rg-hero{isolation:isolate}
.hero-mark{z-index:-1}
/* v15.7: Ratgeber-Seitenleiste als Einheit unter der Navigation mitlaufen lassen */
.rg-aside{position:sticky;top:76px;align-self:start}
.rg-toc,.rg-svc{position:static}

/* v15.7: Garantie 2 Jahre, Plus für die Verlängerung */
.gw .gw-plus{font:800 30px var(--display)}
.fl-vis .t.plus{font:800 20px var(--display)}
/* v15.7: Beispiele nach Objekt, Box immer gleich hoch (alle Tabs in einer Zelle, Foto gibt die Höhe nicht vor) */
.zg{display:grid}
.zg-tabs{grid-row:1;grid-column:1}
.zg-panel{grid-row:2;grid-column:1}
.zg-panel[hidden]{display:grid!important;visibility:hidden;pointer-events:none}
@media(min-width:901px){.zg-ph{position:relative;min-height:460px}.zg-ph img{position:absolute;inset:0;width:100%;height:100%;min-height:0}}
.zg-tx h3{margin:0 0 16px}

.gx-hd.no-chip .gx-hd-chip{display:none}
.qv-detect .qv-box b{top:auto!important;bottom:calc(100% + 6px)!important;left:-2px!important}

/* v15.7: Einbruch-Hero, Bild rückt bei Bedarf nach rechts, Übergang links weich */
.gx-hero-bg.is-shifted img{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 180px);mask-image:linear-gradient(90deg,transparent 0,#000 180px)}
.gx-hero.gx-tight h1{font-size:clamp(34px,3.6vw,52px)}
.gx-hd.chip-wrap .gx-hd-chip{white-space:normal;line-height:1.3}
.gx-hd.chip-wrap .gx-hd-chip{border-radius:14px}.gx-hd.chip-wrap .gx-hd-sep{display:none}.gx-hd.chip-wrap .gx-hd-chip>span:not(.gx-hd-sep){display:block}

/* v15.7: Produktseiten neu, Schema-Grafik, Nutzen, Preis, Inklusive */
.gp-price{display:inline-grid;gap:2px;margin-top:22px;padding:14px 18px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line);color:var(--ink);text-decoration:none;transition:box-shadow .2s}
.gp-price:hover{box-shadow:inset 0 0 0 1.5px var(--accent)}
.gp-price-k{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gp-price b{font-size:26px;letter-spacing:-.02em}
.gp-price-s{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;color:var(--muted)}
.gp-price-s svg{width:14px;height:14px}
.gp-hero .actions{margin-top:26px}
.gp-how{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(28px,4.5vw,72px);align-items:center}
.gp-how-vis{margin:0;border-radius:30px;overflow:hidden;aspect-ratio:16/10;background:radial-gradient(90% 70% at 50% 0%,var(--accent-soft),rgba(255,255,255,0) 70%),linear-gradient(180deg,#f7f8fa,#eceef1);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gp-how-vis svg{display:block;width:100%;height:100%}
.gp-how-tx h2{margin:16px 0 22px;font-size:clamp(30px,3.4vw,46px);line-height:1.06;letter-spacing:-.03em}
.gp-benefits{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.gp-benefits li{display:grid;grid-template-columns:28px 1fr;gap:12px;align-items:start}
.gp-benefits b{display:block;font-size:18px;letter-spacing:-.01em}
.gp-benefits div span{display:block;margin-top:3px;color:var(--muted);font-size:15.5px;line-height:1.5}
.gp-ideal-k{margin:26px 0 10px;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.gp-how .gp-places li{padding:8px 14px;font-size:14.5px}
.gp-inc{display:flex;align-items:center;gap:22px;padding:20px 24px;border-radius:24px;background:var(--card);box-shadow:var(--shadow),inset 0 0 0 1px var(--line)}
.gp-inc-h{margin:0;font-size:17px;line-height:1.5;color:var(--ink-2)}
.gp-inc-h b{color:var(--ink)}
.gp-inc ul{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.gp-inc li{display:inline-flex;align-items:center;gap:7px;font-size:15px;color:var(--ink-2)}
.gp-inc li svg{color:var(--accent-ink)}
@media(max-width:900px){.gp-how{grid-template-columns:1fr}.gp-inc{align-items:flex-start}}
/* neue Schema-Klassen */
.cg .cg-wall{fill:#e3e7eb}
.cg .cg-floor{stroke:#c3cad1;stroke-width:3;stroke-linecap:round}
.cg .cg-cone{fill:var(--accent);opacity:.13}
.cg .cg-cone2{fill:var(--accent);opacity:.26}
.cg .cg-arm{stroke:#c3cad1;stroke-width:6;stroke-linecap:round}
.cg .cg-visor{stroke:#c3cad1;stroke-width:3;stroke-linecap:round}
.cg .cg-none{display:none}
.cg .cg-dome{fill:#f4f6f8;stroke:#c3cad1;stroke-width:1.5}
.cg .cg-plate{fill:#fff;stroke:#1d2227;stroke-width:1.5}
.cg .cg-moon{fill:#bfe9f2}
.cg .cg-ir{fill:#ff6b6b}
.cg .cg-arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-dasharray:3 7}
.cg .cg-shield{fill:var(--accent)}
.cg .cg-wh-s{fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.cg .cg-ok-s{fill:none;stroke:#34c759;stroke-width:3;stroke-linecap:round}
.cg .cg-night{fill:#151a20}
.cg .cg-cone-n{fill:#ff9f0a;opacity:.12}
.cg .cg-fence{stroke:#3a434c;stroke-width:3}
.cg .cg-heat{fill:#ff9f0a}
.cg .cg-t-n{font:600 14px var(--body);fill:#c9d1d8}
.cg .cg-room{fill:#fff;stroke:#c3cad1;stroke-width:2}
.cg .cg-fov{stroke:var(--accent);stroke-width:1.5;opacity:.35}
.cg .cg-tb{font:600 12.5px var(--body);fill:#1d2227}
.cg .cg-tb-w{font:700 12px var(--body);fill:#fff}
.cg .cg-barrier{stroke:#ff453a;stroke-width:6;stroke-linecap:round;stroke-dasharray:10 8}
.cg .cg-sash{fill:#e3f1f6;stroke:#c3cad1;stroke-width:2}
.cg .cg-arrow{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cg .cg-crack{fill:none;stroke:#1d2227;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cg .cg-wave2{fill:none;stroke:#ff453a;stroke-width:3;stroke-linecap:round}
.cg .cg-zone{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:4 6;opacity:.6}
.cg .cg-ray{stroke:#ffc94a;stroke-width:4;stroke-linecap:round}
.cg .cg-smoke{fill:#b8c0c7;opacity:.7}
.cg .cg-water{fill:#7cc4f2;opacity:.7}
.cg .cg-card{fill:#fff;stroke:#1d2227;stroke-width:1.5}
.cg .cg-chip2{fill:#ffc94a}
.cg .cg-print{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round}
html[data-theme=dark] body.sx .gp-how-vis{background:radial-gradient(90% 70% at 50% 0%,rgba(18,181,211,.18),rgba(18,181,211,0) 70%),linear-gradient(180deg,#1c2024,#14171a)}
html[data-theme=dark] body.sx .cg .cg-wall{fill:#2a3036}
html[data-theme=dark] body.sx .cg .cg-room{fill:#22272c}
.gp-how-sec{padding-bottom:clamp(28px,3vw,44px)}
.gp-inc-sec{padding-top:0}
.gp-inc-sec+#faq{padding-top:clamp(40px,4vw,64px)}

/* v15.7: Überläufe in langen Sprachen */
@media(max-width:700px){.chapters{overflow-x:auto;scrollbar-width:none;gap:10px}.chapters::-webkit-scrollbar{display:none}.chapters a{flex:1 0 auto;min-width:58px;white-space:nowrap}}
.qv-tile,.qv-tile *{overflow-wrap:anywhere;hyphens:auto}
.en-tiles b,.en-tiles small,.pa-tiles b,.pa-tiles small{overflow-wrap:anywhere;hyphens:auto;min-width:0}
.en-tiles a,.pa-tiles a{min-width:0}
.hero h1,.rg-hero h1,.gp-hero h1{overflow-wrap:break-word}
.cg .cg-hole{fill:#d9eef5;stroke:#c3cad1;stroke-width:1}
.cg .cg-hinge{fill:#9aa4ad}
.cg .cg-frame2{fill:none;stroke:#c3cad1;stroke-width:1.5}
.cg .cg-gap{fill:none;stroke:#ff453a;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:3 5}

/* v15.7: Datenschutzerklärung */
.lg-stand{font-size:14px!important;color:var(--muted)!important}
.lg-toc{margin:0 0 10px;padding:18px 20px;border-radius:18px;background:var(--card);box-shadow:inset 0 0 0 1px var(--line)}
.lg-toc b{display:block;margin-bottom:8px;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.lg-toc ol{list-style:none;margin:0;padding:0;columns:2;column-gap:28px}
.lg-toc li{break-inside:avoid;padding:3px 0}
.lg-toc a{color:var(--ink);font-size:15px;text-decoration:none}
.lg-toc a:hover{text-decoration:underline}
@media(max-width:600px){.lg-toc ol{columns:1}}
.lg-ul{margin:10px 0 0;padding-left:20px;display:grid;gap:6px;font-size:16px;line-height:1.55;color:var(--ink-2)}
.lg-box{padding:14px 16px;border-radius:14px;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.lg-todo{padding:1px 5px;border-radius:6px;background:#ffe9a8;color:#5a4300;font-weight:600;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.lg-sec a{color:var(--accent-ink)}
.lg-lang{margin:10px 0 0;font-size:15px;color:var(--muted)}html:not([lang="de"]) .lg-lang{display:block}html[lang="de"] .lg-lang{display:none}
/* v15.7: Startseite „Was brauchen Sie?“. Querformat-Fotos (Reparatur, Tarife) füllen auf den hohen Karten nur den oberen Teil und laufen weich aus,
   statt auf ein Drittel ihrer Breite beschnitten zu werden. Beschreibung gleich hoch, damit die Überschriften auf einer Linie stehen. */
@media (min-width:1024px),(max-width:700px){
.h-area:is([data-area=repair],[data-area=energy])>img{height:52%;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}
}
@media (min-width:1024px){.h-area-body>p{min-height:3lh}}
@media (min-width:1024px) and (max-width:1180px){.h-area-body>p{min-height:4lh}}
/* Handy und Tablet: fester Fotobereich über dem Text */
@media (max-width:1023px){.h-area-body{padding-top:190px}.h-area[data-area=security]>img{object-position:50% 12%!important}}
@media (min-width:701px) and (max-width:1023px){.h-area[data-area=energy]>img{height:56%;object-position:10% 70%!important;-webkit-mask-image:linear-gradient(180deg,#000 58%,transparent);mask-image:linear-gradient(180deg,#000 58%,transparent)}}
/* v15.7: Symbole für Kontaktwege (tools/contact_icons.py); Startseite: ganze Karte klickbar */
.ci{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:15px;background:var(--ci-bg,rgba(56,182,201,.12));color:var(--ci-fg,#1d8ea1);box-shadow:inset 0 0 0 1px var(--ci-line,rgba(56,182,201,.22))}
.ci svg{width:24px;height:24px}
.h-reach-list li{position:relative;justify-items:center;gap:6px;padding:24px 18px 22px;transition:box-shadow .25s,transform .25s}
.h-reach-list li .ci{margin-bottom:8px}
.h-reach-list li a::after{content:"";position:absolute;inset:0;border-radius:inherit}
.h-reach-list li:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px rgba(56,182,201,.45),0 12px 30px rgba(15,30,40,.08)}
.h-reach-list li:hover a{text-decoration:none}
.h-reach-list li:has(a:focus-visible){outline:2px solid #1d8ea1;outline-offset:3px}
.ct-direct li{display:grid;grid-template-columns:40px 1fr;column-gap:12px;align-items:center}
.ct-direct li .ci{display:grid;grid-row:span 2;width:40px;height:40px;border-radius:12px}.ct-direct li .ci svg{width:20px;height:20px}
.ct-direct li>span:not(.ci){align-self:end}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--ci-bg:rgba(110,225,237,.1);--ci-fg:#6ee1ed;--ci-line:rgba(110,225,237,.2)}}
:root[data-theme=dark]{--ci-bg:rgba(110,225,237,.1);--ci-fg:#6ee1ed;--ci-line:rgba(110,225,237,.2)}
@media(prefers-reduced-motion:reduce){.h-reach-list li{transition:none}.h-reach-list li:hover{transform:none}}
@media(max-width:700px){.h-reach-list li{grid-template-columns:48px 1fr;justify-items:start;align-items:center;column-gap:14px;row-gap:2px;padding:14px 16px;text-align:left}.h-reach-list li .ci{grid-row:span 2;margin:0}.h-reach-list li>span:not(.ci){align-self:end}.h-reach-list li>a{align-self:start}}

/* v15.7 Gesamtprüfung: Ergebnis-Kasten der Kontaktseite erst nach dem Absenden zeigen (display:grid überstimmte hidden) */
.ct-result[hidden]{display:none}
/* v15.7: Fehlerseite 404 (tools/notfound.py) */
.nf-hero{min-height:min(100dvh,820px)}
.nf{max-width:760px}
.nf-code{margin:0 0 8px;font:700 15px var(--display);letter-spacing:.2em;color:var(--accent)}
.nf h1{font-size:clamp(40px,6vw,72px);margin:0 0 16px}
.nf-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:28px 0 30px}
.nf-card{position:relative;display:grid;gap:4px;padding:18px 44px 18px 18px;border-radius:18px;background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:#fff;text-decoration:none;transition:background .2s}
.nf-card:hover{background:rgba(255,255,255,.12)}
.nf-card b{font-size:17px}.nf-card span{font-size:14px;color:rgba(255,255,255,.7)}
.nf-card i{position:absolute;right:16px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--accent)}.nf-card i svg{width:100%;height:100%}
@media(max-width:700px){.nf-cards{grid-template-columns:1fr}.nf-hero{padding-top:96px}}
/* v15.7 Gesamtprüfung: Echtheitshinweis Bewertungen (§ 5b Abs. 3 UWG), Sprachhinweis Ratgeber (nur für EN/TR/RU sichtbar) */
.h-review-note{margin:18px 0 0;font-size:13px;line-height:1.5;color:var(--muted)}
.rg-lang-note{display:none}
html[data-lang]:not([data-lang=de]) .rg-lang-note{display:block;padding-top:20px}
.rg-lang-note p{display:inline-flex;margin:0;padding:10px 16px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);font-size:14.5px;font-weight:600}

/* ==========================================================================================
   07.10.2026 Handy: Werkzeuge wie am Desktop (wird an si-pages.css angehängt).
   Grundsatz: Das Ergebnis (Plan, Kamerabild, Anzeige) bleibt beim Einstellen sichtbar –
   es wird oben angeheftet, die Regler laufen darunter. Umhängen im DOM: si-pages-mobile.js.
   Kopfzeile mobil: 48 px (--m-top), Abschnittsleiste unten: --mnav-h.
   ========================================================================================== */
:root{--m-top:48px}

@media (max-width:700px){
  /* ---- Kamera-Planer ---- */
  .cp.cp--m{overflow:clip;border-radius:22px;margin-inline:-4px}
  .cp--m .cp-bar{padding:10px 12px 10px 16px}
  .cp--m .cp-meta{display:none}
  .cp--m .cp-main{display:contents}   /* sonst klebt der Plan nur innerhalb seines eigenen Containers */
  .cp--m .cp-view{display:none}
  .cp--m .cp-plan{position:sticky;top:var(--m-top);z-index:6;background:#101315;border:0;box-shadow:0 1px 0 rgba(255,255,255,.08),0 16px 30px rgba(0,0,0,.4)}
  /* Beschriftungen im Plan lesbar (SVG-Einheiten; der Plan ist mobil etwa 0,35-fach verkleinert) */
  .cp--m .cp-plan text{font-size:25px;letter-spacing:.05em}
  .cp--m .cp-plan .cp-lbl-b{font-size:30px}
  .cp--m .cp-plan .cp-bound-t{font-size:20px}
  .cp--m .cp-plan .cp-north text,.cp--m .cp-plan .cp-scale text{font-size:22px}
  /* Kamerabild als Bild-in-Bild oben rechts, per Knopf groß */
  .cp--m .cp-plan .cp-screen{position:absolute;top:10px;right:10px;z-index:3;width:46%;aspect-ratio:16/10;border-radius:12px;box-shadow:0 12px 28px rgba(0,0,0,.6),inset 0 0 0 1px rgba(255,255,255,.22);transition:width .35s cubic-bezier(.22,1,.36,1)}
  .cp--m .cp-plan .cp-screen.is-big{width:calc(100% - 20px)}
  .cp--m .cp-osd{font-size:8.5px}
  .cp--m .cp-screen.is-big .cp-osd{font-size:11px}
  .cp--m .cp-tl,.cp--m .cp-tr{top:7px}.cp--m .cp-bl,.cp--m .cp-br{bottom:7px}
  .cp--m .cp-tl,.cp--m .cp-bl{left:8px}.cp--m .cp-tr,.cp--m .cp-br{right:8px}
  .cp--m .cp-tr{display:none}
  .cp--m .cp-screen.is-big .cp-tr{display:block}
  .cp--m .cp-corners{inset:14px}
  .cp--m .cp-out b{font-size:13px}.cp--m .cp-out span{font-size:10.5px}
  .cp-mzoom{position:absolute;inset:0;z-index:4;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:zoom-in}
  .cp-screen.is-big .cp-mzoom{cursor:zoom-out}
  .cp-mzoom::after{content:"";position:absolute;right:6px;top:50%;width:22px;height:22px;margin-top:-11px;border-radius:50%;background:rgba(10,12,14,.65) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M15 4h5v5M9 20H4v-5M20 4l-6 6M4 20l6-6'/%3E%3C/svg%3E") center/12px no-repeat;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
  .cp-screen.is-big .cp-mzoom::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 14h6v6M20 10h-6V4M10 14l-6 6M14 10l6-6'/%3E%3C/svg%3E")}
  .cp-mzoom:focus-visible{outline:2px solid var(--cp-c);outline-offset:2px}
  /* aktuelle Stufe als Schild unten im Plan */
  .cp-mchip{position:absolute;left:10px;bottom:10px;z-index:3;margin:0;padding:7px 12px;border-radius:99px;background:rgba(10,12,14,.82);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(121,218,255,.45);font:700 13px/1.1 var(--display);color:#fff;font-variant-numeric:tabular-nums;pointer-events:none}
  .cp-mchip:empty{display:none}
  .cp-mchip[data-lv=out],.cp-mchip[data-lv=none]{box-shadow:inset 0 0 0 1px rgba(255,138,128,.6);color:#ffb4ac}
  /* Stufen, Urteil und Hinweis unter dem Plan */
  .cp-mview{display:grid;gap:12px;padding:16px 16px 6px}
  .cp--m .cp-hint{position:static;justify-self:start;background:rgba(255,255,255,.06);font-size:13px}
  .cp--m .cp-levels{grid-template-columns:repeat(4,minmax(0,1fr))}
  .cp--m .cp-levels b{font-size:11.5px}
  .cp--m .cp-levels small{font-size:10.5px}
  .cp--m .cp-subject button{min-height:40px}
  .cp--m .cp-controls{grid-template-columns:minmax(0,1fr)!important;padding-top:6px}
}

@media (max-width:700px){
  /* ---- Speicherrechner: Ring als kompakte Ergebnisleiste oben angeheftet, Wert rechts daneben ---- */
  .sto{overflow:clip}
  .sto-disk{position:sticky;top:var(--m-top);z-index:5;display:flex;justify-content:flex-start;padding:12px 16px;background:#14171a;box-shadow:0 1px 0 rgba(255,255,255,.08),0 14px 26px rgba(0,0,0,.4)}
  .sto-ring{width:112px;margin:0!important;justify-self:start}
  .sto-ring svg{filter:none}
  .sto-center{inset:auto;left:calc(100% + 16px);top:50%;transform:translateY(-50%);width:max-content;max-width:min(210px,calc(100vw - 200px));justify-items:start;text-align:left;gap:4px}
  .sto-center .cp-k{justify-content:flex-start;font-size:10.5px}
  .sto-center b{font-size:34px}
  .sto-center small{font-size:12.5px;line-height:1.35}
  .sto-legend{display:none}
}

@media (max-width:700px){
  /* ---- Einbruch-Simulation: Telefon wird zur flachen Leiste mit der neuesten Meldung unter dem Grundriss ----
     So passen Grundriss, Meldung, Zeitleiste und Ergebnis zusammen auf einen Bildschirm. */
  .bs-svg text{font-size:19px;letter-spacing:.02em}
  .bs-svg .bs-lbl{font-size:19px}
  .bs-phone{height:auto!important;padding:10px 12px 4px!important;background:none}
  .bs-ph{min-height:168px!important;height:auto;border-radius:16px;padding:10px;background:linear-gradient(180deg,#1b232a,#13181c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .bs-ph::after,.bs-ph-island,.bs-ph-status,.bs-ph-clock,.bs-ph-date{display:none}
  .bs-ph-m{display:flex;align-items:center;gap:7px;margin:0 0 8px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.5)}
  .bs-ph-m svg{width:13px;height:13px}
  .bs-ph-notes{margin-top:0;padding:0;min-height:58px}
  .bs-ph-notes>.bs-n:nth-child(n+2){display:none}
  .bs-ph-empty{margin:4px 0 6px;text-align:left}
  .bs-n-thumb{height:56px}
}

/* ---- Türsprechanlagen-Finder: Kurz-Empfehlung angeheftet (nur Handy) ---- */
.tf-mini{display:none}
@media (max-width:700px){
  .tf-mini{position:sticky;top:calc(var(--m-top) + 8px);z-index:6;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"k i" "b i" "p i";column-gap:12px;align-items:center;width:100%;margin:0 0 4px;padding:10px 12px 10px 16px;border:0;border-radius:16px;background:rgba(20,24,28,.92);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 0 0 1px rgba(121,218,255,.35);color:#fff;text-align:left;font:inherit;cursor:pointer;transition:opacity .3s,transform .3s}
  .tf-mini.is-off{opacity:0;transform:translateY(-8px);pointer-events:none}
  .tf-mini-k{grid-area:k;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#79daff}
  .tf-mini b{grid-area:b;font:700 15px/1.25 var(--display);letter-spacing:-.01em;margin-top:2px}
  .tf-mini em{grid-area:p;font-style:normal;font-size:13px;color:rgba(255,255,255,.75);margin-top:1px}
  .tf-mini i{grid-area:i;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;background:#79daff;color:#0b1620}
  .tf-mini i svg{width:18px;height:18px}
  .tf-mini.is-new{animation:tfMini .7s ease}
  @keyframes tfMini{0%{box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 0 0 1px rgba(121,218,255,.35)}35%{box-shadow:0 12px 28px rgba(0,0,0,.28),inset 0 0 0 2px #79daff,0 0 0 6px rgba(121,218,255,.25)}}
}
@media (max-width:700px) and (prefers-reduced-motion:reduce){.tf-mini.is-new{animation:none}}

@media (max-width:700px){
  /* ---- Schlüssel verloren: beide Wege nebeneinander wie am Desktop, damit man den Ablauf direkt vergleicht ---- */
  .keycompare{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px}
  .keycol{padding:14px 10px 12px;border-radius:18px}
  .keycol .num{font-size:10.5px;padding:4px 8px}
  .keycol h3{font-size:15.5px;line-height:1.2;margin:10px 0 10px;hyphens:auto;-webkit-hyphens:auto}
  .keycol ol{gap:6px}
  .keycol li{grid-template-columns:22px minmax(0,1fr);gap:7px;padding:8px 8px;border-radius:11px;font-size:13px;line-height:1.3}
  .keycol li::before{width:22px;height:22px;border-radius:7px;font-size:11.5px}
  .keycol .sum{margin-top:10px;padding-top:10px;font-size:13px;line-height:1.35}
}


@media (max-width:700px){
  /* ---- Tippflächen: Textlinks und Brotkrumen mindestens 44 px hoch, Modellkarten ganzflächig klickbar ---- */
  .textlink{min-height:44px}
  .crumbs{gap:2px 8px}
  .crumbs a{display:inline-flex;align-items:center;min-height:40px}
  .hs-card{position:relative}
  .hs-card .textlink::after{content:"";position:absolute;inset:0;border-radius:inherit;z-index:1}
}

@media (max-width:700px){
  /* ---- Was wir reparieren: Gerät, Bauteile und Erklärung zusammen auf einem Bildschirm (Desktop: nebeneinander) ---- */
  .rw{gap:10px;padding:10px}
  .rw .rw-devs{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .rw .rw-devs button{flex-direction:column;gap:3px;min-height:48px;padding:6px 2px!important;font-size:12.5px!important;line-height:1.1}
  .rw .rw-devs button svg{width:17px;height:17px}
  .rw-stage{margin-top:8px;padding:4px}
  .rw-stage .rw-svg{max-height:200px;margin-inline:auto;width:auto;max-width:100%}
  .rw-right{padding:16px!important;border-radius:20px}
  .rw-info h3{font-size:21px;margin:6px 0 8px}
  .rw-info .checklist{margin-top:6px}
  .rw-info .checklist li{font-size:14.5px;padding-block:3px}
  .rw-foot{margin-top:14px!important;padding-top:14px}
  .rw-foot p{font-size:13.5px}
}

@media (max-width:700px){
  /* ---- Bereichs-Heros (Nutzerwunsch): weniger leere Bildfläche oben, Überschrift, Text und Knopf
     vollständig im ersten Bildschirm über der Abschnittsleiste. Höhe = Bildschirm − Kopfzeile − Leiste. ---- */
  .hero{--mh:max(500px,calc(100svh - var(--m-top) - var(--mnav-h,0px)))}
  .hero-grid>div:first-child{padding:24px 0 18px}
  .hero .lead-m{margin-bottom:18px}
  .m-hero-bg::after{background:linear-gradient(180deg,rgba(11,12,13,.45) 0,rgba(11,12,13,0) 90px,rgba(11,12,13,0) 30%,rgba(11,12,13,.6) 50%,rgba(11,12,13,.93) 72%,#0b0c0d 100%)}
}
@media (max-width:760px){
  /* Gebäudesicherheit-Übersicht: Text höher, Bild und Alarmpunkt rücken mit nach oben, Brotkrumen ausgeblendet wie bei den anderen Heros */
  .gx-hero{min-height:max(500px,calc(100svh - var(--m-top) - var(--mnav-h,0px)))}
  .gx-hero-in{padding-top:30svh;padding-bottom:20px}
  .gx-hero-bg{top:-40svh}
  .gx-hero .crumbs{display:none}
  .gx-hero-note{top:12px;padding:11px 13px;border-radius:18px}
}
@media (max-width:760px) and (max-height:760px){
  .gx-hero-in{padding-top:max(150px,16svh)}
  .gx-hero-bg{top:-46svh}
  .gx-hero h1{font-size:34px}
  .gx-hero .lead{font-size:15px;line-height:1.45;margin-bottom:16px}
  .gx-hero .actions{flex-direction:row;gap:8px}
  .gx-hero .actions .btn{flex:1 1 0;min-height:50px;padding-inline:10px}
}