b) EIN Absatz mit Umbruch (Shift+Enter), Wert fett ausgezeichnet:
98,7 kWp Anlagengröße
Fall b) braucht das , weil sich Text hinter einem nicht
ansprechen lässt – ohne Auszeichnung bliebe die Zeile Fließtext.
===================================================================== */
.vm-iconliste.ref-facts {
/* Nur der SPALTEN-Abstand; den Zeilenabstand holt sich .ref-facts weiter
oben aus --vm-iconliste-row-gap (greift, sobald die Eckdaten umbrechen). */
column-gap: 1.4rem;
margin: 2em 0;
}
.vm-iconliste.ref-facts .vm-icon-text {
align-items: flex-start;
gap: 0.6rem;
line-height: 1.35; /* der lockere Reader-Zeilenfall wäre hier zu luftig */
}
/* Icon in rem statt em: Es steht neben einer Zahl fester Größe und soll
nicht mitwachsen, wenn das Element in einem größeren Textkontext (z. B.
.vm-reader-content mit 1.075rem) steht. Höhe ≈ Höhe der Wertzeile. */
.vm-iconliste.ref-facts .vm-icon-text .vm-icon-text-icon {
width: 1.9rem;
height: 1.9rem;
font-size: 1rem;
margin-top: -0.15rem; /* das größere Icon optisch auf die Wertzeile ziehen */
}
/* --- a) zwei Absätze: erster = Wert, Rest = Bezeichnung ------------- */
.vm-iconliste.ref-facts .vm-icon-text-body > :first-child:not(:only-child) {
margin: 0;
color: var(--vm-primary, #004994);
font-weight: 700;
font-size: 1.25rem; /* 20px – Wert soll die Zeile tragen */
line-height: 1.25;
}
.vm-iconliste.ref-facts .vm-icon-text-body > :first-child:not(:only-child) ~ * {
margin: 0.35rem 0 0;
color: var(--vm-text, #333333);
font-weight: 400;
font-size: 1rem;
}
/* --- b) ein Absatz mit : das ist der Wert -------------- */
.vm-iconliste.ref-facts .vm-icon-text-body > :only-child {
margin: 0;
color: var(--vm-text, #333333);
font-size: 1rem;
}
.vm-iconliste.ref-facts .vm-icon-text-body > :only-child strong {
display: block; /* der Umbruch dahinter bleibt, das stört nicht */
margin-bottom: 0.35rem;
color: var(--vm-primary, #004994);
font-weight: 700;
font-size: 1.25rem; /* 20px – Wert soll die Zeile tragen */
line-height: 1.25;
}
/* Der Umbruch direkt hinter dem Wert wäre nach display:block eine leere
Zeile – er hat seine Aufgabe schon erledigt. */
.vm-iconliste.ref-facts .vm-icon-text-body > :only-child strong + br { display: none; }
/* Enge Spalten (Tablet/Mobil): Zahl und Bezeichnung dürfen kleiner werden,
damit „Inbetriebnahme" neben dem Icon nicht mitten im Wort umbricht. */
@media (max-width: 700px) {
.vm-iconliste.ref-facts { column-gap: 1.2rem; }
.vm-iconliste.ref-facts .vm-icon-text .vm-icon-text-icon { width: 1.7rem; height: 1.7rem; }
.vm-iconliste.ref-facts .vm-icon-text-body > :first-child:not(:only-child),
.vm-iconliste.ref-facts .vm-icon-text-body > :only-child strong { font-size: 1.15rem; }
.vm-iconliste.ref-facts .vm-icon-text-body > :first-child:not(:only-child) ~ *,
.vm-iconliste.ref-facts .vm-icon-text-body > :only-child { font-size: 0.95rem; }
}
/* ==========================================================
VM Component Library · be on solar
Component: VM Teaserbox
Version: 2.0.0
Baut auf .vm-card auf (Rahmen, Radius, Schatten, Hover,
Kartenfarben, invertierter Text) und ergänzt das Layout
„Bild oben, Inhalt darunter".
Farben werden komplett über die :root-Variablen aus
custom_vm_icon_boxes.css bezogen (Primär = Rot-Orange #004994).
========================================================== */
/* Karte als vertikale Spalte: Bild oben, Body füllt den Rest.
.vm-card liefert Höhe (height:100%), Rahmen, Radius, Schatten,
Hover und die ::before-Akzentleiste. */
.vm-teaserbox .vm-teaser {
display: flex;
flex-direction: column;
}
/* --- Bild: randlos oben --- */
.vm-teaser-image {
display: block;
position: relative;
margin: 0;
line-height: 0;
overflow: hidden;
background: rgba(0, 0, 0, 0.04);
}
.vm-teaser-image figure { margin: 0; height: 100%; }
/* Original (kein Format gewählt): natürliches Seitenverhältnis */
.vm-teaser-image img,
.vm-teaser-image picture {
display: block;
width: 100%;
height: auto;
}
/* Mit Bildformat: festes Seitenverhältnis + formatfüllender Beschnitt */
.vm-teaserbox.-ratio-1-1 .vm-teaser-image { aspect-ratio: 1 / 1; }
.vm-teaserbox.-ratio-4-3 .vm-teaser-image { aspect-ratio: 4 / 3; }
.vm-teaserbox.-ratio-3-2 .vm-teaser-image { aspect-ratio: 3 / 2; }
.vm-teaserbox.-ratio-16-9 .vm-teaser-image { aspect-ratio: 16 / 9; }
.vm-teaserbox.-ratio-3-4 .vm-teaser-image { aspect-ratio: 3 / 4; }
.vm-teaserbox[class*="-ratio-"] .vm-teaser-image img,
.vm-teaserbox[class*="-ratio-"] .vm-teaser-image picture {
height: 100%;
object-fit: cover;
}
/* sanfter Zoom, wenn das Bild verlinkt ist und man die Karte hovert */
.vm-teaser a.vm-teaser-image img { transition: transform 0.45s ease; }
.vm-teaser:hover a.vm-teaser-image img { transform: scale(1.04); }
/* --- Bildunterschrift (z. B. KI-Kennzeichnung) ---------------------
Bild + Caption stecken in ; die
figcaption liegt als Overlay-Badge unten links AUF dem Bild.
Weil sie position:absolute ist, ist die Bildhöhe egal -> funktioniert
auch im Featured-Aufmacher (Bild auf 100 % Höhe). Wird auch von den
News-Kacheln genutzt (gleiches Markup). */
.vm-teaser-figure {
margin: 0;
position: relative; /* Positionierungskontext der Caption */
}
.vm-teaser-caption {
position: absolute;
right: 0.6rem;
bottom: 0.6rem;
z-index: 2;
margin: 0;
padding: 0.2em 0.6em;
border-radius: var(--vm-radius-small);
background: rgba(255, 255, 255, 0.8); /* ≥ 75 % Deckkraft */
color: var(--vm-primary); /* Rot-Orange #004994 */
font-size: 0.75rem;
line-height: 1.35;
text-align: left;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
pointer-events: none; /* blockiert Bild-Link / Hover-Zoom nicht */
}
/* In der Teaserbox nach rechts, damit die Caption nicht mit dem Badge-Icon
(unten links auf der Bildkante) kollidiert. News-Kacheln (kein Badge)
bleiben unten links. */
.vm-teaserbox .vm-teaser-caption {
left: auto;
right: 0.6rem;
text-align: right;
}
/* --- Body: gepolsterter Inhaltsbereich, füllt die restliche Höhe --- */
.vm-teaser-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: var(--vm-card-padding);
}
/* Inhalt wächst -> Button bleibt unten in der Karte */
.vm-teaser-content {
flex: 1 1 auto;
min-width: 0;
}
.vm-teaser .vm-card-icon { margin-bottom: 1.25rem; }
.vm-teaser .vm-card-action { margin-top: 1.5rem; }
/* ==========================================================
Ausrichtung
========================================================== */
.vm-teaser.-align-center .vm-teaser-body {
text-align: center;
align-items: center;
}
.vm-teaser.-align-right .vm-teaser-body {
text-align: right;
align-items: flex-end;
}
/* ==========================================================
Icon-Varianten
========================================================== */
.vm-teaser.-large-icon .vm-card-icon {
width: 4.5rem;
height: 4.5rem;
}
.vm-teaser.-large-icon .vm-card-icon .vm-icon {
width: 2.05rem;
height: 2.05rem;
}
.vm-teaser.-inverted-icon .vm-card-icon {
color: var(--vm-white); /* Icon (currentColor) wird weiß */
background: var(--vm-primary);
}
/* Icon neben der Überschrift: Icon links, Inhalt rechts, IMMER linksbündig */
.vm-teaser.-headline-icon .vm-teaser-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 1rem;
row-gap: 0.75rem;
text-align: left;
align-items: start;
}
.vm-teaser.-headline-icon .vm-card-icon {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
.vm-teaser.-headline-icon .vm-teaser-content {
grid-column: 2;
grid-row: 1;
}
.vm-teaser.-headline-icon .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 1rem;
}
/* ==========================================================
Icon KLEIN neben der Überschrift
========================================================== */
.vm-teaser.-headline-icon-small .vm-teaser-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.85rem;
row-gap: 0.75rem;
text-align: left;
align-items: start;
}
.vm-teaser.-headline-icon-small .vm-card-icon {
grid-column: 1;
grid-row: 1;
width: 2.5rem; /* kompakt statt 64px */
height: 2.5rem;
border-radius: 0.7rem;
margin-bottom: 0;
}
.vm-teaser.-headline-icon-small .vm-card-icon .vm-icon {
width: 1.15rem;
height: 1.15rem;
}
.vm-teaser.-headline-icon-small .vm-teaser-content {
grid-column: 2;
grid-row: 1;
}
.vm-teaser.-headline-icon-small .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 1rem;
}
/* ==========================================================
Icon als schwebendes Badge auf der Bildunterkante
========================================================== */
.vm-teaser.-badge-icon .vm-teaser-body {
position: relative;
/* Platz schaffen, damit die Überschrift nicht unter dem Badge sitzt */
padding-top: calc(var(--vm-card-padding) + 2.25rem);
}
.vm-teaser.-badge-icon .vm-card-icon {
position: absolute;
top: 0; /* = Oberkante Body = Unterkante Bild */
left: var(--vm-card-padding);
transform: translateY(-50%); /* Badge sitzt mittig auf der Bildkante */
margin: 0;
z-index: 2;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
/* Badge folgt der Textausrichtung */
.vm-teaser.-badge-icon.-align-center .vm-card-icon {
left: 50%;
transform: translate(-50%, -50%);
}
.vm-teaser.-badge-icon.-align-right .vm-card-icon {
left: auto;
right: var(--vm-card-padding);
}
/* ==========================================================
Split-Layout: Bild NEBEN Text (Feld „Layout")
-media -> Bild und Text nebeneinander
-media-image-right -> Bild rechts (Standard des -media: Bild links)
Am besten mit 1 Spalte / breiter Box. Auf Mobil gestapelt (s. u.).
========================================================== */
.vm-teaser.-media {
flex-direction: row;
align-items: stretch;
}
.vm-teaser.-media.-media-image-right {
flex-direction: row-reverse;
}
/* Bildspalte füllt die Kartenhöhe (kein festes Seitenverhältnis) */
.vm-teaser.-media .vm-teaser-image {
flex: 0 0 45%;
align-self: stretch;
aspect-ratio: auto;
height: auto;
}
.vm-teaser.-media .vm-teaser-figure { height: 100%; }
.vm-teaser.-media .vm-teaser-image img,
.vm-teaser.-media .vm-teaser-image picture {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Text vertikal mittig (wie im Beispiel „Ihre Unterstützung hilft.") */
.vm-teaser.-media .vm-teaser-body {
justify-content: center;
}
/* ==========================================================
Responsive
========================================================== */
@media (max-width: 900px) {
.vm-teaser-body { padding: 1.6rem; }
.vm-teaser.-headline-icon .vm-teaser-body { display: flex; }
.vm-teaser.-headline-icon .vm-card-action { margin-top: 1.5rem; }
/* Split-Layout auf Mobil stapeln: Bild oben, Text darunter */
.vm-teaser.-media,
.vm-teaser.-media.-media-image-right {
flex-direction: column;
}
.vm-teaser.-media .vm-teaser-image {
flex: 0 0 auto;
height: auto;
}
.vm-teaser.-media .vm-teaser-image img,
.vm-teaser.-media .vm-teaser-image picture {
height: auto;
}
}
/* =====================================================================
be on solar – VM TEAMBOX (Ansprechpartner)
---------------------------------------------------------------------
Personenkarten: Porträt, Funktion, Name, Kontaktwege.
Die Karte selbst bringt NICHTS Eigenes mit: Das Template gibt dasselbe
Markup aus wie die Teaserbox (.vm-card / .vm-teaser / .vm-teaser-image /
.vm-teaser-body / .vm-teaser-content). Rahmen, Radius, Schatten, Hover,
Kartenfarben, Rasterengine, Spaltenverhältnisse, „Karten ohne Abstand",
Trennlinien und das Verhalten auf dunklem Grund kommen daher aus
custom_vm_icon_boxes.css und custom_vm_teaser_boxes.css.
Hier steht nur, was es bei einer Person zusätzlich gibt: die Liste der
Kontaktwege.
NACH custom_vm_icon_boxes.css, custom_vm_teaser_boxes.css und
custom_vm_icons.css laden.
===================================================================== */
.vm-teambox,
.vm-teambox * { box-sizing: border-box; }
/* --- Karte als Spalte ------------------------------------------------
`.vm-card` bringt `height: 100%` mit, die Karte füllt also ihre
Rasterzeile. Das allein reicht nicht: Solange die Karte ein Block ist,
bleibt `.vm-teaser-body` nur so hoch wie sein Inhalt, `flex: 1 1 auto`
an `.vm-teaser-content` hat nichts zu verteilen, und der freie Platz
sammelt sich unsichtbar unter der Karte. Bei unterschiedlich langen
Qualifikationszeilen stehen die Kontaktblöcke dann auf verschiedenen
Höhen – gemessen auf /unternehmen/team, wo Frank Fürstenau zwei Zeilen
hat und die beiden anderen eine.
Die Teaserbox löst das mit `.vm-teaserbox .vm-teaser { display: flex }`.
Diese Regel greift hier nicht, weil die Umschlagklasse `.vm-teambox`
heißt. Bewusst hier wiederholt statt den Selektor drüben zu erweitern:
Die Teaserbox soll sich nicht mitändern, wenn an der Teambox etwas
angefasst wird. */
.vm-teambox .vm-teaser {
display: flex;
flex-direction: column;
}
/* --- Name mit Erkennungsquadrat -------------------------------------
Bei einer Person ist der NAME die Hauptinformation – das Quadrat sitzt
deshalb hier und nicht an der Funktion darunter (bei den übrigen Boxen
trägt es der Vortitel, dort steht die Einordnung ja zuerst).
Bewusst `inline-block` und kein Flex-Container: Bei einem langen Namen
soll die zweite Zeile unter dem Text beginnen, nicht unter dem Quadrat. */
.vm-teambox .vm-team-name::before {
content: "";
display: inline-block;
width: 0.62em;
height: 0.62em;
margin-right: 0.55em;
border-radius: 3px;
background: var(--vm-cta, #fbba00);
vertical-align: 0.08em;
}
/* --- Funktion unter dem Namen ---------------------------------------
Ohne Quadrat, in normaler Schriftstärke: Sie ordnet ein, sie ruft
nicht. Die Elternklasse ist nötig, weil ONEO `.main-content p` mit
eigenen Abständen belegt. */
.vm-teambox .vm-team-funktion {
margin: 0 0 0.75rem;
color: var(--vm-text-2, #6b6b6a);
font-weight: 400;
line-height: 1.35;
}
.-color-inverted .vm-teambox .vm-team-funktion {
color: rgba(255, 255, 255, 0.8);
}
/* Mindestabstand zwischen Text und Trennlinie.
`margin-top: auto` an der Liste frisst allen freien Platz – ohne diesen
Abstand klebte die Linie in der längsten Karte direkt am Text. Hier
steht also das Minimum, das auch die vollste Karte behält. */
.vm-teambox .vm-teaser-content { margin-bottom: 1.1rem; }
/* --- Kontaktwege ----------------------------------------------------
Sitzt am unteren Rand der Karte, durch eine feine Linie vom Namen
getrennt – wie im Entwurf. `margin-top: auto` schiebt den Block nach
unten, damit die Kontaktzeilen bei unterschiedlich langen Texten auf
einer Höhe stehen. Das funktioniert nur zusammen mit der Flex-Spalte
ganz oben in dieser Datei.
Ausgerichtet wird am UNTEREN Rand. Die Trennlinien liegen damit auf
einer Höhe, solange alle Karten gleich viele Kontaktzeilen haben.
Bekommt eine Person eine Zeile mehr oder weniger, rutscht ihre Linie
entsprechend – das ist der Preis dafür, ohne `subgrid` auszukommen und
die gemeinsame Card-Basis nicht anzufassen. */
/* `ul.` und die Elternklasse ergeben 0,2,1 und schlagen damit ONEOs
`.main-content ul { list-style: disc; padding-left: 1.46667em }` (0,1,1)
sicher – ohne diese Regel stehen Aufzählungspunkte vor den Kontakten
und die Zeilen sind eingerückt. */
.vm-teambox ul.vm-team-kontakt {
list-style: none;
margin: auto 0 0;
padding: 1.1rem 0 0;
padding-left: 0;
border-top: 1px solid var(--vm-border, #e3e8ee);
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Manche Theme-Fassungen setzen Listenpunkte zusätzlich über ::before. */
.vm-teambox ul.vm-team-kontakt li::before {
display: none !important;
}
.vm-teambox .vm-team-kontaktzeile {
display: flex;
align-items: center;
gap: 0.6rem;
margin: 0;
min-height: 1.9rem; /* ruhiges Raster, auch ohne Icon */
line-height: 1.35;
}
.vm-teambox .vm-team-kontaktzeile .vm-icon {
flex: 0 0 auto;
width: 1.15em;
height: 1.15em;
color: var(--vm-primary, #004994);
/* `line-height: 1` verhindert, dass die Zeilenbox des Icons höher wird
als das Icon selbst – sonst sitzt es sichtbar zu hoch, obwohl die
Zeile auf `align-items: center` steht. */
line-height: 1;
}
.vm-teambox .vm-team-kontaktzeile a {
color: var(--vm-primary, #004994);
font-weight: 600;
text-decoration: none;
transition: color var(--vm-transition, 200ms ease);
/* Lange E-Mail-Adressen dürfen in schmalen Spalten umbrechen, statt
die Karte aufzuweiten. */
min-width: 0;
overflow-wrap: anywhere;
}
.vm-teambox .vm-team-kontaktzeile a:hover,
.vm-teambox .vm-team-kontaktzeile a:focus-visible {
color: var(--vm-primary-hover, #003a76);
}
/* Zeile ohne Link (Art „Sonstiges") – reine Information. */
.vm-teambox .vm-team-kontaktzeile > span:last-child {
color: var(--vm-text-2, #6b6b6a);
min-width: 0;
overflow-wrap: anywhere;
}
/* --- Auf dunklem Grund ---------------------------------------------
Greift automatisch über die Wrapper-Klasse des Umschlagelements,
siehe custom_vm_icon_boxes.css. */
.-color-inverted .vm-teambox .vm-team-kontakt {
border-top-color: rgba(255, 255, 255, 0.22);
}
.-color-inverted .vm-teambox .vm-team-kontaktzeile .vm-icon {
color: var(--vm-cta, #fbba00);
}
.-color-inverted .vm-teambox .vm-team-kontaktzeile a,
.-color-inverted .vm-teambox .vm-team-kontaktzeile > span:last-child {
color: var(--vm-white, #ffffff);
}
.-color-inverted .vm-teambox .vm-team-kontaktzeile a:hover,
.-color-inverted .vm-teambox .vm-team-kontaktzeile a:focus-visible {
color: var(--vm-cta, #fbba00);
}
/* --- Ausrichtung zentriert ------------------------------------------
Bei zentrierten Karten sollen auch die Kontaktzeilen mittig stehen,
sonst hängt der Block optisch links. */
.vm-teambox .vm-card.-align-center .vm-team-kontaktzeile {
justify-content: center;
}
/* =====================================================================
VM Buttons – konsolidiert · be on solar
Nach dem ONEO-Framework-CSS laden. Vereinheitlicht ALLE Buttons
(globaler .button + .vm-card-link.button in Iconbox/Teaser).
Kernfix: font-size in REM + symmetrisches Padding = überall gleiche Höhe.
--vm-btn-font ist die zentrale Stellschraube für die Buttongröße.
Varianten: Aktion (Orange, Basis) · Dunkelblau (#004994) · Schwarz (#333) ·
Hellgrau · Weiß · Transparent (2px Rahmen in Blau)
Radius: 10px / kleiner Button 8px – bewusst kantig, passend zur Logo-Kachel.
FARBLOGIK be on solar:
- Basis = Orange (--vm-cta) mit DUNKLER Schrift (--vm-cta-text). Orange
trägt niemals weiße oder helle Schrift, das wäre unlesbar (1,7:1).
- Transparent (-outline) = Blau, der zweite Weg neben der Hauptaktion.
===================================================================== */
:root {
--vm-btn-font: 1.15rem; /* <- hier die Buttongröße global justieren */
}
/* 1) GEMEINSAMES BOX-MODEL -------------------------------------------- */
.button,
.headline-box-link,
.highlight-box-link {
box-sizing: border-box;
padding: 0.64286em 1.42857em; /* symmetrisch */
border: 2px solid var(--vm-cta, #fbba00);
border-width: 2px !important; /* ONEO-Basis nutzt 1px, Varianten 2px -> hier auf 2px vereinheitlichen (nur Breite, Farbe bleibt je Variante) */
border-image: none !important; /* ONEO-Rahmenverlauf aus */
border-radius: var(--vm-radius, 10px) !important;
font-size: var(--vm-btn-font) !important;
line-height: 1.42929;
letter-spacing: 0.05rem;
font-weight: 400;
color: var(--vm-cta-text, #333333);
font-weight: 700;
text-align: center;
text-decoration: none !important;
text-transform: none !important; /* kein ONEO-UPPERCASE */
background: var(--vm-cta, #fbba00); /* Aktionsfarbe Orange, Schrift #333 = 7,3:1 */
background-image: none !important; /* ONEO-Hintergrundverlauf aus */
box-shadow: none !important; /* ONEO-Schatten aus */
text-shadow: none !important; /* ONEO-Textschatten aus */
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
/* Card-Link: gleiche Maße erzwingen (überschreibt alte 0.75em / 1.15em-Regel)
padding + line-height mit !important, damit ONEO sie nicht je nach
Ladereihenfolge überschreibt. Nur Maße – Farbe bleibt je Variante. */
.vm-card-link.button {
display: inline-flex !important; /* ONEO setzt .button = inline-block; hier flex erzwingen, sonst kippt die Höhe je Variante */
align-items: center;
justify-content: center;
padding: 0.64286em 1.42857em !important;
line-height: 1.42929 !important;
font-size: var(--vm-btn-font) !important;
}
/* Flex-Item auf Zeilenhöhe heben, damit die Buttonhöhe nicht auf die
Glyphenhöhe (font-size) zusammenfällt -> alle Varianten gleich hoch */
.vm-card-link.button .vm-card-link-text {
line-height: 1.42929;
}
/* ONEO-Overlay (::after) abschalten, Pfeil-Icon vertikal sauber */
.button::after,
.headline-box-link::after,
.highlight-box-link::after { display: none !important; }
.button::before { top: 0.05em; }
/* Basis/Aktion – Hover */
.button:hover, .button:focus-visible,
.headline-box-link:hover, .highlight-box-link:hover {
background: var(--vm-cta-dark, #e0a600); border-color: var(--vm-cta-dark, #e0a600);
color: var(--vm-cta-text, #333333);
transform: translateY(-1px);
}
/* 2) FARBVARIANTEN (be on solar) -------------------------------------------
Akzent = Basis (.button, ohne Modifier: Orange, dunkle Schrift #333).
Dazu 5 Modifier. Rahmenbreite ist global 2px (s. Abschnitt 1). */
/* Dunkelblau (-navy) – Markenblau als Fläche, weiße Schrift (8,8:1).
Die gefüllte Schwester von „Transparent (Rahmen)": gleiche Farbe, aber
als Vollfläche – für Seiten, auf denen Orange zu laut wäre. */
.button.-navy,
.headline-box-link.-navy,
.vm-card-link.button.-navy {
background: var(--vm-primary); border-color: var(--vm-primary); color: var(--vm-white);
}
.button.-navy:hover, .button.-navy:focus-visible,
.headline-box-link.-navy:hover,
.vm-card-link.button.-navy:hover, .vm-card-link.button.-navy:focus-visible {
background: var(--vm-primary-dark); border-color: var(--vm-primary-dark); color: var(--vm-white);
}
/* Schwarz – Standard-Schriftfarbe als Fläche (-dark)
Hover geht ins Tiefschwarz (nicht ins Blau), damit „Schwarz" und
„Dunkelblau" nebeneinander unterscheidbar bleiben. */
.button.-dark,
.headline-box-link.-dark,
.vm-card-link.button.-dark {
background: var(--vm-text); border-color: var(--vm-text); color: var(--vm-white);
}
.button.-dark:hover, .button.-dark:focus-visible,
.headline-box-link.-dark:hover,
.vm-card-link.button.-dark:hover, .vm-card-link.button.-dark:focus-visible {
background: #1a1a1a; border-color: #1a1a1a; color: var(--vm-white);
}
/* Hellgrau (-grey) – dunkle Schrift auf hellem Grau */
.button.-grey,
.headline-box-link.-grey,
.vm-card-link.button.-grey {
background: var(--vm-grey); border-color: var(--vm-border); color: var(--vm-text);
}
.button.-grey:hover, .button.-grey:focus-visible,
.headline-box-link.-grey:hover,
.vm-card-link.button.-grey:hover, .vm-card-link.button.-grey:focus-visible {
background: var(--vm-border-neutral); border-color: var(--vm-text); color: var(--vm-text);
}
/* Weiß (-white) – weiße Fläche, dunkle Schrift, dezenter Rahmen */
.button.-white,
.headline-box-link.-white,
.vm-card-link.button.-white {
background: var(--vm-white);
border-color: rgba(51, 51, 51, 0.18); /* definierter als --vm-border -> Kante bleibt auf hellem Grund sichtbar */
color: var(--vm-text);
box-shadow: 0 2px 6px rgba(51, 51, 51, 0.16) !important; /* leichte Abhebung, damit die volle Höhe sichtbar wird */
}
.button.-white:hover, .button.-white:focus-visible,
.headline-box-link.-white:hover,
.vm-card-link.button.-white:hover, .vm-card-link.button.-white:focus-visible {
background: var(--vm-grey); border-color: var(--vm-text); color: var(--vm-text);
box-shadow: 0 4px 12px rgba(51, 51, 51, 0.22) !important;
}
/* Transparent (-outline) – 2px Rahmen in Blau, der zweite Weg neben der
Hauptaktion. Blau auf Weiß = 8,8:1, gefüllt Weiß auf Blau ebenfalls 8,8:1. */
.button.-outline,
.headline-box-link.-outline,
.vm-card-link.button.-outline {
background: transparent; border-color: var(--vm-primary); color: var(--vm-primary);
}
.button.-outline:hover, .button.-outline:focus-visible,
.headline-box-link.-outline:hover,
.vm-card-link.button.-outline:hover, .vm-card-link.button.-outline:focus-visible {
background: var(--vm-primary); border-color: var(--vm-primary); color: var(--vm-white);
}
/* Buttons in invertierten (dunklen) Boxen ----------------------------
Wird eine Box auf „Textfarbe invertieren" gestellt und der Hintergrund
von Hand auf Markenblau (#004994) gelegt, verschmilzt der Button mit der
Fläche: die hellen Varianten schlagen im Hover auf #004994 um, die
Standard-Variante ist schon im Ruhezustand gleichfarbig. Eine
durchgängig weiße Outline (Ruhezustand + Hover/Fokus) hält die
Buttonform in jedem Zustand sichtbar – Farb- und Textlogik bleiben. */
.vm-card--inverted .vm-card-link.button,
.vm-card--inverted .vm-card-link.button:hover,
.vm-card--inverted .vm-card-link.button:focus-visible {
border-color: var(--vm-white);
}
/* Buttons auf zentriertem, invertiertem Hintergrund (heller Text) -----
Gleiches Problem wie in den invertierten Boxen: auf dunklem Grund
verschmelzen Standard- und Hover-Fläche mit dem Hintergrund. Dieselbe
durchgängig weiße Outline (Ruhezustand + Hover/Fokus) hält die
Buttonform sichtbar – Farb- und Textlogik bleiben. */
.centered-wrapper.-color-inverted .button,
.centered-wrapper.-color-inverted .button:hover,
.centered-wrapper.-color-inverted .button:focus-visible,
.centered-wrapper.-color-inverted .vm-card-link.button,
.centered-wrapper.-color-inverted .vm-card-link.button:hover,
.centered-wrapper.-color-inverted .vm-card-link.button:focus-visible,
.centered-wrapper.-color-inverted .headline-box-link,
.centered-wrapper.-color-inverted .headline-box-link:hover,
.centered-wrapper.-color-inverted .highlight-box-link,
.centered-wrapper.-color-inverted .highlight-box-link:hover {
border-color: var(--vm-white);
}
/* 3) KLEINER BUTTON --------------------------------------------------- */
.button.-small,
.vm-card-link.button.-small {
padding: 0.4em 0.95em;
font-size: 16px !important; /* barrierearm: feste Mindestgröße */
border-radius: var(--vm-radius-small, 7px) !important;
}
/* --- Textlink (VM Button, Variante „Textlink") ----------------------
Kein Kasten – reiner Link im Logo-Blau, Icon per .vm-icon-Maske davor. */
.vm-textlink {
display: inline-flex;
align-items: center;
gap: 0.4em;
color: var(--vm-primary);
font-weight: 700;
font-size: var(--vm-btn-font);
line-height: 1.3;
text-decoration: none;
letter-spacing: 0.02em;
transition: color .2s ease;
}
.vm-textlink:hover,
.vm-textlink:focus-visible {
color: var(--vm-primary-hover);
}
.vm-textlink::before { margin: 0; top: 0; }
/* --- RSCE „VM Buttons": ein oder mehrere Buttons/Links --------------
Standard = UNTEREINANDER (Spalte), an der gewählten Seite ausgerichtet.
`-inline` = NEBENEINANDER (ONEO-Standard, geringer Abstand, umbruchfähig).
Das Icon (CSS-Maske, .vm-icon) sitzt links vom Text. */
.vm-buttons {
display: flex;
flex-direction: column; /* untereinander */
align-items: flex-start; /* linksbündig */
gap: 0.75rem;
margin: 0;
}
.vm-buttons.-center { align-items: center; }
.vm-buttons.-right { align-items: flex-end; }
/* Nebeneinander (inline) – ONEO-Standardfluss (inline-block-Buttons in
einer Zeile, geringer Wortabstand, umbruchfähig).
display: inline-block !important – ein Flex-Row-Kontext blieb bei ONEO
wirkungslos (Buttons standen weiter untereinander); inline-block bleibt in
einer Zeile, respektiert aber margin/padding (anders als display:inline),
damit die margin-Utility-Klassen greifen. Der Abstand kommt vom Wortabstand
zwischen den Links bzw. per margin-Klasse.
Matcht die Dropdown-Option (-inline) UND eine manuell vergebene Klasse (inline). */
.vm-buttons.-inline,
.vm-buttons.inline {
display: inline-block !important;
}
/* Button in dieser Reihe = inline-flex (ONEO: .button = inline-block),
damit das Icon sauber neben dem Text steht. */
.vm-buttons .button {
display: inline-flex !important;
align-items: center;
justify-content: center;
gap: 0.5em;
}
/* Icon-Maße im Button/Textlink an die Schriftgröße koppeln */
.vm-buttons .button .vm-icon,
.vm-buttons .vm-textlink .vm-icon {
width: 1.05em;
height: 1.05em;
flex: 0 0 auto;
}
/* =====================================================================
be on solar – ZENTRALE FAQ-SEITE
---------------------------------------------------------------------
Zur Vorlage mod_faqpage_vm.html.twig · Verhalten: js/vm_faq.js
AUFBAU
.vm-faq-kopf hellblaues Band: Vortitel, H1, Suche, Themenfilter
.vm-faq-uebersicht Fläche hinter dem Kartenraster
.vm-faq-karten Kartenraster, je Kategorie eine Karte
.vm-faq-karte Icon, Claim, Anzahl, Fragen, Fußlink
Die Fragen selbst sehen aus wie das Akkordeon auf den Leistungsseiten
(custom_vm_accordion.css) – nur eine Nummer kleiner, weil sie hier in
einer Karte stehen. Technisch ist es ein anderes Bauteil: dort
ce_accordion mit jQuery UI, hier / ohne JavaScript.
Nach custom_vm_base.css, custom_vm_buttons.css, custom_vm_icons.css
und custom_vm_preheadline.css laden.
===================================================================== */
.vm-faq {
/* Der Ton des Kopfbands – derselbe wie im Kartenbereich und im
Call-to-action darunter. Bewusst NICHT der etwas kräftigere Blauton:
Den verwendet die Quicknav, die auf dem Telefon dicht darunter liegt.
Zwei fast gleiche Blautöne übereinander sehen nach Versehen aus; mit
einem durchgehenden hellen Grund hebt sich die Quicknav dagegen ab. */
--vm-faq-band: var(--vm-surface-light, #f4f7fa);
/* Trennlinie zwischen den Fragen – wie im Akkordeon kräftiger als
--vm-border, weil sie eine Liste gliedert und nicht nur eine Kante
andeutet. In der Karte etwas heller, der Rahmen trägt schon. */
--vm-faq-linie: #dde6f0;
/* Seitlicher Abstand. Die Seite läuft ohne centered-wrapper, damit das
hellblaue Band über die volle Breite geht – der Abstand muss deshalb
hier entstehen und nicht vom Theme kommen. Eine Variable, weil ihn
Band und Kartenraster gemeinsam brauchen. */
--vm-faq-rand: clamp(1.15rem, 3vw, 3rem);
/* Abstand zwischen den Filter-Chips. Als Variable, weil ihn die
Spaltenaufteilung auf schmalen Geräten mit einrechnen muss. */
--vm-faq-chip-gap: 0.5rem;
/* Größte Breite der aufgeklappten Kategorie-Karte. Als Variable, weil
sich der Rückweg darunter an derselben Kante ausrichten muss. */
--vm-faq-lese-max: 1200px;
}
/* ---------------------------------------------------------------------
Grundregel: `hidden` muss immer gewinnen
---------------------------------------------------------------------
Das gesamte Filtern läuft über das hidden-Attribut, das die JS setzt.
Wirksam wird es nur über die Browser-Grundregel `[hidden]{display:none}`
– und die hat die schwächste denkbare Spezifität. JEDE eigene
display-Angabe sticht sie aus.
Genau das ist hier passiert: Die Karte bekam `display: flex`, damit der
Fußlink an der Unterkante sitzt. Danach blieben ausgeblendete Karten
sichtbar – leer, weil ihre Fragen korrekt verschwunden waren. Dasselbe
galt für die Filterleiste, die ohne JavaScript sichtbar, aber
wirkungslos gewesen wäre.
Das `!important` ist hier ausnahmsweise das richtige Mittel: Es geht
nicht um Optik, sondern um „dieses Element ist gerade nicht da". Ohne
die Regel bricht das Bauteil jedes Mal lautlos, wenn irgendwo eine
display-Angabe dazukommt.
--------------------------------------------------------------------- */
.vm-faq [hidden] {
display: none !important;
}
/* ---------------------------------------------------------------------
0) ONEO neutralisieren
---------------------------------------------------------------------
Das Theme bringt eigene Regeln für die FAQ-Seite mit (main.css, Block
`.mod_faqpage`). Sie sind für Contaos Standardausgabe gedacht – dort
ist jede Frage ein
und die Antwort das Element danach:
.mod_faqpage section padding-left: 4.8em
.mod_faqpage h3 Rahmenlinie unten, eigene Größe/Abstände
.mod_faqpage h3:before gelber Kreis mit „Q"
.mod_faqpage h3 + *:before gelber Kreis mit „A"
In diesem Aufbau war
aber der KATEGORIE-Name und das Element
danach der Claim – also klebte ein „Q" am Thema und ein „A" an seiner
Unterzeile, und die Karten waren um 4,8em eingerückt.
Der Kategoriename ist inzwischen ein
(die Gliederung braucht ihn
dort, s. Template), womit die h3-Regeln des Themes ohnehin ins Leere
greifen. Die beiden ::before-Zeilen bleiben trotzdem stehen: Sie kosten
nichts und fangen es ab, falls die Ebene einmal wieder wechselt. Die
Regel für `section` wird dagegen weiterhin gebraucht – die Karten sind
nach wie vor -Elemente.
Alle Selektoren hier sind eine Klasse spezifischer als die des Themes
(0,2,0 gegen 0,1,1), deshalb genügt das ohne !important.
--------------------------------------------------------------------- */
.vm-faq .vm-faq-karte-titel::before,
.vm-faq .vm-faq-karte-titel + *::before {
content: none;
}
.vm-faq .vm-faq-karte {
margin: 0;
padding: clamp(1.1rem, 2vw, 1.5rem);
}
.vm-faq .vm-faq-karte-titel {
padding: 0;
border-bottom: 0;
}
/* ONEO setzt auf JEDEN