zur Flexzeile: Link und Knopf liegen nebeneinander, der
Knopf zieht sich über `align-self: stretch` auf die Höhe des Links.
Das Untermenü bekommt `flex-basis: 100%` und rutscht in die nächste
Zeile – eingeklappt steht es ohnehin auf display:none und zählt nicht
mit. So stimmt die Höhe automatisch, auch wenn sich die Typografie
ändert. */
.main-navigation-mobile li.submenu {
display: flex;
flex-wrap: wrap;
align-items: stretch;
}
.main-navigation-mobile li.submenu > a,
.main-navigation-mobile li.submenu > strong,
.main-navigation-mobile li.submenu > span {
flex: 1 1 auto;
min-width: 0;
}
.main-navigation-mobile li.submenu > ul {
flex: 0 0 100%;
}
.main-navigation-mobile .main-navigation-mobile-expand {
position: static;
flex: 0 0 auto;
align-self: stretch;
/* Pfeil mittig in der jetzt höheren Fläche */
display: flex;
align-items: center;
justify-content: center;
padding-top: 0;
padding-bottom: 0;
/* Die Trennlinie sitzt am Link. Weil der Knopf jetzt neben ihm steht
statt darüber zu schweben, endete die Linie sonst 45px vor dem Rand –
sichtbar anders als bei Punkten ohne Untermenü. Gleiche Linie hier
fortsetzen (Wert identisch zur Regel am Link weiter oben). */
border: 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: none;
color: #333;
transition: color 0.2s ease;
}
.main-navigation-mobile .is-expanded > .main-navigation-mobile-expand {
color: var(--vm-primary, #b8440a);
}
/* --- Suchfeld (falls im Mobilmenü aktiv) --------------------------- */
.main-navigation-mobile-search {
margin: 0.75rem 1rem 1rem;
}
.main-navigation-mobile-search input,
.main-navigation-mobile-search input:hover,
.main-navigation-mobile-search input:focus {
border: 1px solid #d9d9d9;
border-radius: 999px;
padding: 0.7em 1.1em;
background: #ffffff;
box-shadow: none;
}
.main-navigation-mobile-search input:focus {
border-color: var(--vm-primary, #b8440a);
}
.main-navigation-mobile-search button {
color: var(--vm-primary, #b8440a);
}
/* --- Optionale Icon-/Social-Reihe unten ---------------------------- */
.main-navigation-mobile-icons.main-navigation-mobile-icons a:before {
color: var(--vm-primary, #b8440a) !important;
}
.main-navigation-mobile-icons.main-navigation-mobile-icons a:hover:before {
color: var(--vm-primary-hover, #f26a20) !important;
}
/* =====================================================================
News-Teaser im Mobilmenü (.mobile-newsteaser) – bleibt erhalten,
an die schlichtere Optik angeglichen.
Modul-Template mod_newslist_mobilenav_vm + Item-Template
news_list_boxed_mobilenav_vm (Titel „Top News", heading-frei).
===================================================================== */
.mobile-newsteaser {
margin: 0.75rem 1rem calc(0.75rem + var(--safe-area-bottom, 0px));
padding-top: 0.9rem;
}
/* „Top News"-Eyebrow */
.mobile-newsteaser-title {
margin: 0 0 0.6rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--vm-primary, #b8440a); /* auf Grau: 4,9:1 statt 4,1:1 */
font-family: 'Roboto Slab' !important;
}
/* Karte kompakter + leiser */
.mobile-newsteaser .vm-newsbox-item.vm-card {
border-radius: var(--vm-radius-small, 9px);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}
.mobile-newsteaser .vm-card-text p strong {
display: inline !important;
font-weight: 400 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
}
.mobile-newsteaser .vm-newsbox-item.featured .vm-card-title a {
border: none;
font-family: 'Roboto Slab' !important;
}
/* Bild einheitlich 16:9, bündig in die Karte */
.mobile-newsteaser .vm-teaser-image {
aspect-ratio: 16 / 9;
padding: 0;
margin: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.mobile-newsteaser .vm-teaser-image img,
.mobile-newsteaser .vm-teaser-image picture {
height: 100%;
object-fit: cover;
}
/* Typo kompakt; Teasertext auf 3 Zeilen */
.mobile-newsteaser .vm-card-title {
font-size: 1.05rem !important;
line-height: 1.3;
}
.mobile-newsteaser .vm-card-title a {
margin: 0;
padding: 0;
border-radius: 0;
background: none;
box-shadow: none;
}
.mobile-newsteaser .vm-card-text {
font-size: 0.85rem;
line-height: 1.45;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* „mehr Details"-Button: Akzent-Fläche, weiße Schrift (kein Orange-auf-Orange) */
.mobile-newsteaser .vm-card-action .button {
padding: 0.45em 1em;
font-size: 0.9rem !important;
background: var(--vm-primary, #b8440a);
border-color: var(--vm-primary-dark, #b8440a);
color: #ffffff;
}
.mobile-newsteaser .vm-card-action .button:hover,
.mobile-newsteaser .vm-card-action .button:focus-visible {
background: var(--vm-primary-dark, #b8440a);
border-color: var(--vm-primary, #b8440a);
color: #ffffff;
}
/* =====================================================================
VM Buttons – konsolidiert · donum vitae
Nach dem TAO-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.
Farbschema donum vitae: Primär/Akzent = Rot-Orange #b8440a (weiße Schrift 5,4:1; #e1570c nur 3,8:1) · Zweitvariante = Neutral-Grau #b2b2b2
Radius: gerundet wie KKF (16px / kleiner Button 12px).
===================================================================== */
:root {
--vm-btn-font: 1.15rem; /* <- hier die Buttongröße global justieren */
}
/* 1) GEMEINSAMES BOX-MODEL -------------------------------------------- */
.button, button.submit,
.headline-box-link,
.highlight-box-link {
box-sizing: border-box;
padding: 0.64286em 1.42857em; /* symmetrisch */
border: 2px solid var(--vm-primary-dark);
border-width: 2px !important; /* TAO-Basis nutzt 1px, Varianten 2px -> hier auf 2px vereinheitlichen (nur Breite, Farbe bleibt je Variante) */
border-image: none !important; /* TAO-Rahmenverlauf aus */
border-radius: 16px !important; /* KKF-Radius */
font-size: var(--vm-btn-font) !important;
line-height: 1.42929;
letter-spacing: 0.05rem;
font-weight: 400;
color: var(--vm-white);
text-align: center;
text-decoration: none !important;
text-transform: none !important; /* kein TAO-UPPERCASE */
background: var(--vm-primary); /* Standard = Rot-Orange */
background-image: none !important; /* TAO-Hintergrundverlauf aus */
box-shadow: none !important; /* TAO-Schatten aus */
text-shadow: none !important; /* TAO-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 TAO sie nicht je nach
Ladereihenfolge überschreibt. Nur Maße – Farbe bleibt je Variante. */
.vm-card-link.button {
display: inline-flex !important; /* TAO 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;
}
/* TAO-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; }
/* Standard/Rot-Orange – Hover */
.button:hover, .button:focus-visible,
.headline-box-link:hover, .highlight-box-link:hover,
button.submit:hover {
background: var(--vm-primary-dark); border-color: var(--vm-primary); color: var(--vm-white);
transform: translateY(-1px);
}
/* 2) FARBVARIANTEN ---------------------------------------------------- */
/* Neutral / Grau – Zweitvariante (-secondary) */
.button.-secondary,
.headline-box-link.-secondary,
.vm-card-link.button.-secondary {
background: #b2b2b2; border: 2px solid #9a9a9a; color: #ffffff;
}
.button.-secondary:hover, .button.-secondary:focus-visible,
.headline-box-link.-secondary:hover,
.vm-card-link.button.-secondary:hover, .vm-card-link.button.-secondary:focus-visible {
background: #9a9a9a; border-color: #b2b2b2; color: #ffffff;
}
/* Pfirsich (-light) */
.button.-light,
.headline-box-link.-light,
.vm-card-link.button.-light {
background: var(--vm-surface); border: 2px solid var(--vm-primary); color: var(--vm-primary);
}
.button.-light:hover, .button.-light:focus-visible,
.headline-box-link.-light:hover,
.vm-card-link.button.-light:hover, .vm-card-link.button.-light:focus-visible {
background: var(--vm-primary); border-color: var(--vm-primary); color: var(--vm-white);
}
/* Hellgrau (-tertiary) */
.button.-tertiary,
.headline-box-link.-tertiary,
.vm-card-link.button.-tertiary {
background: var(--vm-grey); border: 2px solid var(--vm-primary); color: var(--vm-primary);
}
.button.-tertiary:hover, .button.-tertiary:focus-visible,
.headline-box-link.-tertiary:hover,
.vm-card-link.button.-tertiary:hover, .vm-card-link.button.-tertiary:focus-visible {
background: var(--vm-primary); border-color: var(--vm-primary); color: var(--vm-white);
}
/* Weiß (-quaternary) */
.button.-quaternary,
.headline-box-link.-quaternary,
.vm-card-link.button.-quaternary {
background: var(--vm-white); border: 2px solid var(--vm-primary); color: var(--vm-primary);
}
.button.-quaternary:hover, .button.-quaternary:focus-visible,
.headline-box-link.-quaternary:hover,
.vm-card-link.button.-quaternary:hover, .vm-card-link.button.-quaternary: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 Rot-Orange (#e1570c) gelegt, verschmilzt der Button mit der
Fläche: die hellen Varianten schlagen im Hover auf #e1570c 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: 12px !important; /* KKF-Radius */
}
/* --- Textlink (VM Button, Variante „Textlink") ----------------------
Kein Kasten – reiner Link im donum Rot-Orange, Icon aus data-icon 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);
text-decoration: underline;
text-underline-offset: 0.28em;
}
.vm-textlink::before { margin: 0; top: 0; }
/* ==========================================================
VM Component Library · donum vitae
Component: VM Iconbox / Grid / Card Base
Version: 2.0.0
CMS: Contao 5.7
Theme: RockSolid TAO
Breakpoints: Tablet ≤1280px / Mobil ≤900px / Mobil klein ≤600px
(Spaltenanzahl je Breakpoint einzeln über Redakteurs-Selects wählbar)
Farbschema donum vitae (mono-Akzent):
- Primär/Akzent: Rot-Orange #b8440a (Schrift, Buttons – barrierefrei)
- Markenorange: #e1570c NUR für Grafik (Logo-Ton, Deko) – als Schrift 3,8:1
- Zweitvariante: Neutral-Grau #b2b2b2
- Text: #333333
- Flächen: Pfirsich #FDF6F2 / #fdf2ea / #f9dccc
Radius: gerundet wie KKF (Karten 20px, Icon-Felder 9px).
========================================================== */
:root {
/* Text & Rot-Orange (Primär) */
--vm-text: #333333; /* Standard-Textfarbe / Fließtext */
/* Kontrast (WCAG 1.4.3, Schrift ≥ 4,5:1) – gemessen 13.09.2026:
#e1570c auf Weiß nur 3,77:1, weiße Schrift auf #e1570c ebenso.
#b8440a: 5,4:1 auf Weiß, 5,0:1 auf #f5f5f5, 5,1:1 auf --vm-surface,
4,9:1 auf dem grauen Menü (#f2f2f2), weiße Schrift darauf 5,4:1. */
--vm-primary: #b8440a; /* Rot-Orange: Schrift, Links, Button-Fläche, Rahmen, Icons */
--vm-primary-dark: #963707; /* Hover/aktiv von Flächen – weiße Schrift 7,4:1 */
--vm-primary-hover: #963707; /* Hover von Textlinks: DUNKLER, ein hellerer Ton fiele unter 4,5:1 */
--vm-brand: #e1570c; /* Markenorange – nur Grafik/Deko ohne Textfunktion (≥ 3:1 genügt dort) */
--vm-white: #ffffff;
--vm-page-bg: #f5f5f5; /* Website-Hintergrund – im Theme/Layout auf body setzen */
/* Akzent (geht im Primär auf – mono-Akzent) */
--vm-accent: #b8440a;
--vm-accent-dark: #963707;
/* Flächen (Pfirsich-Tönung) */
--vm-surface: #FDF6F2; /* Karten-Hintergrund */
--vm-surface-light: #fdf2ea;
--vm-surface-icon: #f9dccc;
/* Rahmen & Grautöne */
--vm-border: #e8e8e8;
--vm-border-accent: #f4cbb2;
--vm-border-neutral: #e5e5e5;
--vm-grey: #eeeeee;
--vm-border-strong: #767676; /* Kante von Bedienelementen (Top-Link) – 4,5:1 auf Weiß (WCAG 1.4.11) */
--vm-focus-ring: #b8440a; /* Tastatur-Fokusring – 5,4:1 auf Weiß, 5,1:1 auf --vm-surface, 4,5:1 auf #fbe6da */
/* Effekte & Maße (Radius wie KKF) */
--vm-shadow: 0 18px 38px rgba(0, 0, 0, 0.055);
--vm-shadow-hover: 0 24px 46px rgba(0, 0, 0, 0.085);
--vm-radius: 20px;
--vm-radius-small: 9px;
--vm-gap: 2.25rem;
--vm-card-padding: 2.15rem;
--vm-transition: 220ms ease;
}
/* ----------------------------------------------------------
Component wrapper
---------------------------------------------------------- */
.vm-component,
.vm-component * {
box-sizing: border-box;
}
.vm-component {
color: var(--vm-text);
}
.vm-component-headline {
margin: 0 0 1.75rem;
color: var(--vm-primary); /* Überschriften in Markenfarbe Rot-Orange */
font-weight: 700;
line-height: 1.18;
text-transform: none;
}
/* ----------------------------------------------------------
Grid engine
---------------------------------------------------------- */
.vm-grid {
display: grid;
gap: var(--vm-gap);
align-items: stretch;
}
.vm-grid.grid-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.vm-grid .span-2 { grid-column: span 2; }
.vm-grid .span-3 { grid-column: span 3; }
.vm-grid .span-4 { grid-column: span 4; }
.vm-grid .span-5 { grid-column: span 5; }
.vm-grid .span-6 { grid-column: 1 / -1; }
/* ----------------------------------------------------------
Card base
---------------------------------------------------------- */
.vm-card {
position:relative;
min-width: 0;
height: 100%;
color: var(--vm-text);
border-radius: var(--vm-radius);
border: 1px solid var(--vm-border-accent);
background: var(--vm-surface);
box-shadow: var(--vm-shadow);
overflow: hidden;
transition:
transform .25s ease,
box-shadow .25s ease,
border-color .25s ease;
}
.vm-card::before{content:"";position:absolute;left:0;top:0;width:100%;height:4px;background:var(--vm-border-accent);}
.vm-card:hover::before{background:var(--vm-primary-hover);}
.vm-card h3 {
color: var(--vm-text); /* Card-Überschriften in #333 (nicht Akzent) */
line-height: 1.25;
margin: 0 0 .75rem;
}
.vm-card:hover {
transform: translateY(-2px);
box-shadow:
0 18px 38px rgba(0,0,0,.08);
border-color: rgba(225, 87, 12,.35);
}
.vm-card-inner {
display: flex;
flex-direction: column;
height: 100%;
padding: var(--vm-card-padding);
}
.vm-card-body {
flex: 1 1 auto;
min-width: 0;
}
/* ==========================================================
Kartenfarben
Primär = Pfirsich-Karte · plus neutrale Varianten
========================================================== */
/* --- Getönte Karte (Primär / Standard) = Pfirsich ---------- */
.vm-card--green {
background: var(--vm-surface);
border: 1px solid var(--vm-border-accent);
}
.vm-card--white {
background: var(--vm-white);
border: 1px solid var(--vm-border-neutral);
}
.vm-card--border {
background: var(--vm-white);
border: 1px solid var(--vm-border-accent);
}
.vm-card--plain {
background: transparent;
border: none;
box-shadow: none;
}
.vm-card--plain:hover {
transform: none;
box-shadow: none;
}
.vm-card--bare {
background: transparent;
border: none;
box-shadow: none;
}
/* Eine randlose Karte soll sich wie normaler Fließtext verhalten: kein
Hintergrund, kein Rahmen – und auch kein Innenabstand. Mit den 2,15rem
aus --vm-card-padding oben und unten stand zwischen zwei Zeilen eines
zweispaltigen Rasters sonst die Rasterlücke PLUS 2 x 34px, was wie ein
Abschnittswechsel aussah statt wie ein Listenabstand. (19.09.2026) */
.vm-card--bare .vm-card-inner {
padding: 0;
}
.vm-card--bare::before {
display: none; /* hebt die obere Akzentlinie auf */
}
/* Rundung UND Beschnitt aufheben. .vm-card bringt `border-radius: 20px`
zusammen mit `overflow: hidden` mit – sinnvoll, solange die Karte eine
Fläche hat, deren Ecken rund beschnitten werden sollen. Die randlose
Karte hat keine Fläche, dafür aber `padding: 0` (s. oben): Der Inhalt
liegt damit exakt auf der Kartenkante, und die runde Ecke schneidet ihm
oben links ein Stück heraus – sichtbar am Iconfeld der Variante „Icon
klein neben Überschrift" und an langen Zeilen in den Ecken. Ohne Fläche
gibt es nichts zu runden und nichts zu beschneiden. (21.09.2026) */
.vm-card--bare {
border-radius: 0;
overflow: visible;
}
.vm-card--bare:hover {
transform: none;
box-shadow: none;
}
.vm-card--custom-color {
border-color: rgba(0, 0, 0, 0.08);
}
.vm-card--inverted,
.vm-card--inverted .vm-card-title,
.vm-card--inverted .vm-card-text,
.vm-card--inverted .vm-card-text * {
color: var(--vm-white);
}
/* ==========================================================
Iconfarbe abhängig vom Kartentyp
========================================================== */
/* Getönte Karte -> weißes Iconfeld */
.vm-card--green .vm-card-icon {
background:var(--vm-white);
}
/* Weiße/rahmenlose Karten -> pfirsiches Iconfeld */
.vm-card--white .vm-card-icon,
.vm-card--border .vm-card-icon,
.vm-card--plain .vm-card-icon {
background: var(--vm-surface-icon);
}
/* Optional: „Icon invertiert" auf der getönten Karte -> orangefarbenes Feld */
.vm-card.vm-card--green.-inverted-icon .vm-card-icon { background: var(--vm-primary); }
/* ----------------------------------------------------------
Iconbox
---------------------------------------------------------- */
.vm-iconbox-item {
text-decoration: none;
}
.vm-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 1.5rem;
color: var(--vm-primary);
background: var(--vm-surface-icon);
/* Radius in Prozent statt fest: So bleibt die Rundung bei JEDER
Icon-Größe gleich stark. Vorher standen hier 9px – auf dem 64px-Icon
der Variante „Icon neben Überschrift" waren das 14 %, während das
kleine Icon (46px) und das Badge (87px) bei 27–28 % lagen. Das Icon
wirkte dadurch deutlich eckiger als alle anderen. (19.09.2026) */
border-radius: 27%;
transition:
background .25s ease,
color .25s ease,
transform .25s ease,
box-shadow .25s ease;
box-shadow: inset 0 0 0 1px rgba(225, 87, 12,.08);
}
.vm-card-icon span {
display: inline-flex;
line-height: 1;
color: inherit;
}
.vm-card-icon span::before {
content: attr(data-icon);
font: 100%/1 "RockSolid Icons";
font-size: 1.75rem;
line-height: 1;
color: var(--vm-primary);
margin-right: 0;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.vm-card-title {
margin: 0 0 0.75rem;
color: var(--vm-text); /* Card-Überschriften in #333 (nicht Akzent) */
font-size: clamp(1.35rem, 1.1vw, 1.75rem);
font-weight: 700;
line-height: 1.22;
text-transform: none;
/* Auch lange Überschriften-Komposita (z. B. „Schwangerschaftskonflikt-
beratung") sauber trennen – aber nur sehr lange Wörter (ab 10 Zeichen).
Mehrzeilige Titel ausgewogen umbrechen. */
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 10 4 4;
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
overflow-wrap: break-word;
text-wrap: balance;
}
/* Box-Überschriften immer fett darstellen.
Höhere Spezifität als .vm-card h3, damit keine Theme-Grundregel
für h3 die Schriftstärke überschreibt (gilt für Icon- und Teaserboxen). */
.vm-card .vm-card-title,
.vm-teaser .vm-card-title {
font-weight: 700; /* = bold */
}
.vm-card-text {
color: var(--vm-text);
font-size: 17px;
line-height: 1.62;
/* Automatische Silbentrennung für Boxeninhalte.
Braucht lang="de" am (Contao-Root), sonst trennt der Browser
willkürlich. hyphenate-limit-chars bändigt die Trennung: nur Wörter ab
8 Zeichen, min. 4 davor UND min. 4 danach – so entstehen keine hässlichen
Kurzsilben wie „ergebnisof-fen" (Tail hätte nur 3 Zeichen). */
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 8 4 4;
/* Safari kennt hyphenate-limit-chars (noch) nicht → Einzelwerte */
-webkit-hyphenate-limit-before: 4;
-webkit-hyphenate-limit-after: 4;
-webkit-hyphenate-limit-lines: 2; /* max. 2 Trennstriche direkt untereinander */
overflow-wrap: break-word; /* Notbremse: extrem lange Wörter hart umbrechen statt Überlauf */
text-wrap: pretty; /* modernere Umbruch-Logik, reduziert schlechte Zeilenenden */
}
.vm-card-text > *:first-child { margin-top: 0; }
.vm-card-text > *:last-child { margin-bottom: 0; }
.vm-card-action {
flex: 0 0 auto;
margin-top: 1.75rem;
}
/* ----------------------------------------------------------
Link / button variants inside cards
---------------------------------------------------------- */
.vm-card-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
max-width: 100%;
text-decoration: none;
transition:
color var(--vm-transition),
background-color var(--vm-transition),
border-color var(--vm-transition),
transform var(--vm-transition);
}
/* ==========================================================
Card-Button – Primär (Rot-Orange)
Größe (rem-basiert), Padding, Farbe, Hover und alle
Farbvarianten liegen zentral in custom_vm_buttons.css
(single source of truth). Hier bewusst KEINE eigenen
.vm-card-link.button-Maße mehr definieren – sonst gewinnt
je nach Ladereihenfolge mal die em-Regel, mal die rem-Regel
und die Buttons in den Iconboxen bekommen unterschiedliche
Höhen.
========================================================== */
/* --- Textlink ------------------------------------------------------- */
.vm-card-link.-link {
color: var(--vm-primary);
font-weight: 700;
text-decoration: none;
text-underline-offset: 0.28em;
font-size: 1.15em;
}
.vm-card-link.-link:hover,
.vm-card-link.-link:focus-visible {
color: var(--vm-primary-hover);
text-decoration: none;
}
/* Unterstrich nur unter dem Text: Der Pfeil ist ein Flex-Element – eine
Unterstreichung am Link liefe unter ihm mit (und lässt sich dort nicht
mehr abschalten). */
.vm-card-link.-link:hover .vm-card-link-text,
.vm-card-link.-link:focus-visible .vm-card-link-text {
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Invertierte Karte + Textlink -> weiße Schrift */
.vm-card--inverted .vm-card-link.-link {
color: var(--vm-white);
}
.vm-card--inverted .vm-card-link.-link:hover,
.vm-card--inverted .vm-card-link.-link:focus-visible {
color: rgba(255, 255, 255, 0.8);
}
/* ----------------------------------------------------------
Button Icon
---------------------------------------------------------- */
.vm-card-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
}
.vm-card-link-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
transform: translateY(0.06em);
}
.vm-card-link-text {
display: inline-flex;
align-items: center;
line-height: 1;
}
.vm-card-link--inactive {
cursor: default;
opacity: 0.75;
}
/* ----------------------------------------------------------
Alignment variants
---------------------------------------------------------- */
.vm-iconbox-item.-align-center,
.vm-iconbox-item.-align-center .vm-card-inner,
.vm-iconbox-item.-align-center .vm-card-body {
text-align: center;
align-items: center;
}
.vm-iconbox-item.-align-right,
.vm-iconbox-item.-align-right .vm-card-inner,
.vm-iconbox-item.-align-right .vm-card-body {
text-align: right;
align-items: flex-end;
}
/* ----------------------------------------------------------
Icon variants
---------------------------------------------------------- */
.vm-iconbox-item.-large-icon .vm-card-icon {
width: 4.5rem;
height: 4.5rem;
border-radius: var(--vm-radius-small);
}
.vm-iconbox-item.-large-icon .vm-card-icon span::before {
font-size: 2.05rem;
}
.vm-iconbox-item.-inverted-icon .vm-card-icon {
color: var(--vm-white);
background: var(--vm-primary);
}
.vm-iconbox-item.-inverted-icon .vm-card-icon span::before {
color: var(--vm-white) !important;
}
.vm-iconbox-item.-headline-icon .vm-card-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: 1fr auto;
column-gap: 1rem;
row-gap: 0.75rem;
}
.vm-iconbox-item.-headline-icon .vm-card-icon {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
.vm-iconbox-item.-headline-icon .vm-card-body {
grid-column: 2;
grid-row: 1;
}
.vm-iconbox-item.-headline-icon .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 0.75rem;
}
/* ==========================================================
Icon KLEIN neben der Überschrift
========================================================== */
.vm-iconbox-item.-headline-icon-small .vm-card-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: 1fr auto;
column-gap: 0.85rem;
row-gap: 0.75rem;
}
.vm-iconbox-item.-headline-icon-small .vm-card-icon {
grid-column: 1;
grid-row: 1;
width: 2.5rem;
height: 2.5rem;
/* Bewusst FLACHER als die 27 % der großen Icons: Bei kleinen Flächen
liest sich derselbe Prozentwert deutlich runder, weil von der Kante
kaum noch ein gerades Stück übrig bleibt. 0,55rem sind auf 46px rund
22 % und wirken damit so kantig wie das Badge bei 87px. (19.09.2026) */
border-radius: 0.55rem;
margin-bottom: 0;
}
.vm-iconbox-item.-headline-icon-small .vm-card-icon span::before {
font-size: 1.15rem;
}
.vm-iconbox-item.-headline-icon-small .vm-card-body {
grid-column: 2;
grid-row: 1;
}
.vm-iconbox-item.-headline-icon-small .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 0.75rem;
}
/* ==========================================================
Icon als Badge – ragt über den oberen Kartenrand hinaus
========================================================== */
.vm-iconbox-item.-badge-top-icon {
overflow: visible;
/* HIER STAND `margin-top: 2.75rem` – der eigentliche Fehler (19.09.2026).
Die Karte erbt von .vm-card ein `height: 100%`. Diese Höhe füllt die
komplette Rasterzeile; der Außenabstand kam obendrauf. Die Karte stand
damit genau um diesen Betrag UNTEN aus ihrer Zeile heraus – und da die
Höhe der Box die Höhe des Rasters ist, rutschte das Folgeelement um
50px nach oben. Es sah aus, als hätte die Box einen negativen Abstand
nach unten; tatsächlich lag der Inhalt schlicht außerhalb.
Den Platz für das überstehende Badge machen jetzt der Innenabstand der
Box (padding-top) und der Zeilenabstand des Rasters, beide aus
--vm-badge-ueberstand. Die Karte selbst muss sich nicht mehr
verschieben. */
}
.vm-iconbox-item.-badge-top-icon h3 {
margin-top: 0.5rem;
}
.vm-iconbox-item.-badge-top-icon::before {
display: none;
}
.vm-iconbox-item.-badge-top-icon .vm-card-inner {
padding-top: calc(var(--vm-card-padding) + 2.5rem);
}
/* Größe des Badges und der Überstand, den es nach oben aus der Karte
herausragt. Beides einmal hier, damit Innenabstand der Reihe und
Zeilenabstand des Rasters weiter unten davon ableiten können. */
.vm-iconbox.-badge-top-icon,
.vm-iconbox-item.-badge-top-icon {
--vm-badge-groesse: clamp(4rem, 3.4rem + 1.7vw, 5.5rem);
--vm-badge-ueberstand: calc(var(--vm-badge-groesse) / 2);
}
.vm-iconbox-item.-badge-top-icon .vm-card-icon {
position: absolute;
top: 0;
left: var(--vm-card-padding);
transform: translateY(-50%);
margin: 0;
z-index: 2;
width: var(--vm-badge-groesse);
height: var(--vm-badge-groesse);
border-radius: 27%;
box-shadow:
inset 0 0 0 1px rgba(225, 87, 12, 0.08),
0 10px 24px rgba(0, 0, 0, 0.18);
}
.vm-iconbox-item.-badge-top-icon .vm-card-icon span::before {
font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}
.vm-iconbox-item.-badge-top-icon.-align-center .vm-card-icon {
left: 50%;
transform: translate(-50%, -50%);
}
.vm-iconbox-item.-badge-top-icon.-align-right .vm-card-icon {
left: auto;
right: var(--vm-card-padding);
}
.vm-iconbox-item.-badge-top-icon .vm-card-action {
/* Vorher 0: Der Textlink saß ohne Luft direkt unter der letzten Textzeile
und las sich dadurch wie eine weitere Zeile des Adressblocks statt wie
eine eigene Handlung. 1,5rem ist derselbe Abstand, den die Teaserboxen
über ihrer Aktion haben. (21.09.2026) */
margin-top: 1.5rem;
}
/* Das Badge ragt oben aus der Karte heraus, die Box selbst rechnet den
Überstand aber nicht mit: Ihre Oberkante ist die Kartenoberkante. Ohne
diesen Innenabstand stößt das Badge an das Element darüber, und man muss
an jedem Element von Hand eine margin-Klasse setzen. Mit dem Abstand
greifen die normalen Abstandsklassen wieder wie bei jeder anderen Box.
(19.09.2026)
Der Zeilenabstand im Raster braucht denselben Wert, sonst ist die Lücke
zwischen zwei Kartenreihen optisch kleiner als zwischen zwei Karten
nebeneinander. */
.vm-iconbox.-badge-top-icon {
padding-top: var(--vm-badge-ueberstand);
}
.vm-iconbox.-badge-top-icon .vm-grid {
row-gap: calc(var(--vm-gap) + var(--vm-badge-ueberstand));
}
/* Badge-Icon (getönte Karte): Innenkontur in Themenfarbe */
.vm-card.vm-card--green.-badge-top-icon .vm-card-icon {
box-shadow:
inset 0 0 0 1px rgba(225, 87, 12, 0.15),
0 10px 24px rgba(0, 0, 0, 0.18);
}
/* ----------------------------------------------------------
Responsive – Spaltenanzahl je Breakpoint
Die Spaltenzahl wählt der Redakteur pro Breakpoint selbst:
Desktop .grid-1 … .grid-6 (Basis, > 1280px, siehe „Grid engine")
Tablet .grid-t-1 … .grid-t-6 (≤ 1280px)
Mobil .grid-m-1 … .grid-m-6 (≤ 900px)
Mobil klein .grid-s-1 … .grid-s-6 (≤ 600px)
Am Element hängen alle vier Klassen gleichzeitig. Da die Blöcke in der
Reihenfolge Tablet -> Mobil -> Mobil klein stehen (gleiche Spezifität),
gewinnt bei überlappenden Breakpoints per Quellreihenfolge immer der
schmalere Wert.
---------------------------------------------------------- */
/* Tablet – ab 1280px und schmaler */
@media (max-width: 1280px) {
.vm-grid.grid-t-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-t-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-t-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-t-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-t-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-t-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Mobil – ab 900px und schmaler */
@media (max-width: 900px) {
.vm-grid.grid-m-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-m-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-m-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-m-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Spannweiten aufheben + Layout-Feinschliff (bleibt wie gehabt) */
.vm-grid .span-2,
.vm-grid .span-3,
.vm-grid .span-4,
.vm-grid .span-5,
.vm-grid .span-6 {
grid-column: auto;
}
.vm-card-inner {
padding: 1.6rem;
}
.vm-iconbox-item.-headline-icon .vm-card-inner {
display: flex;
}
.vm-iconbox-item.-headline-icon .vm-card-action {
margin-top: 1.5rem;
}
}
/* Mobil klein – ab 600px und schmaler */
@media (max-width: 600px) {
.vm-grid.grid-s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* =====================================================================
VM Component Library · donum vitae (aus Baum/JCW übernommen, 19.09.2026)
custom_vm_iconliste.css — Optik für das Element „VM Icon-Liste"
Version: 1.0.0
---------------------------------------------------------------------
Gehört zu templates/rsce_vm_iconliste.html5 + _config.php.
LADEREIHENFOLGE: nach main.css und custom_vm_icon_boxes.css (Tokens).
Ohne die Tokens greifen die Fallback-Farben — die Datei funktioniert
also auch allein.
ZIEL: pixelgleich zu einer Gruppe einzelner „VM Absatz mit Icon"-
Elemente (.icon-text-block), damit beim Umbau einer Seite optisch
nichts springt. Die Werte stammen aus main.css und wurden im
JCW-Projekt live vermessen (Quelle des Elements):
Einzug Text 1.875em (.icon-text-block padding-left)
Icon nach unten 0.21429em (.icon-text-block:before top)
Abstand zwischen 0.75em (p margin-top, bei margin-bottom-none)
Abstand vor / nach 0.75em / 1.5em (= .main-content ul/p)
===================================================================== */
/* --- Liste selbst ---------------------------------------------------- */
/* `ul` davor aus demselben Grund wie bei ul.vm-linkliste: main.css setzt
`.main-content ul` (0,1,1) auf list-style: disc und padding-left 1.25em.
`ul.vm-iconliste` ist ebenfalls (0,1,1) und gewinnt über die Reihenfolge.
Die Außenabstände entsprechen denen von .main-content p/ul — so steht
die Liste auch AUSSERHALB des Inhaltsbereichs (Footer, Sidebar) gleich. */
ul.vm-iconliste {
margin: 0.75em 0 1.5em;
padding: 0;
list-style: none;
}
/* --- Mehrspaltig (Auswahlfeld „Spalten") ------------------------------
Verteilt die Einträge auf 2 bis 6 Spalten, ohne dass ein RockSolid-
Spaltenumbruch um die Liste herum nötig wäre. Die Einträge laufen
zeilenweise: 1 2 3 / 4 5 6 – wie beim Spaltenumbruch auch.
Der Zeilenabstand kommt hier aus `row-gap` und NICHT mehr aus dem
`margin-top` des Nachbar-Selektors weiter unten: Im Raster bekämen
sonst auch der zweite und dritte Eintrag der ERSTEN Zeile diesen
Abstand, und die erste Zeile stünde stufig. (21.09.2026)
Einspaltig (Standard) bleibt alles wie bisher – dort wird keine
Klasse ausgegeben und diese Regeln greifen nicht. */
ul.vm-iconliste.-spalten-2,
ul.vm-iconliste.-spalten-3,
ul.vm-iconliste.-spalten-4,
ul.vm-iconliste.-spalten-5,
ul.vm-iconliste.-spalten-6 {
display: grid;
column-gap: 2rem;
row-gap: 0.6rem;
align-items: start;
}
ul.vm-iconliste.-spalten-2 .vm-iconliste-item + .vm-iconliste-item,
ul.vm-iconliste.-spalten-3 .vm-iconliste-item + .vm-iconliste-item,
ul.vm-iconliste.-spalten-4 .vm-iconliste-item + .vm-iconliste-item,
ul.vm-iconliste.-spalten-5 .vm-iconliste-item + .vm-iconliste-item,
ul.vm-iconliste.-spalten-6 .vm-iconliste-item + .vm-iconliste-item {
margin-top: 0;
}
ul.vm-iconliste.-spalten-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
ul.vm-iconliste.-spalten-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
ul.vm-iconliste.-spalten-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
ul.vm-iconliste.-spalten-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
ul.vm-iconliste.-spalten-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Tablet (≤1280px): höchstens zwei Spalten – ein Listeneintrag ist Text,
keine Karte, und wird in einer schmalen Spalte schnell zum Wortturm. */
@media (max-width: 1280px) {
ul.vm-iconliste.-spalten-3,
ul.vm-iconliste.-spalten-4,
ul.vm-iconliste.-spalten-5,
ul.vm-iconliste.-spalten-6 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* Mobil (≤900px): wieder einspaltig – dieselben Breakpoints wie überall
sonst in der Komponentenbibliothek. */
@media (max-width: 900px) {
ul.vm-iconliste.-spalten-2,
ul.vm-iconliste.-spalten-3,
ul.vm-iconliste.-spalten-4,
ul.vm-iconliste.-spalten-5,
ul.vm-iconliste.-spalten-6 {
grid-template-columns: minmax(0, 1fr);
}
}
/* --- Eintrag --------------------------------------------------------- */
/* Eintrag: Icon-Quader links, Text daneben. Flex statt Einzug, damit der
Text bei mehrzeiligen Einträgen sauber an der Quaderkante bleibt. */
.vm-iconliste-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
margin: 0;
padding: 0;
}
.vm-iconliste-item + .vm-iconliste-item {
margin-top: 0.6rem;
}
/* Der Text füllt den Rest der Zeile */
.vm-iconliste-item > *:not(.vm-iconliste-icon) {
flex: 1 1 auto;
min-width: 0;
}
/* Der Text kommt aus dem Editor und steckt meist in einem . Dessen
Theme-Abstände (.main-content p, 0,1,1) würden sich zum Listenabstand
addieren. Kindselektor mit `>` hebt die Spezifität auf (0,2,0) —
gewinnt unabhängig von der Reihenfolge. Mehrere Absätze IN einem
Eintrag behalten ihren normalen Abstand untereinander. */
.vm-iconliste-item > :first-child,
.vm-iconliste-item > .vm-iconliste-icon + * {
margin-top: 0;
}
.vm-iconliste-item > :last-child {
margin-bottom: 0;
}
/* --- Icon: rein dekorativ, kommt aus data-icon ----------------------- */
/* Icon auf hellgrünem Quader – dieselbe Optik wie in den Iconboxen
(.vm-card-icon, Variante „Icon klein neben Überschrift"): 2,5rem
Kantenlänge, Radius 0,7rem, Fläche --vm-surface-icon, Icon im Akzent.
Schrift und content liefert die Theme-Regel `*[data-icon]:before`. */
.vm-iconliste-icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 2.5rem;
height: 2.5rem;
border-radius: 0.55rem; /* wie .-headline-icon-small, s. custom_vm_icon_boxes.css */
background: var(--vm-surface-icon, #f9dccc);
box-shadow: inset 0 0 0 1px rgba(30, 86, 15, 0.08);
line-height: 1;
}
.vm-iconliste-icon::before {
margin-right: 0;
font-size: 1.15rem;
color: var(--vm-primary, #b8440a); /* 4,9:1 auf der Pfirsichfläche */
}
/* Der Quader steht IMMER auf Höhe der ersten Textzeile, nicht mittig zum
ganzen Absatz – sonst schwebt er bei mehrzeiligen Einträgen in der
Mitte.
Bewusst OHNE negativen Außenabstand: Ein `margin-top` am Icon wird vom
Theme überschrieben (live gemessen: gesetzt −0.625rem, wirksam 0px).
Stattdessen bekommt der Quader dieselbe Höhe wie die erste Zeile und
zentriert sein Icon darin – das hält unabhängig von fremden Regeln.
Dazu die Textgröße im Eintrag auf 1rem zurück: TAO gibt Absätzen im
Hauptbereich 1.1em, wodurch die Zeilenhöhe auf 31px wuchs. */
.vm-iconliste-item {
align-items: flex-start;
}
.main-content .vm-iconliste-item > *:not(.vm-iconliste-icon),
.vm-iconliste-item > *:not(.vm-iconliste-icon) {
font-size: 1rem;
line-height: 1.7625; /* 28,2px – wie der übrige Fließtext */
}
/* Quaderhöhe = Höhe der ersten Zeile; das Icon sitzt darin mittig.
Die sichtbare Fläche bleibt 2,5rem, sie wird nur vertikal zentriert
ausgerichtet statt über einen Außenabstand verschoben. */
.main-content .vm-iconliste-icon,
.vm-iconliste-icon {
align-self: flex-start;
height: 2.5rem;
margin-top: 0;
/* Rechnerisch mittig zur Zeile wäre −5,9px ((28,2px Zeile − 40px
Quader) / 2). Optisch wirkt der Quader dann zu hoch: Er überragt die
28,2px hohe Zeile oben wie unten um knapp 6px, und während sich der
Raum unten durch die Folgezeilen füllt, bleibt er oben leer.
Deshalb bewusst tiefer gesetzt – nach Augenschein abgestimmt.
Über translate statt margin, weil transform von keiner Theme-Regel
angefasst wird. */
transform: translateY(-0.15rem);
}
/* Auf dunklem Grund (Footer): heller Quader entfällt, das Icon erbt die
helle Schriftfarbe – sonst grüner Quader auf grünem Grund. */
.-color-inverted .vm-iconliste-icon {
background: none;
box-shadow: none;
width: auto;
height: auto;
}
.-color-inverted .vm-iconliste-icon::before {
color: inherit;
}
/* =====================================================================
VM Component Library · donum vitae
custom_vm_linkliste.css — Optik für das Element „VM Linkliste"
Version: 1.0.0 (übernommen aus dem Projekt Jobcenter Westerwald)
---------------------------------------------------------------------
Gehört zu templates/rsce_vm_linkliste.html5 + _config.php.
LADEREIHENFOLGE: nach custom_vm_icon_boxes.css — von dort kommen die
Rasterklassen (.vm-grid, .grid-*) und die --vm-*-Tokens. Im Layout
steht die Datei direkt hinter custom_vm_iconliste.css.
WOFÜR bei donum vitae
Die Seite /links führte elf externe Adressen als nackte URLs in drei
Spalten („www.bioeg.de"). Sichtbar stand dort nicht, was einen
erwartet; Screenreader buchstabierten die Adresse. Diese Komponente
gibt jedem Eintrag einen sprechenden Namen plus Untertitel.
UNTERSCHIED ZUR ICON-LISTE
custom_vm_iconliste.css ist für Aufzählungen aus FLIESSTEXT. Diese
hier ist für Aufzählungen aus LINKS — mit Zielgröße, Fokusring und
der Ansage „öffnet in neuem Fenster".
===================================================================== */
/* --- Liste selbst ---------------------------------------------------- */
/* Selektor bewusst mit `ul` davor: Das Theme setzt in main.css
`.main-content ul { list-style: disc }`, `.main-content ul { padding-left:
1.25em }` und eine Margin-Regel — alle mit Spezifität (0,1,1). Ein
schlichtes `.vm-linkliste` (0,1,0) verliert dagegen, und die Liste bekäme
im Inhaltsbereich Aufzählungspunkte und Einzug.
`ul.vm-linkliste` ist ebenfalls (0,1,1) und gewinnt über die Reihenfolge —
diese Datei lädt nach main.css. main.css NICHT anfassen, die schreibt der
Theme Assistant bei jedem Speichern neu. */
ul.vm-linkliste {
margin: 0;
padding: 0;
list-style: none;
/* Zeilenabstand etwas enger als das Kartenraster, sonst wirken
einzeilige Links verloren. */
--vm-gap: 0.75rem 2rem;
}
.vm-linkliste-item {
margin: 0;
padding: 0;
}
/* --- Der Link ist die Klickfläche ------------------------------------ */
.vm-linkliste-link {
display: flex;
align-items: flex-start;
gap: 0.6em;
/* Zielgröße (WCAG 2.5.5): auch einzeilige Einträge bleiben 44px hoch.
Zusammen mit dem Padding trägt der Link die ganze Fläche, nicht nur
der Text — wichtig für Maus UND Touch. */
min-height: 44px;
padding: 0;
text-decoration: none;
color: inherit;
}
.vm-linkliste-link:hover .vm-linkliste-label,
.vm-linkliste-link:focus-visible .vm-linkliste-label {
text-decoration: underline;
}
/* --- Icon: rein dekorativ, kommt aus data-icon ----------------------- */
.vm-linkliste-icon {
flex: 0 0 auto;
/* an der ersten Textzeile ausrichten, nicht an der Blockmitte */
line-height: 1.45;
}
.vm-linkliste-icon::before {
font: 1.15em/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
display: inline-block;
}
/* --- Text ------------------------------------------------------------ */
.vm-linkliste-text {
display: flex;
flex-direction: column;
min-width: 0; /* erlaubt Umbruch langer Bezeichnungen */
}
.vm-linkliste-label {
line-height: 1.3;
}
/* KEINE reduzierte Deckkraft: Der Untertitel trägt bei donum vitae die
eigentliche Information („Hebammensuche für den Kreis Warendorf").
Die Unterscheidung zur Bezeichnung macht die Schriftgröße, nicht die
Farbe — ein ausgegrauter Untertitel fiele unter die Kontrastgrenze.
Farbe bewusst auf die Textfarbe zurückgesetzt: Der Untertitel liegt IM
Link und würde sonst das Rot-Orange erben. Dann sähe die ganze Zeile
nach Linktext aus, und der eigentliche Name ginge darin unter. */
.vm-linkliste-sublabel {
font-size: 0.8em;
line-height: 1.35;
color: var(--vm-text, #333);
margin-top: 0.15em;
}
/* --- Zusatztext neben dem Link --------------------------------------- */
/* Für Hinweise, die sichtbar bleiben MÜSSEN, aber nicht zum Linkziel
gehören — z. B. ein Gebührenhinweis an einer Telefonnummer. Bewusst
KEIN Untertitel: Der liegt im und würde vom Screenreader als Teil
des Linktextes vorgelesen. Als Geschwister-Absatz mit
aria-describedby (siehe Template) bleibt die Verknüpfung erhalten.
Schriftgröße bewusst NICHT verkleinert und keine reduzierte Deckkraft:
Ein rechtlich verbindlicher Hinweis darf optisch nicht zurücktreten. */
/* `p` davor aus demselben Grund wie bei ul.vm-linkliste: `.main-content p`
(0,1,1) setzt margin 0.75em/1.5em und würde sonst gewinnen. */
/* Einträge MIT Zusatztext
-------------------------------------------------------------------
Der Link ist sonst über `min-height: 44px` immer 44px hoch, eine
einzelne Textzeile füllt davon nur rund 25px. Die übrigen ~19px lägen
als Leerraum genau zwischen Link und Hinweis.
Hier wird die erzwungene Höhe zurückgenommen, damit der Hinweis direkt
unter dem Link steht. Die Klickfläche kommt stattdessen aus einem
Innenabstand NACH OBEN, den der gleich große negative Außenabstand im
Layout wieder aufhebt.
Bewusst nur nach oben: Ein Innenabstand nach unten würde die Klick-
fläche über den Hinweistext legen — ein Klick auf den Hinweis würde
dann den Link auslösen.
`:has()` statt einer eigenen Klasse — so bleibt das Template unberührt. */
.vm-linkliste-item:has(> p.vm-linkliste-zusatz) .vm-linkliste-link {
min-height: 0;
padding-top: 0.6em;
margin-top: -0.6em;
}
p.vm-linkliste-zusatz {
margin: 0.15em 0 0;
line-height: 1.25;
}
/* Bei Einträgen mit Icon unter dem TEXT ausrichten, nicht unter dem Icon.
1.15em Icon-Schriftgröße + 0.6em Abstand = Breite der Icon-Spalte.
Die Angabe bleibt in em der Zeile, deshalb hier keine eigene
font-size — sonst würde sich der Einzug mitverkleinern. */
.vm-linkliste-item--icon p.vm-linkliste-zusatz {
padding-left: 1.75em;
}
/* --- Hinweiszeile über der Liste ------------------------------------- */
/* Trägt „Alle Links öffnen in einem neuen Fenster." — einmal sichtbar
für Sehende, statt an jedem Eintrag ein Icon. Der Hinweis FÜR
Screenreader steckt zusätzlich in jedem Link (.vm-nur-sr im Template),
weil viele Nutzer per Linkliste navigieren und den Absatz nie hören. */
p.vm-linkliste-hinweis {
margin: 0 0 0.75em;
font-size: 0.8em;
/* Deckkraft bewusst voll — siehe Begründung beim Untertitel oben. */
}
/* --- Nur für Screenreader --------------------------------------------
.vm-nur-sr steht bei donum vitae bereits in custom_allgemein.css und
wird hier bewusst NICHT wiederholt: custom_allgemein.css ist in beiden
Layouts die erste donum-Datei und fällt nicht weg. (Im JCW-Projekt
steht an dieser Stelle eine Dublette — dort hängt die Klasse an einer
optionalen Komponente.)
-------------------------------------------------------------------- */
/* --- Im Inhaltsbereich -----------------------------------------------
Farbe: `color: inherit` ergäbe hier die schwarze Textfarbe — die
Einträge sähen nicht mehr wie Links aus. Deshalb das donum-Rot-Orange
wie jeder andere Link im Inhalt; das Icon erbt die Farbe mit.
Zeilenabstand: Die 44px Mindesthöhe des Links ergeben allein schon den
gewohnten Zeilentakt. Der Rasterabstand käme OBEN drauf und würde die
Liste strecken — deshalb hier nur Spaltenabstand. Einträge MIT
Untertitel sind aber zweizeilig und brauchen wieder etwas Luft, sonst
klebt der nächste Name am Untertitel darüber.
Unten: `.main-content ul` setzt margin-bottom 1.5em, die Liste selbst
setzt margin 0 — der Folgeinhalt klebte sonst an der Liste.
-------------------------------------------------------------------- */
.main-content ul.vm-linkliste {
--vm-gap: 0.9rem 2.5rem;
margin-bottom: 1.5em;
}
.main-content .vm-linkliste-link {
color: var(--vm-primary, #b8440a);
}
.main-content .vm-linkliste-link:hover,
.main-content .vm-linkliste-link:focus-visible {
color: var(--vm-primary-hover, #963707);
}
/* --- Rückfall: Überschrift IM Element --------------------------------
ACHTUNG, Projektregel: Überschriften werden bei donum vitae als
EIGENES Inhaltselement angelegt und mit `font-size-*` ausgezeichnet
(üblich: `black bold font-size-xl margin-top-s margin-bottom-xs`).
Grund: Die Theme-Standardgrößen skalieren mobil nicht mit und werden
auf dem Handy zu groß. Das Feld „Überschrift" IM Element bleibt
deshalb leer — siehe README-DONUM.md.
Diese Regel greift nur, wenn jemand das Feld doch benutzt. Dann
stünde die Überschrift als Geschwister vor dem , ohne eigene
Klasse, und bekäme den Theme-Standardabstand von rund 45px nach
unten: bei 50px zwischen den Gruppen wäre sie damit fast genauso
weit von ihrer eigenen Liste entfernt wie von der Gruppe darüber,
die Zuordnung also nicht mehr ablesbar. 0.6em stellt das Verhältnis
wieder her. Die TAO-Klassen sind `!important` und gewinnen, sobald
eine eigene Überschrift davorsteht — die Regel stört dort nicht.
`:has()` statt einer Template-Klasse, damit das aus dem Projekt
Jobcenter Westerwald übernommene Template unverändert bleibt und
sich weiter gegen das Original abgleichen lässt.
-------------------------------------------------------------------- */
.main-content h2:has(+ ul.vm-linkliste),
.main-content h3:has(+ ul.vm-linkliste),
.main-content h2:has(+ p.vm-linkliste-hinweis),
.main-content h3:has(+ p.vm-linkliste-hinweis) {
margin-bottom: 0.6em;
}
/* Ab 900px halbiert die TAO-Skala den Gruppenabstand (margin-bottom-s:
50px -> 25px), der Abstand unter der Überschrift bliebe aber bei 22px.
Beide Abstände wären damit fast gleich groß und die Zuordnung wieder
dahin. Deshalb hier ebenfalls kleiner: rund 11px gegen 25px. */
@media (max-width: 900px) {
.main-content h2:has(+ ul.vm-linkliste),
.main-content h3:has(+ ul.vm-linkliste),
.main-content h2:has(+ p.vm-linkliste-hinweis),
.main-content h3:has(+ p.vm-linkliste-hinweis) {
margin-bottom: 0.4em;
}
}
@media (max-width: 600px) {
.main-content ul.vm-linkliste {
--vm-gap: 0.75rem 1rem;
}
}
/* ==========================================================
VM Component Library · donum vitae
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 #e1570c).
========================================================== */
/* 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 #e1570c */
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 span::before {
font-size: 2.05rem; }
.vm-teaser.-inverted-icon .vm-card-icon {
color: var(--vm-white);
background: var(--vm-primary);
}
.vm-teaser.-inverted-icon .vm-card-icon span::before { color: var(--vm-white) !important; }
/* 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 span::before {
font-size: 1.15rem; /* kleineres Glyph */
}
.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).
WICHTIG: Direktes Kind der Karte ist bei gesetzter Bildunterschrift die
, sonst direkt .vm-teaser-image – die
Flex-Breite muss deshalb auf BEIDE passen, sonst schrumpft die Spalte
auf die Eigenbreite des Bildes. */
.vm-teaser.-media > .vm-teaser-figure,
.vm-teaser.-media > .vm-teaser-image {
flex: 0 0 45%;
min-width: 0;
align-self: stretch;
aspect-ratio: auto;
height: auto;
}
/* Bild in der Spalte auf volle Breite/Höhe ziehen – auch kleine Bilder
werden hochskaliert (bewusst, lieber unscharf als zu schmal). */
.vm-teaser.-media > .vm-teaser-figure > .vm-teaser-image {
display: block;
width: 100%;
height: 100%;
aspect-ratio: auto;
}
.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-figure,
.vm-teaser.-media > .vm-teaser-image {
flex: 0 0 auto;
height: auto;
}
.vm-teaser.-media > .vm-teaser-figure > .vm-teaser-image { height: auto; }
.vm-teaser.-media .vm-teaser-image img,
.vm-teaser.-media .vm-teaser-image picture {
height: auto;
}
}
/* ==========================================================
Mobile Listenansicht · Klasse "vm-mobil-liste" (19.09.2026)
Wunsch des Teams: Die Angebots-Kacheln sollen auf dem Handy
abspecken – links ein randloses Bild, rechts der Titel – und
die ganze Kachel soll wie ein Button reagieren, damit man sie
sicher trifft.
Die Klasse wird im Backend im Feld "CSS-Klasse" des Elements
gesetzt. Ohne sie bleibt alles beim Alten, die Teaserboxen auf
der Spenden- und Bildungsspender-Strecke sind also nicht betroffen.
Barrierefreiheit: Der Linktext "mehr Infos" wird nur OPTISCH
versteckt, nicht entfernt – sonst hieße der Link für Screenreader
bloß noch "– Konfliktberatung". Und statt eines zusätzlichen
Overlays wird der vorhandene Link selbst über die Karte gelegt:
So bleibt es ein Tab-Stopp, der Fokusring umschließt die ganze
Karte und der sichtbare Kartentitel steht weiter im Linknamen
(WCAG 2.5.3).
========================================================== */
@media (max-width: 900px) {
/* Karte wird zur Listenzeile.
Zeilenhöhe und Bildbreite stecken in zwei Variablen – darüber
läuft der Wechsel von Quer- auf Hochformat weiter unten. */
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-hoehe: 112px;
--vm-liste-format: 1.5; /* Bildbreite = Höhe x Format -> Querformat 3:2 */
flex-direction: row;
align-items: stretch;
min-height: var(--vm-liste-hoehe);
/* Fokusring nach innen, sonst schneidet ihn das overflow:hidden
der Karte ab. Siehe Kopf von custom_allgemein.css. */
--vm-focus-offset: -3px;
}
/* Die Akzentleiste über der Karte entfällt in der Listenzeile –
sie stammt aus .vm-card::before. */
.vm-teaserbox.vm-mobil-liste .vm-teaser::before {
content: none;
}
/* Als Liste dürfen die Zeilen dichter stehen als die Karten im Raster. */
.vm-teaserbox.vm-mobil-liste .vm-grid {
gap: calc(var(--vm-gap) / 2);
}
/* --- links: Bild ohne Rand, bis an die Kartenkante ---
Links, oben und unten bündig; die runden Ecken übernimmt das
overflow:hidden der Karte. */
.vm-teaserbox.vm-mobil-liste .vm-teaser-image {
flex: 0 0 auto;
width: calc(var(--vm-liste-hoehe) * var(--vm-liste-format));
align-self: stretch;
height: auto;
aspect-ratio: auto;
margin: 0;
border-radius: 0;
/* Der Bildlink ist nur für die Maus (aria-hidden, tabindex -1) und
liegt unter dem Link-Overlay – getippt wird immer derselbe Link. */
z-index: 1;
}
/* Absolut, damit das Bild KEINE natürliche Höhe in den Fluss einbringt:
Sonst zieht ein 1024x796-Motiv die Zeile auf seine eigene Höhe und der
Ausschnitt ist nie quadratisch. So bestimmt die Zeile die Höhe und das
Bild füllt sie formatfüllend aus. */
.vm-teaserbox.vm-mobil-liste .vm-teaser-image img,
.vm-teaserbox.vm-mobil-liste .vm-teaser-image picture {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* --- rechts: Titel, Pfeil am rechten Rand ---
position:static hebt das relative Body-Layout der Badge-Variante auf,
damit sich der Link unten auf die GANZE Karte legen kann und nicht nur
auf den Textbereich. Das Badge-Icon ist in der Liste ohnehin aus. */
.vm-teaserbox.vm-mobil-liste .vm-teaser-body {
position: static;
flex-direction: row;
align-items: center;
padding: 0.8rem 2.6rem 0.8rem 1.1rem; /* rechts Platz für den Pfeil */
/* desktop-anpassungen.css legt eine Trennlinie über den Body – in der
stehenden Karte sitzt sie zwischen Bild und Text. In der Zeile landet
sie direkt unter dem Kartenrahmen, die Oberkante wäre dadurch doppelt
so kräftig wie die anderen drei Seiten. */
border-top: 0;
}
.vm-teaserbox.vm-mobil-liste .vm-teaser-content {
flex: 1 1 auto;
min-width: 0;
}
/* Beschreibungstext und Badge-Icon entfallen in der Listenzeile */
.vm-teaserbox.vm-mobil-liste .vm-card-text,
.vm-teaserbox.vm-mobil-liste .vm-card-icon {
display: none;
}
.vm-teaserbox.vm-mobil-liste .vm-card-title {
margin: 0;
/* Bewusst größer als der Kartentitel im Raster: In der Zeile steht nur
noch der Titel, er darf die Hauptrolle spielen.
Maß nimmt der längste Titel "Beratung für Männer und Väter": "Männer
und Väter" muss als Block in die Spalte passen, sonst wird aus zwei
Zeilen eine dritte. Deshalb wächst die Schrift mit der Fensterbreite
und deckelt bei 24px.
!important, weil die Größe sonst aus TAOs Hilfsklasse .font-size-m
kommt (files/tao/css/main.css: 1.1em !important ab 900px) – die ist
ohne !important nicht zu schlagen. Die Klasse steht fest im Template
am Kartentitel. */
font-size: clamp(1.1rem, 5.6vw, 1.6rem) !important;
/* KEINE automatische Trennung: In der schmalen Zeile setzt der Browser
sie an der falschen Stelle ("Schwange-renberatung" statt
"Schwangeren-beratung"). Stattdessen entscheidet die Redaktion –
ein bedingter Trennstrich () im Titel bricht genau dort um.
Wörter ohne brechen notfalls über overflow-wrap aus
.vm-card-title, also ohne Trennstrich statt über den Rand hinaus. */
hyphens: manual;
-webkit-hyphens: manual;
}
/* --- der vorhandene Link deckt die ganze Karte ab --- */
.vm-teaserbox.vm-mobil-liste .vm-card-action {
margin-top: 0;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link {
position: absolute;
inset: 0;
z-index: 2;
justify-content: flex-end;
align-items: center;
padding-right: 1rem;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link-icon {
font-size: 1.3rem;
}
/* Nur optisch weg, für Screenreader bleibt "mehr Infos – " */
.vm-teaserbox.vm-mobil-liste .vm-card-link-text {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Rückmeldung beim Antippen – auf der ganzen Karte, nicht nur am Pfeil.
Ohne :has() bleibt schlicht die Hervorhebung aus, sonst nichts. */
.vm-teaserbox.vm-mobil-liste .vm-teaser:has(.vm-card-link:active) {
background: var(--vm-surface-light);
}
}
/* Schmale Displays: Der Querformat-Ausschnitt frisst zu viel Breite,
hier wird der Ausschnitt quadratisch. Es wechselt nur das Format. */
@media (max-width: 600px) {
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-format: 1;
}
}
/* Ab hier wird die Spalte neben dem Bild zu schmal, um Titel und Pfeil
nebeneinander zu setzen: Der Pfeil rutscht unter den Text, in die untere
rechte Ecke. Der Titel bekommt dadurch die volle Spaltenbreite.
Das Tippziel bleibt die ganze Karte – der Link liegt weiter als Overlay
darüber, nur sein Inhalt sitzt jetzt woanders. */
@media (max-width: 500px) {
/* Der Pfeil unter dem Titel braucht eine Zeile mehr – ohne höhere Zeile
würde die Karte über die Bildbreite hinauswachsen und der Ausschnitt
wäre nicht mehr quadratisch. */
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-hoehe: 120px;
}
.vm-teaserbox.vm-mobil-liste .vm-teaser-body {
flex-direction: column;
align-items: flex-start;
justify-content: center;
padding: 0.6rem 1rem; /* rechts kein Extra-Platz mehr nötig */
}
/* nicht mitwachsen, sonst driften Titel und Pfeil auseinander */
.vm-teaserbox.vm-mobil-liste .vm-teaser-content {
flex: 0 0 auto;
}
.vm-teaserbox.vm-mobil-liste .vm-card-action {
flex: 0 0 auto;
margin-top: 0.2rem;
}
/* Hier steht der Link wieder IM Fluss – nur so sitzt der Pfeil direkt
unter dem Titel statt in der Kartenecke. Das Tippziel übernimmt ein
::after, das sich über die ganze Karte legt (die Karte ist der
Bezugsrahmen, .vm-teaser-body steht oben auf position:static). */
.vm-teaserbox.vm-mobil-liste .vm-card-link {
position: static;
justify-content: flex-start;
padding: 0;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link::after {
content: "";
position: absolute;
inset: 0;
z-index: 2;
}
/* Der Fokusring gehört um die ganze Karte, nicht um den Pfeil. Die globale
Regel in custom_allgemein.css setzt ihn mit !important am Link – hier
wird er deshalb dort unsichtbar gemacht und am Overlay gezeichnet. */
.vm-teaserbox.vm-mobil-liste .vm-card-link:focus-visible {
outline-color: transparent !important;
}
.vm-teaserbox.vm-mobil-liste .vm-card-link:focus-visible::after {
outline: 3px solid var(--vm-focus-ring, #b8440a);
outline-offset: -3px;
}
}
/* Schmale Geräte: flachere Zeile. Weil die Bildbreite an der Zeilenhöhe
hängt, bleibt dadurch mehr Spalte für den Titel – er soll auch hier auf
zwei Zeilen passen. */
@media (max-width: 400px) {
.vm-teaserbox.vm-mobil-liste .vm-teaser {
--vm-liste-hoehe: 104px;
}
}
/* ==========================================================
VM Component Library · donum vitae
Component: VM News (Boxed) – Newsblog im Teaserbox-Look
Nach custom_vm_icon_boxes.css, custom_vm_teaser_boxes.css und
custom_vm_buttons.css laden.
Grundidee: Die News-Kacheln geben dieselbe Markup-Struktur aus
wie die VM Teaserbox (.vm-card / .vm-teaser / .vm-teaser-image /
.vm-teaser-body / .vm-teaser-content / .vm-card-action) und erben
damit Rahmen, Radius, Schatten, Hover, Bild-Zoom, „Button unten"
und Button-Optik. Hier steht nur, was news-spezifisch fehlt.
Templates: news_list_boxed_vm.html5 · news_list_boxed_item_vm.html5 ·
mod_newslist_vm.html5 (Grid-Wrapper). Farb-/Maß-Tokens = --vm-*.
========================================================== */
.vm-newsbox-item,
.vm-newsbox-item * {
box-sizing: border-box;
}
/* Karte als vertikale Spalte.
Die Flex-Regel für .vm-teaser ist in custom_vm_teaser_boxes.css auf
„.vm-teaserbox .vm-teaser" gescoped -> für die News-Kachel (kein
.vm-teaserbox-Vorfahr) hier erneut setzen. */
.vm-newsbox-item.vm-teaser {
display: flex;
flex-direction: column;
}
/* Headline-Link: erbt die Titelfarbe (Rot-Orange), kein Unterstrich,
dezenter Hover – die Karte hebt sich zusätzlich über .vm-card:hover. */
.vm-newsbox-item .vm-card-title a {
color: inherit;
text-decoration: none;
transition: color var(--vm-transition);
}
.vm-newsbox-item .vm-card-title a:hover,
.vm-newsbox-item .vm-card-title a:focus-visible {
color: var(--vm-primary-hover);
}
/* Button bündig an den unteren Kartenrand – auch bei unterschiedlich
langen Headlines/Teasern. margin-top:auto schiebt die Aktion ans Ende
der (kartenhohen) Flex-Spalte; padding-top hält den Mindestabstand
zum Teasertext. Überschreibt die feste margin aus custom_vm_teaser_boxes.css
(gleiche Spezifität, wird später geladen). */
.vm-newsbox-item .vm-card-action {
margin-top: auto;
padding-top: 1.5rem;
}
/* Pagination sitzt außerhalb des Grids, mittig unter den Kacheln. */
.vm-newsbox-pagination {
margin-top: var(--vm-gap);
}
/* ==========================================================
Übersicht „Wissenswertes" – Editorial Overview
Aufmacher (erster Eintrag, voll breit, Bild neben Text) + Grid,
dazu „Mehr laden"-Button (JS) mit No-JS-Pagination-Fallback.
Modul-Template: mod_newslist_wissenswertes_vm.html5
JS: vm_newslist_loadmore.js
========================================================== */
/* --- Featured-Aufmacher = erster Eintrag im Grid -------------------- */
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child {
grid-column: 1 / -1; /* volle Breite */
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: stretch;
}
/* Bild füllt die linke Spalte auf ganze Kartenhöhe */
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-teaser-image { height: 100%; }
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-teaser-image img {
height: 100%;
object-fit: cover;
}
/* Textseite: vertikal zentriert, größere Headline */
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-teaser-body {
justify-content: center;
padding: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-teaser-content {
flex: 0 0 auto; /* nicht wachsen -> Zentrierung greift */
}
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-card-title {
font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
}
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-card-action {
margin-top: 1.5rem; /* fixer Abstand statt „ans Ende schieben" */
}
/* Mobil: Aufmacher wieder Bild oben, Text unten */
@media (max-width: 700px) {
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child {
grid-template-columns: 1fr;
}
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child .vm-teaser-image { height: auto; }
}
/* --- „Mehr laden" + Pagination-Fallback ---------------------------- */
.vm-newslist-more {
margin-top: var(--vm-gap);
text-align: center;
}
.vm-loadmore.is-loading { opacity: 0.7; pointer-events: none; }
/* Button ausblenden, wenn alle Beiträge geladen sind: Das JS setzt dann das
`hidden`-Attribut. Nötig ist die Regel, weil `.button` per TAO auf
`display: inline-block` steht und damit das UA-`[hidden] { display:none }`
überschreiben würde. Greift auch für den Start-Zustand (Template: `hidden`). */
.vm-loadmore[hidden] { display: none !important; }
/* Nach dem Mausklick behält der Button sonst einen abweichenden Fokus-/Active-Stil
(Theme-/Browser-Default für