/* ==========================================================================
Seitenstile fuer /stromspeicher-bess/ und /impressum/.
Alle Werte sind aus bestand-inhalt/dom/*.rendered.html (Inline-Styles und
generierte WP-Layout-Regeln) und bestand-inhalt/net/*.json (Computed Styles)
uebernommen und an bestand-inhalt/screenshots/ pixelweise gegengemessen.
Nichts hier ist geschaetzt - Aenderungen bitte nur gegen eine neue Messung.
ACHTUNG /stromspeicher-bess/: Die Seite ist im Original ein Stil-Fremdkoerper
(font-weight 700 statt 500, H1 96px statt 64px, Emoji in Ueberschriften,
Karten mit 2px-Kontur). Das ist so gewollt nachgebaut - nicht ans uebrige
Design angleichen (REPORT-inhalt.md 9.3.6).
========================================================================== */
.bess {
/* Fluide Schriftgroessen. Wortwoertlich aus den Inline-Styles des Originals;
dort steht (1vw - 0.2rem), was bei 16px Root identisch zu (1vw - 3.2px)
der Token-Datei ist. */
--bess-fs-subline: clamp(0.929rem, 0.929rem + ((1vw - 0.2rem) * 0.673), 1.4rem);
--bess-fs-hero-text: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.321), 1.1rem);
--bess-fs-h2: clamp(1.25rem, 1.25rem + ((1vw - 0.2rem) * 1.071), 2rem);
--bess-fs-h2-cta: clamp(1.352rem, 1.352rem + ((1vw - 0.2rem) * 1.211), 2.2rem);
--bess-fs-h3: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.464), 1.2rem);
--bess-fs-card-text: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.107), 0.95rem);
--bess-fs-h4: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.179), 1rem);
--bess-fs-case-text: clamp(0.875rem, 0.875rem + ((1vw - 0.2rem) * 0.036), 0.9rem);
/* Die Sektionspolster stehen im Original als feste px-Inline-Styles,
nicht als Spacing-Preset - deshalb hier ebenfalls fest. */
--bess-band-padding-block: 70px;
--bess-band-padding-inline: 40px;
--bess-card-radius: 8px;
}
/* --------------------------------------------------------------------------
Baender
Jede Sektion ist randlos breit, der Inhalt sitzt in 900px / 1100px / 800px.
Zwischen den Baendern liegen 20px weisser Grund (Block-Gap des Themes).
-------------------------------------------------------------------------- */
.bess-band {
margin-top: var(--space-20);
padding: var(--bess-band-padding-block) var(--bess-band-padding-inline);
}
.bess-band--dark {
background-color: var(--color-theme-5);
color: var(--color-theme-1);
--bess-band-padding-block: 80px;
}
.bess-band--light {
background-color: var(--color-theme-1);
}
.bess-band--muted {
background-color: var(--color-theme-2);
}
.bess-band__inner {
max-width: 900px;
margin-inline: auto;
}
.bess-band__inner--wide { max-width: 1100px; }
.bess-band__inner--narrow { max-width: 800px; }
/* Flow-Abstand des Themes: 20px zwischen allen Geschwistern. */
.bess .bess-band__inner > * + * {
margin-top: var(--space-20);
}
/* --------------------------------------------------------------------------
Typografie der Seite
Abweichend vom Rest der Site: Ueberschriften in 700, Farbe geerbt
(weiss auf den schwarzen Baendern, #1e1e1e sonst - im Original gibt es
hier kein reines Schwarz fuer Ueberschriften).
-------------------------------------------------------------------------- */
/* :where() haelt die Spezifitaet dieser Grundregeln auf Element-Niveau,
damit die Ausnahmen weiter unten (Subline, Kartentexte, CTA-Titel) mit
einer einzigen Klasse gewinnen. */
:where(.bess) :is(h1, h2, h3, h4) {
color: inherit;
font-weight: var(--fw-bold);
}
:where(.bess) h1 {
font-size: var(--fs-h1-bess);
}
:where(.bess) h2 {
font-size: var(--bess-fs-h2);
}
:where(.bess) h3 {
font-size: var(--bess-fs-h3);
line-height: var(--lh-h3);
}
:where(.bess) h4 {
font-size: var(--bess-fs-h4);
line-height: 1.3; /* gemessen 20.8px / 16px */
}
/* Absaetze erben Groesse und Zeilenhoehe aus tokens.css (16px / 1.65) -
das entspricht der Messung, deshalb steht hier keine Regel. */
/* Listen liegen hier auf Fliesstextgroesse, nicht auf --fs-li (19px);
gemessen 16px / 26.4px, identisch zum Absatz. */
.bess-list {
margin-block: 0;
padding-inline-start: 40px;
}
.bess-list li {
font-size: var(--fs-body);
line-height: var(--lh-body);
}
.bess-list li + li {
margin-top: 0;
}
.is-centered {
text-align: center;
}
/* --------------------------------------------------------------------------
Hero
-------------------------------------------------------------------------- */
.bess-hero__subline {
font-weight: var(--fw-regular);
font-size: var(--bess-fs-subline);
}
/* Doppelte Klasse, damit die festen 30px aus dem Inline-Style des Originals
den 20px-Flow-Abstand oben schlagen. */
.bess .bess-hero__rule {
/* color: inherit ist Pflicht - das UA-Stylesheet setzt fuer
hart
color: gray. Ohne die Zeile loest currentColor zu rgb(128,128,128) auf
und die Linie ist grau statt weiss (gemessen). */
color: inherit;
border: 0;
border-top: 2px solid currentColor;
margin: 30px 0;
}
.bess-hero__intro {
font-size: var(--bess-fs-hero-text);
}
/* --------------------------------------------------------------------------
Kartenraster
Im Original zwei WP-Spaltenbloecke mit gap: min(80px, 8vw). Unter 782px
stapeln die Spalten - derselbe Umbruchpunkt wie im Original.
-------------------------------------------------------------------------- */
.bess-cards {
display: grid;
/* minmax(0, 1fr) statt 1fr: das Original ist ein Flex-Raster mit
flex-basis: 0 und min-width: 0 - ohne die 0-Untergrenze wuerde eine
lange Vokabel ("Versorgungssicherheit") eine Spalte breiter druecken. */
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-50);
}
@media (max-width: 781px) {
.bess-cards {
grid-template-columns: 1fr;
}
}
.bess-card {
background-color: var(--color-theme-2);
border-radius: var(--bess-card-radius);
padding: 30px;
}
.bess-card__text {
font-size: var(--bess-fs-card-text);
}
.bess-case {
background-color: var(--color-theme-1);
border: 2px solid var(--color-theme-5);
border-radius: var(--bess-card-radius);
padding: 25px;
}
.bess-case__text {
font-size: var(--bess-fs-case-text);
}
.bess :is(.bess-card, .bess-case) > * + * {
margin-top: var(--space-20);
}
/* --------------------------------------------------------------------------
Abschluss-CTA
Button im Original: weiss auf schwarz, radius 0, padding 15px 35px,
Schriftgroesse = Preset "medium", Gewicht 450. Gemessen 355 x 70 px.
-------------------------------------------------------------------------- */
.bess-cta__title {
font-size: var(--bess-fs-h2-cta);
}
/* Der Buttonblock haengt im Original 1,5 Block-Gaps unter dem Absatz, nicht
einen: :root :where(.wp-block-buttons){margin-top:calc(var(--block-gap)*1.5)}
-> 30px auf 1920, 11,7px auf 390. Doppelte Klasse, um den Flow-Abstand zu
ueberschreiben. */
.bess .bess-cta__actions {
display: flex;
justify-content: center;
margin-top: calc(var(--space-20) * 1.5);
}
.bess-cta__button {
border-radius: 0;
padding: 15px 35px;
font-size: var(--fs-medium);
}
/* ==========================================================================
/impressum/
Einspaltig zentriert in der 620px-Textspalte. Rhythmus des Originals:
60px (= Spacing-Preset 40) zwischen den Bloecken, 20px zwischen Label und
Wert, 100px vor und nach dem Kontaktblock.
Das Original ist eine Kette aus und Spacer-Divs; hier steht eine
Definitionsliste - optisch deckungsgleich, semantisch korrekt.
========================================================================== */
.impressum {
padding-block: var(--space-40) 100px;
text-align: center;
}
.impressum__title {
/* Gemessen 96px Desktop / 43.5px Mobil - das Theme-Maximum, nicht die
64px der Startseite. */
font-size: var(--fs-xx-large);
color: var(--color-text);
}
.impressum__company {
margin-top: var(--space-40);
font-weight: var(--fw-bold);
}
.impressum__facts {
margin: 20px 0 0;
}
.impressum__facts > div + div {
margin-top: var(--space-40);
}
.impressum__facts dt {
font-weight: var(--fw-bold);
}
.impressum__facts dd {
margin: 20px 0 0;
}
.impressum__contact {
margin-top: 100px;
}
/* A3: Telefon und E-Mail sind im Original reiner Text. Hier klickbar. */
.impressum__contact a {
color: inherit;
text-decoration: underline;
}