war beides „none". */
text-transform: none;
letter-spacing: normal;
box-shadow: none;
text-shadow: none;
}
/* Die Überschrift ist nur Struktur — Größe und Abstände sitzen am Button.
Ohne font-size: inherit würde die h3-Standardgröße die em-basierten
Polster des Buttons mitskalieren. */
.ce_accordion .toggler-heading {
margin: 0;
padding: 0;
font-size: inherit;
font-weight: inherit;
line-height: inherit;
}
/* Plus/Minus-Anzeige: hing an der jQuery-UI-Klasse
`.ui-accordion-header-active`, die es ohne jQuery UI nicht mehr gibt.
An aria-expanded ist sie ohnehin besser aufgehoben — Optik und
ausgelesener Zustand können so nicht auseinanderlaufen. */
.ce_accordion .toggler[aria-expanded="true"]::after {
content: "\2212";
}
/* Sicherheitsnetz: Das Skript blendet Panels über das hidden-Attribut
aus. Sollte je eine Theme-Regel `display` auf .accordion setzen,
würde sie das UA-Verhalten von [hidden] überstimmen. */
.ce_accordion .accordion[hidden] {
display: none !important;
}
/* =====================================================================
Rechtliche Links im Seitenfuß: Zielgröße (WCAG 2.5.8, Level AA)
---------------------------------------------------------------------
Impressum / Datenschutz / Erklärung zur Barrierefreiheit / Sitemap
waren nur 20px hoch — unter den geforderten 24x24px. Die Breite war
nie das Problem (kürzester Eintrag „Sitemap" mit 62px).
Der Innenabstand vergrößert die Klickfläche, der gleich große
NEGATIVE Außenabstand nimmt sie im Layout wieder zurück. Dadurch
bleibt der Fuß exakt so hoch wie vorher und die Links stehen weiter
auf einer Linie mit dem Copyright-Hinweis — der ist ein eigener
Absatz und würde sonst verspringen.
vertical-align: middle auch auf ::before, sonst rutschen die
Trennstriche zwischen den Einträgen nach oben.
===================================================================== */
.footer-links li > a {
display: inline-block;
padding: 0.5em 0;
margin: -0.5em 0;
vertical-align: middle;
}
.footer-links li::before {
vertical-align: middle;
}
/* ==========================================================
Links im Fließtext unterstreichen (WCAG 1.4.1)
----------------------------------------------------------
Grün #006029 hebt sich vom Fließtext #1d1d1b nur mit 2,17:1 ab —
gefordert sind 3:1, wenn allein die Farbe den Link kennzeichnet.
Betroffen waren u. a. Impressum, Kontakt, Erklärung zur
Barrierefreiheit, DGS und Leichte Sprache (axe „link-in-text-block",
gemessen 29.09.2026).
Nur Links OHNE Klasse in Absätzen: Buttons, Linklisten und Karten
tragen immer eine Klasse und behalten ihre Optik. `.more` (das
„weiterlesen" der News-Boxen) ist ausgenommen — dort ist die ganze
Box der Link. Listen bleiben außen vor: In der Sitemap ist jeder
Eintrag ein Link, das erkennt man ohne Unterstreichung.
========================================================== */
.main-content p:not(.more) a:not([class]) {
text-decoration: underline;
text-underline-offset: 0.15em;
}
/* =====================================================================
Bewegung reduzieren (WCAG 2.3.3 · prefers-reduced-motion)
---------------------------------------------------------------------
Wer im Betriebssystem „Bewegung reduzieren" aktiviert hat, bekommt
keine Übergänge und kein weiches Scrollen mehr (oben steht
`html { scroll-behavior: smooth }` – das wird hier zurückgenommen).
Fokus-Outlines sind davon nicht betroffen, sie sind keine Animation.
ACHTUNG: Das sanfte Scrollen des Akkordeons kommt aus jQuery
(`$('html, body').animate(...)` im Seitenlayout) und lässt sich per
CSS NICHT abschalten – das müsste im Skript selbst über
window.matchMedia('(prefers-reduced-motion: reduce)') abgefragt werden.
===================================================================== */
@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;
}
}
/* ==========================================================
VM Component Library · JCW-Variante
Component: VM Iconbox / Grid / Card Base
Version: 2.0.0
CMS: Contao 5.7
Theme: RockSolid TAO
Breakpoints: Desktop 1680px / Tablet 1280px / Mobile 900px
Farbschema JCW:
- Primär (Akzent): Grün #006029
- Ausnahme: Rot #E2001A
- Text: #1d1d1b
- Flächen: Hellgrün #f0f6ed
========================================================== */
:root {
/* Text & Neutraltöne */
--vm-text: #1d1d1b;
--vm-black: #000;
--vm-white: #ffffff;
/* Primär (Grün) */
--vm-primary: #006029;
--vm-primary-dark: #004d21;
--vm-primary-hover: #007a33;
/* Ausnahme (Rot) */
--vm-danger: #E2001A;
--vm-danger-dark: #b80016;
--vm-danger-surface: #fdeaea;
--vm-danger-border: #f0c2c6;
/* Flächen (Hellgrün) */
--vm-surface: #f0f6ed;
--vm-surface-light: #f6faf2;
--vm-surface-icon: #eaf3e2;
/* Rahmen & Grautöne */
--vm-border: #e8e8e8;
--vm-border-accent: #cfe3c2;
--vm-border-neutral: #e5e5e5;
--vm-grey: #EEEEEE;
--vm-grey-100: #f3f3f3;
--vm-grey-200: #e7e7e7;
--vm-grey-300: #ddd;
/* Sonderfarbe: schwebender Festnetz-Button */
--vm-festnetz: #cc0000;
/* Effekte & Maße */
--vm-shadow: 0 18px 38px rgba(0, 0, 0, 0.055);
--vm-shadow-hover: 0 24px 46px rgba(0, 0, 0, 0.085);
--vm-radius: 0;
--vm-radius-small: 0;
--vm-gap: 2.25rem;
--vm-card-padding: 2.15rem;
--vm-transition: 220ms ease;
}
/* ----------------------------------------------------------
Component wrapper
---------------------------------------------------------- */
.vm-component,
.vm-component * {
box-sizing: border-box;
}
.vm-component {
color: var(--vm-text);
}
.vm-component-headline {
margin: 0 0 1.75rem;
color: var(--vm-text);
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);
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(0,96,41,.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 = Grün · Ausnahme = Rot · plus neutrale Varianten
========================================================== */
/* --- Grüne Karte (Primär / Standard) --------------------- */
.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
========================================================== */
/* Grüne Karte -> weißes Iconfeld */
.vm-card--green .vm-card-icon {
background:var(--vm-white);
}
/* Weiße/rahmenlose Karten -> hellgrünes Iconfeld */
.vm-card--white .vm-card-icon,
.vm-card--border .vm-card-icon,
.vm-card--plain .vm-card-icon {
background: var(--vm-surface-icon);
}
/* ==========================================================
Kartenfarbe – Rot (Ausnahmefall)
Rot #E2001A · Schrift #1d1d1b
Gilt für Iconbox UND Teaser
========================================================== */
.vm-card--red {
background: var(--vm-danger-surface);
border: 1px solid var(--vm-danger-border);
}
.vm-card.vm-card--red::before { background: var(--vm-danger-border); }
.vm-card.vm-card--red:hover::before { background: var(--vm-danger); }
.vm-card--red:hover { border-color: rgba(226, 0, 26, .35); }
.vm-card.vm-card--red .vm-card-icon { background: var(--vm-white); }
.vm-card.vm-card--red .vm-card-icon span::before { color: var(--vm-danger); } /* Icon-Glyph rot */
/* --- Optional: „Icon invertiert" auf Grün/Rot ------------ */
.vm-card.vm-card--green.-inverted-icon .vm-card-icon { background: var(--vm-primary); }
.vm-card.vm-card--red.-inverted-icon .vm-card-icon { background: var(--vm-danger); }
/* ----------------------------------------------------------
Iconbox
---------------------------------------------------------- */
.vm-iconbox-item {
text-decoration: none;
}
.vm-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 64px;
height: 64px;
margin-bottom: 1.5rem;
color: var(--vm-primary);
background: var(--vm-surface-icon);
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(0,96,41,.08);
}
.vm-card-icon span {
display: inline-flex;
line-height: 1;
color: inherit;
}
.vm-card-icon span::before {
content: attr(data-icon);
font: 100%/1 "RockSolid Icons";
font-size: 1.75rem;
line-height: 1;
color: var(--vm-primary);
margin-right: 0;
speak: never;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.vm-card-title {
margin: 0 0 0.75rem;
color: var(--vm-text);
font-size: clamp(1.35rem, 1.1vw, 1.75rem);
font-weight: 700;
line-height: 1.22;
text-transform: none;
}
.vm-card-text {
color: var(--vm-text);
font-size: 16px;
line-height: 1.62;
}
.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);
}
.vm-card-link.-link {
color: var(--vm-primary);
font-weight: 700;
text-decoration: underline;
text-underline-offset: 0.28em;
}
.vm-card-link.-link:hover,
.vm-card-link.-link:focus-visible {
color: var(--vm-primary-hover);
}
/* ==========================================================
Button 1 (Grün / Primär)
========================================================== */
.vm-card-link.button {
padding: 0.64286em 1.42857em 0.75em;
color: var(--vm-white);
background: var(--vm-primary);
border: 2px solid var(--vm-primary-dark);
border-radius: 0;
line-height: 1.42929;
letter-spacing: 0.05rem;
font-size: 1em !important;
}
.vm-card-link.button:hover,
.vm-card-link.button:focus-visible{
background: var(--vm-primary-dark);
border-color: var(--vm-primary-hover);
}
/* ==========================================================
Button rot (Ausnahmefall)
========================================================== */
.vm-card-link.button.-red {
background: var(--vm-danger);
border-color: var(--vm-danger-dark);
}
.vm-card-link.button.-red:hover,
.vm-card-link.button.-red:focus-visible {
background: var(--vm-danger-dark);
border-color: var(--vm-danger);
}
/* ==========================================================
Button 2 (Dezent)
========================================================== */
.vm-card-link.button.-quaternary{
padding: 0.64286em 1.42857em 0.75em;
color:var(--vm-text);
background:var(--vm-white);
border:2px solid var(--vm-text);
border-radius:0;
}
.vm-card-link.button.-quaternary:hover{
color:var(--vm-white);
background:var(--vm-text);
border-color:var(--vm-text);
}
/* ==========================================================
Button 3 (Hellgrau)
========================================================== */
.vm-card-link.button.-tertiary{
padding: 0.64286em 1.42857em 0.75em;
color:var(--vm-text);
background:var(--vm-grey-100);
border:2px solid var(--vm-text);
border-radius:0;
}
.vm-card-link.button.-tertiary:hover{
background:var(--vm-grey-200);
border-color:var(--vm-text);
color:var(--vm-text);
}
/* ==========================================================
Button 4 (Textlink)
========================================================== */
.vm-card-link.-link{
color:var(--vm-primary);
font-weight:700;
text-decoration:none;
font-size: 1.15em;
}
.vm-card-link.-link:hover{
color:var(--vm-primary-hover);
}
/* Invertierte Karte + Button 4 (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); /* dezentes Hover-Feedback */
}
/* ----------------------------------------------------------
Button Icon
---------------------------------------------------------- */
.vm-card-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: .55rem;
}
.vm-card-link-icon {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
line-height: 1;
transform: translateY(0.06em);
}
.vm-card-link-text {
display: inline-flex;
align-items: center;
line-height: 1;
}
.vm-card-link--inactive {
cursor: default;
opacity: 0.75;
}
/* ----------------------------------------------------------
Alignment variants
---------------------------------------------------------- */
.vm-iconbox-item.-align-center,
.vm-iconbox-item.-align-center .vm-card-inner,
.vm-iconbox-item.-align-center .vm-card-body {
text-align: center;
align-items: center;
}
.vm-iconbox-item.-align-right,
.vm-iconbox-item.-align-right .vm-card-inner,
.vm-iconbox-item.-align-right .vm-card-body {
text-align: right;
align-items: flex-end;
}
/* ----------------------------------------------------------
Icon variants
---------------------------------------------------------- */
.vm-iconbox-item.-large-icon .vm-card-icon {
width: 4.5rem;
height: 4.5rem;
border-radius: var(--vm-radius-small);
}
.vm-iconbox-item.-large-icon .vm-card-icon span::before {
font-size: 2.05rem;
}
.vm-iconbox-item.-inverted-icon .vm-card-icon {
color: var(--vm-white);
background: var(--vm-primary);
}
.vm-iconbox-item.-inverted-icon .vm-card-icon span::before {
color: var(--vm-white) !important;
}
.vm-iconbox-item.-headline-icon .vm-card-inner {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
grid-template-rows: 1fr auto; /* NEU: Body-Zeile dehnt sich, Button nach unten */
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; /* NEU: Body-Zeile dehnt sich, Button nach unten */
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; /* kompakt statt 64px */
height: 2.5rem;
border-radius: 0;
margin-bottom: 0;
}
.vm-iconbox-item.-headline-icon-small .vm-card-icon span::before {
font-size: 1.15rem;
}
.vm-iconbox-item.-headline-icon-small .vm-card-body {
grid-column: 2;
grid-row: 1;
}
.vm-iconbox-item.-headline-icon-small .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 0.75rem;
}
/* ==========================================================
Icon als Badge – ragt über den oberen Kartenrand hinaus
========================================================== */
.vm-iconbox-item.-badge-top-icon {
overflow: visible;
margin-top: 2.75rem; /* Platz für das (größere) herausragende Badge */
}
.vm-iconbox-item.-badge-top-icon h3 {
margin-top: 0.5rem;
}
/* Akzentleiste bei der Badge-Variante ausblenden */
.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; /* = obere Kartenkante */
left: var(--vm-card-padding);
transform: translateY(-50%); /* mittig auf der Kante: halb innen, halb außen */
margin: 0;
z-index: 2;
/* etwas größer + responsive (skaliert mit der Viewport-Breite) */
width: clamp(4rem, 3.4rem + 1.7vw, 5.5rem); /* ~64px … 88px */
height: clamp(4rem, 3.4rem + 1.7vw, 5.5rem);
border-radius: 0;
/* Standard-Innenkontur beibehalten + Schlagschatten */
box-shadow:
inset 0 0 0 1px rgba(0, 96, 41, 0.08),
0 10px 24px rgba(0, 0, 0, 0.18);
}
/* Glyph skaliert mit */
.vm-iconbox-item.-badge-top-icon .vm-card-icon span::before {
font-size: clamp(1.75rem, 1.4rem + 1vw, 2.5rem);
}
/* Badge folgt der Textausrichtung */
.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);
}
/* Badge-Variante: Button ohne zusätzlichen oberen Abstand */
.vm-iconbox-item.-badge-top-icon .vm-card-action {
margin-top: 0;
}
/* Badge-Variante: mehr Abstand zwischen den Reihen,
damit das herausragende Badge die Box der Reihe darüber nicht berührt.
(Greift nur, wenn die ganze Box-Gruppe die Badge-Variante nutzt.) */
.vm-iconbox.-badge-top-icon .vm-grid {
row-gap: calc(var(--vm-gap) + 1.75rem);
}
/* Badge-Variante: Abstand nach unten reservieren. Die Items sind per
margin-top: 2.75rem nach unten verschoben; ohne Ausgleich ragen sie sonst in
den Folgeinhalt (Überschriften/Text darunter). */
.vm-iconbox.-badge-top-icon {
margin-bottom: 2.75rem;
}
/* ==========================================================
Badge-Icon (Iconbox): Innenkontur in Themenfarbe
========================================================== */
.vm-card.vm-card--green.-badge-top-icon .vm-card-icon {
box-shadow:
inset 0 0 0 1px rgba(0, 96, 41, 0.15),
0 10px 24px rgba(0, 0, 0, 0.18);
}
.vm-card.vm-card--red.-badge-top-icon .vm-card-icon {
box-shadow:
inset 0 0 0 1px rgba(226, 0, 26, 0.15),
0 10px 24px rgba(0, 0, 0, 0.18);
}
/* ----------------------------------------------------------
Responsive – Spaltenanzahl je Breakpoint
Der Redakteur wählt die Spaltenzahl pro Breakpoint selbst:
Desktop .grid-1 … .grid-6 (Basis, > 1280px, siehe „Grid engine")
Tablet .grid-t-1 … .grid-t-6 (≤ 1280px)
Mobil .grid-m-1 … .grid-m-6 (≤ 900px)
Mobil klein .grid-s-1 … .grid-s-6 (≤ 600px)
Am Element hängen alle vier Klassen gleichzeitig. Da die Blöcke in der
Reihenfolge Tablet -> Mobil -> Mobil klein stehen (gleiche Spezifität),
gewinnt bei überlappenden Breakpoints per Quellreihenfolge der schmalere Wert.
---------------------------------------------------------- */
/* Tablet – ab 1280px und schmaler */
@media (max-width: 1280px) {
.vm-grid.grid-t-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-t-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-t-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-t-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-t-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-t-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* Mobil – ab 900px und schmaler */
@media (max-width: 900px) {
.vm-grid.grid-m-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-m-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-m-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-m-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-m-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-m-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
/* Spannweiten aufheben + Layout-Feinschliff (bleibt wie gehabt) */
.vm-grid .span-2,
.vm-grid .span-3,
.vm-grid .span-4,
.vm-grid .span-5,
.vm-grid .span-6 {
grid-column: auto;
}
.vm-card-inner {
padding: 1.6rem;
}
.vm-iconbox-item.-headline-icon .vm-card-inner {
display: flex;
}
.vm-iconbox-item.-headline-icon .vm-card-action {
margin-top: 1.5rem;
}
}
/* Mobil klein – ab 600px und schmaler */
@media (max-width: 600px) {
.vm-grid.grid-s-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.vm-grid.grid-s-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vm-grid.grid-s-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vm-grid.grid-s-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.vm-grid.grid-s-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.vm-grid.grid-s-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}
/* ==========================================================
Spaltenverhältnisse (unterschiedliche Box-Breiten)
Optionales Feld „Spaltenverhältnis" am Element -> setzt eine
dieser Klassen und überschreibt die gleichmäßige Spaltenanzahl.
Gilt für Iconbox UND Teaser (beide nutzen .vm-grid).
Anzahl der Werte = Anzahl der Boxen in der Reihe.
NUR Desktop (> 1280px): 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: 1281px) {
/* 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–1280px) und überschreiben dort die
gleichmäßige Tablet-Spaltenanzahl (grid-t-*). Steht bewusst NACH dem
grid-t-Block, damit es in der Kaskade gewinnt. Mobil (≤900px) wird über
grid-m- / grid-s- gesteuert (i. d. R. 1 Spalte).
========================================================== */
@media (min-width: 901px) and (max-width: 1280px) {
/* 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; }
}
/* =====================================================================
VM Component Library · Jobcenter Westerwald
custom_vm_linkliste.css — Optik für das Element „VM Linkliste"
Version: 1.0.0
---------------------------------------------------------------------
Gehört zu templates/rsce_vm_linkliste.html5 + _config.php.
LADEREIHENFOLGE: nach custom_vm_icon_boxes.css — von dort kommen die
Rasterklassen (.vm-grid, .grid-*) und die --vm-*-Tokens.
Ersetzt im Footer die Gruppen aus einzelnen „VM Absatz mit Icon"-
Elementen (Externe Infos, Standorte, Online-Service). Die alten
Hilfsklassen first/second/.../last werden nicht mehr gebraucht:
das Raster verteilt selbst, ein zusätzlicher Link bricht von allein
in die zweite Reihe um.
===================================================================== */
/* --- Liste selbst ---------------------------------------------------- */
/* Selektor bewusst mit `ul` davor: Das Theme setzt in main.css
`.main-content ul { list-style: disc }`, `.main-content ul { padding-left:
1.25em }` und eine Margin-Regel — alle mit Spezifität (0,1,1). Ein
schlichtes `.vm-linkliste` (0,1,0) verliert dagegen, und die Liste bekäme
im Inhaltsbereich Aufzählungspunkte und Einzug. Im Footer fiel das nie auf,
weil dort keine `.main-content`-Regeln greifen.
`ul.vm-linkliste` ist ebenfalls (0,1,1) und gewinnt über die Reihenfolge —
diese Datei lädt nach main.css. main.css NICHT anfassen, die schreibt der
Theme Assistant bei jedem Speichern neu. */
ul.vm-linkliste {
margin: 0;
padding: 0;
list-style: none;
/* Zeilenabstand etwas enger als das Kartenraster, sonst wirken
einzeilige Links im Footer verloren. */
--vm-gap: 0.75rem 2rem;
}
.vm-linkliste-item {
margin: 0;
padding: 0;
}
/* --- Der Link ist die Klickfläche ------------------------------------ */
.vm-linkliste-link {
display: flex;
align-items: flex-start;
gap: 0.6em;
/* Zielgröße (WCAG 2.5.5): auch einzeilige Einträge bleiben 44px hoch.
Zusammen mit dem Padding trägt der Link die ganze Fläche, nicht nur
der Text — wichtig für Maus UND Touch. */
min-height: 44px;
padding: 0;
text-decoration: none;
color: inherit;
}
.vm-linkliste-link:hover .vm-linkliste-label,
.vm-linkliste-link:focus-visible .vm-linkliste-label {
text-decoration: underline;
}
/* --- Icon: rein dekorativ, kommt aus data-icon ----------------------- */
.vm-linkliste-icon {
flex: 0 0 auto;
/* an der ersten Textzeile ausrichten, nicht an der Blockmitte */
line-height: 1.45;
}
.vm-linkliste-icon::before {
font: 1.15em/1 "RockSolid Icons";
content: attr(data-icon);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
display: inline-block;
}
/* --- Text ------------------------------------------------------------ */
.vm-linkliste-text {
display: flex;
flex-direction: column;
min-width: 0; /* erlaubt Umbruch langer Bezeichnungen */
}
.vm-linkliste-label {
line-height: 1.3;
}
/* KEINE reduzierte Deckkraft: Weiß bei 85% über dem grünen Footer ergibt
effektiv #d9e7df und damit nur 6,07:1 — das reicht für AA (4,5:1), reißt
aber AAA (7:1), während der Rest der Seite bei 7,76:1 liegt. Die
Unterscheidung zur Bezeichnung macht die Schriftgröße, nicht die Farbe.
(Befund aus dem BITV-Bericht vom 09.09.2026, Prüf-ID 154, Kriterium 1.4.6.) */
.vm-linkliste-sublabel {
font-size: 0.8em;
line-height: 1.3;
}
/* --- Zusatztext neben dem Link --------------------------------------- */
/* Für Hinweise, die sichtbar bleiben MÜSSEN, aber nicht zum Linkziel
gehören — z. B. der rechtlich verbindliche Gebührenhinweis an der
Telefonnummer. Bewusst KEIN Untertitel: Der liegt im
und würde vom
Screenreader als Teil des Linktextes vorgelesen („+49 2602 94910 Es
fallen die üblichen Gebühren …"). Als Geschwister-Absatz mit
aria-describedby (siehe Template) bleibt die Verknüpfung erhalten.
Schriftgröße bewusst NICHT verkleinert und keine reduzierte Deckkraft:
Ein rechtlich verbindlicher Hinweis darf optisch nicht zurücktreten. */
/* `p` davor aus demselben Grund wie bei ul.vm-linkliste: `.main-content p`
(0,1,1) setzt margin 0.75em/1.5em und würde sonst gewinnen — im
Inhaltsbereich stünde der Hinweis dann weit unter dem Link. */
/* Einträge MIT Zusatztext
-------------------------------------------------------------------
Der Link ist sonst über `min-height: 44px` immer 44px hoch, eine
einzelne Textzeile füllt davon nur rund 25px. Die übrigen ~19px lagen
als Leerraum genau zwischen Nummer und Hinweis.
Hier wird die erzwungene Höhe zurückgenommen, damit der Hinweis direkt
unter der Nummer steht. Die Klickfläche kommt stattdessen aus einem
Innenabstand NACH OBEN, den der gleich große negative Außenabstand im
Layout wieder aufhebt — dieselbe Technik wie bei den rechtlichen Links
im Fuß. Ergebnis: rund 36px Klickfläche bei 25px Layouthöhe.
Bewusst nur nach oben: Ein Innenabstand nach unten würde die Klick-
fläche über den Hinweistext legen — ein Klick auf den Gebührenhinweis
würde dann den Anruf auslösen.
Der Abstand zum Eintrag darüber bleibt unverändert: Der stammt aus dem
Leerraum des VORIGEN Links plus dem Rasterabstand, nicht von hier.
`:has()` statt einer eigenen Klasse — so bleibt das Template unberührt. */
.vm-linkliste-item:has(> p.vm-linkliste-zusatz) .vm-linkliste-link {
min-height: 0;
padding-top: 0.6em;
margin-top: -0.6em;
}
p.vm-linkliste-zusatz {
margin: 0.15em 0 0;
line-height: 1.25;
}
/* Bei Einträgen mit Icon unter dem TEXT ausrichten, nicht unter dem Icon.
1.15em Icon-Schriftgröße + 0.6em Abstand = Breite der Icon-Spalte.
Die Angabe bleibt in em der Zeile, deshalb hier keine eigene
font-size — sonst würde sich der Einzug mitverkleinern. */
.vm-linkliste-item--icon p.vm-linkliste-zusatz {
padding-left: 1.75em;
}
/* --- Hinweiszeile über der Liste ------------------------------------- */
/* Trägt z. B. „Alle Links öffnen in einem neuen Fenster." — einmal
sichtbar für Sehende, statt neunmal als Icon. Der Hinweis FÜR
Screenreader steckt zusätzlich in jedem Link (.vm-nur-sr im Template),
weil viele Nutzer per Linkliste navigieren und den Absatz nie hören. */
p.vm-linkliste-hinweis {
margin: 0 0 0.75em;
font-size: 0.8em;
/* Deckkraft bewusst voll — siehe Begründung beim Untertitel oben. */
}
/* --- Nur für Screenreader -------------------------------------------
Bewusste Dublette zu custom_vm_toplink.css: Fällt diese Klasse weg,
würde „(öffnet in neuem Fenster)" hinter JEDEM Link sichtbar werden.
Diese Komponente soll nicht davon abhängen, dass der Top-Link im
Layout bleibt. Gleiche Deklarationen — bei Änderungen beide anfassen.
-------------------------------------------------------------------- */
.vm-nur-sr {
position: absolute !important;
width: 1px !important;
height: 1px !important;
margin: -1px !important;
padding: 0 !important;
border: 0 !important;
overflow: hidden !important;
clip: rect(0 0 0 0) !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
/* --- Im invertierten Footer ------------------------------------------
Farben erbt der Link über color: inherit. Der Fokusring kommt aus
--vm-focus-ring (custom_allgemein.css) und ist auf .-color-inverted
bereits auf Weiß gestellt — hier ist nichts weiter nötig.
-------------------------------------------------------------------- */
/* --- Im Inhaltsbereich -----------------------------------------------
Erster Einsatz außerhalb des Footers: /menschen-in-besonderen-
lebenssituationen (14.09.2026), dort vorher einzelne „VM Absatz mit
Icon"-Elemente mit je einem Link.
Farbe: `color: inherit` ergibt im Footer Weiß, im Inhaltsbereich aber
die schwarze Textfarbe — die Einträge sahen nicht mehr wie Links aus.
Hier deshalb JCW-Grün wie jeder andere Link im Inhalt; das Icon erbt
die Farbe mit.
Zeilenabstand: Die 44px Mindesthöhe des Links ergeben bei einzeiligen
Einträgen schon den gewohnten Zeilentakt (vorher 44,4px). Einträge MIT
Untertitel sind aber höher als 44px und standen ohne Rasterabstand
direkt untereinander — Untertitel und nächste Bezeichnung wirkten wie
ein Block. Deshalb 0.75rem Zeilenabstand (29.09.2026, gleicher Wert
wie im Footer). Gilt auch mobil: die 600px-Regel unten ist schwächer.
Unten: `.main-content ul` setzt margin-bottom 1.5em, die Liste selbst
setzt margin 0 — der Folgeinhalt klebte sonst an der Liste. 1.5em ist
exakt der Abstand, den die alten Absätze hatten.
Live gemessen bei 1440px und 390px; Footer-Listen unverändert.
-------------------------------------------------------------------- */
.main-content ul.vm-linkliste {
--vm-gap: 0.75rem 2rem;
margin-bottom: 1.5em;
}
.main-content .vm-linkliste-link {
color: var(--vm-primary, #006029);
}
@media (max-width: 600px) {
.vm-linkliste {
--vm-gap: 0.5rem 1rem;
}
}
/* =====================================================================
VM Component Library · Jobcenter Westerwald
custom_vm_iconliste.css — Optik für das Element „VM Icon-Liste"
Version: 1.0.0
---------------------------------------------------------------------
Gehört zu templates/rsce_vm_iconliste.html5 + _config.php.
LADEREIHENFOLGE: nach main.css und custom_vm_icon_boxes.css (Tokens).
Ohne die Tokens greifen die Fallback-Farben — die Datei funktioniert
also auch allein.
ZIEL: pixelgleich zu einer Gruppe einzelner „VM Absatz mit Icon"-
Elemente (.icon-text-block), damit beim Umbau einer Seite optisch
nichts springt. Alle Werte unten sind live auf /grundsicherungsgeld
gemessen (14.09.2026, 1440px und 390px) und stammen aus main.css:
Einzug Text 1.875em (.icon-text-block padding-left)
Icon nach unten 0.21429em (.icon-text-block:before top)
Abstand zwischen 0.75em (p margin-top, bei margin-bottom-none)
Abstand vor / nach 0.75em / 1.5em (= .main-content ul/p)
===================================================================== */
/* --- Liste selbst ---------------------------------------------------- */
/* `ul` davor aus demselben Grund wie bei ul.vm-linkliste: main.css setzt
`.main-content ul` (0,1,1) auf list-style: disc und padding-left 1.25em.
`ul.vm-iconliste` ist ebenfalls (0,1,1) und gewinnt über die Reihenfolge.
Die Außenabstände entsprechen denen von .main-content p/ul — so steht
die Liste auch AUSSERHALB des Inhaltsbereichs (Footer, Sidebar) gleich. */
ul.vm-iconliste {
margin: 0.75em 0 1.5em;
padding: 0;
list-style: none;
}
/* --- Eintrag --------------------------------------------------------- */
.vm-iconliste-item {
position: relative;
margin: 0;
padding: 0 0 0 1.875em;
}
.vm-iconliste-item + .vm-iconliste-item {
margin-top: 0.75em;
}
/* Der Text kommt aus dem Editor und steckt meist in einem . Dessen
Theme-Abstände (.main-content p, 0,1,1) würden sich zum Listenabstand
addieren. Kindselektor mit `>` hebt die Spezifität auf (0,2,0) —
gewinnt unabhängig von der Reihenfolge. Mehrere Absätze IN einem
Eintrag behalten ihren normalen Abstand untereinander. */
.vm-iconliste-item > :first-child,
.vm-iconliste-item > .vm-iconliste-icon + * {
margin-top: 0;
}
.vm-iconliste-item > :last-child {
margin-bottom: 0;
}
/* --- Icon: rein dekorativ, kommt aus data-icon ----------------------- */
/* Schrift, content und inline-block liefert die Theme-Regel
`*[data-icon]:before` aus main.css. Hier nur Lage und Farbe. */
.vm-iconliste-icon {
position: absolute;
top: 0.21429em;
left: 0;
line-height: 1;
}
.vm-iconliste-icon::before {
margin-right: 0;
color: var(--vm-primary, #006029);
}
/* Auf grünem Grund (Footer) erbt das Icon die helle Schriftfarbe —
Grün auf Grün wäre unsichtbar. */
.-color-inverted .vm-iconliste-icon::before {
color: inherit;
}
/* =====================================================================
VM Buttons – konsolidiert · JCW-Variante
Nach dem TAO-Framework-CSS laden. Vereinheitlicht ALLE Buttons
(globaler .button + .vm-card-link.button in Iconbox/Teaser).
Kernfix: font-size in REM + symmetrisches Padding = überall gleiche Höhe.
--vm-btn-font ist die zentrale Stellschraube für die Buttongröße.
Farbschema JCW: Primär = Grün #006029 · Ausnahme = Rot #E2001A
===================================================================== */
: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-black);
border-radius: 0 !important;
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;
background: var(--vm-text); /* Standard (schwarz) */
background-image: none !important; /* TAO-Verlauf aus */
box-shadow: none !important;
text-shadow: none !important;
transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
/* Lange Beschriftungen ohne Leerzeichen (z. B. „www.arbeitsagentur.de/
bakarriere" auf /karriere) ragten bei 390px 9px über den Rand und
erzeugten waagerechtes Scrollen (WCAG 1.4.10). Umbrochen wird nur,
wenn der Platz nicht reicht. */
max-width: 100%;
overflow-wrap: anywhere;
}
/* Card-Link: gleiche Maße erzwingen (überschreibt alte 0.75em / 1.15em-Regel) */
.vm-card-link.button {
padding: 0.64286em 1.42857em;
font-size: var(--vm-btn-font) !important;
}
/* 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.125em; }
/* Standard/Schwarz – Hover */
.button:hover, .button:focus-visible,
.headline-box-link:hover, .highlight-box-link:hover {
background: var(--vm-black); border-color: var(--vm-text); color: var(--vm-white);
transform: translateY(-1px);
}
/* 2) FARBVARIANTEN ---------------------------------------------------- */
/* Grün – Primär (global -secondary + Card-Link-Basis)
Volle border-Kurzform (nicht nur border-color), damit der 2px-Rahmen
garantiert greift und der Button exakt so groß ist wie die anderen. */
.button.-secondary,
.headline-box-link.-secondary,
.vm-card-link.button {
background: var(--vm-primary); border: 2px solid var(--vm-primary-dark); color: var(--vm-white);
padding: 0.64286em 1.42857em; /* identisch zu .button-Basis, gegen TAO-Übersteuerung gepinnt */
}
.button.-secondary:hover, .button.-secondary:focus-visible,
.headline-box-link.-secondary:hover,
.vm-card-link.button:hover, .vm-card-link.button:focus-visible {
background: var(--vm-primary-dark); border: 2px solid var(--vm-primary); color: var(--vm-white);
}
/* Hellgrau (-tertiary) */
.button.-tertiary,
.headline-box-link.-tertiary,
.vm-card-link.button.-tertiary {
background: var(--vm-grey); border: 2px solid var(--vm-text); color: var(--vm-text);
}
.button.-tertiary:hover, .button.-tertiary:focus-visible,
.headline-box-link.-tertiary:hover,
.vm-card-link.button.-tertiary:hover, .vm-card-link.button.-tertiary:focus-visible {
background: var(--vm-text); border-color: var(--vm-text); color: var(--vm-white);
}
/* Weiß (-quaternary) */
.button.-quaternary,
.headline-box-link.-quaternary,
.vm-card-link.button.-quaternary {
background: var(--vm-white); border: 2px solid var(--vm-text); color: var(--vm-text);
}
.button.-quaternary:hover, .button.-quaternary:focus-visible,
.headline-box-link.-quaternary:hover,
.vm-card-link.button.-quaternary:hover, .vm-card-link.button.-quaternary:focus-visible {
background: var(--vm-text); border-color: var(--vm-text); color: var(--vm-white);
}
/* Rot – Ausnahmefall (global .-danger + Card-Link -red) */
.button.-danger,
.vm-card-link.button.-red {
background: var(--vm-danger); border: 2px solid var(--vm-danger-dark); color: var(--vm-white);
}
.button.-danger:hover, .button.-danger:focus-visible,
.vm-card-link.button.-red:hover, .vm-card-link.button.-red:focus-visible {
background: var(--vm-danger-dark); border-color: var(--vm-danger); color: var(--vm-white);
}
/* Alias: .dark = Standard (schwarze Variante) */
.button.dark { background:var(--vm-text); border:2px solid var(--vm-black); color:var(--vm-white); }
.button.dark:hover, .button.dark:focus-visible { background:var(--vm-black); border-color:var(--vm-text); color:var(--vm-white); }
/* 3) KLEINER BUTTON --------------------------------------------------- */
.button.-small,
.vm-card-link.button.-small {
padding: 0.4em 0.95em;
font-size: calc(var(--vm-btn-font) * 0.82) !important;
border-radius: 0 !important;
}
/* --- Schwarz für Card-Links (Iconbox/Teaser) -------------------------
Card-Link-Basis ist Grün; höhere Spezifität für Schwarz. */
.vm-card-link.button.dark {
background: var(--vm-text); border-color: var(--vm-black); color: var(--vm-white);
}
.vm-card-link.button.dark:hover,
.vm-card-link.button.dark:focus-visible {
background: var(--vm-black); border-color: var(--vm-text); color: var(--vm-white);
}
/* --- Textlink (VM Button, Variante „Textlink") ----------------------
Kein Kasten – reiner Link im JCW-Grün, Icon aus data-icon davor. */
.vm-textlink {
display: inline-flex;
align-items: center;
gap: 0.4em;
color: var(--vm-primary);
font-weight: 700;
font-size: var(--vm-btn-font);
line-height: 1.3;
text-decoration: none;
letter-spacing: 0.02em;
transition: color .2s ease;
}
.vm-textlink:hover,
.vm-textlink:focus-visible {
color: var(--vm-primary-dark);
text-decoration: underline;
text-underline-offset: 0.28em;
}
.vm-textlink::before { margin: 0; top: 0; }
/* =====================================================================
4) JCW – PROJEKTSPEZIFISCH (aus Alt-CSS übernommen)
Modul-Buttons (News/Events/Presse), Zurück-/Mehr-Links und der
schwebende Festnetz-Button.
Bewusst OHNE die bare-.button-Selektoren aus dem Alt-CSS, damit die
VM-Buttongröße (--vm-btn-font) oben nicht überschrieben wird.
Tote Alt-Komponenten (p.icon-boxes-item-link, .teaser-boxes-item)
wurden entfernt – dafür ist jetzt das VM-System zuständig.
===================================================================== */
/* --- Modul-Buttons: Reset (nur Modul-Selektoren, NICHT .button global) --- */
.news-image-teaser-more .button,
.mod_eventreader p.back .button,
.mod_newsreader p.back .button,
.presse.more {
box-shadow: none;
text-shadow: none;
text-transform: none;
letter-spacing: 0.075em;
font-size: 1em !important;
}
/* --- „Mehr"-/Presse-Links: heller Outline-Button, klein, kleingeschrieben --- */
.presse.more,
.layout_short p.more a {
text-transform: lowercase !important;
}
.presse.more a,
.layout_short p.more a {
background: var(--vm-white);
border: 2px solid var(--vm-text);
border-radius: 0;
position: relative;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: inline-block;
padding: 0.64286em 1.42857em;
outline: none;
font-size: 0.875em;
line-height: 1.42929;
text-align: center;
text-decoration: none;
color: var(--vm-text);
}
.presse.more a:hover,
.layout_short p.more a:hover {
background: var(--vm-grey-300);
}
.presse.button.-quaternary a {
color: var(--vm-text);
}
/* --- Zurück-Buttons in News-/Event-Readern (weiß + Pfeil-Icon) --- */
.news-image-teaser-more .button.-quaternary,
.mod_eventreader p.back a.button.-tertiary,
.mod_newsreader p.back a.button.-tertiary,
.presse.button.-quaternary {
background: var(--vm-white);
}
.mod_eventreader p.back a.button.-tertiary:hover,
.mod_newsreader p.back a.button.-tertiary:hover {
background: var(--vm-grey-300);
}
.mod_eventreader p.back a.button.-tertiary::before,
.mod_newsreader p.back a.button.-tertiary::before {
content: "\e944";
font: 1em/1 "RockSolid Icons";
top: 0;
}
.mod_eventreader a.button.-single::before,
.mod_newsreader a.button.-single.back::before {
content: "\e943";
}
.news-image-teaser-more .button.-quaternary::before,
.presse.more a::before,
.layout_short p.more a::before {
font: 100%/1 "RockSolid Icons";
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: geometricPrecision;
text-indent: 0;
display: inline-block;
position: relative;
margin-right: 0.5em;
content: "\e944";
}
/* --- Roter Button-Alias (nutzt die JCW-Rot-Palette #E2001A statt #e30313) --- */
.button.red-button {
background: var(--vm-danger) !important;
color: var(--vm-white) !important;
border-color: var(--vm-danger) !important;
}
.button.red-button:hover {
background: var(--vm-text) !important;
border-color: var(--vm-text) !important;
}
/* --- Schwebender Festnetz-/Anruf-Button (fix unten rechts) --- */
a.button.buttonfestnetz {
position: fixed;
right: 0.5rem;
bottom: 3.5rem;
z-index: 3;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
text-align: left !important;
}
a.buttonfestnetz {
width: 55px !important;
line-height: 55px !important;
border-radius: 0 !important;
margin-bottom: 10px !important;
display: block !important;
overflow: hidden !important;
white-space: nowrap !important;
text-decoration: none !important;
background: var(--vm-festnetz) !important;
padding: 0 !important;
color: var(--vm-white) !important;
text-shadow: none !important;
border: 2px solid var(--vm-white) !important;
box-shadow: none !important; /* Alt-CSS: box-shadow:0 -> ungültig, korrigiert */
font-size: 1em !important;
}
a.buttonfestnetz:hover {
width: 270px !important;
color: var(--vm-white) !important;
}
a.buttonfestnetz::before {
margin-right: 0.75em;
margin-left: 0.65em;
font-size: 1.15em;
color: var(--vm-white) !important;
top: 0.0875em;
}
/* --- Responsive (max-width: 900px) --------------------------------- */
@media (max-width: 900px) {
.news-image-teaser-more .button.-quaternary,
.mod_eventreader p.back a.button.-tertiary,
.mod_newsreader p.back a.button.-tertiary,
.presse.button.-quaternary,
.presse.more a,
.layout_short p.more a {
font-size: 1em !important;
}
a.buttonfestnetz {
width: 48px !important;
line-height: 47px !important;
bottom: 54px !important;
right: 10px !important;
}
a.buttonfestnetz:hover {
width: 48px !important;
}
}
/* ==========================================================
VM Component Library · JCW-Variante
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 = Grün #006029).
========================================================== */
/* 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); }
/* --- Body: gepolsterter Inhaltsbereich, füllt die restliche Höhe --- */
.vm-teaser-body {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
padding: var(--vm-card-padding);
}
/* Inhalt wächst -> Button bleibt unten in der Karte */
.vm-teaser-content {
flex: 1 1 auto;
min-width: 0;
}
.vm-teaser .vm-card-icon { margin-bottom: 1.25rem; }
.vm-teaser .vm-card-action { margin-top: 1.5rem; }
/* ==========================================================
Ausrichtung
========================================================== */
.vm-teaser.-align-center .vm-teaser-body {
text-align: center;
align-items: center;
}
.vm-teaser.-align-right .vm-teaser-body {
text-align: right;
align-items: flex-end;
}
/* ==========================================================
Icon-Varianten
========================================================== */
.vm-teaser.-large-icon .vm-card-icon {
width: 4.5rem;
height: 4.5rem;
}
.vm-teaser.-large-icon .vm-card-icon span::before {
font-size: 2.05rem; }
.vm-teaser.-inverted-icon .vm-card-icon {
color: var(--vm-white);
background: var(--vm-primary);
}
.vm-teaser.-inverted-icon .vm-card-icon span::before { color: var(--vm-white) !important; }
/* Icon neben der Überschrift: Icon links, Inhalt rechts, IMMER linksbündig */
.vm-teaser.-headline-icon .vm-teaser-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 1rem;
row-gap: 0.75rem;
text-align: left;
align-items: start;
}
.vm-teaser.-headline-icon .vm-card-icon {
grid-column: 1;
grid-row: 1;
margin-bottom: 0;
}
.vm-teaser.-headline-icon .vm-teaser-content {
grid-column: 2;
grid-row: 1;
}
.vm-teaser.-headline-icon .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 1rem;
}
/* ==========================================================
Icon KLEIN neben der Überschrift
========================================================== */
.vm-teaser.-headline-icon-small .vm-teaser-body {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: 0.85rem;
row-gap: 0.75rem;
text-align: left;
align-items: start;
}
.vm-teaser.-headline-icon-small .vm-card-icon {
grid-column: 1;
grid-row: 1;
width: 2.5rem; /* kompakt statt 64px */
height: 2.5rem;
border-radius: 0;
margin-bottom: 0;
}
.vm-teaser.-headline-icon-small .vm-card-icon span::before {
font-size: 1.15rem; /* kleineres Glyph */
}
.vm-teaser.-headline-icon-small .vm-teaser-content {
grid-column: 2;
grid-row: 1;
}
.vm-teaser.-headline-icon-small .vm-card-action {
grid-column: 2;
grid-row: 2;
margin-top: 1rem;
}
/* ==========================================================
Icon als schwebendes Badge auf der Bildunterkante
========================================================== */
.vm-teaser.-badge-icon .vm-teaser-body {
position: relative;
/* Platz schaffen, damit die Überschrift nicht unter dem Badge sitzt */
padding-top: calc(var(--vm-card-padding) + 2.25rem);
}
.vm-teaser.-badge-icon .vm-card-icon {
position: absolute;
top: 0; /* = Oberkante Body = Unterkante Bild */
left: var(--vm-card-padding);
transform: translateY(-50%); /* Badge sitzt mittig auf der Bildkante */
margin: 0;
z-index: 2;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.16);
}
/* Badge folgt der Textausrichtung */
.vm-teaser.-badge-icon.-align-center .vm-card-icon {
left: 50%;
transform: translate(-50%, -50%);
}
.vm-teaser.-badge-icon.-align-right .vm-card-icon {
left: auto;
right: var(--vm-card-padding);
}
/* ==========================================================
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; }
}
/* =====================================================================
JCW – Navigation + Kopfzeile (KONSOLIDIERT) · Jobcenter Westerwald
---------------------------------------------------------------------
Diese Datei ist fürs NEUE Seitenlayout die einzige „custom"-Nav/Header-
Datei: Sie übernimmt alle noch benötigten Regeln aus custom_navigation.css
(die aus dem neuen Layout entfernt wird) UND themt die barrierefreie
Accessible-Nav-Komponente (/bundles/contaocore/navigation.*).
NICHT übernommen (tot, durch die Komponente ersetzt): sämtliche
.main-navigation* und .main-navigation-mobile*-Regeln.
Nach der Komponenten-CSS laden. Burger auf ALLEN Breakpoints (zu viele
Menüpunkte für eine horizontale Leiste).
===================================================================== */
/* =====================================================================
1) Allgemein · Breadcrumb · Sidebar · Sub-Navigation · Tagline · Suche
(1:1 aus custom_navigation.css übernommen)
===================================================================== */
.tagline .centered-wrapper { background: #fff; }
.tagline .mod_breadcrumb { float: none; clear: both; }
.mod_breadcrumb li.active { color: #006029; }
.mod_breadcrumb li.active::before { color: #1d1d1b !important; }
.sidebar { background: transparent; padding: 0; }
.terminseite .sidebar .mod_calendar { margin: 1.5em 0 2em; }
.sub-navigation ul a.active,
.sub-navigation ul strong.active,
.sub-navigation ul span.active,
.sub-navigation ul li a.trail { color: #006029; font-weight: bold; border-radius: 0; background-color: #fff; }
.sub-navigation p.navheadline a { color: #444; font-weight: 300; }
.sub-navigation ul a:hover,
.sub-navigation ul strong:hover,
.sub-navigation ul span.trail:hover,
.sub-navigation ul span.active:hover,
.sub-navigation ul span.forward:hover { border-radius: 0; background-color: #fff; }
input[type="search"]::placeholder { color: #1d1d1b; }
.menu-quicklinks .content-image a { background: #fff; border: none; }
.menu-quicklinks .content-image { background: #fff; border-bottom: 1px solid #ccc; }
/* =====================================================================
2) Fixierte Kopfzeile (aus custom_navigation.css übernommen)
Header-Bar + Header-Navigation liegen FIXIERT oben; .page hält Platz.
Logo: Desktop LINKSBÜNDIG (rechts neben dem Burger platziert, damit es
nicht mit dem „MENÜ"-Burger kollidiert), mobil (<=900) ZENTRIERT.
===================================================================== */
.page { padding-top: 77px !important; }
.header-bar {
height: 45px !important;
position: fixed !important;
display: block !important;
width: 100% !important;
z-index: 5 !important;
top: 0 !important;
}
.header-links.-right { margin-right: 3.7037%; }
/* --- Zielgröße der Kopfzeilen-Links (WCAG 2.5.5, 44x44 px) -----------
DGS / Leichte Sprache / Suche waren nur 24 px hoch. Das vertikale
Polster wandert vom
(Theme: padding: 0.61538em 0) und vom -
(Theme: padding-bottom: 0.4375em) auf die — dadurch wächst die
Klickfläche auf 44 px, die Leiste bleibt aber ihre 45 px hoch und die
Links stehen unverändert an derselben Stelle.
Nur .header-bar: im Mobil-Overlay (<=900px) liegen dieselben Links als
Flex-Liste in .navigation-main und werden dort separat gestylt. */
.header-bar .header-links { padding: 0; }
.header-bar .header-links li { padding-bottom: 0; }
.header-bar .header-links a {
padding: 10px 0.4em;
line-height: 24px;
vertical-align: middle;
}
.header-navigation {
position: fixed !important;
box-shadow: none !important;
top: 45px !important;
width: 100% !important;
}
.header-navigation-inner { height: 78px !important; padding-right: 3.3%; }
/* Theme-Hover-Zoom auf Kopf-Bildern aus */
.header-navigation-inner img:hover,
.menu-quicklinks .content-image a:hover img { transform: none !important; filter: none !important; }
/* =====================================================================
Kopfzeilen-Logo (.jc-logo) — löst .logo ab
---------------------------------------------------------------------
WARUM EIGENE KLASSE
An `.logo` hängen 7 Regeln aus der Theme-Datei main.css (position,
float, `display: inline` unter 1280px, `height: 100%` am Bild). Die
schreibt der Theme Assistant bei jedem Speichern neu. Dagegen
anzuarbeiten hieß: eigene Größenstufen bei 1300/900/500/450px — und
es blieben trotzdem Lücken (bei 470px und unter 380px stieß das Logo
an den Burger). rsce_tao_logo_website.html5 entfernt deshalb das Token
"logo" und setzt "jc-logo".
WARUM DAS DIE ÜBERDECKUNG LÖST
Logo und .header-quicklinks sind Geschwister in
.header-navigation-inner, und .header-navigation ist ohnehin schon
`position: fixed`. Das Logo war also ein ZWEITES Mal fixiert und damit
aus dem Fluss — es konnte den Quicklinks gar nicht ausweichen. Als
Flex-Zeile ist eine Überdeckung konstruktiv ausgeschlossen. Keine
Größenstufen mehr: Das Logo schrumpft von selbst, gemessen von 344px
(bei 1600px Breite) bis 163px (bei 320px), immer mit mindestens 16px
Abstand zum Burger.
Die frühere `:has(.jc-logo)`-Schleuse ist entfernt — sie diente nur
dazu, diese Datei vor dem Template ausrollen zu können.
===================================================================== */
.header-navigation-inner {
display: flex;
align-items: center;
gap: 1.5rem;
padding-left: 180px; /* Platz für den viewport-fixierten Burger */
}
.header-navigation-inner .header-quicklinks {
float: none;
margin-left: auto;
flex: 0 0 auto; /* NIE schrumpfen, sonst fällt der zweite Button raus */
}
.jc-logo {
flex: 0 1 auto; /* das Logo gibt nach, nicht die Buttons */
min-width: 0;
margin: 0;
padding: 0;
}
.jc-logo a {
display: flex;
align-items: center; /* senkrecht mittig in der Kopfleiste */
max-width: 100%;
}
.jc-logo img {
display: block;
width: auto;
height: auto;
max-width: 100%;
max-height: 55px; /* Naturhöhe der SVG */
}
@media (max-width: 900px) {
/* Kein Innenabstand am Container: .header-quicklinks ist hier
`position: fixed` OHNE left-Angabe und würde von seiner statischen
Position mitgeschoben — die grüne Leiste rutschte nach rechts und
wurde abgeschnitten. Der Platz für den Burger kommt deshalb ans
Logo selbst. */
.header-navigation-inner {
padding-left: 0;
padding-right: 0;
}
.jc-logo {
flex: 1 1 auto;
display: flex;
justify-content: center; /* mittig zwischen Burger und rechtem Rand */
padding-left: 140px;
padding-right: 1rem;
}
.jc-logo img { max-height: 48px; }
}
/* =====================================================================
3) Accessible-Nav Theming (Variablen der Komponente auf JCW)
===================================================================== */
:root,
body {
--nav-breakpoint: 99999; /* Burger IMMER (auch Desktop) */
--nav-burger-line-color: #1d1d1b;
--nav-color: #1d1d1b;
--nav-active-color: #006029;
--nav-mobile-background: #ffffff; /* helles Overlay */
--nav-mobile-color: #1d1d1b;
--nav-mobile-active-color: #006029;
--nav-mobile-active-background: #f0f6ed;
--nav-mobile-separator-color: #e8e8e8;
--nav-submenu-background: #ffffff;
/* Untermenü-Pfeil (Komponente nutzt var(--nav-mobile-icon)) – grüner Chevron */
--nav-mobile-icon: url("data:image/svg+xml;charset=utf-8,");
--skip-background: #006029;
--skip-focus-border-color: #006029;
}
/* --- Burger „MENÜ" (Sporthotel-Look), fest oben-links ----------------- */
.nav-burger {
position: fixed !important;
top: 41px; /* in der Header-Navigation-Zeile (45–123px) */
left: 40px;
z-index: 1001;
gap: 0.55em;
padding: 0.5em 0.9em !important;
min-height: 48px;
border: 1px solid var(--vm-border, #d5d5d5) !important;
background: #ffffff !important;
background-image: none !important;
box-shadow: none !important;
text-shadow: none !important;
transition: border-color 0.2s ease, color 0.2s ease;
}
.nav-burger:hover,
.nav-burger:focus-visible { border-color: #006029 !important; }
.nav-burger:focus-visible { outline: 3px solid #006029; outline-offset: 2px; }
/* dünnes, exakt ausgerichtetes Masken-Icon (Hamburger <-> X) statt der
dicken/versetzten Komponenten-Striche */
.nav-burger .icon-line { display: none !important; }
.nav-burger__inner {
width: 1.5rem !important;
height: 1.5rem !important;
flex: 0 0 auto;
background-color: var(--vm-text, #1d1d1b);
-webkit-mask: var(--jc-burger) center / contain no-repeat;
mask: var(--jc-burger) center / contain no-repeat;
--jc-burger: 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 6h16M4 12h16M4 18h16'/%3E%3C/svg%3E");
}
.nav-burger.is-active .nav-burger__inner {
--jc-burger: 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='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E");
}
.nav-burger:hover .nav-burger__inner,
.nav-burger:focus-visible .nav-burger__inner { background-color: #006029; }
.nav-burger::after {
content: "Menü";
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
line-height: 1;
color: var(--vm-text, #1d1d1b);
}
.nav-burger:hover::after,
.nav-burger:focus-visible::after { color: #006029; }
/* --- Overlay ---------------------------------------------------------- */
/* Hülle hochziehen (Burger+Overlay Geschwister -> Burger bleibt klickbar) */
body.nav-is-mobile .nav-wrapper { position: relative; z-index: 1000; }
/* Oben genug Platz, damit die Punkte nicht unter dem fixen Burger beginnen */
body.nav-is-mobile .navigation-main { --nav-mobile-padding: 120px clamp(1rem, 4vw, 2rem) 40px; }
/* Logo im offenen Overlay ausblenden (schwebte störend mittendrin) */
body.navigation-open .page-header .jc-logo { display: none; }
/* Inhalt LINKSBÜNDIG + kompakt (fit-content) -> Pfeile nah am Text,
nicht zentriert und nicht über die volle Breite. */
body.nav-is-mobile .navigation-main .level_1 {
width: 450px;
max-width: 100%;
margin-inline: 0;
}
/* Sichtbarer Fokus im Overlay */
.navigation-main a:focus-visible,
.navigation-main strong:focus-visible,
.navigation-main button:focus-visible { outline: 3px solid #006029; outline-offset: 2px; }
@media (max-width: 1000px) {
.header-quicklinks .jc-app, .header-quicklinks .jc-digital { margin-left: 0.75em !important; }
}
/* =====================================================================
4) Mobil (<=900): Header-Bar raus, Header-Links unten ins Overlay
(verschiebt vm_nav.js), Burger enger an den Rand
===================================================================== */
@media (max-width: 900px) {
#Tagline { top: 139px !important; }
.tao-sidebar .content-wrapper { padding-top: 120px !important; }
.header-bar { display: none !important; }
.header-navigation { top: 0 !important; }
.header-quicklinks { top: 79px !important; }
.nav-burger { top: 0; left: 1rem; }
.navigation-main .header-links {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1.25rem;
margin: 0.5rem 0 0;
padding: 0.75rem 10px 0;
list-style: none;
border-top: 1px solid var(--nav-mobile-separator-color, #e8e8e8);
}
.navigation-main .header-links li { padding: 0 !important; border: 0 !important; }
body.nav-is-mobile .navigation-main a {
display: inline-flex;
align-items: center;
gap: 0.4em;
width: auto !important;
min-height: 40px;
padding: 4px 6px !important; /* dunkelgrün */
font-weight: 400;
}
/* Zielgröße 44x44 px (WCAG 2.5.5) auch im Overlay – auf dem Desktop
stehen dieselben drei Links in der .header-bar und sind dort 44 px.
Gilt nur für die Header-Links; die Hauptnavigations-Punkte darüber
bleiben bei 40 px (bewusste Design-Entscheidung, nicht AA-relevant). */
body.nav-is-mobile .navigation-main .header-links a {
min-height: 44px;
padding: 6px 6px !important;
}
#mainnav .mod_navigation.jc-mainnav.nav-wrapper nav.navigation-main ul.header-links.-right li a span { color: #004d21 !important; }
body.nav-is-mobile .navigation-main ul.header-links {
padding-top: 1.5em;
margin-top: 1em;
}
.navigation-main .header-links a span { color: inherit !important; }
.navigation-main .header-links a:hover span,
.navigation-main .header-links a:focus-visible span { color: #006029 !important; }
.header-quicklinks .jc-app figure a img { border-left: none !important; }
.header-quicklinks .jc-app { margin-right: 0 !important; margin-left: 0 !important; width: 50% !important; }
.header-quicklinks .jc-digital { margin-left: 0 !important; margin-right: 0 !important; width: 50% !important; }
.tao-fullwidth .content-wrapper {
padding-top: 60px !important;
}
}
@media screen and (max-width: 600px) {
.header-quicklinks {
height: 50px !important;
}
#Tagline {
top: 129px !important;
}
.header-quicklinks .jc-app figure a img,
.header-quicklinks .jc-digital figure a img {
height: 48px !important;
}
}
@media (max-width: 450px) {
.header-navigation { top: 0 !important; }
}
/* =====================================================================
VM Quicknav – JCW (Jobcenter)
Fixierte Schnellnavigation am unteren Bildschirmrand (Contao
Individuelle Navigation mit CSS-Klasse „quicknav"). Nach dem
TAO-Framework-CSS laden.
Von donum vitae übernommen, aber:
- OHNE border-radius (JCW hat keine Rundungen; --vm-radius = 0).
- BARRIEREFREI: sichtbarer Tastatur-Fokus (outline) auf Desktop UND
Mobil – der Fokus wird NICHT unterdrückt (Pflicht für ein Jobcenter).
Farben kommen komplett aus den --vm-*-Tokens (custom_vm_icon_boxes.css)
-> automatisch JCW-Grün (#006029) / Fläche (#f0f6ed) usw.
Desktop: Schrift fließend, min. 16px. Mobil: Icon über Label gestapelt,
alle Punkte in einer Reihe.
===================================================================== */
/* 1) WRAPPER – fixiert, zentriert, hebt die Leiste vom Rand ab -------- */
.quicknav {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
z-index: 100;
display: flex;
justify-content: center;
/* Abstand zum unteren Rand + iPhone-Safe-Area */
padding: 0 1rem calc(0.75rem + env(safe-area-inset-bottom));
/* der transparente Randbereich soll keine Klicks abfangen */
pointer-events: none;
}
/* 2) DIE LEISTE – Liste als schwebender Container --------------------- */
.quicknav ul {
list-style: none;
display: flex;
gap: 4px; /* Luft zwischen den Chips */
margin: 0 !important;
padding: 6px !important; /* Innenrand -> Chips schweben im Container */
background: var(--vm-white);
border: 1px solid var(--vm-border);
border-radius: 0; /* JCW: keine Rundung */
/* frei schwebend -> kräftigerer Schatten */
box-shadow: 0 6px 28px rgba(0, 0, 0, 0.14);
pointer-events: auto; /* Leiste selbst wieder klickbar */
}
.quicknav ul li {
display: flex;
margin: 0;
}
/* TAO/Listen-Bullet abschalten */
.quicknav ul li::before {
display: none !important;
}
/* 3) EINTRÄGE (Chips) ------------------------------------------------- */
.quicknav ul li a {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55em;
padding: 0.7em 1.15em;
line-height: 1;
border-radius: 0; /* JCW: keine Rundung */
color: var(--vm-primary);
font-weight: 600;
/* Desktop/Tablet: min. 16px (Barrierefreiheit), fließend bis ~19px */
font-size: clamp(1rem, 0.72rem + 0.9vw, 1.2rem);
letter-spacing: 0.02em;
white-space: nowrap;
text-decoration: none !important;
background: transparent;
transition: background-color var(--vm-transition), color var(--vm-transition);
}
.quicknav ul li strong {
font-size: clamp(1rem, 0.72rem + 0.9vw, 1.2rem);
}
.quicknav ul li a:hover,
.quicknav ul li a:focus-visible {
background: var(--vm-primary);
color: var(--vm-white);
}
/* Barrierefreiheit: deutlich sichtbarer Tastatur-Fokus. outline-offset
legt den Rahmen auf die weiße Leiste -> auch bei grüner Hover-Fläche
klar erkennbar. :focus-visible = nur Tastatur, nicht bei Maus-Klick. */
.quicknav ul li a:focus-visible,
.quicknav ul li strong:focus-visible {
outline: 3px solid var(--vm-primary);
outline-offset: 2px;
}
/* aktiver Menüpunkt – dezente grüne Fläche */
.quicknav ul li a.active,
.quicknav ul li strong.active {
display: flex;
align-items: center;
justify-content: center;
gap: 0.55em;
padding: 0.7em 1.15em;
border-radius: 0; /* JCW: keine Rundung */
background: var(--vm-surface);
color: var(--vm-primary);
}
/* Icons (Icon-Font-Glyphe / /