@layer legacy{
/* Lüftungsampel Keller (.br-kl), Entwurf 03.11.2026. Gestaltung wie Taupunkt-Rechner (.br-tp) und Leistungs-Finder (.br-lf).
   Liegt in der Ebene "legacy" (src/lib/komponenten.mjs); wo Token-Regeln für Elemente greifen, steht !important. */
.br-kl{--i:#081010;--g:#3A4140;--b:#6B7272;--h:#9AA0A0;--p:#C3C8C8;--r:#DADDDD;--z:#FEFCF8;--bl:#274CF5;--bt:#1B36B8;--bh:#E9EEFE;--rot:#B42318;--rot-h:#FDECEA;--gelb:#8A5A00;--gelb-f:#F2B705;--gelb-h:#FFF6DB;--gruen:#1E7A3C;--gruen-h:#E6F4EA;--m:"Geistmono Variablefont Wght",ui-monospace,monospace;--s:var(--_typography---generalsans,Generalsans),Arial,sans-serif;display:block;padding:clamp(48px,6vw,96px) 0;background:var(--z);border-top:1px solid var(--r);font:400 15px/1.6 var(--m);color:var(--g);overflow-x:clip}
.br-kl *,.br-kl *::before,.br-kl *::after{box-sizing:border-box}
.br-kl [data-w-id]{opacity:1!important;transform:none!important}
.br-kl [hidden]{display:none!important}
.br-kl p,.br-kl ul,.br-kl ol,.br-kl dl,.br-kl dd,.br-kl h2,.br-kl h3,.br-kl legend{margin:0;padding:0}
.br-kl a{color:var(--i);text-decoration:underline 1px var(--bl);text-underline-offset:4px}
.br-kl a:hover{color:var(--bl)}
.br-kl .kl-in{width:100%;max-width:1200px;margin:0 auto;padding:0 clamp(16px,4vw,40px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(40px,6vw,96px);align-items:start}
.br-kl .kl-intro{position:sticky;top:120px}
.br-kl .kl-k{display:flex;align-items:center;gap:10px;margin:0 0 16px;font:500 12px/1.2 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--bl)}
.br-kl .kl-intro>.kl-k::before{content:"";flex:none;width:8px;height:8px;background:var(--bl)}
.br-kl .kl-title{max-width:16ch;margin:0 0 20px!important;font:500 clamp(30px,3vw,42px)/1.08 var(--s)!important;letter-spacing:-.025em;color:var(--i)!important;text-wrap:balance}
.br-kl .kl-lead{max-width:46ch;margin:0 0 28px;font-size:16px;line-height:1.65}
.br-kl .kl-facts{list-style:none;border-top:1.5px solid var(--i);counter-reset:f}
.br-kl .kl-facts li{display:grid;grid-template-columns:34px minmax(0,1fr);padding:12px 0;border-bottom:1px solid var(--r);font-size:14px;line-height:1.5;counter-increment:f}
.br-kl .kl-facts li::before{content:counter(f,decimal-leading-zero);font:500 12px/1.75 var(--m);letter-spacing:.1em;color:var(--b)}
.br-kl .kl-sheet{min-width:0;margin-top:12px;padding:clamp(22px,3vw,34px);background:#fff;border:1.5px solid var(--i);box-shadow:12px -12px 0 -1px var(--z),12px -12px 0 0 var(--p)}
.br-kl .kl-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap;margin:0 0 22px;padding-bottom:14px;border-bottom:1px solid var(--r)}
.br-kl .kl-head .kl-k{margin:0}
.br-kl .kl-m{font:500 12px/1.2 var(--m);letter-spacing:.12em;text-transform:uppercase;color:var(--b)}
.br-kl fieldset{min-width:0;margin:0 0 26px;padding:0;border:0}
.br-kl legend{display:block;float:none;width:100%;margin:0 0 14px;font:500 13px/1.3 var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--i)}
.br-kl .kl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.br-kl .kl-aus{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:18px}
.br-kl .kl-f{display:flex;flex-direction:column;gap:6px;min-width:0}
.br-kl .kl-f label{font:500 14px/1.35 var(--m);color:var(--i)}
.br-kl .kl-grid .kl-f label{min-height:2.7em;display:flex;align-items:flex-end;flex-wrap:wrap}.br-kl .kl-f label i{margin-left:.4em}
.br-kl .kl-f label i{font-style:normal;color:var(--b);font-weight:400}
.br-kl .kl-f small{font-size:12.5px;line-height:1.45;color:var(--b)}
.br-kl .kl-num{display:flex;align-items:stretch;border:1.5px solid var(--i);background:#fff}
.br-kl .kl-num:focus-within{outline:2px solid var(--bl);outline-offset:2px}
.br-kl .kl-num input{flex:1;min-width:0;width:100%;height:48px!important;margin:0!important;padding:0 12px!important;border:0!important;border-radius:0!important;background:transparent!important;font:500 18px/1 var(--m)!important;color:var(--i)!important;box-shadow:none!important;outline:none;-moz-appearance:textfield}
.br-kl .kl-num input::-webkit-outer-spin-button,.br-kl .kl-num input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.br-kl .kl-num input::placeholder{color:#767C7C;font-weight:400;font-size:15px}
.br-kl .kl-num>span{display:flex;align-items:center;padding:0 12px;border-left:1px solid var(--r);font:500 14px/1 var(--m);color:var(--b)}
.br-kl .kl-num:has([aria-invalid=true]){border-color:var(--rot);box-shadow:inset 0 0 0 1px var(--rot)}
.br-kl .kl-ort{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:end}
.br-kl .kl-sel select{width:100%;height:52px!important;margin:0!important;padding:0 40px 0 12px!important;border:1.5px solid var(--i)!important;border-radius:0!important;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23081010' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center!important;-webkit-appearance:none;appearance:none;font:500 15px/1.2 var(--m)!important;color:var(--i)!important}
.br-kl :focus-visible{outline:2px solid var(--bl);outline-offset:3px}
.br-kl .kl-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;margin:0;padding:0 24px;background:var(--bl);color:#fff!important;border:0;border-radius:0;font:500 14px/1.2 var(--m);letter-spacing:.06em;text-transform:uppercase;text-decoration:none!important;text-align:center;cursor:pointer;transition:background-color .2s}
.br-kl .kl-btn:hover{background:var(--bt);color:#fff}
.br-kl .kl-btn[disabled]{background:var(--b);cursor:progress}
.br-kl .kl-btn.alt{background:#fff;color:var(--i)!important;border:1.5px solid var(--i)}
.br-kl .kl-btn.alt:hover{background:var(--bh)}
.br-kl .kl-btn span{display:inline-block;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.br-kl .kl-btn:hover span{transform:translateX(5px)}
.br-kl .kl-dsk{margin-top:12px;font-size:12.5px;line-height:1.5;color:var(--b)}
.br-kl .kl-dsk a,.br-kl .kl-src a,.br-kl .kl-how a{font:inherit!important;color:inherit}
.br-kl .kl-st{min-height:1.5em;margin-top:10px;font-size:13.5px;line-height:1.5;color:var(--i)}
.br-kl .kl-st:empty{min-height:0;margin:0}
.br-kl .kl-st.err{padding:10px 14px;background:#fff;border:1.5px solid var(--i);border-left:6px solid var(--rot)}
.br-kl .kl-res{margin-top:4px;padding-top:22px;border-top:1.5px solid var(--i);transition:opacity .2s}
.br-kl .kl-res[data-stale]{opacity:.45}
.br-kl .kl-verdict{display:grid;grid-template-columns:auto minmax(0,1fr);gap:20px;align-items:center;min-height:118px;padding:18px;background:var(--z);border:1px solid var(--r);border-left:6px solid var(--h)}
.br-kl .kl-amp{display:grid;gap:7px;padding:8px;background:var(--i);border-radius:22px}
.br-kl .kl-amp i{display:block;width:22px;height:22px;border-radius:50%;background:#2A3030;transition:background-color .3s}
.br-kl [data-l=r] .kl-amp i.r{background:#F04438;box-shadow:0 0 10px #F04438}
.br-kl [data-l=y] .kl-amp i.y{background:var(--gelb-f);box-shadow:0 0 10px var(--gelb-f)}
.br-kl [data-l=g] .kl-amp i.g{background:#32D583;box-shadow:0 0 10px #32D583}
.br-kl .kl-res[data-l=r] .kl-verdict{background:var(--rot-h);border-left-color:var(--rot)}
.br-kl .kl-res[data-l=y] .kl-verdict{background:var(--gelb-h);border-left-color:var(--gelb-f)}
.br-kl .kl-res[data-l=g] .kl-verdict{background:var(--gruen-h);border-left-color:var(--gruen)}
.br-kl .kl-lvl{margin:0 0 4px;font:500 clamp(22px,2.2vw,28px)/1.15 var(--s);letter-spacing:-.01em;color:var(--i)}
.br-kl .kl-res[data-l=r] .kl-lvl{color:var(--rot)}
.br-kl .kl-res[data-l=y] .kl-lvl{color:var(--gelb)}
.br-kl .kl-res[data-l=g] .kl-lvl{color:var(--gruen)}
.br-kl .kl-say{font-size:14.5px;line-height:1.55;color:var(--i)}
.br-kl .kl-data{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 24px;margin-top:18px}
.br-kl .kl-data div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--r);font-size:13.5px}
.br-kl .kl-data dt{color:var(--b)}
.br-kl .kl-data dd{font-weight:500;color:var(--i);white-space:nowrap}
.br-kl .kl-why{list-style:none;margin-top:16px}
.br-kl .kl-why li{position:relative;padding:8px 0 8px 22px;font-size:14px;line-height:1.55}
.br-kl .kl-why li::before{content:"";position:absolute;left:2px;top:15px;width:8px;height:8px;background:var(--bl)}
.br-kl .kl-why b{font-weight:500;color:var(--i)}
.br-kl .kl-sub{margin:0 0 8px!important;font:500 13px/1.3 var(--m)!important;letter-spacing:.1em;text-transform:uppercase;color:var(--i)!important}
.br-kl .kl-day{margin-top:26px;padding-top:18px;border-top:1px solid var(--r)}
.br-kl .kl-best{font-size:14px;line-height:1.55}
.br-kl .kl-best b{font-weight:500;color:var(--i)}
.br-kl .kl-bars{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px;margin:14px 0 22px}
.br-kl .kl-bar{position:relative;height:28px;background:var(--r)}
.br-kl .kl-bar.r{background:var(--rot)}
.br-kl .kl-bar.y{background:var(--gelb-f)}
.br-kl .kl-bar.g{background:var(--gruen)}
.br-kl .kl-bar i{position:absolute;left:0;top:32px;font:400 11px/1 var(--m);font-style:normal;color:var(--b)}
.br-kl details{margin-top:14px;border-top:1px solid var(--r);border-bottom:1px solid var(--r)}
.br-kl summary{display:flex;justify-content:space-between;align-items:center;min-height:48px;padding:6px 0;font:500 13px/1.3 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--i);cursor:pointer;list-style:none}
.br-kl summary::-webkit-details-marker{display:none}
.br-kl summary::after{content:"+";font-size:18px;color:var(--bl)}
.br-kl details[open] summary::after{content:"\2212"}
.br-kl .kl-scroll{overflow-x:auto;padding-bottom:12px}
.br-kl table{width:100%;border-collapse:collapse;font-size:13px}
.br-kl th,.br-kl td{padding:6px 8px;border-bottom:1px solid var(--r);text-align:left;white-space:nowrap}
.br-kl thead th{font-weight:500;color:var(--b)}
.br-kl tbody th{font-weight:500;color:var(--i)}
.br-kl tr.r td:last-child{color:var(--rot);font-weight:500}
.br-kl tr.y td:last-child{color:var(--gelb);font-weight:500}
.br-kl tr.g td:last-child{color:var(--gruen);font-weight:500}
.br-kl .kl-note{margin-top:10px;font-size:12.5px;line-height:1.5;color:var(--b)}
.br-kl .kl-how p,.br-kl .kl-how ul{padding:0 0 12px;font-size:13.5px;line-height:1.6}
.br-kl .kl-how ul{padding-left:18px}
.br-kl .kl-how li+li{margin-top:6px}
.br-kl .kl-how b{font-weight:500;color:var(--i)}
.br-kl .kl-cta{display:flex;flex-direction:column;align-items:flex-start;gap:14px;margin-top:26px;padding:18px;background:var(--bh);border:1px solid var(--p)}
.br-kl .kl-cta p{font-size:14.5px;line-height:1.55;color:var(--i)}
.br-kl .kl-src{margin-top:14px;font-size:12px;line-height:1.5;color:var(--b)}
.br-kl .kl-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media screen and (max-width:991px){.br-kl .kl-in{grid-template-columns:minmax(0,1fr)}.br-kl .kl-intro{position:static}.br-kl .kl-title{max-width:22ch}}
@media screen and (max-width:640px){.br-kl .kl-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.br-kl .kl-grid .kl-f:nth-child(3){grid-column:1/-1}.br-kl .kl-grid .kl-f:nth-child(3) label{min-height:0}.br-kl .kl-ort{grid-template-columns:minmax(0,1fr)}.br-kl .kl-btn{width:100%}.br-kl .kl-data{grid-template-columns:minmax(0,1fr)}}
@media screen and (max-width:479px){.br-kl .kl-sheet{padding:22px 16px;box-shadow:8px -8px 0 -1px var(--z),8px -8px 0 0 var(--p)}.br-kl .kl-verdict{gap:14px;padding:14px}.br-kl .kl-amp i{width:18px;height:18px}.br-kl .kl-bar i{font-size:10px}}
@media (prefers-reduced-motion:reduce){.br-kl *{transition:none!important}}

}