body,form,figure{margin:0;padding:0}img{border:0}header,footer,nav,section,aside,article,figure,figcaption{display:block}body{font-size:100.01%}select,input,textarea{font-size:99%}#container,.inside{position:relative}#main,#left,#right{float:left;position:relative}#main{width:100%}#left{margin-left:-100%}#right{margin-right:-100%}#footer{clear:both}#main .inside{min-height:1px}.ce_gallery>ul,.content-gallery>ul{margin:0;padding:0;overflow:hidden;list-style:none}.ce_gallery>ul li,.content-gallery>ul li{float:left}.ce_gallery>ul li.col_first,.content-gallery>ul li.col_first{clear:left}.float_left,.media--left>figure{float:left}.float_right,.media--right>figure{float:right}.block{overflow:hidden}.media{display:flow-root}.clear,#clear{height:.1px;font-size:.1px;line-height:.1px;clear:both}.invisible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.custom{display:block}#container:after,.custom:after{content:"";display:table;clear:both}
@media (max-width:767px){#wrapper{margin:0;width:auto}#container{padding-left:0;padding-right:0}#main,#left,#right{float:none;width:auto}#left{right:0;margin-left:0}#right{margin-right:0}}img{max-width:100%;height:auto}.audio_container audio{max-width:100%}.video_container video{max-width:100%;height:auto}.aspect,.responsive{position:relative;height:0}.aspect iframe,.responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%}.aspect--16\:9,.responsive.ratio-169{padding-bottom:56.25%}.aspect--16\:10,.responsive.ratio-1610{padding-bottom:62.5%}.aspect--21\:9,.responsive.ratio-219{padding-bottom:42.8571%}.aspect--4\:3,.responsive.ratio-43{padding-bottom:75%}.aspect--3\:2,.responsive.ratio-32{padding-bottom:66.6666%}.aspect--9\:16,.responsive.ratio-916{padding-bottom:177.7777%}.aspect--1\:1,.responsive.ratio-11{padding-bottom:100%}
/* =========================================================
   Schwarz Heizungsfachbetrieb – Theme für Contao 5.x
   Einbinden: Layout → Stylesheets → Externe Stylesheets
   Datei ablegen unter: files/theme/schwarz/css/schwarz-theme.css
   Schriften: werden lokal aus files/theme/schwarz/fonts/ geladen
   (DSGVO: keine Google-Server). Siehe ANLEITUNG.md, Schritt 2.
   ========================================================= */

/* ---------- Schriften (lokal) ---------- */
@font-face { font-family: "Source Sans 3"; src: url("../../files/theme/schwarz/font/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../../files/theme/schwarz/font/SourceSans3-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Source Sans 3"; src: url("../../files/theme/schwarz/font/SourceSans3-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow Semi Condensed"; src: url("../../files/theme/schwarz/font/BarlowSemiCondensed-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* ---------- Farben & Maße ---------- */
:root {
  --akzent: #C2410C;        /* Heizungs-Orange – hier zentral ändern */
  --akzent-dunkel: #9A3412;
  --text: #1F2328;
  --text-2: #374151;
  --text-3: #4B5563;
  --linie: #E5E7EB;
  --hell: #F4F5F6;
  --dunkel: #23282E;
  --dunkel-2: #1A1E22;
  --weiss: #FFFFFF;
  --breite: 1200px;
  --radius: 10px;
  --schrift: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --titel: "Barlow Semi Condensed", "Arial Narrow", sans-serif;
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--schrift);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--weiss);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--akzent); }
a:hover { color: var(--akzent-dunkel); }
h1, h2, h3, h4 { font-family: var(--titel); font-weight: 700; line-height: 1.1; margin: 0 0 .5em; color: inherit; }
h1 { font-size: clamp(34px, 5vw, 52px); }
h2 { font-size: clamp(28px, 3.5vw, 38px); }
h3 { font-size: 24px; }
p { margin: 0 0 1em; }

/* Contao-Rahmen auf volle Breite, Innenbreite begrenzen */
#wrapper, #container, #main { width: 100%; max-width: none; margin: 0; padding: 0; }
#main .inside { padding: 0; }
#header .inside, #footer .inside { max-width: var(--breite); margin: 0 auto; padding: 0 24px; }
.invisible { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ---------- Topbar (HTML-Modul "topbar.html") ---------- */
.topbar { background: var(--dunkel); color: #E5E7EB; font-size: 14px; }
.topbar__inner { max-width: var(--breite); margin: 0 auto; padding: 8px 24px; display: flex; flex-wrap: wrap; gap: 6px 28px; justify-content: space-between; }
.topbar__gruppe { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.topbar a { color: #E5E7EB; }
.topbar a.topbar__tel { color: var(--weiss); font-weight: 700; text-decoration: none; }

/* ---------- Kopfbereich ---------- */
#header { background: var(--weiss); border-bottom: 1px solid var(--linie); }
#header .inside { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; padding-top: 16px; padding-bottom: 16px; }
.logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); }
.logo img { height: 52px; width: auto; max-width: none; }
.logo__name { font-family: var(--titel); font-weight: 700; font-size: 24px; line-height: 1.1; }
.logo__zusatz { font-size: 14px; color: var(--text-3); }

/* Navigation (Modul "Navigationsmenü", nur Ebene 1 anzeigen) */
.mod_navigation ul { list-style: none; margin: 0; padding: 0; }
.mod_navigation ul.level_1 { display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 1000px) {
  #header .inside { flex-wrap: nowrap; }
  #header .mod_navigation { margin-left: auto; }
}
.mod_navigation ul.level_1 > li > a,
.mod_navigation ul.level_1 > li > strong { display: inline-block; padding: 10px 0; font-weight: 600; font-size: 16px; color: var(--text); text-decoration: none; }
.mod_navigation ul.level_1 > li > a:hover { color: var(--akzent); }
.mod_navigation ul.level_1 > li > strong,
.mod_navigation ul.level_1 > li.trail > a { color: var(--akzent); }
.mod_navigation ul.level_2 { display: none; } /* Unterpunkte nur über Seiten-Navigation */

/* Button im Kopf (HTML-Modul "header-button.html") */
.kopf-button { white-space: nowrap; background: var(--akzent); color: var(--weiss) !important; text-decoration: none; font-weight: 700; padding: 12px 20px; border-radius: 6px; min-height: 44px; display: inline-flex; align-items: center; }
.kopf-button:hover { background: var(--akzent-dunkel); }

/* ---------- Abschnitte = Artikel mit CSS-Klasse ---------- */
/* Jeder Artikel bekommt im Backend die Klasse "sec" plus ggf. eine Variante */
.mod_article.sec { padding: 72px max(24px, calc((100% - var(--breite)) / 2)); }
.mod_article.sec--grau { background: var(--hell); }
.mod_article.sec--dunkel { background: var(--dunkel); color: #F3F4F6; }
.mod_article.sec--dunkel h1, .mod_article.sec--dunkel h2, .mod_article.sec--dunkel h3 { color: var(--weiss); }
.mod_article.sec--dunkel p { color: #D1D5DB; }
.mod_article.sec--dunkel a { color: var(--weiss); }
.mod_article.sec--schmal { padding-top: 40px; padding-bottom: 40px; }
.mod_article.sec--linie { border-bottom: 1px solid var(--linie); padding-top: 24px; padding-bottom: 24px; }

/* Raster: alle Inhaltselemente des Artikels nebeneinander,
   Elemente mit Klasse "voll" (z. B. Überschrift) über die ganze Breite */
.mod_article.raster-2, .mod_article.raster-3, .mod_article.raster-4, .mod_article.raster-5 { display: grid; gap: 20px; align-items: stretch; }
.mod_article.raster-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 40px; align-items: center; }
.mod_article.raster-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.mod_article.raster-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.mod_article.raster-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.mod_article [class*="content-"].voll,
.mod_article .ce_headline.voll, .mod_article .ce_text.voll { grid-column: 1 / -1; }

/* Einleitungstext unter Überschrift */
.intro p { color: var(--text-3); max-width: 680px; }
.sec--dunkel .intro p { color: #D1D5DB; }

/* ---------- Hero (Artikel-Klassen: sec sec--grau raster-2 hero) ---------- */
.hero p.dachzeile, .hero .dachzeile p { font-weight: 700; color: var(--akzent); letter-spacing: .06em; text-transform: uppercase; font-size: 14px; margin-bottom: .4em; }
.hero h1 { margin-bottom: .35em; }
.hero p { font-size: 19px; color: var(--text-2); max-width: 560px; }
.hero figure, .hero img { border-radius: var(--radius); margin: 0; width: 100%; object-fit: cover; }

/* ---------- Buttons (Element "Hyperlink" mit Klasse btn / btn btn--rand) ---------- */
.btn { display: inline-block; margin: 0 12px 12px 0; }
.btn a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; background: var(--akzent); color: var(--weiss) !important; border: 2px solid var(--akzent); }
.btn a:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.btn--rand a { background: transparent; color: var(--text) !important; border-color: var(--text); }
.btn--rand a:hover { background: var(--text); color: var(--weiss) !important; border-color: var(--text); }
.sec--dunkel .btn--rand a { color: var(--weiss) !important; border-color: var(--weiss); }
.sec--dunkel .btn--rand a:hover { background: var(--weiss); color: var(--text) !important; }
.btn--akzentrand a { background: transparent; color: var(--akzent) !important; }

/* Buttons innerhalb eines Textelements:
   Element bekommt Klasse "knoepfe" → alle Links im LETZTEN Absatz werden Buttons,
   der zweite Link als Rand-Button. Praktisch für Hero und Aufruf-Bereiche. */
.knoepfe p:last-child { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.knoepfe p:last-child a { display: inline-flex; align-items: center; min-height: 44px; padding: 12px 22px; border-radius: 6px; font-weight: 700; text-decoration: none; background: var(--akzent); color: var(--weiss) !important; border: 2px solid var(--akzent); }
.knoepfe p:last-child a:hover { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.knoepfe p:last-child a + a { background: transparent; color: var(--text) !important; border-color: var(--text); }
.sec--dunkel .knoepfe p:last-child a + a { color: var(--weiss) !important; border-color: var(--weiss); }

/* ---------- Vertrauensleiste (Klasse "fakt" je Textelement) ---------- */
.fakt h3, .fakt h4 { font-size: 22px; margin: 0; }
.fakt p { color: var(--text-3); font-size: 15px; margin: 0; }

/* ---------- Karten (Textelement mit Klasse "karte") ---------- */
.karte { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--weiss); overflow: hidden; display: flex; flex-direction: column; }
.karte > *:not(figure) { padding-left: 24px; padding-right: 24px; }
.karte > :first-child:not(figure) { padding-top: 24px; }
.karte > :last-child { padding-bottom: 20px; margin-bottom: 0; }
.karte figure { margin: 0 0 16px; }
.karte figure img { width: 100%; height: 200px; object-fit: cover; }
.karte h3 { font-size: 24px; margin-bottom: .3em; color: var(--text); }
.karte p { color: var(--text-2); }
.karte p.meta, .karte .meta { color: var(--text-3); font-size: 15px; }
.karte--akzent { border: 2px solid var(--akzent); }
.karte p:last-child a { font-weight: 700; text-decoration: none; }
.referenz p:last-child { color: var(--text-3); font-size: 15px; }
.sec--grau .karte { border-color: transparent; }
.kategorie, .karte p.kategorie { font-size: 13px; font-weight: 700; color: var(--akzent); text-transform: uppercase; letter-spacing: .05em; margin-bottom: .2em; }
.badge { display: inline-block; background: var(--akzent); color: var(--weiss); font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 4px; letter-spacing: .03em; }
.badge--dunkel { background: var(--text); }

/* ---------- Schritte (Textelement mit Klasse "schritt") ---------- */
.schritt .nr, .schritt p.nr { font-family: var(--titel); font-size: 40px; font-weight: 700; color: #FDBA74; line-height: 1; margin-bottom: .2em; }
.sec--grau .schritt { background: var(--weiss); border-radius: var(--radius); padding: 20px; }
.sec--grau .schritt .nr { font-size: 17px; color: var(--akzent); font-family: var(--schrift); }
.schritt h3 { font-size: 19px; font-family: var(--schrift); margin-bottom: .2em; }
.schritt p { font-size: 15px; color: var(--text-3); margin: 0; }
.sec--dunkel .schritt p { color: #D1D5DB; }

/* ---------- FAQ (Element "Akkordeon" – Contao 5) ---------- */
.content-accordion, .ce_accordion { background: var(--weiss); border-radius: 8px; margin-bottom: 12px; }
.content-accordion summary, .content-accordion .toggler, .ce_accordion .toggler { font-weight: 700; padding: 16px 20px; cursor: pointer; list-style-position: inside; }
.content-accordion .accordion, .content-accordion .accordion > div, .ce_accordion .accordion > div { padding: 0 20px 16px; color: var(--text-2); }
.faq-wrap { max-width: 900px; }

/* ---------- Kontakt ---------- */
.kontakt-tel a { font-size: 22px; font-weight: 700; text-decoration: none; }
.mod_article form, .content-form form { background: var(--weiss); color: var(--text); border-radius: var(--radius); padding: 28px; }
.widget { margin-bottom: 14px; }
.widget label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--text); }
.widget input[type="text"], .widget input[type="email"], .widget input[type="tel"], .widget select, .widget textarea {
  width: 100%; font: inherit; padding: 10px 12px; min-height: 44px; border: 1px solid #9CA3AF; border-radius: 6px; background: var(--weiss); color: var(--text);
}
.widget input:focus, .widget select:focus, .widget textarea:focus { outline: 3px solid rgba(194, 65, 12, .3); border-color: var(--akzent); }
.widget-submit button, .submit { background: var(--akzent); color: var(--weiss); border: 0; font: inherit; font-weight: 700; padding: 14px 22px; border-radius: 6px; min-height: 44px; cursor: pointer; width: 100%; }
.widget-submit button:hover, .submit:hover { background: var(--akzent-dunkel); }

/* ---------- Fußbereich ---------- */
#footer { background: var(--dunkel-2); color: #D1D5DB; font-size: 14px; }
#footer .inside { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 24px; padding-top: 20px; padding-bottom: 20px; }
#footer a { color: #D1D5DB; }
#footer a:hover { color: var(--weiss); }
.fuss-links { display: flex; flex-wrap: wrap; gap: 18px; }

/* ---------- Brotkrumen ---------- */
.mod_breadcrumb ul { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; font-size: 14px; color: var(--text-3); }
.mod_breadcrumb li + li::before { content: "›"; margin-right: 6px; }
.mod_breadcrumb a { color: var(--text-3); }

/* ---------- Handy ---------- */
@media (max-width: 700px) {
  .mod_article.sec { padding-top: 48px; padding-bottom: 48px; }
  #header .inside { gap: 12px; }
  .mod_navigation ul.level_1 { gap: 0 16px; }
  .kopf-button { width: 100%; justify-content: center; }
}

/* ---------- Druck ---------- */
@media print {
  .topbar, #header .mod_navigation, .kopf-button, .btn { display: none !important; }
  .mod_article.sec { padding: 16px 0; background: none !important; color: #000 !important; }
}
/* ---------- Kopf Desktop ---------- */
@media (min-width: 1000px) {
  #header .inside { flex-wrap: nowrap; gap: 16px 28px; }
  .mod_navigation ul.level_1 { flex-wrap: nowrap; gap: 0 18px; }
  .mod_navigation ul.level_1 > li > a, .mod_navigation ul.level_1 > li > strong { font-size: 15px; white-space: nowrap; }
}.sec--dunkel .schritt p.nr { color: #FDBA74; }
.sec--grau .schritt p.nr { color: var(--akzent); }
/* ---------- Bilder ---------- */
.rte figure { margin: 0; }
.rte img { width: 100%; height: auto; display: block; }
.hero .bild img { height: clamp(260px, 32vw, 440px); object-fit: cover; border-radius: var(--radius); }
.karte .rte > figure:first-child { margin: -24px -24px 18px; }
.karte .rte > figure:first-child img { height: 220px; object-fit: cover; }
.foto-raster img { height: 320px; object-fit: cover; border-radius: var(--radius); }.mod_article.raster-2 > .bild img { max-height: 520px; object-fit: cover; border-radius: var(--radius); }
.karte .badge { margin-bottom: 4px; }
/* ---------- Handy Kopf ---------- */
@media (max-width: 700px) {
  .topbar__inner > .topbar__gruppe:first-child { display: none; }
  .topbar__inner { justify-content: center; }
  #header .inside { padding-top: 10px; padding-bottom: 12px; }
  .logo img { height: 40px; }
  .mod_navigation ul.level_1 > li > a, .mod_navigation ul.level_1 > li > strong { padding: 6px 0; font-size: 15px; }
}.bildtext { font-size: 14px; color: var(--text-3); margin: 8px 2px 0; }
/* ---------- Handy-Menü ---------- */
.menu-toggle { display: none; }
@media (max-width: 700px) {
  #header .inside { flex-wrap: wrap; align-items: center; }
  #header .logo { flex: 1 1 auto; }
  .menu-toggle { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 2px solid var(--text); border-radius: 6px; background: var(--weiss); color: var(--text); font: inherit; font-weight: 700; cursor: pointer; }
  .menu-toggle__icon, .menu-toggle__icon::before, .menu-toggle__icon::after { display: block; width: 18px; height: 2px; background: currentColor; position: relative; transition: transform .2s; }
  .menu-toggle__icon::before, .menu-toggle__icon::after { content: ""; position: absolute; left: 0; }
  .menu-toggle__icon::before { top: -6px; } .menu-toggle__icon::after { top: 6px; }
  .menu-offen .menu-toggle__icon { background: transparent; }
  .menu-offen .menu-toggle__icon::before { top: 0; transform: rotate(45deg); }
  .menu-offen .menu-toggle__icon::after { top: 0; transform: rotate(-45deg); }
  #header .mod_navigation { display: none; width: 100%; order: 3; }
  .menu-offen #header .mod_navigation { display: block; }
  .mod_navigation ul.level_1 { flex-direction: column; gap: 0; border-top: 1px solid var(--linie); }
  .mod_navigation ul.level_1 > li { border-bottom: 1px solid var(--linie); }
  .mod_navigation ul.level_1 > li > a, .mod_navigation ul.level_1 > li > strong { display: block; padding: 12px 4px; font-size: 17px; }
  .kopf-button { order: 4; }
}
/* ---------- Formular Zustimmung ---------- */
fieldset.checkbox_container { border: 0; padding: 0; margin: 0 0 14px; }
fieldset.checkbox_container label { display: inline; font-weight: 400; font-size: 14px; color: var(--text-2); }
fieldset.checkbox_container input { width: 18px; height: 18px; vertical-align: -3px; margin-right: 6px; accent-color: var(--akzent); }
/* ---------- WhatsApp-Streifen ---------- */
.mod_article.whatsapp { background: #E8F5EC; border-top: 1px solid #CDE8D5; border-bottom: 1px solid #CDE8D5; }
.whatsapp h2 { font-size: clamp(24px, 3vw, 30px); margin-bottom: .25em; }
.whatsapp p { color: var(--text-2); margin: 0; }
.whatsapp .knoepfe { justify-self: end; }
.whatsapp .knoepfe p:last-child { margin-top: 0; }
.whatsapp .knoepfe p:last-child a { background: #1F7A45; border-color: #1F7A45; }
.whatsapp .knoepfe p:last-child a:hover { background: #17603A; border-color: #17603A; }
@media (max-width: 700px) { .whatsapp .knoepfe { justify-self: start; } }#kontakt.mod_article, #article-6 { align-items: start; }

/* Bilder im Originalformat (nicht beschneiden) – ausser Kopfbereich */
.foto-raster, .mod_article.raster-2, .mod_article.raster-3, .mod_article.raster-4{align-items:start}
.foto-raster img{height:auto !important;object-fit:contain !important}
.karte .rte > figure:first-child img{height:auto !important;object-fit:contain !important}
.mod_article:not(.hero) > .bild img{height:auto !important;max-height:none !important;object-fit:contain !important}

/* Referenzen: alte Projekt-Einträge als Karten */
.ref-alt{display:flex;flex-direction:column}
.ref-alt > figure{order:-1;float:none !important;width:auto !important;margin:-24px -24px 16px !important;overflow:hidden;border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.ref-alt > figure img{width:100%;height:auto;display:block}
.ref-alt > h3{margin:0 0 6px}
.ref-alt .rte span{color:inherit !important;font-size:inherit !important;text-decoration:none !important}
.ref-alt .rte div{line-height:1.45}
.ref-alt .rte a{color:var(--akzent)}.ref-alt > figure figcaption{padding:8px 24px 0;font-size:.85rem;color:#666}
.sec .dachzeile, .voll .dachzeile{color:var(--akzent);font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:.8rem}/* Galerie: Querformate ans Ende sortieren */
.foto-raster > .quer, .foto-raster > .paar{order:5}/* Karten und Schritte in einer Reihe gleich hoch */
.mod_article > .karte, .mod_article > .schritt{align-self:stretch}/* Alte Seiten ohne neuen Abschnitt-Stil: Seitenabstand und lesbare Textbreite */
#main .mod_article:not(.sec){padding:56px max(24px, calc((100% - var(--breite)) / 2))}
#main .mod_article:not(.sec) > *:not(.content-gallery):not(.content-image){max-width:860px}
#main .mod_article:not(.sec) h1{margin-top:0}
@media (max-width:700px){ #main .mod_article:not(.sec){padding-top:32px;padding-bottom:32px} }/* Unterseiten: alter Inhalt unter neuem Kopf */
.alt-inhalt > :first-child > h1:first-child, .alt-inhalt > h1:first-child{display:none}
.alt-inhalt img{border-radius:var(--radius)}
.alt-inhalt figure{margin:8px 0 16px}
.alt-inhalt .media--right > figure{float:right;margin:4px 0 16px 24px;max-width:45%}
.alt-inhalt .media--left > figure{float:left;margin:4px 24px 16px 0;max-width:45%}
.alt-inhalt > *::after{content:"";display:table;clear:both}
@media (max-width:700px){ .alt-inhalt .media--right > figure, .alt-inhalt .media--left > figure{float:none;max-width:100%;margin:8px 0 16px} }/* Wärmepumpen-Kopf: Bild vollständig zeigen */
#article-167 .bild img{height:auto !important;object-fit:contain !important}/* Karten auf dunklem Hintergrund */
.sec--dunkel .karte{background:rgba(255,255,255,.06) !important;border:1px solid rgba(255,255,255,.18) !important}
.sec--dunkel .karte h3{color:#fff}
.sec--dunkel .karte p{color:#D1D5DB}/* Google-Maps: Laden erst nach Klick */
.karten-zustimmung{background:var(--hell);border:1px solid var(--linie);border-radius:var(--radius);padding:28px;max-width:860px}
.karten-zustimmung p{margin:0 0 12px}
.karten-zustimmung .karte-laden{background:var(--akzent);color:#fff;border:0;border-radius:var(--radius);padding:12px 20px;font-weight:700;cursor:pointer;margin-right:16px}
.karten-zustimmung .karte-laden:hover{filter:brightness(.92)}/* Rechtstexte */
.rechtstext > *{max-width:860px}
.rechtstext h2{font-size:22px;margin:32px 0 10px}
.rechtstext ul{padding-left:20px}/* Alte Inhalte: Code-Formatierung neutralisieren */
.alt-inhalt code, .alt-inhalt pre{font-family:inherit;font-size:inherit;background:none;padding:0;white-space:normal}

/* Aufklappbare Erklärungen (details) und Tabellen im Fließtext – z. B. COP/SCOP auf der Wärmepumpen-Seite */
.content-text details{border:1px solid var(--linie);border-radius:8px;margin:1rem 0;background:var(--weiss)}
.content-text details>summary{cursor:pointer;padding:.85rem 1.1rem;font-weight:600;color:var(--akzent);list-style:none;position:relative;padding-right:2.5rem}
.content-text details>summary::-webkit-details-marker{display:none}
.content-text details>summary::after{content:"+";position:absolute;right:1.1rem;top:50%;transform:translateY(-50%);font-size:1.4rem;line-height:1}
.content-text details[open]>summary::after{content:"–"}
.content-text details[open]>summary{border-bottom:1px solid var(--linie)}
.content-text details>*:not(summary){margin-left:1.1rem;margin-right:1.1rem}
.content-text details>*:last-child{margin-bottom:1rem}
.content-text details>table{width:calc(100% - 2.2rem)}
.content-text table{width:100%;border-collapse:collapse;margin:.75rem 0;font-size:.95em}
.content-text th,.content-text td{text-align:left;padding:.5rem .6rem;border-bottom:1px solid var(--linie);vertical-align:top}
.content-text th{background:var(--hell);font-weight:600}
.content-text td:nth-child(2){font-weight:600;white-space:nowrap}
@media (max-width:600px){.content-text table{font-size:.85em}.content-text th,.content-text td{padding:.4rem}}
.content-text figure.diagramm{margin:1rem 1.1rem 1.25rem}
.content-text figure.diagramm img{display:block;width:100%;max-width:760px;height:auto;margin:0 auto}
.content-text figure.diagramm figcaption{font-size:.85em;color:#6B7280;margin-top:.4rem;line-height:1.4}


/* Wärmepumpen-Seite: dritter Knopf (Fragebogen PDF) unter "Angebot anfragen" */
.knoepfe p:last-child:has(.knopf-pdf){display:grid;grid-template-columns:auto auto;justify-content:start}
.knoepfe p:last-child a.knopf-pdf{background:var(--akzent);border-color:var(--akzent);color:#fff !important;justify-content:center}
.knoepfe p:last-child a.knopf-pdf:hover{background:var(--akzent-dunkel);border-color:var(--akzent-dunkel)}
.knoepfe p:last-child:has(.knopf-pdf) a:first-child{justify-content:center}
@media (max-width:520px){.knoepfe p:last-child:has(.knopf-pdf){grid-template-columns:1fr}}