bleiben unberührt. */
a.invisible:focus {
position: fixed !important;
/* !important, damit keine Theme-Regel die Marke verschiebt. 1rem statt
0,5rem: Der Fokusring liegt mit outline-offset rund 5px AUSSERHALB
der Box – bei zu knappem Abstand schneidet ihn der Viewport-Rand ab. */
top: 1rem !important;
left: 1rem !important;
z-index: 2000;
width: auto !important;
height: auto !important;
margin: 0 !important;
padding: 0.6rem 1rem !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
background: var(--vm-white, #fff);
color: var(--vm-primary, #c9390f);
font-weight: 700;
text-decoration: underline;
border-radius: var(--vm-radius-small, 10px);
box-shadow: 0 6px 20px rgba(87, 86, 86, 0.22);
}
/* --- Tap-Highlight auf Android dämpfen -------------------------------
Der TAO Theme Assistant schreibt die LINKFARBE deckend in den
Tap-Highlight (main.css: `-webkit-tap-highlight-color: #c9390f`).
Beim Antippen überdeckt dann ein volles rotes Rechteck das Element,
die Beschriftung ist für den Moment weg, und der Highlight folgt dem
Rahmenkasten statt dem border-radius (spitze Ecken).
`:root` statt `html`, damit die Regel unabhängig von der Lade-
reihenfolge gewinnt (0,1,0 gegen 0,0,1). Wird vererbt, eine Regel
genügt. NICHT auf `transparent` setzen: Auf Touch ist dieses kurze
Aufblitzen oft die einzige Rückmeldung, dass der Finger getroffen
hat – also dämpfen, nicht abschalten. */
:root { -webkit-tap-highlight-color: rgba(201, 57, 15, 0.18); }
html {
scroll-behavior: smooth;
}
.fw-400 {
font-weight: 400 !important;
}
.fw-500 {
font-weight: 500 !important;
}
.fw-600 {
font-weight: 600 !important;
}
.fw-700 {
font-weight: 700 !important;
}
.radius img {
border-radius: 20px;
}
.bg-grey .page-footer {
background: #F3F2F0;
}
.vm-callback {
border-radius: 16px 16px 0 0 !important;
border-top: 2px solid #fff;
border-left: 2px solid #fff;
border-right: 2px solid #fff;
}
button, input[type="submit"] {
margin-top: 0;
}
.vm-reader-content {
max-width: 100% !important;
}
.headline-colored h1 {
font-size: 3.5em;
}
.vm-reader-aside {
padding-bottom: 6rem;
}
.rechtliches {
padding-bottom: 2rem !important;
}
.footer-inhalte .content-image {
margin: 0 !important;
}
.rechtliches a {
font-size: 1em !important;
}
@media (max-width: 1200px) {
.page {
padding-top: 90px !important;
}
.header-navigation-inner {
height: 90px !important;
position: fixed;
width: 100%;
background: #fff;
border-bottom: 1px solid #dddddd;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}
}
@media (max-width: 900px) {
.page {
padding-top: 0px !important;
}
.content-wrapper {
padding-top: 90px;
}
.logo {
margin-left: 3.7037% !important;
}
.headline-colored h1 {
font-size: 2.5em;
}
}
@media (max-width: 620px) {
.rechtliches {
padding-bottom: 6rem !important;
}
}
@media (max-width: 450px) {
.headline-colored h1 {
font-size: 2.25em;
}
}
/* =====================================================================
Venne Media – UTILITY-KLASSEN (font-size, padding, margin)
---------------------------------------------------------------------
Skala (margin/padding an TAO angeglichen): 0·10·25·50·75·100·150·200px,
mobil (≤900px) halbiert. font-size-Skala s. eigener Block unten.
Achsen: px/py = padding-inline/-block, mx/my = margin-inline/-block.
!important, damit die Utilities die TAO-Regeln (main.css nutzt viel
!important + spezifische Selektoren) sicher überschreiben.
>>> DIESE DATEI ALS LETZTE LADEN (nach TAO UND allen custom_vm_*). <<<
a11y: fs-xxs/fs-xs (<16px) nur für Meta, NICHT für Fließtext.
===================================================================== */
/* --- Font-Größen: Desktop-Basis, kleiner ab 1200px und ab 900px ---------
Stufen statt fluid clamp -> vorhersehbar; kleinere Größen mobil helfen
bei langen Wörtern. fs-xs bleibt 16px (Fließtext-Minimum, a11y). */
.fs-xxs { font-size: 0.875rem !important; }
.fs-xs { font-size: 1rem !important; }
.fs-s { font-size: 1.125rem !important; }
.fs-m { font-size: 1.35rem !important; }
.fs-l { font-size: 1.75rem !important; }
.fs-xl { font-size: 2.5rem !important; }
.fs-xxl { font-size: 3.6rem !important; }
@media (max-width: 1200px) {
.fs-s { font-size: 1.0625rem !important; }
.fs-m { font-size: 1.2rem !important; }
.fs-l { font-size: 1.5rem !important; }
.fs-xl { font-size: 2rem !important; }
.fs-xxl { font-size: 2.8rem !important; }
}
@media (max-width: 900px) {
.fs-m { font-size: 1.1rem !important; }
.fs-l { font-size: 1.3rem !important; }
.fs-xl { font-size: 1.65rem !important; }
.fs-xxl { font-size: 2.15rem !important; }
}
/* --- Überschriften: fs-* muss TAO schlagen -----------------------------
TAO stylt Headlines mit `.main-content h1…h6` (0,1,1) und hat eigene
`.font-size-*`-Klassen MIT !important + Mobil-Stufen. Eine einfache
`.fs-*` (0,1,0) verliert dort. Element+Klasse `:is(h1…h6).fs-*` (0,1,1)
+ !important schlägt beides – an allen Breakpoints. */
:is(h1,h2,h3,h4,h5,h6).fs-xxs { font-size: 0.875rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xs { font-size: 1rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-s { font-size: 1.125rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-m { font-size: 1.35rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-l { font-size: 1.75rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xl { font-size: 2.5rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xxl { font-size: 3.6rem !important; }
@media (max-width: 1200px) {
:is(h1,h2,h3,h4,h5,h6).fs-s { font-size: 1.0625rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-m { font-size: 1.2rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-l { font-size: 1.5rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xl { font-size: 2rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xxl { font-size: 2.8rem !important; }
}
@media (max-width: 900px) {
:is(h1,h2,h3,h4,h5,h6).fs-m { font-size: 1.1rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-l { font-size: 1.3rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xl { font-size: 1.65rem !important; }
:is(h1,h2,h3,h4,h5,h6).fs-xxl { font-size: 2.15rem !important; }
}
/* --- Padding — Skala an TAO angeglichen ---------------------------------
Werte wie TAO (.padding-*): 0 · 10 · 25 · 50 · 75 · 100 · 150 · 200px,
mobil (≤900px) halbiert. So verhalten sich p*-Klassen wie TAOs eigene. */
.pt-0 { padding-top: 0 !important; }
.pt-xxs { padding-top: 10px !important; }
.pt-xs { padding-top: 25px !important; }
.pt-s { padding-top: 50px !important; }
.pt-m { padding-top: 75px !important; }
.pt-l { padding-top: 100px !important; }
.pt-xl { padding-top: 150px !important; }
.pt-xxl { padding-top: 200px !important; }
.pb-0 { padding-bottom: 0 !important; }
.pb-xxs { padding-bottom: 10px !important; }
.pb-xs { padding-bottom: 25px !important; }
.pb-s { padding-bottom: 50px !important; }
.pb-m { padding-bottom: 75px !important; }
.pb-l { padding-bottom: 100px !important; }
.pb-xl { padding-bottom: 150px !important; }
.pb-xxl { padding-bottom: 200px !important; }
.pl-0 { padding-left: 0 !important; }
.pl-xxs { padding-left: 10px !important; }
.pl-xs { padding-left: 25px !important; }
.pl-s { padding-left: 50px !important; }
.pl-m { padding-left: 75px !important; }
.pl-l { padding-left: 100px !important; }
.pl-xl { padding-left: 150px !important; }
.pl-xxl { padding-left: 200px !important; }
.pr-0 { padding-right: 0 !important; }
.pr-xxs { padding-right: 10px !important; }
.pr-xs { padding-right: 25px !important; }
.pr-s { padding-right: 50px !important; }
.pr-m { padding-right: 75px !important; }
.pr-l { padding-right: 100px !important; }
.pr-xl { padding-right: 150px !important; }
.pr-xxl { padding-right: 200px !important; }
.px-0 { padding-inline: 0 !important; }
.px-xxs { padding-inline: 10px !important; }
.px-xs { padding-inline: 25px !important; }
.px-s { padding-inline: 50px !important; }
.px-m { padding-inline: 75px !important; }
.px-l { padding-inline: 100px !important; }
.px-xl { padding-inline: 150px !important; }
.px-xxl { padding-inline: 200px !important; }
.py-0 { padding-block: 0 !important; }
.py-xxs { padding-block: 10px !important; }
.py-xs { padding-block: 25px !important; }
.py-s { padding-block: 50px !important; }
.py-m { padding-block: 75px !important; }
.py-l { padding-block: 100px !important; }
.py-xl { padding-block: 150px !important; }
.py-xxl { padding-block: 200px !important; }
.p-0 { padding: 0 !important; }
.p-xxs { padding: 10px !important; }
.p-xs { padding: 25px !important; }
.p-s { padding: 50px !important; }
.p-m { padding: 75px !important; }
.p-l { padding: 100px !important; }
.p-xl { padding: 150px !important; }
.p-xxl { padding: 200px !important; }
/* --- Margin — gleiche Skala wie Padding --- */
.mt-0 { margin-top: 0 !important; }
.mt-xxs { margin-top: 10px !important; }
.mt-xs { margin-top: 25px !important; }
.mt-s { margin-top: 50px !important; }
.mt-m { margin-top: 75px !important; }
.mt-l { margin-top: 100px !important; }
.mt-xl { margin-top: 150px !important; }
.mt-xxl { margin-top: 200px !important; }
.mb-0 { margin-bottom: 0 !important; }
.mb-xxs { margin-bottom: 10px !important; }
.mb-xs { margin-bottom: 25px !important; }
.mb-s { margin-bottom: 50px !important; }
.mb-m { margin-bottom: 75px !important; }
.mb-l { margin-bottom: 100px !important; }
.mb-xl { margin-bottom: 150px !important; }
.mb-xxl { margin-bottom: 200px !important; }
.ml-0 { margin-left: 0 !important; }
.ml-xxs { margin-left: 10px !important; }
.ml-xs { margin-left: 25px !important; }
.ml-s { margin-left: 50px !important; }
.ml-m { margin-left: 75px !important; }
.ml-l { margin-left: 100px !important; }
.ml-xl { margin-left: 150px !important; }
.ml-xxl { margin-left: 200px !important; }
.mr-0 { margin-right: 0 !important; }
.mr-xxs { margin-right: 10px !important; }
.mr-xs { margin-right: 25px !important; }
.mr-s { margin-right: 50px !important; }
.mr-m { margin-right: 75px !important; }
.mr-l { margin-right: 100px !important; }
.mr-xl { margin-right: 150px !important; }
.mr-xxl { margin-right: 200px !important; }
.mx-0 { margin-inline: 0 !important; }
.mx-xxs { margin-inline: 10px !important; }
.mx-xs { margin-inline: 25px !important; }
.mx-s { margin-inline: 50px !important; }
.mx-m { margin-inline: 75px !important; }
.mx-l { margin-inline: 100px !important; }
.mx-xl { margin-inline: 150px !important; }
.mx-xxl { margin-inline: 200px !important; }
.my-0 { margin-block: 0 !important; }
.my-xxs { margin-block: 10px !important; }
.my-xs { margin-block: 25px !important; }
.my-s { margin-block: 50px !important; }
.my-m { margin-block: 75px !important; }
.my-l { margin-block: 100px !important; }
.my-xl { margin-block: 150px !important; }
.my-xxl { margin-block: 200px !important; }
.m-0 { margin: 0 !important; }
.m-xxs { margin: 10px !important; }
.m-xs { margin: 25px !important; }
.m-s { margin: 50px !important; }
.m-m { margin: 75px !important; }
.m-l { margin: 100px !important; }
.m-xl { margin: 150px !important; }
.m-xxl { margin: 200px !important; }
.mx-auto { margin-inline: auto !important; }
/* --- Mobil (≤900px): Abstände halbieren (wie TAO) --------------------- */
@media (max-width: 900px) {
.pt-xxs { padding-top: 5px !important; }
.pt-xs { padding-top: 13px !important; }
.pt-s { padding-top: 25px !important; }
.pt-m { padding-top: 38px !important; }
.pt-l { padding-top: 50px !important; }
.pt-xl { padding-top: 75px !important; }
.pt-xxl { padding-top: 100px !important; }
.pb-xxs { padding-bottom: 5px !important; }
.pb-xs { padding-bottom: 13px !important; }
.pb-s { padding-bottom: 25px !important; }
.pb-m { padding-bottom: 38px !important; }
.pb-l { padding-bottom: 50px !important; }
.pb-xl { padding-bottom: 75px !important; }
.pb-xxl { padding-bottom: 100px !important; }
.pl-xxs { padding-left: 5px !important; }
.pl-xs { padding-left: 13px !important; }
.pl-s { padding-left: 25px !important; }
.pl-m { padding-left: 38px !important; }
.pl-l { padding-left: 50px !important; }
.pl-xl { padding-left: 75px !important; }
.pl-xxl { padding-left: 100px !important; }
.pr-xxs { padding-right: 5px !important; }
.pr-xs { padding-right: 13px !important; }
.pr-s { padding-right: 25px !important; }
.pr-m { padding-right: 38px !important; }
.pr-l { padding-right: 50px !important; }
.pr-xl { padding-right: 75px !important; }
.pr-xxl { padding-right: 100px !important; }
.px-xxs { padding-inline: 5px !important; }
.px-xs { padding-inline: 13px !important; }
.px-s { padding-inline: 25px !important; }
.px-m { padding-inline: 38px !important; }
.px-l { padding-inline: 50px !important; }
.px-xl { padding-inline: 75px !important; }
.px-xxl { padding-inline: 100px !important; }
.py-xxs { padding-block: 5px !important; }
.py-xs { padding-block: 13px !important; }
.py-s { padding-block: 25px !important; }
.py-m { padding-block: 38px !important; }
.py-l { padding-block: 50px !important; }
.py-xl { padding-block: 75px !important; }
.py-xxl { padding-block: 100px !important; }
.p-xxs { padding: 5px !important; }
.p-xs { padding: 13px !important; }
.p-s { padding: 25px !important; }
.p-m { padding: 38px !important; }
.p-l { padding: 50px !important; }
.p-xl { padding: 75px !important; }
.p-xxl { padding: 100px !important; }
.mt-xxs { margin-top: 5px !important; }
.mt-xs { margin-top: 13px !important; }
.mt-s { margin-top: 25px !important; }
.mt-m { margin-top: 38px !important; }
.mt-l { margin-top: 50px !important; }
.mt-xl { margin-top: 75px !important; }
.mt-xxl { margin-top: 100px !important; }
.mb-xxs { margin-bottom: 5px !important; }
.mb-xs { margin-bottom: 13px !important; }
.mb-s { margin-bottom: 25px !important; }
.mb-m { margin-bottom: 38px !important; }
.mb-l { margin-bottom: 50px !important; }
.mb-xl { margin-bottom: 75px !important; }
.mb-xxl { margin-bottom: 100px !important; }
.ml-xxs { margin-left: 5px !important; }
.ml-xs { margin-left: 13px !important; }
.ml-s { margin-left: 25px !important; }
.ml-m { margin-left: 38px !important; }
.ml-l { margin-left: 50px !important; }
.ml-xl { margin-left: 75px !important; }
.ml-xxl { margin-left: 100px !important; }
.mr-xxs { margin-right: 5px !important; }
.mr-xs { margin-right: 13px !important; }
.mr-s { margin-right: 25px !important; }
.mr-m { margin-right: 38px !important; }
.mr-l { margin-right: 50px !important; }
.mr-xl { margin-right: 75px !important; }
.mr-xxl { margin-right: 100px !important; }
.mx-xxs { margin-inline: 5px !important; }
.mx-xs { margin-inline: 13px !important; }
.mx-s { margin-inline: 25px !important; }
.mx-m { margin-inline: 38px !important; }
.mx-l { margin-inline: 50px !important; }
.mx-xl { margin-inline: 75px !important; }
.mx-xxl { margin-inline: 100px !important; }
.my-xxs { margin-block: 5px !important; }
.my-xs { margin-block: 13px !important; }
.my-s { margin-block: 25px !important; }
.my-m { margin-block: 38px !important; }
.my-l { margin-block: 50px !important; }
.my-xl { margin-block: 75px !important; }
.my-xxl { margin-block: 100px !important; }
.m-xxs { margin: 5px !important; }
.m-xs { margin: 13px !important; }
.m-s { margin: 25px !important; }
.m-m { margin: 38px !important; }
.m-l { margin: 50px !important; }
.m-xl { margin: 75px !important; }
.m-xxl { margin: 100px !important; }
}
@media (max-width: 700px) {
.pl-xxs { padding-left: 0 !important; }
.pl-xs { padding-left: 0 !important; }
.pl-s { padding-left: 0 !important; }
.pl-m { padding-left: 0 !important; }
.pl-l { padding-left: 0 !important; }
.pl-xl { padding-left: 0 !important; }
.pl-xxl { padding-left: 0 !important; }
.pr-xxs { padding-right: 0 !important; }
.pr-xs { padding-right: 0 !important; }
.pr-s { padding-right: 0 !important; }
.pr-m { padding-right: 0 !important; }
.pr-l { padding-right: 0 !important; }
.pr-xl { padding-right: 0 !important; }
.pr-xxl { padding-right: 0 !important; }
}
/* =====================================================================
BEWEGUNG REDUZIEREN (prefers-reduced-motion) – WCAG 2.3.3
---------------------------------------------------------------------
Auch ohne Karussell oder Marquee löst der Prüfbericht hier aus: Das
Set hat reichlich `transition` auf Buttons, Karten, Navigation und
Icons, dazu `html { scroll-behavior: smooth }` aus custom_vm.css.
Steht bewusst am ENDE der ZULETZT geladenen Datei, damit der Block
nach allen Transitions kommt.
Zwei Hinweise:
- `scroll-behavior` wird zusätzlich explizit an `html` zurückgenommen.
Der Stern-Selektor greift zwar auch, aber die eigene Regel macht die
Absicht sichtbar und ist robuster.
- Fokus-Ringe sind NICHT betroffen: `outline` ist keine Animation.
Der Block darf also gefahrlos global gelten.
ACHTUNG – was CSS hier NICHT erreicht: Alles, was JavaScript Frame für
Frame setzt (jQuery `.animate()`, `scrollTo`-Schleifen), muss im Skript
selbst abgefragt werden. Siehe j_accordion_VM.html5.
===================================================================== */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
/* Effekte, die nicht über die Dauer, sondern über den Zielwert wirken,
müssen einzeln zurückgenommen werden – eine Dauer von 0,01ms macht
den Sprung sonst nur schneller, nicht kleiner. */
.vm-newsbox-item:hover .vm-teaser-image img,
.vm-teaser:hover a.vm-teaser-image img { transform: none !important; }
.vm-news-more:focus-visible .vm-icon,
.footer-inhalte .vm-icon-text:hover .vm-icon-text-icon,
.footer-inhalte .vm-icon-text:focus-within .vm-icon-text-icon,
.gridlinks li a:hover::before,
.gridlinks li a:focus-visible::before { transform: none !important; }
.footer-top-link:hover,
.footer-top-link:focus-visible { transform: none !important; }
.vm-nav-close:hover,
.vm-nav-close:focus-visible { transform: none !important; }
}
/* =====================================================================
Venne Media – ICON-SET (kuratiert, Lucide-Stil) als CSS-Masken
---------------------------------------------------------------------
Basis .vm-icon + je Icon .vm-ico--NAME. Icon nimmt die Textfarbe an
(background-color:currentColor). Auswahl im RSCE per Select-Feld.
Neues Icon = 1 Zeile hier + 1 Zeile in der Select-Options-Liste.
Strich-Icons funktionieren als Maske direkt (kein Ausformen nötig).
===================================================================== */
.vm-icon {
display: inline-block;
width: 1em; height: 1em;
flex: 0 0 auto;
background-color: currentColor;
-webkit-mask: var(--vm-ico) center / contain no-repeat;
mask: var(--vm-ico) center / contain no-repeat;
}
.vm-ico--phone { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E"); }
.vm-ico--mail { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'/%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/%3E%3C/svg%3E"); }
.vm-ico--arrow-right { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E"); }
.vm-ico--home { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 9 9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/%3E%3Cpath d='M9 22V12h6v10'/%3E%3C/svg%3E"); }
.vm-ico--map-pin { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.vm-ico--clock { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpolyline points='12 6 12 12 16 14'/%3E%3C/svg%3E"); }
.vm-ico--calendar { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='4' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.vm-ico--message { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3C/svg%3E"); }
.vm-ico--search { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.vm-ico--external-link { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6'/%3E%3Cpath d='M10 14 21 3'/%3E%3Cpath d='M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6'/%3E%3C/svg%3E"); }
.vm-ico--monitor { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='14' x='2' y='3' rx='2'/%3E%3Cpath d='M8 21h8M12 17v4'/%3E%3C/svg%3E"); }
.vm-ico--layers { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2 2 7l10 5 10-5-10-5z'/%3E%3Cpath d='M2 17l10 5 10-5'/%3E%3Cpath d='M2 12l10 5 10-5'/%3E%3C/svg%3E"); }
.vm-ico--code { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m16 18 6-6-6-6'/%3E%3Cpath d='m8 6-6 6 6 6'/%3E%3C/svg%3E"); }
.vm-ico--database { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cellipse cx='12' cy='5' rx='9' ry='3'/%3E%3Cpath d='M3 5v14a9 3 0 0 0 18 0V5'/%3E%3Cpath d='M3 12a9 3 0 0 0 18 0'/%3E%3C/svg%3E"); }
.vm-ico--server { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='8' x='2' y='2' rx='2'/%3E%3Crect width='20' height='8' x='2' y='14' rx='2'/%3E%3Cpath d='M6 6h.01M6 18h.01'/%3E%3C/svg%3E"); }
.vm-ico--megaphone { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 11 18-5v12L3 14v-3z'/%3E%3Cpath d='M11.6 16.8a3 3 0 1 1-5.8-1.6'/%3E%3C/svg%3E"); }
.vm-ico--lightbulb { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1 .2 2.2 1.5 3.5.7.7 1.3 1.5 1.5 2.5'/%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 22h4'/%3E%3C/svg%3E"); }
.vm-ico--palette { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='13.5' cy='6.5' r='.6' fill='black'/%3E%3Ccircle cx='17.5' cy='10.5' r='.6' fill='black'/%3E%3Ccircle cx='8.5' cy='7.5' r='.6' fill='black'/%3E%3Ccircle cx='6.5' cy='12.5' r='.6' fill='black'/%3E%3Cpath d='M12 2C6.5 2 2 6.5 2 12s4.5 10 10 10c.926 0 1.648-.746 1.648-1.688 0-.437-.18-.835-.437-1.125-.29-.289-.438-.652-.438-1.125a1.64 1.64 0 0 1 1.668-1.668h1.996c3.051 0 5.555-2.503 5.555-5.554C21.965 6.012 17.461 2 12 2z'/%3E%3C/svg%3E"); }
.vm-ico--puzzle { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h3a1 1 0 0 0 1-1V5a2 2 0 0 1 4 0v1a1 1 0 0 0 1 1h3a1 1 0 0 1 1 1v3a1 1 0 0 0 1 1h1a2 2 0 0 1 0 4h-1a1 1 0 0 0-1 1v3a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-1a2 2 0 0 0-4 0v1a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-3a1 1 0 0 1 1-1h1a2 2 0 0 0 0-4H4a1 1 0 0 1-1-1V8a1 1 0 0 1 1-1z'/%3E%3C/svg%3E"); }
.vm-ico--settings { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E"); }
.vm-ico--shield-check { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 13c0 5-3.5 7.5-7.66 8.95a1 1 0 0 1-.67-.01C7.5 20.5 4 18 4 13V6a1 1 0 0 1 1-1c2 0 4.5-1.2 6.24-2.72a1.17 1.17 0 0 1 1.52 0C14.51 3.81 17 5 19 5a1 1 0 0 1 1 1z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.vm-ico--rocket { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z'/%3E%3Cpath d='m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z'/%3E%3Cpath d='M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0'/%3E%3Cpath d='M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5'/%3E%3C/svg%3E"); }
.vm-ico--check { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E"); }
.vm-ico--star { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2'/%3E%3C/svg%3E"); }
.vm-ico--heart { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E"); }
.vm-ico--info { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4M12 8h.01'/%3E%3C/svg%3E"); }
.vm-ico--alert { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z'/%3E%3Cpath d='M12 9v4M12 17h.01'/%3E%3C/svg%3E"); }
.vm-ico--user { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='12' cy='7' r='4'/%3E%3C/svg%3E"); }
.vm-ico--users { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/%3E%3Ccircle cx='9' cy='7' r='4'/%3E%3Cpath d='M22 21v-2a4 4 0 0 0-3-3.87'/%3E%3Cpath d='M16 3.13a4 4 0 0 1 0 7.75'/%3E%3C/svg%3E"); }
.vm-ico--file { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5z'/%3E%3Cpath d='M14 2v6h6'/%3E%3C/svg%3E"); }
.vm-ico--image { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='18' height='18' x='3' y='3' rx='2'/%3E%3Ccircle cx='9' cy='9' r='2'/%3E%3Cpath d='m21 15-3.086-3.086a2 2 0 0 0-2.828 0L6 21'/%3E%3C/svg%3E"); }
.vm-ico--play { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='6 3 20 12 6 21 6 3'/%3E%3C/svg%3E"); }
.vm-ico--download { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10l5 5 5-5'/%3E%3Cpath d='M12 15V3'/%3E%3C/svg%3E"); }
.vm-ico--plus { --vm-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M12 5v14'/%3E%3C/svg%3E"); }
/* =====================================================================
„Absatz mit Icon" (RSCE rsce_vm_icon_text_blocks) – Icon links, Text daneben
---------------------------------------------------------------------
Icon als CSS-Maske im Akzent; Text fließt rechts daneben, umbruchfähig.
Icon-Größe über --vm-icon-text-size justierbar. Ohne Icon = reiner Absatz.
===================================================================== */
.vm-icon-text {
display: flow-root; /* enthält den gefloateten Icon-Span */
--vm-icon-text-size: 1.9em;
}
.vm-icon-text.icon-text-block {
padding-left: 0;
}
.vm-icon-text.vm-icon-text--noicon { display: block; }
/* Icon oben-links, bündig mit dem Text/der Headline darüber (KEIN linker
Abstand). Text läuft rechts daneben und darunter weiter. .vm-icon erbt
Maske + currentColor; hier nur Float, Größe, Farbe, Abstände. */
.vm-icon-text .vm-icon-text-icon {
float: left;
width: var(--vm-icon-text-size);
height: var(--vm-icon-text-size);
margin: 0 0.7rem 0 0; /* oben leicht · rechts Textabstand · links KEIN Abstand */
color: var(--vm-primary, #c9390f); /* Icon im Akzent (Maske nimmt die Farbe an) */
font-size: 0.875em;
}
/* Ränder der ersten/letzten Textzeile kappen, damit Icon + Text oben bündig sitzen */
.vm-icon-text .vm-icon-text-body > :first-child { margin-top: 0; }
.vm-icon-text .vm-icon-text-body > :last-child { margin-bottom: 0; }
/* ==========================================================
VM Component Library · Venne Media
Component: VM Iconbox / Grid / Card Base
Version: 2.0.0
CMS: Contao 5.7
Theme: RockSolid TAO
Breakpoints: Tablet ≤1200px / Mobil ≤900px / Mobil klein ≤700px
(Spaltenanzahl je Breakpoint einzeln über Redakteurs-Selects wählbar)
Farbschema Venne Media:
- Text/Headlines: Warmgrau #575656
- Primär/Akzent: Rot-Orange #c9390f
- Zweitvariante: Neutral-Grau #b2b2b2
- Flächen: Pfirsich hell #fdf4f0 / #fdf7f4 / #fbe4da
Radius: 16px (Icon-Felder 10px). Fonts: Poppins/Source Sans 3 – s. custom_vm_base.css.
========================================================== */
:root {
/* Text & Rot-Orange (Primär) */
--vm-text: #575656; /* Standard-Textfarbe / Fließtext + Headlines */
--vm-text-2: #63615f; /* Sekundärtext (Vortitel/Meta), AA-tauglich */
--vm-primary: #c9390f; /* Rot-Orange: Marke, Buttons, Icons, Rahmen */
--vm-primary-dark: #b6350d;
--vm-primary-hover: #b6350d;
--vm-white: #ffffff;
--vm-page-bg: #ffffff; /* Website-Hintergrund – im Theme/Layout auf body setzen */
/* Akzent (geht im Primär auf – mono-Akzent) */
--vm-accent: #c9390f;
--vm-accent-dark: #b6350d;
/* Flächen (Pfirsich-Tönung, aufgehellt) */
--vm-surface: #F7ECE7; /* Karten-Hintergrund (getönt) */
--vm-surface-light: #fdf7f4;
--vm-surface-icon: #F7ECE7;
/* Rahmen & Grautöne (warm) */
--vm-border: #e8e7e4; /* DEKORATIVE Kante (Karten, Trenner) */
/* BEDIEN-Kante: Rahmen von Eingabefeldern u. Ä. WCAG 1.4.11 verlangt
dafür 3:1 gegen beide angrenzenden Flächen. #8a8681 schafft das
sowohl gegen die weiße Feldfüllung (3,62:1) als auch gegen die
getönte Karte #F7ECE7 (3,12:1), auf der das Rückruf-Formular liegt.
--vm-border (1,24:1 auf Weiß) ist dafür ausdrücklich NICHT geeignet. */
--vm-border-strong: #8a8681;
--vm-border-accent: #f6d0c2;
--vm-border-neutral: #e6e5e2;
--vm-grey: #f0efec;
/* Effekte & Maße */
--vm-shadow: 0 18px 38px rgba(87, 86, 86, 0.06);
--vm-shadow-hover: 0 24px 46px rgba(87, 86, 86, 0.09);
--vm-radius: 16px;
--vm-radius-small: 10px;
--vm-gap: 1.6rem;
--vm-card-padding: 1.7rem;
--vm-transition: 200ms 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 #575656 (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(201, 57, 15,.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;
}
.vm-card--bare .vm-card-inner {
padding-left: 0;
padding-right: 0;
}
.vm-card--bare::before {
display: none; /* hebt die obere Akzentlinie auf */
}
.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,
Icon dann weiß (currentColor). */
.vm-card.vm-card--green.-inverted-icon .vm-card-icon { background: var(--vm-primary); color: var(--vm-white); }
/* ----------------------------------------------------------
Iconbox
---------------------------------------------------------- */
/* „VM Meilensteine" ist ein eigenes Element, nutzt aber bewusst dieselbe
Karte. Die generischen Modifier (Ausrichtung, Icon-Varianten) hängen
historisch an .vm-iconbox-item – deshalb steht die Meilenstein-Klasse
überall dort daneben, wo das Meilenstein-Element die Option anbietet
(Ausrichtung, „Großes Icon", „Icon invertiert").
Bewusst NICHT auf .vm-card verallgemeinert: Das träfe auch die
Teaserboxen, die für dieselben Modifier eigene Regeln mitbringen
(custom_vm_teaser_boxes.css) – dort würde sich die Optik ändern. */
.vm-iconbox-item,
.vm-meilenstein-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);
border-radius: var(--vm-radius-small);
transition:
background .25s ease,
color .25s ease,
transform .25s ease,
box-shadow .25s ease;
box-shadow: inset 0 0 0 1px rgba(201, 57, 15,.08);
}
/* Masken-Icon (.vm-icon) im Icon-Feld – Farbe kommt via currentColor aus
.vm-card-icon (Primär, bzw. Weiß bei „Icon invertiert"). */
.vm-card-icon .vm-icon {
width: 1.75rem;
height: 1.75rem;
}
.vm-card-title {
margin: 0 0 0.75rem;
color: var(--vm-text); /* Card-Überschriften in #575656 (nicht Akzent) */
/* Schrift und Laufweite HIER setzen, nicht von der h1–h6-Regel in
custom_vm_base.css erben lassen: Der Kartentitel ist nicht immer eine
Überschrift. „VM Meilensteine" gibt ihn als aus (Zahlen gehören
nicht in die Gliederung), und ohne diese zwei Zeilen fiele er dort auf
die Grundschrift zurück. So hängt die Optik an der Klasse, nicht am Tag. */
font-family: var(--vm-font-display, "Poppins", sans-serif);
letter-spacing: -0.01em;
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: underline;
}
/* Auf der GETÖNTEN Karte reicht das Primär-Rot nicht: #c9390f auf
#F7ECE7 sind 4,44:1 – knapp unter den 4,5:1 für Fließtext. Auf Weiß
(5,15:1) ist es in Ordnung, die Ausnahme gehört also genau an die
getönte Karte. --vm-primary-dark kommt dort auf 5,17:1 und ist
bereits im Set – keine neue Farbe nötig.
Gleiches gilt für den Vortitel, wenn er im Akzent gesetzt wird. */
.vm-card--green .vm-card-link.-link,
.vm-card--green .vm-textlink { color: var(--vm-primary-dark, #b6350d); }
/* 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,
.vm-meilenstein-item.-align-center,
.vm-meilenstein-item.-align-center .vm-card-inner,
.vm-meilenstein-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,
.vm-meilenstein-item.-align-right,
.vm-meilenstein-item.-align-right .vm-card-inner,
.vm-meilenstein-item.-align-right .vm-card-body {
text-align: right;
align-items: flex-end;
}
/* ----------------------------------------------------------
Icon variants
---------------------------------------------------------- */
.vm-iconbox-item.-large-icon .vm-card-icon,
.vm-meilenstein-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 .vm-icon,
.vm-meilenstein-item.-large-icon .vm-card-icon .vm-icon {
width: 2.05rem;
height: 2.05rem;
}
/* Icon invertiert: gefülltes Akzentfeld, Icon weiß (currentColor).
Weiß auf #c9390f = 5,15:1 – über den 3:1, die WCAG 1.4.11 für
Bedienelemente/Grafiken verlangt.
Die Regel muss die kartenfarben-abhängigen Icon-Felder weiter oben
schlagen (.vm-card--white .vm-card-icon u. a., Spezifität 0,2,0) –
mit 0,3,0 tut sie das, unabhängig von der Kartenfarbe. */
.vm-iconbox-item.-inverted-icon .vm-card-icon,
.vm-meilenstein-item.-inverted-icon .vm-card-icon {
color: var(--vm-white); /* Icon (currentColor) wird weiß */
background: var(--vm-primary);
}
.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;
border-radius: 0.7rem;
margin-bottom: 0;
}
.vm-iconbox-item.-headline-icon-small .vm-card-icon .vm-icon {
width: 1.15rem;
height: 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;
margin-top: 2.75rem;
}
.vm-iconbox-item.-badge-top-icon h3,
.vm-iconbox-item.-badge-top-icon .vm-card-title {
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);
}
.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: clamp(4rem, 3.4rem + 1.7vw, 5.5rem);
height: clamp(4rem, 3.4rem + 1.7vw, 5.5rem);
border-radius: clamp(1.1rem, 0.9rem + 0.5vw, 1.5rem);
box-shadow:
inset 0 0 0 1px rgba(201, 57, 15, 0.08),
0 10px 24px rgba(0, 0, 0, 0.18);
}
.vm-iconbox-item.-badge-top-icon .vm-card-icon .vm-icon {
width: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
height: 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 {
margin-top: 0;
}
.vm-iconbox.-badge-top-icon .vm-grid {
row-gap: calc(var(--vm-gap) + 1.75rem);
}
/* 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(201, 57, 15, 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, > 1200px, siehe „Grid engine")
Tablet .grid-t-1 … .grid-t-6 (≤ 1200px)
Mobil .grid-m-1 … .grid-m-6 (≤ 900px)
Mobil klein .grid-s-1 … .grid-s-6 (≤ 700px)
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 1200px und schmaler */
@media (max-width: 1200px) {
.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 700px und schmaler */
@media (max-width: 700px) {
.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)); }
}
/* ----------------------------------------------------------
Vortitel (Preheadline) in der Karte – Kicker mit Linie links
Text in Schriftfarbe, nur die Linie ist rot (bewusst wenig Rot).
Gilt für Iconbox UND Teaser (beide sind .vm-card).
---------------------------------------------------------- */
.vm-card-preheadline {
display: inline-flex;
align-items: center;
gap: 0.6em;
/* !important schlägt TAOs .main-content p (margin-top:0.75em / -bottom:1.5em) */
margin: 0 0 0.2rem !important;
font-size: 1.1rem; /* etwas größer als Fließtext */
font-weight: 600;
line-height: 1.25;
color: var(--vm-text);
}
.vm-card-preheadline::before {
content: "";
flex: 0 0 auto;
width: 1.7em;
height: 2px;
background: currentColor; /* Linie in normaler Schriftfarbe (nicht Akzent) */
}
.vm-card.-align-center .vm-card-preheadline { justify-content: center; }
.vm-card.-align-right .vm-card-preheadline { justify-content: flex-end; }
.vm-card--inverted .vm-card-preheadline { color: var(--vm-white); }
/* ==========================================================
Spaltenverhältnisse (grid-ratio-*) – unterschiedlich breite Boxen
Gilt für Iconbox UND Teaser (beide nutzen .vm-grid).
Anzahl der Werte = Anzahl der Boxen in der Reihe.
NUR Desktop (> 1200px): ab Tablet übernehmen die Breakpoint-Spalten
(grid-t-* / grid-m-* / grid-s-*). So kann der Redakteur pro Breakpoint
frei auf gleiche Spalten umschalten, ohne dass das Verhältnis „klebt".
========================================================== */
@media (min-width: 1201px) {
/* 2 Boxen */
.vm-grid.grid-ratio-2-1 { grid-template-columns: 2fr 1fr; }
.vm-grid.grid-ratio-1-2 { grid-template-columns: 1fr 2fr; }
.vm-grid.grid-ratio-3-1 { grid-template-columns: 3fr 1fr; }
.vm-grid.grid-ratio-1-3 { grid-template-columns: 1fr 3fr; }
.vm-grid.grid-ratio-3-2 { grid-template-columns: 3fr 2fr; }
.vm-grid.grid-ratio-2-3 { grid-template-columns: 2fr 3fr; }
/* 3 Boxen */
.vm-grid.grid-ratio-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.vm-grid.grid-ratio-1-1-2 { grid-template-columns: 1fr 1fr 2fr; }
.vm-grid.grid-ratio-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
/* 4 Boxen */
.vm-grid.grid-ratio-2-1-1-1 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.vm-grid.grid-ratio-1-1-1-2 { grid-template-columns: 1fr 1fr 1fr 2fr; }
.vm-grid.grid-ratio-1-2-1-1 { grid-template-columns: 1fr 2fr 1fr 1fr; }
.vm-grid.grid-ratio-1-1-2-1 { grid-template-columns: 1fr 1fr 2fr 1fr; }
}
/* ==========================================================
Spaltenverhältnisse Tablet (grid-ratio-t-*)
Wirken NUR im Tablet-Fenster (901–1200px) und überschreiben dort die
gleichmäßige Tablet-Spaltenanzahl (grid-t-*). Mobil (≤900px) wird über
grid-m- / grid-s- gesteuert (i. d. R. 1 Spalte).
========================================================== */
@media (min-width: 901px) and (max-width: 1200px) {
/* 2 Boxen */
.vm-grid.grid-ratio-t-2-1 { grid-template-columns: 2fr 1fr; }
.vm-grid.grid-ratio-t-1-2 { grid-template-columns: 1fr 2fr; }
.vm-grid.grid-ratio-t-3-1 { grid-template-columns: 3fr 1fr; }
.vm-grid.grid-ratio-t-1-3 { grid-template-columns: 1fr 3fr; }
.vm-grid.grid-ratio-t-3-2 { grid-template-columns: 3fr 2fr; }
.vm-grid.grid-ratio-t-2-3 { grid-template-columns: 2fr 3fr; }
/* 3 Boxen */
.vm-grid.grid-ratio-t-2-1-1 { grid-template-columns: 2fr 1fr 1fr; }
.vm-grid.grid-ratio-t-1-1-2 { grid-template-columns: 1fr 1fr 2fr; }
.vm-grid.grid-ratio-t-1-2-1 { grid-template-columns: 1fr 2fr 1fr; }
/* 4 Boxen */
.vm-grid.grid-ratio-t-2-1-1-1 { grid-template-columns: 2fr 1fr 1fr 1fr; }
.vm-grid.grid-ratio-t-1-1-1-2 { grid-template-columns: 1fr 1fr 1fr 2fr; }
.vm-grid.grid-ratio-t-1-2-1-1 { grid-template-columns: 1fr 2fr 1fr 1fr; }
.vm-grid.grid-ratio-t-1-1-2-1 { grid-template-columns: 1fr 1fr 2fr 1fr; }
}
/* ==========================================================
Karten OHNE Abstand (zusammenhängend) – Modifier .vm-grid--seamless
Wie das Leistungs-Raster: 1px-Hairline-Trenner statt Gap, gemeinsamer
Außenrahmen + Rundung, je Karte KEINE Rundung/Kein Schatten/Kein Rand.
Wird per RSCE-Checkbox „Karten ohne Abstand" an das .vm-grid gehängt.
Gilt für Iconbox UND Teaser.
========================================================== */
.vm-grid--seamless {
gap: 1px; /* Trennlinie = durchscheinender Grund */
background: var(--vm-border);
border: 1px solid var(--vm-border);
border-radius: var(--vm-radius);
overflow: hidden; /* runde Außenecken */
}
.vm-grid--seamless > .vm-card {
border: 0; /* höhere Spezifität als .vm-card--* */
border-radius: 0;
box-shadow: none;
}
.vm-grid--seamless > .vm-card::before { display: none; } /* obere Akzentlinie aus */
.vm-grid--seamless > .vm-card:hover {
transform: none; /* zusammenhängend -> kein Anheben */
box-shadow: none;
background: var(--vm-surface); /* dezente Tönung im Hover (wie Entwurf) */
}
/* Ratio/Seamless kombinierbar: die 1px-Fuge bleibt, Spalten kommen vom Grid. */
/* ==========================================================
VM MEILENSTEINE (Kennzahlen-Kacheln)
----------------------------------------------------------
Eigenes Element, aber bewusst KEINE eigene Optik: Die Kachel
nutzt .vm-card, der Wert .vm-card-title, die Bezeichnung
.vm-card-text – also exakt die Iconbox-Gestaltung. Der
Unterschied liegt allein in der Semantik (Wert als
,
nicht als Überschrift), siehe rsce_vm_meilensteine.html5.
Deshalb steht hier nur, was sich aus dem Zweck ergibt und
nicht schon von der Karte kommt.
========================================================== */
/* Wert und Bezeichnung gehören enger zusammen als Überschrift und
Fließtext einer Iconbox – sie sind EINE Aussage („1999 gegründet"),
nicht Titel plus Erläuterung. */
.vm-meilenstein-item .vm-meilenstein-wert { margin-bottom: 0.15rem; }
/* Die Bezeichnung ist die Beschriftung der Zahl, nicht der Fließtext
einer Karte: etwas kleiner und ruhiger, damit der Wert trägt. */
.vm-meilenstein-item .vm-meilenstein-text p { margin: 0; }
/* Zahlen brauchen keine Silbentrennung – .vm-card-title bringt sie für
lange Komposita mit, bei „100%" oder „25+ Jahre" stört sie nur. */
.vm-meilenstein-item .vm-meilenstein-wert {
hyphens: none;
-webkit-hyphens: none;
}
/* ==========================================================
VM Component Library · Venne Media
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 #c9390f).
========================================================== */
/* 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 #c9390f */
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;
}
}
/* =====================================================================
VM Buttons – konsolidiert · Venne Media
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.
Varianten: Akzent (orange, Basis) · Dunkel (Schriftfarbe #575656) · Hellgrau · Weiß · Transparent (2px Rahmen in Schriftfarbe)
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,
.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); /* Akzent (Primär-Rot #c9390f, ~5,2:1 zu Weiß) */
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 {
background: var(--vm-primary-dark); border-color: var(--vm-primary); color: var(--vm-white);
transform: translateY(-1px);
}
/* 2) FARBVARIANTEN (Venne) -------------------------------------------
Akzent = Basis (.button, ohne Modifier: Orange, weiße Schrift).
Dazu 4 Modifier. Rahmenbreite ist global 2px (s. Abschnitt 1). */
/* Dunkel – Standard-Schriftfarbe als Fläche (-dark) */
.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: var(--vm-primary); border-color: var(--vm-primary); 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-text); 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: var(--vm-text); /* definierter als --vm-border -> Kante bleibt auf hellem Grund sichtbar */
color: var(--vm-text);
}
.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(87, 86, 86, 0.22) !important;
}
/* Transparent (-outline) – 2px Rahmen in Standard-Schriftfarbe */
.button.-outline,
.headline-box-link.-outline,
.vm-card-link.button.-outline {
background: transparent; border-color: var(--vm-text); color: var(--vm-text);
}
.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-text); border-color: var(--vm-text); color: var(--vm-white);
}
/* Buttons in invertierten (dunklen) Boxen ----------------------------
Wird eine Box auf „Textfarbe invertieren" gestellt und der Hintergrund
von Hand auf Rot-Orange (#c9390f) gelegt, verschmilzt der Button mit der
Fläche: die hellen Varianten schlagen im Hover auf #c9390f 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 Venne Rot-Orange, 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);
text-decoration: underline;
text-underline-offset: 0.28em;
}
.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 (TAO-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) – TAO-Standardfluss (inline-block-Buttons in
einer Zeile, geringer Wortabstand, umbruchfähig).
display: inline-block !important – ein Flex-Row-Kontext blieb bei TAO
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 (TAO: .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;
}
/* ==========================================================
VM Component Library · Venne Media
Component: VM News (Boxed) – Newsblog im Teaserbox-Look
Nach custom_vm_icon_boxes.css, custom_vm_teaser_boxes.css,
custom_vm_buttons.css und custom_vm_icons.css laden.
Die News-Kacheln geben dieselbe Struktur aus wie die VM Teaserbox
(.vm-card / .vm-teaser / .vm-teaser-image / .vm-teaser-body /
.vm-teaser-content / .vm-card-action) und erben Rahmen, Radius,
Schatten, Hover usw. Hier steht nur das News-Spezifische +
die agenturmoderne Optik (Datum-Meta, Bild-Zoom, Pfeil-Textlink,
Aufmacher, „Mehr laden").
Templates: news_list_boxed_vm / news_list_boxed_item_vm ·
mod_newslist_vm (Grid) · mod_newslist_loadmore_vm (Aufmacher + Loadmore).
Icons = CSS-Masken (custom_vm_icons.css), KEIN Icon-Font.
========================================================== */
.vm-newsbox-item,
.vm-newsbox-item * { box-sizing: border-box; }
/* Karte als vertikale Spalte (die .vm-teaser-Flexregel ist in
custom_vm_teaser_boxes.css auf ".vm-teaserbox .vm-teaser" gescoped –
die News-Kachel hat keinen .vm-teaserbox-Vorfahr, daher hier erneut). */
.vm-newsbox-item.vm-teaser { display: flex; flex-direction: column; }
/* --- Bild mit dezentem Zoom im Hover -------------------------------- */
.vm-newsbox-item .vm-teaser-image { overflow: hidden; }
.vm-newsbox-item .vm-teaser-image img { transition: transform .45s ease; }
.vm-newsbox-item:hover .vm-teaser-image img { transform: scale(1.04); }
/* News bewusst OHNE Datum (Kundenvorgabe) – keine Meta-Zeile. */
/* --- Headline-Link: Titelfarbe, kein Unterstrich, dezenter 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); }
/* --- „Weiterlesen →" als Pfeil-Textlink (unten bündig) -------------- */
.vm-newsbox-item .vm-card-action { margin-top: auto; padding-top: 1.5rem; }
.vm-news-more {
display: inline-flex;
align-items: center;
gap: 0.45em;
color: var(--vm-primary);
font-family: var(--vm-font-body);
font-weight: 700;
font-size: 1.05rem;
text-decoration: none;
}
.vm-news-more .vm-icon { width: 1.05em; height: 1.05em; transition: transform .2s ease; }
.vm-news-more:hover,
.vm-news-more:focus-visible { color: var(--vm-primary-hover); }
.vm-news-more:hover span:first-child,
.vm-news-more:focus-visible span:first-child { text-decoration: underline; text-underline-offset: 0.25em; }
.vm-news-more:hover .vm-icon,
.vm-news-more:focus-visible .vm-icon { transform: translateX(3px); }
/* Pagination sitzt außerhalb des Grids, mittig unter den Kacheln. */
.vm-newsbox-pagination { margin-top: var(--vm-gap); }
/* ==========================================================
Übersicht mit Aufmacher (mod_newslist_loadmore_vm)
Erster Eintrag = voll breit, Bild neben Text; Rest im Grid.
========================================================== */
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child {
grid-column: 1 / -1;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
align-items: stretch;
}
/* Aufmacher: der obere 4px-Balken (aus .vm-card::before) in Akzentfarbe
statt Rosa – hebt den ersten Beitrag hervor. Andere Karten behalten
ihren dezenten Rosa-Streifen (Akzent erst im Hover). */
.vm-newsgrid--featured-first > .vm-newsbox-item:first-child::before {
background: var(--vm-accent);
}
.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;
}
.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; }
.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; }
/* 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-newslist-pagination { margin-top: var(--vm-gap); text-align: center; }
.vm-loadmore { display: inline-flex; align-items: center; gap: 0.5em; }
.vm-loadmore .vm-icon { width: 1.05em; height: 1.05em; }
.vm-loadmore.is-loading { opacity: 0.7; pointer-events: none; }
/* Button ausblenden, wenn alle Beiträge geladen sind (JS setzt `hidden`).
Nötig, weil `.button` per TAO auf display:inline-flex/-block steht und das
UA-`[hidden]{display:none}` sonst überschreibt. */
.vm-loadmore[hidden] { display: none !important; }
/* ==========================================================
VM Component Library · Venne Media
Component: VM News Reader / Blog-Beitrag ("A4-Blatt")
Nach custom_vm_icon_boxes.css (Token-Zentrale) laden.
Weißes Blatt mit Rundung + Schatten auf dem grauen
Seitenhintergrund (--vm-page-bg #f5f5f5). Bild randlos oben,
darunter Lesetypografie (H1/H2 + Fließtext aus Contao).
Template: news_full_vm.html5 · Modul: mod_newsreader_vm.html5
========================================================== */
/* --- Layout: Blatt links, kompakte Sidebar rechts (auf Grau) --------- */
.vm-reader-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 320px;
gap: var(--vm-gap);
max-width: var(--vm-content-max, 1600px); /* Standard-Seitenbreite (wie Site) */
margin-inline: auto;
align-items: start;
}
.vm-reader-layout,
.vm-reader-layout * { box-sizing: border-box; }
/* ohne weitere Beiträge: nur das zentrierte Blatt */
.vm-reader-layout--solo {
grid-template-columns: minmax(0, 860px);
justify-content: center;
}
/* --- Ab 1200px abwärts: eine Spalte, Blatt ohne Kartenoptik ---------
Unterhalb von 1200px bleiben neben der 320px-Sidebar keine sinnvollen
Zeilenlängen mehr übrig – der Beitrag wird zur Schlucht. Deshalb schon
hier umstellen und nicht erst am Hauptumbruch bei 900px:
1. „Weitere Beiträge" rutschen unter den Beitrag
2. der Beitrag nimmt die volle Breite
3. Rahmen, Radius und Schatten entfallen
Zu 3.: Das schwebende Blatt lebt vom Rand um es herum. Sobald es die
volle Breite einnimmt, gibt es diesen Rand nicht mehr – ein Schatten
ohne sichtbaren Abstand wirkt dann wie ein Darstellungsfehler. */
@media (max-width: 1200px) {
.vm-reader-layout {
grid-template-columns: 1fr;
}
/* Auch die Solo-Fassung (Beitrag ohne weitere Beiträge) läuft hier auf
volle Breite – ihre 860px-Begrenzung ergäbe sonst wieder einen
schmalen Streifen mit Rand. */
.vm-reader-layout--solo {
grid-template-columns: 1fr;
justify-content: stretch;
}
.vm-reader-sheet {
border: 0;
border-radius: 0;
box-shadow: none;
/* Äußeren Rand aufheben, innere Polsterung bleibt.
Der Abstand kommt von `.centered-wrapper-inner`, das ab 1440px
abwärts auf `width: var(--page-inner-width)` mit
`margin-left: var(--page-padding-left)` steht. Genau diese beiden
Theme-Variablen ziehen wir hier wieder ab – dadurch stimmt die
Kante exakt, auch wenn im Theme Assistant andere Seitenabstände
eingestellt werden.
Bewusst NICHT mit `100vw` gelöst: Das schließt die Breite der
Scrollleiste mit ein und erzeugt am Desktop einen waagerechten
Überlauf. */
margin-left: calc(var(--page-padding-left, 0px) * -1);
margin-right: calc(var(--page-padding-right, 0px) * -1);
}
/* --- „Weitere Beiträge" nur so breit wie nötig ---------------------
In einer Spalte liefen die Kacheln über die volle Seitenbreite –
bei kurzen Titeln steht dann viel leere Fläche. `fit-content` am
Container richtet sich nach der breitesten Kachel, sodass alle
gleich breit bleiben (kein ausgefranster rechter Rand) und der
Block trotzdem nur so viel Platz nimmt, wie er braucht. */
.vm-reader-aside {
position: static; /* sticky ergibt in einer Spalte keinen Sinn */
width: fit-content;
max-width: 100%;
}
/* Der Button ist jetzt das letzte Element der Seite und stieß direkt
an den Fuß. */
.vm-reader-allposts {
margin-bottom: clamp(2rem, 5vw, 3rem);
}
}
/* --- Das Blatt ------------------------------------------------------- */
.vm-reader {
display: block;
color: var(--vm-text);
}
/* Schwebendes Blatt – gilt AB 1201px. Darunter fallen Rahmen, Radius und
Schatten weg (s. Media Query oben): Sobald die Fläche randlos über die
volle Breite läuft, gibt es keinen Rand mehr, von dem sich ein Blatt
abheben könnte.
Zum Wiederfinden: Radius und Schatten sitzen HIER, nicht auf
.vm-reader-body – beim Untersuchen landet man dort zuerst, weil an
derselben Kante der sichtbare Textkasten beginnt. */
.vm-reader-sheet {
background: var(--vm-white);
border: 1px solid var(--vm-border-neutral);
/* oben eckig (schließt an Header an), unten gerundet */
border-radius: 0 0 var(--vm-radius) var(--vm-radius);
/* schwebendes Blatt auf #f5f5f5 */
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.12);
overflow: hidden;
}
/* --- Bild randlos oben (auf volle Blattbreite zwingen) -------------- */
.vm-reader-image,
.vm-reader-image figure,
.vm-reader-image .image_container { display: block; width: 100%; margin: 0; line-height: 0; }
.vm-reader-image { background: rgba(0, 0, 0, 0.04); }
.vm-reader-image img,
.vm-reader-image picture {
display: block !important;
width: 100% !important;
height: auto;
}
/* optionale Bildunterschrift dezent, mit Innenabstand */
.vm-reader-image figcaption {
padding: 0.6rem clamp(1.25rem, 3vw, 2rem);
font-size: 0.85rem;
line-height: 1.4;
color: var(--vm-text);
}
/* --- Textkörper ------------------------------------------------------ */
.vm-reader-body {
padding: clamp(1.75rem, 1rem + 3vw, 3.5rem);
}
/* Sitzt ein Bild direkt über dem Text, oben weniger Luft – das Bild schließt
den oberen Blattbereich schon ab (bei Beiträgen ohne Bild bleibt der volle
Innenabstand, damit die H1 nicht am Blattrand klebt). */
.vm-reader-image + .vm-reader-body {
padding-top: clamp(1.25rem, 0.75rem + 1vw, 1.75rem);
}
.vm-reader-title {
margin: 0 0 0.5em;
color: var(--vm-primary);
font-weight: 700;
line-height: 1.14;
font-size: clamp(1.9rem, 1.35rem + 2vw, 2.9rem);
}
@media (max-width: 900px) {
.vm-reader-title {
font-size: 1.5em !important;
}
}
.vm-reader-subtitle {
margin: 0 0 1em;
color: var(--vm-primary-hover);
font-weight: 600;
line-height: 1.3;
font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.2rem) !important;
padding-bottom: 1em;
}
/* Trennlinie unter den Überschriften, vor dem Fließtext */
.vm-reader-hr {
border: 0;
border-top: 1px solid var(--vm-border);
margin: 0 0 1.6rem;
}
/* Lesemodus: angenehme Zeilenlänge + luftige Zeilen */
.vm-reader-content {
color: var(--vm-text);
font-size: 1.075rem;
line-height: 1.75;
max-width: 68ch;
hyphens: auto;
-webkit-hyphens: auto;
text-wrap: pretty;
}
.vm-reader-content > *:first-child { margin-top: 0; }
.vm-reader-content > *:last-child { margin-bottom: 0; }
.vm-reader-content p { margin: 0 0 1.25em; }
/* Zwischenüberschriften aus den Content-Elementen */
.vm-reader-content h2,
.vm-reader-content h3,
.vm-reader-content h4 {
color: var(--vm-primary);
font-weight: 700;
line-height: 1.25;
}
.vm-reader-content h2 { font-size: 1.6rem; margin: 1.9em 0 0.5em; }
.vm-reader-content h3 { font-size: 1.3rem; margin: 1.7em 0 0.4em; }
.vm-reader-content h4 { font-size: 1.1rem; margin: 1.5em 0 0.4em; }
.vm-reader-content ul,
.vm-reader-content ol { margin: 0 0 1.25em; padding-left: 1.4em; }
.vm-reader-content li { margin: 0.4em 0; }
/* Normale Textlinks orange + unterstrichen. Buttons (a.button) werden bewusst
AUSGENOMMEN, sonst überschreibt diese Regel (höhere Spezifität als .button)
die weiße Button-Schrift -> orange auf orange. So behalten Buttons ihre
eigene Variantenfarbe und bekommen keine Unterstreichung. */
.vm-reader-content a:not(.button) {
color: var(--vm-primary-hover);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.vm-reader-content a:not(.button):hover,
.vm-reader-content a:not(.button):focus-visible { color: var(--vm-primary); }
/* Blockzitat mit Akzent = Blog-Charakter */
.vm-reader-content blockquote {
margin: 1.6em 0;
padding: 0.3em 0 0.3em 1.25em;
border-left: 4px solid var(--vm-accent);
color: var(--vm-primary);
font-size: 1.12em;
font-style: italic;
}
/* Bilder in den Content-Elementen */
.vm-reader-content img { max-width: 100%; height: auto; border-radius: var(--vm-radius-small); }
.vm-reader-content figure { margin: 1.6em 0; }
.vm-reader-content figure img { display: block; }
.vm-reader-content figcaption {
margin-top: 0.5rem;
font-size: 0.85rem;
color: var(--vm-text);
}
/* Downloads / Anhänge */
.vm-reader-enclosure { list-style: none; margin: 2rem 0 0; padding: 0; }
.vm-reader-enclosure li { margin: 0.4em 0; }
.vm-reader-enclosure a { color: var(--vm-primary-hover); text-decoration: none; font-weight: 600; }
.vm-reader-enclosure a:hover { text-decoration: underline; }
/* --- Sidebar „Weitere Beiträge" (kompakt: Mini-Bild + Titel) -------- */
.vm-reader-aside {
position: sticky;
top: 1.5rem;
padding-top: 2rem; /* Luft nach oben, seit das Blatt bündig am Header sitzt */
}
/* höhere Spezifität, damit die Theme-h2-Größe nicht gewinnt */
.vm-reader-aside .vm-reader-aside-title {
margin: 0 0 1rem;
color: var(--vm-primary);
font-size: 1.05rem;
font-weight: 700;
line-height: 1.3;
}
/* Contao-Default (list-style: disc + padding-left) sicher entfernen */
.vm-reader-aside .vm-reader-morelist {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.75rem;
}
.vm-reader-aside .vm-reader-morelist li {
list-style: none;
margin: 0;
padding: 0;
}
.vm-reader-allposts { display: inline-flex; align-items: center; gap: 0.5em; }
.vm-reader-allposts .vm-icon { width: 1.05em; height: 1.05em; }
.vm-reader-more-link {
display: flex;
align-items: center;
gap: 0.85rem;
/* Rechts deutlich mehr Luft: Seit die Liste auf `fit-content` steht,
bestimmt dieser Wert den Abstand zwischen Titel und Kachelkante –
ohne ihn klebt der Text am Rand. */
padding: 0.6rem 2rem 0.6rem 0.75rem;
background: var(--vm-white); /* weiße Fläche (nicht rot/rosa) */
border: 1px solid var(--vm-border-neutral);
border-radius: var(--vm-radius-small);
text-decoration: none;
transition: border-color var(--vm-transition), box-shadow var(--vm-transition), transform var(--vm-transition), color var(--vm-transition);
}
.vm-reader-more-link:hover,
.vm-reader-more-link:focus-visible {
border-color: var(--vm-text);
box-shadow: var(--vm-shadow);
transform: translateY(-1px);
}
/* Titel-Feedback im Hover: dezent in Akzent */
.vm-reader-more-link:hover .vm-reader-more-title,
.vm-reader-more-link:focus-visible .vm-reader-more-title { color: var(--vm-primary); }
.vm-reader-more-thumb {
flex: 0 0 auto;
width: 64px;
height: 64px;
border-radius: calc(var(--vm-radius-small) - 2px);
overflow: hidden;
line-height: 0;
background: rgba(0, 0, 0, 0.04);
}
.vm-reader-more-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vm-reader-more-title {
min-width: 0;
color: var(--vm-text); /* Standard-Schriftfarbe (nicht rot) */
font-weight: 600;
font-size: 0.95rem;
line-height: 1.3;
}
/* --- „alle Beiträge"-Button unter der Sidebar-Liste ----------------
Ersetzt den früheren Zurück-Link unter dem Blatt (keine Dublette mehr;
mobil sitzt die Sidebar ohnehin unter dem Beitrag, der Button also ganz
unten). Roter Primär-Button (.button), volle Sidebar-Breite, verlinkt fest
auf die Beitrags-Übersicht (Seiten-ID 238). */
.vm-reader-allposts {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin-top: 1rem;
padding-left: 1em !important;
}
/* =====================================================================
Venne Media – PROJEKTE-Übersicht (Filter Alle · Gewerbe · Behörden)
---------------------------------------------------------------------
Kombinierte Liste beider Projekt-Archive (2 = Gewerbe, 3 = Behörden),
einheitliche Kacheln (VM-Newsbox-Optik). Filter client-seitig über
data-vm-cat je Kachel + data-active-filter am Container (setzt vm_projects.js).
Ohne JS bleiben alle Projekte sichtbar (Progressive Enhancement).
Nach custom_vm_base.css / custom_vm_icon_boxes.css / custom_vm_buttons.css laden.
===================================================================== */
/* --- Filter-Leiste -------------------------------------------------- */
.vm-projects-filter {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin: 0 0 var(--vm-gap, 1.6rem);
}
.vm-projects-filterbtn {
-webkit-appearance: none;
appearance: none;
cursor: pointer;
padding: 0.5em 1.25em;
border: 2px solid var(--vm-border-neutral, #e6e5e2);
border-radius: var(--vm-radius-pill, 999px);
background: var(--vm-white, #fff);
background-image: none !important; /* TAO-Gradient aus */
color: var(--vm-text, #575656);
font-family: var(--vm-font-body);
font-weight: 600;
font-size: 1rem;
line-height: 1.2;
text-transform: none !important; /* kein TAO-UPPERCASE */
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;
}
.vm-projects-filterbtn:hover,
.vm-projects-filterbtn:focus-visible {
border-color: var(--vm-text, #575656);
color: var(--vm-text, #575656);
}
/* aktiver Filter = Akzent */
.vm-projects-filterbtn.is-active {
background: var(--vm-primary, #c9390f);
border-color: var(--vm-primary-dark, #b6350d);
color: var(--vm-white, #fff);
}
/* --- Filterung: Kacheln der NICHT aktiven Kategorie ausblenden ------- */
.vm-projects[data-active-filter="gewerbe"] .vm-newsbox-item:not([data-vm-cat="gewerbe"]),
.vm-projects[data-active-filter="behoerden"] .vm-newsbox-item:not([data-vm-cat="behoerden"]) {
display: none;
}
/* --- „keine Treffer" + „Mehr laden" --------------------------------- */
.vm-projects-empty {
margin: var(--vm-gap, 1.6rem) 0 0;
color: var(--vm-text-2, #63615f);
}
/* =====================================================================
Venne Media – PREHEADLINE (Vortitel mit Linie links) + Section-Head
---------------------------------------------------------------------
Der genannte neue Inhaltstyp: kleiner Vortitel/Kicker mit rotem Strich
links daneben. Text in NORMALER Schriftfarbe (#575656), nur die LINIE
ist rot – bewusst wenig Rot.
Nach custom_vm_base.css laden (nutzt die --vm-*-Tokens).
VERWENDUNG (redakteurssicher, reine Klasse):
Unsere Kern-Technologie
Contao, richtig gebaut.
In Contao z. B. im Überschrift-Element als CSS-Klasse eines vorangestellten
Text-Elements, oder als Feld in einem eigenen RSCE (Vortitel + Titel + Text).
===================================================================== */
.vm-preheadline {
display: inline-flex;
align-items: center;
gap: 0.6em;
margin: 0 0 0.7rem;
font-family: var(--vm-font-body);
font-size: 1.15rem; /* ~18px */
font-weight: 600;
letter-spacing: 0.01em;
color: var(--vm-text); /* Text in Schriftfarbe … */
}
.vm-preheadline::before { /* … nur die Linie ist rot */
content: "";
width: 1.7em;
height: 2px;
background: var(--vm-accent);
flex: 0 0 auto;
}
/* Variante ohne Linie (reiner Kicker über einer Card o. Ä.) */
.vm-kicker {
margin: 0;
font-family: var(--vm-font-body);
font-size: 1rem;
font-weight: 700;
color: var(--vm-text-2);
}
/* -----------------------------------------------------------------
Optionaler Section-Kopf: Titelblock links, Einleitung rechts.
Leistungen
Alles fürs Digitale — und drumherum.
Kurzer Einleitungstext …
----------------------------------------------------------------- */
.vm-section-head {
display: flex;
flex-wrap: wrap;
align-items: end;
justify-content: space-between;
gap: 1rem 2rem;
margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
}
.vm-section-head h2 { font-size: clamp(1.6rem, 2.9vw, 2.5rem); }
.vm-section-head > p { margin: 0; max-width: 46ch; color: var(--vm-text-2); font-size: 1.05rem; }
/* -----------------------------------------------------------------
Element „Vortitel (Preheadline)" (RSCE rsce_vm_preheadline)
Reines mit roter Linie – NIE eine Überschrift (h1–h6), sonst
leidet die Heading-Outline (Barrierefreiheit). Die eigentliche
Überschrift kommt aus einem normalen Überschrift-Element daneben.
----------------------------------------------------------------- */
.vm-preheadline.-center { display: flex; justify-content: center; }
/* =====================================================================
Venne Media – RÜCKRUF-BAND (Pre-Footer, auf jeder Seite)
---------------------------------------------------------------------
Kompaktes Kontakt-/Rückruf-Band überm Footer. Struktur (RockSolid
Columns): links Vortitel + Headline + Text, rechts das Formular.
Helles Design (C.I.-konform, kein dunkles Band). Diese CSS macht das
Band flach & markenkonform:
- Felder 2-spaltig, weiße Felder mit dezentem Rahmen (auf hellem Grund)
- ALTCHA („Ich bin kein Roboter") dezent eingepasst
- Datenschutz-Hinweis (.widget-explanation) + Absenden-Button in einer Zeile
- Absenden-Button im VM-Stil (Akzent, gerundet, ohne Versalien)
>>> HOOK: dem ÄUSSEREN .centered-wrapper die Klasse `vm-callback` geben.
Alles hier ist darunter gescoped. Nach custom_vm_base.css laden.
===================================================================== */
/* --- Rosa-Karte (zentriert, begrenzt) statt full-bleed-Band ----------
„Rosa" = warmer Flächenton --vm-surface (#fdf4f0). Der centered-wrapper
liefe sonst über die volle Breite -> hier per width/max-width auf
Content-Breite (1600) begrenzt und mittig, mit runden Ecken + Schatten.
`width: min(100% - Gutter, 1600)` = auf großen Screens 1600 zentriert,
darunter automatisch Rand-Abstand (mobil). Padding responsiv im CSS. */
.vm-callback {
box-sizing: border-box;
width: min(100% - clamp(2rem, 6vw, 4rem), 1400px); /* Kartenbreite – hier justieren */
margin-inline: auto;
background-color: var(--vm-surface, #fdf4f0);
border-radius: var(--vm-radius, 16px);
box-shadow: 0 12px 34px rgba(87, 86, 86, 0.12);
padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 4vw, 3rem);
}
/* Inneren Wrapper nicht zusätzlich begrenzen – die Karte selbst steuert
Breite + Padding. */
.vm-callback > .centered-wrapper-inner {
max-width: none;
margin-inline: 0;
padding-inline: 0;
}
/* --- Intro (linke Spalte): Abstände zähmen -------------------------- */
.vm-callback .content-headline { margin-bottom: 0.4rem; }
.vm-callback .content-text .rte > :first-child { margin-top: 0; }
.vm-callback .content-text .rte > :last-child { margin-bottom: 0; }
/* --- Formular -------------------------------------------------------- */
.vm-callback .ce_form,
.vm-callback form { margin: 0; }
/* 3-Spalten-Idee (im Formularbereich): links die 4 Felder gestapelt,
rechts der Aktions-Cluster (Roboter, Datenschutz, Button).
Grid: Spalte 1 = Felder, Spalte 2 = Aktionen. Hidden-Inputs (display:none)
fallen aus dem Grid raus. */
.vm-callback .formbody {
display: grid;
grid-template-columns: 1fr 1fr;
column-gap: 1.25rem;
row-gap: 0.7rem;
align-items: start;
margin: 0;
}
.vm-callback .formbody > .widget { margin: 0; }
/* 4 Felder: linke Spalte, untereinander */
.vm-callback .formbody > .widget-text { grid-column: 1; min-width: 0; }
/* Nur Platzhalter sichtbar: Feld-Labels visuell ausblenden, für Screenreader
erhalten (Label bleibt per for/id mit dem Feld verknüpft = barrierefrei).
Voraussetzung: Labels im Formulargenerator wieder aktiv. */
.vm-callback .widget-text > label {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Eingabefelder – weiß mit dezentem Rahmen (auf hellem Grund sichtbar),
gerundet, min. 16px (a11y, kein iOS-Zoom) */
.vm-callback input.text {
width: 100%;
box-sizing: border-box;
padding: 0.7rem 0.95rem;
/* Die Feldkante ist eine BEDIEN-Information, kein Zierrat: WCAG 1.4.11
verlangt dafür 3:1 gegen BEIDE angrenzenden Flächen.
Das ist hier der springende Punkt: Das weiße Feld hebt sich von der
getönten Karte, auf der das Formular liegt (#F7ECE7), praktisch nicht
ab (1,18:1) – die Kante trägt also die gesamte Information, wo das
Feld anfängt und aufhört. Sie muss deshalb auch gegen die KARTE
bestehen, nicht nur gegen die weiße Füllung.
--vm-border (#e8e7e4) lag bei 1,24:1, ein erster Versuch mit #8f8b86
bei 3,38:1 gegen Weiß, aber nur 2,92:1 gegen die Karte. Der Token
steht jetzt auf #8a8681: 3,62:1 bzw. 3,12:1. */
border: 1px solid var(--vm-border-strong, #8a8681);
border-radius: var(--vm-radius-small, 10px);
background: var(--vm-white, #fff);
color: var(--vm-text, #575656);
font-size: 1rem;
line-height: 1.35;
transition: border-color .18s ease, box-shadow .18s ease;
}
/* Platzhalter ist hier faktisch die einzige SICHTBARE Beschriftung
(die Labels sind visuell ausgeblendet) – er muss die vollen 4,5:1
erfüllen. #8a8987 lag bei 3,49:1, #726f6d liegt bei 4,99:1. */
.vm-callback input.text::placeholder { color: #726f6d; opacity: 1; }
/* Fokus: KEIN `outline: none` ohne vollwertigen Ersatz. Vorher blieb nur
ein 1px-Rahmenwechsel plus ein 15%-Schein, der auf Weiß praktisch
unsichtbar war (≈1,1:1) – für 2.4.7/2.4.13 zu wenig. Jetzt der
reguläre 3px-Ring aus custom_vm_base.css, der Rahmenwechsel bleibt
als zusätzliches Signal. */
.vm-callback input.text:focus-visible {
outline: 3px solid var(--vm-focus-ring, #c9390f);
outline-offset: 2px;
border-color: var(--vm-accent, #c9390f);
box-shadow: none;
}
/* ALTCHA („Ich bin kein Roboter") – rechte Spalte, Zeile 2 (unter dem Titel),
ohne Kasten/Rahmen */
.vm-callback .widget-altcha { grid-column: 2; grid-row: 2; margin: 0; }
.vm-callback .widget-altcha .altcha {
--altcha-max-width: 100%;
--altcha-border-width: 0; /* Rahmen um die Checkbox weg */
--altcha-color-base: transparent; /* keine Kastenfläche -> sitzt auf Rosa */
--altcha-color-text: var(--vm-text, #575656);
}
/* ALTCHA-Innenabstände zähmen (Kasten weg -> kein Innen-Polster nötig;
TAO gibt jedem .main-content label ein margin-bottom -> hier auf 0). */
.vm-callback .altcha-main { padding: 0; }
.main-content .vm-callback label.altcha-label { margin-bottom: 0; }
.vm-callback .widget-altcha .warning { color: var(--vm-accent, #c9390f); font-size: 0.9rem; }
/* Feld-Label „Antispam" ausblenden (ALTCHA hat mit „Ich bin kein Roboter"
schon eine eigene Beschriftung) – für Screenreader erhalten. */
.vm-callback .widget-altcha > label {
position: absolute !important;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
/* Datenschutz-Hinweis (Erklärungstext) – klein, gedämpft, links neben Button */
/* Titel „Sicherheit & Datenschutz" (Erklärungsfeld mit Klasse .security) –
Zeile 1, über dem Roboter; klein, in Schriftfarbe. */
.vm-callback .widget-explanation.security {
grid-column: 2;
grid-row: 1;
margin: 0;
color: var(--vm-text, #575656);
font-size: 1rem;
}
.vm-callback .widget-explanation.security p { margin: 0; }
/* Datenschutz-Hinweis (die ANDERE Erklärung, ohne .security) – Zeile 3,
klein & gedämpft. */
.vm-callback .widget-explanation:not(.security) {
grid-column: 2;
grid-row: 3;
margin: 0;
font-size: 0.9rem;
line-height: 1.4;
color: var(--vm-text-2, #63615f);
}
.vm-callback .widget-explanation p { margin: 0; }
/* Der Datenschutz-Link liegt auf der getönten Karte (#F7ECE7). Das
Akzent-Rot kommt dort nur auf 4,44:1 und verfehlt die 4,5:1 für
Fließtext knapp; auf Weiß wäre es mit 5,15:1 in Ordnung. Auf der Karte
gilt deshalb das Dunkelrot (5,17:1) – dieselbe Ausnahme wie bei den
Karten-Textlinks in custom_vm_icon_boxes.css. */
.vm-callback .widget-explanation a {
color: var(--vm-primary-dark, #b6350d);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* --- Absenden-Button im VM-Stil (Akzent, gerundet, KEINE Versalien) --
Selektor .submit statt .button, darum die TAO-Overrides hier direkt. */
.vm-callback .widget-submit {
grid-column: 2;
grid-row: 4; /* auf Höhe des letzten Feldes */
align-self: end; /* Button-Unterkante bündig mit „Gewünschte Uhrzeit" */
justify-self: start;
margin: 0;
}
.vm-callback .widget-submit .submit,
.vm-callback button.submit {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
cursor: pointer;
padding: 0.64em 1.43em;
border: 2px solid var(--vm-primary-dark, #b6350d) !important;
border-image: none !important;
border-radius: var(--vm-radius, 16px) !important;
background: var(--vm-primary, #c9390f) !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
color: var(--vm-white, #fff);
font-size: 1.05rem;
font-weight: 600;
line-height: 1.3;
letter-spacing: 0.02em;
text-transform: none !important; /* kein TAO-UPPERCASE */
white-space: nowrap;
transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
.vm-callback .widget-submit .submit:hover,
.vm-callback .widget-submit .submit:focus-visible,
.vm-callback button.submit:hover {
background: var(--vm-primary-dark, #b6350d) !important;
border-color: var(--vm-primary, #c9390f) !important;
transform: translateY(-1px);
}
/* Fehler-/Pflichtfeld-Meldungen */
.vm-callback .error,
.vm-callback p.error { color: var(--vm-accent, #c9390f); font-weight: 600; }
/* --- Mobil klein: Felder, Hinweis & Button einspaltig --------------- */
@media (max-width: 700px) {
.vm-callback .formbody { grid-template-columns: 1fr; }
.vm-callback .formbody > .widget-text,
.vm-callback .formbody > .widget-altcha,
.vm-callback .formbody > .widget-explanation,
.vm-callback .formbody > .widget-submit { grid-column: 1; grid-row: auto; }
.vm-callback .widget-submit .submit { width: 100%; }
}
/* =====================================================================
Venne Media – FOOTER (.footer-inhalte)
---------------------------------------------------------------------
Grauer Fuß (Wrapper-Inline: bg #F3F2F0 + obere Trennlinie) mit
Fisch-Logo und 5 Spalten: Firmeninfo · Leistungen · Unternehmen ·
Standorte · Erreichbarkeit. Link-Listen = „VM Absatz mit Icon" (Pfeil).
Standorte bewusst OHNE Map-Icon (kein Routenplaner-Missverständnis).
Scoped über die Wrapper-Klasse .footer-inhalte.
Nach custom_vm_base.css / custom_vm_icons.css laden.
===================================================================== */
/* --- Band + zentrierter Inhalt -------------------------------------- */
.footer-inhalte {
padding-top: clamp(1.75rem, 3vw, 2.5rem); /* oben schlanker */
padding-bottom: clamp(2.5rem, 5vw, 4rem); /* unten großzügig */
color: var(--vm-text, #575656);
}
.footer-inhalte > .centered-wrapper-inner {
max-width: var(--vm-content-max, 1600px);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
}
/* --- Fisch-Logo ----------------------------------------------------- */
.footer-inhalte .content-image { margin: 0 0 clamp(1rem, 2vw, 1.5rem); }
.footer-inhalte .content-image figure { margin: 0; }
.footer-inhalte .content-image img { width: 88px; height: auto; }
/* --- Responsive Spalten-Raster (überschreibt TAOs rs-columns) --------
> 1400px : 5 Spalten (1 Reihe)
901–1400 : 3 Spalten, 2 Reihen (Firmeninfo·Leistungen·Unternehmen /
Standorte·Erreichbarkeit)
601–900 : Firmeninfo volle Breite, dann 2×2
(Leistungen|Unternehmen, Standorte|Erreichbarkeit)
≤ 600 : alles einspaltig
rs-columns wird zu CSS-Grid; TAO-Breiten/Floats werden neutralisiert. */
.footer-inhalte .rs-columns {
display: grid !important;
/* Spalte 1 (Firmeninfo/Fließtext) breiter als die Link-Spalten */
grid-template-columns: 1.8fr 1.2fr 1fr 1.2fr 1.1fr;
gap: 2.5rem 2.5rem;
margin: 0 !important;
}
.footer-inhalte .rs-column {
width: auto !important;
float: none !important;
margin: 0 !important;
padding: 0 !important;
}
@media (max-width: 1400px) {
.footer-inhalte .rs-columns { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
.footer-inhalte .rs-columns { grid-template-columns: repeat(2, 1fr); }
.footer-inhalte .rs-column.sp-1 { grid-column: 1 / -1; } /* Firmeninfo volle Breite */
}
@media (max-width: 600px) {
.footer-inhalte .rs-columns { grid-template-columns: 1fr; }
.footer-inhalte .rs-column.sp-1 { grid-column: auto; }
}
/* --- Spalten-Überschriften ------------------------------------------
Die fünf Spaltenköpfe (Venne Media GmbH · Leistungen · Unternehmen ·
Standorte · Erreichbarkeit) sind ECHTE
aus dem Contao-Über-
schriftenfeld.
Vorher standen sie als
…
im Fließtext und
sahen nur per CSS wie Überschriften aus. Für einen Screenreader war
der Fuß damit ein Block ohne Gliederung – man konnte nicht zwischen
den Spalten springen (WCAG 1.3.1, Level A). Das Überschriftenfeld
stand ohnehin schon auf h2, nur der Wert war leer.
Die - und -Selektoren bleiben absichtlich stehen: Sie
kosten nichts, halten einen Rollback ohne CSS-Änderung möglich und
greifen weiter, falls irgendwo noch ein alter Spaltenkopf auftaucht.
`.rte` gibt der Absatz-Regel genug Spezifität, um die
.content-text-Textregel (weiter unten, 0.6rem) zu schlagen. */
.footer-inhalte .rs-column .font-size-m .rte p { margin: 0 0 0.9rem; }
.footer-inhalte .rs-column .font-size-m h2,
.footer-inhalte .rs-column .font-size-m strong {
font-family: var(--vm-font-display, "Poppins", sans-serif);
font-weight: 700;
font-size: 1.15rem;
color: var(--vm-text, #575656);
}
/* h1–h6 bringen aus custom_vm_base.css eine fluide clamp()-Größe und
eigene Abstände mit – beides hier zurücknehmen, damit der Spaltenkopf
exakt so aussieht wie vorher der -Absatz. */
.footer-inhalte .rs-column .font-size-m h2 {
margin: 0 0 0.9rem;
line-height: 1.3;
letter-spacing: normal;
}
/* Ist der Fließtext des Elements leer (Text steckt jetzt komplett in der
Überschrift), soll der leere .rte-Rest keinen Abstand aufreißen. */
.footer-inhalte .rs-column .font-size-m .rte:empty { display: none; }
/* --- Firmen-Intro (Spalte 1) ---------------------------------------- */
.footer-inhalte .content-text .rte p { margin: 0 0 0.6rem; line-height: 1.55; }
.footer-inhalte .content-text .rte > :last-child { margin-bottom: 0; }
/* „Die Agentur kennenlernen"-Link (Absatz mit Icon) unter dem Fließtext absetzen */
.footer-inhalte .rs-column.sp-1 .vm-icon-text { margin-top: 0.9rem; }
/* … und in Akzent-Rot + semibold (einziger Icon-Link in Spalte 1) */
.footer-inhalte .rs-column.sp-1 .vm-icon-text a { color: var(--vm-accent, #c9390f); font-weight: 600; }
.footer-inhalte .rs-column.sp-1 .vm-icon-text a:hover,
.footer-inhalte .rs-column.sp-1 .vm-icon-text a:focus-visible { color: var(--vm-primary-hover, #b6350d); }
/* Weiche Silbentrennung NUR für den (schmalen) Firmentext – bricht lange
deutsche Komposita sauber. Braucht lang="de" am (Contao setzt das).
Nicht auf Überschrift (.font-size-m), Adressen oder Link-Listen. */
.footer-inhalte .rs-column.sp-1 .content-text:not(.font-size-m) .rte p {
-webkit-hyphens: auto;
hyphens: auto;
hyphenate-limit-chars: 6 3 2; /* erst ab 6-Zeichen-Wörtern, min. 3 vor / 2 nach dem Bruch */
}
/* --- Link-Listen: „VM Absatz mit Icon" im Footer -------------------- */
/* kompakter, kleinerer Pfeil, sauberer Hover mit Mini-Slide */
.footer-inhalte .vm-icon-text {
margin: 0 0 0.55rem;
--vm-icon-text-size: 1.2em;
}
.footer-inhalte .vm-icon-text .vm-icon-text-icon {
margin-top: 0.2em;
transition: transform .18s ease;
}
.footer-inhalte .vm-icon-text-body p { margin: 0; line-height: 1.4; }
.footer-inhalte .vm-icon-text a {
color: var(--vm-text, #575656);
text-decoration: none;
transition: color .18s ease;
}
.footer-inhalte .vm-icon-text a:hover,
.footer-inhalte .vm-icon-text a:focus-visible {
color: var(--vm-accent, #c9390f);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.footer-inhalte .vm-icon-text:hover .vm-icon-text-icon,
.footer-inhalte .vm-icon-text:focus-within .vm-icon-text-icon {
transform: translateX(3px);
}
/* --- Standorte: Adressblöcke (ohne Icon) ---------------------------- */
.footer-inhalte .vm-icon-text--noicon .vm-icon-text-body p { line-height: 1.55; }
/* --- Telefon-/E-Mail-Links im Akzent -------------------------------- */
.footer-inhalte a[href^="tel:"],
.footer-inhalte a[href^="mailto:"] {
color: var(--vm-accent, #c9390f);
font-weight: 600;
text-decoration: none;
transition: color .18s ease;
}
.footer-inhalte a[href^="tel:"]:hover,
.footer-inhalte a[href^="tel:"]:focus-visible,
.footer-inhalte a[href^="mailto:"]:hover,
.footer-inhalte a[href^="mailto:"]:focus-visible {
color: var(--vm-primary-hover, #b6350d);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* Kleines Telefon-Icon direkt vor der Nummer (Aktions-Link = Icon).
Maske aus dem VM-Icon-Set; currentColor = Akzent (s. tel:-Regel oben). */
.footer-inhalte a.icon-phone::before {
content: "";
display: inline-block;
width: 0.95em;
height: 0.95em;
margin-right: 0.4em;
vertical-align: -0.12em;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* =====================================================================
Rechtsleiste (Sub-Footer .rechtliches): Impressum · Datenschutz · Sitemap
Schlanke horizontale Leiste auf hellem Grund, dezente Links.
===================================================================== */
.rechtliches {
padding-block: clamp(0.9rem, 2vw, 1.4rem);
}
.rechtliches > .centered-wrapper-inner {
max-width: var(--vm-content-max, 1600px);
margin-inline: auto;
padding-inline: clamp(1rem, 4vw, 2rem);
}
.rechtliches ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.4rem 1.5rem;
margin: 0;
padding: 0;
list-style: none;
}
.rechtliches li { margin: 0; }
.rechtliches a {
color: var(--vm-text-2, #63615f);
font-size: 0.95rem;
text-decoration: none;
transition: color .18s ease;
}
.rechtliches a:hover,
.rechtliches a:focus-visible {
color: var(--vm-accent, #c9390f);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* =====================================================================
.gridlinks – Linkspalten im Fuß als ECHTE Liste
---------------------------------------------------------------------
Für ein normales Textelement, das eine