@layer components{.hero-stage{background:var(--stage);color:var(--on-dark);position:relative}.hero-stage:before{content:"";z-index:5;pointer-events:none;background:linear-gradient(to bottom,oklch(var(--flor) / .5),oklch(var(--flor) / 0));height:150px;position:absolute;inset:0 0 auto}.hero-intro{padding-top:calc(var(--header-h) + var(--s5));z-index:6;color:var(--on-dark);position:relative}.hero-intro h1{text-shadow:0 1px 3px var(--scrim),0 2px 24px var(--scrim);font-size:var(--text-display);line-height:var(--text-display--line-height);text-wrap:balance;letter-spacing:-.01em;max-width:none}.panel-row{gap:var(--gap);max-width:var(--shell);padding:var(--s6) var(--gutter) var(--s8);grid-template-columns:repeat(2,1fr);margin-inline:auto;display:grid}.panel{border-radius:var(--radius);height:clamp(340px,52vh,520px);position:relative;overflow:hidden}.panel .ph{object-fit:cover;width:100%;height:100%;transition:filter var(--dur-slow) var(--ease-out);position:absolute;inset:0}.panel[data-b=puzzle] .ph{background:var(--ph-puzzle);object-position:50% 64%}.panel[data-b=klick] .ph{background:var(--ph-klick);object-position:50% 50%}.panel[data-b=design-klick] .ph{background:var(--ph-design-klick);object-position:50% 56%}.panel[data-b=design-puzzle] .ph{background:var(--ph-design-puzzle);object-position:50% 85%}.panel .veil{background:var(--veil);transition:opacity var(--dur-fast) var(--ease-out);position:absolute;inset:0}.panel:after{content:"";z-index:5;pointer-events:none;background:linear-gradient(to top,oklch(var(--flor) / .88),oklch(var(--flor) / 0));height:50%;position:absolute;inset:auto 0 0}.panel .hotspot{cursor:pointer;display:block;position:absolute;inset:0}.panel:hover .veil,.panel:focus-within .veil{opacity:0}.panel-label{z-index:6;pointer-events:none;color:var(--on-dark);text-align:left;flex-direction:column;align-items:flex-start;display:flex;position:absolute;bottom:20px;left:24px;right:24px}.pl-name{font-family:var(--f-display);font-weight:var(--w-display);letter-spacing:-.01em;font-size:var(--text-h2);text-shadow:0 1px 14px var(--scrim);line-height:1.14}.pl-sub{margin-top:var(--s2);font-size:var(--text-small);line-height:var(--text-small--line-height);color:var(--on-dark-2);max-width:38ch;text-shadow:0 1px 12px var(--scrim);font-weight:500;display:block}.panel-label .btn-mehr{display:none}@media (min-width:1024px){.hero-stage{flex-direction:column;min-height:clamp(720px,100vh,1160px);display:flex;overflow:hidden}.hero-intro{pointer-events:none;padding-top:calc(var(--header-h) + var(--s6));padding-bottom:var(--s6)}.panel-row{min-height:0;width:calc(100% - 2 * var(--gutter));max-width:calc(var(--shell) - 2 * var(--gutter));margin:0 auto var(--s5);flex:1;padding:0;display:block;position:relative}.panel{--f0:0;--f1:.25;--gl:8px;--gr:8px;--unten:3%;height:auto;clip-path:inset(0 calc((1 - var(--f1)) * 100% + var(--gr)) var(--unten) calc(var(--f0) * 100% + var(--gl)) round var(--radius));transition:clip-path var(--dur-slow) var(--ease-out);border-radius:0;position:absolute;inset:0;overflow:visible}.panel:first-child{--gl:0px}.panel:nth-child(2){--f0:.25;--f1:.5}.panel:nth-child(3){--f0:.5;--f1:.75}.panel:nth-child(4){--f0:.75;--f1:1;--gr:0px}.panel[data-b=design-puzzle] .ph{object-position:50% 50%;width:46%;left:54%}.panel:after{inset:auto 0 var(--unten) 0;background:linear-gradient(to top, oklch(var(--flor) / .86) 0%, oklch(var(--flor) / .8) 26%, oklch(var(--flor) / .5) 56%, oklch(var(--flor) / 0) 100%);height:48%;transition:height var(--dur-slow) var(--ease-out), bottom var(--dur-slow) var(--ease-out)}.panel.ist-gross:after{height:56%}.pl-sub{color:var(--on-dark)}.panel-row[data-gross="0"] .panel:first-child{--f0:0;--f1:.46;--unten:0%}.panel-row[data-gross="0"] .panel:nth-child(2){--f0:.46;--f1:.64}.panel-row[data-gross="0"] .panel:nth-child(3){--f0:.64;--f1:.82}.panel-row[data-gross="0"] .panel:nth-child(4){--f0:.82;--f1:1}.panel-row[data-gross="1"] .panel:first-child{--f0:0;--f1:.18}.panel-row[data-gross="1"] .panel:nth-child(2){--f0:.18;--f1:.64;--unten:0%}.panel-row[data-gross="1"] .panel:nth-child(3){--f0:.64;--f1:.82}.panel-row[data-gross="1"] .panel:nth-child(4){--f0:.82;--f1:1}.panel-row[data-gross="2"] .panel:first-child{--f0:0;--f1:.18}.panel-row[data-gross="2"] .panel:nth-child(2){--f0:.18;--f1:.36}.panel-row[data-gross="2"] .panel:nth-child(3){--f0:.36;--f1:.82;--unten:0%}.panel-row[data-gross="2"] .panel:nth-child(4){--f0:.82;--f1:1}.panel-row[data-gross="3"] .panel:first-child{--f0:0;--f1:.18}.panel-row[data-gross="3"] .panel:nth-child(2){--f0:.18;--f1:.36}.panel-row[data-gross="3"] .panel:nth-child(3){--f0:.36;--f1:.54}.panel-row[data-gross="3"] .panel:nth-child(4){--f0:.54;--f1:1;--unten:0%}.panel .hotspot{inset:0 calc((1 - var(--f1)) * 100% + var(--gr)) var(--unten) calc(var(--f0) * 100% + var(--gl));border-radius:var(--radius);transition:inset var(--dur-slow) var(--ease-out)}.panel .hotspot:focus-visible{outline-offset:-5px}.panel .takt{z-index:7;pointer-events:none;height:3px;left:calc(var(--f0) * 100% + var(--gl));right:calc((1 - var(--f1)) * 100% + var(--gr));bottom:var(--unten);background:var(--accent);transform-origin:0;position:absolute;transform:scaleX(0)}.panel.wartet .takt{transition:transform var(--verweil,1s) linear;transform:scaleX(1)}.panel.ist-gross .takt{opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}.panel-label{left:calc(var(--f0) * 100% + var(--gl) + var(--s5));right:auto;bottom:calc(var(--unten) + var(--s4));max-width:calc((var(--f1) - var(--f0)) * 100% - var(--gl) - var(--gr) - 2 * var(--s5));transition:left var(--dur-slow) var(--ease-out), bottom var(--dur-slow) var(--ease-out), max-width var(--dur-slow) var(--ease-out)}.pl-name{height:2.28em;font-size:var(--text-h3);transition:font-size var(--dur-slow) var(--ease-out);align-items:flex-end;display:flex}.pl-sub{height:var(--sub-h,4.65em);transition:font-size var(--dur-slow) var(--ease-out), height var(--dur-slow) var(--ease-out), opacity var(--dur-base) var(--ease-out);overflow:hidden}.panel-label .btn-mehr{height:0;min-height:0;color:var(--on-dark);box-shadow:inset 0 0 0 1px var(--on-dark);--btn-fill:var(--on-dark);opacity:0;pointer-events:none;transition:opacity var(--dur-base) var(--ease-out), height var(--dur-slow) var(--ease-out), margin-top var(--dur-slow) var(--ease-out);background:0 0;margin-top:0;display:inline-flex;overflow:hidden}.panel-label .btn-mehr:hover,.panel-label .btn-mehr:focus-visible{color:var(--ink)}.panel.ist-gross .pl-name{font-size:var(--text-h2)}.panel.ist-gross .pl-sub{font-size:var(--text-body);height:var(--sub-gross-h,3.2em)}.panel.ist-gross .btn-mehr{margin-top:var(--s5);opacity:1;pointer-events:auto;height:52px}.hero-hinweis{z-index:7;pointer-events:none;right:calc((var(--gutter) - 30px) / 2);color:var(--on-dark-2);opacity:.85;transition:opacity var(--dur-base) var(--ease-out);position:absolute;bottom:22%}.hero-hinweis svg{animation:2.6s ease-in-out infinite tupf;display:block}.hero.ist-gescrollt .hero-hinweis{opacity:0}@keyframes tupf{0%,to{transform:translateY(-5px)}50%{transform:translateY(5px)}}.panel-row.misst,.panel-row.misst *,.panel-row.misst :after{transition:none!important}.panel-row[data-gross] .panel:not(.ist-gross) .pl-name{font-size:var(--text-lead)}.panel-row[data-gross] .panel:not(.ist-gross) .pl-sub{opacity:0}.panel-row[data-gross] .panel:not(.ist-gross) .ph{filter:brightness(.7)}}.sec{padding-block:var(--pad-section);scroll-margin-top:calc(var(--s5) - var(--pad-section))}.sec-hell{background:var(--surface)}.sec-tief{background:var(--tief);color:var(--on-dark);--ink:var(--on-dark);--ink-2:var(--on-dark-2);--line:var(--line-tief);--surface:var(--tief-2);--rahmen:var(--on-dark-2);--accent-strong:var(--accent)}.vt-kopf{gap:var(--s8);grid-template-columns:6fr 5fr;align-items:start;display:grid}.vt-text h2{text-wrap:wrap;max-width:none}.vt-liste{gap:var(--s4);display:grid}.vt-punkt{gap:var(--s3) var(--s5);padding-top:var(--s3);border-top:1px solid var(--line);grid-template-columns:13ch 1fr;align-items:baseline;display:grid}.vt-punkt:first-child{border-top:0;padding-top:0}.vt-punkt dt{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);line-height:1.3}.vt-punkt dd{color:var(--ink-2);max-width:38ch;font-size:var(--text-small);line-height:var(--text-small--line-height)}.ablauf{margin-top:var(--s6);gap:var(--gap);grid-template-columns:repeat(4,1fr);list-style:none;display:grid}.ab-schritt{flex-direction:column;display:flex}.ab-bild{border-radius:var(--radius);aspect-ratio:4/3;background:var(--foto-grund);overflow:hidden}.ab-bild img{object-fit:cover;transform-origin:50%;width:100%;height:100%;transition:transform var(--dur-slow) var(--ease-out);display:block}.ab-schritt:hover .ab-bild img{transform:scale(1.04)}.ab-titel{margin-top:var(--s4);font-family:var(--f-body);font-weight:700;font-size:var(--text-body);align-items:baseline;gap:var(--s2);line-height:1.35;display:flex}.ab-nr{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--text-lead);color:var(--accent-strong);line-height:1}.ab-text{margin-top:var(--s1);color:var(--ink-2);font-size:var(--text-small);line-height:var(--text-small--line-height)}.ab-fuss{margin-top:var(--s5)}.sys-grid{gap:var(--s6) var(--s5);grid-template-columns:repeat(4,minmax(0,1fr));display:grid}.sys-karte{gap:var(--s3);flex-direction:column;display:flex}.sys-rahmen{border-radius:var(--radius);border:1px solid var(--line);background:var(--surface);overflow:hidden}.sys-bild{aspect-ratio:4/3;object-fit:cover;transform-origin:50%;width:100%;height:auto;transition:transform var(--dur-slow) var(--ease-out);display:block}.sys-rahmen:hover .sys-bild{transform:scale(1.04)}.sys-karte h3{margin-top:var(--s2)}.sys-karte>p{color:var(--ink-2);font-weight:500;font-size:var(--text-small);line-height:var(--text-small--line-height)}.sys-daten{padding-top:var(--s4);gap:var(--s1);margin-top:auto;display:grid}.sys-daten div{justify-content:space-between;gap:var(--s3);font-size:var(--text-small);padding-block:var(--s2);border-top:1px solid var(--line);flex-wrap:wrap;display:flex}.sys-daten dt{color:var(--ink-2);font-weight:700}.sys-daten dd{text-align:right;font-weight:500}.sys-karte .btn{margin-top:var(--s4);align-self:flex-start}.tab-huelle{margin-top:var(--s8);overflow-x:auto}.tab-hinweis{margin-top:var(--s6);margin-bottom:calc(-1 * var(--s6));display:none}.vergleich{border-collapse:collapse;width:100%;min-width:760px}.vergleich th,.vergleich td{text-align:left;padding:var(--s4) var(--s4);border-bottom:1px solid var(--line);font-size:var(--text-small)}.vergleich thead th{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--text-h3);vertical-align:bottom;border-bottom:1px solid var(--ink);line-height:1.15}.vergleich tbody th{color:var(--ink-2);width:24%;font-weight:700}.vergleich td{font-weight:500}.vergleich .ja{color:var(--accent-strong);font-size:var(--text-body)}.vergleich .nein{color:var(--rahmen)}.vergleich tbody tr:hover{background:var(--surface)}.ein-grid{gap:var(--gap);grid-template-columns:repeat(5,1fr);display:grid}.ein-kachel{border-radius:var(--radius);aspect-ratio:4/3;display:block;position:relative;overflow:hidden}.ein-kachel img{object-fit:cover;width:100%;height:100%;transition:transform var(--dur-slow) var(--ease-out);position:absolute;inset:0}.ein-kachel:after{content:"";background:linear-gradient(to top,oklch(var(--flor) / .88),oklch(var(--flor) / 0));height:72%;position:absolute;inset:auto 0 0}.ein-kachel h3{left:var(--s5);right:var(--s5);bottom:var(--s5);z-index:2;color:var(--on-dark);font-size:var(--text-h3);text-shadow:0 1px 12px var(--scrim);position:absolute}.ein-kachel h3 span{margin-top:var(--s1);font-family:var(--f-body);font-size:var(--text-small);line-height:var(--text-small--line-height);color:var(--on-dark);font-weight:500;display:block}.ein-kachel:hover img{transform:scale(1.05)}.pro-grid{gap:var(--gap);grid-template-columns:repeat(3,1fr);display:grid}.pro-karte{gap:var(--s3);flex-direction:column;display:flex}.pro-karte img{aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius);background:var(--surface);width:100%;height:auto;display:block}.pro-karte .branche{font-size:var(--text-meta);color:var(--accent-strong);margin-top:var(--s2);font-weight:500}.pro-karte h3{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);line-height:1.35}.pro-karte p{color:var(--ink-2);max-width:34ch;font-size:var(--text-small);line-height:var(--text-small--line-height)}.pro-mehr{margin-top:var(--s7)}.pro-mehr .btn{background:var(--foto-grund)}.qua-grid{gap:var(--s7) var(--s6);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));display:grid}.qua-punkt{padding-top:var(--s4);border-top:1px solid var(--line)}.qua-punkt:not(:has(.qua-zahl)){flex-direction:column;justify-content:flex-end;display:flex}.qua-zahl{font-family:var(--f-display);font-weight:var(--w-display);font-size:var(--text-h2);line-height:1.05;display:block}.qua-punkt h3{font-family:var(--f-body);font-weight:700;font-size:var(--text-body);margin-top:var(--s3);line-height:1.35}.qua-punkt p{margin-top:var(--s2);color:var(--ink-2);max-width:34ch;font-size:var(--text-small);line-height:var(--text-small--line-height)}.prod-layout{gap:var(--s8);grid-template-columns:minmax(220px,1fr) 3fr;align-items:start;display:grid}.filters{top:calc(var(--header-h) + var(--s5));gap:var(--s4);flex-direction:column;display:flex;position:sticky}.filters h3{margin-bottom:var(--s2)}.filters h3+label{margin-top:calc(-1 * var(--s2))}.filter-gruppe+.filter-gruppe{margin-top:var(--s5)}.filters label{align-items:center;gap:var(--s3);cursor:pointer;min-height:44px;font-weight:500;display:flex}.filters input[type=checkbox]{appearance:none;border:2px solid var(--ink-2);border-radius:var(--radius-s);cursor:pointer;background:var(--surface);flex:none;place-content:center;width:20px;height:20px;display:grid}.filters input[type=checkbox]:after{content:"";width:10px;height:10px;transition:background-color var(--dur-fast) var(--ease-out);background:0 0;border-radius:1px}.filters input[type=checkbox]:checked{border-color:var(--accent-strong)}.filters input[type=checkbox]:checked:after{background:var(--accent-strong)}.link-btn{cursor:pointer;min-height:44px;font-family:var(--f-body);font-size:var(--text-small);color:var(--ink-2);text-underline-offset:3px;text-align:left;background:0 0;border:0;padding:12px 0;font-weight:500;text-decoration:underline}.link-btn:hover{color:var(--ink)}.prod-grid{gap:var(--s7) var(--s6);grid-template-columns:repeat(3,1fr);display:grid}.prod-card{gap:var(--s2);flex-direction:column;display:flex}.swatch{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line);background:var(--foto-grund);position:relative;overflow:hidden}.swatch img{object-fit:cover;transform-origin:50%;width:100%;height:100%;transition:transform var(--dur-slow) var(--ease-out);display:block}.swatch:hover img{transform:scale(1.04)}.prod-card h3{margin-top:var(--s2);font-family:var(--f-body);font-weight:700;font-size:var(--text-body);line-height:1.35}.prod-card .system{font-size:var(--text-meta);color:var(--accent-strong);font-weight:500}.prod-card .dims{color:var(--ink-2);font-size:var(--text-small)}.prod-card .btn{margin-top:var(--s2);background:var(--foto-grund);align-self:flex-start}.prod-card[hidden]{display:none}.prod-leer{margin-top:var(--s5);color:var(--ink-2)}.abschluss-band{padding-block:var(--pad-section);background:var(--stage);color:var(--on-dark)}.abschluss-band h2{max-width:20ch}.abschluss-band p{margin-top:var(--s4);max-width:44ch;color:var(--on-dark-2)}.abschluss-band .aktionen{margin-top:var(--s6);align-items:center;gap:var(--s5);flex-wrap:wrap;display:flex}.abschluss-band .textlink{color:var(--on-dark)}.abschluss-band .textlink:hover{color:var(--accent)}@media (max-width:1279px){.sys-grid{gap:var(--s7) var(--s6);grid-template-columns:repeat(2,minmax(0,1fr))}.prod-grid{grid-template-columns:repeat(2,1fr)}.pro-grid{gap:var(--s5);grid-template-columns:repeat(3,1fr)}}@media (max-width:1023px){.prod-layout{gap:var(--s6);grid-template-columns:1fr}.filters{align-items:center;gap:var(--s2) var(--s5);flex-flow:wrap;position:static}.filters h3{width:100%;margin:0}.filter-gruppe{align-items:center;gap:var(--s2) var(--s5);flex-wrap:wrap;width:100%;display:flex}.filter-gruppe+.filter-gruppe{margin-top:var(--s3)}html{scroll-snap-type:none}.vt-kopf{gap:var(--s6);grid-template-columns:1fr}.vt-text h2{text-wrap:balance;max-width:26ch}.ablauf{margin-top:var(--s6);grid-template-columns:repeat(2,1fr)}}@media (min-width:1280px) and (max-width:1599px){.ein-kachel h3{font-size:var(--text-lead);line-height:var(--text-lead--line-height);left:var(--s4);right:var(--s4);bottom:var(--s4)}}@media (max-width:1279px){.ein-grid{grid-template-columns:repeat(2,1fr)}.ein-kachel{aspect-ratio:16/10}}@media (max-width:640px){.vt-punkt{gap:var(--s2);grid-template-columns:1fr}.vt-punkt dt{max-width:none}.ablauf{grid-template-columns:1fr}}@media (max-width:760px){.panel-row{grid-template-columns:1fr}.panel{height:34vh}.panel:after{background:linear-gradient(to top,oklch(var(--flor) / .9) 0%, oklch(var(--flor) / .78) 40%,oklch(var(--flor) / 0) 100%);height:62%}.prod-grid{gap:var(--s5) var(--s4);grid-template-columns:repeat(2,1fr)}.prod-card .btn{min-height:44px;box-shadow:none;text-underline-offset:4px;background:0 0;padding:0;font-weight:500;text-decoration:underline}.prod-card .btn:before{display:none}.prod-card .btn:hover{color:var(--accent-strong)}.tab-huelle{position:relative}.tab-huelle:after{content:"";pointer-events:none;background:linear-gradient(to right,transparent,var(--tief));width:40px;position:absolute;top:0;bottom:0;right:0}.tab-hinweis{display:block}.sys-grid{grid-template-columns:minmax(0,1fr)}.ein-grid{gap:var(--s4);grid-template-columns:1fr}.ein-kachel{aspect-ratio:16/9}.qua-grid{gap:var(--s5);grid-template-columns:1fr}.pro-grid{grid-template-columns:1fr}.sec{--pad-section:var(--s8)}.hero-intro{padding-top:calc(var(--header-h) + var(--s5));padding-bottom:0}.panel-row{padding:var(--s5) var(--gutter) var(--s6);gap:var(--s4)}.sec-head{margin-bottom:var(--s6)}.vt-kopf{gap:var(--s5)}.ablauf{gap:var(--s4)}.tab-huelle{margin-top:var(--s6)}}@media (max-width:1023px){.hero-hinweis{display:none}}@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-hinweis svg{animation:none}.panel,.panel-label,.pl-name,.pl-sub,.panel .ph,.panel .veil,.panel-label .btn-mehr,.ein-kachel img,.swatch img{transition:none}.swatch:hover img{transform:none}.sys-bild{transition:none}.sys-rahmen:hover .sys-bild{transform:none}}}