/* ============================================================
   VACATUM DESIGN SYSTEM — components.css
   Alle wiederverwendbaren UI-Komponenten
   Version: 2.0 | Mai 2026
   Benoetigt: variables.css
   ============================================================ */

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

/* ── BASE ────────────────────────────────────────────────── */
body {
  font-family: var(--vac-font);
  color: var(--vac-color-text);
  background: var(--vac-color-bg);
  line-height: var(--vac-line-height-base);
  margin: 0;
  padding: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  /* 'clip' statt 'hidden': hidden macht den Koerper zum Scroll-Container,
     und darin klebt nichts mehr. Gemessen am 18.08.2026 — das Menue war
     als sticky ausgezeichnet, scrollte aber trotzdem weg. Es hat also nie
     geklebt. 'clip' schneidet waagrechten Ueberhang genauso ab, ohne
     einen Scroll-Container zu erzeugen. */
  overflow-x: clip;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--vac-font);
  line-height: var(--vac-line-height-tight);
  margin-top: 0;
  color: var(--vac-color-primary);
}

a { color: var(--vac-color-accent-text); }

/* Bilder sprengen sonst ihren Kasten. Gemeldet am 18.08.2026 fuer
   neu-bei-bitcoin/bargeld-vs-kontoguthaben.html — es gab dafuer nirgends
   eine Regel, also traf es potenziell jede Seite mit einem Bild.
   height:auto haelt das Seitenverhaeltnis, wenn die Breite begrenzt wird. */
img { max-width: 100%; height: auto; }

/* Die Einhaengepunkte kleben, nicht ihr Inhalt.
   Warum: vacatum-nav.js setzt .vac-nav in den Behaelter <div id="vac-nav">.
   Dieser Behaelter ist genau so hoch wie die Leiste selbst — ein
   sticky-Element darin hat null Spielraum und scrollt mit dem Behaelter
   weg. Gemessen am 18.08.2026: .vac-nav war als sticky ausgezeichnet und
   ist trotzdem nie stehengeblieben. Es hat also NIE geklebt.

   body ist ausserdem ein Flex-Container; damit ist der Behaelter ein
   Flex-Element und bildet den Bezugsrahmen. Deshalb gehoert die
   Anweisung genau hierhin. */
#vac-nav {
  position: sticky;
  top: 0;
  z-index: var(--vac-z-nav);
}

#vac-breadcrumb {
  position: sticky;
  top: var(--vac-nav-height);
  z-index: calc(var(--vac-z-nav) - 1);
}

/* Flaches Fenster: bei aufgeklappter Handytastatur oder im Querformat
   bliebe sonst zu wenig Inhalt uebrig. Dann scrollt das Pfadmenue mit. */
@media (max-height: 600px) {
  #vac-breadcrumb { position: static; }
}

/* ── NAVIGATION ──────────────────────────────────────────── */
.vac-nav {
  background: var(--vac-color-bg-card);
  box-shadow: var(--vac-shadow-sm);
  padding: 0 var(--vac-space-8);
  position: sticky;
  top: 0;
  z-index: var(--vac-z-nav);
  height: var(--vac-nav-height);
  display: flex;
  align-items: center;
}

.vac-nav__container {
  max-width: var(--vac-container-max);
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vac-nav__logo {
  font-size: var(--vac-font-size-xl);
  font-weight: var(--vac-font-weight-black);
  color: var(--vac-color-primary);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--vac-space-2);
}

.vac-nav__logo span { color: var(--vac-color-accent-text); }

.vac-nav__links {
  list-style: none;
  display: flex;
  gap: var(--vac-space-6);
  margin: 0;
  padding: 0;
}

.vac-nav__links a {
  text-decoration: none;
  color: var(--vac-color-primary);
  font-weight: var(--vac-font-weight-medium);
  font-size: var(--vac-font-size-sm);
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
  transition: var(--vac-transition);
}

.vac-nav__links a:hover,
.vac-nav__links a.active {
  color: var(--vac-color-accent-text);
  border-bottom-color: var(--vac-color-accent);
}

/* Rechte Seite der Leiste: Farbschema-Umschalter + Menuetaste.
   Der Umschalter ist auf jeder Breite sichtbar, das Burger-Menue nur
   auf schmalen Geraeten. */
.vac-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--vac-space-2);
  order: 3;
}

.vac-nav__theme {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--vac-radius-full);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--vac-transition-fast);
}

.vac-nav__theme:hover  { border-color: var(--vac-color-border); }
.vac-nav__theme:focus-visible {
  outline: 2px solid var(--vac-color-accent);
  outline-offset: 2px;
}

.vac-nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: var(--vac-space-1);
  min-height: 44px;
  align-items: center;
  justify-content: center;
}

.vac-nav__hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--vac-color-primary);
  transition: var(--vac-transition);
  border-radius: 2px;
}

/* Seit dem Menuepunkt "Rechner" sind es neun Eintraege. Zwischen 768 und
   1024 px stiessen Logo und erster Eintrag aneinander — deshalb klappt das
   Menue jetzt frueher ein. */
@media (max-width: 1024px) {
  .vac-nav__hamburger { display: flex; }
  .vac-nav__links {
    display: none;
    flex-direction: column;
    position: absolute;
    top: var(--vac-nav-height);
    left: 0; right: 0;
    background: var(--vac-color-bg-card);
    padding: var(--vac-space-4) var(--vac-space-8);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    text-align: center;
    gap: var(--vac-space-4);
    z-index: var(--vac-z-dropdown);
  }
  .vac-nav__links.open { display: flex; }
  .vac-nav { padding: 0 var(--vac-space-4); }
}

/* ── FOOTER ──────────────────────────────────────────────── */
.vac-footer {
  margin-top: auto;
  background: var(--vac-color-bg-card);
  padding: var(--vac-space-6) var(--vac-space-8);
  text-align: center;
  border-top: 1px solid var(--vac-color-border);
  color: var(--vac-color-text-muted);
  font-size: var(--vac-font-size-sm);
}

.vac-footer a {
  color: var(--vac-color-text-muted);
  text-decoration: none;
  margin: 0 var(--vac-space-2);
  transition: var(--vac-transition);
}

.vac-footer a:hover {
  color: var(--vac-color-accent-text);
  text-decoration: underline;
}

/* ── DISCLAIMER ──────────────────────────────────────────── */
.vac-disclaimer {
  background: #1c1c1c;
  border-bottom: 3px solid var(--vac-color-accent);
  font-size: var(--vac-font-size-xs);
  font-family: var(--vac-font);
  position: relative;
  z-index: var(--vac-z-disclaimer);
}

.vac-disclaimer__body {
  display: flex;
  align-items: flex-start;
  gap: var(--vac-space-3);
  padding: var(--vac-space-2) var(--vac-space-4);
  max-width: var(--vac-container-wide);
  margin: 0 auto;
  box-sizing: border-box;
}

.vac-disclaimer__text { color: #c8c8c8; line-height: 1.55; flex: 1; }

.vac-disclaimer__controls {
  display: flex;
  gap: var(--vac-space-2);
  flex-shrink: 0;
  align-self: flex-start;
  padding-top: 2px;
}

.vac-disclaimer__btn {
  background: none;
  border: 1px solid #555;
  color: #aaa;
  cursor: pointer;
  padding: 3px 9px;
  border-radius: var(--vac-radius-sm);
  font-size: 0.78rem;
  transition: var(--vac-transition);
  font-family: var(--vac-font);
}

.vac-disclaimer__btn:hover { border-color: #aaa; color: #fff; }

.vac-disclaimer__mini {
  display: none;
  padding: var(--vac-space-1) var(--vac-space-4);
  max-width: var(--vac-container-wide);
  margin: 0 auto;
  cursor: pointer;
  color: #909090;   /* 3.81:1 war zu wenig, #909090 erreicht 5.34:1 */
  font-size: 0.78rem;
}

/* ── BREADCRUMB ──────────────────────────────────────────── */
/* Der Seitenpfad klebte frueher am linken Fensterrand, waehrend der Inhalt
   mittig stand — er wirkte dadurch wie versehentlich liegengeblieben.
   Jetzt sitzt er in derselben Spalte wie Menue und Inhalt, auf einem eigenen
   schmalen Band, das ihn vom Inhalt darunter trennt. */
.vac-breadcrumb {
  background: var(--vac-color-bg-card);
  border-bottom: 1px solid var(--vac-color-border);
  /* Klebt direkt unter dem Menue, bildet mit ihm ein Band. Damit ist die
     Ortsangabe immer sichtbar — bei einem langen Artikel weiss man sonst
     nach dreimal Scrollen nicht mehr, wo man ist.

     Die Fusszeile bleibt bewusst am Ende: Sie ist mit 71 bis 94 px der
     groesste Posten und enthaelt Impressum, Datenschutz und
     Haftungsausschluss — Dinge, die man einmal braucht, nicht dauernd.
     Alles zusammen klebend haette auf dem Handy 46 % des Fensters
     belegt, so sind es 28 %. */
  /* Das Kleben sitzt am Behaelter #vac-breadcrumb, nicht hier — siehe
     dort. Ein sticky an diesem Element waere wirkungslos. */
  /* Dasselbe Seitenmass wie .vac-nav, damit der erste Eintrag exakt unter
     dem Logo steht. Die Einrueckung gehoert an dieses Element, nicht an die
     Liste — sonst kaeme sie zur zentrierten Breite hinzu und der Pfad
     staende 32 px zu weit rechts. */
  padding: 0 var(--vac-space-8);
}

.vac-breadcrumb__liste {
  max-width: var(--vac-container-max);
  margin: 0 auto;
  padding: var(--vac-space-3) 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--vac-space-2);
  /* Gehoert zur Navigation, nicht zum Seiteninhalt — sonst uebernimmt er
     auf den Artikelseiten deren Serifenschrift. */
  font-family: var(--vac-font);
  font-size: var(--vac-font-size-xs);
  /* Auf schmalen Geraeten lieber seitlich schieben als umbrechen —
     ein zweizeiliger Pfad sieht aus wie ein Fehler. */
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.vac-breadcrumb__liste::-webkit-scrollbar { display: none; }

.vac-breadcrumb__eintrag {
  display: flex;
  align-items: center;
  gap: var(--vac-space-2);
  white-space: nowrap;
}

/* Trennzeichen per CSS: wird nicht vorgelesen und nicht mitkopiert. */
.vac-breadcrumb__eintrag + .vac-breadcrumb__eintrag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-top: 1.5px solid var(--vac-color-text-light);
  border-right: 1.5px solid var(--vac-color-text-light);
  transform: rotate(45deg);
  flex-shrink: 0;
}

.vac-breadcrumb a {
  color: var(--vac-color-text-muted);
  text-decoration: none;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: var(--vac-transition-fast);
}

.vac-breadcrumb a:hover {
  color: var(--vac-color-accent-text);
  border-bottom-color: var(--vac-color-accent);
}

.vac-breadcrumb a:focus-visible {
  outline: 2px solid var(--vac-color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Die aktuelle Seite ist kein Link — sie wird staerker gesetzt, damit man
   auf einen Blick sieht, wo man steht. */
.vac-breadcrumb__aktuell {
  color: var(--vac-color-text);
  font-weight: var(--vac-font-weight-semibold);
}

@media (max-width: 1024px) {
  .vac-breadcrumb { padding: 0 var(--vac-space-4); }
}

/* ── BUTTONS ─────────────────────────────────────────────── */
.vac-btn, .btn-primary, .btn-vacatum {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--vac-space-2);
  padding: var(--vac-space-2) var(--vac-space-5);
  border-radius: var(--vac-radius);
  font-size: var(--vac-font-size-base);
  font-weight: var(--vac-font-weight-medium);
  cursor: pointer;
  text-decoration: none;
  border: 2px solid transparent;
  transition: var(--vac-transition);
  font-family: var(--vac-font);
  min-height: 44px;
  white-space: nowrap;
}

.vac-btn--primary, .btn-primary, .btn-vacatum {
  background: var(--vac-color-accent);
  color: var(--vac-color-on-accent);
  border-color: var(--vac-color-accent);
}

.vac-btn--primary:hover, .btn-primary:hover, .btn-vacatum:hover {
  background: var(--vac-color-accent-dark);
  border-color: var(--vac-color-accent-dark);
  color: var(--vac-color-on-accent);
  transform: translateY(-2px);
  filter: brightness(1.05);
}

.vac-btn--secondary {
  background: transparent;
  color: var(--vac-color-primary);
  border-color: var(--vac-color-border);
}

.vac-btn--secondary:hover {
  background: var(--vac-color-bg);
  border-color: var(--vac-color-primary);
}

.vac-btn--ghost {
  background: transparent;
  color: var(--vac-color-accent-text);
  border-color: var(--vac-color-accent);
}

.vac-btn--ghost:hover {
  background: var(--vac-color-accent);
  color: var(--vac-color-text-inverse);
}

/* ── CARDS ───────────────────────────────────────────────── */
.vac-card, .card-vacatum {
  background: var(--vac-color-bg-card);
  border-radius: var(--vac-radius-md);
  padding: var(--vac-space-6);
  box-shadow: var(--vac-shadow-xs);
  transition: var(--vac-transition);
  text-decoration: none;
  color: var(--vac-color-text);
  border-top: 5px solid var(--vac-color-border);
  display: flex;
  flex-direction: column;
}

.vac-card:hover, .card-vacatum:hover {
  transform: translateY(-4px);
  box-shadow: var(--vac-shadow-md);
}

.vac-card--accent  { border-top-color: var(--vac-color-accent); }
.vac-card--primary { border-top-color: var(--vac-color-primary); }
.vac-card--gold    { border-top-color: var(--vac-color-gold); }
.vac-card--success { border-top-color: var(--vac-color-success); }
.vac-card--danger  { border-top-color: var(--vac-color-danger); }

/* ── HERO ─────────────────────────────────────────────────── */
.vac-hero {
  text-align: center;
  padding: var(--vac-space-16) var(--vac-space-4);
  max-width: var(--vac-content-max);
  margin: 0 auto;
}

.vac-hero h1 {
  font-size: var(--vac-font-size-4xl);
  margin-bottom: var(--vac-space-4);
  color: var(--vac-color-primary);
}

.vac-hero p {
  font-size: var(--vac-font-size-md);
  color: var(--vac-color-text-muted);
  max-width: 650px;
  margin: 0 auto var(--vac-space-8);
}

.vac-hero__img {
  max-width: 220px;
  height: auto;
  margin-bottom: var(--vac-space-8);
  animation: vac-float 6s ease-in-out infinite;
}

@keyframes vac-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

@media (max-width: 768px) {
  .vac-hero h1    { font-size: var(--vac-font-size-2xl); }
  .vac-hero__img  { max-width: 160px; }
}

/* ── TABELLEN ────────────────────────────────────────────── */
.table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--vac-radius); }

.table-scroll table, .vac-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--vac-font-size-sm);
}

.table-scroll th, .table-scroll td,
.vac-table th, .vac-table td {
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--vac-color-border);
  text-align: left;
}

.table-scroll thead th, .vac-table thead th {
  background: var(--vac-color-primary-surface);
  color: var(--vac-color-text-inverse);
  font-weight: var(--vac-font-weight-semibold);
}

.table-scroll tbody tr:nth-child(even),
.vac-table tbody tr:nth-child(even) { background: rgba(0,0,0,0.02); }

/* ── FORMS ───────────────────────────────────────────────── */
input[type="text"], input[type="number"], input[type="email"],
input[type="date"], select, textarea {
  font-family: var(--vac-font);
  font-size: var(--vac-font-size-base);
  border: 1px solid var(--vac-color-border);
  border-radius: var(--vac-radius);
  padding: var(--vac-space-2) var(--vac-space-3);
  transition: var(--vac-transition);
  background: var(--vac-color-bg-card);
  color: var(--vac-color-text);
  width: 100%;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--vac-color-accent);
  box-shadow: 0 0 0 3px rgba(247,147,26,0.15);
}

/* ── JOURNEY CTA ─────────────────────────────────────────── */
.journey-cta {
  margin: var(--vac-space-10) 0 var(--vac-space-5) 0;
  padding: var(--vac-space-6) 28px;
  background: linear-gradient(135deg, #1a3c6b 0%, var(--vac-color-primary) 100%);
  border-radius: var(--vac-radius-md);
  border-left: 5px solid var(--vac-color-accent);
  color: var(--vac-color-text-inverse);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--vac-space-5);
  flex-wrap: wrap;
}

.journey-cta-text    { flex: 1; }
.journey-cta-step    { font-size: var(--vac-font-size-xs); color: var(--vac-color-accent-text); font-weight: var(--vac-font-weight-bold); text-transform: uppercase; letter-spacing: 1px; margin-bottom: var(--vac-space-2); }
.journey-cta-title   { font-size: var(--vac-font-size-lg); font-weight: var(--vac-font-weight-bold); margin-bottom: var(--vac-space-2); }
.journey-cta-desc    { font-size: var(--vac-font-size-sm); color: #bdc3c7; }
.journey-cta-btn     { background: var(--vac-color-accent); color: var(--vac-color-on-accent); padding: var(--vac-space-3) var(--vac-space-6); border-radius: var(--vac-radius); text-decoration: none; font-weight: var(--vac-font-weight-bold); font-size: var(--vac-font-size-sm); white-space: nowrap; transition: var(--vac-transition); display: inline-block; min-height: 44px; line-height: 22px; }
.journey-cta-btn:hover { background: var(--vac-color-accent-dark); transform: translateY(-1px); }

.journey-progress    { display: flex; gap: var(--vac-space-2); margin-bottom: var(--vac-space-4); flex-wrap: wrap; }
.journey-dot         { width: 28px; height: 6px; border-radius: 3px; background: #3e4e5e; }
.journey-dot.active  { background: var(--vac-color-accent); }
.journey-dot.done    { background: var(--vac-color-success); }

/* ── INFO BOXEN ──────────────────────────────────────────── */
.vac-box { border-radius: var(--vac-radius); padding: var(--vac-space-4) var(--vac-space-5); margin: var(--vac-space-4) 0; font-size: var(--vac-font-size-sm); }
.vac-box--info    { background: var(--vac-color-info-bg);    border-left: 4px solid var(--vac-color-info);    color: var(--vac-color-info-text); }
.vac-box--success { background: var(--vac-color-success-bg); border-left: 4px solid var(--vac-color-success); color: var(--vac-color-success-text); }
.vac-box--warning { background: var(--vac-color-warning-bg); border-left: 4px solid var(--vac-color-warning); color: var(--vac-color-warning-text); }
.vac-box--danger  { background: var(--vac-color-danger-bg);  border-left: 4px solid var(--vac-color-danger);  color: var(--vac-color-danger-text); }
.vac-box--swiss   { background: var(--vac-color-swiss-bg); border-left: 4px solid #cf0a2c; color: var(--vac-color-info-text); }

/* Ankersprünge halten Abstand zum klebenden Band. scroll-padding-top am
   Wurzelelement wirkt fuer JEDEN Sprung — anders als scroll-margin-top,
   das an jedem Ziel einzeln stehen muesste und deshalb regelmaessig
   vergessen wird. */
html { scroll-padding-top: calc(var(--vac-kopfband) + var(--vac-space-4)); }

/* ── ERKLAERKASTEN ───────────────────────────────────────── */
/* Der grosse Kasten der Wissensseiten — anders als .vac-box, der klein
   und fuer kurze Hinweise gedacht ist. Am 18.08.2026 aus 29 wortgleichen
   lokalen Kopien hierher gehoben: alle zwoelf Seiten hatten ihn Zeichen
   fuer Zeichen identisch, es war also nie eine Gestaltungsentscheidung,
   sondern nur Abschreiben.

   .science und .simple sind seine Faerbungen, nicht eigene Bauteile.

   Die Masse liegen jetzt auf der Abstandsleiter (vorher 25 und 30 px,
   also neben der Leiter). Das verschiebt die Kaesten um ein bis zwei
   Pixel — bewusst, damit sie zu allem anderen passen. */
.explainer-box {
  background: var(--vac-color-bg-card);
  border-radius: var(--vac-radius);
  padding: var(--vac-space-6);
  margin-bottom: var(--vac-space-8);
  box-shadow: var(--vac-shadow-xs);
  border-left: 5px solid var(--vac-color-border);
}

.explainer-box h2 {
  margin-top: 0;
  font-size: var(--vac-font-size-lg);
  display: flex;
  align-items: center;
  gap: var(--vac-space-3);
}

.explainer-box.science {
  border-left-color: var(--vac-color-info);
  background-color: var(--vac-color-info-bg);
}

.explainer-box.simple {
  border-left-color: var(--vac-color-success);
  background-color: var(--vac-color-bg);
}

/* Ohne .explainer-box davor: mehrere Seiten setzen die Faerbung allein.
   Beide Schreibweisen muessen wirken, sonst faellt die Farbe weg. */
.science { border-left-color: var(--vac-color-info); background-color: var(--vac-color-info-bg); }
.simple  { border-left-color: var(--vac-color-success); background-color: var(--vac-color-bg); }

/* ── BADGES ──────────────────────────────────────────────── */
.vac-badge { display: inline-block; padding: 2px var(--vac-space-2); border-radius: var(--vac-radius-full); font-size: var(--vac-font-size-xs); font-weight: var(--vac-font-weight-semibold); }
.vac-badge--accent  { background: rgba(247,147,26,0.15); color: var(--vac-color-accent-text); }
.vac-badge--success { background: var(--vac-color-success-bg); color: var(--vac-color-success-text); }
.vac-badge--danger  { background: var(--vac-color-danger-bg); color: var(--vac-color-danger-text); }
.vac-badge--primary { background: rgba(44,62,80,0.1); color: var(--vac-color-primary); }

/* ── GRID LAYOUTS ────────────────────────────────────────── */
.vac-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--vac-space-5); }
.vac-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--vac-space-5); }
.vac-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--vac-space-5); }
.vac-grid-auto { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--vac-space-5); }

@media (max-width: 768px) {
  .vac-grid-2, .vac-grid-3, .vac-grid-4 { grid-template-columns: 1fr; }
  .dashboard-grid, .entry-grid, .grid { grid-template-columns: 1fr; }
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  input, select, textarea { width: 100%; box-sizing: border-box; }
  .chart-container, .chart-wrapper { min-height: 260px; height: auto; }
  body { overflow-x: clip; max-width: 100vw; }
}

@media (max-width: 480px) {
  .vac-nav { padding: 0 var(--vac-space-2); }
  .vac-nav__logo { font-size: var(--vac-font-size-lg); }
  .vac-card { padding: var(--vac-space-3); }
  .vac-hero h1 { font-size: var(--vac-font-size-xl); }
  .vac-hero p { font-size: var(--vac-font-size-base); }
  main, .container, .academy-container, .legal-container { padding-left: var(--vac-space-3); padding-right: var(--vac-space-3); }
  h1 { font-size: 1.6rem; }
  h2 { font-size: 1.3rem; }
}

@media (min-width: 1400px) {
  /* Inhaltsbereiche mittig begrenzen. Die Menueleiste gehoert ausdruecklich
     NICHT dazu: sie ist ein durchgehendes Band, begrenzt wird nur ihr Inhalt
     ueber .vac-nav__container. Stand sie hier mit drin, schwebte die Leiste
     auf breiten Bildschirmen als weisser Balken in der Mitte, waehrend der
     Risikohinweis darueber ueber die volle Breite lief. */
  main, .container { max-width: var(--vac-container-wide); margin-left: auto; margin-right: auto; }
}

/* ── PRINT ───────────────────────────────────────────────── */
@media print {
  .vac-nav, .vac-footer, .vac-disclaimer, .vac-breadcrumb,
  .vac-nav__hamburger, .journey-cta, button { display: none !important; }
  @page { size: A4; margin: 2cm; }
  body { font-size: 12pt; color: #000; background: #fff; }
  h1, h2, h3 { page-break-after: avoid; color: #000; }
  table { page-break-inside: avoid; width: 100%; border-collapse: collapse; font-size: 10pt; }
  table th, table td { border: 1px solid #999; padding: 4pt 6pt; }
  .vac-card { page-break-inside: avoid; border: 1px solid #ccc; box-shadow: none; }
  .chart-container, .chart-wrapper { page-break-inside: avoid; max-height: 400px; }
  a[href]:after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
  a[href^="#"]:after, a[href^="javascript"]:after { content: ''; }
}