/* ============================================================
   OMVIVA · DESIGN-SYSTEM
   Version 2.0 · 07.08.2026 · Mind Studios
   ------------------------------------------------------------
   Einzige Stilquelle der Website. Wird auf jeder Seite als
   erstes Stylesheet geladen, VOR dem seiteneigenen <style>.

   Was neu ist gegenüber 1.0:
   - Eine Type-Skala für alle Seiten (E2)
   - Kontraste auf WCAG AA gehoben (E5)
   - Eine Motion-Sprache: eine Kurve, drei Dauern, ein Lift (E6)
   - Ringmotiv aus dem Logo als wiederkehrendes Element
   - Zwei Kartenfamilien statt vier (E4), ein Label-Muster (E3)

   Alte Token-Namen aus 1.0 bleiben als Alias erhalten, damit
   bestehende Seiten während der Umstellung nicht brechen.
   ============================================================ */


/* ============================================================
   1. FONTS
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,300;1,400&family=Raleway:wght@300;400;500;600;700&display=swap');


/* ============================================================
   2. TOKENS
   ============================================================ */
:root {
  /* ---- Farben · Brandguide ---- */
  --sk-dunkelerde:   #2C2C2C;
  --sk-goldbraun:    #8B7355;
  --sk-cremeweiss:   #F4EFEB;
  --sk-greige:       #B8A898;
  --sk-sandgrau:     #E8E1DA;

  --sk-orange:       #D2541E;   /* das helle Marken-Orange · grosse Schrift, Grafik, Flächen */
  --sk-orange-mittel:#BA4517;   /* kleine Schrift und Buttonflächen · AA-tauglich */
  --sk-orange-dunkel:#A8421A;
  --sk-orange-tief:  #9C3813;   /* Hover auf Buttonflächen */
  --sk-orange-hell:  #F4E4DA;
  --sk-petrol:       #1E4747;
  --sk-petrol-hell:  #DCE5E3;

  --sk-weiss:        #FFFFFF;
  --sk-creme-tief:   #FDFAF7;
  --sk-goldbraun-hell:#C5B59E;
  --sk-goldbraun-dunkel:#6B5840;

  /* Textfarben · alle gegen Creme #FDFAF7 gemessen
     text-soft 8.52 · text-muted 4.90 · goldbraun-dunkel 6.52 */
  --sk-text-soft:    #4A4A4A;
  --sk-text-muted:   #6E6E6E;   /* war #7A7A7A · 4.13, zu wenig für AA */

  /* ---- Ringfarben aus dem Logo ---- */
  --sk-ring-1:       #3AB2C4;
  --sk-ring-2:       #6A9E7A;
  --sk-ring-3:       #E05628;
  --sk-ring-4:       #8B7355;   /* vierte Themenwelt */
  --sk-ring-grad:    linear-gradient(120deg, var(--sk-ring-1), var(--sk-ring-2) 52%, var(--sk-ring-3));

  /* ---- Status ---- */
  --sk-success:      #4E6B43;  --sk-success-hell: #E3EBDE;
  --sk-warning:      #7A5E1E;  --sk-warning-hell: #F5EBD4;
  --sk-error:        #A33A2B;  --sk-error-hell:   #F5DDD9;
  --sk-info:         #4A697A;  --sk-info-hell:    #DEE7EB;

  /* ---- Semantische Aliase ---- */
  --sk-bg:           var(--sk-creme-tief);
  --sk-bg-alt:       var(--sk-cremeweiss);
  --sk-bg-card:      var(--sk-weiss);
  --sk-bg-dark:      var(--sk-dunkelerde);
  --sk-text:         var(--sk-dunkelerde);
  --sk-text-invert:  var(--sk-cremeweiss);
  --sk-border:       var(--sk-sandgrau);
  --sk-border-strong:var(--sk-greige);
  --sk-primary:      var(--sk-goldbraun-dunkel);
  --sk-primary-hover:#54452F;
  /* Zwei Akzent-Töne, nach Schriftgrösse getrennt.
     WCAG erlaubt für grosse Schrift (ab 24px, oder ab 18.7px fett) den
     Schwellwert 3:1 statt 4.5:1. Deshalb darf das helle Marken-Orange
     in Überschriften stehen, aber nicht in Fliesstext und Links. */
  --sk-accent-gross: var(--sk-orange);          /* Überschriften ab 24px · 4.02 auf Creme */
  --sk-accent:       var(--sk-orange-mittel);   /* alles Kleinere · 5.11 auf Creme */
  --sk-accent-hover: var(--sk-orange-tief);
  --sk-accent-grafik:var(--sk-orange);          /* Grafik und Flächen */
  --sk-accent-invert:#E0682F;                   /* Akzent auf dunklem Grund */
  --sk-text-muted-2: var(--sk-text-muted);

  /* ---- Typografie ---- */
  --sk-font-serif:   'Cormorant Garamond', 'Times New Roman', Georgia, serif;
  --sk-font-sans:    'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Die Skala · sieben Stufen, überall dieselben */
  --sk-fs-hero:      clamp(2.5rem, 5.5vw, 4rem);
  --sk-fs-h1:        clamp(2.25rem, 4.5vw, 3.25rem);
  --sk-fs-h2:        clamp(1.875rem, 3.5vw, 2.5rem);
  --sk-fs-h3:        clamp(1.25rem, 2.2vw, 1.5rem);
  --sk-fs-lead:      clamp(1.0625rem, 1.5vw, 1.1875rem);
  --sk-fs-base:      1rem;
  --sk-fs-sm:        0.875rem;
  --sk-fs-xs:        0.75rem;

  /* Alias auf 1.0, damit nichts bricht */
  --sk-fs-lg:  var(--sk-fs-lead);
  --sk-fs-xl:  1.25rem;
  --sk-fs-2xl: var(--sk-fs-h3);
  --sk-fs-3xl: var(--sk-fs-h2);
  --sk-fs-4xl: var(--sk-fs-h1);
  --sk-fs-5xl: var(--sk-fs-hero);
  --sk-fs-display: var(--sk-fs-hero);

  --sk-lh-tight: 1.15;  --sk-lh-snug: 1.3;
  --sk-lh-normal: 1.55; --sk-lh-relaxed: 1.7;
  --sk-ls-tight: -0.012em; --sk-ls-normal: 0;
  --sk-ls-wide: 0.05em; --sk-ls-wider: 0.15em; --sk-ls-widest: 0.18em;

  /* ---- Abstände ---- */
  --sk-space-1: 0.25rem; --sk-space-2: 0.5rem;  --sk-space-3: 0.75rem;
  --sk-space-4: 1rem;    --sk-space-5: 1.5rem;  --sk-space-6: 2rem;
  --sk-space-7: 3rem;    --sk-space-8: 4rem;    --sk-space-9: 6rem;
  --sk-space-10: 8rem;
  --sk-section-y: clamp(4rem, 9vw, 7rem);

  /* ---- Radien · eine Wahrheit ---- */
  --sk-radius-sm: 6px; --sk-radius-md: 10px;
  --sk-radius-lg: 18px; --sk-radius-xl: 24px; --sk-radius-full: 9999px;

  /* ---- Schatten ---- */
  --sk-shadow-sm: 0 1px 3px rgba(44,44,44,.06);
  --sk-shadow-md: 0 4px 16px rgba(44,44,44,.08);
  --sk-shadow-lg: 0 12px 40px rgba(44,44,44,.12);
  --sk-shadow-xl: 0 20px 60px rgba(44,44,44,.14);
  --sk-shadow-focus: 0 0 0 3px rgba(168,66,26,.28);

  /* ---- Motion · eine Kurve, drei Dauern, ein Lift ---- */
  --sk-ease:        cubic-bezier(.22,.61,.36,1);
  --sk-dur-fast:    160ms;
  --sk-dur:         260ms;
  --sk-dur-reveal:  900ms;
  --sk-lift:        -4px;
  --sk-stagger:     90ms;
  /* Alias auf 1.0 */
  --sk-transition-fast: var(--sk-dur-fast) var(--sk-ease);
  --sk-transition:      var(--sk-dur) var(--sk-ease);
  --sk-transition-slow: 400ms var(--sk-ease);

  /* ---- Layout ---- */
  --sk-container: 1180px;
  --sk-container-narrow: 860px;
  /* Lesebreite für langen Fliesstext, Formulare und FAQ.
     Eingeführt 11.08.2026, vorher standen dafür 1100 und
     1080 px nebeneinander im Umlauf. */
  --sk-container-text: 1100px;
  --sk-container-wide: 1400px;
  --sk-nav-height: 72px;   /* Höhe von .omv-hd; Seiten mit abweichender Kopfzeile
                              überschreiben --sk-nav-h in ihrem eigenen :root */
  --sk-nav-h: 72px;

  --sk-z-base: 1; --sk-z-dropdown: 100; --sk-z-sticky: 200;
  --sk-z-modal: 1000; --sk-z-toast: 2000;
}


/* ============================================================
   3. RESET UND BASIS
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sk-font-sans);
  font-size: var(--sk-fs-base);
  line-height: var(--sk-lh-normal);
  color: var(--sk-text);
  background: var(--sk-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  position: relative;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Ankersprünge landen nicht unter der klebenden Kopfzeile */
html { scroll-padding-top: calc(var(--sk-nav-h, 72px) + 12px); }
button { font: inherit; cursor: pointer; }
a { color: var(--sk-accent); text-decoration: none; transition: color var(--sk-transition-fast); }
a:hover { color: var(--sk-accent-hover); }
::selection { background: var(--sk-orange-hell); color: var(--sk-dunkelerde); }
:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 3px; border-radius: 3px; }

/* Papierkorn · sehr leise Textur gegen die Glätte.
   Über <body class="sk-no-grain"> abschaltbar. */
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9998;
  opacity: .05; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}
body.sk-no-grain::before { display: none; }


/* ============================================================
   4. TYPOGRAFIE
   ============================================================ */
h1, h2, h3, h4 {
  font-family: var(--sk-font-serif);
  font-weight: 400;
  color: var(--sk-text);
  line-height: var(--sk-lh-tight);
  letter-spacing: var(--sk-ls-tight);
  margin: 0 0 var(--sk-space-4);
}
.sk-hero-title { font-size: var(--sk-fs-hero); }
h1, .sk-h1 { font-size: var(--sk-fs-h1); }
h2, .sk-h2 { font-size: var(--sk-fs-h2); }
h3, .sk-h3 { font-size: var(--sk-fs-h3); font-weight: 500; line-height: var(--sk-lh-snug); }
h4, .sk-h4 { font-size: var(--sk-fs-xl); font-weight: 500; line-height: var(--sk-lh-snug); }
.sk-display { font-size: var(--sk-fs-hero); font-family: var(--sk-font-serif); font-weight: 300; line-height: 1.06; }

/* Der kursive Akzent in den Überschriften · das Erkennungszeichen der Marke.
   Grosse Überschriften tragen das helle Orange, kleine den mittleren Ton. */
.sk-italic, h1 em, h2 em, h3 em, h4 em, .sk-hero-title em {
  font-style: italic; color: var(--sk-accent-gross);
}
h3 em, h4 em, .sk-card__title em, .sk-result__title em { color: var(--sk-accent); }
/* Auf dunklem Grund braucht der Akzent mehr Helligkeit */
.sk-section--dark h1 em, .sk-section--dark h2 em, .sk-section--dark h3 em,
.sk-section--dark .sk-hero-title em, .sk-quote em {
  color: var(--sk-accent-invert);
}

p { margin: 0 0 var(--sk-space-4); color: var(--sk-text-soft); line-height: var(--sk-lh-relaxed); max-width: 68ch; }
p:last-child { margin-bottom: 0; }
.sk-lead { font-size: var(--sk-fs-lead); line-height: var(--sk-lh-relaxed); color: var(--sk-text-soft); }
.sk-muted { color: var(--sk-text-muted); }
.sk-small { font-size: var(--sk-fs-sm); }

/* ---- Label über der Überschrift · EIN Muster ----
   Linksbündig: Linie links. Zentriert: Linie beidseitig.
   Die Linie trägt den Logo-Verlauf, das ist das leiseste Ringzitat. */
.sk-eyebrow {
  display: flex; align-items: center; gap: var(--sk-space-3);
  font-family: var(--sk-font-sans); font-size: var(--sk-fs-xs); font-weight: 600;
  letter-spacing: var(--sk-ls-widest); text-transform: uppercase;
  color: var(--sk-goldbraun-dunkel);
  margin: 0 0 var(--sk-space-4);
}
.sk-eyebrow::before {
  /* Strich in em, damit er mit der Schriftgrösse mitwächst */
  content: ''; width: 2.4em; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--sk-ring-1), var(--sk-ring-3));
}
.sk-eyebrow.is-center { justify-content: center; }
.sk-eyebrow.is-center::after {
  content: ''; width: 2.4em; height: 1px; flex: none;
  background: linear-gradient(90deg, var(--sk-ring-3), var(--sk-ring-1));
}

/* ---- Brotkrumenpfad · auf jede Unterseite ---- */
.sk-breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sk-space-2);
  font-size: var(--sk-fs-xs); color: var(--sk-text-muted);
  padding: var(--sk-space-3) 0; margin: 0; list-style: none;
  background: transparent; border: 0;   /* keine zweite Linie unter dem Logo */
}
.sk-breadcrumb a { color: var(--sk-text-muted); }
.sk-breadcrumb a:hover { color: var(--sk-accent); }
.sk-breadcrumb li + li::before { content: '›'; margin-right: var(--sk-space-2); color: var(--sk-greige); }

/* ---- Zitatblock ---- */
.sk-quote {
  background: var(--sk-petrol); color: var(--sk-cremeweiss);
  border-radius: var(--sk-radius-lg); padding: clamp(2rem, 5vw, 3.5rem);
  position: relative; overflow: hidden;
}
.sk-quote blockquote {
  margin: 0; font-family: var(--sk-font-serif);
  font-size: clamp(1.4rem, 2.8vw, 2rem); line-height: var(--sk-lh-snug);
  max-width: 26ch; position: relative; z-index: 1; color: inherit;
}
.sk-quote cite {
  display: block; margin-top: var(--sk-space-5); font-family: var(--sk-font-sans);
  font-style: normal; font-size: var(--sk-fs-sm); letter-spacing: var(--sk-ls-wide);
  color: rgba(244,239,235,.72); position: relative; z-index: 1;
}


/* ============================================================
   5. LAYOUT
   ============================================================ */
.sk-container { width: 100%; max-width: var(--sk-container); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
.sk-container--narrow { max-width: var(--sk-container-narrow); }
.sk-container--wide   { max-width: var(--sk-container-wide); }

.sk-section { padding: var(--sk-section-y) 0; position: relative; overflow: hidden; }
.sk-section > .sk-container { position: relative; z-index: 1; }
.sk-section--cream { background: var(--sk-cremeweiss); }
.sk-section--dark  { background: var(--sk-dunkelerde); color: var(--sk-cremeweiss); }
.sk-section--dark h1, .sk-section--dark h2, .sk-section--dark h3, .sk-section--dark h4 { color: var(--sk-cremeweiss); }
.sk-section--dark p { color: rgba(244,239,235,.74); }
.sk-section--dark .sk-eyebrow { color: #D9C4A8; }
.sk-section--dark a { color: #F0A882; }
.sk-section--dark .sk-italic { color: var(--sk-accent-invert); }

.sk-grid { display: grid; gap: var(--sk-space-5); align-items: stretch; }
.sk-grid--2 { grid-template-columns: repeat(2, 1fr); }
.sk-grid--3 { grid-template-columns: repeat(3, 1fr); }
.sk-grid--4 { grid-template-columns: repeat(4, 1fr); }
.sk-grid--auto { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
@media (max-width: 900px) { .sk-grid--3, .sk-grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .sk-grid--2, .sk-grid--3, .sk-grid--4 { grid-template-columns: 1fr; } }

/* ---- Asymmetrie statt immer zentriert ---- */
.sk-asym { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
@media (min-width: 900px) {
  .sk-asym { grid-template-columns: 5fr 7fr; align-items: center; }
  .sk-asym--wide-left { grid-template-columns: 7fr 5fr; }
  .sk-asym--offset > :last-child { margin-left: clamp(0px, 6vw, 88px); }
}

.sk-stack > * + * { margin-top: var(--sk-space-4); }
.sk-stack--lg > * + * { margin-top: var(--sk-space-6); }


/* ============================================================
   6. BUTTONS · ein Muster
   ============================================================ */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sk-space-2);
  font-family: var(--sk-font-sans); font-size: .9375rem; font-weight: 600; letter-spacing: .01em;
  padding: .85rem 1.6rem; border-radius: var(--sk-radius-full);
  border: 1px solid transparent; cursor: pointer; text-decoration: none;
  white-space: nowrap; min-height: 46px;
  transition: transform var(--sk-transition), background var(--sk-transition),
              box-shadow var(--sk-transition), border-color var(--sk-transition), color var(--sk-transition);
}
.sk-btn--primary { background: var(--sk-orange-dunkel); color: var(--sk-weiss); box-shadow: var(--sk-shadow-sm); }
.sk-btn--primary:hover { background: var(--sk-orange-tief); color: var(--sk-weiss); transform: translateY(-2px); box-shadow: var(--sk-shadow-md); }
.sk-btn--secondary { background: var(--sk-goldbraun-dunkel); color: var(--sk-weiss); }
.sk-btn--secondary:hover { background: #54452F; color: var(--sk-weiss); transform: translateY(-2px); }
.sk-btn--outline, .sk-btn--ghost { background: transparent; color: var(--sk-dunkelerde); border-color: var(--sk-sandgrau); }
.sk-btn--outline:hover, .sk-btn--ghost:hover { border-color: var(--sk-goldbraun); color: var(--sk-dunkelerde); transform: translateY(-2px); }
.sk-btn--dark { background: var(--sk-dunkelerde); color: var(--sk-cremeweiss); }
.sk-btn--dark:hover { background: #1a1a1a; color: var(--sk-weiss); transform: translateY(-2px); }
.sk-btn--sm { padding: .5rem 1.1rem; font-size: var(--sk-fs-sm); min-height: 38px; }
.sk-btn--lg { padding: 1.05rem 2rem; font-size: 1rem; min-height: 54px; }
.sk-btn--block { display: flex; width: 100%; }
.sk-btn:disabled, .sk-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }
/* Pfeil wandert beim Hovern mit */
.sk-btn .sk-arrow { transition: transform var(--sk-transition); }
.sk-btn:hover .sk-arrow { transform: translateX(4px); }


/* ============================================================
   7. FORMULARE
   ============================================================ */
.sk-field { margin-bottom: var(--sk-space-5); }
.sk-label { display: block; font-size: var(--sk-fs-sm); font-weight: 600; color: var(--sk-text); margin-bottom: var(--sk-space-2); }
.sk-label--required::after { content: ' *'; color: var(--sk-accent); }
.sk-input, .sk-textarea, .sk-select {
  width: 100%; font-family: var(--sk-font-sans); font-size: var(--sk-fs-base);
  color: var(--sk-text); background: var(--sk-weiss);
  border: 1px solid var(--sk-sandgrau); border-radius: var(--sk-radius-md);
  padding: var(--sk-space-3) var(--sk-space-4); min-height: 48px;
  transition: border-color var(--sk-transition-fast), box-shadow var(--sk-transition-fast);
}
.sk-input:focus, .sk-textarea:focus, .sk-select:focus {
  outline: none; border-color: var(--sk-accent); box-shadow: var(--sk-shadow-focus);
}
.sk-input::placeholder, .sk-textarea::placeholder { color: var(--sk-text-muted); }
.sk-textarea { resize: vertical; min-height: 120px; line-height: var(--sk-lh-normal); }
.sk-select {
  appearance: none; padding-right: var(--sk-space-7);
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E6E6E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat; background-position: right 1rem center; background-size: 18px;
}
.sk-help { font-size: var(--sk-fs-xs); color: var(--sk-text-muted); margin-top: var(--sk-space-2); }
.sk-checkbox, .sk-radio { display: inline-flex; align-items: center; gap: var(--sk-space-2); cursor: pointer; font-size: var(--sk-fs-sm); }
.sk-checkbox input, .sk-radio input { width: 18px; height: 18px; accent-color: var(--sk-orange-dunkel); }


/* ============================================================
   8. KARTEN · zwei Familien
   ------------------------------------------------------------
   A) .sk-card      Inhaltskarte: Thema, Wert, Prinzip, Beitrag
   B) .sk-result    Ergebniskarte: Anbieter, Angebot, Kurs
   Beide heben sich gleich weit und in derselben Kurve.
   ============================================================ */
.sk-card, .sk-result {
  background: var(--sk-bg-card); border: 1px solid var(--sk-border);
  border-radius: var(--sk-radius-lg); box-shadow: var(--sk-shadow-sm);
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  transition: transform var(--sk-transition), box-shadow var(--sk-transition), border-color var(--sk-transition);
}
.sk-card { padding: var(--sk-space-6); }
.sk-card--hover:hover, .sk-card.is-link:hover, a.sk-card:hover,
.sk-result:hover, a.sk-result:hover {
  transform: translateY(var(--sk-lift));
  box-shadow: var(--sk-shadow-lg);
  border-color: var(--sk-border-strong);
}
.sk-card__title, .sk-result__title {
  font-family: var(--sk-font-serif); font-size: var(--sk-fs-h3); font-weight: 500;
  line-height: var(--sk-lh-snug); color: var(--sk-text); margin: 0 0 var(--sk-space-2);
}
.sk-card__meta, .sk-result__meta {
  font-size: var(--sk-fs-xs); color: var(--sk-text-muted);
  letter-spacing: var(--sk-ls-wide); text-transform: uppercase; margin-bottom: var(--sk-space-3);
}
.sk-card__foot, .sk-result__foot { margin-top: auto; padding-top: var(--sk-space-5); }
.sk-card p, .sk-result p { font-size: var(--sk-fs-sm); }

.sk-result { padding: 0; }
.sk-result__body { padding: var(--sk-space-5); display: flex; flex-direction: column; flex: 1; }
.sk-result__price { font-family: var(--sk-font-serif); font-size: 1.25rem; font-weight: 500; color: var(--sk-accent); }

/* Bildfläche in Karten */
.sk-card__media, .sk-result__media {
  aspect-ratio: 16/10; background: var(--sk-cremeweiss); overflow: hidden; position: relative;
}
.sk-card__media img, .sk-result__media img { width: 100%; height: 100%; object-fit: cover; }

/* Verlaufskante · sitzt bündig an der Oberkante und wächst beim Hovern */
.sk-card--ring, .sk-result--ring { padding-top: 0; }
.sk-card--ring::before, .sk-result--ring::before {
  content: ''; display: block; height: 3px; flex: none;
  background: var(--sk-ring-grad);
  transform: scaleX(.34); transform-origin: left;
  transition: transform 600ms var(--sk-ease);
}
.sk-card--ring::before {
  margin: 0 calc(-1 * var(--sk-space-6)) var(--sk-space-5);
}
.sk-card--ring:hover::before, .sk-result--ring:hover::before { transform: scaleX(1); }

/* Zahlenliste · ersetzt Icon-Kreis-Karten, wo es redaktionell passt */
.sk-numlist { counter-reset: sknum; list-style: none; padding: 0; margin: var(--sk-space-6) 0 0; border-top: 1px solid var(--sk-border); }
.sk-numlist > li {
  counter-increment: sknum; display: grid; grid-template-columns: auto 1fr;
  gap: clamp(1rem, 3vw, 2.5rem); padding: var(--sk-space-5) 0;
  border-bottom: 1px solid var(--sk-border); align-items: start;
}
.sk-numlist > li::before {
  content: counter(sknum, decimal-leading-zero);
  font-family: var(--sk-font-serif); font-size: 2.25rem; line-height: 1;
  font-style: italic; color: var(--sk-greige); min-width: 2.2ch;
}
.sk-numlist h3 { margin: 0 0 .2rem; }
.sk-numlist p { margin: 0; font-size: .9375rem; }


/* ============================================================
   9. BADGES UND CHIPS
   ============================================================ */
.sk-badge, .sk-chip {
  display: inline-flex; align-items: center; gap: var(--sk-space-1);
  font-family: var(--sk-font-sans); font-size: var(--sk-fs-xs); font-weight: 500;
  letter-spacing: var(--sk-ls-wide); padding: 4px var(--sk-space-3);
  border-radius: var(--sk-radius-full); background: var(--sk-cremeweiss);
  color: var(--sk-text-soft); border: 1px solid var(--sk-sandgrau);
}
.sk-badge--dark    { background: var(--sk-dunkelerde); color: var(--sk-cremeweiss); border-color: var(--sk-dunkelerde); }
.sk-badge--gold    { background: var(--sk-goldbraun-dunkel); color: var(--sk-weiss); border-color: transparent; }
.sk-badge--orange  { background: var(--sk-orange-hell); color: #7A2E12; border-color: transparent; }
.sk-badge--petrol  { background: var(--sk-petrol-hell); color: var(--sk-petrol); border-color: transparent; }
.sk-badge--success { background: var(--sk-success-hell); color: var(--sk-success); border-color: transparent; }
.sk-badge--warning { background: var(--sk-warning-hell); color: var(--sk-warning); border-color: transparent; }
.sk-badge--error   { background: var(--sk-error-hell);   color: var(--sk-error);   border-color: transparent; }
.sk-badge--info    { background: var(--sk-info-hell);    color: var(--sk-info);    border-color: transparent; }


/* ============================================================
   10. NAVIGATION UND FOOTER
   ============================================================ */
.sk-nav {
  position: sticky; top: 0; z-index: var(--sk-z-sticky);
  background: rgba(253,250,247,.92);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--sk-sandgrau);
}
.sk-nav__inner {
  max-width: var(--sk-container); margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem); height: var(--sk-nav-height);
  display: flex; align-items: center; gap: var(--sk-space-6);
}
.sk-nav__brand { display: flex; align-items: center; gap: var(--sk-space-3); text-decoration: none; color: var(--sk-text); }
.sk-nav__menu { display: flex; align-items: center; gap: var(--sk-space-6); margin-left: auto; }
.sk-nav__link { font-size: var(--sk-fs-sm); color: var(--sk-text-soft); text-decoration: none; transition: color var(--sk-transition-fast); }
.sk-nav__link:hover, .sk-nav__link.is-active { color: var(--sk-accent); }
@media (max-width: 900px) {
  .sk-nav__menu { display: none; }
  .sk-nav__menu.is-open {
    display: flex; position: fixed; top: var(--sk-nav-height); left: 0; right: 0;
    background: var(--sk-weiss); flex-direction: column; align-items: flex-start;
    padding: var(--sk-space-5); margin: 0; border-bottom: 1px solid var(--sk-sandgrau);
  }
}


/* Kopfzeile ohne Trennlinie · der Schatten kommt erst beim Scrollen.
   Die Regeln stehen hier, damit sie auf jeder Seite gelten, auch wenn
   die Seite ihre eigene .omv-hd-Regel mitbringt. */
.omv-hd { border-bottom: 0 !important; transition: box-shadow var(--sk-dur) var(--sk-ease); }
.omv-hd.is-scrolled { box-shadow: 0 1px 0 rgba(232,225,218,.7), 0 6px 20px rgba(44,44,44,.05); }
/* Brotkrumenpfad sitzt direkt darunter, ohne eigene Fläche und ohne Linie */
.breadcrumb, .sk-breadcrumb { background: transparent !important; border: 0 !important; }


/* ============================================================
   11. RINGMOTIV
   ------------------------------------------------------------
   Der Kreis aus dem Logo als wiederkehrendes Element.
   Regel: nur als Haarlinie, Kante oder Rahmen. Nie als Fläche.
   Die SVG-Verläufe liegen einmal pro Seite in <svg class="sk-defs">.
   ============================================================ */
.sk-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 1 · Grosser angeschnittener Bogen im Sektionshintergrund */
.sk-arc { position: absolute; pointer-events: none; z-index: 0; opacity: .55; }
.sk-arc svg { width: 100%; height: 100%; }
.sk-arc--tr { top: -32%; right: -14%; width: min(760px, 86vw); height: min(760px, 86vw); }
.sk-arc--bl { bottom: -46%; left: -20%; width: min(620px, 80vw); height: min(620px, 80vw); }
.sk-arc--tc { top: -58%; left: 50%; transform: translateX(-50%); width: min(900px, 110vw); height: min(900px, 110vw); opacity: .4; }

/* 2 · Porträtrahmen */
.sk-portrait { position: relative; width: 132px; height: 132px; flex: none; }
.sk-portrait > svg { position: absolute; inset: 0; width: 100%; height: 100%; transition: transform 700ms var(--sk-ease); }
.sk-portrait__img {
  position: absolute; inset: 9px; border-radius: var(--sk-radius-full); overflow: hidden;
  background: linear-gradient(140deg, var(--sk-goldbraun), var(--sk-goldbraun-dunkel));
  display: grid; place-items: center;
  font-family: var(--sk-font-serif); font-size: 2rem; color: rgba(255,255,255,.9);
}
.sk-portrait__img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}
/* Kein Foto: die Initialen im Hintergrund bleiben stehen.
   Bricht das Bild, entfernt onerror das img und die Initialen kommen zurück. */
.sk-result:hover .sk-portrait > svg, .sk-portrait:hover > svg { transform: rotate(28deg); }
.sk-portrait--sm { width: 92px; height: 92px; }
.sk-portrait--sm .sk-portrait__img { inset: 7px; font-size: 1.5rem; }
.sk-portrait--lg { width: 180px; height: 180px; }
.sk-portrait--lg .sk-portrait__img { inset: 12px; font-size: 2.75rem; }

/* 3 · Fortschrittsring */
.sk-ring-prog { width: 66px; height: 66px; flex: none; }
.sk-ring-prog .sk-track { stroke: var(--sk-sandgrau); fill: none; stroke-width: 4; }
.sk-ring-prog .sk-fill {
  stroke: url(#skRingGrad); fill: none; stroke-width: 4; stroke-linecap: round;
  transform: rotate(-90deg); transform-origin: 50% 50%;
  transition: stroke-dashoffset 1.2s var(--sk-ease);
}

/* 4 · Kompass mit vier Segmenten */
.sk-kompass { width: min(340px, 80vw); height: min(340px, 80vw); flex: none; }
.sk-kompass .sk-seg circle { transition: stroke-width var(--sk-dur) var(--sk-ease), opacity var(--sk-dur) var(--sk-ease); }
.sk-kompass .sk-seg { cursor: pointer; }
.sk-kompass .sk-seg:hover circle, .sk-kompass .sk-seg:focus-visible circle { stroke-width: 13; opacity: 1; }


/* ============================================================
   12. MOTION
   ------------------------------------------------------------
   Wird von /js/omviva-motion.js angesteuert.
   Parallax und Bild-Reveal liegen bewusst auf getrennten Ebenen,
   weil beide transform setzen und sich sonst überschreiben.
   ============================================================ */

/* Gestaffeltes Reveal beim Scrollen */
[data-reveal] {
  opacity: 0; transform: translateY(22px);
  transition: opacity var(--sk-dur-reveal) var(--sk-ease), transform var(--sk-dur-reveal) var(--sk-ease);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Bild-Reveal: Maske wischt nach rechts weg, Bild zoomt zurück */
.sk-media {
  position: relative; overflow: hidden; border-radius: var(--sk-radius-lg);
  background: var(--sk-cremeweiss);
}
.sk-media::after {
  content: ''; position: absolute; inset: 0; background: var(--sk-cremeweiss);
  transform-origin: left; transition: transform 1s var(--sk-ease); z-index: 2;
}
.sk-media.is-in::after { transform: scaleX(0); }
.sk-media > img, .sk-media > picture > img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.12); transition: transform 1.4s var(--sk-ease);
}
.sk-media.is-in > img, .sk-media.is-in > picture > img { transform: scale(1); }

/* Parallax: eigener Kasten, innen die bewegte Ebene */
.sk-px { position: relative; overflow: hidden; border-radius: var(--sk-radius-lg); background: var(--sk-cremeweiss); }
.sk-px::after {
  content: ''; position: absolute; inset: 0; background: var(--sk-cremeweiss);
  transform-origin: left; transition: transform 1s var(--sk-ease); z-index: 2;
}
.sk-px.is-in::after { transform: scaleX(0); }
.sk-px__layer {
  position: absolute; left: 0; right: 0; top: -12%; height: 124%;
  will-change: transform;
}
.sk-px__layer img { width: 100%; height: 100%; object-fit: cover; }


/* ============================================================
   13. HILFSKLASSEN
   ============================================================ */
.sk-text-center { text-align: center; }
.sk-text-center p, .sk-text-center .sk-lead { margin-left: auto; margin-right: auto; }
.sk-text-right { text-align: right; }
.sk-mt-0 { margin-top: 0 !important; } .sk-mt-2 { margin-top: var(--sk-space-2); }
.sk-mt-4 { margin-top: var(--sk-space-4); } .sk-mt-6 { margin-top: var(--sk-space-6); }
.sk-mt-8 { margin-top: var(--sk-space-8); }
.sk-mb-0 { margin-bottom: 0 !important; } .sk-mb-2 { margin-bottom: var(--sk-space-2); }
.sk-mb-4 { margin-bottom: var(--sk-space-4); } .sk-mb-6 { margin-bottom: var(--sk-space-6); }
.sk-mb-8 { margin-bottom: var(--sk-space-8); }
.sk-flex { display: flex; }
.sk-flex-center { display: flex; align-items: center; justify-content: center; }
.sk-flex-between { display: flex; align-items: center; justify-content: space-between; }
.sk-flex-wrap { flex-wrap: wrap; }
.sk-gap-2 { gap: var(--sk-space-2); } .sk-gap-4 { gap: var(--sk-space-4); } .sk-gap-6 { gap: var(--sk-space-6); }
.sk-divider { width: 60px; height: 1px; background: var(--sk-ring-grad); border: 0; margin: var(--sk-space-5) 0; }
.sk-divider--center { margin-left: auto; margin-right: auto; }
.sk-hidden-mobile { display: initial; } .sk-hidden-desktop { display: none; }
@media (max-width: 768px) { .sk-hidden-mobile { display: none; } .sk-hidden-desktop { display: initial; } }
.sk-visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Sprungmarke für die Tastatur */
.sk-skip {
  position: absolute; left: -9999px; top: 0; z-index: var(--sk-z-modal);
  background: var(--sk-dunkelerde); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--sk-radius-md) 0;
}
.sk-skip:focus { left: 0; color: #fff; }


/* ============================================================
   14. REDUZIERTE BEWEGUNG · gilt für die ganze Seite
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  .sk-media::after, .sk-px::after { transform: scaleX(0); }
  .sk-media > img, .sk-media > picture > img { transform: none; }
  .sk-px__layer { transform: none !important; }
}


/* ---- Brotkrumenpfad · geteilte Komponente ------------------
   Ergänzt 11.08.2026. Bisher brachte jede Seite eine eigene
   Kopie mit, was zu abweichenden Breiten und zur Beschriftung
   «Start» statt «Startseite» geführt hat. Siehe
   Design-Richtlinie_Omviva.md, Abschnitt 1.
   Markup:
     <nav class="breadcrumb" aria-label="Brotkrumen">
       <div class="breadcrumb-inner">
         <a href="/">Startseite</a>
         <span class="breadcrumb-sep">›</span>
         <span class="breadcrumb-current">Über uns</span>
       </div>
     </nav>
   ------------------------------------------------------------ */
.breadcrumb { background: transparent; padding: 16px 0; }
.breadcrumb-inner {
  /* Abstand INNEN, genau wie .omv-hd-in. Sonst liegt der Text 24 px
     weiter links als das Logo. Gefunden am 11.08.2026 durch Messung. */
  max-width: var(--sk-container); margin: 0 auto; padding: 0 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  font-size: 13px; color: var(--sk-text-muted);
}
.breadcrumb a { color: var(--sk-text-muted); transition: color var(--sk-transition); }
.breadcrumb a:hover { color: var(--sk-orange); }
.breadcrumb-sep { color: var(--sk-sandgrau); }
.breadcrumb-current { color: var(--sk-dunkelerde); font-weight: 500; }
/* WCAG 2.2 SC 2.5.8: eigenständige Bedienelemente mindestens 24 px hoch.
   Reine Textlinks in Absätzen und Listen sind ausgenommen, die gelten nach
   Norm als eingebettet. Die Liste ist bewusst aufgezählt, eine pauschale
   Regel würde auch Fliesstext treffen. Neue Bedienelemente hier eintragen.
   Grundlage: Messung aller Bedienelemente bei 390 px am 11.08.2026.
   ACHTUNG diesen Kommentar geschlossen halten. Am 07.08. fehlte das
   Sternchen-Schrägstrich und der Kommentar hat 774 Zeichen CSS
   verschluckt, die Regel war seit dem ersten Tag ohne Wirkung. */
.breadcrumb a, .breadcrumb-current,
.omv-mini-zurueck, .omv-mini-ft a,
.row-link, button.forgot-link,
.faq-cta a, .kv-value a, .no-account a {
  display: inline-flex; align-items: center; min-height: 24px;
}


/* ---- Eyebrow-Varianten · ergänzt 11.08.2026 ----------------
   Die Grundform steht weiter oben: linksbündig ein Strich links,
   mit .is-center Strich beidseitig. Hier nur die benannten
   Ausnahmen. Eine Variante ohne Namen gibt es nicht, siehe
   Design-Richtlinie_Omviva.md Abschnitt 2.
   ------------------------------------------------------------ */

/* Anbieterprofile: Abschnittslabel bleibt schlicht, ohne Strich.
   Entscheidung Daniela, 11.08.2026. */
.sk-eyebrow--schlicht::before,
.sk-eyebrow--schlicht::after { content: none; }

/* Akzentfarbe auf dunklen oder farbigen Flächen innerhalb heller Seiten */
.sk-eyebrow--akzent { color: var(--sk-orange); }
.sk-eyebrow--akzent::before,
.sk-eyebrow--akzent::after { background: var(--sk-orange); }

/* Bestätigungsseite nach abgeschickter Anfrage */
.sk-eyebrow--erfolg { color: var(--sk-success); }
.sk-eyebrow--erfolg::before,
.sk-eyebrow--erfolg::after { background: var(--sk-success); }

/* Auf dunklem Grund. Ersetzt Creme mit 50 % Deckkraft (4,18:1,
   unter AA) durch den dafür festgelegten Ton. */
.sk-eyebrow--dunkelgrund { color: #D9C4A8; }
.sk-eyebrow--dunkelgrund::before,
.sk-eyebrow--dunkelgrund::after {
  background: linear-gradient(90deg, #D9C4A8, rgba(217,196,168,.35));
}

/* Brotkrume, die schon in einem Container steckt (Blogartikel liegt in
   .wrap mit 740 px). Ohne diese Variante käme der Abstand doppelt und der
   Text stünde 24 px weiter innen als die Überschrift darunter. */
.breadcrumb--im-container { padding-inline: 0; }
.breadcrumb--im-container .breadcrumb-inner { max-width: none; padding: 0; }


/* ---- Kopf- und Fusszeile · geteilte Komponente ----
   Verschoben am 11.08.2026 aus den seiteneigenen Stilblöcken. Die
   @media-Blöcke sind samt Rahmen mitgekommen, sonst würden die
   Handy-Regeln auch auf dem Desktop greifen.
   Nicht enthalten: Mini-Kopfzeile der Login- und Kaufstrecken,
   Konto-Variante, Blog-Vorlagen. Die haben eigene Fassungen.
   ------------------------------------------------------------ */
.head-link, .featured-link, .welt-cta, .cat-link, .suggestion-chip, .filter-chip, .pitch-link, .omv-ft-col a, .omv-ft-legal a{
  display: inline-flex; align-items: center; min-height: 24px;
}
.omv-hd{position:sticky;top:0;z-index:2000;height:72px;background:#FDFAF7;padding-top:env(safe-area-inset-top,0px);box-sizing:content-box;font-family:'Raleway',-apple-system,sans-serif;}
.omv-hd::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:200px;background:#FDFAF7;pointer-events:none;}
.omv-hd-in{max-width:var(--sk-container);margin:0 auto;padding:0 24px;height:100%;display:flex;align-items:center;gap:24px;}
.omv-hd-brand{display:flex;align-items:center;}
.omv-hd-brand img{height:30px;width:auto;display:block;}
.omv-hd-nav{display:flex;align-items:center;gap:26px;margin-left:auto;}
.omv-hd-nav a{font-size:15px;font-weight:500;color:#4A4A4A;text-decoration:none;white-space:nowrap;transition:color .2s;}
.omv-hd-nav a:hover{color:#BA4517;}
.omv-hd-cta{background:#BA4517;color:#fff!important;padding:10px 20px;border-radius:9999px;font-size:14.5px;}
.omv-hd-cta:hover{background:#9C3813;}
.omv-hd-burger{display:none;margin-left:auto;background:none;border:none;cursor:pointer;color:#2C2C2C;padding:6px;}
@media(max-width:820px){.omv-hd-burger{display:block;}
.omv-hd-nav{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:#fff;padding:8px 24px 20px;border-bottom:1px solid #E8E1DA;box-shadow:0 8px 24px rgba(0,0,0,.06);opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .2s,transform .25s,visibility .25s;margin-left:0;}
.omv-hd.open .omv-hd-nav{opacity:1;visibility:visible;transform:translateY(0);}
.omv-hd-nav a{padding:13px 0;font-size:16px;border-bottom:1px solid #F0EAE4;}
.omv-hd-cta{text-align:center;margin-top:12px;border-bottom:none!important;}}
.omv-ft{background:#1a1a1a;color:rgba(244,239,235,.6);padding:48px 24px 28px;font-family:'Raleway',-apple-system,sans-serif;}
.omv-ft-in{max-width:var(--sk-container);margin:0 auto;}
.omv-ft-top{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:32px;padding-bottom:28px;border-bottom:1px solid rgba(244,239,235,.08);}
.omv-ft-col a{display:block;font-size:13.5px;color:rgba(244,239,235,.55);text-decoration:none;margin-bottom:10px;transition:color .2s;}
.omv-ft-col a:hover{color:#F0A882;}
.omv-ft-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(244,239,235,.4);padding-top:20px;}
.omv-ft-legal a{color:rgba(244,239,235,.4);text-decoration:none;}
.omv-ft-legal a:hover{color:#F0A882;}
@media(max-width:780px){.omv-ft-top{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.omv-ft-top{grid-template-columns:1fr;}}


/* ---- Buttons · geteilte Komponente ----
   Verschoben am 11.08.2026. Der Haupt-Button ist ab jetzt überall
   Orange, auch auf den Themen-Unterseiten. Entscheid Daniela.
   Seiten mit abweichender Fassung behalten vorerst ihre eigene und
   werden vom Wächter weiter gemeldet.
   ------------------------------------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  font-family:var(--sk-font-sans);font-size:14px;font-weight:500;letter-spacing:.02em;
  padding:14px 28px;border-radius:var(--sk-radius-full);
  border:1px solid transparent;cursor:pointer;
  transition:all var(--sk-transition);white-space:nowrap;min-height:48px;
}
.btn-primary{background:var(--sk-orange);color:#fff;}
.btn-primary:hover{background:var(--sk-orange-dunkel);transform:translateY(-1px);}
/* Entscheid 11.08.2026: der zurückhaltende Rand gewinnt, er stand
   auf 9 von 14 Seiten. Auf dunklen Flächen greift weiter unten
   .sk-section--dark .btn-outline. */
.btn-outline{background:transparent;color:var(--sk-dunkelerde);border-color:var(--sk-sandgrau);}
.btn-outline:hover{background:var(--sk-cremeweiss);border-color:var(--sk-dunkelerde);}
.btn-sm{padding:9px 16px;font-size:13px;min-height:36px;}
.btn-block{width:100%;}
.btn-lg{padding:16px 32px;font-size:15px;min-height:54px;}
/* Zustände. Standen bisher nur auf einzelnen Seiten, gehören aber zu jedem
   Button. Ergänzt am 11.08.2026 aus kurs-upload.html, profil.html,
   einzelsitzung.html, login.html und passwort-neu.html. */
.btn-ghost{background:transparent;color:var(--sk-text-soft);}
.btn-ghost:hover{color:var(--sk-orange);}
.btn[disabled],
.btn-primary:disabled{opacity:.6;cursor:not-allowed;transform:none;}
.btn-primary:disabled{background:var(--sk-sandgrau);color:var(--sk-text-muted);opacity:1;}


/* Outline-Button auf ausdrücklich dunkler Sektion. NUR mit
   .sk-section--dark, nicht mit .cta: .cta ist auf der Themen-
   Übersicht durchsichtig, dort wäre weisse Schrift falsch. */
.sk-section--dark .btn-outline {
  color: #fff; border-color: rgba(255,255,255,.3); background: transparent;
}
.sk-section--dark .btn-outline:hover {
  background: rgba(255,255,255,.1); border-color: #fff;
}


/* ---- Mini-Kopfzeile und Mini-Fusszeile · geteilte Komponente ----
   Kauf- und Login-Strecken tragen bewusst keine Hauptnavigation. Das ist
   Absicht und bleibt so: weniger Ablenkung im Kauf. Neu ist nur, dass es
   die Gestaltung genau einmal gibt statt sechsmal kopiert.
   Zusammengeführt am 11.08.2026 aus registrieren.html, den beiden
   checkout.html, den beiden login.html und passwort-neu.html.
   Zwei Varianten, beide benannt:
     ohne Zusatz  Login und Konto, weiss, mitlaufend
     --kauf       Kauf und Onboarding, sandfarben, oben angehaftet
     --verteilt   Fusszeile der Kaufstrecke, Urheberrecht links, Recht rechts
   ------------------------------------------------------------ */
.omv-mini-hd { background: var(--sk-weiss); border-bottom: 1px solid var(--sk-sandgrau); height: var(--sk-nav-h); }
.omv-mini-hd--kauf { position: sticky; top: 0; z-index: 50; background: rgba(253,250,247,.96); backdrop-filter: blur(10px); }
.omv-mini-hd-in { max-width: var(--sk-container); margin: 0 auto; padding: 0 24px; height: 100%; display: flex; align-items: center; gap: 16px; }
.omv-mini-brand { display: flex; align-items: center; gap: 10px; }
.omv-mini-brand img { height: 28px; width: auto; display: block; }
.omv-mini-brand-name { font-family: var(--sk-font-serif); font-size: 20px; font-weight: 500; color: var(--sk-dunkelerde); line-height: 1; }
.omv-mini-kontext { font-size: 13px; color: var(--sk-text-muted); padding-left: 14px; border-left: 1px solid var(--sk-sandgrau); margin-left: 6px; }
.omv-mini-sicher { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--sk-success); font-weight: 500; }
.omv-mini-zurueck { margin-left: auto; font-size: 13px; color: var(--sk-text-muted); display: inline-flex; align-items: center; gap: 5px; transition: color var(--sk-transition); }
.omv-mini-zurueck:hover { color: var(--sk-orange); }

.omv-mini-ft { background: #1a1a1a; color: rgba(244,239,235,.5); padding: 24px; text-align: center; font-size: 12px; }
.omv-mini-ft a { color: rgba(244,239,235,.7); transition: color var(--sk-transition); }
.omv-mini-ft a:hover { color: var(--sk-orange); }
.omv-mini-ft > span { margin: 0 8px; }
.omv-mini-ft--verteilt { color: rgba(244,239,235,.6); padding: 32px 24px; margin-top: 48px; text-align: start; }
.omv-mini-ft-in { max-width: var(--sk-container); margin: 0 auto; display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 12px; color: rgba(244,239,235,.4); }
.omv-mini-ft-in a { color: rgba(244,239,235,.5); }
.omv-mini-ft-in a:hover { color: var(--sk-orange); }


/* ---- Container und Abschnittskopf · geteilte Komponente ----
   Zusammengeführt am 11.08.2026. .container stand zeichengleich auf
   9 Seiten, .section-head auf 4. Wer eine andere Breite braucht, nimmt
   --sk-container-text, nicht eine neue Zahl.
   ------------------------------------------------------------ */
.container{max-width:var(--sk-container);margin:0 auto;padding:0 24px;}
/* Lesebreite für langen Fliesstext. Nicht mit einer eigenen Zahl
   nachbauen, sonst stehen wieder drei Breiten nebeneinander. */
.container--text{max-width:var(--sk-container-text);}
.section-head{text-align:center;margin-bottom:40px;}