/* KlimaMarkt – Kategorieseite (aus preview/kategorie.template.html) */
/* ---------- Kategorieseite ---------- */
.cat-head{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,56px);align-items:end;padding-bottom:24px}
.cat-head h1{font-size:clamp(34px,3.6vw,52px)}
.cat-head .lead{margin-top:12px;font-size:17px}
.quick{display:grid;gap:8px}
.quick p{font-weight:600;font-size:15px}
.quick .row{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.room-chip{height:44px;border:1px solid #BFC7D1;border-radius:var(--r-btn);background:#fff;font-size:14.5px;font-weight:500;transition:all var(--t-fast)}
.room-chip:hover{border-color:var(--ink)}
.room-chip[aria-pressed="true"]{background:var(--blue-tint);border-color:var(--blue);color:var(--blue-dark);box-shadow:inset 0 0 0 1px var(--blue)}
@media (max-width: 900px){.cat-head{grid-template-columns:1fr}}
.toolbar{position:sticky;top:115px;z-index:30;background:#fff;border-block:1px solid var(--line)}
.toolbar .wrap{display:flex;align-items:center;gap:12px;min-height:56px;flex-wrap:wrap;padding-block:6px}
.count{font-weight:600;white-space:nowrap}
.active{display:flex;gap:6px;flex-wrap:wrap;margin-right:auto}
.active button{height:30px;padding:0 8px 0 10px;border-radius:6px;border:1px solid var(--line);background:var(--bg-2);font-size:13px}
.active button::after{content:" ×";color:var(--mute)}
.active .reset{background:none;border:0;color:var(--blue);text-decoration:underline}
.active .reset::after{content:none}
.sort{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute)}
.sort select{height:40px;border:1px solid #BFC7D1;border-radius:var(--r-btn);background:#fff;padding:0 12px;color:var(--ink);font-size:14.5px}
.filter-open{display:none}
@media (max-width: 1000px){.filter-open{display:inline-flex}.sort span{display:none}}
.shop{display:grid;grid-template-columns:240px 1fr;gap:clamp(24px,3vw,40px);padding-block:24px 64px}
.filters{position:sticky;top:180px;align-self:start;max-height:calc(100svh - 200px);overflow:auto;padding-right:4px;scrollbar-width:thin}
.fgroup{border-bottom:1px solid var(--line);padding-block:14px}
.fgroup:first-child{padding-top:0}
.fgroup legend{float:left;width:100%;font-weight:600;font-size:15px;margin-bottom:8px;padding:0}
.fgroup legend+*{clear:both}
.fgroup .hint{font-size:12.5px;color:var(--mute);margin-bottom:6px}
.opt{display:flex;align-items:center;gap:10px;padding:5px 0;font-size:14.5px;cursor:pointer}
.opt input{width:18px;height:18px;accent-color:var(--blue);flex:none}
.opt small{color:var(--mute)}
.opt .n{margin-left:auto;font-size:12.5px;color:var(--mute)}
.opt.off{opacity:.45}
.swatch{width:14px;height:14px;border-radius:50%;border:1px solid rgba(0,0,0,.2);flex:none}
.eu-mini{display:inline-block;padding:1px 10px 1px 6px;color:#fff;font:700 12px Arial,sans-serif;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 50%,calc(100% - 6px) 100%,0 100%)}
.price-range{display:grid;gap:6px}
.price-range input{width:100%;accent-color:var(--blue)}
.fnote{font-size:12.5px;color:var(--mute);padding-top:12px}
.filters-head,.filters-foot{display:none}
@media (max-width: 1000px){
  .shop{grid-template-columns:1fr}
  .filters{position:fixed;inset:0;z-index:80;max-height:none;background:#fff;padding:16px var(--gutter) 96px;transform:translateX(-100%);transition:transform var(--t) var(--ease);visibility:hidden}
  .filters.open{transform:none;visibility:visible}
  .filters-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
  .filters-head h2{font-size:22px}
  .filters-foot{display:flex;position:fixed;left:0;right:0;bottom:0;padding:12px var(--gutter) calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--line);gap:8px}
  .filters-foot .btn{flex:1}
}
.shop .pgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width: 1150px){.shop .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width: 560px){.shop .pgrid{grid-template-columns:1fr}}
.pcard[hidden]{display:none}
.cmp{display:inline-flex;align-items:center;gap:6px;font-size:13px;cursor:pointer;position:relative;z-index:1}
.cmp input{width:16px;height:16px;accent-color:var(--blue)}
.empty{grid-column:1/-1;border:1px dashed #B9C2CD;border-radius:var(--r-card);padding:40px;text-align:center;display:grid;gap:10px;justify-items:center}
.tray{position:fixed;left:50%;bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translate(-50%,160%);z-index:60;display:flex;align-items:center;gap:12px;padding:8px 8px 8px 16px;border-radius:var(--r-btn);background:var(--ink);color:#fff;box-shadow:var(--shadow);transition:transform var(--t) var(--ease);max-width:calc(100% - 32px)}
.tray.show{transform:translate(-50%,0)}
.tray span{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tray .x{background:none;border:0;color:#AEB9C6;font-size:13px;text-decoration:underline}
.cmp-in{padding:24px;display:grid;gap:14px}
.cmp-in h2{font-size:24px;padding-right:48px}
.cmp-table thead img{width:100%;max-width:170px;height:auto;margin-bottom:6px;background:var(--bg-2)}
.cmp-table td.best{color:var(--ok);font-weight:700}
.guide{display:grid;grid-template-columns:repeat(3,1fr)}
.guide article{padding:0 28px;display:grid;gap:8px;align-content:start}
.guide article:first-child{padding-left:0}
.guide article+article{border-left:1px solid var(--line)}
.guide h3{font-size:20px}
.guide p{color:var(--ink-2);font-size:15px}
@media (max-width: 900px){.guide{grid-template-columns:1fr}.guide article{padding:20px 0}.guide article+article{border-left:0;border-top:1px solid var(--line)}}
.xlinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.xlinks a{display:inline-flex;align-items:center;height:40px;padding:0 14px;border:1px solid var(--line);border-radius:var(--r-btn);font-size:14.5px;font-weight:500}
.xlinks a:hover{border-color:var(--blue);color:var(--blue)}
.faq-wrap{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:clamp(24px,5vw,64px)}
@media (max-width: 900px){.faq-wrap{grid-template-columns:1fr}}

/* v3 */
.toolbar{top:72px}
.filters{top:150px;max-height:calc(100svh - 170px)}
@media (max-width: 900px){.toolbar{top:64px}}
.cat-head h1{font-size:clamp(34px,3.8vw,54px)}
.shop .pgrid{gap:36px 22px}
.room-chip{background:var(--bg-2);border-color:transparent;font-weight:600}
.room-chip:hover{border-color:var(--ink)}
.room-chip[aria-pressed="true"]{background:#fff;border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.cmp{color:var(--ink-2)}
.guide article+article{border-left-color:var(--line-2)}