/*!
 * Template: Ergotherapie Ortenburg – Valentin Weber
 * Grundlage: Styleguide 2023/8 (Farbwelt, Logowelt, Schriftwelt)
 */

/* ------------------------------------------------------------------
   Schrift: Jost (lokal eingebunden, DSGVO-konform – siehe fonts/LIESMICH.txt)
------------------------------------------------------------------- */
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/Jost-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Jost";
  src: url("../fonts/Jost-Italic-VariableFont_wght.woff2") format("woff2-variations"),
       url("../fonts/Jost-Italic-VariableFont_wght.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Farbwelt laut Styleguide
------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --vw-forest:   #04362b; /* CMYK 91/48/73/64 – Hauptfarbe, Logo */
  --vw-sage:     #839b87; /* CMYK 53/26/48/8  – Logo-Akzent */
  --vw-mint:     #b4c8bb; /* CMYK 25/13/29/0 */
  --vw-sand:     #f0ecea; /* CMYK 7/7/8/0 */
  --vw-stone:    #cdc7c7; /* CMYK 18/17/16/7 */
  --vw-slate:    #828582; /* CMYK 5/0/5/60 */
  --vw-graphite: #3a3b39; /* CMYK 5/0/5/90 – Fließtext */
  --vw-white:    #ffffff;

  --vw-forest-80: #2a5248;
  --vw-sage-dark: #5d7562; /* abgedunkelter Akzent für Text auf Weiß (Kontrast ≥ 4.5:1) */

  --vw-font: "Jost", "Futura", "Century Gothic", "Avenir Next", system-ui, sans-serif;

  --vw-step--1: clamp(.875rem, .85rem + .1vw, .9375rem);
  --vw-step-0:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --vw-step-1:  clamp(1.25rem, 1.15rem + .45vw, 1.5rem);
  --vw-step-2:  clamp(1.5rem, 1.3rem + .9vw, 2rem);
  --vw-step-3:  clamp(1.875rem, 1.5rem + 1.6vw, 2.75rem);
  --vw-step-4:  clamp(2.25rem, 1.6rem + 3vw, 3.75rem);

  --vw-space: clamp(1rem, .8rem + 1vw, 1.5rem);
  --vw-section: clamp(3rem, 2rem + 4vw, 6rem);
  --vw-container: 1200px;
  --vw-measure: 68ch;

  /* Schräge des Signets – wird für alle Diagonalen wiederverwendet */
  --vw-slant: 22%;

  /* Bootstrap (Joomla-Core) auf die Hausfarben umstellen */
  --bs-body-font-family: var(--vw-font);
  --bs-body-color: var(--vw-graphite);
  --bs-body-bg: var(--vw-white);
  --bs-primary: var(--vw-forest);
  --bs-primary-rgb: 4, 54, 43;
  --bs-secondary: var(--vw-slate);
  --bs-link-color: var(--vw-forest);
  --bs-link-color-rgb: 4, 54, 43;
  --bs-link-hover-color: var(--vw-forest-80);
  --bs-link-hover-color-rgb: 42, 82, 72;
  --bs-border-color: var(--vw-stone);
  --bs-border-radius: 2px;
  --bs-border-radius-sm: 2px;
  --bs-border-radius-lg: 3px;
  --bs-focus-ring-color: rgba(131, 155, 135, .45);
}

/* ------------------------------------------------------------------
   Basis
------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body.site {
  margin: 0;
  font-family: var(--vw-font);
  font-size: var(--vw-step-0);
  line-height: 1.65;
  color: var(--vw-graphite);
  background: var(--vw-white);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

img, svg, video { max-width: 100%; height: auto; }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4 {
  font-family: var(--vw-font);
  color: var(--vw-forest);
  line-height: 1.15;
  margin: 0 0 .6em;
  text-wrap: balance;
}
h1, .h1 { font-size: var(--vw-step-3); font-weight: 900; letter-spacing: -.01em; }
h2, .h2 { font-size: var(--vw-step-2); font-weight: 700; }
h3, .h3 { font-size: var(--vw-step-1); font-weight: 600; }
h4, .h4 { font-size: var(--vw-step-0); font-weight: 600; }

p, ul, ol, dl, blockquote, table { margin: 0 0 1.1em; }

a {
  color: var(--vw-forest);
  text-decoration: underline;
  text-decoration-color: var(--vw-sage);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}
a:hover { text-decoration-color: var(--vw-forest); }

:focus-visible {
  outline: 3px solid var(--vw-sage);
  outline-offset: 3px;
}

strong, b { font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--vw-stone); margin: 2.5rem 0; opacity: 1; }

blockquote {
  font-size: var(--vw-step-1);
  font-style: italic;
  color: var(--vw-forest);
  border-left: 4px solid var(--vw-sage);
  padding: .25em 0 .25em 1em;
}

::selection { background: var(--vw-mint); color: var(--vw-forest); }

.container-vw {
  width: 100%;
  max-width: var(--vw-container);
  margin-inline: auto;
  padding-inline: var(--vw-space);
}

.visually-hidden-focusable:not(:focus):not(:focus-within),
.vw-sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

.skip-link {
  position: absolute; left: 1rem; top: 1rem; z-index: 1000;
  background: var(--vw-forest); color: var(--vw-white);
  padding: .6rem 1rem; text-decoration: none;
}

/* ------------------------------------------------------------------
   Kontaktleiste
------------------------------------------------------------------- */
.site-topbar {
  background: var(--vw-sand);
  color: var(--vw-graphite);
  font-size: var(--vw-step--1);
}
.site-topbar .container-vw {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: .25rem 1.5rem;
  min-height: 2.5rem; padding-block: .35rem;
}
.site-topbar ul { display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; list-style: none; margin: 0; padding: 0; }
.site-topbar a { text-decoration: none; color: inherit; }
.site-topbar a:hover { color: var(--vw-forest); text-decoration: underline; }
.site-topbar .vw-icon { width: 1em; height: 1em; vertical-align: -.15em; margin-right: .35em; color: var(--vw-sage-dark); }
.site-topbar .moduletable, .site-topbar p { margin: 0; }

@media (max-width: 47.99em) {
  .site-topbar .topbar-address, .site-topbar .topbar-hours { display: none; }
}

/* ------------------------------------------------------------------
   Kopfbereich & Navigation
------------------------------------------------------------------- */
.site-header {
  background: var(--vw-white);
  border-bottom: 1px solid var(--vw-sand);
  position: relative;
  z-index: 50;
}
.site-header.is-sticky { position: sticky; top: 0; }

.site-header .container-vw {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; min-height: 6rem; padding-block: .75rem;
}

.brand { display: block; flex: none; line-height: 0; text-decoration: none; }
/* Mindestbreite laut Styleguide: 3,5 cm ≈ 132 px */
.brand img { width: clamp(140px, 12vw + 40px, 190px); height: auto; }

.site-nav .mod-menu,
.site-nav > ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .25rem;
}
.site-nav li { position: relative; margin: 0; }
.site-nav a,
.site-nav .nav-header,
.site-nav .separator {
  display: block;
  padding: .55rem .9rem;
  font-weight: 500;
  font-size: 1.0625rem;
  color: var(--vw-forest);
  text-decoration: none;
  border-bottom: 3px solid transparent;
}
.site-nav a:hover { border-bottom-color: var(--vw-mint); }
.site-nav .current > a,
.site-nav .active > a,
.site-nav a[aria-current="page"] { border-bottom-color: var(--vw-sage); font-weight: 600; }

/* Untermenüs (Standard-Layout von mod_menu) */
.site-nav ul ul,
.site-nav .mod-menu__sub {
  list-style: none; margin: 0; padding: .4rem 0;
  background: var(--vw-white);
  border-top: 3px solid var(--vw-forest);
  box-shadow: 0 18px 30px -18px rgba(4, 54, 43, .35);
  min-width: 15rem;
  position: absolute; left: 0; top: 100%;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .15s ease, transform .15s ease, visibility .15s;
}
.site-nav li:hover > ul,
.site-nav li:focus-within > ul { opacity: 1; visibility: visible; transform: none; }
.site-nav ul ul a { border-bottom: 0; padding: .5rem 1.1rem; font-weight: 400; }
.site-nav ul ul a:hover { background: var(--vw-sand); }
.site-nav ul ul ul { left: 100%; top: -.4rem; }

.nav-toggle {
  display: none;
  appearance: none; border: 0; background: var(--vw-forest); color: var(--vw-white);
  font: inherit; font-weight: 600; font-size: 1rem;
  padding: .6rem .9rem; cursor: pointer; border-radius: 2px;
  align-items: center; gap: .5rem;
}
.nav-toggle-bars { display: inline-grid; gap: 4px; width: 20px; }
.nav-toggle-bars span { display: block; height: 2px; background: currentColor; transition: transform .2s ease, opacity .2s ease; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 61.99em) {
  .js .nav-toggle { display: inline-flex; }
  .site-header .container-vw { flex-wrap: wrap; min-height: 5rem; }
  .site-nav { flex-basis: 100%; }
  .js .site-nav { display: none; }
  .js .site-nav.is-open { display: block; }
  .site-nav .mod-menu, .site-nav > ul { flex-direction: column; align-items: stretch; gap: 0; padding-bottom: .75rem; }
  .site-nav a, .site-nav .nav-header, .site-nav .separator { border-bottom: 1px solid var(--vw-sand); padding: .8rem .25rem; }
  .site-nav .current > a, .site-nav .active > a { border-bottom-color: var(--vw-sand); box-shadow: inset 4px 0 0 var(--vw-sage); padding-left: .9rem; }
  .site-nav ul ul, .site-nav .mod-menu__sub {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border-top: 0; padding: 0 0 0 1rem; min-width: 0;
  }
  .site-nav ul ul a:hover { background: transparent; }
}

/* ------------------------------------------------------------------
   Hero – das Markenzeichen: Diagonalen aus dem Signet
------------------------------------------------------------------- */
.vw-hero {
  position: relative;
  background: var(--vw-forest);
  color: var(--vw-white);
  overflow: hidden;
  isolation: isolate;
}
.vw-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  min-height: clamp(24rem, 55vh, 36rem);
}
.vw-hero__text {
  position: relative; z-index: 2;
  align-self: center;
  padding: var(--vw-section) var(--vw-space);
  max-width: 38rem;
}
.vw-hero__claim {
  font-weight: 900;
  font-size: var(--vw-step-4);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--vw-white);
  margin: 0 0 1.25rem;
  text-wrap: balance;
}
.vw-hero__lead {
  font-size: var(--vw-step-1);
  line-height: 1.5;
  color: var(--vw-mint);
  margin: 0 0 2rem;
  max-width: 32ch;
}
.vw-hero__actions { display: flex; flex-wrap: wrap; gap: .75rem; }

.vw-hero__media {
  position: absolute; inset: 0 0 0 auto;
  width: 58%;
  z-index: 1;
  clip-path: polygon(var(--vw-slant) 0, 100% 0, 100% 100%, 0 100%);
}
.vw-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Zwei Bänder im Winkel des Signets, wie im Flyer */
.vw-hero__media::before,
.vw-hero__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
}
.vw-hero__media::before {
  background: var(--vw-forest);
  opacity: .55;
  clip-path: polygon(0 100%, 10% 100%, 46% 0, 36% 0);
}
.vw-hero__media::after {
  background: var(--vw-sage);
  opacity: .55;
  clip-path: polygon(48% 0, 62% 0, 26% 100%, 12% 100%);
}

@media (max-width: 61.99em) {
  .vw-hero__media {
    position: relative; width: 100%; height: 16rem; inset: auto;
    clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%);
    order: -1;
  }
  .vw-hero__inner { min-height: 0; }
  .vw-hero__text { padding-top: 2rem; }
}

/* Hero ohne Bild (z. B. Modul in Position "hero") */
.vw-hero--plain::after {
  content: ""; position: absolute; z-index: -1;
  right: -4rem; top: 0; bottom: 0; width: 45%;
  background:
    linear-gradient(118deg, transparent 0 40%, rgba(131,155,135,.35) 40% 52%, transparent 52% 60%, rgba(180,200,187,.18) 60% 68%, transparent 68%);
}

/* ------------------------------------------------------------------
   Buttons (eigene + Bootstrap-Abgleich)
------------------------------------------------------------------- */
.vw-btn,
.btn {
  font-family: var(--vw-font);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 2px;
}
.vw-btn {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .8rem 1.4rem;
  font-size: 1.0625rem; line-height: 1.2;
  text-decoration: none;
  border: 2px solid var(--vw-forest);
  background: var(--vw-forest); color: var(--vw-white);
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vw-btn:hover { background: var(--vw-forest-80); border-color: var(--vw-forest-80); color: var(--vw-white); }
.vw-btn--light { background: var(--vw-white); border-color: var(--vw-white); color: var(--vw-forest); }
.vw-btn--light:hover { background: var(--vw-mint); border-color: var(--vw-mint); color: var(--vw-forest); }
.vw-btn--ghost { background: transparent; color: var(--vw-forest); }
.vw-btn--ghost:hover { background: var(--vw-forest); color: var(--vw-white); }
.vw-hero .vw-btn--ghost,
.vw-on-dark .vw-btn--ghost { color: var(--vw-white); border-color: var(--vw-mint); }
.vw-hero .vw-btn--ghost:hover,
.vw-on-dark .vw-btn--ghost:hover { background: var(--vw-mint); color: var(--vw-forest); }

.btn-primary {
  --bs-btn-bg: var(--vw-forest); --bs-btn-border-color: var(--vw-forest);
  --bs-btn-hover-bg: var(--vw-forest-80); --bs-btn-hover-border-color: var(--vw-forest-80);
  --bs-btn-active-bg: var(--vw-forest-80); --bs-btn-active-border-color: var(--vw-forest-80);
  --bs-btn-disabled-bg: var(--vw-slate); --bs-btn-disabled-border-color: var(--vw-slate);
  --bs-btn-focus-shadow-rgb: 131, 155, 135;
}
.btn-secondary {
  --bs-btn-bg: var(--vw-sage-dark); --bs-btn-border-color: var(--vw-sage-dark);
  --bs-btn-hover-bg: var(--vw-forest); --bs-btn-hover-border-color: var(--vw-forest);
}
.btn-outline-primary {
  --bs-btn-color: var(--vw-forest); --bs-btn-border-color: var(--vw-forest);
  --bs-btn-hover-bg: var(--vw-forest); --bs-btn-hover-border-color: var(--vw-forest);
}
.form-control:focus, .form-select:focus {
  border-color: var(--vw-sage);
  box-shadow: 0 0 0 .2rem rgba(131, 155, 135, .35);
}

/* ------------------------------------------------------------------
   Inhaltsbereich
------------------------------------------------------------------- */
.site-breadcrumbs { background: var(--vw-white); border-bottom: 1px solid var(--vw-sand); font-size: var(--vw-step--1); }
.site-breadcrumbs .breadcrumb { margin: 0; padding: .7rem 0; background: none; }
.site-breadcrumbs a { color: var(--vw-slate); text-decoration: none; }
.site-breadcrumbs a:hover { color: var(--vw-forest); text-decoration: underline; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--vw-stone); }

.site-main { flex: 1 0 auto; padding-block: var(--vw-section); }
.site-main > .container-vw {
  display: grid; gap: calc(var(--vw-space) * 2.5);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 62em) {
  .has-sidebar .site-main > .container-vw { grid-template-columns: minmax(0, 1fr) 20rem; }
}

.site-content > * { max-width: var(--vw-measure); }
.site-content > .blog,
.site-content > .blog-featured,
.site-content > .com-content-category-blog,
.site-content > .com-content-featured,
.site-content .vw-wide,
.site-content > .vw-full,
.site-content > :has(.sp-page-builder),
.site-content > hr,
.site-content > form,
.site-content > .com-contact,
.site-content table { max-width: none; }

.page-header { margin-bottom: 1.5rem; }
.page-header h1, .page-header h2 { margin-bottom: 0; }

/* Artikel-Infos */
.article-info { font-size: var(--vw-step--1); color: var(--vw-slate); margin: 0 0 1.5rem; }
.article-info dd { display: inline-block; margin: 0 1.25rem 0 0; }
.article-info-term { display: none; }

/* Bilder in Artikeln */
.item-image, .item-page .item-image { margin: 0 0 1.75rem; }
.item-image img { border-radius: 2px; }
figure figcaption { font-size: var(--vw-step--1); color: var(--vw-slate); margin-top: .4rem; }

/* Blog / Startseiten-Beiträge */
.blog-items { display: grid; gap: 2.5rem; }
.blog-items.columns-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.blog-items.columns-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.blog-item { border-top: 3px solid var(--vw-mint); padding-top: 1.25rem; }
.blog-item h2 { font-size: var(--vw-step-1); }
.blog-item h2 a { text-decoration: none; }
.blog-item h2 a:hover { text-decoration: underline; text-decoration-color: var(--vw-sage); }
.readmore .btn { background: transparent; color: var(--vw-forest); border: 2px solid var(--vw-forest); }
.readmore .btn:hover { background: var(--vw-forest); color: var(--vw-white); }

/* Paginierung */
.pagination { --bs-pagination-color: var(--vw-forest); --bs-pagination-active-bg: var(--vw-forest); --bs-pagination-active-border-color: var(--vw-forest); --bs-pagination-hover-color: var(--vw-forest); --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(131,155,135,.35); }

/* Tabellen */
.site-content table { width: 100%; border-collapse: collapse; font-size: var(--vw-step--1); }
.site-content th, .site-content td { padding: .7rem .8rem; border-bottom: 1px solid var(--vw-stone); text-align: left; vertical-align: top; }
.site-content th { color: var(--vw-forest); font-weight: 600; }

/* Listen im Inhalt: kleine quadratische Marker wie im Flyer */
.site-content ul:not([class]), .vw-checklist {
  list-style: none; padding-left: 0;
}
.site-content ul:not([class]) > li, .vw-checklist > li {
  position: relative; padding-left: 1.25em; margin-bottom: .3em;
}
.site-content ul:not([class]) > li::before, .vw-checklist > li::before {
  content: ""; position: absolute; left: .1em; top: .62em;
  width: .42em; height: .42em; background: var(--vw-sage);
}
.vw-checklist--columns { columns: 16rem 3; column-gap: 2rem; max-width: none !important; }
.vw-checklist--columns > li { break-inside: avoid; }

/* ------------------------------------------------------------------
   Bausteine für Redakteure (Klassen im Editor / in eigenen Modulen)
------------------------------------------------------------------- */
.vw-lead { font-size: var(--vw-step-1); line-height: 1.5; color: var(--vw-forest); }

.vw-claim {
  font-weight: 900; font-size: var(--vw-step-3); line-height: 1.05;
  color: var(--vw-forest); margin: 0 0 .5em; text-wrap: balance;
}

.vw-quote {
  font-size: var(--vw-step-2); font-style: italic; font-weight: 400;
  color: var(--vw-forest); line-height: 1.3;
  border: 0; padding: 0; margin: 2rem 0;
}

.vw-box:not(:has(.sppb-addon-content)) {
  background: var(--vw-sand); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-left: 6px solid var(--vw-sage);
}
.vw-box > :last-child, .vw-box .sppb-addon-content > :last-child { margin-bottom: 0; }

.vw-panel {
  background: var(--vw-forest); color: var(--vw-white);
  padding: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.vw-panel h2, .vw-panel h3, .vw-panel a { color: var(--vw-white); }
.vw-panel a { text-decoration-color: var(--vw-mint); }
.vw-panel p { color: #e3ebe5; }
.vw-panel > :last-child { margin-bottom: 0; }

.vw-split {
  display: grid; gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  max-width: none !important;
}
.vw-split img { width: 100%; }
img.vw-image-slant, .vw-image-slant img { clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%); }
.vw-image-slant .sppb-addon-single-image-container, .vw-image-slant .sppb-addon-image-overlay { clip-path: none; }

img.vw-portrait { border-radius: 50%; aspect-ratio: 1; object-fit: cover; width: min(100%, 14rem); }

.vw-facts {
  display: grid; gap: 1.5rem 2.5rem; padding: 0; list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  max-width: none !important;
}
.vw-facts > li { padding-left: 0 !important; }
.vw-facts > li::before { display: none; }
.vw-facts h3 { margin-bottom: .35rem; font-size: var(--vw-step-0); font-weight: 700; }
.vw-facts p { margin: 0; font-size: var(--vw-step--1); }

/* ------------------------------------------------------------------
   Seitenleiste & Module
------------------------------------------------------------------- */
.site-sidebar .moduletable { margin-bottom: 2.5rem; }
.site-sidebar .moduletable > h3,
.site-sidebar .moduletable > .module-title {
  font-size: var(--vw-step-0); font-weight: 700;
  padding-bottom: .5rem; border-bottom: 3px solid var(--vw-mint); margin-bottom: 1rem;
}
.site-sidebar .mod-menu { list-style: none; padding: 0; }
.site-sidebar .mod-menu a { display: block; padding: .45rem 0; border-bottom: 1px solid var(--vw-sand); text-decoration: none; }
.site-sidebar .mod-menu .current > a { font-weight: 600; box-shadow: inset 4px 0 0 var(--vw-sage); padding-left: .75rem; }

.site-section { padding-block: var(--vw-section); }
.site-section--sand { background: var(--vw-sand); }
.site-section .container-vw > .moduletable + .moduletable { margin-top: 2.5rem; }
.module-grid {
  display: grid; gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}
.module-grid > .moduletable { margin: 0 !important; }

/* ------------------------------------------------------------------
   Fußbereich
------------------------------------------------------------------- */
.site-footer {
  position: relative;
  background: var(--vw-forest);
  color: #dfe8e2;
  font-size: var(--vw-step--1);
  overflow: hidden;
  isolation: isolate;
}
/* Signet-Schräge als ruhige Fläche hinter den Spalten */
.site-footer::before {
  content: ""; position: absolute; z-index: -1;
  top: 0; bottom: 0; right: 0; width: min(48rem, 60%);
  background: var(--vw-forest-80);
  clip-path: polygon(38% 0, 58% 0, 30% 100%, 10% 100%);
  opacity: .55;
}
.site-footer a { color: var(--vw-white); text-decoration-color: rgba(180, 200, 187, .6); }
.site-footer a:hover { text-decoration-color: var(--vw-white); }
.site-footer h2, .site-footer h3, .site-footer .footer-title {
  color: var(--vw-white); font-size: 1.0625rem; font-weight: 700; margin: 0 0 .75rem;
}
.footer-main {
  display: grid; gap: 2.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  padding-block: clamp(3rem, 2rem + 3vw, 4.5rem);
}
.footer-brand img { width: 190px; margin-bottom: 1.25rem; }
.footer-main address { font-style: normal; line-height: 1.7; }
.footer-hours { white-space: pre-line; margin: 0; }
.footer-hours em { color: var(--vw-mint); }
.footer-main ul { list-style: none; padding: 0; margin: 0; }
.footer-main li { margin-bottom: .35rem; }
.footer-bottom { border-top: 1px solid rgba(180, 200, 187, .25); }
.footer-bottom .container-vw {
  display: flex; flex-wrap: wrap; gap: .5rem 2rem; justify-content: space-between; align-items: center;
  padding-block: 1.1rem;
}
.footer-bottom p { margin: 0; }
.footer-bottom ul { list-style: none; display: flex; flex-wrap: wrap; gap: .25rem 1.5rem; margin: 0; padding: 0; }

.back-to-top {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 40;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: var(--vw-forest); color: var(--vw-white); border: 2px solid var(--vw-mint);
  border-radius: 2px; text-decoration: none;
  opacity: 0; visibility: hidden; transition: opacity .2s ease, visibility .2s;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; }


/* ==================================================================
   STARTSEITEN-SLIDER „In Bewegung“
   Folienwechsel: Bänder im Winkel des Signets (≈ 30,5°) ziehen durchs Bild.
   Unter jeder Überschrift zeichnet sich ein Pinselstrich – wie ein Stift,
   der eine Linie zieht (Grafo- und Feinmotorik).
=================================================================== */
.vw-slider {
  --vw-angle: -30.5deg;
  position: relative;
  background: var(--vw-forest);
  color: var(--vw-mint);
  overflow: hidden;
  isolation: isolate;
}
/* ruhige Bänder im Hintergrund */
.vw-slider::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; left: 0; width: min(40rem, 55%);
  background: var(--vw-forest-80); opacity: .6;
  clip-path: polygon(52% 0, 68% 0, 32% 100%, 16% 100%);
}

.vw-slider__inner { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.vw-slider__track { display: grid; touch-action: pan-y; }

.vw-slide {
  grid-area: 1 / 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 4vw, 4.5rem);
  align-items: center;
  opacity: 0; visibility: hidden;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
.vw-slide.is-active {
  opacity: 1; visibility: visible;
  transition: opacity .55s ease .3s, visibility 0s;
}

.vw-slide__title {
  font-weight: 900;
  font-size: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  color: var(--vw-white);
  margin: 0;
  text-wrap: balance;
}
.vw-slide__stroke {
  display: block;
  width: min(100%, 15rem); height: 1.25rem;
  margin: .5rem 0 1.25rem;
  overflow: visible;
}
.vw-slide__stroke path {
  fill: none; stroke: var(--vw-sage); stroke-width: 5; stroke-linecap: round;
  vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.vw-slide__lead {
  font-size: var(--vw-step-1); line-height: 1.5;
  color: var(--vw-mint); margin: 0 0 1.75rem; max-width: 30ch;
}
.vw-slide__actions { margin: 0; }

.vw-slide__media {
  margin: 0;
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: var(--vw-forest-80);
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0 100%);
}
.vw-slide__media img { width: 100%; height: 100%; object-fit: cover; display: block; transform-origin: 60% 50%; }

/* Bewegung in der aktiven Folie */
.vw-slide.is-active .vw-slide__title,
.vw-slide.is-active .vw-slide__lead,
.vw-slide.is-active .vw-slide__actions { animation: vw-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.vw-slide.is-active .vw-slide__title   { animation-delay: .35s; }
.vw-slide.is-active .vw-slide__lead    { animation-delay: .5s; }
.vw-slide.is-active .vw-slide__actions { animation-delay: .65s; }
.vw-slide.is-active .vw-slide__stroke path { animation: vw-draw 1.1s cubic-bezier(.45, .05, .25, 1) .8s forwards; }
.vw-slide.is-active .vw-slide__media img { animation: vw-drift calc(var(--vw-interval, 7s) + 1.5s) linear both; }

@keyframes vw-rise  { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes vw-draw  { to { stroke-dashoffset: 0; } }
@keyframes vw-drift { from { transform: scale(1.12) translateX(2.5%); } to { transform: scale(1.02) translateX(0); } }

/* Wechsel: drei Bänder ziehen im Signet-Winkel durch */
.vw-slider__sweep { position: absolute; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; display: none; }
.vw-slider.is-sweeping .vw-slider__sweep { display: block; }
.vw-slider__sweep span {
  position: absolute; top: -10%; bottom: -10%; left: 0;
  width: 22%;
  transform: translateX(-200%) skewX(var(--vw-angle));
}
.vw-slider__sweep span:nth-child(1) { background: var(--vw-sage); }
.vw-slider__sweep span:nth-child(2) { background: var(--vw-mint); width: 9%; }
.vw-slider__sweep span:nth-child(3) { background: var(--vw-forest-80); width: 30%; }
.vw-slider.is-sweeping .vw-slider__sweep span { animation: vw-sweep-wide 1.15s cubic-bezier(.65, 0, .35, 1) both; }
.vw-slider.is-sweeping .vw-slider__sweep span:nth-child(2) { animation-name: vw-sweep-narrow; animation-delay: .07s; }
.vw-slider.is-sweeping .vw-slider__sweep span:nth-child(3) { animation-delay: .14s; }
/* Strecke in Bandbreiten: breite Bänder 22–30 %, schmales Band 9 % */
@keyframes vw-sweep-wide {
  from { transform: translateX(-200%) skewX(var(--vw-angle)); }
  to   { transform: translateX(560%) skewX(var(--vw-angle)); }
}
@keyframes vw-sweep-narrow {
  from { transform: translateX(-600%) skewX(var(--vw-angle)); }
  to   { transform: translateX(1350%) skewX(var(--vw-angle)); }
}

/* Steuerung */
.vw-slider__controls {
  display: flex; align-items: center; gap: .5rem;
  margin-top: clamp(1.5rem, 1rem + 2vw, 2.5rem);
}
.vw-slider__dots { display: flex; gap: .25rem; margin-inline: .25rem auto; flex: 1 1 auto; min-width: 0; }
.vw-slider__dot {
  appearance: none; border: 0; background: none; cursor: pointer;
  flex: 0 1 3.25rem; min-width: 1.75rem; height: 2.75rem; padding: 0 .25rem;
  display: grid; align-items: center;
}
.vw-slider__bar {
  display: block; height: .45rem; position: relative; overflow: hidden;
  background: rgba(180, 200, 187, .28);
  transform: skewX(var(--vw-angle));
}
.vw-slider__dot:hover .vw-slider__bar { background: rgba(180, 200, 187, .5); }
.vw-slider__progress {
  position: absolute; inset: 0; background: var(--vw-mint);
  transform: scaleX(0); transform-origin: left center;
}
.vw-slider__dot.is-done .vw-slider__progress { transform: scaleX(1); background: rgba(180, 200, 187, .55); }
.vw-slider__dot.is-active .vw-slider__progress { animation: vw-progress var(--vw-interval, 7s) linear forwards; }
@keyframes vw-progress { to { transform: scaleX(1); } }
.vw-slider.no-autoplay .vw-slider__dot.is-active .vw-slider__progress { animation: none; transform: scaleX(1); }

.vw-slider__btn {
  appearance: none; cursor: pointer;
  width: 2.75rem; height: 2.75rem; display: grid; place-items: center;
  background: transparent; color: var(--vw-white);
  border: 2px solid rgba(180, 200, 187, .55); border-radius: 2px;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.vw-slider__btn:hover { background: var(--vw-mint); border-color: var(--vw-mint); color: var(--vw-forest); }
.vw-slider__btn svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.vw-slider__btn .icon-play path { fill: currentColor; stroke-width: 1.5; }
.vw-slider__pause .icon-play { display: none; }
.vw-slider.is-user-paused .vw-slider__pause .icon-pause { display: none; }
.vw-slider.is-user-paused .vw-slider__pause .icon-play { display: block; }

/* Anhalten: alle laufenden Bewegungen einfrieren */
.vw-slider.is-paused .vw-slider__progress,
.vw-slider.is-paused .vw-slide.is-active .vw-slide__media img { animation-play-state: paused; }

/* ohne JavaScript: nur die erste Folie, keine Steuerung */
html:not(.js) .vw-slider__controls { display: none; }

@media (max-width: 61.99em) {
  .vw-slide { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; }
  .vw-slide__media {
    order: -1; aspect-ratio: 16 / 10;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
    margin-inline: calc(var(--vw-space) * -1);
  }
  .vw-slider__inner { padding-top: 0; }
}

/* „Bewegung reduzieren“: keine Fahrten, Zooms oder Bänder; Strich steht sofort */
@media (prefers-reduced-motion: reduce) {
  .vw-slider__sweep { display: none; }
  .vw-slide, .vw-slide.is-active { transition: opacity .2s ease; }
  .vw-slide.is-active .vw-slide__title,
  .vw-slide.is-active .vw-slide__lead,
  .vw-slide.is-active .vw-slide__actions,
  .vw-slide.is-active .vw-slide__media img { animation: none; }
  .vw-slide__stroke path, .vw-slide.is-active .vw-slide__stroke path { animation: none; stroke-dashoffset: 0; }
  .vw-slider__dot.is-active .vw-slider__progress { animation: none; transform: scaleX(1); }
}

/* ---------- Effekt-Ebene ---------- */
.vw-slide__body { position: relative; z-index: 3; }
.vw-slider__fx {
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  pointer-events: none; opacity: 0; transition: opacity .45s ease;
}
.vw-slider__fx.is-on { opacity: 1; }
.vw-slider__controls { position: relative; z-index: 6; }

/* ---------- Layout „wide“: großes Bild bis zum Rand ---------- */
.vw-slider--wide,
.vw-slider--cover {
  display: flex; flex-direction: column;
  min-height: clamp(32rem, 76vh, 48rem);
}
.vw-slider--wide .vw-slider__inner,
.vw-slider--cover .vw-slider__inner {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
}
.vw-slider--wide .vw-slide,
.vw-slider--cover .vw-slide { grid-template-columns: minmax(0, 1fr); }

.vw-slider--wide .vw-slide__body { max-width: min(36rem, 44%); }
.vw-slider--wide .vw-slide__media {
  position: absolute; top: 0; bottom: 0; right: 0; z-index: 1;
  width: 60%; aspect-ratio: auto;
  clip-path: polygon(var(--vw-slant) 0, 100% 0, 100% 100%, 0 100%);
}
/* Bänder über dem Foto wie im Flyer */
.vw-slider--wide .vw-slide__media::before,
.vw-slider--wide .vw-slide__media::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
}
.vw-slider--wide .vw-slide__media::before {
  background: var(--vw-forest); opacity: .5;
  clip-path: polygon(0 100%, 9% 100%, 44% 0, 35% 0);
}
.vw-slider--wide .vw-slide__media::after {
  background: var(--vw-sage); opacity: .5;
  clip-path: polygon(47% 0, 59% 0, 25% 100%, 13% 100%);
}

/* ---------- Layout „cover“: vollflächiges Bild ---------- */
.vw-slider--cover .vw-slide__body { max-width: 36rem; }
.vw-slider--cover .vw-slide__media {
  position: absolute; inset: 0; z-index: 1; margin: 0;
  width: auto; aspect-ratio: auto; clip-path: none;
}
.vw-slider--cover .vw-slide__media::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(100deg, rgba(4, 54, 43, .94) 0%, rgba(4, 54, 43, .84) 34%, rgba(4, 54, 43, .35) 68%, rgba(4, 54, 43, .15) 100%);
}
.vw-slider--cover .vw-slide__lead { color: #e3ebe5; }
.vw-slider--cover::before { z-index: 2; opacity: .35; }

/* ---------- Übergang „wipe“: neue Folie wird schräg aufgedeckt ---------- */
.vw-slider[data-transition="wipe"] .vw-slide { opacity: 1; transition: none; }
.vw-slider[data-transition="wipe"] .vw-slide.is-leaving { visibility: visible; z-index: 1; }
.vw-slider[data-transition="wipe"] .vw-slide.is-active {
  z-index: 2; transition: none;
  animation: vw-wipe 1s cubic-bezier(.7, 0, .3, 1) backwards;
}
@keyframes vw-wipe {
  from { clip-path: polygon(-90% -60%, -90% -60%, -160% 160%, -160% 160%); }
  to   { clip-path: polygon(-90% -60%, 260% -60%, 190% 160%, -160% 160%); }
}

/* ---------- Überschrift: Buchstabe für Buchstabe ---------- */
.vw-word { display: inline-block; white-space: nowrap; }
.vw-char { display: inline-block; }
.vw-slider[data-text="letters"] .vw-slide.is-active .vw-slide__title { animation: none; }
.vw-slider[data-text="letters"] .vw-slide.is-active .vw-char {
  animation: vw-char .65s cubic-bezier(.2, .8, .2, 1.2) both;
  animation-delay: calc(.35s + var(--i) * 32ms);
}
@keyframes vw-char {
  from { opacity: 0; transform: translateY(.55em) rotate(10deg); }
  to   { opacity: 1; transform: none; }
}

/* ---------- Überschrift: schräg aufdecken ---------- */
.vw-slider[data-text="reveal"] .vw-slide.is-active .vw-slide__title {
  animation: vw-reveal .95s cubic-bezier(.7, 0, .3, 1) .3s both;
}
@keyframes vw-reveal {
  from { clip-path: polygon(0 -20%, 0 -20%, -25% 120%, -25% 120%); }
  to   { clip-path: polygon(0 -20%, 125% -20%, 100% 120%, -25% 120%); }
}

@media (max-width: 61.99em) {
  .vw-slider--wide, .vw-slider--cover { min-height: 0; }
  .vw-slider--wide .vw-slide__body { max-width: none; }
  .vw-slider--wide .vw-slide__media {
    position: relative; top: auto; bottom: auto; right: auto;
    width: auto; aspect-ratio: 16 / 10;
    clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%);
  }
  .vw-slider--cover { min-height: clamp(34rem, 88vh, 44rem); }
  .vw-slider--cover .vw-slider__inner { justify-content: flex-end; }
  .vw-slider--cover .vw-slide__media::after {
    background: linear-gradient(0deg, rgba(4, 54, 43, .96) 0%, rgba(4, 54, 43, .85) 50%, rgba(4, 54, 43, .25) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .vw-slider__fx { display: none; }
  .vw-slider[data-transition="wipe"] .vw-slide.is-active,
  .vw-slider[data-text] .vw-slide.is-active .vw-slide__title,
  .vw-slider[data-text] .vw-slide.is-active .vw-char { animation: none; }
  .vw-slider[data-transition="wipe"] .vw-slide:not(.is-active) { visibility: hidden; }
}

/* ==================================================================
   SP PAGE BUILDER (Pro) – Integration
   Seiten aus dem Builder laufen in voller Breite (.site-main--builder).
   Builder-Inhalte in Beiträgen (Artikel-Integration) werden per :has() erkannt.
=================================================================== */
.site-main--builder { padding-block: 0; }
.site-main--builder .sp-page-builder > .page-header {
  max-width: var(--vw-container); margin: 0 auto; padding: clamp(2rem, 1.5rem + 2vw, 3.5rem) var(--vw-space) 0;
}
.site-main--builder > .builder-messages:has(#system-message-container:empty) { display: none; }
.site-main--builder > .builder-messages,
.site-main--builder > .builder-modules { padding-block: 1.5rem; }

/* Containerbreite des Builders an Kopf- und Fußbereich angleichen */
.sp-page-builder .sppb-row-container {
  width: 100%;
  max-width: var(--vw-container);
  padding-inline: var(--vw-space);
}

/* Schrift & Farben vererben */
.sp-page-builder,
.sp-page-builder .sppb-addon-content { font-family: var(--vw-font); color: inherit; }
.sp-page-builder .sppb-addon-title { font-family: var(--vw-font); }

/* Links: unterstrichen nur im Fließtext, nicht bei Boxen, Icons, Buttons */
.sp-page-builder a { text-decoration: none; }
.sp-page-builder .sppb-addon-text-block a,
.sp-page-builder .sppb-addon-content p a {
  text-decoration: underline;
  text-decoration-color: var(--vw-sage);
  text-decoration-thickness: 2px;
  text-underline-offset: .2em;
}

/* Listen im Textblock wie im Flyer */
.sp-page-builder .sppb-addon-text-block ul:not([class]) { list-style: none; padding-left: 0; }
.sp-page-builder .sppb-addon-text-block ul:not([class]) > li { position: relative; padding-left: 1.25em; margin-bottom: .3em; }
.sp-page-builder .sppb-addon-text-block ul:not([class]) > li::before {
  content: ""; position: absolute; left: .1em; top: .62em; width: .42em; height: .42em; background: var(--vw-sage);
}

/* Buttons: Standard-Stile des Builders in Hausfarben
   (eigene Farben, die im Button-Addon eingestellt werden, haben weiterhin Vorrang) */
.sp-page-builder .sppb-btn {
  font-family: var(--vw-font); font-weight: 600; border-radius: 2px;
  text-decoration: none; transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sp-page-builder .sppb-btn-primary { background-color: var(--vw-forest); border-color: var(--vw-forest); color: var(--vw-white); }
.sp-page-builder .sppb-btn-primary:hover,
.sp-page-builder .sppb-btn-primary:focus { background-color: var(--vw-forest-80); border-color: var(--vw-forest-80); color: var(--vw-white); }
.sp-page-builder .sppb-btn-secondary { background-color: var(--vw-sage-dark); border-color: var(--vw-sage-dark); color: var(--vw-white); }
.sp-page-builder .sppb-btn-secondary:hover { background-color: var(--vw-forest); border-color: var(--vw-forest); color: var(--vw-white); }
.sp-page-builder .sppb-btn-default { background-color: transparent; border: 2px solid var(--vw-forest); color: var(--vw-forest); }
.sp-page-builder .sppb-btn-default:hover { background-color: var(--vw-forest); color: var(--vw-white); }
.sp-page-builder .sppb-btn-link { color: var(--vw-forest); text-decoration: underline; text-decoration-color: var(--vw-sage); }

/* Formulare (Kontaktformular-Addon) */
.sp-page-builder .sppb-form-control { border-radius: 2px; border-color: var(--vw-stone); font-family: var(--vw-font); }
.sp-page-builder .sppb-form-control:focus { border-color: var(--vw-sage); box-shadow: 0 0 0 .2rem rgba(131, 155, 135, .35); outline: 0; }

/* Akkordeon & Tabs */
.sp-page-builder .sppb-panel-heading { font-weight: 600; color: var(--vw-forest); }
.sp-page-builder .sppb-nav-tabs > li.active > a,
.sp-page-builder .sppb-nav-tabs > li > a:hover { color: var(--vw-forest); border-bottom-color: var(--vw-sage); }

/* ------------------------------------------------------------------
   Markenklassen für den Builder
   Abschnitt → Einstellungen → „CSS-Klasse“ bzw. Addon → Erweitert → „CSS-Klasse“
------------------------------------------------------------------- */

/* Abschnittsfarben */
.vw-section-forest { background-color: var(--vw-forest); color: #e3ebe5; }
.vw-section-forest h1, .vw-section-forest h2, .vw-section-forest h3, .vw-section-forest h4,
.vw-section-forest .sppb-addon-title { color: var(--vw-white); }
.vw-section-forest a { color: var(--vw-white); }
.vw-section-forest .sppb-btn-primary { background-color: var(--vw-white); border-color: var(--vw-white); color: var(--vw-forest); }
.vw-section-forest .sppb-btn-primary:hover { background-color: var(--vw-mint); border-color: var(--vw-mint); color: var(--vw-forest); }
.vw-section-forest .sppb-btn-default { border-color: var(--vw-mint); color: var(--vw-white); }
.vw-section-forest .sppb-btn-default:hover { background-color: var(--vw-mint); color: var(--vw-forest); }

.vw-section-sand { background-color: var(--vw-sand); }
.vw-section-mint { background-color: var(--vw-mint); }

/* Diagonale Bänder im Winkel des Signets (wie im Flyer) */
.vw-bands, .vw-hero-section { position: relative; overflow: hidden; isolation: isolate; }
.vw-bands::before, .vw-hero-section::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 0; width: min(48rem, 60%);
  background: var(--vw-sage); opacity: .28;
  clip-path: polygon(38% 0, 58% 0, 30% 100%, 10% 100%);
}
.vw-bands::after, .vw-hero-section::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 0; bottom: 0; right: 0; width: min(48rem, 60%);
  background: var(--vw-mint); opacity: .18;
  clip-path: polygon(64% 0, 76% 0, 48% 100%, 36% 100%);
}

/* Startbereich im Builder: dunkelgrün, Claim groß, Bänder */
.vw-hero-section { background-color: var(--vw-forest); color: var(--vw-mint); }
.vw-hero-section h1, .vw-hero-section h2,
.vw-hero-section .sppb-addon-title { color: var(--vw-white); }
.vw-hero-section .sppb-addon-text-block,
.vw-hero-section p { font-size: var(--vw-step-1); line-height: 1.5; color: var(--vw-mint); }
.vw-hero-section .sppb-btn-primary { background-color: var(--vw-white); border-color: var(--vw-white); color: var(--vw-forest); }
.vw-hero-section .sppb-btn-primary:hover { background-color: var(--vw-mint); border-color: var(--vw-mint); }
.vw-hero-section .sppb-btn-default { border-color: var(--vw-mint); color: var(--vw-white); }
.vw-hero-section .sppb-btn-default:hover { background-color: var(--vw-mint); color: var(--vw-forest); }

/* Claim in Jost Black (Überschrift-Addon) */
.vw-claim .sppb-addon-title,
.sppb-addon-title.vw-claim {
  font-weight: 900; font-size: var(--vw-step-4); line-height: 1.02; letter-spacing: -.015em; text-wrap: balance;
}
.vw-lead .sppb-addon-content { font-size: var(--vw-step-1); line-height: 1.5; color: var(--vw-forest); }
.vw-section-forest .vw-lead .sppb-addon-content,
.vw-hero-section .vw-lead .sppb-addon-content { color: var(--vw-mint); }

/* Bild-Addon: rundes Porträt */
.vw-portrait img { border-radius: 50%; aspect-ratio: 1; object-fit: cover; }

/* Text mit Salbei-Kante (Textblock-Addon) */
.vw-box .sppb-addon-content { background: var(--vw-sand); padding: clamp(1.25rem, 1rem + 1.5vw, 2rem); border-left: 6px solid var(--vw-sage); }

@media (max-width: 47.99em) {
  .vw-bands::before, .vw-bands::after,
  .vw-hero-section::before, .vw-hero-section::after { width: 100%; opacity: .15; }
}

/* ------------------------------------------------------------------
   Systemseiten (Fehler / Offline)
------------------------------------------------------------------- */
.vw-system {
  min-height: 100vh; display: grid; place-items: center;
  background: var(--vw-sand); padding: var(--vw-space);
}
.vw-system__card {
  background: var(--vw-white); max-width: 34rem; width: 100%;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-top: 6px solid var(--vw-forest);
}
.vw-system__card img.logo { width: 180px; margin-bottom: 2rem; }
.vw-system__code { font-weight: 900; font-size: var(--vw-step-4); color: var(--vw-mint); line-height: 1; margin: 0 0 .5rem; }

/* ------------------------------------------------------------------
   Druck
------------------------------------------------------------------- */
@media print {
  .vw-slider__controls, .vw-slider__sweep, .vw-slider__fx, .vw-slide:not(.is-active),
  .vw-hero-section::before, .vw-hero-section::after, .vw-bands::before, .vw-bands::after,
  .site-topbar, .site-nav, .nav-toggle, .back-to-top, .site-sidebar, .vw-hero__media { display: none !important; }
  .vw-hero { background: none; color: #000; }
  .vw-hero__claim, .vw-hero__lead { color: #000; }
  .site-footer { background: none; color: #000; }
  .site-footer::before { display: none; }
  .site-footer a { color: #000; }
  a { text-decoration: none; }
}