/* =====================================================================
IVG Energy Solutions – Theme nach dem IVG Website Mockup (Design-Canvas,
Stand 25.09.2026). Geladen nach style.css und tokens.css.
Nur Überschreibungen vorhandener Kern-Komponenten plus die Varianten,
die Seiten über 'stil' anfordern (block--*, card--*, page-hero--*).
Aufbau: Grundlagen · Kopf · Hero · Abschnitte · Karten · Varianten ·
Tabellen/FAQ/Listen · Formulare · CTA-Band · Footer · Startseite · Bewegung
===================================================================== */
/* ---------- Grundlagen ---------- */
body {
background: var(--color-surface);
font-size: var(--text-base);
line-height: 1.55;
}
.container { padding-inline: clamp(16px, 5.5vw, 80px); }
.container-narrow { padding-inline: clamp(16px, 5.5vw, 80px); max-width: calc(var(--container-narrow) + 160px); }
@media (min-width: 768px) {
.container, .container-narrow { padding-inline: clamp(24px, 5.5vw, 80px); }
}
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--color-text); }
h1 { font-weight: 800; font-size: clamp(2.25rem, 4.6vw, var(--text-hero)); line-height: 1.05; letter-spacing: -0.02em; }
h2 { font-weight: 800; font-size: clamp(1.75rem, 3.3vw, var(--text-3xl)); line-height: 1.1; letter-spacing: -0.01em; }
h3 { font-weight: 700; font-size: 1.375rem; line-height: 1.25; letter-spacing: 0; }
h4 { font-weight: 700; }
p { color: var(--color-text-muted); }
.lead { font-size: var(--text-lg); color: var(--color-text-muted); max-width: 62ch; }
/* Links im Fließtext (Kern: a { color: inherit }) */
main p a:not(.btn), main li a:not(.btn), main td a, main .lead a, main dd a {
color: var(--color-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
main p a:not(.btn):hover, main li a:not(.btn):hover, main td a:hover { color: var(--color-text); }
.section--navy p a:not(.btn), .section--navy li a:not(.btn), .page-hero p a:not(.btn), .ivg-hero p a:not(.btn) { color: var(--ivg-gruen-hell); }
.page-hero--artikel p a:not(.btn) { color: var(--color-accent); }
a:focus-visible, button:focus-visible, .btn:focus-visible, summary:focus-visible, input:focus-visible + label {
outline: 2px solid var(--color-accent);
outline-offset: 3px;
}
.site-header a:focus-visible, .site-header button:focus-visible, .page-hero a:focus-visible,
.section--navy a:focus-visible, .site-footer a:focus-visible, .hero a:focus-visible, .ivg-hero a:focus-visible {
outline-color: var(--ivg-gruen-hell);
}
/* Überzeile: IBM Plex Mono, Versalien, ohne Pille */
.eyebrow {
display: inline-block;
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: 500;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-teal);
background: none;
padding: 0;
border-radius: 0;
margin-bottom: 12px;
}
.section--navy .eyebrow, .page-hero .eyebrow, .hero .eyebrow, .ivg-hero .eyebrow, .cta-block--navy .eyebrow { color: var(--ivg-gruen-hell); background: none; }
/* Buttons: Mockup – eckiger (6 px), Grün mit dunkler Schrift, ohne Pfeil */
.btn {
border-radius: var(--radius-btn);
padding: 14px 22px;
font-size: var(--text-base);
font-weight: 600;
letter-spacing: 0;
box-shadow: none;
}
.btn .arrow { display: none; }
.btn--lg { padding: 16px 26px; font-size: var(--text-base); }
.btn--primary { background: var(--ivg-gruen); color: var(--color-navy); box-shadow: none; }
.btn--primary:hover { background: var(--ivg-gruen-hover); color: var(--color-navy); transform: none; box-shadow: none; }
.btn--ghost { background: transparent; border: 1px solid var(--color-navy); color: var(--color-navy); padding: 13px 21px; }
.btn--lg.btn--ghost { padding: 15px 25px; }
.btn--ghost:hover { background: var(--color-navy); color: #fff; border-color: var(--color-navy); }
.btn--navy { background: var(--color-navy); color: #fff; }
.btn--navy:hover { background: var(--ivg-panel); color: #fff; }
.section--navy .btn--ghost, .page-hero .btn--ghost, .hero .btn--ghost, .ivg-hero .btn--ghost {
border-color: var(--ivg-rand-dunkel); color: #fff; background: transparent;
}
.section--navy .btn--ghost:hover, .page-hero .btn--ghost:hover, .hero .btn--ghost:hover, .ivg-hero .btn--ghost:hover {
border-color: #fff; background: rgba(255, 255, 255, 0.06); color: #fff;
}
.section--navy .btn--navy { background: var(--ivg-gruen); color: var(--color-navy); }
/* ---------- Kopf: dunkel, Servicemenü darüber, grüner CTA ---------- */
.site-header {
--topbar-h: 0px;
background: var(--color-navy);
color: #fff;
border-bottom: 0;
backdrop-filter: none;
-webkit-backdrop-filter: none;
top: calc(-1 * var(--topbar-h)); /* Servicemenü scrollt weg, Hauptzeile bleibt */
}
.site-header__inner { height: 80px; gap: 40px; justify-content: flex-start; }
.site-topbar { display: none; border-bottom: 1px solid var(--ivg-linie-dunkel); }
.site-topbar__inner {
display: flex; justify-content: flex-end; align-items: center; gap: 28px;
height: 33px; font-size: var(--text-xs);
}
.site-topbar a { color: var(--color-on-dark-muted); }
.site-topbar a:hover, .site-topbar a[aria-current="page"] { color: #fff; }
.brand-logo--wordmark { height: 54px; }
@media (max-width: 480px) { .brand-logo--wordmark { height: 44px; } .site-header__inner { height: 68px; } }
.logo { color: #fff; }
.nav { background: none !important; border: 0 !important; padding: 0 !important; gap: 4px; flex-grow: 1; }
.nav a, .nav__toggle {
color: #fff;
font-size: var(--text-sm);
font-weight: 500;
padding: 8px 10px;
border-radius: 6px;
background: none;
}
.nav a:hover, .nav__toggle:hover { color: var(--ivg-gruen-hell); background: none !important; box-shadow: none !important; }
.nav a[aria-current="page"], .nav__group.is-active > .nav__toggle {
color: var(--ivg-gruen-hell); background: none !important; box-shadow: none !important;
}
.nav__menu { border-radius: 12px; border-color: var(--color-border); padding: 8px; min-width: 16rem; }
.nav__menu a { color: var(--color-text); font-size: var(--text-sm); padding: 10px 12px; }
.nav__menu a:hover { background: var(--color-surface); color: var(--color-accent); }
.nav__menu a[aria-current="page"] { background: var(--ivg-gruen-flaeche); color: var(--color-text); }
.site-header .nav__menu a:focus-visible { outline-color: var(--color-accent); outline-offset: 0; }
.header-cta { margin-left: auto; padding: 12px 20px; font-size: var(--text-sm); }
.menu-toggle { margin-left: auto; background: transparent; border: 1px solid var(--ivg-rand-dunkel); color: #fff; width: 44px; height: 44px; }
.mobile-nav { background: var(--color-navy); border-top: 1px solid var(--ivg-linie-dunkel); }
.mobile-nav a { color: #fff; border-bottom-color: var(--ivg-linie-dunkel); }
.mobile-nav a:hover, .mobile-nav a[aria-current="page"] { color: var(--ivg-gruen-hell); }
.mobile-nav__label { color: var(--ivg-label-dunkel); font-family: var(--font-mono); font-weight: 500; letter-spacing: .12em; padding: 16px var(--space-5) 4px; }
.mobile-nav__sub a { color: var(--color-on-dark-muted); }
.mobile-nav__service a { font-size: var(--text-sm); color: var(--color-on-dark-muted); }
@media (min-width: 1100px) {
.site-header--service { --topbar-h: 34px; }
.site-topbar { display: block; }
.mobile-nav__service { display: none; }
.header-cta { margin-left: 0; }
}
@media (min-width: 1100px) and (max-width: 1279px) {
.site-header__inner { gap: 20px; }
.nav { gap: 0; }
.nav a, .nav__toggle { padding: 8px 7px; font-size: 0.875rem; }
.brand-logo--wordmark { height: 46px; }
}
:target, h1[id], h2[id], h3[id], h4[id], li[id] { scroll-margin-top: 110px; }
.kontakt-anker { top: -120px; }
/* ---------- Unterseiten-Hero: dunkel, Brotkrume als weiße Leiste ---------- */
.page-hero {
background: var(--color-navy);
color: #fff;
padding: 0 0 72px;
border-bottom: 0;
}
.page-hero::before, .page-hero::after { display: none !important; }
.page-hero .crumb {
margin: 0 calc(50% - 50vw) 72px;
padding: 18px calc(50vw - 50%);
background: #fff;
border-bottom: 1px solid var(--color-border);
font-size: 0.875rem;
color: var(--color-text-muted);
gap: 6px;
}
.page-hero .crumb a { color: var(--color-accent); text-decoration: none; }
.page-hero .crumb a:hover { color: var(--color-text); text-decoration: underline; }
.page-hero .crumb [aria-current="page"] { color: var(--color-text-muted); }
.page-hero h1 { color: #fff; font-size: clamp(2.25rem, 4.4vw, 3.625rem); }
.page-hero__sub { color: var(--color-on-dark-muted); font-size: var(--text-lg); max-width: 62ch; margin-top: 22px; }
.page-hero__ctas { margin-top: 32px; gap: 16px; }
.page-hero__inner { gap: 64px; }
.page-hero__inner--solo { max-width: 980px; }
.page-hero__media {
background: var(--ivg-panel);
border: 1px solid var(--ivg-panel-rand);
border-radius: 20px;
padding: 24px;
box-shadow: none;
aspect-ratio: auto;
}
.page-hero__media img { border-radius: 12px; aspect-ratio: 4 / 3; }
.page-hero__stand {
display: inline-flex; margin-top: 24px; padding: 8px 14px; border-radius: 10px;
background: var(--ivg-panel); border: 1px solid var(--ivg-panel-rand);
color: var(--color-on-dark-muted); font-family: var(--font-mono); font-size: var(--text-xs);
letter-spacing: .06em; font-weight: 500;
}
.page-hero > .container-narrow { position: relative; z-index: 1; }
/* Hero ohne Brotkrume (404, Sonderseiten) braucht eigenen Abstand oben */
.page-hero:not(:has(.crumb)) { padding-top: 72px; }
main .err404__map a, main .err404__suggest a, main .err404__map a:hover { text-decoration: none; }
.err404 h2 { margin-bottom: 20px; }
/* Themenseiten (Energiewende-Kompass): heller Kopf wie im Mockup „EEG 2027“ */
.page-hero--artikel { background: #fff; color: var(--color-text); padding-bottom: 48px; border-bottom: 1px solid var(--color-border); }
.page-hero--artikel .crumb { margin-bottom: 64px; }
.page-hero--artikel h1 { color: var(--color-text); font-size: clamp(2.125rem, 4vw, 3.375rem); }
.page-hero--artikel .eyebrow { color: var(--color-teal); }
.page-hero--artikel .page-hero__sub { color: var(--color-text-muted); }
.page-hero--artikel .btn--ghost { border-color: var(--color-navy); color: var(--color-navy); }
.page-hero--artikel .btn--ghost:hover { background: var(--color-navy); color: #fff; }
.page-hero--artikel .page-hero__stand { background: #fff; border: 2px solid var(--color-navy); color: var(--color-text); }
.page-hero--artikel a:focus-visible { outline-color: var(--color-accent); }
/* ---------- Abschnitte ---------- */
.section { padding: 72px 0; background: transparent; }
.section--sm { padding: 40px 0; }
.section--alt { background: #fff; }
.section--navy { background: var(--color-navy); color: #fff; }
.section--navy::before { display: none; }
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy p { color: var(--color-on-dark-muted); }
.mt-7 { margin-top: 40px; }
/* ---------- Karten ---------- */
.card {
background: #fff;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 32px;
box-shadow: none;
transition: border-color var(--transition-fast);
}
.card:hover { transform: none; box-shadow: none; border-color: #9AA8AF; }
.card h3 { font-size: 1.375rem; margin-bottom: 10px; }
.grid--2 > .card h3 { font-size: var(--text-xl); }
.card p { font-size: 1rem; color: var(--color-text-muted); }
.card__label {
font-family: var(--font-mono); font-weight: 500; font-size: 0.75rem; letter-spacing: .1em;
text-transform: uppercase; color: var(--color-accent); margin-bottom: 10px;
}
.card__link { color: var(--color-accent); font-size: var(--text-base); font-weight: 600; padding-top: 18px; }
.card__link:hover { color: var(--color-text); }
.mini-list li { font-size: 1rem; }
.section--alt .card { background: var(--color-surface); border-color: transparent; }
.section--alt .card:hover { border-color: var(--color-border); }
/* Karten auf Dunkel: Kern-Kartenvariablen umschalten (--card-*) */
.section--navy .card, .card--dunkel, .block--welten .card:nth-child(2), .block--kompass .card:first-child {
--card-fg: #fff; --card-heading: #fff; --card-muted: var(--color-on-dark-muted); --card-link: var(--ivg-gruen-hell);
}
.block--stufen .card:first-child { --card-muted: var(--color-navy); --card-link: var(--color-navy); }
/* Karten auf Dunkel */
.section--navy .card { background: var(--ivg-panel); border-color: var(--ivg-panel-rand); color: #fff; }
.section--navy .card:hover { border-color: var(--ivg-rand-dunkel); }
.section--navy .card h3 { color: #fff; }
.section--navy .card p, .section--navy .card li { color: var(--color-on-dark-muted); }
.section--navy .card__label { color: var(--ivg-blau-dunkel); }
.section--navy .card__link { color: var(--ivg-gruen-hell); }
.section--navy .card__link:hover { color: #fff; }
/* Kartenvarianten ('stil' an der Karte) */
.card--dunkel { background: var(--ivg-panel) !important; border-color: var(--ivg-panel) !important; }
.card--dunkel h3 { color: #fff; }
.card--dunkel p, .card--dunkel li { color: var(--color-on-dark-muted); }
.card--dunkel .card__label { color: var(--ivg-gruen-hell); }
.card--dunkel .card__link { color: var(--ivg-gruen-hell); }
.card--gruen { background: var(--ivg-gruen-flaeche) !important; border-color: var(--ivg-gruen-hell) !important; }
.card--gruen .card__label { color: var(--color-teal); }
/* Raster: 5 Karten in einer Reihe (Mockup „Kompass“), 6 Karten als 3 × 2 */
@media (min-width: 1200px) {
.grid--4:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid--4:has(> :nth-child(5):last-child) > .card { padding: 24px; }
.grid--4:has(> :nth-child(5):last-child) > .card h3 { font-size: 1.1875rem; }
}
@media (min-width: 900px) {
.grid--4:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* Module, Werte */
.module { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 28px 32px; box-shadow: none; }
.section--alt .module { background: var(--color-surface); border-color: transparent; }
.module h3::before { background: var(--ivg-gruen); }
.module p, .module ul li { font-size: 1rem; }
.value { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: none; padding: 24px; }
.section--alt .value { background: var(--color-surface); border-color: transparent; }
.value__badge { font-family: var(--font-display); font-weight: 800; color: var(--color-text); background: none; padding: 0; font-size: 2.25rem; }
.value h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
/* ---------- Blockvarianten ('stil' am Block) ---------- */
/* Lösungswelten: drei Karten, die mittlere dunkel, Symbol oben; eine vierte
(Wärme & Klima, nach Freigabe) wird zur breiten grünen Leiste. */
.block--welten .grid { grid-template-columns: 1fr; }
@media (min-width: 900px) { .block--welten .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.block--welten .card { min-height: 300px; padding: 32px; }
.block--welten .card h3 { font-size: var(--text-xl); }
.block--welten .card::before {
content: ""; display: block; width: 40px; height: 40px; margin-bottom: 18px;
background-color: var(--color-text);
-webkit-mask: var(--ivg-symbol) center / contain no-repeat;
mask: var(--ivg-symbol) center / contain no-repeat;
}
.block--welten .card:nth-child(1) { --ivg-symbol: url("data:image/svg+xml;utf8,"); }
.block--welten .card:nth-child(2) { --ivg-symbol: url("data:image/svg+xml;utf8,"); }
.block--welten .card:nth-child(3) { --ivg-symbol: url("data:image/svg+xml;utf8,"); }
.block--welten .card:nth-child(4) { --ivg-symbol: url("data:image/svg+xml;utf8,"); }
.block--welten .card:nth-child(2) { background: var(--ivg-panel); border-color: var(--ivg-panel); }
.block--welten .card:nth-child(2)::before { background-color: var(--ivg-gruen-hell); }
.block--welten .card:nth-child(2) h3 { color: #fff; }
.block--welten .card:nth-child(2) p { color: var(--color-on-dark-muted); }
.block--welten .card:nth-child(2) .card__link { color: var(--ivg-gruen-hell); }
.block--welten .card:nth-child(2):focus-visible { outline-color: var(--color-accent); }
.block--welten .card:nth-child(4) {
grid-column: 1 / -1; min-height: 0; background: var(--ivg-gruen-flaeche); border-color: var(--ivg-gruen-hell);
}
.block--welten .card:nth-child(4)::before { background-color: var(--color-teal); width: 48px; height: 48px; }
@media (min-width: 900px) {
.block--welten .card:nth-child(4) { display: grid; grid-template-columns: 64px 1fr auto; column-gap: 28px; align-items: center; padding: 28px 32px; }
.block--welten .card:nth-child(4)::before { grid-row: 1 / span 2; margin: 0; }
.block--welten .card:nth-child(4) h3 { grid-column: 2; margin: 0; }
.block--welten .card:nth-child(4) p { grid-column: 2; }
.block--welten .card:nth-child(4) .card__link { grid-column: 3; grid-row: 1 / span 2; padding: 0; white-space: nowrap; }
}
/* Stufen (Energy System Stack): nummerierte Kacheln mit Mono-Kennung */
.block--stufen .card { padding: 24px; border-radius: 12px; }
.block--stufen .card__label { color: var(--color-text-muted); font-size: 0.75rem; }
.block--stufen .card h3 { font-size: 1.25rem; }
.block--stufen .card:first-child { background: var(--ivg-gruen); border-color: var(--ivg-gruen); }
.block--stufen .card:first-child p, .block--stufen .card:first-child .card__label,
.block--stufen .card:first-child .card__link { color: var(--color-navy); }
/* Marken: zwei große weiße Karten, dritte als schmale Leiste */
.block--marken .card { min-height: 280px; padding: 36px; }
.block--marken .card h3 { font-size: 1.75rem; }
/* Panel-Abschnitt (Service & Academy): #102B3A, Karten dunkel ohne Rand */
.section--navy.block--panel { background: var(--ivg-panel); }
.section--navy.block--panel .card { background: var(--color-navy); border-color: var(--color-navy); padding: 28px; }
.section--navy.block--panel .card__label { color: var(--ivg-gruen-hell); }
/* Kompass (Wissen): erste Karte dunkel wie im Mockup */
.block--kompass .card { padding: 24px; border-radius: var(--radius); min-height: 220px; }
.block--kompass .card h3 { font-size: 1.25rem; }
.block--kompass .card:first-child { background: var(--color-navy); border-color: var(--color-navy); }
.block--kompass .card:first-child h3 { color: #fff; }
.block--kompass .card:first-child p { color: var(--color-on-dark-muted); }
.block--kompass .card:first-child .card__label, .block--kompass .card:first-child .card__link { color: var(--ivg-gruen-hell); }
/* Partner-Leiste (Text links, Leistungen als Kacheln rechts) */
.block--kacheln .checklist { grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; }
.block--kacheln .checklist li {
background: var(--color-surface); border-radius: 12px; padding: 18px 18px 18px 50px;
font-family: var(--font-display); font-weight: 700; font-size: 1rem; color: var(--color-text);
}
.section--alt.block--kacheln .checklist li { background: var(--color-surface); }
.section:not(.section--alt).block--kacheln .checklist li { background: #fff; border: 1px solid var(--color-border); }
.block--kacheln .checklist li::before { left: 18px; top: 19px; }
/* Fachpartner (feature ohne Bild): Text links, Leistungen als Kacheln rechts */
.block--partner .container-narrow { max-width: none; padding-inline: 0; }
.block--partner .btn--navy { background: var(--ivg-gruen); color: var(--color-navy); }
.block--partner .btn--navy:hover { background: var(--ivg-gruen-hover); color: var(--color-navy); }
@media (min-width: 980px) {
.block--partner .container-narrow > .reveal {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 56px;
grid-template-rows: repeat(6, auto) 1fr; align-items: start;
}
.block--partner .container-narrow > .reveal > * { grid-column: 1; }
.block--partner .container-narrow > .reveal > .checklist { grid-column: 2; grid-row: 1 / -1; margin-top: 0; }
.block--partner .container-narrow > .reveal > .eyebrow { justify-self: start; }
}
/* ---------- Listen, Ablauf, Hinweise ---------- */
.checklist li { font-size: 1rem; color: var(--color-text); }
.checklist li::before { background-color: var(--color-teal); background-image: none; }
.section--navy .checklist li { color: #fff; }
.section--navy .checklist li::before { background-color: var(--ivg-gruen-hell); }
.ablauf-liste li { font-size: 1rem; }
.ablauf-liste li::before {
font-family: var(--font-mono); font-weight: 500; background: var(--color-navy); color: #fff; border-radius: 8px;
}
.section--navy .ablauf-liste li::before { background: var(--ivg-gruen); color: var(--color-navy); }
.hinweis-box {
background: #fff; border: 1px solid var(--color-border); border-left: 4px solid var(--ivg-gruen);
border-radius: var(--radius); padding: 20px 24px;
}
.hinweis-box p { font-size: var(--text-sm); color: var(--color-text-muted); }
.quellen__titel { font-size: var(--text-lg); }
.quellen, .quellen__stand { font-size: 0.875rem; color: var(--color-text-muted); }
/* ---------- Tabellen ---------- */
.table-wrap { border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: #fff; }
.tabelle, table { font-size: var(--text-sm); background: #fff; }
.tabelle thead th, table thead th {
background: var(--color-navy); color: #fff; font-family: var(--font-display); font-weight: 700;
font-size: var(--text-sm); padding: 14px 18px; border-bottom: 0;
}
.tabelle th, .tabelle td { padding: 14px 18px; border-bottom: 0; border-top: 1px solid var(--ivg-zeile); }
.tabelle tbody tr:first-child th, .tabelle tbody tr:first-child td { border-top: 0; }
.tabelle tbody th { background: #fff; font-weight: 600; color: var(--color-text); }
.tabelle td { color: var(--color-text); }
.tabelle caption { font-family: var(--font-display); font-weight: 700; }
.tabelle__hinweis { font-size: 0.875rem; color: var(--color-text-muted); }
/* ---------- FAQ: Zeilen statt Kästen ---------- */
.faq { gap: 0; background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px 28px; }
.faq details { border: 0; border-bottom: 1px solid var(--ivg-zeile); border-radius: 0; padding: 16px 0; background: none; }
.faq details:last-child { border-bottom: 0; }
.faq details[open] { border-color: var(--ivg-zeile); }
.faq summary { font-size: 1.0625rem; font-weight: 600; min-height: 28px; }
.faq summary::after { font-family: var(--font-mono); color: var(--color-text); font-size: 1.25rem; }
.faq details p { font-size: 1rem; color: var(--color-text-muted); }
/* ---------- Formulare ---------- */
.form input, .form textarea, .form select {
border: 1px solid #B9C5CA; border-radius: var(--radius-btn); background: #fff; min-height: 48px;
}
.form input:focus, .form textarea:focus, .form select:focus {
border-color: var(--color-accent); box-shadow: 0 0 0 3px rgba(29, 111, 148, 0.18); outline: none;
}
.form label { font-weight: 600; color: var(--color-text); }
.form input[type="checkbox"], .form input[type="radio"] { accent-color: var(--color-teal); min-height: 0; }
/* ---------- CTA-Band: Grün, Text links, Buttons rechts ---------- */
.cta-block, .cta-block--navy {
background: var(--ivg-gruen);
color: var(--color-navy);
border-radius: 20px;
padding: 44px clamp(24px, 4vw, 56px);
text-align: left;
display: grid;
grid-template-columns: 1fr;
gap: 12px 40px;
align-items: center;
box-shadow: none;
}
.cta-block::before, .cta-block::after { display: none !important; }
.cta-block h2 { color: var(--color-navy); font-size: clamp(1.625rem, 2.6vw, 2.5rem); margin: 0; }
.cta-block p { color: var(--color-navy); margin: 0; max-width: 60ch; }
.cta-block .eyebrow { color: var(--color-navy); }
.cta-block .btn-row { justify-content: flex-start; gap: 14px; }
.cta-block .btn--primary { background: var(--color-navy); color: #fff; }
.cta-block .btn--primary:hover { background: var(--ivg-panel); color: #fff; }
.cta-block .btn--ghost { background: transparent; border: 1px solid var(--color-navy); color: var(--color-navy); }
.cta-block .btn--ghost:hover { background: var(--color-navy); color: #fff; }
.cta-block a:focus-visible { outline-color: var(--color-navy); }
@media (min-width: 980px) {
.cta-block { grid-template-columns: minmax(0, 1fr) auto; }
.cta-block > * { grid-column: 1; }
.cta-block .btn-row { grid-column: 2; grid-row: 1 / span 3; flex-wrap: nowrap; }
}
section:has(> .container > .cta-block) { padding-top: 24px; }
/* ---------- Footer: dunkel, Spalten nach Gruppen ---------- */
.site-footer { background: var(--color-navy); color: var(--color-on-dark-muted); padding: 56px 0 32px; margin-top: 0; }
.site-footer a { color: var(--color-on-dark-muted); }
.site-footer a:hover { color: #fff; }
.footer-grid { gap: 32px; margin-bottom: 40px; }
@media (min-width: 720px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
.footer-grid { grid-template-columns: 1.6fr repeat(calc(var(--footer-spalten, 5) - 1), minmax(0, 1fr)); }
}
.footer-col .footer-col__title {
color: #fff; font-family: var(--font-body); font-weight: 600; font-size: var(--text-sm);
text-transform: none; letter-spacing: 0; margin-bottom: 14px;
}
.footer-col li, .footer-col p { font-size: var(--text-sm); }
.footer-brand { color: var(--color-on-dark-muted); font-size: var(--text-sm); }
.logo--footer .brand-logo--full { height: 64px; }
.footer-bottom { border-top-color: var(--ivg-linie-dunkel); color: var(--ivg-label-dunkel); font-size: var(--text-xs); }
.footer-social a { border-color: var(--ivg-rand-dunkel); }
/* Kleinteile */
.back-to-top { background: var(--color-navy); color: #fff; border-radius: 10px; }
.back-to-top svg { stroke: #fff; }
.vorschau-hinweis { background: #8A5A00; color: #fff; padding: 10px 16px; font-size: var(--text-sm); text-align: center; }
[data-ki-bild]::after { font-family: var(--font-mono); }
/* ---------- Startseite ---------- */
.ivg-hero { background: var(--color-navy); color: #fff; padding: 72px 0 120px; }
.ivg-hero__inner { display: grid; gap: 48px; align-items: center; }
@media (min-width: 1000px) { .ivg-hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 64px; } }
.ivg-hero__text { display: flex; flex-direction: column; gap: 26px; }
.ivg-hero__text .eyebrow { margin: 0; }
.ivg-hero h1 { color: #fff; font-size: clamp(2.5rem, 5vw, 4.125rem); line-height: 1.04; margin: 0; }
.ivg-hero__sub { color: var(--color-on-dark-muted); font-size: var(--text-lg); max-width: 600px; margin: 0; }
.ivg-hero__ctas { display: flex; flex-wrap: wrap; gap: 16px; }
.ivg-hero__trust { color: var(--ivg-label-dunkel); font-size: var(--text-sm); margin: 0; }
/* Statische Flussgrafik: seit 27.10.2026 nicht mehr im Hero (dort steht die
interaktive Ansicht), bleibt für andere Seiten mit einfacher Schemagrafik. */
.ivg-fluss { background: var(--ivg-panel); border: 1px solid var(--ivg-panel-rand); border-radius: 20px; padding: clamp(16px, 2.4vw, 32px); }
.ivg-fluss svg { width: 100%; height: auto; }
.ivg-fluss__fuss { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 16px; margin-top: 16px; font-size: var(--text-xs); color: var(--ivg-label-dunkel); }
.ivg-fluss__fuss span:last-child { font-family: var(--font-mono); }
/* Energiefluss-Ansicht im Hero (Änderung 2026-10-27, includes/ems-visualizer.php).
Der iframe liefert seine Höhe selbst; bis dahin hält aspect-ratio den Platz. */
.ivg-ems { background: var(--ivg-panel); border: 1px solid var(--ivg-panel-rand); border-radius: 20px; padding: clamp(12px, 1.6vw, 20px); }
.ivg-ems__rahmen { position: relative; }
.ivg-ems__ansicht { display: block; width: 100%; aspect-ratio: 1200 / 790; height: auto; border: 0; border-radius: 14px; background: #071520; color-scheme: dark; }
.ivg-ems__schalter {
display: inline-flex; align-items: center; gap: 7px;
font: inherit; font-size: var(--text-sm); font-weight: 600; line-height: 1;
padding: 9px 13px; border-radius: 11px; cursor: pointer;
color: #fff; background: rgba(7, 21, 32, 0.82); border: 1px solid rgba(255, 255, 255, 0.22);
backdrop-filter: blur(6px);
transition: background .2s ease, border-color .2s ease;
}
.ivg-ems__schalter:hover { background: rgba(7, 21, 32, 0.95); border-color: var(--ivg-fluss); }
.ivg-ems__schalter:focus-visible { outline: 3px solid var(--ivg-gruen-hell); outline-offset: 2px; }
.ivg-ems__symbol { width: 17px; height: 17px; }
.ivg-ems__fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-top: 12px; font-size: var(--text-xs); color: var(--ivg-label-dunkel); }
/* Kopfleiste über der Ansicht – nur im Vollbild. Sie liegt nicht über der
Grafik, sondern darüber: so verdeckt der Schließen-Schalter keine Karte. */
.ivg-ems__kopf { display: none; }
.ivg-ems__kopf-text { font-size: var(--text-sm); color: var(--ivg-label-dunkel); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ivg-ems__schliessen {
display: inline-flex; align-items: center; gap: 9px;
font: inherit; font-size: var(--text-base); font-weight: 700; line-height: 1;
padding: 12px 18px; border-radius: 12px; cursor: pointer;
color: var(--color-navy); background: var(--ivg-gruen); border: 1px solid var(--ivg-gruen);
transition: background .2s ease;
}
.ivg-ems__schliessen:hover { background: var(--ivg-gruen-hover); }
.ivg-ems__schliessen:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.ivg-ems__taste {
font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 600;
padding: 3px 7px; border-radius: 6px; background: rgba(10, 26, 36, 0.18); border: 1px solid rgba(10, 26, 36, 0.3);
}
/* Vollbild: der Rahmen füllt den Bildschirm, die Ansicht skaliert sich selbst. */
.ivg-ems.ist-vollbild { padding: 0; border: 0; border-radius: 0; background: #071520; display: flex; flex-direction: column; }
.ivg-ems.ist-vollbild .ivg-ems__kopf {
display: flex; align-items: center; justify-content: space-between; gap: 16px;
flex: 0 0 auto; padding: 10px 16px; background: var(--color-navy); border-bottom: 1px solid var(--ivg-panel-rand);
}
.ivg-ems.ist-vollbild .ivg-ems__rahmen { flex: 1 1 auto; display: flex; min-height: 0; }
.ivg-ems.ist-vollbild .ivg-ems__ansicht { aspect-ratio: auto; height: 100%; border-radius: 0; }
.ivg-ems.ist-vollbild .ivg-ems__fuss { display: none; }
.ivg-ems:fullscreen { padding: 0; border: 0; border-radius: 0; background: #071520; }
@media (max-width: 599px) {
.ivg-ems__kopf-text { display: none; }
.ivg-ems.ist-vollbild .ivg-ems__kopf { justify-content: flex-end; }
}
@media (max-width: 599px) {
.ivg-ems__schalter-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.ivg-ems__schalter { padding: 10px; }
}
/* Nutzerweiche „Ich bin …“ – Karte überlappt den Hero; ohne JavaScript (Radio-Tabs) */
.ivg-weiche { margin-top: -64px; position: relative; z-index: 2; padding-bottom: 40px; }
.ivg-weiche__karte { background: #fff; border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px); }
.ivg-weiche__kopf { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }
.ivg-weiche__kopf h2 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.ivg-weiche__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.ivg-weiche input[type="radio"] { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ivg-weiche label {
display: inline-flex; align-items: center; min-height: 44px; padding: 10px 18px; border-radius: 999px;
border: 1px solid #B9C5CA; background: #fff; color: var(--color-text); font-size: var(--text-sm); font-weight: 500; cursor: pointer;
}
.ivg-weiche label:hover { border-color: var(--color-navy); }
.ivg-weiche input:checked + label { background: var(--color-navy); border-color: var(--color-navy); color: #fff; }
.ivg-weiche input:focus-visible + label { outline: 2px solid var(--color-accent); outline-offset: 3px; }
.ivg-weiche__panel { display: none; margin-top: 28px; gap: 28px 48px; align-items: center; }
@media (min-width: 900px) { .ivg-weiche__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ivg-weiche__panel h3 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); margin: 0 0 12px; }
.ivg-weiche__panel p { margin: 0; }
.ivg-weiche__panel .btn { margin-top: 20px; }
.ivg-weiche__punkte { display: grid; gap: 12px; }
.ivg-weiche__punkte li {
position: relative; padding: 14px 18px 14px 50px; background: var(--color-surface); border-radius: 10px; color: var(--color-text); font-size: 1rem;
}
.ivg-weiche__punkte li::before {
content: ""; position: absolute; left: 18px; top: 17px; width: 20px; height: 20px; background-color: var(--color-teal);
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
/* Panel der gewählten Rolle; ohne :has()-Unterstützung bleibt „Installateur“ sichtbar */
.ivg-weiche:has(#weiche-privat:checked) [data-rolle="privat"],
.ivg-weiche:has(#weiche-installateur:checked) [data-rolle="installateur"],
.ivg-weiche:has(#weiche-haendler:checked) [data-rolle="haendler"],
.ivg-weiche:has(#weiche-gewerbe:checked) [data-rolle="gewerbe"],
.ivg-weiche:has(#weiche-planer:checked) [data-rolle="planer"] { display: grid; }
@supports not selector(:has(*)) { .ivg-weiche [data-rolle="installateur"] { display: grid; } }
.ivg-weiche + .section { padding-top: 72px; }
/* ---------- PV-Kalkulator: IVG-Feinschliff (Grundstil im Kern, style.css) ---------- */
.kalk__nr, .kalk__zwischen { font-family: var(--font-mono); font-weight: 500; }
.kalk__nr { color: var(--ivg-gruen-hell); }
.kalk__zwischen { color: var(--color-teal); }
.kalk__panel .eyebrow, .kalk__fertig .eyebrow { color: var(--ivg-gruen-hell); }
.kalk__preis { background: var(--ivg-panel); border-color: var(--ivg-panel-rand); }
.kalk__kennzahlen dt, .kalk__label, .kalk__liste th, .kalk__hinweise { color: var(--ivg-label-dunkel); }
.kalk__liste th, .kalk__liste td { border-bottom-color: var(--ivg-linie-dunkel); }
.kalk__option input, .kalk__zub > input, .kalk__karte .form__consent input { accent-color: var(--color-teal); }
.kalk__karte label > input, .kalk__karte label > select, .kalk__karte label > textarea { border-radius: var(--radius-btn); }
.kalk__fertig .eyebrow { font-family: var(--font-mono); }
/* ---------- Bewegung: Energiefluss (wiederkehrendes Systemelement) ---------- */
@keyframes ivgflow { to { stroke-dashoffset: -28; } }
.ivg-flow { stroke-dasharray: 6 8; animation: ivgflow 1.4s linear infinite; }
@media (prefers-reduced-motion: reduce) {
.ivg-flow { animation: none; }
}
@media (max-width: 767px) {
.section { padding: 56px 0; }
.page-hero { padding-bottom: 56px; }
.page-hero .crumb { margin-bottom: 48px; }
.ivg-hero { padding: 48px 0 96px; }
.card, .block--welten .card, .block--marken .card { padding: 24px; min-height: 0; }
.cta-block { padding: 32px 24px; }
}
/* ---------- TV-Aktion: IVG-Feinschliff (Grundstil im Kern, style.css) ---------- */
.tv__preis { color: var(--ivg-navy); font-family: var(--font-mono, var(--font-display)); letter-spacing: -0.02em; }
.tv__ergebnis { background: var(--ivg-ice, var(--color-surface)); border-color: rgba(20, 35, 50, 0.1); border-radius: var(--radius-btn, 14px); }
.tv__wahl { border-radius: var(--radius-btn, 12px); }
.tv__feld input { border-radius: var(--radius-btn, 10px); }
.tv__feld input:focus-visible { outline: 2px solid var(--ivg-green, #3fae49); outline-offset: 2px; }