/* Klimatechnik-Atlas v1.6 – Ergänzungen zu site.css.
   Quelle: werkzeug/frontend/atlas-v16.css. Das Werkzeug kopiert die Datei nach assets/ und bindet
   sie in jede Seite direkt nach site.css ein (Cache-Hash ?v=… aus dem Dateiinhalt).
   Jede Aufgabe hat einen eigenen, gekennzeichneten Block. Nur hier ändern, nicht in assets/. */

/* v1.6 Responsiv */
/* Sicherheitsnetz: lange Wörter/Modellcodes brechen um, statt die Seite zu verbreitern
   (break-word ändert keine Tabellenbreiten; „anywhere“ nur gezielt, s. u.) */
main,.side,dialog,.suggest,.cmpbar{overflow-wrap:break-word}
img,svg,video,canvas,iframe{max-width:100%}
/* Raster: Mindestspalte nie breiter als der Container (sonst ragt die einzige Spalte bei 320 px heraus) */
.grid{grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr))}
.glossar{grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.quick{grid-template-columns:repeat(auto-fill,minmax(min(210px,100%),1fr))}
.logos{grid-template-columns:repeat(auto-fill,minmax(min(170px,100%),1fr))}
.kv{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr))}
.timeline{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr))}
.grid>*,.glossar>*,.quick>*,.logos>*,.kv>*,.text>*,.hero>*,.stage>*,.kat-hero>*,.serie-head>*,.twocol>*,.calc>*,.finder>*{min-width:0}
/* Lange Modellcodes, Serien- und Produktnamen */
.text,.card h3,.card .mono,.serie-head .mono,.kv dd,.glossar dt,.glossar dd,.crumbs,.lawlinks a,.law>summary,
.prog a,.hist li,.quick a,.suggest a,.suggest .sg-off,.foot-links,#dlgTitle,.dlg-body td,.cmp thead th{overflow-wrap:anywhere}
.text{hyphens:auto;-webkit-hyphens:auto}
.dlg-head>div{min-width:0}
.dlg-body,.tabs{position:relative}
.section-head>*{min-width:0;max-width:100%}
/* Breite Tabellen scrollen nur im Container: Schatten an der Kante zeigt, dass es weitergeht
   (Hintergrund-„local“ deckt den Schatten am Anfang/Ende ab – rein per CSS, auch auf der Vergleichsseite) */
/* position:relative: absolut positionierte Kinder (z. B. .sr-only im Tabellenkopf) werden vom
   Container abgeschnitten, statt die Seite zu verbreitern */
.tablebox{position:relative;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;
  background:
    linear-gradient(to right,var(--surface) 40%,rgb(255 255 255 / 0)) left center/28px 100% no-repeat local,
    linear-gradient(to left,var(--surface) 40%,rgb(255 255 255 / 0)) right center/28px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%,rgb(27 37 48 / .2),rgb(27 37 48 / 0)) left center/12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%,rgb(27 37 48 / .2),rgb(27 37 48 / 0)) right center/12px 100% no-repeat scroll,
    var(--surface)}
/* Kopfzeile durchscheinend (gleicher Farbton wie vorher), damit der Schatten auch dort sichtbar ist */
.tablebox thead th{background:rgb(27 37 48 / .025)}
.tablebox thead th.stick{background:#FAFBFC}
/* Erste Spalte bleibt stehen: beim seitlichen Scrollen Schatten an ihrer Kante (Klasse von atlas-v16.js) */
.tablebox.tb-links .stick{box-shadow:1px 0 0 var(--line2),6px 0 8px -5px rgb(27 37 48 / .35)}
/* Hinweiszeile (von atlas-v16.js eingefügt, nur wenn die Tabelle breiter als der Container ist) */
.tb-hinweis{position:sticky;left:0;display:flex;align-items:center;gap:6px;padding:7px 12px;font-size:.8rem;color:var(--muted);border-bottom:1px solid var(--line2);background:var(--surface);width:100%;box-sizing:border-box}
.tb-hinweis::after{content:"→";font-weight:700;color:var(--kc-blau,var(--cool))}
.tablebox:not(.tb-scroll)>.tb-hinweis,.tablebox.tb-ende>.tb-hinweis::after{display:none}
.tablebox:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
/* Detail-Dialog: nie breiter als der Viewport, Inhalt scrollt im Dialog */
dialog{max-width:min(640px,calc(100vw - 24px));max-height:calc(100dvh - 24px)}
@supports not (height:100dvh){dialog{max-height:calc(100vh - 24px)}}
/* Vergleichsseite: auf dem Handy schmalere Spalten, damit mehr als ein Modell sichtbar ist */
@media (max-width:640px){
  .cmp td,.cmp th{min-width:132px}
  .cmp th.stick{min-width:96px;max-width:118px}
  .cmp img{width:100%;max-width:120px;height:auto;aspect-ratio:3/2}
}
/* Touch-Ziele ≥ 40 px auf Handy/Tablet und bei Touch-Bedienung */
@media (max-width:1000px),(pointer:coarse){
  .menu-btn{min-height:40px;padding:8px 12px}
  .btn,.btn.small{min-height:40px}
  .btn.small{padding:6px 12px}
  a.chip,button.chip{min-height:40px}
  .x{display:inline-grid;place-items:center;min-width:40px;min-height:40px;padding:0}
  .search input{min-height:40px}
  /* „+“ in der Tabelle: sichtbare Größe bleibt, Trefferfläche wird größer */
  .addcmp{position:relative}
  .addcmp::after{content:"";position:absolute;inset:-9px}
}
/* Handy-Menü: geschlossenes Menü wirft keinen Schatten mehr in den linken Seitenrand */
@media (max-width:1000px){.side:not(.open){box-shadow:none}}
/* Suchvorschläge im Kopf auf dem Handy: volle Breite unter dem Suchfeld statt schmaler Spalte */
@media (max-width:640px){
  .topbar .suggest{position:fixed;top:auto;left:12px;right:12px;margin-top:6px;max-height:calc(100vh - 96px);overflow-y:auto}
}
/* Vergleichsleiste: Text und Knöpfe brechen sauber um */
.cmpbar-in>*{min-width:0}
@media (max-width:420px){.cmpbar{padding-left:12px;padding-right:12px}.cmpbar-in{gap:8px}}
/* Nachbesserung QA Aufgabe 2: Filter (Selects, Suchfeld #fu-q) auf Handy/Tablet ≥ 40 px hoch */
@media (max-width:1000px),(pointer:coarse){
  .filterbar select,.filterbar input,#fu-q{min-height:40px}
}
/* Nachbesserung QA Aufgabe 2: Merkmalspalte der Vergleichsseite – Wörter nicht mitten im Wort
   ohne Bindestrich trennen (Silbentrennung nach lang="de", etwas breiter, kleinere Schrift) */
.cmp th.stick{overflow-wrap:break-word;word-break:normal;hyphens:auto;-webkit-hyphens:auto}
@media (max-width:640px){
  .cmp th.stick{min-width:112px;max-width:140px;font-size:.8rem;line-height:1.3}
}

/* v1.6 Technische Daten */
/* Detail-Dialog: Werte eines Modells gruppiert (Abschnitt je Gruppe mit h3, dl je Gruppe) */
.dlg-head .td-eyebrow{display:block}
/* Nachbesserung QA Aufgabe 4: Einheiten wie „kW“ im Seriennamen nicht per Großschreibung zu „KW“
   machen – nur der Herstellername bleibt in Versalien */
.dlg-head .td-eyebrow{text-transform:none;letter-spacing:.04em}
.dlg-head .td-herst{text-transform:uppercase;letter-spacing:.12em}
.dlg-head .td-modell{font-size:1.25rem;margin-top:4px;overflow-wrap:anywhere}
.td-kopf{display:flex;flex-wrap:wrap;gap:4px 16px;margin:8px 0 0;font-size:.85rem}
.td-kopf>div{display:flex;gap:6px;min-width:0;align-items:baseline}
.td-kopf dt{color:var(--muted)}
.td-kopf dd{margin:0;font-weight:600;overflow-wrap:anywhere;min-width:0}
.techdaten{display:grid;gap:4px}
.td-gruppe{padding-top:12px}
.td-gruppe+.td-gruppe{border-top:1px solid var(--line2)}
.td-gruppe h3{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--kc-blau,var(--cool));margin:0 0 6px}
.td-liste{margin:0;display:grid}
.td-liste>div{display:grid;grid-template-columns:minmax(0,48%) minmax(0,1fr);gap:10px;padding:6px 0;border-bottom:1px dashed var(--line2)}
.td-liste>div:last-child{border-bottom:0}
.td-liste dt{color:var(--muted);min-width:0;overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.td-liste dd{margin:0;min-width:0;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.td-liste dd .preis-hinweis{display:block;margin-top:2px;line-height:1.35}
@media (max-width:420px){
  .td-liste>div{grid-template-columns:minmax(0,1fr);gap:0}
  .td-liste dd{font-weight:600}
}
/* Nachbesserung QA Aufgabe 3: „Innengerät“/„Außengerät“ im Dialogkopf nie mitten im Wort umbrechen */
.td-kopf dt{flex:none;white-space:nowrap}

/* v1.6 Datenblatt */
/* Symbolknopf je Tabellenzeile: zweite Zeile in der ersten Spalte, unter dem Modellcode.
   width:0 + min-width:100% → kein Beitrag zur Spaltenbreite (Tabelle wird nicht breiter);
   Einzug 34 px = Breite des „+“ (22 px + Rand 2 px) + Abstand (8 px) + 2 px, damit sich die
   vergrößerten Trefferflächen von „+“ (±9 px) und PDF-Knopf auf Touch-Geräten nicht überlappen. */
.db-zeile{display:block;width:0;min-width:100%;padding-left:34px;margin-top:2px;white-space:nowrap;line-height:1}
.db-btn{all:unset;box-sizing:border-box;cursor:pointer;display:inline-flex;align-items:center;gap:4px;height:20px;padding:0 7px;
  border:1px solid var(--line);border-radius:6px;color:var(--kc-blau,var(--cool));font:600 .7rem/1 var(--body);letter-spacing:.03em;
  background:var(--surface);vertical-align:middle;position:relative}
.db-btn:hover{border-color:var(--kc-blau,var(--cool));background:var(--kc-blau-soft,var(--cool-soft))}
.db-btn:focus-visible{outline:2px solid var(--focus);outline-offset:1px}
.db-btn svg{flex:none}
.db-btn.db-laeuft{cursor:progress;opacity:.7}
.db-btn.db-laeuft svg{animation:db-dreh 1s linear infinite}
@keyframes db-dreh{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.db-btn.db-laeuft svg{animation:none}}
/* Touch: Trefferfläche ≥ 40 × 40 px. Nachbesserungen QA Aufgaben 4/5: Knopf auf Touch-Geräten 12 px
   tiefer, Fläche oben nur 4 px – zwischen Modellcode und Trefferfläche bleiben ≥ 10 px, so dass die
   Touch-Korrektur des Browsers Tipps auf den Code nicht zum PDF-Knopf zieht (der Code hat dazu einen
   eigenen Klick-Handler, Klasse .db-code). 18 px nach unten; die Zeile wird dafür höher (nur Höhe,
   keine Breite), damit die Fläche an der Zeilenunterkante endet. Nach rechts vergrößert, links liegt „+“. */
@media (max-width:1000px),(pointer:coarse){
  .db-zeile{margin-top:12px;padding-bottom:12px}
  .db-btn::after{content:"";position:absolute;top:-4px;bottom:-18px;left:0;right:-9px;min-width:40px}
  .db-code{cursor:pointer}
}
/* Dialog: Knopf neben „Zum Vergleich“, Statuszeile darunter */
.db-dlg.db-laeuft{cursor:progress;opacity:.75}
.db-status{margin:10px 0 0;font-size:.88rem;color:var(--muted)}
.db-status.db-ok{color:var(--ok)}
.db-status.db-fehler{color:var(--rot,#D40511);font-weight:600}
/* Hinweis unten (ohne offenen Dialog), nie breiter als der Viewport */
.db-toast{position:fixed;left:12px;right:12px;bottom:16px;margin:0 auto;max-width:520px;z-index:80;background:var(--ink);color:#fff;
  border-radius:10px;padding:12px 16px;font-size:.92rem;line-height:1.4;box-shadow:0 8px 24px rgb(0 0 0 / .25);overflow-wrap:anywhere}
.db-toast.db-fehler{background:var(--rot,#D40511)}
.db-toast[hidden]{display:none}
@media print{.db-zeile,.db-toast{display:none}}

/* v1.6 Marken */
/* Mundoclima (Herstellermarke) und klimacorner.de (Händler): Empfehlungsblock über den Listen,
   Kennzeichnung „Empfehlung von klimacorner.de“ an jeder hervorgehobenen Karte/Kachel/Zeile.
   Dezent im Atlas-Design (KlimaCorner-Blau), Karten im bestehenden Kartenstil. */
.mk-block{background:var(--kc-blau-soft,#EAF2FA);border-left:4px solid var(--kc-blau,#1A598F);border-radius:var(--radius);
  padding:16px 18px 14px;display:grid;gap:12px;min-width:0}
.mk-kopf{display:grid;gap:2px;min-width:0}
.mk-kennz{margin:0;font:700 .8125rem/1.3 var(--body);letter-spacing:.04em;color:var(--kc-blau,#1A598F)}
.mk-titel{margin:0;font-size:1.15rem;line-height:1.25;color:var(--ink);overflow-wrap:anywhere}
.mk-text{margin:2px 0 0;font-size:.9rem;color:var(--muted);max-width:72ch}
.mk-grid{margin:0;grid-template-columns:repeat(auto-fill,minmax(min(200px,100%),1fr))}
.mk-grid[hidden]{display:none}
/* Block-Karten sind schmaler als in den Listen: lange Wörter (z. B. „Kaltwassersatz/Wärmepumpe“) und die
   Kennwertzeile umbrechen statt abgeschnitten zu werden */
.mk-grid>.card .body{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto}
.mk-grid>.card .spec{flex-wrap:wrap;column-gap:10px}
.mk-links{margin:0;display:flex;flex-wrap:wrap;gap:6px 18px;font-size:.92rem;font-weight:600}
.mk-links a{color:var(--kc-blau,#1A598F);text-decoration:underline;text-underline-offset:2px}
.mk-links a:hover{color:var(--kc-blau-dunkel,#14466F)}
.mk-links .mk-link-kc::after{content:" ↗";font-weight:400}
section>.mk-block{margin-bottom:16px}
@media (max-width:480px){.mk-block{padding:14px 14px 12px}.mk-titel{font-size:1.05rem}}
/* Handy: Karten im Block kompakt (Bild links, ohne Kurztext), damit die Liste darunter nah bleibt */
@media (max-width:640px){
  .mk-grid{gap:10px}
  .mk-grid>.card{grid-template-rows:none;grid-template-columns:92px minmax(0,1fr)}
  .mk-grid>.card .pic{aspect-ratio:auto;min-height:100%;border-bottom:0;border-right:1px solid var(--line2)}
  .mk-grid>.card .body{padding:10px 12px;gap:4px}
  .mk-grid>.card h3{font-size:1rem}
  .mk-grid>.card .body>p.small{display:none}
  .mk-grid>.card .spec{font-size:.8rem;padding-top:6px}
  /* Nachbesserung QA Aufgabe 5: auf dem Handy höchstens 2 Karten im Block */
  .mk-grid>.card:nth-child(n+3){display:none}
}
/* Nachbesserung QA Aufgabe 5: Fußlink klimacorner.de auf Touch-Geräten mit ≥ 40 px Trefferfläche */
@media (max-width:1000px),(pointer:coarse){footer .kc-link{display:inline-flex;align-items:center;min-height:40px}}
@media (max-width:1000px),(pointer:coarse){.mk-links a{display:inline-flex;align-items:center;min-height:40px}}
/* Kennzeichnung an Karten, Logo-Kacheln und Vorschlägen */
.mk-badge{display:inline-block;justify-self:start;max-width:100%;font:700 .8125rem/1.3 var(--body);letter-spacing:.02em;
  color:var(--kc-blau,#1A598F);background:var(--kc-blau-soft2,#D5E6F5);border-radius:99px;padding:2px 9px;
  white-space:normal;overflow-wrap:anywhere;text-transform:none}
.card.mk-hl{box-shadow:var(--shadow),inset 0 0 0 2px var(--kc-blau-soft2,#D5E6F5)}
.card.mk-hl:hover{box-shadow:var(--shadow-hover),inset 0 0 0 2px var(--kc-blau,#1A598F)}
.logo-tile.mk-hl{box-shadow:var(--shadow),inset 0 0 0 2px var(--kc-blau-soft2,#D5E6F5)}
.logo-tile .mk-badge{justify-self:center}
/* Suchvorschläge: Kopfzeile mit Kennzeichnung */
.suggest .mk-sg{display:block;border-left:0;border-radius:0;padding:8px 12px;background:var(--kc-blau-soft,#EAF2FA);
  border-bottom:1px solid var(--line2);font-size:.82rem;line-height:1.4;color:var(--ink)}
.suggest .mk-sg .mk-kennz{display:inline;font-size:.8125rem}
.suggest .mk-sg a.mk-sg-a{display:inline;padding:0;border:0;color:var(--kc-blau,#1A598F);font-weight:600;text-decoration:underline}
.suggest .mk-sg a.mk-sg-h{margin-left:6px}
.suggest .mk-badge{margin-left:2px;vertical-align:1px;font-size:.8125rem;padding:1px 7px}
.suggest a.mk-hl{background:linear-gradient(90deg,var(--kc-blau-soft,#EAF2FA),transparent 70%)}
@media print{.mk-block{border:1px solid #999;background:none}}

/* v1.6 Recht */
footer .kein-shop{font-size:.8125rem;opacity:.9}
@media (max-width:1000px),(pointer:coarse){footer .foot-links a{display:inline-flex;align-items:center;min-height:40px}}
@media (max-width:480px){.text h1{font-size:clamp(1.25rem,6.4vw,1.9rem);hyphens:auto;-webkit-hyphens:auto}}

/* v1.6 Portal */
/* Daten vom Hersteller (Atlas-App): Kennzeichnung auf Serienseiten und Karten, Abschnitt auf Kategorieseiten. */
.hd-badge{display:inline-block;background:#eef6f0;color:#1f5d36;border:1px solid #b9dcc5;border-radius:999px;padding:2px 10px;font-size:.8rem;font-weight:700;line-height:1.4;max-width:100%;overflow-wrap:anywhere}
.hd-kennz{justify-self:start;background:#eef6f0;color:#1f5d36;border-radius:4px;padding:1px 6px;font-size:.75rem;font-weight:700;max-width:100%;overflow-wrap:anywhere}
.hd-hinweis{border-left:3px solid #2e7d4f;padding-left:10px;max-width:80ch}
.hd-block{display:grid;gap:10px}
.serie-head .gallery img.hd-ohne-bild{width:120px;height:120px;margin:auto;opacity:.5}
#downloads .dl a{overflow-wrap:anywhere}
footer .foot-hersteller a{font-weight:600;overflow-wrap:anywhere}
@media (max-width:1000px),(pointer:coarse){footer .foot-hersteller a{display:inline-flex;align-items:center;min-height:40px}}

/* v1.6 Anfrage */
/* Angebotsanfrage (Knopf in Serienkopf und Detailansicht, Formular als Dialog). */
.anf-btn{min-height:42px;justify-content:center;white-space:normal;text-align:center}
.anf-btn.anf-mk,.anf-form .btn.anf-mk{background:var(--kc-blau,#1A598F);border-color:var(--kc-blau,#1A598F);color:#fff}
.anf-btn.anf-mk:hover,.anf-form .btn.anf-mk:hover{background:var(--kc-blau-dunkel,#123f66);border-color:var(--kc-blau-dunkel,#123f66)}
dialog.anf-dlg{max-width:min(600px,calc(100vw - 16px));max-height:calc(100vh - 16px);overflow:auto}
.anf-kopf h2{margin:0;font-size:1.2rem;overflow-wrap:anywhere}
.anf-body{padding:14px 18px 18px;display:grid;gap:12px;min-width:0}
.anf-form{display:grid;gap:12px;min-width:0}
.anf-lead,.anf-klein{margin:0;font-size:.9rem;color:var(--muted)}
.anf-zwei{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (max-width:560px){.anf-zwei{grid-template-columns:1fr}.anf-body{padding:12px}}
.anf-feld{display:grid;gap:4px;font-weight:600;font-size:.9rem;min-width:0}
.anf-feld input,.anf-feld select,.anf-feld textarea{font:inherit;font-weight:400;font-size:1rem;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:6px;padding:9px 11px;width:100%;min-width:0;min-height:44px;box-sizing:border-box}
.anf-feld textarea{resize:vertical}
.anf-feld [aria-invalid=true]{border-color:var(--rot);background:#fff7f7}
.anf-fehler{color:var(--rot-dunkel,#a11);font-weight:400}
.anf-pflicht{color:var(--rot)}
.anf-check{display:flex;gap:10px;align-items:flex-start;min-height:40px;font-size:.95rem}
.anf-check input{width:22px;height:22px;flex:0 0 auto;margin:2px 0 0}
.anf-check span{min-width:0;overflow-wrap:anywhere}
.anf-hp{position:absolute!important;left:-10000px!important;width:1px;height:1px;overflow:hidden}
.anf-meldung{background:#fff1f1;border-left:4px solid var(--rot);border-radius:6px;padding:10px 12px}
.anf-aktionen{display:flex;flex-wrap:wrap;gap:10px}
.anf-aktionen .btn{min-height:44px}
.anf-ok{border-left:4px solid #2e7d4f}

/* v1.7 Vollversion */
/* Kerndaten-Serienseiten (body[data-kd="1"]): Herstellerlogo statt Produktfoto – eingepasst, weißer
   Hintergrund, begrenzte Höhe, kein Beschnitt (statt 4:3-Fläche des Produktfotos). */
.gallery.logo-gallery{aspect-ratio:auto;display:flex;align-items:center;justify-content:center;min-height:150px;
  max-height:240px;padding:28px 24px;background:#fff;box-sizing:border-box;overflow:hidden}
.gallery.logo-gallery img{position:static;inset:auto;display:block;width:min(78%,300px);height:auto;max-width:100%;
  max-height:110px;object-fit:contain}
@media (max-width:480px){.gallery.logo-gallery{min-height:112px;padding:20px 16px}.gallery.logo-gallery img{width:min(80%,240px);max-height:72px}}
/* Vorschriften ohne eigene Seite: Kasten wie .lawlinks .off-link, aber nicht ausgegraut */
.lawlinks .law-ohne-seite{display:block;padding:10px 14px;border-radius:var(--radius);background:var(--surface);
  box-shadow:var(--shadow);color:var(--ink);min-width:0;max-width:100%;overflow-wrap:anywhere}
.law-ohne-seite{min-width:0;max-width:100%;overflow-wrap:anywhere}
/* Hinweis „Kerndaten – ausführliche Modelldaten folgen“ (nutzt .note) */
.note.kd-hinweis{margin:0;max-width:100%;overflow-wrap:break-word}
/* Lange Modellkennungen in der ersten Tabellenspalte und im Kopf */
body[data-kd="1"] #tbl td.stick .mono,body[data-kd="1"] .serie-head .row .mono{overflow-wrap:anywhere;min-width:0;max-width:100%}
/* Zeilenumbruch statt überbreiter erster Spalte (verklebte Kennungen bis 200 Zeichen, Werkzeug-Warnung > 40) */
body[data-kd="1"] #tbl td.stick{white-space:normal;min-width:min(42vw,10rem);max-width:min(62vw,22rem)}
body[data-kd="1"] #tbl td.stick .mono{white-space:normal}

/* v1.8 Artikelseiten */
/* Artikel-Einzelseiten (body[data-seite=artikel], Architektur 4.5/5.5/16.3), Link in der Detailansicht,
   Modellsuche. Grundsatz: nichts ragt bei 320–1440 px nach rechts heraus (min-width:0, Umbruch). */
:root{--e2:#C2410C;--e1:#C81E1E}
.cls.c2{background:var(--e2);color:#fff}
.cls.c1{background:var(--e1);color:#fff}
.artikel-head,.artikel-head .stack{min-width:0}
.artikel-head h1{overflow-wrap:anywhere;word-break:break-word;hyphens:manual;-webkit-hyphens:manual;max-width:100%}
.artikel-head .row .mono,.artikel-head .eyebrow{overflow-wrap:anywhere;min-width:0;max-width:100%}
.crumbs [aria-current]{overflow-wrap:anywhere;min-width:0;max-width:100%}
.artikel-kv{grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr))}
.artikel-kv dd{overflow-wrap:anywhere;min-width:0}
/* v1.8 Aufgabe 8 (Gesamtprüfung, Responsiv): lange Merkmalsnamen in Großbuchstaben („WÄRMERÜCKGEWINNUNG“) ragten bei
   1280 px 6 px über den Rand (3 Lüftungs-Artikel) – Umbruch/Silbentrennung im dt erlauben */
.artikel-kv dt{overflow-wrap:anywhere;hyphens:auto;-webkit-hyphens:auto;min-width:0}
/* UVP-Block: abgesetzte Fläche, Preis groß, Umbruch erlaubt */
.uvp-box{background:var(--kc-blau-soft,#EAF2FA);border-left:4px solid var(--kc-blau,#1A598F);border-radius:var(--radius);
  padding:14px 16px;display:grid;gap:6px;min-width:0;max-width:100%;box-sizing:border-box;overflow-wrap:anywhere}
.uvp-box > *{margin:0;min-width:0}
.uvp-box .uvp-label{font-size:.95rem;font-weight:700;letter-spacing:0;color:var(--ink)}
.uvp-box .uvp-preis{font:700 clamp(1.5rem,5.4vw,2rem)/1.15 var(--display);color:var(--ink);font-variant-numeric:tabular-nums}
.uvp-box .uvp-vermerk{color:var(--ink)}
.uvp-box .uvp-teile{margin:0;padding-left:1.2em}
.uvp-box .uvp-anfrage{justify-self:start;max-width:100%;min-height:40px;box-sizing:border-box;white-space:normal;text-align:left;margin-top:4px}
/* Aktionen */
.artikel-aktionen .btn{min-height:40px;box-sizing:border-box;max-width:100%;white-space:normal}
.artikel-aktionen .btn[aria-pressed="true"]{background:var(--cool,#0B6A83);border-color:var(--cool,#0B6A83);color:#fff}
.artikel-status{margin:0}
.artikel-status:empty{display:none}
.artikel-status a{display:inline-flex;align-items:center;min-height:40px}
/* Technische Daten: Gruppen ≥ 760 px zweispaltig, darunter einspaltig */
.td-gruppen{display:grid;grid-template-columns:minmax(0,1fr);gap:18px 28px;min-width:0}
@media (min-width:760px){.td-gruppen{grid-template-columns:repeat(2,minmax(0,1fr))}}
.td-block{min-width:0}
.td-block h3{font-size:1rem;margin:0 0 6px}
.td-gruppe{grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.td-gruppe div{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:4px 14px;padding:7px 0;border-top:1px solid var(--line2,#E8EEF3)}
.td-gruppe dt,.td-gruppe dd{min-width:0;overflow-wrap:anywhere}
.td-gruppe dt{text-transform:none;letter-spacing:0;font-size:.9rem;font-weight:400}
.td-gruppe dd{font-weight:600}
@media (max-width:420px){.td-gruppe div{grid-template-columns:minmax(0,1fr)}}
/* Geschwister-Liste und Modell-Liste der Suchseite: umbrechende Liste, Ziele ≥ 40 px */
.artikel-liste{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px;min-width:0}
.artikel-liste li{min-width:0;max-width:100%}
.artikel-liste a{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 8px;min-height:40px;box-sizing:border-box;max-width:100%;
  padding:6px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface,#fff);color:var(--ink);
  text-decoration:none;overflow-wrap:anywhere}
.artikel-liste a .mono{min-width:0;overflow-wrap:anywhere}
.artikel-liste a:hover,.artikel-liste a:focus-visible{border-color:var(--kc-blau-hell,#0071CA);text-decoration:underline}
.artikel-geschwister > p a{display:inline-flex;align-items:center;min-height:40px}
.such-m-liste{flex-direction:column;flex-wrap:nowrap}
.such-m-liste a{width:100%}
/* Modellkennung in der Serientabelle verlinkt */
.art-link{display:inline-flex;min-height:40px;align-items:center;color:inherit;text-decoration:none;max-width:100%;overflow-wrap:anywhere}
.art-link:hover,.art-link:focus-visible{text-decoration:underline;color:var(--kc-blau-hell,#0071CA)}
/* Detailansicht: Link „Zur Modellseite →“ */
.art-dlg{min-height:40px;box-sizing:border-box}
/* Modellsuche in den Vorschlägen */
.suggest .sg-gruppe{padding:7px 12px 5px;font:600 .74rem/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  background:var(--sunk,#F2F2F2);border-bottom:1px solid var(--line2)}
.suggest a.sg-modell{display:grid;grid-template-columns:minmax(0,1fr);gap:2px;min-height:40px;box-sizing:border-box}
.suggest .sg-m-kopf{display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center;min-width:0}
.suggest .sg-m-kopf .mono{min-width:0;overflow-wrap:anywhere;font-weight:600}
/* Energie-Block (16.3): Art | 7-stufige Skala | Pfeil in Klassenfarbe; schmal: Skala unter der Art */
.energie-box{border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;display:grid;gap:8px;min-width:0;max-width:100%;
  box-sizing:border-box;background:var(--surface,#fff);container-type:inline-size}
.energie-box > *{margin:0;min-width:0}
.energie-box .ee-label{font-size:.95rem;font-weight:700}
.ee-zeile{display:grid;grid-template-columns:minmax(0,8.5em) minmax(0,1fr) auto;gap:6px 12px;align-items:center;min-width:0}
.ee-art{font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.ee-skala{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;min-width:0;max-width:16rem;height:12px}
.ee-skala i{display:block;border-radius:2px;min-width:0}
.ee-skala .c7{background:var(--e7)}.ee-skala .c6{background:var(--e6)}.ee-skala .c5{background:var(--e5)}
.ee-skala .c4{background:var(--e4)}.ee-skala .c3{background:var(--e3)}.ee-skala .c2{background:var(--e2)}.ee-skala .c1{background:var(--e1)}
@supports selector(:has(a)){
  .ee-skala i{opacity:.32}
  .ee-zeile:has(.ee-pfeil.c7) .ee-skala .c7,.ee-zeile:has(.ee-pfeil.c6) .ee-skala .c6,.ee-zeile:has(.ee-pfeil.c5) .ee-skala .c5,
  .ee-zeile:has(.ee-pfeil.c4) .ee-skala .c4,.ee-zeile:has(.ee-pfeil.c3) .ee-skala .c3,.ee-zeile:has(.ee-pfeil.c2) .ee-skala .c2,
  .ee-zeile:has(.ee-pfeil.c1) .ee-skala .c1{opacity:1;transform:scaleY(1.5)}
}
.ee-pfeil.cls{font-size:.86rem;min-width:3.4em;padding:5px 12px 5px 7px}
.energie-box .ee-quelle{overflow-wrap:anywhere}
.energie-box .ee-nr{white-space:nowrap}
.ee-label-dl{justify-self:start;min-height:40px;box-sizing:border-box;max-width:100%;white-space:normal}
details.ee-vorschau{min-width:0}
details.ee-vorschau summary{display:flex;align-items:center;min-height:40px;cursor:pointer;color:var(--kc-blau,#1A598F);font-weight:600}
details.ee-vorschau img{display:block;max-width:100%;width:auto;height:auto;max-height:80vh;margin-top:8px;border:1px solid var(--line)}
@container (max-width:400px){
  .ee-zeile{grid-template-columns:minmax(0,1fr) auto}
  .ee-zeile .ee-art{grid-column:1/-1}
}
@supports not (container-type:inline-size){
  @media (max-width:400px){.ee-zeile{grid-template-columns:minmax(0,1fr) auto}.ee-zeile .ee-art{grid-column:1/-1}}
}
@media print{.artikel-aktionen,.artikel-status,.uvp-anfrage{display:none}}