/* ==========================================================================
   VARIANTE 38 — main38.css
   Design: "Studio" — Rechte helle Seitenleiste + Burgund & Terrakotta
   STRUKTURELL ANDERS ALS V33/V37:
   • Sidebar ist RECHTS (nicht links!)
   • Sidebar ist HELL/WEISS (nicht dunkel!)
   • body { margin-right: ... } statt margin-left
   • Josefin Sans ALL-CAPS Navigation
   • Burgund #5c1a1a + Terrakotta #c4522a
   ========================================================================== */

@import url("josefin-sans.css");
@import url("source-sans-3.css");
@import url("font-awesome.css");

/* ==========================================================================
   CSS-VARIABLEN
   ========================================================================== */
:root {
  --farbe-burgund:          #5c1a1a;
  --farbe-burgund-tief:     #3e1010;
  --farbe-burgund-mittel:   #7a2424;
  --farbe-terrakotta:       #c4522a;
  --farbe-terrakotta-hell:  #d9734f;
  --farbe-terrakotta-dunkel:#a83f1e;
  --farbe-sand:             #faf7f2;
  --farbe-sand-dunkel:      #f0ebe0;
  --farbe-weiss:            #ffffff;
  --farbe-text:             #1a1210;
  --farbe-text-hell:        #5a4a44;
  --farbe-grau-hell:        #f5f2ee;
  --farbe-grau-mittel:      #e0d8d0;
  --farbe-linie:            #e8e0d5;
  --farbe-fehler:           #b72020;

  /* Sidebar ist HELL — diese Variablen beschreiben die helle Sidebar */
  --sidebar-breite:         280px;
  --sidebar-bg:             #faf7f2;
  --sidebar-linie:          #e0d8d0;

  --schrift-headline: 'Josefin Sans', system-ui, -apple-system, sans-serif;
  --schrift-text:     'Source Sans 3', system-ui, -apple-system, sans-serif;

  --schatten-sanft:   0 2px 20px rgba(var(--farbe-burgund-rgb), 0.07);
  --schatten-mittel:  0 6px 30px rgba(var(--farbe-burgund-rgb), 0.13);
  --schatten-stark:   0 10px 44px rgba(var(--farbe-burgund-rgb), 0.22);
  --schatten-sidebar: -6px 0 30px rgba(0, 0, 0, 0.08);

  --radius-btn:   2px;
  --radius-karte: 2px;
  --transition:   0.3s ease;
  /* RGB-Kanäle für rgba()-Nutzung */
  --farbe-burgund-rgb:  92, 26, 26;
  --farbe-burgund-tief-rgb: 62, 16, 16;
  --farbe-terrakotta-rgb:  196, 82, 42;
  --sidebar-bg-rgb:  250, 247, 242;
  /* Autorenbox-Variablen (Wichtigste auf einen Blick) */
  --farbe-autorenbox-hintergrund: color-mix(in srgb, var(--farbe-terrakotta) 6%, var(--farbe-weiss));
  --farbe-autorenbox-linie:       var(--farbe-linie);
  --farbe-autorenbox-akzent:      var(--farbe-terrakotta);
  --farbe-autorenbox-icon:        var(--farbe-terrakotta);
  --farbe-autorenbox-icon-text:   var(--farbe-weiss);
  --farbe-autorenbox-text:        var(--farbe-text);
  --farbe-autorenbox-text-stark:  var(--farbe-text);
}
/* Bruecke zu den generischen --color-*-Variablen aus der GETEILTEN css/global.css (Fund
   2026-08-26, Autor-Profilseite, siehe main9.css/main32.css als Vorbild). global.css
   definiert --color-primary etc. mit einem hartcodierten Rot (#e10816) als
   designneutralen Default - passt zu keinem main{N}.css-Theme. Betrifft u.a.
   .credential-badge, .autor-profile__avatar, .summary-box auf der Autor-Profilseite
   (tpl/include_einzelautor.tpl.htm). main{N}.css laedt NACH global.css, :root
   ueberschreibt sich sauber. */
:root {
  --color-primary:       var(--farbe-burgund);
  --color-primary-dark:  var(--farbe-burgund-tief);
  --color-primary-light: var(--farbe-sand);
  --color-text:          var(--farbe-text);
  --color-text-muted:    var(--farbe-text-hell);
  --color-border:        var(--farbe-grau-mittel);
}



/* ==========================================================================
   BASIS-RESET
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

/* KERNUNTERSCHIED: margin-right statt margin-left! */
body {
  font-family: var(--schrift-text);
  color: var(--farbe-text);
  background-color: var(--farbe-weiss);
  line-height: 1.75;
  overflow-x: hidden;
  margin-right: var(--sidebar-breite);
  margin-left: 0;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition);
}

/* Fliesstext-Links (WCAG 1.4.1 + 1.4.3): erbt Textfarbe fuer garantierten Kontrast, Unterstreichung als Unterscheidungsmerkmal */
main p a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

main p a:hover,
main p a:focus-visible {
  text-decoration-thickness: 2px;
}


img {
  max-width: 100%;
  height: auto;
  display: block;
}

ul { list-style: none; }

strong { color: var(--farbe-burgund); font-weight: 600; }

/* ==========================================================================
   TYPOGRAFIE — Editorial-Stil mit Josefin Sans
   ========================================================================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--schrift-headline);
  line-height: 1.15;
  color: var(--farbe-burgund);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

h1 { font-size: clamp(2.2rem, 4.5vw, 3.8rem); letter-spacing: 0.04em; }
h2 { font-size: clamp(1.6rem, 3vw, 2.6rem); }
h3 { font-size: clamp(1rem, 1.8vw, 1.4rem); }

p {
  font-size: 1.05rem;
  color: var(--farbe-text-hell);
  margin-bottom: 1.1rem;
  line-height: 1.8;
  font-weight: 300;
}

p:last-child { margin-bottom: 0; }

/* ==========================================================================
   BUTTONS — sehr flach, eckig (radius: 2px), minimalistisch
   ========================================================================== */
.btn {
  display: inline-block;
  padding: 0.75rem 2rem;
  border-radius: var(--radius-btn);
  font-family: var(--schrift-headline);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all var(--transition);
  text-align: center;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

/* Primär: Burgund gefüllt */
.btn-primaer, .btn-burgund, .btn-akzent, .btn-gold {
  background-color: var(--farbe-burgund);
  color: var(--farbe-weiss);
  border-color: var(--farbe-burgund);
}

.btn-primaer:hover, .btn-burgund:hover, .btn-akzent:hover, .btn-gold:hover {
  background-color: var(--farbe-burgund-tief);
  border-color: var(--farbe-burgund-tief);
  color: var(--farbe-weiss);
  letter-spacing: 3px;
}

/* Sekundär: Terrakotta */
.btn-secondary, .btn-terrakotta {
  background-color: var(--farbe-terrakotta);
  color: var(--farbe-weiss);
  border-color: var(--farbe-terrakotta);
}

.btn-secondary:hover, .btn-terrakotta:hover {
  background-color: var(--farbe-terrakotta-dunkel);
  border-color: var(--farbe-terrakotta-dunkel);
  color: var(--farbe-weiss);
}

/* Outline: Burgund auf hellem Hintergrund */
.btn-outline, .btn-outline-burgund {
  background-color: transparent;
  color: var(--farbe-burgund);
  border-color: var(--farbe-burgund);
}

.btn-outline:hover, .btn-outline-burgund:hover {
  background-color: var(--farbe-burgund);
  color: var(--farbe-weiss);
}

/* Outline Weiss (auf dunklem Hintergrund) */
.btn-outline-weiss, .btn-hell {
  background-color: transparent;
  color: var(--farbe-weiss);
  border-color: rgba(255, 255, 255, 0.7);
}

.btn-outline-weiss:hover, .btn-hell:hover {
  background-color: rgba(255, 255, 255, 0.12);
  border-color: var(--farbe-weiss);
  color: var(--farbe-weiss);
}

.btn[disabled] { opacity: 0.6; cursor: not-allowed; pointer-events: none; }

/* ==========================================================================
   SKIP-LINK
   ========================================================================== */
.skip-link {
  position: absolute;
  top: -200px;
  right: 1rem;
  left: auto;
  background-color: var(--farbe-burgund);
  color: var(--farbe-weiss);
  padding: 0.7rem 1.2rem;
  border-radius: 0 0 var(--radius-btn) var(--radius-btn);
  z-index: 9999;
  font-family: var(--schrift-headline);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  transition: top 0.3s ease;
}

.skip-link:focus { top: 0; }

/* ==========================================================================
   SIDEBAR — RECHTS, HELL, EDITORIAL
   ========================================================================== */
.site-sidebar {
  position: fixed;
  top: 0;
  right: 0;       /* RECHTS! */
  left: auto;
  width: var(--sidebar-breite);
  height: 100vh;
  background-color: var(--sidebar-bg);
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
  overflow-x: hidden;
  /* Schatten nach links (Richtung Content) */
  box-shadow: var(--schatten-sidebar);
  /* Linker Akzentstreifen */
  border-left: 3px solid var(--farbe-terrakotta);
}

/* #box ("Karriere bei uns"-Badge, global.css) ist fest rechts oben positioniert
   und ueberlappt in diesem Sidebar-Layout den Praxisnamen - neben die Sidebar
   verschieben statt darueber */
#box {
  right: calc(var(--sidebar-breite) + 15px);
}

/* Terrakotta-Streifen oben */
.site-sidebar::before {
  content: '';
  position: absolute;
  top: 0; left: -3px; right: 0;
  height: 5px;
  background: linear-gradient(to right, var(--farbe-terrakotta), var(--farbe-burgund));
  z-index: 1;
}

/* Logo-Bereich */
.sidebar-logo {
  padding: 2.5rem 1.8rem 2rem;
  flex-shrink: 0;
  border-bottom: 1px solid var(--sidebar-linie);
}

/* Markenblock 2026-08-31 (Nutzerwunsch "wenn es ein Logo gibt, muss es auch
   erscheinen - auch mit der Firmierung"): Logo-Signet zentriert ueber der
   Firmierung statt Logo-neben-Text. Grund fuer die zentrierte Anordnung: die
   Sidebar ist nur 280px breit (ab 1200px sogar schmaler) und die Firmierung
   laeuft in Versalien mit 2px Sperrung - nebeneinander bliebe fuer den Namen
   zu wenig Platz, er wuerde 4-5x umbrechen. Gleiche Loesung wie bei Design 37
   (Commit 693098d), dort aus demselben Grund. */
.sidebar-logo a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.9rem;
  text-align: center;
  text-decoration: none;
}

/* Signet in einer hellen Kachel mit Terrakotta-Haarlinie - hebt auch ein
   Logo mit weissem Hintergrund sauber von der Sandflaeche der Sidebar ab.
   BEWUSST keine feste Quadratkachel: die hinterlegten Kundenlogos haben sehr
   unterschiedliche Formate (geprueft: 800x198 = 4:1 quer, 236x229 und 303x303
   = quadratisch). In einem 72x72-Quadrat waere das Querformat-Logo auf
   Briefmarkengroesse geschrumpft. Die Kachel waechst daher mit dem Logo mit
   (max-height begrenzt die Hoehe, max-width die Breite), min-height haelt
   quadratische Logos trotzdem auf einer ordentlichen Groesse. */
.logo-signet {
  display: inline-grid;
  place-items: center;
  max-width: 100%;
  min-height: 76px;
  padding: 0.55rem 0.9rem;
  flex-shrink: 0;
  background: var(--farbe-weiss, #fff);
  border: 1px solid color-mix(in srgb, var(--farbe-terrakotta) 35%, transparent);
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(92, 26, 26, 0.07);
}
.logo-signet img,
.sidebar-logo img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 58px;
  object-fit: contain;
  filter: none;
}

.logo-firmierung { display: block; }

.sidebar-logo .logo-name {
  font-family: var(--schrift-headline);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--farbe-burgund);
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 1.35;
  display: block;
  /* verteilt die Zeilen gleichmaessig statt "3 Woerter / 1 Wort" */
  text-wrap: balance;
}

/* Slogan als Caption, durch eine kurze Akzentlinie vom Namen abgesetzt.
   :empty-Regel weiter unten faengt den Fall ab, dass ein Kunde keinen
   Slogan gepflegt hat - dann verschwindet auch die Linie. */
.sidebar-logo .logo-untertitel {
  font-family: var(--schrift-headline);
  font-size: 0.58rem;
  color: var(--farbe-terrakotta);
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1.5;
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  position: relative;
  text-wrap: balance;
}
.sidebar-logo .logo-untertitel::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 2px;
  background: var(--farbe-terrakotta);
}
.sidebar-logo .logo-untertitel:empty { display: none; }

/* Navigation — ALL-CAPS, Josefin Sans, Trennlinien */
.sidebar-nav {
  flex: 1;
  padding: 0.5rem 0;
  overflow-y: auto;
}

.sidebar-nav > ul { list-style: none; }

.sidebar-nav > ul > li {
  position: relative;
  border-bottom: 1px solid var(--sidebar-linie);
}

/* Haupt-Nav: kein Hintergrund-Hover, stattdessen Farbe + Links-Balken */
.sidebar-nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.9rem 1.8rem;
  font-family: var(--schrift-headline);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--farbe-text);
  letter-spacing: 2.5px;
  text-transform: uppercase;
  transition: all var(--transition);
  border-left: 3px solid transparent;
  margin-left: -3px; /* kompensiert sidebar border-left */
}

.sidebar-nav > ul > li > a:hover {
  color: var(--farbe-terrakotta);
  border-left-color: var(--farbe-terrakotta);
  padding-left: 2.1rem;
}

.sidebar-nav > ul > li.aktiv > a {
  color: var(--farbe-burgund);
  border-left-color: var(--farbe-burgund);
  font-weight: 700;
}

/* Dropdown-Pfeil */
.sidebar-nav > ul > li.has-dropdown > a::after,
.sidebar-nav > ul > li.hat-dropdown > a::after {
  content: '+';
  font-size: 1rem;
  font-weight: 300;
  color: var(--farbe-terrakotta);
  flex-shrink: 0;
  font-family: var(--schrift-text);
  transition: transform var(--transition);
  line-height: 1;
}

.sidebar-nav > ul > li.has-dropdown.offen > a::after,
.sidebar-nav > ul > li.hat-dropdown.offen > a::after {
  content: '−';
}

.sidebar-nav > ul > li.mobile-only { display: list-item; }

/* Dropdown-Untermenü — heller Hintergrund mit Sand-Färbung */
.sidebar-nav > ul > li.has-dropdown > ul,
.sidebar-nav > ul > li.hat-dropdown > ul,
.sidebar-nav > ul > li.hat-dropdown > .sidebar-dropdown {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
  background-color: var(--farbe-sand-dunkel);
  list-style: none;
  border-top: 1px solid var(--sidebar-linie);
}

.sidebar-nav > ul > li.has-dropdown.offen > ul,
.sidebar-nav > ul > li.hat-dropdown.offen > ul,
.sidebar-nav > ul > li.hat-dropdown.offen > .sidebar-dropdown {
  max-height: 400px;
}

.sidebar-nav > ul > li.has-dropdown > ul > li > a,
.sidebar-nav > ul > li.hat-dropdown > ul > li > a,
.sidebar-nav > ul > li.hat-dropdown > .sidebar-dropdown > li > a {
  display: block;
  padding: 0.6rem 1.8rem 0.6rem 2.2rem;
  font-family: var(--schrift-headline);
  font-size: 0.65rem;
  color: var(--farbe-text-hell);
  letter-spacing: 1.8px;
  text-transform: uppercase;
  border-bottom: 1px solid var(--farbe-linie);
  transition: all var(--transition);
}

.sidebar-nav > ul > li.has-dropdown > ul > li:last-child > a,
.sidebar-nav > ul > li.hat-dropdown > ul > li:last-child > a { border-bottom: none; }

.sidebar-nav > ul > li.has-dropdown > ul > li > a:hover,
.sidebar-nav > ul > li.hat-dropdown > ul > li > a:hover,
.sidebar-nav > ul > li.hat-dropdown > .sidebar-dropdown > li > a:hover {
  color: var(--farbe-terrakotta);
  padding-left: 2.6rem;
}

/* Termin-Button */
.sidebar-nav .nav-termin-btn {
  border-bottom: none !important;
}

.sidebar-nav .nav-termin-btn > a {
  margin: 0.8rem 1.8rem;
  background-color: var(--farbe-burgund) !important;
  color: var(--farbe-weiss) !important;
  border: none;
  border-left: none !important;
  text-align: center;
  justify-content: center;
  padding: 0.7rem 1rem !important;
  font-size: 0.68rem !important;
  letter-spacing: 2px !important;
}

.sidebar-nav .nav-termin-btn > a:hover {
  background-color: var(--farbe-burgund-tief) !important;
  color: var(--farbe-weiss) !important;
  padding-left: 1rem !important;
  letter-spacing: 2.5px !important;
}

/* Kontaktbereich unten */
.sidebar-kontakt {
  padding: 1.5rem 1.8rem 2rem;
  border-top: 1px solid var(--sidebar-linie);
  flex-shrink: 0;
}

.sidebar-kontakt-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.38rem 0;
  color: var(--farbe-text-hell);
  font-size: 0.78rem;
  font-family: var(--schrift-text);
}

.sidebar-kontakt-item i {
  color: var(--farbe-terrakotta);
  width: 14px;
  flex-shrink: 0;
  font-size: 0.78rem;
}

.sidebar-kontakt-item a {
  color: var(--farbe-text-hell);
  transition: color var(--transition);
}

.sidebar-kontakt-item a:hover { color: var(--farbe-burgund); }

/* Burger-Button (Mobile) — rechts oben */
.burger-btn {
  display: none;
  position: fixed;
  top: 1rem;
  right: 1rem;  /* RECHTS! */
  left: auto;
  z-index: 1500;
  background-color: var(--farbe-burgund);
  border: none;
  border-radius: var(--radius-btn);
  cursor: pointer;
  flex-direction: column;
  gap: 5px;
  transition: all var(--transition);
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
}

.burger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: var(--farbe-weiss);
  transition: all var(--transition);
}

.burger-btn.aktiv span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.burger-btn.aktiv span:nth-child(2) { opacity: 0; }
.burger-btn.aktiv span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.burger-btn:hover { background-color: var(--farbe-terrakotta); }

/* Sidebar-Overlay */
.sidebar-overlay { display: none; position: fixed; inset: 0; background-color: rgba(0, 0, 0, 0.45); z-index: 990; }
.sidebar-overlay.offen { display: block; }

/* ==========================================================================
   CONTAINER / UTILITIES
   ========================================================================== */
.container { max-width: 1200px; margin: 0 auto; padding: 0 3rem; }

/* Section-Label: kleine Linie + Text — anders als v33/v37 */
.section-label {
  display: block;
  font-family: var(--schrift-headline);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--farbe-terrakotta);
  margin-bottom: 0.8rem;
}

/* Dezente Linie — dünner als v33 */
.section-linie, .textblock-linie {
  width: 40px;
  height: 2px;
  background-color: var(--farbe-terrakotta);
  margin: 0.8rem 0 1.8rem;
}

.section-linie-mitte { margin-left: auto; margin-right: auto; }

.section-header {
  text-align: center;
  margin-bottom: 3rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.section-header .section-label { order: 1; }
.section-header h2 { margin-bottom: 1rem; order: 2; }
.section-header p { max-width: 600px; margin: 0 auto; color: var(--farbe-text-hell, #666); font-size: 1.05rem; order: 4; }
/* Fix 2026-08-27: Linie soll UNTER der Ueberschrift stehen statt zwischen Label und h2 */
.section-header .section-linie { margin: 0.4rem auto 1.8rem; order: 3; }

/* 2026-08-26: vorher komplett per display:none ausgeblendet (Sidebar-
   Layout) - dadurch auf JEDER Unterseite unsichtbar (62 Sweep-Treffer).
   Jetzt sichtbar mit einfachem, zum Sidebar-Layout passendem Minimalstil.
   list-style:none direkt auf dem li ergaenzt (Breadcrumb nutzt <ol>, der
   globale Reset trifft nur "ul"). */
.breadcrumb { padding: 1rem 0; font-size: 0.85rem; }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumb li { list-style: none; display: flex; align-items: center; color: var(--farbe-text-hell); }
.breadcrumb li + li::before { content: '/'; margin-right: 0.4rem; color: var(--farbe-text-hell); }
.breadcrumb a { color: var(--farbe-burgund); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ==========================================================================
   SLIDER — Text rechtsbündig, Overlay von links nach rechts
   ========================================================================== */
.slider-bereich {
  position: relative;
  width: 100%;
  height: 620px;
  overflow: hidden;
  background-color: var(--farbe-burgund-tief);
}

.slider-container { position: relative; width: 100%; height: 100%; }

.slider-folie { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.slider-folie.aktiv { display: block; }

.slider-folie > img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

/* Overlay von LINKS nach RECHTS (weil Sidebar rechts ist) */
.slider-folie::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to left,
    rgba(var(--farbe-burgund-rgb), 0.0) 0%,
    rgba(var(--farbe-burgund-rgb), 0.5) 40%,
    rgba(var(--farbe-burgund-tief-rgb), 0.88) 100%
  );
  pointer-events: none;
}

/* Inhalt LINKS ausgerichtet (weit weg von rechter Sidebar) */
.slider-inhalt {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 5rem 0 4rem;
  max-width: 820px;
}

.slider-label {
  font-family: var(--schrift-headline);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 4px;
  text-transform: uppercase;
  color: var(--farbe-terrakotta-hell);
  margin-bottom: 1.2rem;
}

.slider-inhalt h1,
.slider-inhalt h2 {
  color: var(--farbe-weiss);
  font-size: clamp(2rem, 4vw, 3.6rem);
  margin-bottom: 1.2rem;
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-shadow: 0 2px 16px rgba(0,0,0,0.25);
}

.slider-inhalt p {
  color: rgba(255, 255, 255, 0.82);
  font-size: 1.1rem;
  margin-bottom: 2.2rem;
  max-width: 480px;
  font-weight: 300;
}

.slider-aktionen { display: flex; gap: 1.2rem; flex-wrap: wrap; }

/* Punkte — kleine Striche statt Kreise */
.slider-punkte {
  position: absolute;
  bottom: 2.5rem;
  left: 4rem;
  display: flex;
  gap: 0.5rem;
  z-index: 10;
}

.slider-punkt {
  width: 28px; height: 3px;
  background-color: rgba(255, 255, 255, 0.3);
  cursor: pointer; border: none;
  transition: all var(--transition);
  padding: 0; border-radius: 0;
}

.slider-punkt.aktiv {
  background-color: var(--farbe-terrakotta-hell);
  width: 48px;
}

/* Pfeile */
.slider-pfeil, .slider-pfeil-links, .slider-pfeil-rechts {
  position: absolute;
  bottom: 2rem; top: auto;
  transform: none;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  color: var(--farbe-weiss);
  width: 40px; height: 40px;
  border-radius: var(--radius-btn);
  cursor: pointer;
  font-size: 1rem;
  display: flex; align-items: center; justify-content: center;
  transition: all var(--transition);
  z-index: 10;
}

.slider-pfeil-links, #sliderZurueck { right: 5.5rem; left: auto; }
.slider-pfeil-rechts, #sliderVor   { right: 4rem;   left: auto; }

.slider-pfeil:hover, .slider-pfeil-links:hover, .slider-pfeil-rechts:hover {
  background-color: var(--farbe-terrakotta);
  border-color: var(--farbe-terrakotta);
}

/* ==========================================================================
   SEITEN-HEADER
   ========================================================================== */
.seite-header {
  position: relative;
  background-color: var(--farbe-burgund);
  padding: 5rem 0 4rem;
  overflow: hidden;
}

.seite-header:has(.header-bg) { padding: 0; min-height: 300px; }
.seite-header .header-bg { display: block; width: 100%; max-height: 380px; object-fit: cover; }

.seite-header::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to left, rgba(var(--farbe-burgund-rgb), 0.3) 0%, rgba(var(--farbe-burgund-tief-rgb), 0.82) 100%);
  z-index: 1;
}

/* Großes dekoratives "«" im Hintergrund */
.seite-header::before {
  content: '«';
  position: absolute;
  right: 5%;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--schrift-headline);
  font-size: 18rem;
  color: rgba(255, 255, 255, 0.04);
  line-height: 1;
  pointer-events: none;
  z-index: 0;
}

.seite-header .container,
.seite-header-inner {
  position: relative; z-index: 10;
}

.seite-header-inner {
  max-width: 700px; padding: 0 3rem;
}

.seite-header h1 {
  color: var(--farbe-weiss);
  font-size: clamp(2rem, 4vw, 3.2rem);
  margin-bottom: 0.6rem;
}

.seite-header p {
  color: rgba(255, 255, 255, 0.78);
  font-size: 1.05rem;
  font-weight: 300;
}

/* Terrakotta-Unterstreifen */
.seite-header-linie {
  width: 60px; height: 3px;
  background-color: var(--farbe-terrakotta);
  margin: 1rem 0 0;
}

/* ==========================================================================
   SCHNELLINFOS — anders: horizontale Leiste mit starker Typografie
   ========================================================================== */
.schnellinfos-section {
  background-color: var(--farbe-burgund-tief);
  padding: 0;
}

.schnellinfos-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.schnellinfo-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 1.8rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
  transition: background-color var(--transition);
}

.schnellinfo-item:last-child { border-right: none; }
.schnellinfo-item:hover { background-color: rgba(var(--farbe-terrakotta-rgb), 0.15); }

.schnellinfo-icon {
  flex-shrink: 0;
  font-size: 1.2rem;
  color: var(--farbe-terrakotta);
  width: 20px;
  text-align: center;
}

.schnellinfo-text { display: flex; flex-direction: column; gap: 0.15rem; }

.schnellinfo-text strong {
  font-family: var(--schrift-headline);
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  color: var(--farbe-terrakotta);
}

.schnellinfo-text a, .schnellinfo-text span {
  font-size: 0.88rem;
  color: rgba(var(--sidebar-bg-rgb), 0.8);
  transition: color var(--transition);
}

.schnellinfo-text a:hover { color: var(--farbe-terrakotta-hell); }

/* ==========================================================================
   CONTENT SECTIONS — Farbwechsel Weiß ↔ Sand
   ========================================================================== */
.textblock-section { padding: 5rem 0; }


.textblock-inhalt { max-width: 800px; }
.textblock-inhalt h2 { margin-bottom: 0.5rem; }
.textblock-spalten { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; margin-top: 1.5rem; }
.textblock-spalte p { margin-bottom: 1rem; }

.float-section { padding: 5rem 0; overflow: hidden; }
.float-section h2 { margin-bottom: 0.5rem; }
.float-img-links { float: left; width: 42%; margin: 0 2.5rem 1.5rem 0; border-radius: var(--radius-karte); box-shadow: var(--schatten-mittel); }
.float-img-rechts { float: right; width: 42%; margin: 0 0 1.5rem 2.5rem; border-radius: var(--radius-karte); box-shadow: var(--schatten-mittel); }
.img-group-right { float: right; width: 42%; margin: 0 0 1.5rem 2.5rem; display: flex; flex-direction: column; gap: 0.75rem; }
.img-group-right img { width: 100%; border-radius: var(--radius-karte); box-shadow: var(--schatten-mittel); }
.float-section::after { content: ''; display: table; clear: both; }

.bildspalten-section { padding: 5rem 0; }
.bildspalten-grid, .bildspalten-grid-reverse { display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem; align-items: center; }
.bildspalten-grid-reverse .bildspalten-bild { order: 2; }
.bildspalten-grid-reverse .bildspalten-text { order: 1; }
.bildspalten-bild img { width: 100%; box-shadow: var(--schatten-mittel); }
.bildspalten-text h2 { margin-bottom: 0.5rem; }

/* ==========================================================================
   WILLKOMMEN-SECTION — asymmetrisches Layout mit großer Typografie
   ========================================================================== */
.willkommen-section { background-color: var(--farbe-weiss); padding: 6rem 0; }

.willkommen-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; }

.willkommen-bild { position: relative; }

.willkommen-bild img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  box-shadow: var(--schatten-stark);
}

/* Burgund-Box über dem Bild */
.willkommen-badge,
.willkommen-bild-badge {
  position: absolute;
  bottom: -2rem;
  left: -2rem;
  background-color: var(--farbe-burgund);
  color: var(--farbe-weiss);
  padding: 1.5rem 2rem;
  text-align: center;
  font-family: var(--schrift-headline);
}

.willkommen-badge strong,
.willkommen-bild-badge .zahl {
  display: block;
  font-size: 2.4rem;
  color: var(--farbe-weiss);
  line-height: 1;
  letter-spacing: -0.02em;
}

.willkommen-badge span,
.willkommen-bild-badge .text {
  display: block;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 0.3rem;
  color: rgba(255,255,255,0.7);
}

.willkommen-inhalt h2 { margin-bottom: 0.5rem; }

.willkommen-liste {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 1.8rem 0;
}

.willkommen-liste li {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 1rem;
  color: var(--farbe-text-hell);
  font-weight: 300;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--farbe-linie);
}

.willkommen-liste li:last-child { border-bottom: none; }

.willkommen-liste li::before {
  content: '—';
  color: var(--farbe-terrakotta);
  font-family: var(--schrift-headline);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.8;
}

/* Kennzahlen im Willkommen-Block — linienbetontes Raster in der Sprache von
   .praxis-fakten, aber hell: Burgund-Zahl auf Weiss, Terrakotta-Oberkante */
.willkommen-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: 2.2rem;
  border-top: 2px solid var(--farbe-terrakotta);
  border-bottom: 1px solid var(--farbe-linie);
}

.stat-item {
  min-width: 0;
  padding: 1.3rem 1.2rem;
  border-right: 1px solid var(--farbe-linie);
}

.stat-item:first-child { padding-left: 0; }
.stat-item:last-child { border-right: none; padding-right: 0; }

.stat-item strong {
  display: block;
  font-family: var(--schrift-headline);
  font-size: clamp(1.3rem, 1.9vw, 1.8rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--farbe-burgund);
  overflow-wrap: break-word;
  hyphens: manual;
}

.stat-item span {
  display: block;
  margin-top: 0.5rem;
  font-family: var(--schrift-headline);
  font-size: 0.66rem;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--farbe-text-hell);
  overflow-wrap: break-word;
  hyphens: manual;
}

/* Der Abstand haengt am Button, NICHT am Kennzahlen-Block: auf Unterseiten
   fehlt .willkommen-stats komplett, der Button braucht dort trotzdem Luft */
.willkommen-inhalt > .btn { margin-top: 2.2rem; }

/* Sidebar-Design: unterhalb 1200px wird die Inhaltsspalte des zweispaltigen
   Willkommen-Grids zu schmal fuer drei Kennzahlen nebeneinander */
@media (max-width: 1200px) {
  .willkommen-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat-item:nth-child(2) { border-right: none; padding-right: 0; }
  .stat-item:nth-child(3) { padding-left: 0; border-top: 1px solid var(--farbe-linie); }
}

@media (max-width: 480px) {
  .willkommen-stats { grid-template-columns: minmax(0, 1fr); }
  .stat-item,
  .stat-item:first-child,
  .stat-item:last-child { padding: 1.1rem 0; border-right: none; }
  .stat-item + .stat-item { border-top: 1px solid var(--farbe-linie); }
}

/* ==========================================================================
   GRUPPEN-SECTION — Karten mit Burgund-Topbalken, kein Hover-Schatten
   ========================================================================== */
.gruppen-section { padding: 5rem 0; }
.gruppen-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; margin-top: 2.5rem; }

.gruppe-karte {
  background-color: var(--farbe-weiss);
  border: 1px solid var(--farbe-grau-mittel);
  overflow: hidden;
  transition: all var(--transition);
  display: flex;
  flex-direction: column;
  position: relative;
}

/* Burgund-Topbalken */
.gruppe-karte::before {
  content: '';
  display: block;
  height: 3px;
  background-color: var(--farbe-burgund);
  transition: background-color var(--transition);
}

.gruppe-karte:hover { box-shadow: var(--schatten-mittel); }
.gruppe-karte:hover::before { background-color: var(--farbe-terrakotta); }

.gruppe-bild { position: relative; overflow: hidden; aspect-ratio: 3/2; }
.gruppe-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; filter: saturate(0.85); }
.gruppe-karte:hover .gruppe-bild img { transform: scale(1.04); filter: saturate(1); }

.gruppe-bild-icon {
  position: absolute; bottom: 0; right: 0;
  width: 44px; height: 44px;
  background-color: var(--farbe-burgund);
  display: flex; align-items: center; justify-content: center;
}

.gruppe-bild-icon i { color: var(--farbe-weiss); font-size: 0.9rem; }

.gruppe-inhalt { padding: 1.6rem; flex: 1; display: flex; flex-direction: column; }
.gruppe-inhalt h3 { font-size: 0.95rem; color: var(--farbe-burgund); margin-bottom: 0.7rem; }
.gruppe-inhalt p { font-size: 0.9rem; color: var(--farbe-text-hell); flex: 1; margin-bottom: 1.2rem; font-weight: 300; }

.gruppe-mehr {
  font-family: var(--schrift-headline);
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--farbe-terrakotta);
  text-transform: uppercase;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: auto;
  transition: color var(--transition);
}

.gruppe-mehr::after { content: '→'; transition: transform var(--transition); }
.gruppe-mehr:hover { color: var(--farbe-burgund); }
.gruppe-mehr:hover::after { transform: translateX(4px); }

.gruppe-karte:not(:has(.gruppe-bild)) .gruppe-inhalt { padding: 2rem; }
.gruppe-karte:not(:has(.gruppe-bild))::before { height: 4px; }

/* ==========================================================================
   HIGHLIGHT-SECTION — Burgund-Hintergrund mit weißen Kacheln
   ========================================================================== */
.highlight-section {
  background-color: var(--farbe-burgund);
  padding: 5.5rem 0;
  position: relative;
}

/* Subtile Textur-Andeutung */
.highlight-section::after {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 60px,
    rgba(255,255,255,0.015) 60px,
    rgba(255,255,255,0.015) 61px
  );
  pointer-events: none;
}

.highlight-section .section-label { color: var(--farbe-terrakotta-hell); }
.highlight-section h2 { color: var(--farbe-weiss); }

.vorteile-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 3rem;
  background-color: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.1);
}

.vorteil-item {
  padding: 2.5rem 1.8rem;
  background-color: var(--farbe-burgund);
  transition: background-color var(--transition);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.vorteil-item:hover { background-color: var(--farbe-burgund-mittel); }

.vorteil-icon {
  width: 44px; height: 44px;
  background: transparent;
  border: 1.5px solid var(--farbe-terrakotta);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 1.5rem;
}

.vorteil-icon i { color: var(--farbe-terrakotta); font-size: 1.1rem; }

.vorteil-item h3, .vorteil-item h4 {
  color: var(--farbe-weiss);
  font-size: 0.82rem;
  margin-bottom: 0.8rem;
  letter-spacing: 2px;
}

.vorteil-item p {
  color: rgba(var(--sidebar-bg-rgb), 0.6);
  font-size: 0.88rem;
  text-align: left;
  margin-bottom: 0;
  font-weight: 300;
}

/* ==========================================================================
   ZITAT-SECTION — Burgund Hintergrund mit sehr großer Typografie
   ========================================================================== */
.natur-zitat-section {
  /* 2026-08-26: vorher identisch --farbe-sand wie .faq-section - eine der
     beiden Alternationsfarben, kollidierte mit direkt benachbarten freien
     Sections (Sweep-Fund, Seite digitale-abdrucknahme). Nur dunkler per
     color-mix (nie heller). */
  background-color: color-mix(in srgb, var(--farbe-sand) 88%, black 12%);
  padding: 6rem 0;
  position: relative;
}

.natur-zitat-section::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background-color: var(--farbe-terrakotta);
}

.zitat-inhalt { max-width: 800px; margin: 0 auto; padding: 0 3rem; }

.zitat-anfuehrung {
  display: block;
  font-family: var(--schrift-headline);
  font-size: 6rem;
  color: var(--farbe-terrakotta);
  line-height: 0.6;
  margin-bottom: 1.2rem;
  opacity: 0.4;
}

.zitat-text {
  font-family: var(--schrift-headline);
  font-size: clamp(1.5rem, 2.8vw, 2.3rem);
  color: var(--farbe-burgund);
  line-height: 1.5;
  font-weight: 300;
  margin-bottom: 2rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.zitat-quelle {
  font-family: var(--schrift-headline);
  color: var(--farbe-terrakotta);
  font-size: 0.68rem;
  letter-spacing: 3px;
  text-transform: uppercase;
}

/* ==========================================================================
   PARALLAX / CTA
   ========================================================================== */
.reine-parallax-section { height: 280px; background-size: cover; background-position: center; background-attachment: fixed; position: relative; overflow: hidden; }
.reine-parallax-overlay { position: absolute; inset: 0; background: rgba(var(--farbe-burgund-tief-rgb), 0.6); }
.parallax-helper-img { display: none; }

.cta-parallax-section { position: relative; padding: 7rem 0; overflow: hidden; background-size: cover; background-position: center; background-attachment: fixed; }
.cta-parallax-overlay { position: absolute; inset: 0; background: linear-gradient(to left, rgba(var(--farbe-burgund-rgb), 0.5) 0%, rgba(var(--farbe-burgund-tief-rgb), 0.92) 100%); z-index: 0; }
.cta-parallax-inhalt { position: relative; z-index: 1; text-align: left; max-width: 680px; }
.cta-parallax-inhalt h2 { color: var(--farbe-weiss); font-size: clamp(1.8rem, 3vw, 3rem); margin-bottom: 1.2rem; }
.cta-parallax-inhalt p { color: rgba(var(--sidebar-bg-rgb), 0.8); font-size: 1.05rem; font-weight: 300; }
.cta-aktionen, .cta-buttons, .slider-aktionen { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.5rem; }

/* ==========================================================================
   PRAXIS-SECTION / KENNZAHLEN
   ========================================================================== */
.praxis-section { position: relative; padding: 6rem 0; background-size: cover; background-position: center; background-attachment: fixed; background-color: var(--farbe-burgund-tief); overflow: hidden; }
.praxis-section::before { content: ''; position: absolute; inset: 0; background: rgba(var(--farbe-burgund-tief-rgb), 0.88); z-index: 0; }
.praxis-inhalt { position: relative; z-index: 1; }
.praxis-inhalt h2 { color: var(--farbe-weiss); font-size: clamp(1.8rem, 3vw, 2.8rem); margin-bottom: 0.8rem; }
.praxis-inhalt > p { color: rgba(var(--sidebar-bg-rgb), 0.72); max-width: 600px; font-weight: 300; margin-bottom: 3rem; }

.praxis-fakten, .praxis-fakten-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid rgba(255,255,255,0.12);
}

.praxis-fakt {
  padding: 2.5rem 2rem;
  text-align: left;
  border-right: 1px solid rgba(255,255,255,0.12);
  transition: background-color var(--transition);
}

.praxis-fakt:last-child { border-right: none; }
.praxis-fakt:hover { background-color: rgba(var(--farbe-terrakotta-rgb), 0.15); }

.praxis-fakt-zahl {
  font-family: var(--schrift-headline);
  font-size: 3.2rem;
  font-weight: 700;
  color: var(--farbe-terrakotta-hell);
  display: block;
  line-height: 1;
  margin-bottom: 0.6rem;
  letter-spacing: -0.02em;
}

.praxis-fakt-text, .praxis-fakt-label {
  font-family: var(--schrift-headline);
  color: rgba(var(--sidebar-bg-rgb), 0.65);
  font-size: 0.7rem;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

/* ==========================================================================
   TEAM / BEHANDLER
   ========================================================================== */
.team-section { padding: 5rem 0; }
.team-section:nth-of-type(even) { background: var(--farbe-sand-dunkel); }
.team-grid { display: flex; flex-direction: column; gap: 2.5rem; }
.team-foto-karte { display: flex; flex-direction: row; align-items: flex-start; gap: 2.5rem; margin-bottom: 2.5rem; }
.team-foto-karte:last-child { margin-bottom: 0; }
.team-foto-karte .team-bild { flex-shrink: 0; width: 240px; height: 280px; border-radius: var(--radius-karte); overflow: hidden; box-shadow: var(--schatten-sanft); outline: 2px solid var(--farbe-burgund); outline-offset: 3px; }
.team-foto-karte .team-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.4s ease; display: block; }
.team-foto-karte:hover .team-bild img { transform: scale(1.05); }
.team-foto-karte .team-info { flex: 1; background: var(--farbe-weiss); border-radius: var(--radius-karte); box-shadow: var(--schatten-sanft); border: 1px solid var(--farbe-linie); padding: 2rem 2.5rem; }
.team-foto-karte .team-name { font-size: 1.3rem; font-weight: 700; color: var(--farbe-burgund-tief); margin-bottom: 0.3rem; }
.team-foto-karte .team-titel { font-size: 0.82rem; color: var(--farbe-terrakotta); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; display: block; }
.team-vita { font-size: 0.88rem; color: var(--farbe-text-hell); line-height: 1.7; }
.team-vita ul { list-style: none; margin-top: 0.8rem; }
.team-vita ul li { position: relative; padding-left: 1rem; margin-bottom: 0.35rem; list-style: none; }
.team-vita ul li::before { content: '›'; position: absolute; left: 0; color: var(--farbe-terrakotta); }
.team-bild { height: 260px; overflow: hidden; flex-shrink: 0; }
.team-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center top; transition: transform 0.5s ease; }
.team-karte { background: var(--farbe-weiss); border: 1px solid var(--farbe-linie); border-radius: var(--radius-karte); overflow: hidden; box-shadow: var(--schatten-sanft); transition: box-shadow var(--transition); }
.team-karte:hover { box-shadow: var(--schatten-mittel); }
.team-info { padding: 1.5rem; }
.team-name { font-family: var(--schrift-headline); font-size: 1.05rem; color: var(--farbe-burgund); margin-bottom: 0.2rem; font-weight: 600; }
.team-titel { font-size: 0.82rem; color: var(--farbe-terrakotta); margin-bottom: 0.8rem; }
.team-rolle { background: var(--farbe-burgund); color: var(--farbe-weiss); font-size: 0.7rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; padding: 0.4rem 1.2rem; }

/* --------------------------------------------------------------------------
   TEAM-KACHELN — Karten-Grid für team.html
   -------------------------------------------------------------------------- */
.team-kacheln-section { padding: 5rem 0; }
.team-kacheln-section:nth-of-type(even) { background: var(--farbe-sand-dunkel); }
.team-kacheln-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.75rem; }
.team-kachel { background: var(--farbe-weiss); border-radius: var(--radius-karte); overflow: hidden; border: 1px solid var(--farbe-linie); box-shadow: var(--schatten-sanft); transition: transform 0.28s ease, box-shadow 0.28s ease; display: flex; flex-direction: column; }
.team-kachel:hover { transform: translateY(-6px); box-shadow: var(--schatten-mittel); }
.team-kachel-bild { position: relative; aspect-ratio: 1 / 1; overflow: hidden; }
.team-kachel-bild img { width: 100%; height: 100%; object-fit: cover; object-position: center 20%; display: block; transition: transform 0.45s ease; }
.team-kachel:hover .team-kachel-bild img { transform: scale(1.06); }
.team-kachel-bild-overlay { position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 55%, rgba(0,0,0,0.25) 100%); pointer-events: none; }
.team-kachel-info { padding: 1.25rem 1.2rem 1.5rem; flex: 1; display: flex; flex-direction: column; gap: 0.2rem; }
.team-kachel-abteilung { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--farbe-terrakotta); margin: 0; }
.team-kachel-name { font-size: 1.08rem; font-weight: 700; color: var(--farbe-burgund-tief); margin: 0.1rem 0 0; line-height: 1.3; }
.team-kachel-rolle { font-size: 0.82rem; color: var(--farbe-text-hell); margin: 0; }
.team-kachel-beschreibung { font-size: 0.82rem; color: var(--farbe-text-hell); line-height: 1.55; margin: 0.6rem 0 0; padding-top: 0.6rem; border-top: 1px solid var(--farbe-linie); }

@media (max-width: 768px) {
  .team-foto-karte { flex-direction: column; }
  .team-foto-karte .team-bild { width: 100%; height: auto; }
  .team-foto-karte .team-bild img { height: auto; min-height: unset; }
  .team-kacheln-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .team-kacheln-grid { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FAQ-SECTION
   ========================================================================== */
.faq-section { padding: 5.5rem 0; }
.faq-liste { margin-top: 2.5rem; display: flex; flex-direction: column; }

.faq-item {
  background-color: transparent;
  border-bottom: 1px solid var(--farbe-grau-mittel);
  overflow: hidden;
  transition: all var(--transition);
}

.faq-item:first-child { border-top: 1px solid var(--farbe-grau-mittel); }

.faq-frage {
  padding: 1.4rem 0;
  font-family: var(--schrift-headline);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--farbe-burgund);
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  user-select: none;
  transition: color var(--transition);
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.faq-frage:hover { color: var(--farbe-terrakotta); }

.faq-frage::after {
  content: '+';
  font-size: 1.2rem;
  font-weight: 300;
  color: var(--farbe-terrakotta);
  flex-shrink: 0;
  font-family: var(--schrift-text);
}

.faq-item.offen .faq-frage { color: var(--farbe-burgund); }
.faq-item.offen .faq-frage::after { content: '−'; }

.faq-antwort { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0; }
.faq-item.offen .faq-antwort { max-height: 500px; padding-bottom: 1.5rem; }
.faq-antwort-inner { font-size: 1rem; color: var(--farbe-text-hell); font-weight: 300; line-height: 1.8; }

/* ==========================================================================
   KONTAKT-CTA-SECTION
   ========================================================================== */
.kontakt-cta-section {
  /* 2026-08-26: vorher identisch --farbe-burgund-tief wie .slider-bereich -
     verschmolz sichtbar wenn beide direkt aufeinanderfolgen (Seite home).
     Nur dunkler per color-mix (nie heller). */
  background-color: color-mix(in srgb, var(--farbe-burgund-tief) 78%, black 22%);
  padding: 3.5rem 0;
}
.kontakt-cta-grid { display: grid; grid-template-columns: repeat(3, 1fr); }

.kontakt-cta-item {
  display: flex; align-items: center; gap: 1.5rem;
  padding: 1.5rem 2.5rem;
  border-right: 1px solid rgba(255,255,255,0.08);
}

.kontakt-cta-item:last-child { border-right: none; }
.kontakt-cta-item:hover { background-color: rgba(var(--farbe-terrakotta-rgb), 0.12); }

.kontakt-cta-icon {
  flex-shrink: 0;
  font-size: 1.5rem;
  color: var(--farbe-terrakotta);
  width: 28px;
  text-align: center;
}

.kontakt-cta-text { display: flex; flex-direction: column; gap: 0.2rem; }
.kontakt-cta-text strong { font-family: var(--schrift-headline); font-size: 0.62rem; text-transform: uppercase; letter-spacing: 2px; color: var(--farbe-terrakotta); font-weight: 700; }
.kontakt-cta-text a { color: rgba(var(--sidebar-bg-rgb), 0.85); font-size: 0.98rem; font-weight: 600; transition: color var(--transition); }
.kontakt-cta-text a:hover { color: var(--farbe-terrakotta-hell); }

/* ==========================================================================
   ANFAHRT + KARTE
   ========================================================================== */
.anfahrt-a { background-color: var(--farbe-weiss); padding: 5.5rem 0; }
.textblock-section + .anfahrt-a, .float-section + .anfahrt-a, .bildspalten-section + .anfahrt-a, .gruppen-section + .anfahrt-a { background-color: var(--farbe-sand); }
.anfahrt-a-grid { display: grid; grid-template-columns: 1fr 1.3fr; gap: 5rem; align-items: start; }
.anfahrt-a-info { display: flex; flex-direction: column; gap: 1.5rem; }
.anfahrt-a-info h2 { margin-bottom: 0; }
.anfahrt-a-linie { width: 40px; height: 2px; background-color: var(--farbe-terrakotta); margin: 0.5rem 0; }
.anfahrt-a-kontakt-liste { list-style: none; display: flex; flex-direction: column; gap: 1rem; }
.anfahrt-a-kontakt-liste li { display: flex; align-items: flex-start; gap: 1rem; font-size: 0.95rem; color: var(--farbe-text-hell); padding-bottom: 1rem; border-bottom: 1px solid var(--farbe-linie); font-weight: 300; }
.anfahrt-a-kontakt-liste li:last-child { border-bottom: none; }
.anfahrt-a-kontakt-liste .ico { width: 16px; text-align: center; flex-shrink: 0; margin-top: 2px; color: var(--farbe-terrakotta); font-size: 0.9rem; }
.anfahrt-a-kontakt-liste a { color: var(--farbe-burgund); font-weight: 600; transition: color var(--transition); }
.anfahrt-a-kontakt-liste a:hover { color: var(--farbe-terrakotta); }

.btn-routenplaner { display: inline-flex; align-items: center; gap: 0.6rem; padding: 0.75rem 2rem; background-color: var(--farbe-burgund); color: var(--farbe-weiss); border-radius: var(--radius-btn); font-family: var(--schrift-headline); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2.5px; border: 2px solid var(--farbe-burgund); transition: all var(--transition); }
.btn-routenplaner:hover { background-color: transparent; color: var(--farbe-burgund); }
#map-zzam { width: 100%; height: 440px; box-shadow: var(--schatten-mittel); background-color: var(--farbe-sand); }

/* ==========================================================================
   KONTAKT-LAYOUT / FORMULAR
   ========================================================================== */
.kontakt-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: 5rem; align-items: start; }
.kontakt-info h2, .kontakt-form h2 { font-size: clamp(1.4rem,2.5vw,2rem); margin-bottom: 1.5rem; }

.kontakt-info-item { display: flex; align-items: flex-start; gap: 1.2rem; padding: 1.2rem 0; border-bottom: 1px solid var(--farbe-linie); }
.kontakt-info-item:last-child { border-bottom: none; }

.kontakt-info-icon {
  width: 16px; text-align: center;
  color: var(--farbe-terrakotta);
  font-size: 1rem;
  flex-shrink: 0; margin-top: 3px;
}

.kontakt-info-text { display: flex; flex-direction: column; gap: 0.3rem; }
.kontakt-info-text strong { font-family: var(--schrift-headline); font-size: 0.68rem; color: var(--farbe-burgund); text-transform: uppercase; letter-spacing: 2px; }
.kontakt-info-text a { color: var(--farbe-terrakotta); font-weight: 600; transition: color var(--transition); }
.kontakt-info-text a:hover { color: var(--farbe-burgund); }

.oeffnungszeiten-tabelle { border-collapse: collapse; font-size: 0.9rem; color: var(--farbe-text-hell); width: 100%; }
.oeffnungszeiten-tabelle td, .oeffnungszeiten-tabelle th { padding: 0.3rem 0.8rem 0.3rem 0; }
.oeffnungszeiten-tabelle td:first-child, .oeffnungszeiten-tabelle th { font-family: var(--schrift-headline); font-weight: 700; color: var(--farbe-burgund); min-width: 100px; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 1px; }

.form-gruppe { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 1.2rem; }
.form-gruppe label { font-family: var(--schrift-headline); font-size: 0.68rem; font-weight: 700; color: var(--farbe-burgund); letter-spacing: 2px; text-transform: uppercase; }
.form-gruppe input, .form-gruppe select, .form-gruppe textarea { padding: 0.75rem 1rem; border: none; border-bottom: 2px solid var(--farbe-grau-mittel); border-radius: 0; font-family: var(--schrift-text); font-size: 1rem; color: var(--farbe-text); background-color: transparent; transition: border-color var(--transition); width: 100%; font-weight: 300; }
.form-gruppe input:focus, .form-gruppe select:focus, .form-gruppe textarea:focus { outline: none; border-bottom-color: var(--farbe-burgund); }
.form-gruppe textarea { min-height: 130px; resize: vertical; border: 2px solid var(--farbe-grau-mittel); padding: 0.75rem 1rem; }
.form-gruppe textarea:focus { border-color: var(--farbe-burgund); }

.form-datenschutz { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 1.5rem; }
.form-datenschutz input[type="checkbox"] { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; accent-color: var(--farbe-burgund); }
.form-datenschutz label { font-size: 0.85rem; color: var(--farbe-text-hell); line-height: 1.6; font-weight: 300; }
.form-datenschutz a { color: var(--farbe-burgund); text-decoration: underline; }
.form-feld-fehler { border-bottom-color: var(--farbe-fehler) !important; }
.form-meldung { padding: 1rem 0; font-size: 0.92rem; font-weight: 600; margin-bottom: 1.2rem; display: none; }
.form-meldung.erfolg { display: block; color: var(--farbe-burgund); border-bottom: 2px solid var(--farbe-burgund); }
.form-meldung.fehler { display: block; color: var(--farbe-fehler); border-bottom: 2px solid var(--farbe-fehler); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer { background-color: var(--farbe-burgund-tief); padding: 5rem 0 0; }

.footer-grid {
  max-width: 1200px; margin: 0 auto;
  padding: 0 3rem 4rem;
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 2fr;
  gap: 3.5rem;
}

.footer-col h3 {
  font-family: var(--schrift-headline);
  color: var(--farbe-terrakotta-hell);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid rgba(var(--farbe-terrakotta-rgb), 0.3);
}

.footer-col p { color: rgba(var(--sidebar-bg-rgb), 0.6); font-size: 0.9rem; font-weight: 300; line-height: 1.9; margin-bottom: 0.5rem; }

.footer-col ul li a, .footer-col a { display: block; color: rgba(var(--sidebar-bg-rgb), 0.6); font-size: 0.9rem; padding: 0.3rem 0; transition: all var(--transition); font-weight: 300; }
.footer-col ul li a:hover, .footer-col a:hover { color: var(--farbe-terrakotta-hell); padding-left: 0.5rem; }

.footer-logo-text { font-family: var(--schrift-headline); font-size: 1.1rem; font-weight: 700; color: var(--farbe-weiss); margin-bottom: 1.2rem; letter-spacing: 2px; text-transform: uppercase; }

.footer-kontakt-item { display: flex; align-items: center; gap: 0.8rem; padding: 0.4rem 0; color: rgba(var(--sidebar-bg-rgb), 0.6); font-size: 0.9rem; font-weight: 300; }
.footer-kontakt-item i { color: var(--farbe-terrakotta); width: 16px; flex-shrink: 0; font-size: 0.85rem; }

.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border: 1px solid rgba(var(--farbe-terrakotta-rgb), 0.35); color: rgba(var(--sidebar-bg-rgb), 0.55) !important; font-size: 0.85rem; transition: all var(--transition); padding: 0 !important; border-radius: var(--radius-btn); }
.footer-social a:hover { background-color: var(--farbe-terrakotta) !important; border-color: var(--farbe-terrakotta) !important; color: var(--farbe-weiss) !important; padding-left: 0 !important; }

.footer-bottom { border-top: 1px solid rgba(255,255,255,0.07); padding: 1.4rem 3rem; }
.footer-bottom-inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--schrift-headline); font-size: 0.65rem; color: rgba(var(--sidebar-bg-rgb), 0.35); letter-spacing: 1.5px; text-transform: uppercase; }
.footer-bottom-inner a { color: rgba(var(--sidebar-bg-rgb), 0.35); transition: color var(--transition); }
.footer-bottom-inner a:hover { color: var(--farbe-terrakotta-hell); }
footer[role="contentinfo"] .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 2fr; gap: 3.5rem; }
footer[role="contentinfo"] { background-color: var(--farbe-burgund-tief); padding: 5rem 0 0; }
.footer-adresse { font-style: normal; color: rgba(var(--sidebar-bg-rgb), 0.6); font-size: 0.9rem; line-height: 1.9; font-weight: 300; }
.footer-adresse a { color: rgba(var(--sidebar-bg-rgb), 0.6); }
.footer-adresse a:hover { color: var(--farbe-terrakotta-hell); }
.footer-schriftzug-zeile1 { font-family: var(--schrift-headline); font-size: 1rem; font-weight: 700; color: var(--farbe-weiss); margin-bottom: 0.25rem; letter-spacing: 2px; text-transform: uppercase; }
.footer-schriftzug-zeile2 { font-family: var(--schrift-headline); font-size: 0.6rem; color: var(--farbe-terrakotta-hell); letter-spacing: 3px; text-transform: uppercase; margin-bottom: 1.2rem; }
.footer-oeffnung { border-collapse: collapse; font-size: 0.88rem; color: rgba(var(--sidebar-bg-rgb), 0.6); font-weight: 300; }
.footer-oeffnung td { padding: 0.22rem 1rem 0.22rem 0; }
.footer-oeffnung td:first-child { font-family: var(--schrift-headline); color: var(--farbe-terrakotta-hell); font-weight: 700; min-width: 55px; font-size: 0.68rem; letter-spacing: 1px; text-transform: uppercase; }


/* Öffnungszeiten-Tabelle im Footer */
.site-footer .oeffnungszeiten-tabelle td, .site-footer .oeffnungszeiten-tabelle th {
  color: rgba(var(--sidebar-bg-rgb), 0.6);
}

.site-footer .oeffnungszeiten-tabelle td:first-child, .site-footer .oeffnungszeiten-tabelle th {
  color: var(--farbe-terrakotta-hell);
}
/* ==========================================================================
   SCROLL-TO-TOP + SCROLL-ANIMATE
   ========================================================================== */
.scroll-top {
  position: fixed;
  bottom: 2rem;
  left: 2rem;  /* LINKS (Sidebar ist rechts!) */
  right: auto;
  width: 44px; height: 44px;
  background-color: var(--farbe-burgund);
  color: var(--farbe-weiss);
  border: none; border-radius: var(--radius-btn);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  box-shadow: var(--schatten-mittel);
  opacity: 0; visibility: hidden;
  transition: all var(--transition); z-index: 500;
}

.scroll-top.sichtbar { opacity: 1; visibility: visible; }
.scroll-top:hover { background-color: var(--farbe-terrakotta); transform: translateY(-3px); }

.scroll-animate { opacity: 0; transform: translateY(25px); transition: opacity 0.6s ease, transform 0.6s ease; }
.scroll-animate.sichtbar { opacity: 1; transform: translateY(0); }

/* Galerie */
.galerie { padding: 4.5rem 0; background: var(--farbe-sand-dunkel); }
.galerie-grid { display: grid; grid-template-columns: repeat(4,1fr); grid-template-rows: auto auto; gap: 0.8rem; max-width: 1200px; margin: 0 auto; padding: 0 3rem; }
.galerie-item { overflow: hidden; position: relative; background: var(--farbe-burgund); }
.galerie-item:first-child { grid-column: span 2; grid-row: span 2; }
.galerie-bild { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; min-height: 180px; filter: saturate(0.7); }
.galerie-item:first-child .galerie-bild { min-height: 360px; }
.galerie-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0); display: flex; align-items: center; justify-content: center; transition: background var(--transition); }
.galerie-item:hover .galerie-bild { transform: scale(1.05); filter: saturate(1); }
.galerie-item:hover .galerie-overlay { background: rgba(var(--farbe-burgund-rgb), 0.35); }
.galerie .section-header { text-align: left; align-items: flex-start; margin: 0 0 2rem; max-width: 640px; padding: 0 3rem; }
.section-beschreibung { font-size: 1rem; color: var(--farbe-text-hell); line-height: 1.8; font-weight: 300; }

:focus-visible { outline: 2px solid var(--farbe-terrakotta); outline-offset: 3px; border-radius: 0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1200px) {
  :root { --sidebar-breite: 240px; }
  .gruppen-grid { grid-template-columns: repeat(2,1fr); }
  .footer-grid, footer[role="contentinfo"] .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem; }
  .vorteile-grid { grid-template-columns: repeat(2,1fr); gap: 0; }
  .praxis-fakten, .praxis-fakten-grid { grid-template-columns: repeat(2,1fr); }
  .schnellinfos-grid { grid-template-columns: repeat(2,1fr); }
  .galerie-grid { grid-template-columns: repeat(2,1fr); padding: 0 2rem; }
  .galerie-item:first-child { grid-column: span 2; grid-row: span 1; }
  .galerie-item:first-child .galerie-bild { min-height: 280px; }
}

@media (max-width: 900px) {
  .willkommen-grid, .bildspalten-grid, .bildspalten-grid-reverse, .textblock-spalten, .anfahrt-a-grid, .kontakt-layout { grid-template-columns: 1fr; gap: 3rem; }
  .bildspalten-grid-reverse .bildspalten-bild, .bildspalten-grid-reverse .bildspalten-text { order: 0; }
  .float-img-links, .float-img-rechts, .img-group-right { float: none; width: 100%; margin: 0 0 1.5rem 0; }
}

/* Mobile — Sidebar schiebt von rechts rein */
@media (max-width: 768px) {
  body { margin-right: 0; }

  .site-sidebar {
    transform: translateX(100%);  /* Von rechts raus */
    transition: transform 0.4s ease;
    width: 290px;
    z-index: 1100;
  }

  .site-sidebar.offen { transform: translateX(0); }

  .burger-btn { display: flex; }

  /* Slider-Inhalt (Label+H1+Text+Buttons) braucht auf Mobile deutlich mehr
     Platz als die alte Fixhoehe bot - sonst wird die H1 durch das
     overflow:hidden von .slider-bereich oben abgeschnitten (nur die
     Unterlaengen der Buchstaben blieben sichtbar) */
  .slider-bereich { height: 580px; }
  .slider-inhalt { padding: 0 2rem 0 2rem; }
  .slider-inhalt h1, .slider-inhalt h2 { font-size: 1.6rem; }

  .gruppen-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-grid, footer[role="contentinfo"] .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
  .slider-pfeil, .slider-pfeil-links, .slider-pfeil-rechts { display: none; }
  .vorteile-grid { grid-template-columns: 1fr 1fr; }
  .praxis-fakten, .praxis-fakten-grid { grid-template-columns: 1fr 1fr; }
  .kontakt-cta-grid { grid-template-columns: 1fr; }
  .kontakt-cta-item { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .kontakt-cta-item:last-child { border-bottom: none; }
  .schnellinfos-grid { grid-template-columns: 1fr 1fr; }
  .schnellinfo-item { border-right: none; }
  .galerie-grid { grid-template-columns: repeat(2,1fr); padding: 0 1rem; }
}

@media (max-width: 480px) {
  /* siehe Kommentar bei der 768px-Regel: Groessere feste Hoehe statt der alten, zu
     knapper Hoehe, sonst wird die H1 im Slider oben abgeschnitten */
  .slider-bereich { height: 580px; }
  .cta-buttons, .cta-aktionen, .slider-aktionen { flex-direction: column; align-items: flex-start; }
  .vorteile-grid, .praxis-fakten, .praxis-fakten-grid { grid-template-columns: 1fr; }
  .schnellinfos-grid { grid-template-columns: 1fr; }
  .galerie-grid { grid-template-columns: 1fr; }
  .galerie-item:first-child { grid-column: span 1; }
}

.oeffnungszeiten-tabelle th { text-align: left; font-weight: inherit; }

/* CMS-Freitext-Listen (redaktionell eingefuegte <ul> ohne Klasse):
   runde, eingerueckte, goldene/farbige Bullets statt Browser-Default
   bzw. zusammenhangloser Marker durch den globalen Reset */
main ul:not([class]) {
  list-style: disc !important;
  padding-left: 1.4em;
  margin: 0.8em 0;
}

main ul:not([class]) li {
  margin-bottom: 0.35em;
}

main ul:not([class]) li::marker {
  color: currentColor;
}

/* ==========================================================================
   FARBWECHSEL (Sektionen abwechselnd) - 2026-08-26
   Ersetzt ZWEI alte, unabhaengige :is()-Ketten (allgemeine Kette fuer
   textblock/float/bildspalten/gruppen-section UND eine separate zweite
   Kette nur fuer .faq-section) - main29-Bugtyp. Jetzt wie main29/32: JS
   (js/main38.js) läuft über main > section, überspringt fest eingefärbte
   Sections (.highlight-section, .cta-parallax-section, .praxis-section,
   .slider-bereich, .natur-zitat-section, .reine-parallax-section,
   .kontakt-cta-section) bei der Zählung und weist den übrigen "freien"
   Sections abwechselnd .js-bg-weiss/.js-bg-sand zu. :where() bleibt als
   0-Spezifitäts-CSS-only-Fallback.
   ========================================================================== */
:where(main > section:nth-of-type(odd))  { background-color: var(--farbe-weiss); }
:where(main > section:nth-of-type(even)) { background-color: var(--farbe-sand); }

.js-bg-weiss { background-color: var(--farbe-weiss); }
.js-bg-sand  { background-color: var(--farbe-sand); }

/* --------------------------------------------------------------------------
   RANDLEISTE (Suche + Sprachumschalter, geteiltes global.css)
   Ergaenzt 2026-09-02. Dieses Design hat eine eigene, fest stehende Seitenleiste
   am rechten Rand (.site-sidebar, --sidebar-breite). Die geteilte Randleiste
   klebt ebenfalls an right:0 und lag dadurch auf dem Sidebar-Menue - ihre 34px
   nahmen dort die Klickflaeche der Menuepunkte weg. Sie sitzt jetzt an der
   linken Kante der Sidebar. Unterhalb von 768px faehrt die Sidebar per
   translateX aus dem Bild, dort gilt wieder der rechte Rand.
   -------------------------------------------------------------------------- */
.sprungbrett-sidebar {
  right: var(--sidebar-breite);
}

@media (max-width: 768px) {
  .sprungbrett-sidebar { right: 0; }
}