/* ==========================================================================
   VIVVIJA SOLUTIONS — Website
   Alle Styles unter .vv-page gekapselt (vv- Prefix), analog zum .adt-/.ads-
   Muster der beiden Format-Seiten. Das schützt die Styles, falls die Seite
   später doch einmal in ein anderes System (z.B. WordPress) eingebettet
   werden sollte.

   Aufbau dieser Datei (zum schnellen Springen):
   1. Fonts (selbst gehostet)
   2. Grundlagen & Farb-/Schrift-Variablen
   3. Wiederkehrende Bausteine (Eyebrow, Überschriften, Links, Container)
   4. Nav
   5. Hero
   6. Die Klammer
   7. Die Formate
   8. Zur Person
   9. Woher der Name kommt
   10. CTA-Zeile
   11. Kontakt
   12. Footer
   13. Impressum/Datenschutz (einfache Unterseiten)
   ========================================================================== */

/* -------------------- 1. Fonts (selbst gehostet, kein Google-CDN) -------------------- */
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/barlow-semi-condensed-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/barlow-semi-condensed-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Barlow Semi Condensed';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../assets/fonts/barlow-semi-condensed-700.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-400.woff2') format('woff2');
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/ibm-plex-mono-500.woff2') format('woff2');
}
/* Inter wird als eine einzige Variable-Font-Datei ausgeliefert (spart Ladezeit) -
   vier Gewichte, eine Datei, genau wie Google es selbst so bündelt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300;
  font-display: swap;
  src: url('../assets/fonts/inter-variable-300-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fonts/inter-variable-300-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fonts/inter-variable-300-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('../assets/fonts/inter-variable-300-600.woff2') format('woff2');
}

/* -------------------- 2. Grundlagen & Variablen -------------------- */
.vv-page {
  /* Styleguide-Farben (vivvija-styleguide.md Abschnitt 05) */
  --vv-creme-hell: #F5F0EB;
  --vv-creme: #EFE7DA;
  --vv-grund: #DAD1C2;
  --vv-anthrazit: #2C2C2C;
  --vv-gold: #AA9267;
  --vv-graubeige: #8C8272;
  --vv-gold-link: #8C6F42;

  /* Zusatztöne aus dem abgenommenen Entwurf: helle Textfarben für die
     graubeige Fläche (Klammer, CTA) und dunklere Zwischentöne für Fließtext
     auf Creme. Keine neuen Farben - 1:1 aus dem Entwurf übernommen. */
  --vv-text-on-graubeige: #4d473d;
  --vv-heading-on-graubeige: #F7F2E9;
  --vv-sub-on-graubeige: #ece3d2;
  --vv-label-on-graubeige: #e6ddcd;
  --vv-accent-on-graubeige: #F2E4C8;
  --vv-muted-label: #9a917d;
  --vv-station-label: #a89f8b;
  --vv-station-text: #3f3a30;
  --vv-station-desc: #7a715f;
  --vv-footer-muted: #b3ab99;

  background: var(--vv-creme-hell);
  color: var(--vv-anthrazit);
  font-family: 'Inter', sans-serif;
  font-weight: 300;
  line-height: 1.65;
  overflow-x: hidden;
}
.vv-page *, .vv-page *::before, .vv-page *::after { box-sizing: border-box; }
.vv-page ::selection { background: var(--vv-gold); color: var(--vv-creme-hell); }
/* :where() hat keine eigene Spezifitaet - so kann diese Grund-Regel
   spaeter definierte Klassen (z.B. .vv-klammer__lead mit margin:0 auto
   zum Zentrieren) nicht mehr ueberstimmen. Ohne :where() gewinnt sonst
   diese Regel gegen einzelne Klassen, weil "Klasse+Element" staerker
   zaehlt als "nur Klasse" - genau das hat die zentrierten Absaetze
   links kleben lassen. */
.vv-page :where(h1, h2, h3, p, dl, dt, dd, ul) { margin: 0; padding: 0; }
.vv-page :where(img) { max-width: 100%; display: block; }
.vv-page a { text-decoration: none; }

/* -------------------- 3. Wiederkehrende Bausteine -------------------- */
.vv-container { max-width: 780px; margin: 0 auto; padding: 0 24px; }
@media (min-width: 780px) { .vv-container { padding: 0 40px; } }

.vv-eyebrow {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--vv-muted-label);
  margin-bottom: 22px;
}

.vv-heading {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--vv-anthrazit);
  font-size: clamp(1.5rem, 4.5vw, 1.9rem);
  line-height: 1.15;
}

.vv-link {
  color: var(--vv-gold-link);
  border-bottom: 1px solid rgba(170,146,103,.5);
  padding-bottom: 1px;
  transition: color .2s, border-color .2s;
  display: inline-block;
  min-height: 44px;
  line-height: 44px;
}
.vv-link:hover { color: #6E5836; border-color: #6E5836; }

.vv-rule {
  width: 54px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--vv-gold), transparent);
  margin: 0 auto;
}

/* Reveal-on-scroll: ohne die Klasse "js" am <html> (per Inline-Script im
   <head> gesetzt) bleibt alles normal sichtbar - JS ist nur ein Bonus,
   nie Voraussetzung fuer Sichtbarkeit (gleiches Muster wie bei den beiden
   Format-Seiten). */
html.js .vv-page [data-reveal] { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
html.js .vv-page [data-reveal].is-visible { opacity: 1; transform: translateY(0); }

/* -------------------- 4. Nav -------------------- */
.vv-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(140,130,114,.22);
  background: var(--vv-creme-hell);
  flex-wrap: wrap;
  row-gap: 10px;
}
@media (min-width: 640px) { .vv-nav { padding: 24px 40px; } }
.vv-nav__brand {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .22em;
  font-size: 17px;
  color: var(--vv-anthrazit);
}
/* Rein rechnerisch sind Logo-Text und Nav-Links zentriert, aber das
   kleine "j" mit seiner Unterlaenge zieht "vivvija" optisch nach unten
   (die Nav-Links sind komplett in Versalien, ohne Unterlaengen).
   Kleiner manueller Ausgleich nach Augenmass - bewusst nur auf den Text,
   nicht auf .vv-nav__brand selbst: das mobile "v"-Icon hat dieses
   Problem nicht und sass dadurch selbst 2px zu hoch. */
.vv-nav__brand-text { display: inline-block; transform: translateY(-2px); }
.vv-nav__brand-icon { display: none; }
/* Mobil: die grosse "vivvija"-Wortmarke steht im Hero direkt darunter -
   die kleine Nav-Version daneben ist dort nur doppelt. Deshalb auf
   Mobil zunaechst nichts anzeigen, und erst nach dem Wegscrollen vom
   Hero dezent das kleine "v"-Bildzeichen einblenden (JS in main.js
   setzt dafuer "brand-visible" auf #vv-nav, sobald der Hero-Schriftzug
   nicht mehr im Bild ist). Desktop/Tablet bleiben unveraendert - dort
   bleibt der volle Schriftzug immer sichtbar wie bisher. */
@media (max-width: 639px) {
  /* Die unsichtbare (opacity:0) Wortmarke belegte trotzdem ihre volle
     Breite in der Flex-Zeile und drueckte die Links bei genau dieser
     Viewport-Breite (375px) um weniger als 1px ueber den verfuegbaren
     Platz - das reichte, um flex-wrap auszuloesen und die Nav auf zwei
     Zeilen (119px hoch) zu zwingen. Fix: Wortmarke aus dem Flex-Fluss
     rausnehmen (position:absolute, .vv-nav ist bereits position:fixed
     und damit ihr containing block), damit sie nie mit den Links um den
     Platz konkurriert, egal ob gerade sichtbar oder nicht. */
  /* Mit beiden auf voller Groesse (Marke 14px, Rand 20px) beruehrten sich
     Marke und Links ohne jeden Abstand - bei 375px war schlicht kein Platz
     fuer eine Luecke uebrig. Etwas kompakter (kleinere Marke, knapperer
     Seitenrand, nur mobil) schafft echten Raum dazwischen. */
  .vv-nav { padding-left: 16px; padding-right: 16px; }
  .vv-nav__brand {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
  }
  .vv-nav__links { gap: 6px; margin-left: auto; }
  .vv-nav__links a { font-size: 10px; letter-spacing: .12em; }
  .vv-nav__brand-text {
    display: inline-block;
    font-size: 12px;
    transform: translateY(-3.2px);
    opacity: 0;
    transition: opacity .3s ease;
  }
  #vv-nav.brand-visible .vv-nav__brand-text { opacity: 1; }
  .vv-nav__brand-icon { display: none; }
}
.vv-nav__links {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
}
@media (min-width: 640px) { .vv-nav__links { gap: 34px; } }
.vv-nav__links a {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f6857;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}
.vv-nav__links a:hover { color: var(--vv-anthrazit); }

/* "Zurueck zur Startseite" auf Impressum/Datenschutz (Nav-Slot und am
   Ende des Inhalts): kein Pfeil im Text, kein dauerhafter Unterstrich -
   nur beim Hover, ueber text-decoration statt border-bottom, damit der
   Strich direkt an der Textzeile liegt statt an der Tap-Flaeche. */
.vv-back-link {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #6f6857;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
  transition: color .2s;
}
.vv-back-link:hover {
  color: var(--vv-anthrazit);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* -------------------- 5. Hero -------------------- */
.vv-hero { padding: 90px 24px 70px; text-align: center; }
@media (min-width: 640px) { .vv-hero { padding: 130px 40px 110px; } }
.vv-hero__kicker {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--vv-muted-label);
  margin-bottom: 34px;
}
@media (min-width: 640px) { .vv-hero__kicker { font-size: 11px; margin-bottom: 46px; } }

/* Logo-Lockup: Live-Text statt SVG, damit die Laufweite (fix, per
   Styleguide) auf jeder Bildschirmgroesse exakt gleich bleibt - es
   skaliert nur die Schriftgroesse per clamp(), NIE das letter-spacing. */
.vv-lockup__viv {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .30em;
  font-size: clamp(2.4rem, 12vw, 4.75rem);
  line-height: 1;
  color: var(--vv-anthrazit);
}
.vv-lockup__sol {
  font-family: 'IBM Plex Mono', monospace;
  font-size: clamp(9px, 2.6vw, 13px);
  letter-spacing: .54em;
  text-transform: lowercase;
  color: var(--vv-gold);
  margin-top: 18px;
}
@media (min-width: 640px) { .vv-lockup__sol { margin-top: 20px; } }

.vv-hero__rule { margin: 46px auto; }
@media (min-width: 640px) { .vv-hero__rule { margin: 62px auto; } }

.vv-hero h1 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  text-transform: uppercase;
  color: var(--vv-anthrazit);
  font-size: clamp(1.7rem, 6vw, 2.75rem);
  line-height: 1.18;
  letter-spacing: .005em;
}
/* Nur auf schmalen Mobil-Breiten: "Manchmal braucht es jemanden." bricht
   bei 1.7rem (der clamp()-Untergrenze) mitten im Satz um. Eigener,
   flacherer clamp() nur fuer Mobil: skaliert mit der Bildschirmbreite
   (bleibt auf sehr schmalen Handys einzeilig, wird auf saemtlichen
   gaengigen Handy-Breiten ab ca. 390px schon wieder genauso gross wie
   die normale Untergrenze) - Desktop/Tablet bleiben beim normalen
   clamp() oben komplett unveraendert. */
@media (max-width: 639px) {
  .vv-hero h1 { font-size: clamp(1.25rem, 5.6vw, 1.7rem); }
}
.vv-hero h1 .vv-muted { color: var(--vv-graubeige); }
.vv-hero h1 .vv-bold { font-weight: 700; }

/* -------------------- 6. Die Klammer -------------------- */
.vv-klammer {
  padding: 80px 24px;
  background: var(--vv-graubeige);
  text-align: center;
}
@media (min-width: 640px) { .vv-klammer { padding: 120px 64px; } }
.vv-klammer .vv-eyebrow { color: var(--vv-label-on-graubeige); }
.vv-klammer__lead {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  color: var(--vv-heading-on-graubeige);
  font-size: clamp(1.35rem, 4.5vw, 2.06rem);
  line-height: 1.42;
  max-width: 680px;
  margin: 0 auto;
  letter-spacing: .005em;
}
.vv-klammer__sub {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  color: var(--vv-accent-on-graubeige);
  font-size: clamp(1.05rem, 3vw, 1.44rem);
  letter-spacing: .02em;
  margin: 28px auto 0;
}
/* Der bewusste Zeilenumbruch vor "Im Betrieb..." ist nur am Desktop
   gewuenscht. Auf Mobil wuerde er sonst "haben." als einsames Wort
   auf eine eigene Zeile stellen - dort lieber natuerlich umbrechen
   lassen. */
.vv-klammer__break { display: none; }
@media (min-width: 640px) {
  .vv-klammer__break { display: inline; }
}

/* -------------------- 7. Die Formate -------------------- */
.vv-section { padding: 80px 0; }
@media (min-width: 640px) { .vv-section { padding: 110px 0; } }
.vv-section__intro { text-align: center; margin-bottom: 44px; }
@media (min-width: 640px) { .vv-section__intro { margin-bottom: 60px; } }

.vv-formate-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 48px;
}
@media (min-width: 720px) {
  .vv-formate-grid { grid-template-columns: 1fr 1px 1fr; gap: 0; align-items: stretch; }
}
.vv-format {
  padding: 0 8px;
  text-align: center;
}
@media (min-width: 720px) { .vv-format { padding: 8px 48px; } }
.vv-format__icon { height: 40px; display: flex; align-items: center; justify-content: center; margin-bottom: 18px; }
.vv-format__icon img { height: 100%; width: auto; }
.vv-format__name {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: lowercase;
  letter-spacing: .16em;
  font-size: 24px;
  color: var(--vv-anthrazit);
}
.vv-format__text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--vv-text-on-graubeige);
  margin: 16px auto 22px;
  max-width: 300px;
}
.vv-formate-divider {
  display: none;
}
@media (min-width: 720px) {
  .vv-formate-divider {
    display: block;
    background: linear-gradient(to bottom, transparent, rgba(140,130,114,.4) 20%, rgba(140,130,114,.4) 80%, transparent);
  }
}

.vv-formate-more {
  margin-top: 48px;
  padding: 26px 24px;
  border: 1px dashed rgba(140,130,114,.55);
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}
/* Eigener, hoeherer Breakpoint (statt der sonst ueblichen 640px): das
   Reihen-Layout braucht mehr Platz, damit der erste Satz nicht doch
   noch mitten im Wort umbricht (Label + Text nebeneinander brauchen
   mehr Raum als z.B. eine zweispaltige Karte). Darunter bleibt die
   gestapelte Spalten-Fassung aktiv, die genug Breite fuer den Text hat. */
@media (min-width: 900px) {
  .vv-formate-more { margin-top: 60px; padding: 34px 28px; flex-direction: row; align-items: center; gap: 14px; }
}
.vv-formate-more__label {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: #b0a891;
  white-space: nowrap;
}
@media (min-width: 900px) {
  .vv-formate-more__label { padding-right: 18px; border-right: 1px solid rgba(140,130,114,.35); }
}
.vv-formate-more__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #6a6252;
  margin: 0;
}
/* Ohne flex:1 bekommt der Text im Reihen-Layout (ab 640px) nicht den
   restlichen Platz neben dem Label zugewiesen und bricht dadurch
   zusaetzlich mitten im ersten Satz um - der bewusste <br> vor "Neue
   Formate..." soll aber die einzige Umbruchstelle sein. */
@media (min-width: 900px) {
  .vv-formate-more__text { flex: 1; min-width: 0; }
}

/* -------------------- 8. Zur Person -------------------- */
.vv-person-section { background: var(--vv-creme); border-top: 1px solid rgba(140,130,114,.22); border-bottom: 1px solid rgba(140,130,114,.22); }
.vv-person-header {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  margin-bottom: 40px;
  text-align: center;
}
@media (min-width: 640px) {
  .vv-person-header { grid-template-columns: 160px 1fr; text-align: left; gap: 40px; margin-bottom: 44px; }
}
.vv-person-photo {
  width: 160px;
  height: 192px;
  object-fit: cover;
  border: 1px solid rgba(140,130,114,.35);
  margin: 0 auto;
}
@media (min-width: 640px) { .vv-person-photo { margin: 0; } }
.vv-person-name {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--vv-anthrazit);
  font-size: clamp(1.4rem, 4vw, 1.875rem);
  margin: 0 0 6px;
}
.vv-person-role {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--vv-gold);
  margin-bottom: 18px;
}
.vv-person-bio {
  font-size: 15px;
  line-height: 1.65;
  color: #5a5346;
}
br.vv-mobile-break { display: none; }
@media (max-width: 639px) { br.vv-mobile-break { display: inline; } }
.vv-person-quote {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  color: var(--vv-graubeige);
  font-size: clamp(1rem, 3vw, 1.15rem);
  letter-spacing: .02em;
  margin: 0 0 20px;
}
.vv-station {
  padding: 16px 0;
  border-top: 1px solid rgba(140,130,114,.28);
}
.vv-station__meta {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--vv-station-label);
  line-height: 1.6;
}
.vv-station__meta b { color: var(--vv-gold); font-weight: 500; }
.vv-station__headline {
  font-size: 15px;
  line-height: 1.5;
  color: var(--vv-station-text);
  margin: 6px 0 0;
}
.vv-station__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--vv-station-desc);
  font-style: italic;
  margin: 8px 0 0;
  /* Mobil (Standard): dauerhaft sichtbar - es gibt keinen Hover auf Touch-
     Geraeten. Auf Geraeten mit echtem Maus-Hover wird sie unten
     ausgeblendet und erst beim Hover/Fokus gezeigt. */
}
/* Breakpoint bewusst bei 780px (statt 640px) - erst ab dort hat
   .vv-container seine volle, stabile Breite erreicht. Ausserdem etwas
   kleinere Schrift + nowrap, damit auch der laengste Beschreibungstext
   (Station 02) garantiert in eine Zeile passt statt mitten im Satz
   umzubrechen - genau geprueft anhand der tatsaechlichen Textbreiten. */
@media (hover: hover) and (pointer: fine) and (min-width: 780px) {
  .vv-station__desc { display: none; }
  .vv-station:hover .vv-station__desc,
  .vv-station:focus-within .vv-station__desc {
    display: block;
    white-space: nowrap;
    font-size: 11px;
  }
}
/* Bewusst kein dauerhafter Unterstrich und kein Pfeil - beides (Strich
   + deutlicher Farbsprung Gold -> Anthrazit) erscheint nur beim Hover.
   Bewusst text-decoration statt border-bottom: eine Border haengt sich
   an die volle 44px-Tap-Flaeche (fuer Mobil) und sitzt dadurch zu tief;
   text-decoration liegt direkt an der Textzeile, unabhaengig von der
   Boxhoehe. */
.vv-person-more {
  margin-top: 3px;
  display: inline-flex;
  align-items: flex-start;
  min-height: 44px;
  font-size: 11px;
  color: var(--vv-gold-link);
  text-decoration: none;
  transition: color .2s;
}
.vv-person-more:hover {
  color: var(--vv-anthrazit);
  text-decoration: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* -------------------- 9. Woher der Name kommt -------------------- */
.vv-herkunft { text-align: center; }
.vv-herkunft__lead {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  color: var(--vv-anthrazit);
  font-size: clamp(1.25rem, 4vw, 1.875rem);
  line-height: 1.45;
  max-width: 640px;
  margin: 0 auto;
}
.vv-herkunft__text {
  font-size: clamp(1rem, 3vw, 1.19rem);
  line-height: 1.65;
  color: #4d473d;
  max-width: 600px;
  margin: 22px auto 0;
}
.vv-herkunft__text b { font-weight: 500; color: var(--vv-gold); }
.vv-herkunft__dash { color: var(--vv-gold); font-size: 0.75em; }
.vv-herkunft__note {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--vv-graubeige);
  max-width: 600px;
  margin: 22px auto 0;
}

/* -------------------- 10. CTA-Zeile -------------------- */
.vv-cta {
  padding: 70px 24px;
  background: var(--vv-graubeige);
  text-align: center;
}
@media (min-width: 640px) { .vv-cta { padding: 100px 64px; } }
.vv-cta__lead {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 500;
  color: var(--vv-heading-on-graubeige);
  font-size: clamp(1.2rem, 4vw, 1.875rem);
  line-height: 1.4;
  max-width: 640px;
  margin: 0 auto;
}
.vv-cta__sub {
  font-size: clamp(1rem, 3vw, 1.125rem);
  line-height: 1.6;
  color: var(--vv-sub-on-graubeige);
  margin: 16px auto 0;
}

/* -------------------- 11. Kontakt -------------------- */
.vv-kontakt { text-align: center; }
.vv-kontakt__mail {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  font-size: clamp(1.3rem, 5vw, 1.75rem);
  color: var(--vv-gold-link);
  border-bottom: none;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  letter-spacing: .01em;
}
.vv-kontakt__mail:hover { color: #6E5836; }
.vv-kontakt__meta {
  font-size: 14px;
  color: #4d473d;
  margin: 34px 0 0;
}

/* -------------------- 12. Footer -------------------- */
.vv-footer {
  padding: 60px 24px 24px;
  background: var(--vv-creme-hell);
  border-top: 1px solid rgba(140,130,114,.18);
  text-align: center;
}
@media (min-width: 640px) { .vv-footer { padding: 90px 64px 30px; } }
.vv-footer__legal {
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  letter-spacing: .06em;
  color: var(--vv-footer-muted);
  line-height: 1.7;
  margin: 0 0 20px;
}
/* Mobil only: HRB-Nummer bekommt eine eigene Zeile ueber der Anschrift,
   der Trennpunkt davor wird dafuer ausgeblendet (sonst haenge er als
   einzelnes Zeichen am Zeilenanfang). Am Desktop laeuft alles wie
   bisher in einer Zeile durch. */
.vv-footer__break { display: none; }
@media (max-width: 639px) {
  .vv-footer__sep { display: none; }
  .vv-footer__break { display: inline; }
}
.vv-footer__links {
  display: flex;
  gap: 20px;
  justify-content: center;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.vv-footer__links a { color: var(--vv-graubeige); display: inline-flex; align-items: center; min-height: 44px; }
.vv-footer__links a:hover { color: var(--vv-anthrazit); }

/* -------------------- 13. Impressum/Datenschutz -------------------- */
.vv-legal { padding: 130px 24px 90px; max-width: 720px; margin: 0 auto; }
@media (min-width: 640px) { .vv-legal { padding: 160px 40px 110px; } }
.vv-legal h1 {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--vv-anthrazit);
  font-size: clamp(1.6rem, 5vw, 2.2rem);
  margin-bottom: 32px;
}
.vv-legal__placeholder {
  border: 1px dashed rgba(140,130,114,.55);
  padding: 24px;
  font-size: 15px;
  line-height: 1.7;
  color: #5a5346;
}
.vv-legal__block { padding: 24px 0; border-bottom: 1px solid rgba(140,130,114,.28); }
.vv-legal__block:last-of-type { border-bottom: none; }
.vv-legal__label {
  font-family: 'IBM Plex Mono', monospace;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: 0.78rem;
  color: var(--vv-gold);
  margin-bottom: 10px;
}
.vv-legal__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--vv-anthrazit);
}
.vv-legal__text + .vv-legal__text { margin-top: 12px; }
.vv-legal__list {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--vv-anthrazit);
  margin: 12px 0;
  padding-left: 20px;
}
.vv-legal__list li { margin-bottom: 4px; }
.vv-legal__text + .vv-legal__list,
.vv-legal__list + .vv-legal__text { margin-top: 12px; }
.vv-legal__chapter {
  font-family: 'Barlow Semi Condensed', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--vv-anthrazit);
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  margin: 48px 0 4px;
}
.vv-legal__chapter:first-of-type { margin-top: 0; }
.vv-legal__stand {
  font-size: 0.85rem;
  color: #8c8272;
  margin-top: 32px;
}
.vv-legal__back { margin-top: 40px; }