/* ============================================================================
* VATERWELTEN — Hauptstylesheet
* Aufbau:
* 1. Schriftarten (lokal)
* 2. Design-Tokens (CSS-Variablen aus dem CI Manual)
* 3. Reset / Basics
* 4. Typografie
* 5. Layout & Container
* 6. Header & Hauptnavigation
* 7. Buttons & Links
* 8. Hero
* 9. Sektionen (Home + generic)
* 10. Karten (Standorte, Angebote, Beiträge)
* 11. Filter-Leiste
* 12. Listen / Detailseiten
* 13. Formulare & FluentForms-Anpassung
* 14. Footer
* 15. Utilities
* 16. Print
* ========================================================================= */
/* ---------------------------------------------------------------------------
* 1. SCHRIFTARTEN — lokal, OFL-lizenziert
* ------------------------------------------------------------------------ */
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url('../fonts/Outfit-Regular.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 600;
font-display: swap;
src: url('../fonts/Outfit-SemiBold.woff2') format('woff2');
}
@font-face {
font-family: 'Outfit';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/Outfit-Bold.woff2') format('woff2');
}
/* Big Shoulders Inline — Display-Schmuckschrift für große Headlines.
* Laut Manual sparsam einsetzen ("weniger ist mehr"). */
@font-face {
font-family: 'Big Shoulders Inline';
font-style: normal;
font-weight: 700;
font-display: swap;
src: url('../fonts/BigShouldersInline-Bold.woff2') format('woff2');
}
@font-face {
font-family: 'Big Shoulders Inline';
font-style: normal;
font-weight: 800;
font-display: swap;
src: url('../fonts/BigShouldersInline-ExtraBold.woff2') format('woff2');
}
@font-face {
font-family: 'Big Shoulders Inline';
font-style: normal;
font-weight: 900;
font-display: swap;
src: url('../fonts/BigShouldersInline-Black.woff2') format('woff2');
}
/* ---------------------------------------------------------------------------
* 2. DESIGN-TOKENS — Vaterwelten Manual v2.0 (Stand 2025)
*
* Erweiterte planetare Farbpalette mit Pantone-Codes, neue Display-
* Schmuckschrift Big Shoulders Inline für große Headlines.
* ------------------------------------------------------------------------ */
:root {
/* Primärfarben aus dem Manual */
--vw-orange: #EA733D; /* Pantone 4012 C — leicht satter als v1 */
--vw-dunkelblau: #1B365D; /* Pantone 534 C — leicht kühler als v1 */
/* Akzent- und Sekundärfarben */
--vw-rost: #B94700; /* Pantone 1525 C — neuer Rost-Akzent */
--vw-sonnengelb: #FFC56E; /* Pantone 1355 C — neuer warmer Gelbton */
--vw-pfirsich: #FFC56E; /* Alias für Pfirsich → Sonnengelb */
--vw-gruen-hell: #6B8D73; /* Pantone 2407 C */
--vw-gruen-dunkel: #43695B; /* Pantone 5545 C */
--vw-warmgrau: #9E978E; /* Pantone 0961 C */
/* Sektionshintergründe — passen zu Manual-Bildwelt */
--vw-bg-sand: #FBE9C4; /* warmer Sand — Hero und ruhige Sektionen */
--vw-bg-orange: #FBC471; /* helleres Orange — Spotlight-Sektionen */
--vw-bg-pastel: #F3EAD0; /* sehr helle Sand-Variante */
--vw-bg-soft: #FBE9C4; /* Default-Soft (Backwards-Kompat. v1) */
/* Neutralfarben */
--vw-anthrazit: #323232;
--vw-mittelgrau: #969696;
--vw-hellgrau: #f4f4f4;
--vw-weiss: #ffffff;
/* Semantisch */
--vw-text: var(--vw-dunkelblau);
--vw-text-muted: #5a6b7a;
--vw-bg: var(--vw-weiss);
--vw-border: #e6e2dc;
/* Backwards-Kompatibilität für alte Klassen aus v1 (z. B. .vw-section--soft) */
--vw-pastelblau: var(--vw-gruen-hell);
--vw-graublau: var(--vw-dunkelblau);
--vw-lichtgelb: var(--vw-sonnengelb);
/* Typografie — Outfit für Body, Big Shoulders Inline für Display-Headlines */
--vw-font: 'Outfit', Arial, system-ui, -apple-system, sans-serif;
--vw-font-display: 'Big Shoulders Inline', 'Outfit', Arial, sans-serif;
--vw-fs-100: 0.875rem; /* 14px — Kleingedrucktes */
--vw-fs-200: 1rem; /* 16px — Body Default */
--vw-fs-300: 1.125rem; /* 18px — Lead */
--vw-fs-400: 1.375rem; /* 22px — H4 / Auszeichnung */
--vw-fs-500: 1.75rem; /* 28px — H3 */
--vw-fs-600: 2.25rem; /* 36px — H2 */
--vw-fs-700: 3rem; /* 48px — H1 */
--vw-fs-800: 4.5rem; /* 72px — Display / Hero (Big Shoulders) */
--vw-fs-900: 6rem; /* 96px — XL Display */
--vw-lh-tight: 1.05;
--vw-lh-snug: 1.25;
--vw-lh-normal: 1.5;
--vw-lh-relaxed: 1.65;
/* Abstände — auf einer 8er-Skala */
--vw-sp-1: 0.25rem;
--vw-sp-2: 0.5rem;
--vw-sp-3: 0.75rem;
--vw-sp-4: 1rem;
--vw-sp-5: 1.5rem;
--vw-sp-6: 2rem;
--vw-sp-7: 3rem;
--vw-sp-8: 4rem;
--vw-sp-9: 6rem;
--vw-sp-10: 8rem;
/* Container */
--vw-container: 1280px;
--vw-container-narrow: 800px;
/* Radien — modern, ruhig */
--vw-radius-sm: 6px;
--vw-radius-md: 12px;
--vw-radius-lg: 24px;
--vw-radius-pill: 999px;
/* Schatten — nur sehr dezent */
--vw-shadow-sm: 0 1px 2px rgba(27, 54, 93, 0.06);
--vw-shadow-md: 0 6px 24px rgba(27, 54, 93, 0.08);
--vw-shadow-lg: 0 18px 48px rgba(27, 54, 93, 0.12);
/* Übergänge */
--vw-transition: 0.2s ease;
/* Header-Höhe (für Anker-Offsets etc.) */
--vw-header-height: 88px;
}
/* ---------------------------------------------------------------------------
* 3. RESET / BASICS
* ------------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html {
scroll-behavior: smooth;
scroll-padding-top: var(--vw-header-height);
-webkit-text-size-adjust: 100%;
-moz-text-size-adjust: 100%;
text-size-adjust: 100%;
}
@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;
}
}
body {
margin: 0;
font-family: var(--vw-font);
font-size: var(--vw-fs-200);
line-height: var(--vw-lh-normal);
color: var(--vw-text);
background: var(--vw-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
img, svg, video, canvas, iframe { max-width: 100%; height: auto; }
img { display: block; }
button { font: inherit; cursor: pointer; }
/* Fokus-Stil — sichtbar und CI-konform */
:focus-visible {
outline: 3px solid var(--vw-orange);
outline-offset: 2px;
border-radius: 2px;
}
/* Skip-Link */
.vw-skiplink {
position: absolute;
top: -100px;
left: var(--vw-sp-4);
z-index: 9999;
padding: var(--vw-sp-3) var(--vw-sp-5);
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
text-decoration: none;
border-radius: var(--vw-radius-sm);
transition: top var(--vw-transition);
}
.vw-skiplink:focus { top: var(--vw-sp-3); }
/* Screen-Reader-Only */
.vw-screen-reader-text {
border: 0;
clip: rect(1px,1px,1px,1px);
-webkit-clip-path: inset(50%);
clip-path: inset(50%);
height: 1px; width: 1px;
margin: -1px; overflow: hidden;
padding: 0; position: absolute;
word-wrap: normal !important;
}
/* ---------------------------------------------------------------------------
* 4. TYPOGRAFIE
* ------------------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
margin: 0 0 var(--vw-sp-4);
font-weight: 600; /* SemiBold per CI für Headlines */
line-height: var(--vw-lh-tight);
color: var(--vw-dunkelblau);
text-wrap: balance;
}
/* H1 — einzige Display-Schmuckschrift Big Shoulders Inline.
* Laut Manual sparsam, also nur für die "großen Auftritte" — exklusiv H1. */
h1 {
font-family: var(--vw-font-display);
font-weight: 800;
letter-spacing: -0.02em;
text-transform: uppercase;
line-height: 0.95;
}
/* H2–H6 nutzen die Brand-Body-Schrift Outfit (SemiBold/Bold).
* Damit bleibt der Charakter ruhiger, lesbarer und stärker hierarchisch. */
h2, h3, h4, h5, h6 {
font-family: var(--vw-font);
font-weight: 700;
letter-spacing: -0.01em;
text-transform: none;
}
h1 { font-size: var(--vw-fs-700); }
h2 { font-size: var(--vw-fs-600); line-height: var(--vw-lh-snug); }
h3 { font-size: var(--vw-fs-500); line-height: var(--vw-lh-snug); }
h4 { font-size: var(--vw-fs-400); line-height: var(--vw-lh-snug); }
h5 { font-size: var(--vw-fs-300); line-height: var(--vw-lh-snug); }
h6 { font-size: var(--vw-fs-200); text-transform: uppercase; letter-spacing: 0.05em; }
p { margin: 0 0 var(--vw-sp-4); max-width: 70ch; }
strong, b { font-weight: 700; }
a {
color: var(--vw-dunkelblau);
text-decoration: underline;
text-underline-offset: 2px;
text-decoration-thickness: 1px;
transition: color var(--vw-transition);
}
a:hover { color: var(--vw-orange); }
ul, ol { margin: 0 0 var(--vw-sp-4); padding-left: 1.5em; }
li { margin-bottom: var(--vw-sp-2); }
blockquote {
margin: var(--vw-sp-6) 0;
padding: var(--vw-sp-5) var(--vw-sp-6);
border-left: 4px solid var(--vw-orange);
background: var(--vw-bg-soft);
font-size: var(--vw-fs-300);
font-weight: 700; /* Bold per CI für Auszeichnungen */
border-radius: 0 var(--vw-radius-md) var(--vw-radius-md) 0;
}
blockquote p:last-child { margin-bottom: 0; }
small, .vw-small {
font-size: var(--vw-fs-100);
letter-spacing: -0.01em; /* CI: Kleingedrucktes mit -10 Tracking */
}
hr {
border: 0;
border-top: 1px solid var(--vw-border);
margin: var(--vw-sp-7) 0;
}
::selection { background: var(--vw-lichtgelb); color: var(--vw-dunkelblau); }
/* ---------------------------------------------------------------------------
* 5. LAYOUT & CONTAINER
* ------------------------------------------------------------------------ */
.vw-container {
width: 100%;
max-width: var(--vw-container);
margin-inline: auto;
padding-inline: var(--vw-sp-5);
}
.vw-container--narrow { max-width: var(--vw-container-narrow); }
.vw-section {
padding-block: var(--vw-sp-9);
}
/* Section-Hintergrund-Modifier — angelehnt an Manual-Farbflächen.
* Hero und ruhige Bereiche: Sand (FBE9C4)
* Spotlight-Bereiche: Orange-Pastell
* Ruhige Hervorhebung: Pastell-Gelb
* Dark-Sektion: Dunkelblau
*/
.vw-section--soft { background: var(--vw-bg-sand); }
.vw-section--sand { background: var(--vw-bg-sand); }
.vw-section--orange { background: var(--vw-bg-orange); color: var(--vw-dunkelblau); }
.vw-section--pastel { background: var(--vw-bg-pastel); }
.vw-section--gruen { background: var(--vw-gruen-hell); color: var(--vw-weiss); }
.vw-section--dark {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
}
/* Headline-Farben in farbigen Sektionen */
.vw-section--orange h1, .vw-section--orange h2,
.vw-section--orange h3, .vw-section--orange h4 { color: var(--vw-dunkelblau); }
.vw-section--gruen h1, .vw-section--gruen h2,
.vw-section--gruen h3, .vw-section--gruen h4 { color: var(--vw-weiss); }
.vw-section--dark h1, .vw-section--dark h2, .vw-section--dark h3,
.vw-section--dark h4, .vw-section--dark h5, .vw-section--dark h6 {
color: var(--vw-weiss);
}
.vw-section--dark a { color: var(--vw-sonnengelb); }
.vw-section--dark a:hover { color: var(--vw-orange); }
.vw-section-eyebrow {
display: inline-block;
font-size: var(--vw-fs-100);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--vw-rost);
margin-bottom: var(--vw-sp-3);
}
/* Eyebrow in farbigen Sektionen anpassen */
.vw-section--orange .vw-section-eyebrow { color: var(--vw-dunkelblau); }
.vw-section--gruen .vw-section-eyebrow { color: var(--vw-sonnengelb); }
.vw-section--dark .vw-section-eyebrow { color: var(--vw-sonnengelb); }
.vw-section--pastel .vw-section-eyebrow { color: var(--vw-rost); }
.vw-grid {
display: grid;
gap: var(--vw-sp-6);
}
.vw-grid--2 { grid-template-columns: repeat(2, 1fr); }
.vw-grid--3 { grid-template-columns: repeat(3, 1fr); }
.vw-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.vw-site-main { min-height: 50vh; outline: none; }
/* ---------------------------------------------------------------------------
* 5b. PLANETARE DEKORATION
*
* SVG-basierte Hintergrund-Dekorelemente, die im Manual als "planetare
* Formen mit Ebenen, Inlines und Umlaufbahnen" beschrieben werden.
* Sie liegen absolut im Container, hinter dem Inhalt (z-index: 0).
* ------------------------------------------------------------------------ */
.vw-decor {
pointer-events: none;
user-select: none;
position: absolute;
z-index: 0;
}
.vw-decor img,
.vw-decor svg {
display: block;
width: 100%;
height: auto;
}
/* Cluster-Variante für Hero: linke obere Ecke, mehrere Planeten */
.vw-decor--hero-left {
top: -2rem;
left: -3rem;
width: 18rem;
max-width: 28vw;
}
/* Cluster für "Hinter den Kulissen": linke Mitte, ein großer Rost-Planet */
.vw-decor--side-left {
top: 50%;
left: -4rem;
transform: translateY(-50%);
width: 22rem;
max-width: 32vw;
}
/* Auf Mobile: Dekor nur als kleine Andeutung in der Ecke */
@media (max-width: 800px) {
.vw-decor--hero-left { width: 9rem; top: -1rem; left: -2rem; }
.vw-decor--side-left { width: 9rem; left: -2rem; }
}
/* Inhalt über der Dekoration sicherstellen */
.vw-decor + *,
.vw-section--has-decor > * {
position: relative;
z-index: 1;
}
.vw-section--has-decor {
position: relative;
overflow: hidden;
}
/* ---------------------------------------------------------------------------
* 6. HEADER & HAUPTNAVIGATION
* ------------------------------------------------------------------------ */
.vw-site-header {
position: sticky;
top: 0;
z-index: 100;
background: var(--vw-weiss);
border-bottom: 1px solid var(--vw-border);
}
.vw-site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--vw-sp-5);
min-height: var(--vw-header-height);
}
.vw-site-branding__link {
display: inline-flex;
align-items: center;
text-decoration: none;
padding-block: var(--vw-sp-3);
}
.vw-logo--full { height: 44px; width: auto; }
.vw-logo--mark { height: 40px; width: auto; }
.vw-primary-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
gap: var(--vw-sp-6);
}
.vw-primary-menu li { margin: 0; }
.vw-primary-menu a {
display: inline-block;
padding: var(--vw-sp-2) 0;
text-decoration: none;
font-weight: 600;
color: var(--vw-dunkelblau);
border-bottom: 2px solid transparent;
transition: border-color var(--vw-transition), color var(--vw-transition);
}
.vw-primary-menu a:hover,
.vw-primary-menu .current-menu-item > a,
.vw-primary-menu .current_page_item > a,
.vw-primary-menu .current-menu-parent > a {
color: var(--vw-orange);
border-bottom-color: var(--vw-orange);
}
/* Mobile-Toggle */
.vw-nav-toggle {
display: none;
align-items: center;
gap: var(--vw-sp-2);
background: transparent;
border: 0;
padding: var(--vw-sp-2) var(--vw-sp-3);
font-weight: 600;
color: var(--vw-dunkelblau);
}
.vw-nav-toggle__bars {
display: inline-block;
width: 24px;
height: 18px;
position: relative;
}
.vw-nav-toggle__bars span {
position: absolute;
left: 0;
width: 100%;
height: 2px;
background: currentColor;
border-radius: 2px;
transition: transform var(--vw-transition), opacity var(--vw-transition), top var(--vw-transition);
}
.vw-nav-toggle__bars span:nth-child(1) { top: 0; }
.vw-nav-toggle__bars span:nth-child(2) { top: 8px; }
.vw-nav-toggle__bars span:nth-child(3) { top: 16px; }
.vw-nav-toggle[aria-expanded="true"] .vw-nav-toggle__bars span:nth-child(1) { top: 8px; transform: rotate(45deg); }
.vw-nav-toggle[aria-expanded="true"] .vw-nav-toggle__bars span:nth-child(2) { opacity: 0; }
.vw-nav-toggle[aria-expanded="true"] .vw-nav-toggle__bars span:nth-child(3) { top: 8px; transform: rotate(-45deg); }
/* Menü-CTA: einzelner Eintrag im Hauptmenü als Button (z. B. „Community"). */
.vw-primary-menu li.vw-menu-cta { margin-left: var(--vw-sp-3); }
.vw-primary-menu li.vw-menu-cta > a {
padding: 0.625rem 1.25rem;
background: var(--vw-orange);
color: var(--vw-weiss);
border: 2px solid var(--vw-orange);
border-radius: var(--vw-radius-pill);
font-weight: 700;
transition: background var(--vw-transition), color var(--vw-transition), border-color var(--vw-transition);
}
.vw-primary-menu li.vw-menu-cta > a:hover,
.vw-primary-menu li.vw-menu-cta.current-menu-item > a,
.vw-primary-menu li.vw-menu-cta.current_page_item > a {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
border-color: var(--vw-dunkelblau);
}
@media (max-width: 960px) {
.vw-logo--full { height: 36px; }
.vw-nav-toggle { display: inline-flex; }
.vw-primary-menu {
display: none;
position: absolute;
top: 100%;
left: 0;
right: 0;
flex-direction: column;
gap: 0;
padding: var(--vw-sp-4);
background: var(--vw-weiss);
border-bottom: 1px solid var(--vw-border);
box-shadow: var(--vw-shadow-md);
}
.vw-primary-menu.is-open { display: flex; }
.vw-primary-menu a {
display: block;
padding: var(--vw-sp-3) 0;
border-bottom: 1px solid var(--vw-border);
}
.vw-primary-menu li:last-child a { border-bottom: 0; }
.vw-primary-nav { position: relative; }
/* Menü-CTA auf Mobile als normaler Eintrag, nur farblich akzentuiert. */
.vw-primary-menu li.vw-menu-cta { margin-left: 0; }
.vw-primary-menu li.vw-menu-cta > a {
padding: var(--vw-sp-3) 0;
background: transparent;
color: var(--vw-orange);
border: 0;
border-bottom: 1px solid var(--vw-border);
border-radius: 0;
}
.vw-primary-menu li:last-child.vw-menu-cta > a { border-bottom: 0; }
}
/* ---------------------------------------------------------------------------
* 7. BUTTONS & LINKS
* ------------------------------------------------------------------------ */
.vw-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--vw-sp-2);
padding: 0.875rem 1.75rem;
border-radius: var(--vw-radius-pill);
border: 2px solid transparent;
font-family: inherit;
font-weight: 700;
font-size: var(--vw-fs-200);
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: background var(--vw-transition), color var(--vw-transition), border-color var(--vw-transition), transform var(--vw-transition);
}
.vw-btn:hover { transform: translateY(-1px); }
.vw-btn--primary {
background: var(--vw-orange);
color: var(--vw-weiss);
}
.vw-btn--primary:hover {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
}
.vw-btn--secondary {
background: transparent;
color: var(--vw-dunkelblau);
border-color: var(--vw-dunkelblau);
}
.vw-btn--secondary:hover {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
}
.vw-btn--ghost {
background: transparent;
color: var(--vw-dunkelblau);
padding-inline: var(--vw-sp-2);
}
.vw-btn--ghost:hover { color: var(--vw-orange); }
/* Buttons in farbigen Sektionen passen sich an — laut Manual-Vorlage */
.vw-section--orange .vw-btn--primary {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
}
.vw-section--orange .vw-btn--primary:hover {
background: var(--vw-rost);
}
.vw-section--gruen .vw-btn--primary {
background: var(--vw-weiss);
color: var(--vw-gruen-dunkel);
}
.vw-section--gruen .vw-btn--primary:hover {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
}
.vw-section--dark .vw-btn--secondary {
color: var(--vw-weiss);
border-color: var(--vw-weiss);
}
.vw-section--dark .vw-btn--secondary:hover {
background: var(--vw-weiss);
color: var(--vw-dunkelblau);
}
.vw-link-arrow {
display: inline-flex;
align-items: center;
gap: var(--vw-sp-2);
font-weight: 700;
text-decoration: none;
color: var(--vw-dunkelblau);
}
.vw-link-arrow::after {
content: '→';
transition: transform var(--vw-transition);
}
.vw-link-arrow:hover { color: var(--vw-orange); }
.vw-link-arrow:hover::after { transform: translateX(4px); }
/* ---------------------------------------------------------------------------
* 8. HERO
* ------------------------------------------------------------------------ */
.vw-hero {
position: relative;
overflow: hidden;
background: var(--vw-bg-sand);
padding-block: var(--vw-sp-9);
isolation: isolate;
}
.vw-hero__inner {
display: grid;
grid-template-columns: 1.1fr 1fr;
align-items: center;
gap: var(--vw-sp-8);
position: relative;
z-index: 1;
}
.vw-hero__kicker {
display: inline-block;
font-family: var(--vw-font);
font-size: var(--vw-fs-100);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.14em;
color: var(--vw-rost);
margin-bottom: var(--vw-sp-3);
}
.vw-hero__title {
font-family: var(--vw-font-display);
font-weight: 800;
font-size: clamp(2.5rem, 7vw, var(--vw-fs-900));
line-height: 0.92;
letter-spacing: -0.02em;
text-transform: uppercase;
margin-bottom: var(--vw-sp-5);
color: var(--vw-dunkelblau);
}
.vw-hero__lead {
font-size: var(--vw-fs-300);
line-height: var(--vw-lh-relaxed);
max-width: 50ch;
margin-bottom: var(--vw-sp-6);
}
.vw-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--vw-sp-4);
}
.vw-hero__visual {
position: relative;
aspect-ratio: 4 / 3;
border-radius: var(--vw-radius-lg);
overflow: hidden;
box-shadow: var(--vw-shadow-lg);
}
.vw-hero__visual img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Bühne-Element (CI: abgeschnittener Kreis als Hintergrund) — bleibt
für Backwards-Kompatibilität, im neuen Design dezenter. */
.vw-buehne {
position: absolute;
z-index: -1;
pointer-events: none;
opacity: 0.4;
}
.vw-hero .vw-buehne {
width: 600px;
height: 600px;
right: -150px;
top: -100px;
}
@media (max-width: 960px) {
.vw-hero__inner { grid-template-columns: 1fr; gap: var(--vw-sp-6); }
.vw-hero { padding-block: var(--vw-sp-7); }
}
/* ---------------------------------------------------------------------------
* 9. SEKTIONEN
* ------------------------------------------------------------------------ */
.vw-section-header {
max-width: 720px;
margin-bottom: var(--vw-sp-7);
}
.vw-section-header h2 { margin-bottom: var(--vw-sp-3); }
.vw-section-header p {
font-size: var(--vw-fs-300);
color: var(--vw-text);
max-width: 60ch;
}
.vw-twocol {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--vw-sp-8);
align-items: center;
}
.vw-twocol--reverse > :first-child { order: 2; }
.vw-twocol__media {
border-radius: var(--vw-radius-lg);
overflow: hidden;
box-shadow: var(--vw-shadow-md);
}
.vw-twocol__media img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 800px) {
.vw-twocol { grid-template-columns: 1fr; gap: var(--vw-sp-6); }
.vw-twocol--reverse > :first-child { order: 0; }
}
/* Werte-Liste (Sektion „Bildungsauftrag & Haltung") */
.vw-werte {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: var(--vw-sp-5);
list-style: none;
margin: 0;
padding: 0;
}
.vw-werte li {
margin: 0;
padding: var(--vw-sp-5);
background: var(--vw-weiss);
border: 1px solid var(--vw-border);
border-radius: var(--vw-radius-md);
}
.vw-werte__title {
font-weight: 700;
font-size: var(--vw-fs-300);
color: var(--vw-orange);
margin-bottom: var(--vw-sp-2);
}
/* Mitglied-CTA */
.vw-mitglied-cta {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--vw-sp-5);
}
.vw-mitglied-cta__card {
padding: var(--vw-sp-7);
background: var(--vw-weiss);
border-radius: var(--vw-radius-lg);
border: 1px solid var(--vw-border);
min-width: 0; /* verhindert overflow durch lange Inhalte */
max-width: 100%;
box-sizing: border-box;
hyphens: auto;
-webkit-hyphens: auto;
}
.vw-mitglied-cta__card h2,
.vw-mitglied-cta__card h3 {
hyphens: manual;
-webkit-hyphens: manual;
}
.vw-mitglied-cta__card--accent {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
border-color: var(--vw-dunkelblau);
}
.vw-mitglied-cta__card--accent h1,
.vw-mitglied-cta__card--accent h2,
.vw-mitglied-cta__card--accent h3,
.vw-mitglied-cta__card--accent h4 { color: var(--vw-weiss); }
@media (max-width: 800px) {
.vw-mitglied-cta { grid-template-columns: 1fr; }
.vw-mitglied-cta__card { padding: var(--vw-sp-5); }
}
/* ---------------------------------------------------------------------------
* 10. KARTEN
* ------------------------------------------------------------------------ */
.vw-card {
display: flex;
flex-direction: column;
height: 100%;
background: var(--vw-weiss);
border: 1px solid var(--vw-border);
border-radius: var(--vw-radius-md);
overflow: hidden;
transition: transform var(--vw-transition), box-shadow var(--vw-transition);
}
.vw-card:hover {
transform: translateY(-3px);
box-shadow: var(--vw-shadow-md);
}
.vw-card__media {
display: block;
aspect-ratio: 4/3;
background: var(--vw-bg-soft);
overflow: hidden;
}
.vw-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--vw-transition);
}
.vw-card:hover .vw-card__media img { transform: scale(1.04); }
.vw-card__body {
padding: var(--vw-sp-5);
display: flex;
flex-direction: column;
flex: 1;
hyphens: auto;
-webkit-hyphens: auto;
}
.vw-card__title {
font-size: var(--vw-fs-400);
margin-bottom: var(--vw-sp-3);
hyphens: manual;
-webkit-hyphens: manual;
}
.vw-card__title a { text-decoration: none; color: inherit; }
.vw-card__title a:hover { color: var(--vw-orange); }
.vw-card__excerpt {
color: var(--vw-text);
margin-bottom: var(--vw-sp-4);
flex: 1;
}
.vw-card__meta {
display: flex;
flex-wrap: wrap;
gap: var(--vw-sp-2);
margin-bottom: var(--vw-sp-3);
}
.vw-badge {
display: inline-block;
padding: 0.25em 0.75em;
border-radius: var(--vw-radius-pill);
font-size: var(--vw-fs-100);
font-weight: 700;
background: var(--vw-pfirsich);
color: var(--vw-dunkelblau);
}
.vw-badge--orange { background: var(--vw-orange); color: var(--vw-weiss); }
.vw-badge--blau { background: var(--vw-pastelblau); color: var(--vw-dunkelblau); }
.vw-badge--gelb { background: var(--vw-lichtgelb); color: var(--vw-dunkelblau); }
.vw-badge--neutral { background: var(--vw-hellgrau); color: var(--vw-anthrazit); }
/* ---------------------------------------------------------------------------
* 11. FILTER-LEISTE
* ------------------------------------------------------------------------ */
.vw-filter {
background: var(--vw-bg-soft);
border-radius: var(--vw-radius-md);
padding: var(--vw-sp-5);
margin-bottom: var(--vw-sp-7);
}
.vw-filter__form {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) auto;
gap: var(--vw-sp-4);
align-items: end;
}
.vw-filter__field { display: flex; flex-direction: column; gap: var(--vw-sp-2); }
.vw-filter__field label {
font-size: var(--vw-fs-100);
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
}
.vw-filter__field select {
padding: 0.625rem 0.875rem;
border: 1px solid var(--vw-border);
border-radius: var(--vw-radius-sm);
background: var(--vw-weiss);
font: inherit;
}
.vw-filter__actions {
display: flex;
gap: var(--vw-sp-3);
}
.no-js .vw-filter__actions { display: flex; }
/* Wenn JS aktiv ist und der Filter selbst submitted, blenden wir den Submit-Button aus */
.js .vw-filter__submit { display: none; }
/* Pagination — z. B. für Blog/Magazin und Archive */
.pagination, .nav-links, .navigation.pagination {
display: flex;
flex-wrap: wrap;
gap: var(--vw-sp-2);
justify-content: center;
margin-top: var(--vw-sp-7);
padding-top: var(--vw-sp-5);
border-top: 1px solid var(--vw-border);
}
.pagination .page-numbers,
.nav-links .page-numbers {
display: inline-grid;
place-items: center;
min-width: 44px;
height: 44px;
padding: 0 var(--vw-sp-3);
border-radius: var(--vw-radius-pill);
border: 1px solid var(--vw-border);
background: var(--vw-weiss);
font-weight: 700;
text-decoration: none;
color: var(--vw-dunkelblau);
transition: background var(--vw-transition), color var(--vw-transition), border-color var(--vw-transition);
}
.pagination .page-numbers:hover,
.nav-links .page-numbers:hover {
background: var(--vw-orange);
color: var(--vw-weiss);
border-color: var(--vw-orange);
}
.pagination .page-numbers.current,
.nav-links .page-numbers.current {
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
border-color: var(--vw-dunkelblau);
}
.pagination .page-numbers.dots,
.nav-links .page-numbers.dots {
border-color: transparent;
background: transparent;
}
/* ---------------------------------------------------------------------------
* 12. LISTEN / DETAILSEITEN
* ------------------------------------------------------------------------ */
.vw-page-header {
padding-block: var(--vw-sp-8);
background: var(--vw-bg-sand);
position: relative;
overflow: hidden;
}
.vw-page-header h1 {
font-size: clamp(2rem, 6vw, var(--vw-fs-800));
margin-bottom: var(--vw-sp-3);
color: var(--vw-dunkelblau);
}
.vw-page-header__lead {
font-size: var(--vw-fs-300);
max-width: 60ch;
color: var(--vw-text);
}
.vw-detail {
display: grid;
grid-template-columns: 2fr 1fr;
gap: var(--vw-sp-7);
margin-block: var(--vw-sp-8);
}
.vw-detail__sidebar {
padding: var(--vw-sp-6);
background: var(--vw-bg-soft);
border-radius: var(--vw-radius-md);
align-self: start;
position: sticky;
top: calc(var(--vw-header-height) + var(--vw-sp-4));
}
.vw-detail__sidebar h2 {
font-size: var(--vw-fs-400);
margin-bottom: var(--vw-sp-4);
}
.vw-detail__sidebar dl { margin: 0; }
.vw-detail__sidebar dt {
font-size: var(--vw-fs-100);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--vw-text-muted);
margin-top: var(--vw-sp-4);
}
.vw-detail__sidebar dt:first-child { margin-top: 0; }
.vw-detail__sidebar dd {
margin: var(--vw-sp-1) 0 0;
}
.vw-detail__content > :first-child { margin-top: 0; }
.vw-detail__hero {
margin-bottom: var(--vw-sp-6);
border-radius: var(--vw-radius-lg);
overflow: hidden;
}
.vw-detail__hero img { width: 100%; height: auto; max-height: 480px; object-fit: cover; }
@media (max-width: 960px) {
.vw-detail { grid-template-columns: 1fr; }
.vw-detail__sidebar { position: static; }
}
/* Download-Block (Satzung etc.) */
.vw-download {
display: flex;
align-items: center;
gap: var(--vw-sp-4);
padding: var(--vw-sp-5);
background: var(--vw-bg-soft);
border: 1px solid var(--vw-border);
border-radius: var(--vw-radius-md);
}
.vw-download__icon {
flex: none;
width: 48px;
height: 48px;
border-radius: 50%;
background: var(--vw-orange);
color: var(--vw-weiss);
display: grid;
place-items: center;
font-size: 1.25rem;
font-weight: 700;
}
.vw-download__title { font-weight: 700; margin: 0 0 var(--vw-sp-1); }
.vw-download__meta { font-size: var(--vw-fs-100); color: var(--vw-text-muted); margin: 0; }
.vw-download--centered { max-width: 720px; }
/* Embed-Container (FundraisingBox, Borlabs-Wrapper)
* Hält sich raus aus iFrame-Layout: kein Padding, keine Mindesthöhe.
* Nur einen sichtbaren Container, wenn der Hint-Text drin ist (Customizer leer).
*/
.vw-embed {
max-width: 100%;
}
.vw-embed iframe {
display: block;
width: 100%;
max-width: 100%;
border: 0;
}
.vw-embed:has(.vw-embed__hint) {
background: var(--vw-bg-soft);
border: 1px dashed var(--vw-border);
border-radius: var(--vw-radius-md);
padding: var(--vw-sp-6);
min-height: 200px;
}
.vw-embed__hint {
color: var(--vw-text-muted);
font-size: var(--vw-fs-100);
margin: 0;
}
/* ---------------------------------------------------------------------------
* 12b. PROSE — Lesefreundliche Typografie für Editor-Content
*
* Wird auf Seiten und Beiträgen verwendet. Inhalt bleibt im breiten
* Container, aber reiner Text wird auf eine angenehme Lese-Breite
* begrenzt. Lese-Spalte sitzt LINKSBÜNDIG, damit sie unter dem
* Header-Titel beginnt — nicht in der Container-Mitte.
*
* Bilder, Tabellen und volle Blöcke dürfen ausbrechen.
* ------------------------------------------------------------------------ */
.vw-prose {
font-size: var(--vw-fs-300);
line-height: var(--vw-lh-relaxed);
max-width: 720px;
hyphens: auto;
-webkit-hyphens: auto;
hyphenate-limit-chars: 8 4 4; /* min Wortlänge 8, min Vor/Nach 4 — vermeidet "ge-baut" o. ä. */
hyphenate-limit-lines: 2; /* max 2 Trennungen in Folge */
hyphenate-limit-last: always;
}
/* Headings sollen NICHT umgebrochen werden, sieht in Headlines schlecht aus */
.vw-prose > h1,
.vw-prose > h2,
.vw-prose > h3,
.vw-prose > h4,
.vw-prose > h5,
.vw-prose > h6 {
hyphens: manual;
-webkit-hyphens: manual;
margin-top: var(--vw-sp-7);
}
.vw-prose > h1:first-child,
.vw-prose > h2:first-child,
.vw-prose > h3:first-child {
margin-top: 0;
}
.vw-prose > p,
.vw-prose > ul,
.vw-prose > ol {
margin-bottom: var(--vw-sp-5);
}
/* Bilder, Figures und volle Blöcke dürfen die Lese-Breite verlassen */
.vw-prose > figure,
.vw-prose > .wp-block-image,
.vw-prose > .wp-block-gallery,
.vw-prose > .wp-block-table,
.vw-prose > .alignwide,
.vw-prose > .wp-block-embed {
max-width: 960px;
margin-block: var(--vw-sp-6);
}
.vw-prose > .alignfull {
max-width: 100%;
}
.vw-prose img {
border-radius: var(--vw-radius-md);
}
.vw-prose figcaption {
font-size: var(--vw-fs-100);
color: var(--vw-text-muted);
text-align: center;
margin-top: var(--vw-sp-2);
}
/* ---------------------------------------------------------------------------
* 13. FORMULARE & FluentForms-Anpassung
* ------------------------------------------------------------------------ */
.vw-form-wrap { max-width: 600px; }
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
textarea, select {
width: 100%;
padding: 0.75rem 1rem;
border: 1px solid var(--vw-border);
border-radius: var(--vw-radius-sm);
background: var(--vw-weiss);
font: inherit;
color: inherit;
}
input:focus, textarea:focus, select:focus {
outline: 3px solid var(--vw-orange);
outline-offset: 1px;
border-color: var(--vw-orange);
}
/* FluentForms — sanftes Anpassen, falls aktiv */
.fluentform .ff-el-input--label label { font-weight: 600; }
.fluentform .ff-btn-submit {
background: var(--vw-orange) !important;
color: var(--vw-weiss) !important;
border: 0 !important;
border-radius: var(--vw-radius-pill) !important;
padding: 0.875rem 1.75rem !important;
font-weight: 700 !important;
}
.fluentform .ff-btn-submit:hover {
background: var(--vw-dunkelblau) !important;
}
/* ---------------------------------------------------------------------------
* 14. FOOTER
* ------------------------------------------------------------------------ */
.vw-site-footer {
padding-block: var(--vw-sp-8) var(--vw-sp-5);
background: var(--vw-dunkelblau);
color: var(--vw-weiss);
}
.vw-site-footer a { color: var(--vw-pfirsich); text-decoration: none; }
.vw-site-footer a:hover { color: var(--vw-orange); text-decoration: underline; }
.vw-footer-grid {
display: grid;
grid-template-columns: 1.4fr 1fr 1fr 1fr;
gap: var(--vw-sp-7);
margin-bottom: var(--vw-sp-7);
}
.vw-footer-logo .vw-logo--full { height: 36px; margin-bottom: var(--vw-sp-4); }
.vw-footer-claim {
font-size: var(--vw-fs-300);
font-weight: 600;
color: var(--vw-pfirsich);
max-width: 28ch;
}
.vw-footer-heading {
font-size: var(--vw-fs-100);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.12em;
color: var(--vw-weiss);
margin-bottom: var(--vw-sp-4);
}
.vw-footer-menu, .vw-social-list {
list-style: none;
margin: 0;
padding: 0;
}
.vw-footer-menu li { margin-bottom: var(--vw-sp-2); }
.vw-social-list { display: flex; gap: var(--vw-sp-3); }
.vw-social-list a {
display: inline-grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.08);
transition: background var(--vw-transition);
}
.vw-social-list a:hover { background: var(--vw-orange); }
.vw-social-icon { width: 20px; height: 20px; fill: currentColor; }
.vw-site-footer .vw-social-list a { color: var(--vw-weiss); }
.vw-footer-address address { font-style: normal; line-height: var(--vw-lh-relaxed); margin-bottom: var(--vw-sp-3); }
.vw-footer-bottom {
padding-top: var(--vw-sp-5);
border-top: 1px solid rgba(255, 255, 255, 0.12);
font-size: var(--vw-fs-100);
color: rgba(255, 255, 255, 0.7);
}
.vw-footer-bottom p { margin: 0; }
@media (max-width: 800px) {
.vw-footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
.vw-footer-grid { grid-template-columns: 1fr; }
}
/* ---------------------------------------------------------------------------
* 15. UTILITIES
* ------------------------------------------------------------------------ */
.vw-mt-0 { margin-top: 0; }
.vw-mb-0 { margin-bottom: 0; }
.vw-text-center { text-align: center; }
.vw-text-muted { color: var(--vw-text-muted); }
@media (max-width: 600px) {
:root { --vw-header-height: 72px; }
.vw-section { padding-block: var(--vw-sp-7); }
.vw-site-footer { padding-block: var(--vw-sp-7) var(--vw-sp-4); }
}
/* ---------------------------------------------------------------------------
* 17. STARTSEITEN-VORLAGE v2 — neue Sektionen aus dem CI Manual 2025
*
* Diese Klassen werden von den Template-Parts für die Front-Page-Vorlage
* verwendet (hero-v2, pillars, live, wald, kulissen, kontakt-footer).
* ------------------------------------------------------------------------ */
/* ===== Hero v2 — Logo rechts statt Bild ===== */
.vw-hero-v2 {
position: relative;
background: var(--vw-bg-sand);
padding: 3rem 1.5rem 4rem;
/* Verhindert, dass die kreisenden Planeten in die darunter liegende
Sektion ragen, wenn sie auf ihrer Bahn nach unten wandern. */
overflow: hidden;
overflow: hidden;
min-height: 30rem;
}
.vw-hero-v2__inner {
max-width: var(--vw-container);
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 1.1fr;
align-items: center;
gap: 2rem;
position: relative;
z-index: 2;
min-height: 22rem;
}
.vw-hero-v2__decor-left {
position: absolute;
/* SVG-viewBox erweitert (1160×1160 statt 823×902), damit Planeten in
allen Rotationspositionen vollständig sichtbar sind. Container hier
entsprechend ~1.41× vergrößert und positioniert, sodass die Komposition
optisch ihre alte Position behält. */
top: -7.8rem;
left: -12.7rem;
width: 39.5rem;
max-width: 56vw;
pointer-events: none;
user-select: none;
z-index: 1;
}
/* Sowohl ![]()
als auch inline