/*
 * PHT Energietechnik – Website-Rahmen und Website-Komponenten (Stand 03.10.2026)
 * Lädt NACH /assets/pv/css/pht-pv.css. Die Inhaltskomponenten (pv-…) stammen aus der PV-Seite und gelten
 * auf allen Seiten; hier: Header/Navigation, Footer, Consent, mobile Leiste (Klassen wie bisher, main.js bleibt)
 * und zusätzliche Bausteine mit Präfix sx-.
 * Teil 1 übernimmt die Header-/Consent-/Leisten-Stile der bisherigen styles.css (Stand 03.10.2026).
 */
/* ---------- Basis (übliche globale Regeln, vereinfacht) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--font-main); color: var(--ink); background: #f7fafb; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; display: block; }

/* ---------- :root ---------- */
:root {
  --font-main: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --brand-danger: #b42318;
  --brand-cta-gradient: linear-gradient(135deg, #0b2d47 0%, #1f6387 58%, #0f766e 100%);
  --brand-icon-gradient: linear-gradient(135deg, #0b2d47 0%, #2a6f94 58%, #0f766e 100%);
}
:root {
  --brand-primary: #0f2b46;
  --brand-primary-2: #173f60;
  --brand-secondary: #0f6f8f;
  --brand-secondary-soft: #dff1f6;
  --brand-accent: #d98b16;
  --brand-accent-soft: #f1b84b;
  --brand-success: #147a5b;
  --ink: #10283f;
  --muted: #5c7182;
  --dark: #102c45;
  --dark-2: #173f60;
  --dark-3: #245677;
  --white: #ffffff;
  --paper: #f5f8fa;
  --soft: #edf4f7;
  --line: rgba(16, 40, 63, .12);
  --line-light: rgba(255, 255, 255, .4);
  --red: var(--brand-accent);
  --red-dark: #a75f06;
  --orange: var(--brand-accent-soft);
  --amber: #f4cb72;
  --green: var(--brand-success);
  --blue: var(--brand-secondary);
  --shadow: 0 28px 78px rgba(23, 63, 96, .16);
  --shadow-soft: 0 14px 40px rgba(23, 63, 96, .09);
  --radius-xl: 30px;
  --radius-lg: 22px;
  --radius-md: 17px;
  --radius-sm: 12px;
  --container: 1240px;
}
.container { width: min(var(--container), calc(100% - 40px)); margin: 0 auto; }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; border-radius: 999px; min-height: 52px; padding: 14px 20px; border: 1px solid transparent; font-weight: 900; letter-spacing: -0.015em; transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease; font: inherit; font-weight: 900; cursor: pointer; }
.btn:hover { transform: translateY(-2px); }
@media (max-width: 760px) {
  .btn { min-height: 50px; padding: 13px 16px; font-size: 15px; }
}
.btn-primary { color: #fff; background: linear-gradient(135deg, #c8750b, #e6a42f); box-shadow: 0 16px 38px rgba(217, 139, 22, .25); }
.btn-primary:hover { box-shadow: 0 20px 44px rgba(217, 139, 22, .32); }
.btn-secondary { color: #123149; border-color: rgba(16, 40, 63, .14); background: rgba(255, 255, 255, .92); box-shadow: 0 10px 25px rgba(16, 40, 63, .07); }
.btn-secondary:hover { background: #fff; }
.btn-outline { color: #123149; border-color: rgba(16, 40, 63, .2); background: transparent; }
.consent-banner__actions .btn { min-height: 46px; white-space: nowrap; }
@media (max-width: 780px) { .consent-banner__actions .btn { width: 100%; } }

/* ---------- Header: Schicht A ---------- */
.site-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; border-bottom: 1px solid rgba(255, 255, 255, 0.10); background: linear-gradient(180deg, rgba(7, 11, 20, .72), rgba(7, 11, 20, .26)); transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
.site-header.is-scrolled, .site-header.has-bg { background: rgba(7, 11, 20, 0.92); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 16px 46px rgba(2, 8, 23, 0.24); border-color: rgba(255, 255, 255, 0.10); }
.header-inner { display: flex; align-items: center; justify-content: space-between; min-height: 92px; gap: 18px; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; padding: 8px 12px; border-radius: 18px; background: rgba(255, 255, 255, 0.97); border: 1px solid rgba(255, 255, 255, 0.70); box-shadow: 0 12px 36px rgba(2, 8, 23, 0.20); }
.brand picture { display: block; line-height: 0; }
.brand img { width: clamp(174px, 15vw, 238px); height: auto; }
.nav-wrap { display: flex; align-items: center; justify-content: center; flex: 1 1 auto; min-width: 0; }
.main-nav { display: flex; align-items: center; gap: 6px; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 999px; padding: 6px; background: rgba(7, 11, 20, 0.42); box-shadow: 0 14px 42px rgba(2, 8, 23, 0.12); }
.site-header.is-scrolled .main-nav, .site-header.has-bg .main-nav { background: rgba(255, 255, 255, 0.08); border-color: rgba(255, 255, 255, 0.14); }
.nav-item { position: relative; display: inline-flex; }
.nav-item.has-dropdown::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 18px; }
.nav-link, .nav-button { appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 10px 15px; border-radius: 999px; border: 0; background: transparent; color: rgba(255, 255, 255, .94); font-size: 14px; font-weight: 860; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
button.nav-button { cursor: pointer; font-family: inherit; }
.nav-button::after { content: ""; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .75; transition: transform .18s ease; }
.has-dropdown:hover > .nav-button::after, .has-dropdown.is-open > .nav-button::after { transform: translateY(1px) rotate(225deg); }
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"], .nav-link[data-current="true"] { outline: none; color: #fff; background: rgba(255, 255, 255, .14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transform: translateY(-1px); }
.nav-link[aria-current="page"], .nav-link[data-current="true"] { background: linear-gradient(135deg, rgba(180, 83, 9, .82), rgba(233, 163, 58, .72)); }
.dropdown { position: absolute !important; top: calc(100% + 14px); left: 50%; z-index: 1002; width: min(760px, calc(100vw - 40px)); display: none; padding: 16px; border-radius: 28px; color: #fff; background: radial-gradient(circle at 14% 12%, rgba(233, 163, 58, .18), transparent 28%), radial-gradient(circle at 86% 8%, rgba(180, 83, 9, .14), transparent 26%), rgba(8, 13, 23, .97); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.38); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); transform: translateX(-50%); }
.dropdown::before { content: ""; position: absolute; top: -8px; left: 50%; width: 16px; height: 16px; transform: translateX(-50%) rotate(45deg); background: rgba(8, 13, 23, .97); border-left: 1px solid rgba(255,255,255,.12); border-top: 1px solid rgba(255,255,255,.12); }
.dropdown-right { left: auto; right: 0; transform: none; }
.dropdown-right::before { left: auto; right: 34px; transform: rotate(45deg); }
.dropdown-small { width: min(500px, calc(100vw - 40px)); }
.has-dropdown:hover > .dropdown, .has-dropdown.is-open > .dropdown { display: block; }
.dropdown-header { display: grid; gap: 3px; padding: 2px 4px 13px; margin-bottom: 12px; border-bottom: 1px solid rgba(255, 255, 255, .10); }
.dropdown-header strong { color: #fff; font-size: 15px; line-height: 1.2; letter-spacing: -0.02em; }
.dropdown-header span { color: rgba(255, 255, 255, .66); font-size: 13px; line-height: 1.35; }
.dropdown-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.dropdown-list { display: grid; gap: 9px; }
.menu-card, .menu-row { color: #fff; border: 1px solid rgba(255, 255, 255, .10); background: rgba(255, 255, 255, .07); transition: background .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease; }
.menu-card { display: grid; align-content: start; gap: 7px; min-height: 148px; padding: 15px; border-radius: 20px; }
.menu-row { display: grid; gap: 3px; padding: 14px 15px; border-radius: 18px; }
.menu-card:hover, .menu-card:focus-visible, .menu-card[aria-current="page"], .menu-row:hover, .menu-row:focus-visible, .menu-row[aria-current="page"] { outline: none; background: rgba(255, 255, 255, .13); border-color: rgba(233, 163, 58, .42); box-shadow: 0 16px 34px rgba(0, 0, 0, .18); transform: translateY(-2px); }
.menu-card[aria-current="page"], .menu-row[aria-current="page"] { background: linear-gradient(135deg, rgba(180, 83, 9, .42), rgba(233, 163, 58, .22)); }
.menu-kicker { color: #f2c663; font-size: 11px; font-weight: 920; line-height: 1.1; text-transform: uppercase; letter-spacing: .08em; }
.menu-card strong, .menu-row strong { color: #fff; font-size: 15px; line-height: 1.17; letter-spacing: -0.025em; }
.menu-card em, .menu-row span { color: rgba(255, 255, 255, .68); font-style: normal; font-size: 13px; line-height: 1.35; }
.dropdown-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 4px 0; border-top: 1px solid rgba(255, 255, 255, .10); color: rgba(255, 255, 255, .68); font-size: 13px; }
.dropdown-footer a { color: #fff; font-weight: 880; }
.dropdown-footer a:hover { color: #f2c663; }
.header-cta { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 11px 18px; color: #fff; font-weight: 900; font-size: 14px; line-height: 1.15; border-radius: 999px; background: linear-gradient(135deg, var(--red), var(--orange)); box-shadow: 0 14px 30px rgba(180, 83, 9, .32); transition: transform .2s ease, box-shadow .2s ease; }
.header-cta:hover { transform: translateY(-2px); box-shadow: 0 18px 40px rgba(180, 83, 9, .40); }
.menu-toggle { display: none; border: 0; background: rgba(255, 255, 255, .14); color: #fff; width: 46px; height: 46px; border-radius: 999px; align-items: center; justify-content: center; position: relative; }
.menu-toggle span, .menu-toggle span::before, .menu-toggle span::after { width: 20px; height: 2px; background: currentColor; border-radius: 999px; display: block; transition: .22s ease; }
.menu-toggle span::before, .menu-toggle span::after { content: ""; position: absolute; left: 13px; }
.menu-toggle span::before { transform: translateY(-7px); }
.menu-toggle span::after { transform: translateY(7px); }
body.menu-open .menu-toggle span { background: transparent; }
body.menu-open .menu-toggle span::before { transform: rotate(45deg); }
body.menu-open .menu-toggle span::after { transform: rotate(-45deg); }
@media (max-width: 1120px) {
  .header-cta { display: none; }
}
@media (max-width: 980px) {
  .site-header { background: rgba(7, 11, 20, .94); }
  .header-inner, .site-header.is-scrolled .header-inner { min-height: 78px; }
  .menu-toggle { display: inline-flex; flex: 0 0 auto; }
  .nav-wrap { position: fixed; inset: 0; display: grid; align-content: start; gap: 18px; padding: 102px 20px 30px; background: rgba(7, 11, 20, .98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); transform: translateX(100%); transition: transform .25s ease; overflow: auto; }
  body.menu-open .nav-wrap { transform: translateX(0); }
  .main-nav { display: grid; align-items: stretch; gap: 8px; width: min(100%, 620px); justify-self: center; border-radius: 28px; padding: 12px; background: rgba(255,255,255,.08) !important; border-color: rgba(255,255,255,.12) !important; box-shadow: none; }
  .nav-item { display: grid; align-items: stretch; width: 100%; }
  .nav-item.has-dropdown::after { display: none; }
  .nav-link, .nav-button { color: #fff !important; padding: 14px 16px; border-radius: 16px; font-size: 17px; width: 100%; justify-content: space-between; }
  .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"], .nav-link[data-current="true"], .has-dropdown.is-open > .nav-button { background: rgba(255,255,255,.12) !important; color: #fff !important; }
  .dropdown, .dropdown-mega, .dropdown-small, .dropdown-right { position: static !important; inset: auto !important; width: 100%; display: none; gap: 10px; margin: 4px 0 10px; padding: 12px; transform: none !important; background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.10); border-radius: 24px; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .has-dropdown.is-open > .dropdown { display: grid; }
  .has-dropdown:hover > .dropdown { display: none; }
  .has-dropdown.is-open:hover > .dropdown { display: grid; }
  .dropdown::before { display: none; }
  .dropdown-header { margin-bottom: 0; padding: 4px 4px 12px; }
  .dropdown-grid { grid-template-columns: 1fr; gap: 8px; }
  .dropdown-list { gap: 8px; }
  .menu-card { min-height: 0; gap: 5px; padding: 12px; border-radius: 18px; background: rgba(255,255,255,.05); }
  .menu-row { padding: 12px; border-radius: 18px; background: rgba(255,255,255,.05); }
  .menu-card strong, .menu-row strong { font-size: 14px; }
  .menu-card em, .menu-row span { color: rgba(255,255,255,.70); }
  .dropdown-footer { align-items: flex-start; flex-direction: column; gap: 5px; margin-top: 0; padding-top: 10px; }
  .site-header.has-bg .menu-toggle { color: #fff; background: rgba(255,255,255,.14); }
}
@media (max-width: 760px) {
  .header-inner { min-height: 72px; }
  .brand { padding: 7px 10px; border-radius: 15px; }
  .brand img { width: 172px; }
}

/* ---------- Header: Schicht B ---------- */
.site-header { background: linear-gradient(180deg, rgba(7, 24, 39, .84), rgba(7, 24, 39, .44)); border-bottom-color: rgba(255, 255, 255, .12); }
.site-header.is-scrolled, .site-header.has-bg { background: rgba(7, 24, 39, .94); border-color: rgba(255, 255, 255, .12); box-shadow: 0 16px 46px rgba(7, 24, 39, .24); }
.brand { box-shadow: 0 12px 36px rgba(7, 24, 39, .22); }
.main-nav { background: rgba(7, 24, 39, .48); }
.site-header.is-scrolled .main-nav, .site-header.has-bg .main-nav { background: rgba(255, 255, 255, .09); }
.nav-link[aria-current="page"], .nav-link[data-current="true"] { background: linear-gradient(135deg, var(--brand-primary-2), var(--brand-secondary)); }
.nav-link:hover, .nav-link:focus-visible { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .11); }
.dropdown { background: radial-gradient(circle at 14% 12%, rgba(233, 163, 58, .13), transparent 30%), radial-gradient(circle at 86% 8%, rgba(31, 95, 139, .18), transparent 30%), rgba(9, 29, 49, .985); box-shadow: 0 30px 90px rgba(7, 24, 39, .40); }
.dropdown::before { background: rgba(9, 29, 49, .985); }
.menu-kicker { color: #f3c46e; }
.menu-card-highlight, .menu-card[aria-current="page"], .menu-row[aria-current="page"] { background: linear-gradient(135deg, rgba(31, 95, 139, .44), rgba(180, 83, 9, .22)); }
.menu-card:hover, .menu-card:focus-visible, .menu-row:hover, .menu-row:focus-visible { border-color: rgba(233, 163, 58, .42); }
.dropdown-footer a:hover { color: #f3c46e; }
@media (max-width: 980px) {
  .site-header, .site-header.is-scrolled, .site-header.has-bg { background: rgba(7, 24, 39, .98) !important; border-bottom-color: rgba(255, 255, 255, .12) !important; box-shadow: 0 14px 32px rgba(7, 24, 39, .22) !important; }
  .brand, .menu-toggle { position: relative; z-index: 1004; }
  .menu-toggle { display: inline-flex !important; color: #fff !important; background: var(--brand-primary-2) !important; border: 1px solid rgba(255, 255, 255, .18) !important; box-shadow: 0 12px 28px rgba(0, 0, 0, .22) !important; }
  .nav-wrap { inset: 78px 0 0 0 !important; padding: 18px 16px 28px !important; background: var(--paper) !important; color: var(--ink) !important; z-index: 1001; }
  .main-nav { background: #fff !important; border-color: rgba(18, 32, 51, .10) !important; box-shadow: 0 18px 46px rgba(7, 24, 39, .13) !important; }
  .nav-link, .nav-button { color: var(--ink) !important; background: #f1f5f9 !important; border: 1px solid rgba(18, 32, 51, .07) !important; }
  .nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"], .nav-link[data-current="true"], .has-dropdown.is-open > .nav-button { color: #fff !important; background: linear-gradient(135deg, var(--brand-primary-2), var(--brand-secondary)) !important; border-color: transparent !important; }
  .dropdown, .dropdown-mega, .dropdown-small, .dropdown-right { background: #ffffff !important; color: var(--ink) !important; border-color: rgba(18, 32, 51, .10) !important; }
  .dropdown::before { background: #ffffff !important; }
  .dropdown-header { border-bottom-color: rgba(18, 32, 51, .10) !important; }
  .dropdown-header strong, .menu-card strong, .menu-row strong { color: var(--ink) !important; }
  .dropdown-header span, .menu-card em, .menu-row span { color: #64748b !important; }
  .menu-kicker { color: #92500c !important; }
  .menu-card, .menu-row { color: var(--ink) !important; background: #f8fafc !important; border-color: rgba(18, 32, 51, .09) !important; }
  .menu-card:hover, .menu-card:focus-visible, .menu-row:hover, .menu-row:focus-visible, .menu-card[aria-current="page"], .menu-row[aria-current="page"] { background: #edf4f8 !important; border-color: rgba(31, 95, 139, .22) !important; box-shadow: none !important; }
  .dropdown-footer { color: #64748b !important; border-top-color: rgba(18, 32, 51, .10) !important; }
  .dropdown-footer a { color: var(--brand-secondary) !important; }
}
@media (max-width: 760px) {
  .nav-wrap { inset: 72px 0 0 0 !important; }
}
.main-nav { gap: 5px; }
.nav-link, .nav-button { padding-inline: 13px; }
@media (max-width: 1180px) {
  .nav-link, .nav-button { padding-inline: 11px; font-size: 13px; }
  .brand img { width: clamp(162px, 14vw, 210px); }
}
@media (max-width: 980px) {
  .nav-link, .nav-button { font-size: 17px; padding: 14px 16px; }
}

/* ---------- Header: Schicht C (Mobilmenü ≤ 1100 px) ---------- */
.mobile-menu-actions { display: none; }
@media (max-width: 1100px) {
  .site-header, .site-header.is-scrolled, .site-header.has-bg { z-index: 6000 !important; }
  body.menu-open .site-header { height: 100dvh !important; min-height: 100dvh !important; overflow: hidden !important; background: #071827 !important; }
  .header-inner { width: min(100% - 28px, var(--container)); }
  .nav-wrap { position: absolute !important; inset: 78px 0 0 0 !important; z-index: 6001 !important; display: flex !important; flex-direction: column; align-items: stretch; gap: 14px; height: calc(100dvh - 78px) !important; min-height: 0 !important; padding: 16px 16px calc(28px + env(safe-area-inset-bottom)) !important; overflow-y: auto !important; overflow-x: hidden !important; -webkit-overflow-scrolling: touch; background: radial-gradient(circle at 8% 0%, rgba(31, 95, 139, .16), transparent 34%), linear-gradient(180deg, #f8fafc 0%, #edf4f8 100%) !important; color: var(--ink) !important; transform: translateY(-10px) !important; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .22s ease, transform .22s ease, visibility .22s ease; border-top: 1px solid rgba(255, 255, 255, .16); }
  body.menu-open .nav-wrap { transform: translateY(0) !important; opacity: 1; visibility: visible; pointer-events: auto; }
  .main-nav { width: min(100%, 680px) !important; max-width: 680px; margin: 0 auto; display: grid !important; align-items: stretch !important; gap: 10px !important; padding: 12px !important; border-radius: 26px !important; background: #ffffff !important; border: 1px solid rgba(18, 32, 51, .10) !important; box-shadow: 0 18px 50px rgba(7, 24, 39, .12) !important; }
  .nav-item, .nav-item.has-dropdown { display: grid !important; width: 100% !important; }
  .nav-link, .nav-button { min-height: 54px !important; width: 100% !important; justify-content: space-between !important; padding: 14px 16px !important; border-radius: 18px !important; color: var(--ink) !important; background: #f3f7fa !important; border: 1px solid rgba(18, 32, 51, .08) !important; font-size: 16px !important; font-weight: 920 !important; line-height: 1.2 !important; box-shadow: none !important; transform: none !important; }
  .nav-link[aria-current="page"], .nav-link[data-current="true"], .nav-link:hover, .nav-link:focus-visible, .has-dropdown.is-open > .nav-button { color: #fff !important; background: linear-gradient(135deg, var(--brand-primary-2), var(--brand-secondary)) !important; border-color: transparent !important; }
  .dropdown, .dropdown-mega, .dropdown-small, .dropdown-right { position: static !important; inset: auto !important; width: 100% !important; display: none !important; margin: 8px 0 4px !important; padding: 12px !important; transform: none !important; border-radius: 22px !important; background: #ffffff !important; border: 1px solid rgba(18, 32, 51, .10) !important; box-shadow: inset 0 0 0 1px rgba(255,255,255,.60) !important; color: var(--ink) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .dropdown::before, .nav-item.has-dropdown::after { display: none !important; }
  .has-dropdown:hover > .dropdown { display: none !important; }
  .has-dropdown.is-open > .dropdown, .has-dropdown.is-open:hover > .dropdown { display: grid !important; }
  .dropdown-header { padding: 4px 4px 10px !important; margin-bottom: 8px !important; border-bottom: 1px solid rgba(18, 32, 51, .08) !important; }
  .dropdown-grid, .dropdown-list { grid-template-columns: 1fr !important; gap: 8px !important; }
  .menu-card, .menu-row { min-height: 0 !important; padding: 13px !important; border-radius: 17px !important; background: #f8fafc !important; color: var(--ink) !important; border-color: rgba(18, 32, 51, .08) !important; box-shadow: none !important; transform: none !important; }
  .menu-card strong, .menu-row strong { color: var(--ink) !important; font-size: 15px !important; }
  .menu-card em, .menu-row span, .dropdown-header span { color: #64748b !important; }
  .menu-kicker { color: #92500c !important; }
  .dropdown-footer { align-items: flex-start !important; flex-direction: column !important; gap: 6px !important; padding-top: 10px !important; color: #64748b !important; border-top-color: rgba(18, 32, 51, .08) !important; }
  .dropdown-footer a { color: var(--brand-secondary) !important; }
  .mobile-menu-actions { display: grid; gap: 10px; width: min(100%, 680px); margin: 0 auto; padding: 16px; border-radius: 24px; background: #ffffff; border: 1px solid rgba(18, 32, 51, .10); box-shadow: 0 18px 50px rgba(7, 24, 39, .10); }
  .mobile-menu-actions p { margin: 0; color: var(--brand-primary-2); font-size: 14px; font-weight: 950; }
  .mobile-menu-actions > div { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .mobile-menu-actions .btn { min-height: 48px; padding: 12px 14px; font-size: 14px; }
  .mobile-menu-actions .btn-primary { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .header-inner, .site-header.is-scrolled .header-inner { min-height: 72px !important; }
  body.menu-open .site-header { height: 100dvh !important; }
  .nav-wrap { inset: 72px 0 0 0 !important; height: calc(100dvh - 72px) !important; padding: 14px 14px calc(24px + env(safe-area-inset-bottom)) !important; }
  .brand { padding: 6px 9px !important; border-radius: 14px !important; }
  .brand img { width: 152px !important; }
  .menu-toggle { width: 48px !important; height: 48px !important; }
}
@media (max-width: 420px) {
  .mobile-menu-actions > div { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .brand { max-width: 184px !important; overflow: hidden; }
  .brand img { max-width: 100% !important; max-height: 42px !important; object-fit: contain; }
  .mobile-menu-actions .btn { width: 100% !important; max-width: 100% !important; min-width: 0 !important; white-space: normal !important; text-align: center; line-height: 1.22; }
}
.site-header { z-index: 1000 }
.brand img { height: auto; max-height: 54px; object-fit: contain }
.main-nav { gap: .25rem }
.nav-link { white-space: nowrap }
.language-button { min-width: 62px }
.dropdown-language { min-width: 230px }
@media (max-width: 1180px) {
  .main-nav { font-size: .88rem }
  .header-cta { display: none }
}
@media (max-width: 1100px) {
  .nav-wrap { overflow-y: auto }
  .language-menu { width: 100% }
  .dropdown-language { min-width: 0 }
}

/* ---------- Header: Schicht D (aktuell sichtbarer heller Header) ---------- */
.site-header, .site-header.is-scrolled, .site-header.has-bg { color: var(--ink); border-bottom: 1px solid rgba(16, 40, 63, .10); background: rgba(255, 255, 255, .94); box-shadow: 0 10px 34px rgba(16, 40, 63, .07); backdrop-filter: blur(18px) saturate(1.12); -webkit-backdrop-filter: blur(18px) saturate(1.12); }
.header-inner { min-height: 84px; }
.brand { padding: 8px 10px; border: 1px solid rgba(16, 40, 63, .09); background: #fff; box-shadow: 0 10px 28px rgba(16, 40, 63, .08); }
.brand img { width: clamp(170px, 14vw, 225px); }
.main-nav, .site-header.is-scrolled .main-nav, .site-header.has-bg .main-nav { border-color: rgba(16, 40, 63, .09); background: #f3f7f9; box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 8px 24px rgba(16, 40, 63, .05); }
.nav-link, .nav-button { color: #25465d; }
.nav-link:hover, .nav-link:focus-visible, .nav-link[aria-current="page"], .nav-link[data-current="true"] { color: #0d2a42; background: #fff; box-shadow: 0 7px 18px rgba(16, 40, 63, .08), inset 0 0 0 1px rgba(16, 40, 63, .06); }
.nav-link[aria-current="page"], .nav-link[data-current="true"] { color: #fff; background: linear-gradient(135deg, #123a58, #0f6f8f); box-shadow: 0 10px 24px rgba(15, 111, 143, .22); }
.header-cta { color: #fff; background: linear-gradient(135deg, #c8750b, #e6a42f); box-shadow: 0 12px 28px rgba(217, 139, 22, .24); }
.header-cta:hover { box-shadow: 0 16px 34px rgba(217, 139, 22, .31); }
.menu-toggle { color: var(--brand-primary); border: 1px solid rgba(16, 40, 63, .12); background: #f1f6f8; }
.dropdown { color: var(--ink); border: 1px solid rgba(16, 40, 63, .12); background: radial-gradient(circle at 8% 8%, rgba(15,111,143,.07), transparent 15rem), rgba(255, 255, 255, .985); box-shadow: 0 28px 72px rgba(16, 40, 63, .18); }
.dropdown::before { background: #fff; border-left-color: rgba(16, 40, 63, .12); border-top-color: rgba(16, 40, 63, .12); }
.dropdown-header { border-bottom-color: rgba(16, 40, 63, .09); }
.dropdown-header strong { color: #123149; }
.dropdown-header span { color: #667d8e; }
.menu-card, .menu-row { color: var(--ink); border-color: rgba(16, 40, 63, .09); background: #f7fafb; }
.menu-card:hover, .menu-card:focus-visible, .menu-card[aria-current="page"], .menu-row:hover, .menu-row:focus-visible, .menu-row[aria-current="page"] { background: #fff; border-color: rgba(15, 111, 143, .28); box-shadow: 0 12px 26px rgba(16, 40, 63, .09); }
.menu-card[aria-current="page"], .menu-row[aria-current="page"] { background: #eef7fa; }
.menu-kicker { color: #a75f06; }
.menu-card strong, .menu-row strong { color: #123149; }
.menu-card em, .menu-row span { color: #617888; }
.dropdown-footer { color: #667d8e; border-top-color: rgba(16, 40, 63, .09); }
.dropdown-footer a { color: #0f5f7b; }
.dropdown-footer a:hover { color: #9b5906; }
@media (max-width: 1100px) {
  .site-header, .site-header.is-scrolled, .site-header.has-bg { background: rgba(255,255,255,.98); }
  .nav-wrap { background: #fff; }
  .main-nav { background: transparent; border-color: transparent; box-shadow: none; }
  .nav-link, .nav-button { color: #173f60; }
  .nav-link:hover, .nav-link:focus-visible { background: #f1f6f8; }
  .dropdown { box-shadow: none; background: #f6fafb; }
  .menu-toggle { display: inline-flex; }
}
.menu-toggle > span { position: relative; width: 20px; height: 2px; display: block; border-radius: 999px; background: currentColor; transition: background .22s ease; }
.menu-toggle > span::before, .menu-toggle > span::after { content: ""; position: absolute; left: 0; top: 0; width: 20px; height: 2px; display: block; border-radius: 999px; background: currentColor; transition: transform .22s ease; }
.menu-toggle > span::before { transform: translateY(-7px); }
.menu-toggle > span::after { transform: translateY(7px); }
body.menu-open .menu-toggle > span { background: transparent; }
body.menu-open .menu-toggle > span::before { transform: rotate(45deg); }
body.menu-open .menu-toggle > span::after { transform: rotate(-45deg); }
@media (max-width: 1100px) {
  .header-inner, .site-header.is-scrolled .header-inner { min-height: 78px !important; }
  body.menu-open .site-header, body.menu-open .site-header.is-scrolled, body.menu-open .site-header.has-bg { background: #fff !important; }
  .mobile-menu-actions { display: grid; }
  .mobile-menu-actions .btn-secondary { color: #123149; border-color: rgba(16, 40, 63, .14); background: #f1f6f8; }
}
@media (max-width: 780px) {
  .header-inner, .site-header.is-scrolled .header-inner { min-height: 72px !important; }
  .nav-wrap { inset: 72px 0 0 0 !important; height: calc(100dvh - 72px) !important; }
}
@media (max-width: 420px) {
  .brand { max-width: calc(100% - 64px) !important; }
  .brand img { width: min(152px, 100%) !important; }
}

/* ---------- Schicht E: mobile Bottom-Leiste ---------- */
.mobile-cta-bar { display: none; }
@media (max-width: 1100px) {
  .mobile-cta-bar { position: fixed; z-index: 950; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); background: rgba(255, 255, 255, .96); box-shadow: 0 -12px 32px rgba(7, 24, 39, .10); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .mobile-cta-bar__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: 52px; padding: 6px 4px; border-radius: 14px; background: var(--soft); color: var(--brand-primary); font-size: .76rem; font-weight: 800; line-height: 1.15; text-align: center; text-decoration: none; }
  .mobile-cta-bar__item svg { width: 20px; height: 20px; fill: currentColor; }
  .mobile-cta-bar__item--primary { background: var(--brand-cta-gradient, var(--brand-primary)); color: #fff; }
  .mobile-cta-bar__item:focus-visible { outline: 3px solid #b67710; outline-offset: 2px; }
  body.menu-open .mobile-cta-bar, body.consent-visible .mobile-cta-bar { display: none; }
}

/* ---------- Consent-Banner ---------- */
.consent-banner { position: fixed; z-index: 5000; inset: auto 0 0; padding: 14px; background: rgba(5, 20, 33, .72); backdrop-filter: blur(12px); opacity: 0; transform: translateY(18px); transition: opacity .18s ease, transform .18s ease; }
.consent-banner[hidden] { display: none; }
/* Consent-Banner: Sichtbarkeit und Karte (Korrektur 03.11.2026) */
.consent-banner.is-visible { opacity: 1; transform: translateY(0); }
.consent-banner__inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 20px; align-items: center; width: min(1180px, 100%); margin: 0 auto; padding: 20px; border: 1px solid rgba(255, 255, 255, .16); border-radius: 22px; background: #fff; box-shadow: 0 22px 70px rgba(0, 0, 0, .28); }
.consent-banner__copy strong { display: block; margin-bottom: 5px; color: var(--ink); font-size: 18px; }
.consent-banner__copy p { margin: 0; max-width: 760px; color: var(--muted); font-size: 14px; line-height: 1.55; }
.consent-banner__copy a { color: var(--brand-secondary); font-weight: 850; }
.consent-banner__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; }
@media (max-width: 780px) {
  .consent-banner { padding: 8px; }
  .consent-banner__inner { grid-template-columns: 1fr; gap: 14px; padding: 17px; border-radius: 17px; }
  .consent-banner__actions { display: grid; grid-template-columns: 1fr; }
}

/* ---------- Druck ---------- */
@media print {
  .site-header, .site-footer, .mobile-cta-bar, .consent-banner { display: none !important; }
}

/* =====================================================================
   Teil 2 – Website-Erweiterungen (neu, Oktober 2026)
   ===================================================================== */

.sx-body { margin: 0; background: var(--pv-body); color: var(--pv-text); }
.mobile-cta-bar__item .pv-i { width: 21px; height: 21px; fill: none; stroke: currentColor; }
.menu-card-highlight { border-color: rgba(217, 139, 22, .45) !important; }
.sx-menu-spezial { opacity: .92; }
@media (min-width: 1101px) { .dropdown-mega .dropdown-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* ---------- Seitenkopf Unterseiten ---------- */
.sx-kopf { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--pv-navy); padding: calc(var(--pv-header-h) + clamp(40px, 7vw, 88px)) 0 clamp(44px, 7vw, 84px); min-height: min(78svh, 720px); display: flex; align-items: flex-end; }
.sx-kopf--kurz { min-height: 0; }
.sx-kopf__bild { position: absolute; inset: 0; z-index: -2; }
.sx-kopf__bild img { width: 100%; height: 100%; object-fit: cover; animation: pv-zoom 18s ease-out forwards; transform-origin: 55% 45%; }
.sx-kopf::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(8, 25, 41, .9) 0%, rgba(8, 25, 41, .66) 50%, rgba(8, 25, 41, .25) 100%), linear-gradient(180deg, rgba(8, 25, 41, .45), rgba(8, 25, 41, 0) 35%, rgba(8, 25, 41, .55)); }
.sx-kopf__inhalt { position: relative; }
.sx-kopf__titel { font-size: clamp(2.3rem, 6vw, 4.6rem); line-height: 1; font-weight: 950; letter-spacing: -0.05em; color: #fff; max-width: 920px; text-wrap: balance; margin: 0; }
.sx-kopf__titel small { display: block; margin-top: 14px; font-size: clamp(1.02rem, 1.9vw, 1.35rem); line-height: 1.3; font-weight: 750; letter-spacing: -0.015em; color: rgba(255, 255, 255, .9); }
.sx-kopf__lead { margin: 18px 0 0; max-width: 680px; font-size: clamp(1.02rem, 1.45vw, 1.18rem); color: var(--pv-text-hell); }
.sx-kopf .sx-knoepfe { margin-top: 28px; }
.sx-brotkrumen { font-size: .86rem; color: rgba(255, 255, 255, .72); margin-bottom: 18px; }
.sx-brotkrumen a { color: inherit; text-decoration: none; }
.sx-brotkrumen a:hover { color: #fff; text-decoration: underline; }
.sx-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: inherit; }
.pv-cta-band .sx-knoepfe { justify-content: center; }
@media (max-width: 480px) { .sx-knoepfe .pv-btn { width: 100%; } }
.sx-tel { color: #fff; font-weight: 850; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; }
.sx-tel:hover { color: var(--pv-amber-hell); }

/* ---------- Startseiten-Hero ---------- */
.sx-hero-person { display: none; }
@media (min-width: 1100px) {
  .sx-hero-person { display: flex; position: absolute; right: var(--pv-gutter); bottom: 0; gap: 14px; align-items: flex-end; }
  .sx-hero-person figure { margin: 0; width: 170px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .2); border-radius: 20px; padding: 8px; backdrop-filter: blur(8px); }
  .sx-hero-person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 22%; border-radius: 14px; }
  .sx-hero-person figcaption { padding: 8px 4px 2px; font-size: .78rem; line-height: 1.3; color: rgba(255, 255, 255, .85); }
  .sx-hero-person strong { display: block; color: #fff; font-size: .9rem; }
}

/* ---------- Drei Einstiege ---------- */
.sx-einstiege { display: grid; gap: 14px; }
@media (min-width: 860px) { .sx-einstiege { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.sx-einstieg { position: relative; display: flex; flex-direction: column; gap: 10px; padding: clamp(22px, 3vw, 32px); background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-xl); box-shadow: var(--pv-schatten); text-decoration: none; color: var(--pv-text); transition: transform .25s var(--pv-ease), box-shadow .25s var(--pv-ease), border-color .25s; }
.sx-einstieg:hover { transform: translateY(-4px); box-shadow: var(--pv-schatten-gross); border-color: rgba(217, 139, 22, .5); color: var(--pv-text); }
.sx-einstieg .pv-i { width: 52px; height: 52px; padding: 11px; border-radius: 16px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
.sx-einstieg--betont { background: linear-gradient(150deg, var(--pv-navy-2), var(--pv-navy)); color: var(--pv-text-hell); border-color: transparent; }
.sx-einstieg--betont:hover { color: var(--pv-text-hell); }
.sx-einstieg--betont .pv-i { background: var(--pv-amber); color: var(--pv-ink); }
.sx-einstieg strong { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -0.03em; color: var(--pv-h1); line-height: 1.15; }
.sx-einstieg--betont strong { color: #fff; }
.sx-einstieg span.sx-pfeil { margin-top: auto; padding-top: 8px; font-weight: 850; color: var(--pv-petrol); display: inline-flex; gap: 8px; align-items: center; }
.sx-einstieg--betont span.sx-pfeil { color: var(--pv-amber-hell); }
.sx-einstieg::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }

/* ---------- Split-Screen Patrick + Martin ---------- */
.sx-duo { display: grid; gap: 4px; border-radius: var(--pv-r-xl); overflow: hidden; box-shadow: var(--pv-schatten-gross); background: var(--pv-navy); }
@media (min-width: 860px) { .sx-duo { grid-template-columns: 1fr 1fr; } }
.sx-duo__seite { position: relative; isolation: isolate; min-height: clamp(460px, 62vw, 680px); display: flex; align-items: flex-end; color: #fff; overflow: hidden; }
.sx-duo__seite img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s var(--pv-ease); }
.sx-duo__seite:hover img { transform: scale(1.03); }
.sx-duo__seite--patrick img { object-position: 50% 20%; }
.sx-duo__seite--martin img { object-position: 55% 28%; }
.sx-duo__seite::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(8, 25, 41, 0) 35%, rgba(8, 25, 41, .55) 62%, rgba(8, 25, 41, .94) 100%); }
.sx-duo__text { padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 10px; }
.sx-duo__label { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .28); font-size: .78rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.sx-duo__name { font-size: clamp(1.8rem, 3.4vw, 2.6rem); font-weight: 950; letter-spacing: -0.045em; line-height: 1; color: #fff; margin: 0; }
.sx-duo__fach { font-size: clamp(1.05rem, 1.6vw, 1.25rem); font-weight: 800; color: var(--pv-amber-hell); }
.sx-duo__liste { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.sx-duo__liste li { padding: 5px 11px; border-radius: 999px; background: rgba(255, 255, 255, .12); font-size: .84rem; font-weight: 700; color: rgba(255, 255, 255, .92); }
.sx-duo__erfahrung { font-size: .92rem; color: rgba(255, 255, 255, .8); }
.sx-duo-text { max-width: 860px; margin: clamp(28px, 4vw, 44px) auto 0; text-align: center; font-size: clamp(1.05rem, 1.5vw, 1.2rem); color: var(--pv-h2); line-height: 1.65; }
.sx-duo-text strong { color: var(--pv-h1); }
.sx-hinweis-klein { font-size: .86rem; color: var(--pv-text); text-align: center; margin-top: 14px; }

/* ---------- Wirkungskette Erzeugen → Speichern → Heizen → Regeln ---------- */
.sx-kette { display: grid; gap: 12px; counter-reset: sx-k; }
@media (min-width: 900px) { .sx-kette { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; } }
.sx-kette li { counter-increment: sx-k; position: relative; padding: 24px; background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); display: flex; flex-direction: column; gap: 8px; }
@media (min-width: 900px) {
  .sx-kette li { border-radius: 0; border-right-width: 0; }
  .sx-kette li:first-child { border-radius: var(--pv-r-l) 0 0 var(--pv-r-l); }
  .sx-kette li:last-child { border-radius: 0 var(--pv-r-l) var(--pv-r-l) 0; border-right-width: 1px; }
  .sx-kette li:not(:last-child)::after { content: ""; position: absolute; right: -14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%; background: var(--pv-amber) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2310283f' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / 15px no-repeat; z-index: 2; }
}
.sx-kette .pv-i { width: 44px; height: 44px; padding: 9px; border-radius: 13px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
.sx-kette strong { font-size: 1.15rem; font-weight: 900; color: var(--pv-h1); letter-spacing: -0.02em; }
.sx-kette li::before { content: "0" counter(sx-k); position: absolute; top: 20px; right: 22px; font-weight: 900; color: rgba(16, 40, 63, .14); font-size: 1.6rem; }
.sx-zitat { margin: clamp(28px, 4vw, 44px) auto 0; max-width: 900px; text-align: center; font-size: clamp(1.15rem, 2vw, 1.5rem); line-height: 1.45; font-weight: 750; letter-spacing: -0.02em; color: var(--pv-h1); text-wrap: balance; }

/* ---------- Vergleich klassisch vs. PHT ---------- */
.sx-vergleich { display: grid; gap: 16px; }
@media (min-width: 860px) { .sx-vergleich { grid-template-columns: 1fr 1fr; gap: 22px; } }
.sx-vergleich__spalte { border-radius: var(--pv-r-xl); padding: clamp(24px, 3.5vw, 40px); border: 1px solid var(--pv-linie); background: #fff; }
.sx-vergleich__spalte--pht { background: linear-gradient(155deg, var(--pv-navy-2), var(--pv-navy)); color: var(--pv-text-hell); border-color: transparent; box-shadow: var(--pv-schatten-gross); }
.sx-vergleich__spalte h3 { font-size: 1.35rem; font-weight: 900; letter-spacing: -0.03em; color: var(--pv-h1); margin: 0 0 6px; }
.sx-vergleich__spalte--pht h3 { color: #fff; }
.sx-vergleich__spalte > p { margin: 0 0 18px; }
.sx-vergleich__liste { display: grid; gap: 10px; }
.sx-vergleich__liste li { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--pv-soft); font-weight: 750; color: var(--pv-ink); }
.sx-vergleich__spalte--pht .sx-vergleich__liste li { background: rgba(255, 255, 255, .08); color: #fff; }
.sx-vergleich__liste .pv-i { color: var(--pv-petrol); }
.sx-vergleich__spalte--pht .pv-i { color: var(--pv-amber-hell); }
.sx-vergleich__fazit { margin-top: 18px !important; padding-top: 16px; border-top: 1px solid var(--pv-linie); font-weight: 800; color: var(--pv-h2); }
.sx-vergleich__spalte--pht .sx-vergleich__fazit { border-top-color: rgba(255, 255, 255, .16); color: var(--pv-amber-hell); }

/* ---------- Punkte-Raster (z. B. Wärmepumpen-Auslegung) ---------- */
.sx-punkte { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 760px) { .sx-punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sx-punkte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-punkte li { display: flex; align-items: center; gap: 10px; padding: 14px; background: #fff; border: 1px solid var(--pv-linie); border-radius: 14px; font-weight: 750; color: var(--pv-ink); font-size: .95rem; line-height: 1.25; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.sx-punkte .pv-i { width: 34px; height: 34px; padding: 7px; border-radius: 10px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
.pv-section--dunkel .sx-punkte li { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .12); color: #fff; }
.pv-section--dunkel .sx-punkte .pv-i { background: rgba(241, 184, 75, .16); color: var(--pv-amber-hell); }

/* ---------- Karten mit Text (Leistungen, Probleme, Gründe) ---------- */
.sx-karten { display: grid; gap: 16px; }
@media (min-width: 700px) { .sx-karten { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .sx-karten--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sx-karten--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-karte { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); padding: clamp(20px, 2.6vw, 28px); display: flex; flex-direction: column; gap: 10px; box-shadow: var(--pv-schatten); min-width: 0; }
.sx-karte h3 { margin: 0; font-size: 1.18rem; font-weight: 900; letter-spacing: -0.02em; color: var(--pv-h1); line-height: 1.2; }
.sx-karte p { margin: 0; }
.sx-karte .pv-i { width: 46px; height: 46px; padding: 10px; border-radius: 14px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
.sx-karte--link { text-decoration: none; color: var(--pv-text); transition: transform .25s var(--pv-ease), box-shadow .25s var(--pv-ease); }
.sx-karte--link:hover { transform: translateY(-3px); box-shadow: var(--pv-schatten-gross); color: var(--pv-text); }
.sx-karte--link .sx-pfeil { margin-top: auto; font-weight: 850; color: var(--pv-petrol); }
.sx-karte--problem { border-left: 4px solid var(--pv-amber); }
.sx-karte--problem h3::before { content: "Problem · "; color: var(--pv-amber-dunkel); font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; display: block; margin-bottom: 4px; }
.sx-karte--problem .sx-loesung { padding-top: 10px; border-top: 1px solid var(--pv-linie); font-weight: 650; color: var(--pv-h2); }
.pv-section--dunkel .sx-karte { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); box-shadow: none; color: var(--pv-text-hell); }
.pv-section--dunkel .sx-karte h3 { color: #fff; }
.pv-section--dunkel .sx-karte .pv-i { background: rgba(241, 184, 75, .16); color: var(--pv-amber-hell); }

/* ---------- Zwei Spalten Bild/Text ---------- */
.sx-zwei { display: grid; gap: clamp(28px, 5vw, 72px); align-items: center; }
@media (min-width: 900px) { .sx-zwei { grid-template-columns: 1.05fr 1fr; } .sx-zwei--umgekehrt > :first-child { order: 2; } }
.sx-zwei__bild img { width: 100%; border-radius: var(--pv-r-xl); box-shadow: var(--pv-schatten-gross); aspect-ratio: 4 / 3; object-fit: cover; }
.sx-zwei__text > * + * { margin-top: 14px; }
.sx-zwei__text .pv-liste-check { margin-top: 20px; }
.sx-zwei__text .sx-knoepfe { margin-top: 26px; }

/* ---------- Teaser (Mining) ---------- */
.sx-teaser { display: grid; gap: 0; border-radius: var(--pv-r-xl); overflow: hidden; background: linear-gradient(135deg, #0a1d30, #10324d 60%, #0f4b5f); color: var(--pv-text-hell); box-shadow: var(--pv-schatten-gross); }
@media (min-width: 860px) { .sx-teaser { grid-template-columns: 1.3fr 1fr; } }
.sx-teaser__text { padding: clamp(26px, 4vw, 48px); display: flex; flex-direction: column; gap: 14px; }
.sx-teaser__text .pv-h3 { color: #fff; }
.sx-teaser__grafik { position: relative; min-height: 220px; display: grid; place-items: center; padding: 24px; background: radial-gradient(circle at 50% 50%, rgba(241, 184, 75, .18), transparent 60%); }
.sx-teaser__grafik svg { width: min(320px, 100%); height: auto; }
.sx-teaser__hinweis { font-size: .84rem; color: rgba(255, 255, 255, .65); }

/* ---------- Kleine Rechner (Wärmepumpen-Check, Steuer) ---------- */
.sx-rechner { background: #fff; border-radius: var(--pv-r-xl); box-shadow: var(--pv-schatten-gross); border: 1px solid var(--pv-linie); overflow: hidden; }
.sx-rechner__grid { display: grid; }
@media (min-width: 960px) { .sx-rechner__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.sx-rechner__eingabe { padding: clamp(20px, 3.2vw, 36px); display: grid; gap: 16px; align-content: start; }
.sx-rechner__ausgabe { padding: clamp(20px, 3.2vw, 36px); background: linear-gradient(160deg, var(--pv-navy-2), var(--pv-navy)); color: var(--pv-text-hell); display: flex; flex-direction: column; gap: 16px; }
.sx-rechner__ausgabe h3 { margin: 0; color: #fff; font-size: 1.3rem; font-weight: 900; letter-spacing: -0.02em; }
.sx-feld { display: grid; gap: 6px; }
.sx-feld label, .sx-feld legend { font-weight: 800; color: var(--pv-ink); font-size: .95rem; }
.sx-feld fieldset { border: 0; padding: 0; margin: 0; display: grid; gap: 8px; }
.sx-feld select, .sx-feld input[type="number"], .sx-feld input[type="text"] { font: inherit; min-height: 50px; padding: 10px 14px; border: 1.5px solid var(--pv-linie-stark); border-radius: 12px; background: #fff; color: var(--pv-ink); width: 100%; }
.sx-feld select:focus, .sx-feld input:focus { border-color: var(--pv-petrol); outline: 3px solid rgba(15, 111, 143, .18); }
.sx-feld__zeile { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.sx-feld__hilfe { font-size: .84rem; color: var(--pv-text); }
.sx-wahl { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-wahl label { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: 46px; padding: 8px 14px; border: 1.5px solid var(--pv-linie-stark); border-radius: 999px; cursor: pointer; font-weight: 750; font-size: .93rem; color: var(--pv-ink); background: #fff; }
.sx-wahl input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sx-wahl label:has(input:checked) { border-color: var(--pv-amber); background: #fff6e4; }
.sx-wahl label:has(input:focus-visible) { outline: 3px solid var(--pv-gold); outline-offset: 2px; }
.sx-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.sx-kpi { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .12); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.sx-kpi--breit { grid-column: 1 / -1; background: rgba(241, 184, 75, .12); border-color: rgba(241, 184, 75, .35); }
.sx-kpi__name { font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.sx-kpi__wert { font-size: clamp(1.35rem, 2.6vw, 1.9rem); font-weight: 950; letter-spacing: -0.04em; color: #fff; line-height: 1.1; overflow-wrap: anywhere; }
.sx-kpi__zusatz { font-size: .82rem; color: rgba(255, 255, 255, .72); }
.sx-vorher-nachher { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.sx-vorher-nachher > div { border-radius: 16px; padding: 14px; background: rgba(255, 255, 255, .06); }
.sx-vorher-nachher h4 { margin: 0 0 8px; font-size: .82rem; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.sx-vorher-nachher dl { margin: 0; display: grid; gap: 4px; font-size: .9rem; }
.sx-vorher-nachher dl div { display: flex; justify-content: space-between; gap: 8px; }
.sx-vorher-nachher dd { margin: 0; font-weight: 800; color: #fff; white-space: nowrap; }
.sx-vorher-nachher .is-summe { border-top: 1px solid rgba(255, 255, 255, .2); padding-top: 6px; margin-top: 4px; font-weight: 800; }
.sx-rechner__hinweis { font-size: .82rem; line-height: 1.5; color: rgba(255, 255, 255, .7); }
.sx-rechner__ausgabe .pv-btn { align-self: flex-start; }
.sx-rechner__ausgabe .pv-aufklapp summary { color: #fff; }
.sx-rechner__ausgabe .pv-aufklapp { border-color: rgba(255, 255, 255, .16); }
.sx-badge { display: inline-flex; align-self: flex-start; gap: 6px; align-items: center; padding: 5px 11px; border-radius: 999px; font-size: .78rem; font-weight: 850; background: rgba(241, 184, 75, .18); color: var(--pv-amber-hell); letter-spacing: .02em; }
.sx-badge--hell { background: var(--pv-petrol-soft); color: var(--pv-petrol); }

/* ---------- Steuer-Abschnitt ---------- */
.sx-steuer { display: grid; gap: clamp(24px, 4vw, 48px); }
@media (min-width: 980px) { .sx-steuer { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: start; } }
.sx-zeitstrahl { display: grid; gap: 12px; margin-top: 22px; }
.sx-zeitstrahl li { display: grid; grid-template-columns: 92px 1fr; gap: 14px; padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid var(--pv-linie); }
.sx-zeitstrahl strong { color: var(--pv-h1); font-weight: 900; }
.sx-zeitstrahl li.is-jetzt { border: 2px solid var(--pv-amber); }
.sx-quellen { font-size: .82rem; line-height: 1.5; margin-top: 16px; color: var(--pv-text); }
.sx-quellen a { word-break: break-word; }

/* ---------- Einsatzgebiet ---------- */
.sx-gebiet { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
@media (min-width: 980px) { .sx-gebiet { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } }
.sx-gebietskarte { background: linear-gradient(160deg, #eaf3f7, #f7fbfc); border: 1px solid var(--pv-linie); border-radius: var(--pv-r-xl); padding: 12px; box-shadow: var(--pv-schatten); }
.sx-gebietskarte svg { width: 100%; height: auto; display: block; }
.sx-gebietskarte .see { fill: #bfdbe8; }
.sx-gebietskarte .ring { fill: none; stroke: rgba(15, 111, 143, .35); stroke-dasharray: 4 6; }
.sx-gebietskarte .ort { fill: var(--pv-navy); }
.sx-gebietskarte .ort-text { font: 650 13px/1 var(--pv-font); fill: var(--pv-ink); }
.sx-gebietskarte .pht { fill: var(--pv-amber); stroke: #fff; stroke-width: 3; }
.sx-gebietskarte .region { cursor: pointer; }
.sx-gebietskarte .region-flaeche { fill: rgba(15, 111, 143, .06); stroke: rgba(15, 111, 143, .25); transition: fill .2s; }
.sx-gebietskarte .region:hover .region-flaeche, .sx-gebietskarte .region.is-aktiv .region-flaeche, .sx-gebietskarte .region:focus-visible .region-flaeche { fill: rgba(217, 139, 22, .18); stroke: var(--pv-amber); }
.sx-gebietskarte .region-name { font: 850 15px/1 var(--pv-font); fill: var(--pv-petrol); letter-spacing: .02em; }
.sx-cluster { display: grid; gap: 12px; }
.sx-cluster details { background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); box-shadow: var(--pv-schatten); }
.sx-cluster details[open] { border-color: rgba(217, 139, 22, .55); }
.sx-cluster summary { cursor: pointer; list-style: none; padding: 18px 20px; display: flex; justify-content: space-between; gap: 12px; align-items: center; font-weight: 900; color: var(--pv-h1); font-size: 1.1rem; }
.sx-cluster summary::-webkit-details-marker { display: none; }
.sx-cluster summary span { font-size: .82rem; font-weight: 750; color: var(--pv-petrol); }
.sx-cluster__inhalt { padding: 0 20px 20px; display: grid; gap: 12px; }
.sx-cluster__orte { display: flex; flex-wrap: wrap; gap: 6px; }
.sx-cluster__orte li { padding: 5px 10px; border-radius: 999px; background: var(--pv-soft); font-size: .86rem; font-weight: 700; color: var(--pv-ink); }
.sx-cluster__links { display: flex; flex-wrap: wrap; gap: 8px 16px; }

/* ---------- Langtext ---------- */
.sx-text { max-width: 780px; }
.sx-text > * + * { margin-top: 16px; }
.sx-text h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 900; letter-spacing: -0.03em; color: var(--pv-h1); line-height: 1.15; margin-top: 40px; }
.sx-text h3 { font-size: 1.2rem; font-weight: 850; color: var(--pv-h1); margin-top: 28px; }
.sx-text ul { list-style: disc; padding-left: 1.3em; }
.sx-text ul li + li { margin-top: 6px; }
.sx-stand { font-size: .84rem; color: var(--pv-text); margin-top: 18px; }

/* ---------- Kontakt ---------- */
.sx-kontakt { display: grid; gap: clamp(24px, 4vw, 48px); }
@media (min-width: 980px) { .sx-kontakt { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); } }
.sx-kontakt__wege { display: grid; gap: 12px; align-content: start; }
.sx-kontakt__weg { display: flex; gap: 14px; align-items: center; padding: 18px; background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-l); text-decoration: none; color: var(--pv-ink); font-weight: 800; box-shadow: var(--pv-schatten); }
.sx-kontakt__weg span { display: block; font-weight: 600; color: var(--pv-text); font-size: .9rem; }
.sx-kontakt__weg .pv-i { width: 46px; height: 46px; padding: 10px; border-radius: 14px; background: var(--pv-petrol-soft); color: var(--pv-petrol); }
.sx-formular { background: #fff; border-radius: var(--pv-r-xl); padding: clamp(22px, 3.5vw, 40px); box-shadow: var(--pv-schatten-gross); border: 1px solid var(--pv-linie); display: grid; gap: 16px; }
.sx-formular textarea { font: inherit; min-height: 130px; padding: 12px 14px; border: 1.5px solid var(--pv-linie-stark); border-radius: 12px; width: 100%; resize: vertical; }
.sx-formular .sx-zweispaltig { display: grid; gap: 16px; }
@media (min-width: 640px) { .sx-formular .sx-zweispaltig { grid-template-columns: 1fr 1fr; } }
.sx-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { font-weight: 750; min-height: 1.5em; }
.form-status.ok { color: var(--pv-gruen); }
.form-status.error { color: var(--pv-rot); }
.form-fallback { padding: 16px; border-radius: 14px; background: var(--pv-soft); }
.form-fallback__actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }

/* ---------- Footer (neu) ---------- */
.sx-footer { background: var(--pv-navy-dunkel); color: rgba(255, 255, 255, .74); font-size: .95rem; padding-bottom: calc(env(safe-area-inset-bottom)); }
.sx-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; }
.sx-footer a:hover { color: var(--pv-amber-hell); }
.sx-footer h2 { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin: 0 0 12px; }
.sx-footer__team { background: linear-gradient(135deg, var(--pv-navy-2), var(--pv-navy)); border-bottom: 1px solid rgba(255, 255, 255, .08); padding: clamp(40px, 6vw, 72px) 0; }
.sx-footer__team-inner { display: grid; gap: 24px; align-items: center; grid-template-columns: 1fr 1fr; }
.sx-footer__team-text { grid-column: 1 / -1; }
@media (min-width: 900px) { .sx-footer__team-inner { grid-template-columns: minmax(0, 1fr) 180px 180px; gap: 28px; } .sx-footer__team-text { grid-column: auto; } }
.sx-footer__eyebrow { display: inline-block; font-size: .78rem; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; color: var(--pv-amber-hell); margin-bottom: 10px; }
.sx-footer .sx-footer__titel { font-size: clamp(1.6rem, 3vw, 2.3rem); text-transform: none; letter-spacing: -0.04em; line-height: 1.08; font-weight: 950; margin: 0 0 12px; }
.sx-footer__team p { margin: 0; max-width: 620px; color: rgba(255, 255, 255, .78); }
.sx-footer__aktionen { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.sx-footer .btn-primary { color: var(--pv-ink); background: var(--pv-btn); }
.sx-footer .btn-outline { color: #fff; border: 1.5px solid rgba(255, 255, 255, .45); background: transparent; }
.sx-footer__person { margin: 0; }
.sx-footer__person img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 55% 22%; border-radius: 18px; }
.sx-footer__person figcaption { margin-top: 8px; font-size: .84rem; line-height: 1.3; }
.sx-footer__person strong { display: block; color: #fff; }
.sx-footer__main { padding: clamp(40px, 6vw, 64px) 0; }
.sx-footer__grid { display: grid; gap: 32px; grid-template-columns: 1fr 1fr; }
.sx-footer__firma { grid-column: 1 / -1; }
@media (min-width: 900px) { .sx-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } .sx-footer__firma { grid-column: auto; } }
.sx-footer__logo img { width: 190px; height: auto; background: #fff; border-radius: 12px; padding: 10px 14px; }
.sx-footer__firma p { margin: 16px 0; max-width: 380px; }
.sx-footer__firma address { font-style: normal; display: grid; gap: 4px; }
.sx-footer__nav { display: flex; flex-direction: column; gap: 8px; }
.sx-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .08); padding: 18px 0 calc(18px + var(--sx-leiste, 0px)); font-size: .84rem; }
.sx-footer__bottom-inner { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: center; justify-content: space-between; }
.sx-footer__sprachen { display: flex; gap: 10px; }
.sx-footer__sprachen a[aria-current] { color: var(--pv-amber-hell); font-weight: 800; }
.sx-footer .privacy-settings { font: inherit; background: none; border: 0; color: rgba(255, 255, 255, .86); text-decoration: underline; cursor: pointer; padding: 0; }
@media (max-width: 1100px) { :root { --sx-leiste: 76px; } }

/* ---------- Bewegung ---------- */
@media (prefers-reduced-motion: reduce) {
  .sx-kopf__bild img, .sx-duo__seite img { animation: none; transition: none; }
  .sx-einstieg, .sx-karte--link { transition: none; }
}
@media print {
  .sx-kopf { min-height: 0; padding: 20px 0; color: #000; background: none; }
  .sx-kopf::before, .sx-kopf__bild { display: none; }
  .sx-kopf__titel, .sx-kopf__lead { color: #000; }
}

/* ---------- Ergänzungen Seitenbau ---------- */
.sx-kopf--start { min-height: min(92svh, 860px); }
@media (min-width: 1100px) { .sx-kopf--start .sx-kopf__inhalt { padding-right: 380px; } }
.sx-ref { padding: 0; overflow: hidden; gap: 0; }
.sx-ref img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.sx-ref figcaption { padding: 14px 16px 16px; font-weight: 750; color: var(--pv-ink); font-size: .93rem; }
.sx-rund { width: 100%; border-radius: var(--pv-r-xl); box-shadow: var(--pv-schatten-gross); aspect-ratio: 4 / 3; object-fit: cover; }
.sx-karte--steuer { border-top: 4px solid var(--pv-gruen); }
.sx-karte--steuer .pv-i { background: #e5f4ec; color: var(--pv-gruen); }
.sx-karte--steuer .sx-pfeil { font-weight: 850; color: var(--pv-petrol); text-decoration: none; }
.pv-section .sx-knoepfe { margin-top: 26px; }
.sx-symbolbild { position: relative; }
.sx-symbolbild figcaption { position: absolute; left: 12px; bottom: 12px; background: rgba(8, 25, 41, .72); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.sx-tabelle { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--pv-r-l); overflow: hidden; box-shadow: var(--pv-schatten); font-size: .95rem; }
.sx-tabelle th, .sx-tabelle td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--pv-linie); vertical-align: top; }
.sx-tabelle thead th { background: var(--pv-navy); color: #fff; font-size: .82rem; letter-spacing: .04em; text-transform: uppercase; }
.sx-tabelle tbody th { color: var(--pv-ink); font-weight: 850; }
@media (max-width: 700px) { .sx-tabelle, .sx-tabelle tbody, .sx-tabelle tr, .sx-tabelle td, .sx-tabelle th { display: block; } .sx-tabelle thead { display: none; } .sx-tabelle tr { border-bottom: 1px solid var(--pv-linie); padding: 10px 0; } .sx-tabelle td, .sx-tabelle tbody th { border: 0; padding: 4px 16px; } .sx-tabelle td::before { content: attr(data-label) ": "; font-weight: 800; color: var(--pv-ink); } }
.sx-schritte { display: grid; gap: 12px; counter-reset: sx-s; }
@media (min-width: 760px) { .sx-schritte { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .sx-schritte { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.sx-schritte li { counter-increment: sx-s; background: #fff; border: 1px solid var(--pv-linie); border-radius: var(--pv-r-m); padding: 18px 18px 18px 64px; position: relative; min-height: 84px; }
.sx-schritte li::before { content: counter(sx-s); position: absolute; left: 16px; top: 16px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--pv-navy); color: #fff; font-weight: 900; font-size: .9rem; }
.sx-schritte strong { display: block; color: var(--pv-ink); font-weight: 850; }
.sx-schritte span { font-size: .9rem; }
.sx-hinweisbox { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: var(--pv-r-m); background: var(--pv-soft); border-left: 4px solid var(--pv-petrol); font-size: .93rem; }
.sx-hinweisbox .pv-i { color: var(--pv-petrol); flex: none; margin-top: 2px; }
.sx-rechner__eingabe, .sx-rechner__ausgabe, .sx-feld { min-width: 0; }
.sx-feld label { overflow-wrap: break-word; }
.sx-feld label .sx-feld__hilfe { display: block; font-weight: 600; }
.sx-punkte li span { min-width: 0; }
@media (max-width: 520px) { .sx-vorher-nachher { grid-template-columns: minmax(0, 1fr); } }
fieldset.sx-feld { border: 0; padding: 0; margin: 0; }

/* ---------- Kontakt ---------- */
.sx-zwei--start { align-items: start; }
.sx-honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sx-optional { font-weight: 600; color: var(--pv-text); font-size: .88em; }
.sx-formular .pv-check input { margin-top: 3px; flex: none; width: 20px; height: 20px; accent-color: var(--pv-petrol); }
.sx-kontaktwege { display: grid; gap: 12px; margin-bottom: 20px; }
.sx-kontaktwege .sx-karte { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 16px; row-gap: 2px; align-items: center; padding: 16px 20px; }
.sx-kontaktwege .sx-karte > svg { grid-row: span 2; }
.sx-kontaktwege .sx-karte h3, .sx-kontaktwege .sx-karte p { margin: 0; }
.sx-karte--betont { border-color: rgba(217, 139, 22, .6); box-shadow: 0 0 0 2px rgba(217, 139, 22, .25), var(--pv-schatten); }
.sx-karte .pv-eyebrow { margin: 0; }
.sx-galerie { display: grid; gap: 20px 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.sx-galerie figure { margin: 0; min-width: 0; }
.sx-galerie img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--pv-r-l); display: block; }
.sx-galerie figcaption { font-size: .88rem; font-weight: 700; color: var(--pv-ink); padding: 8px 2px 0; }
