/* ======================================================================
   CLAUDE: header.css - Header und Navigation (Desktop + Mobile)
   ======================================================================

   CLAUDE: Zweck
   -------
   CLAUDE: Implementiert das Header-Layout mit Logo, Navigation und CTA
   CLAUDE: Enthält sowohl Desktop- als auch Mobile-Navigation
   CLAUDE: Sticky-Header-Funktionalität per CSS vorbereitet (JS aktiviert)

   CLAUDE: Inhalt
   -------
   CLAUDE: 1) Header-Container (.site-header)
   CLAUDE: 2) Topleiste (.header-top)
   CLAUDE: 3) Haupt-Header (.header-main) mit Logo, Nav, CTA
   CLAUDE: 4) Desktop-Navigation (.site-navigation)
   CLAUDE: 5) Mobile-Burger-Button (.mobile-menu-toggle)
   CLAUDE: 6) Mobile-Navigation (.mobile-navigation)
   CLAUDE: 7) Sticky-Header-Styles (.is-sticky)
   CLAUDE: 8) Responsive Breakpoints (Mobile/Tablet/Desktop)

   CLAUDE: Verwendung
   ----------
   CLAUDE: Header wird in header.php geladen via template-part
   CLAUDE: Customizer-Settings steuern Farben, Texte, CTA
   CLAUDE: Mobile-Toggle per JS (header.js) aktiviert

   CLAUDE: Anpassen
   --------
   CLAUDE: - Header-Höhe: Ändere --header-height
   CLAUDE: - Sticky-Offset: Ändere --sticky-offset
   CLAUDE: - Breakpoints: Passe @media-Queries an (aktuell: 1024px)
   CLAUDE: - Farben: Nutze CSS-Variablen aus base.css

   ====================================================================== */

/* ======================================================================
   CLAUDE: 1) HEADER-CONTAINER
   CLAUDE: Haupt-Container für gesamten Header (Topleiste + Main-Header)
   ====================================================================== */

/* CLAUDE: CSS-Variablen für Header */
:root {
  /* CLAUDE: Header-Höhe (Desktop) */
  --header-height: 40px;

  /* CLAUDE: Header-Höhe (Mobile) */
  --header-height-mobile: 64px;

  /* CLAUDE: Sticky-Offset (Abstand nach oben beim Scrollen) */
  --sticky-offset: 0px;

  /* CLAUDE: Transition für Sticky-Animation */
  --header-transition: all 0.3s ease;

  /* CLAUDE: Top-Bar-Höhe (für Layout-Fix bei position: fixed) */
  /* CLAUDE: AKTUALISIERT: Höhe erhöht wegen größerem Padding */
  /* CLAUDE: Berechnung: padding-block (var(--space-sm) = 8-16px * 2) + Content (20px) + Border (2px) */
  /* CLAUDE: Desktop: 16px * 2 + 20px + 2px = 54px → aufgerundet 56px */
  /* CLAUDE: Mobile: 8px * 2 + 20px + 2px = 38px (responsive via clamp) */
  /* CLAUDE: Ändern: Wert anpassen, wenn Top-Bar-Padding oder Font-Size geändert wird */
  --header-topbar-height: 56px;

  /* ===================================================================
     CLAUDE: Mobile-Navigation Panel-Variablen
     CLAUDE: Ermöglicht einfaches Umschalten zwischen Bottom-Sheet und Off-Canvas
     =================================================================== */

  /* CLAUDE: BOTTOM-SHEET-VARIANTE (Standard) */
  /* CLAUDE: Panel erscheint von unten, max. 80vh Höhe, moderne Mobile-UX */

  /* CLAUDE: Panel-Höhe: clamp() für responsive Höhe zwischen 320px und 80vh, max. 600px */
  /* CLAUDE: Anpassen: Erhöhe 80vh für höheres Panel oder senke für kompakteres Panel */
  --mobile-nav-height: clamp(320px, 80vh, 600px);

  /* CLAUDE: Panel-Breite: min() für max-width auf kleinen Screens */
  /* CLAUDE: Anpassen: Ändere 640px für breitere/schmalere Panels */
  --mobile-nav-width: min(100vw, 640px);

  /* CLAUDE: Border-Radius: abgerundete Ecken oben (Bottom-Sheet-Optik) */
  /* CLAUDE: Anpassen: Erhöhe 16px für stärkere Abrundung */
  --mobile-nav-radius: 16px 16px 0 0;

  /* CLAUDE: Panel-Position (Bottom): fixed position von unten */
  --mobile-nav-position-bottom: 0;

  /* CLAUDE: Panel-Position (Left): 50% für horizontale Zentrierung */
  --mobile-nav-position-left: 50%;

  /* CLAUDE: Transform (geschlossen): translateY(100%) schiebt Panel nach unten raus */
  /* CLAUDE: translateX(-50%) zentriert Panel horizontal bei left: 50% */
  --mobile-nav-transform-closed: translateX(-50%) translateY(100%);

  /* CLAUDE: Transform (offen): translateY(0) schiebt Panel nach oben rein */
  --mobile-nav-transform-open: translateX(-50%) translateY(0);

  /* ===================================================================
     CLAUDE: OFF-CANVAS-VARIANTE (Alternative - auskommentiert)
     CLAUDE: Panel erscheint von links, 100vh Höhe, traditionelle Sidebar
     CLAUDE: Aktivieren: Auskommentieren und obige Bottom-Sheet-Variablen auskommentieren
     =================================================================== */

  /*
  --mobile-nav-height: 100dvh;
  --mobile-nav-width: min(88vw, 420px);
  --mobile-nav-radius: 0;
  --mobile-nav-position-bottom: auto;
  --mobile-nav-position-left: 0;
  --mobile-nav-position-top: 0;
  --mobile-nav-transform-closed: translateX(-100%);
  --mobile-nav-transform-open: translateX(0);
  */

  /* ===================================================================
     CLAUDE: Mobile-Navigation Shared-Variablen (für beide Varianten)
     =================================================================== */

  /* CLAUDE: Backdrop-Hintergrund: halbtransparentes Schwarz */
  /* CLAUDE: Anpassen: Ändere opacity (0.5 = 50%) für helleren/dunkleren Backdrop */
  --mobile-nav-backdrop: rgba(0, 0, 0, 0.5);

  /* CLAUDE: Panel-Schatten: Elevation-Schatten für Tiefe */
  /* CLAUDE: Anpassen: Erhöhe blur (24px) für weicheren Schatten */
  --mobile-nav-shadow: 0 -4px 24px rgba(0, 0, 0, 0.15);

  /* CLAUDE: Transition-Duration: 240ms für Slide-In/Out-Animation */
  /* CLAUDE: Anpassen: Erhöhe ms für langsamere Animation */
  --mobile-nav-transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);

  /* CLAUDE: Z-Index Stack: Backdrop unter Panel, Panel über Content */
  /* CLAUDE: Anpassen: Bei Z-Index-Konflikten mit anderen Fixed-Elementen */
  --z-mobile-backdrop: 998;
  --z-mobile-nav: 1000;
}

/* CLAUDE: Header-Container - Full-Width mit Background aus Customizer */
.site-header {
  /* CLAUDE: position: relative erlaubt absolute Positionierung von Child-Elementen */
  position: relative;

  /* CLAUDE: width: 100% sorgt für Full-Width */
  width: 100%;

  /* CLAUDE: z-index stellt sicher, dass Header über Content liegt */
  z-index: 1000;

  /* CLAUDE: Smooth Transition für Sticky-Animation */
  transition: var(--header-transition);

  /* CLAUDE: Background aus Customizer (inline-style) oder Fallback */
  background: var(--color-marble);

  /* CLAUDE: Leichter Schatten für Tiefe */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);

  /* CLAUDE: LAYOUT-FIX ENTFERNT (nicht mehr nötig) */
  /* CLAUDE: Top-Bar nutzt jetzt position: sticky (bleibt im Flow) */
  /* CLAUDE: Kein padding-top Hack mehr erforderlich */
}

/* ======================================================================
   CLAUDE: 2) TOP-BAR
   CLAUDE: Optionale Informationsleiste über Header (Telefon, Zusatztext)
   CLAUDE: Blendet beim Scrollen weich aus (per JS: .header-top--hidden)
   ====================================================================== */

/* CLAUDE: Top-Bar-Container - STICKY (bleibt im Layout-Flow) */
/* CLAUDE: ULTRATHINK-OPTIMIERUNG: position: sticky statt fixed */
/* CLAUDE: Vorteil: Keine CLS, kein padding-top Hack, bleibt im Flow */
/* CLAUDE: Design: Subtiler Gold-Akzent + mehr Platz für bessere Lesbarkeit */
.header-top {
  /* CLAUDE: position: sticky für permanente Sichtbarkeit beim Scrollen */
  /* CLAUDE: WICHTIG: Bleibt im Layout-Flow (kein padding-top beim .site-header nötig) */
  /* CLAUDE: Ändern: Auf fixed zurück, falls Overlay-Verhalten gewünscht */
  position: sticky;

  /* CLAUDE: top: 0 aktiviert Sticky-Verhalten (klebt oben beim Scrollen) */
  top: 0;

  /* CLAUDE: z-index: 1000 gleiche Ebene wie Header-Main */
  /* CLAUDE: Kein höherer z-index nötig, da im Flow und natürlich darüber */
  z-index: 1000;

  /* CLAUDE: Padding oben/unten - responsive mit clamp() */
  /* CLAUDE: min: 6px (Mobile), preferred: viewport-basiert, max: 12px (Desktop) */
  /* CLAUDE: Ändern: Werte anpassen für mehr/weniger vertikalen Platz */
  padding-block: clamp(6px, 0.5vw + 4px, 12px);

  /* CLAUDE: Background - Subtile Heritage Gold Tönung */
  /* CLAUDE: Heritage Gold (#C19A6B) mit 8% Opacity für eleganten Akzent */
  /* CLAUDE: Ändern: Opacity erhöhen (z.B. 0.12) für stärkeren Gold-Effekt */
  background: rgba(193, 154, 107, 0.08);

  /* CLAUDE: Border unten - Goldene Trennlinie für visuelle Abgrenzung */
  /* CLAUDE: 2px dick (statt 1px) für markantere Trennung */
  /* CLAUDE: Heritage Gold mit 25% Opacity für subtilen Effekt */
  /* CLAUDE: Ändern: Opacity erhöhen (z.B. 0.35) für stärkere Border */
  border-bottom: 2px solid rgba(193, 154, 107, 0.25);

  /* CLAUDE: Box-Shadow - Leichter Schatten für Tiefe */
  /* CLAUDE: Hebt Top-Bar vom Header-Main ab */
  /* CLAUDE: Ändern: blur (6px) oder spread erhöhen für stärkeren Schatten */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);

  /* CLAUDE: display: flex für horizontale Anordnung des Contents */
  display: flex;

  /* CLAUDE: align-items: center zentriert Content vertikal */
  align-items: center;

  /* CLAUDE: min-height für konsistente Höhe */
  /* CLAUDE: clamp(40px, fluid, 56px) sorgt für responsive Höhe */
  min-height: clamp(40px, 3.2vw + 22px, 56px);
}

/* CLAUDE: .header-top--hidden ENTFERNT */
/* CLAUDE: Top-Bar blendet nicht mehr aus (ist permanent sticky) */
/* CLAUDE: Ändern: Auskommentierten Code wiederherstellen, um Fade-Out zu reaktivieren */
/*
.header-top--hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}
*/

/* CLAUDE: Top-Bar-Content-Container (Flexbox: linksbündig, Gap) */
.header-top-content {
  /* CLAUDE: display: flex für horizontale Anordnung */
  display: flex;

  /* CLAUDE: justify-content: flex-start - linksbündig statt zentriert */
  /* CLAUDE: Ändern: Für Zentrierung auf "center" setzen */
  justify-content: center;

  /* CLAUDE: align-items: center zentriert Inhalt vertikal */
  align-items: center;

  /* CLAUDE: gap: Abstand zwischen Telefon und Zusatztext */
  /* CLAUDE: Ändern: gap anpassen für mehr/weniger Abstand */
  gap: var(--space-md);

  /* CLAUDE: flex-wrap: wrap für Umbruch auf kleinen Displays */
  flex-wrap: wrap;
}

/* CLAUDE: Telefon-Link/Text (Icon + Text) */
.header-top-phone {
  /* CLAUDE: display: flex für horizontale Anordnung (Icon + Text) */
  display: flex;

  /* CLAUDE: align-items: center zentriert Icon und Text vertikal */
  align-items: center;

  /* CLAUDE: gap: Abstand zwischen Icon und Text */
  /* CLAUDE: Ändern: gap anpassen für mehr/weniger Abstand */
  gap: var(--space-xs);

  /* CLAUDE: font-size etwas kleiner als Body */
  font-size: 0.875rem;

  /* CLAUDE: color: gedämpftes Grau */
  color: var(--color-graphite);

  /* CLAUDE: font-weight: medium für Hervorhebung */
  font-weight: 500;

  /* CLAUDE: text-decoration: none (kein Underline) */
  text-decoration: none;

  /* CLAUDE: Transition für Hover */
  transition: color var(--transition-fast);
}

/* CLAUDE: Telefon-Link Hover (nur wenn <a>) */
.header-top-phone:hover {
  /* CLAUDE: color: Accent-Farbe bei Hover */
  color: var(--color-gold);
}

/* CLAUDE: Telefon-Icon (SVG) */
.header-top-icon {
  /* CLAUDE: width/height: Icon-Größe (16x16px) */
  /* CLAUDE: Ändern: Größe anpassen für größeres/kleineres Icon */
  width: 20px;
  height: 20px;

  /* CLAUDE: flex-shrink: 0 verhindert Verkleinerung des Icons */
  flex-shrink: 0;

  /* CLAUDE: color: wird via fill="currentColor" vom Parent geerbt */
}

/* CLAUDE: Zusatztext (z.B. "Kostenlose Erstberatung") */
.header-top-extra {
  /* CLAUDE: font-size etwas kleiner als Body */
  font-size: 0.875rem;

  /* CLAUDE: color: gedämpftes Grau */
  color: var(--color-graphite);

  /* CLAUDE: font-weight: normal (kein Bold) */
  font-weight: 400;
}

/* ======================================================================
   CLAUDE: 3) HAUPT-HEADER
   CLAUDE: Logo, Navigation, CTA in einer Zeile (Desktop)
   ====================================================================== */

/* CLAUDE: Header-Main-Container - enthält Logo, Nav, CTA */
/* CLAUDE: ULTRATHINK-OPTIMIERUNG: CSS Grid statt Flexbox */
/* CLAUDE: Vorteil: Perfekte 3-Spalten-Verteilung (Brand | Navigation | CTA) */
.header-main {
  /* CLAUDE: display: grid für 3-Spalten-Layout */
  /* CLAUDE: Brand links | Navigation mittig | CTA rechts */
  display: grid;

  /* CLAUDE: grid-template-columns: auto 1fr auto */
  /* CLAUDE: Spalte 1 (auto): Brand/Logo - nimmt nur nötigen Platz */
  /* CLAUDE: Spalte 2 (1fr): Navigation - nimmt verfügbaren Platz (mittig) */
  /* CLAUDE: Spalte 3 (auto): CTA - nimmt nur nötigen Platz */
  /* CLAUDE: Ändern: Auf "1fr 1fr 1fr" für gleichmäßige Verteilung */
  grid-template-columns: auto 1fr auto;

  /* CLAUDE: align-items: center für vertikale Zentrierung aller Grid-Items */
  align-items: center;

  /* CLAUDE: column-gap: Horizontaler Abstand zwischen Grid-Spalten */
  /* CLAUDE: clamp(16px, 3vw, 28px) = responsive Scaling (16-28px) */
  /* CLAUDE: Ändern: Werte anpassen für mehr/weniger Abstand */
  column-gap: clamp(16px, 3vw, 28px);

  /* CLAUDE: Padding oben/unten - responsive mit clamp() */
  /* CLAUDE: clamp(12px, 1.2vw + 8px, 18px) = 12-18px je nach Viewport */
  /* CLAUDE: Ändern: Werte anpassen für mehr/weniger vertikalen Platz */
  padding-block: clamp(12px, 1.2vw + 8px, 18px);

  /* CLAUDE: Padding links/rechts - responsive mit clamp() */
  /* CLAUDE: Ändern: Werte anpassen für mehr Abstand zum Rand */
  padding-inline: clamp(1rem, 3vw, 2rem);

  /* CLAUDE: background: transparent (nutzt .site-header Background) */
  background: transparent;

  /* CLAUDE: border-bottom: Dezente Trennung zum Content */
  /* CLAUDE: Ändern: Entfernen oder Farbe anpassen */
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);

  /* CLAUDE: Transition für weiche Größenanpassung (wenn Header kompakt wird) */
  /* CLAUDE: Ändern: Dauer anpassen für schnellere/langsamere Animation */
  transition: padding-block 0.3s ease;

  /* CLAUDE: max-width: none - Header nutzt volle Breite ohne Beschränkung */
  /* CLAUDE: Ändern: Wert setzen (z.B. 1440px) für begrenzten Header */
  max-width: none;

  /* CLAUDE: width: 100% - Header nimmt volle verfügbare Breite */
  width: 100%;
}

/* ======================================================================
   CLAUDE: 3.1) LOGO / BRANDING
   ====================================================================== */

/* CLAUDE: Logo-Container */
/* CLAUDE: Grid-Item: Spalte 1 (auto width, links) */
.site-branding {
  /* CLAUDE: display: flex für horizontale Anordnung (Logo + Brand-Text) */
  display: flex;

  /* CLAUDE: align-items: center zentriert Logo und Text vertikal */
  align-items: center;

  /* CLAUDE: gap: Abstand zwischen Brand-Text und Logo mit clamp() für responsive Scaling */
  /* CLAUDE: min: 0.5rem (8px), preferred: 1.5vw (viewport-basiert), max: 1rem (16px) */
  /* CLAUDE: Ändern: Werte anpassen für mehr/weniger Abstand */
  gap: clamp(0.5rem, 1.5vw, 1rem);

  /* CLAUDE: min-width: Verhindert Schrumpfen der Branding-Area */
  /* CLAUDE: 280px = Logo (40-50px) + Brand-Text (220-230px) */
  /* CLAUDE: Ändern: Wert anpassen bei Logo-/Text-Größenänderung */
  min-width: 280px;
}

/* CLAUDE: Custom-Logo (aus Customizer) */
.custom-logo-link {
  /* CLAUDE: display: flex für bessere Kontrolle */
  display: flex;

  /* CLAUDE: align-items: center zentriert Logo */
  align-items: center;

  /* CLAUDE: line-height: 0 entfernt Inline-Spacing */
  line-height: 0;
}

/* CLAUDE: Custom-Logo Image */
.custom-logo {
  /* CLAUDE: max-height mit clamp() für responsive Scaling */
  /* CLAUDE: min: 36px (sehr kleine Displays), preferred: 4.5vw (viewport-basiert), max: 50px (große Displays) */
  /* CLAUDE: Ändern: Werte anpassen für größeres/kleineres Logo */
  max-height: clamp(36px, 4.5vw, 50px);

  /* CLAUDE: width: auto behält Proportionen bei */
  width: auto;

  /* CLAUDE: Transition für Hover-Effekt + Größenanpassung */
  /* CLAUDE: Ändern: Dauer anpassen für schnellere/langsamere Animation */
  transition: opacity var(--transition-fast), max-height 0.3s ease;
}

/* CLAUDE: Custom-Logo Hover */
.custom-logo:hover {
  /* CLAUDE: opacity: 0.8 bei Hover für Interaktivität */
  opacity: 0.8;
}

/* CLAUDE: Site-Title (Fallback, falls kein Logo) */
.site-title {
  /* CLAUDE: font-size: größer als Body */
  font-size: 1.5rem;

  /* CLAUDE: font-weight: bold für Markenbild */
  font-weight: 700;

  /* CLAUDE: color: Primary-Farbe */
  color: var(--color-umber);

  /* CLAUDE: text-decoration: none (kein Underline) */
  text-decoration: none;

  /* CLAUDE: line-height: 1 für kompakte Darstellung */
  line-height: 1;

  /* CLAUDE: Transition für Hover */
  transition: color var(--transition-fast);
}

/* CLAUDE: Site-Title Hover */
.site-title:hover {
  /* CLAUDE: color: Accent-Farbe bei Hover */
  color: var(--color-gold);
}

/* ======================================================================
   CLAUDE: 3.2) BRAND-TEXT (ausgeschriebener Markenname neben Logo)
   ====================================================================== */

/* CLAUDE: Brand-Text-Link-Container */
.site-brand-text {
  /* CLAUDE: display: flex für horizontale Anordnung der Wörter */
  display: flex;

  /* CLAUDE: align-items: center zentriert Wörter vertikal */
  align-items: center;

  /* CLAUDE: gap: kleiner Abstand zwischen Wörtern (0.25rem = 4px) */
  /* CLAUDE: Ändern: gap anpassen für mehr/weniger Wortabstand */
  gap: 0.25rem;

  /* CLAUDE: text-decoration: none (kein Underline) */
  text-decoration: none;

  /* CLAUDE: line-height: 1 für kompakte Darstellung */
  line-height: 1;

  /* CLAUDE: Transition für Hover */
  transition: opacity var(--transition-fast);
}

/* CLAUDE: Brand-Text Hover (gesamter Text wird leicht transparent) */
.site-brand-text:hover {
  /* CLAUDE: opacity: 0.8 bei Hover für Interaktivität */
  opacity: 0.8;
}

/* CLAUDE: Brand-Text-Part (einzelne Wörter) */
.site-brand-text-part {
  /* CLAUDE: font-size mit clamp() für responsive Scaling */
  /* CLAUDE: min: 0.875rem (14px), preferred: 1.5vw (viewport-basiert), max: 1.125rem (18px) */
  /* CLAUDE: Ändern: Werte anpassen für größeren/kleineren Text */
  font-size: clamp(0.875rem, 1.5vw, 1.125rem);

  /* CLAUDE: font-weight: semi-bold für Markenbild */
  font-weight: 600;

  /* CLAUDE: line-height: 1 für kompakte Darstellung */
  line-height: 1;

  /* CLAUDE: color: wird via inline-style gesetzt (individuell pro Wort) */
  /* CLAUDE: Fallback: Dark Umber */
  color: var(--color-umber);

  /* CLAUDE: white-space: nowrap verhindert Umbruch innerhalb eines Wortes */
  white-space: nowrap;
}

/* CLAUDE: Optional: Größenanpassung für einzelne Wörter (falls gewünscht) */
/* CLAUDE: Aktuell: Alle Wörter gleich groß */
/* CLAUDE: Ändern: Auskommentieren und font-size anpassen für unterschiedliche Größen */
/*
.site-brand-text-part--1 {
  font-size: 1rem;
}
.site-brand-text-part--2 {
  font-size: 1.125rem;
}
.site-brand-text-part--3 {
  font-size: 1.125rem;
}
*/

/* ======================================================================
   CLAUDE: 4) DESKTOP-NAVIGATION
   CLAUDE: Hauptmenü (horizontal, inline) für Desktop/Tablet
   ====================================================================== */

/* CLAUDE: Desktop-Nav-Container */
/* CLAUDE: Grid-Item: Spalte 2 (1fr width, mittig) */
.site-navigation {
  /* CLAUDE: justify-self: center zentriert Navigation in Grid-Spalte */
  /* CLAUDE: WICHTIG: Funktioniert nur mit CSS Grid (.header-main) */
  /* CLAUDE: Ändern: Auf "start" für linksbündig oder "end" für rechtsbündig */
  justify-self: center;
}

/* CLAUDE: Nav-Menü (UL) */
.site-navigation .menu {
  /* CLAUDE: display: flex für horizontale Anordnung */
  display: flex;

  /* CLAUDE: list-style: none entfernt Bullets */
  list-style: none;

  /* CLAUDE: margin: 0 entfernt Default-Margins */
  margin: 0;

  /* CLAUDE: padding: 0 entfernt Default-Paddings */
  padding: 0;

  /* CLAUDE: gap: Abstand zwischen Menüpunkten */
  gap: var(--space-md);

  /* CLAUDE: align-items: center für vertikale Zentrierung */
  align-items: center;
  /* CLAUDE: white-space: nowrap verhindert Umbruch */
  white-space: nowrap;
}

/* CLAUDE: Menü-Item (LI) */
.site-navigation .menu > li {
  /* CLAUDE: position: relative für Dropdown-Positionierung */
  position: relative;
}

/* CLAUDE: Menü-Link (A) */
.site-navigation .menu > li > a {
  /* CLAUDE: display: block für bessere Klickfläche */
  display: block;

  /* CLAUDE: padding für größere Klickfläche */
  padding: var(--space-xs) var(--space-sm);

  /* CLAUDE: color: Text-Farbe */
  color: var(--color-graphite);

  /* CLAUDE: font-size: etwas größer als Body */
  font-size: 1rem;

  /* CLAUDE: font-weight: medium für bessere Lesbarkeit */
  font-weight: 500;

  /* CLAUDE: text-decoration: none (kein Underline) */
  text-decoration: none;

  /* CLAUDE: Transition für Hover */
  transition: color var(--transition-fast);

  /* CLAUDE: border-radius für sanfte Ecken bei Hover */
  border-radius: var(--radius-sm);
}

/* CLAUDE: Menü-Link Hover */
.site-navigation .menu > li > a:hover {
  /* CLAUDE: color: Accent-Farbe bei Hover */
  color: var(--color-gold);

  /* CLAUDE: background: leichter Hintergrund bei Hover */
  background: rgba(193, 154, 107, 0.1);
}

/* CLAUDE: Aktiver Menü-Link (current_page_item) - Anforderung: Deutliche Active-Anzeige */
.site-navigation .menu > li.current-menu-item > a,
.site-navigation .menu > li.current_page_item > a,
.site-navigation .menu > li.current-menu-ancestor > a,
.site-navigation .menu > li.current_page_ancestor > a {
  /* CLAUDE: color: Primary-Farbe für aktiven Link */
  color: var(--color-umber);

  /* CLAUDE: font-weight: bold für Hervorhebung */
  font-weight: 700;

  /* CLAUDE: border-bottom: Heritage Gold Unterstreichung (Anforderung: deutliche Active-Anzeige) */
  /* CLAUDE: 3px dick für gute Sichtbarkeit */
  border-bottom: 3px solid var(--color-heritage-gold, #C19A6B);

  /* CLAUDE: padding-bottom reduziert, damit Border nicht zu weit unten ist */
  padding-bottom: calc(var(--space-sm) - 3px);
}

/* ======================================================================
   CLAUDE: 4.1) DROPDOWN-MENÜ (SUB-MENU)
   CLAUDE: Dropdown für verschachtelte Menüpunkte (Desktop)
   ====================================================================== */

/* CLAUDE: Sub-Menü (UL.sub-menu) */
.site-navigation .menu .sub-menu {
  /* CLAUDE: position: absolute für Overlay */
  position: absolute;

  /* CLAUDE: top: 100% positioniert unter Parent */
  top: 100%;

  /* CLAUDE: left: 0 linksbündig mit Parent */
  left: 0;

  /* CLAUDE: display: none standardmäßig versteckt */
  display: none;

  /* CLAUDE: min-width: Mindestbreite für Dropdown */
  min-width: 200px;

  /* CLAUDE: background: heller Hintergrund */
  background: var(--color-white);

  /* CLAUDE: box-shadow für Tiefe */
  box-shadow: var(--shadow-md);

  /* CLAUDE: border-radius für sanfte Ecken */
  border-radius: var(--radius-sm);

  /* CLAUDE: padding: Innenabstand */
  padding: var(--space-xs);

  /* CLAUDE: margin-top: kleiner Abstand zum Parent */
  margin-top: var(--space-xs);

  /* CLAUDE: z-index über Content */
  z-index: 100;

  /* CLAUDE: list-style: none entfernt Bullets */
  list-style: none;

  /* CLAUDE: flex-direction: column stapelt Items vertikal */
  flex-direction: column;

  /* CLAUDE: gap: Abstand zwischen Sub-Items */
  gap: 0;
}

/* CLAUDE: Sub-Menü anzeigen bei Hover auf Parent */
.site-navigation .menu > li:hover > .sub-menu {
  /* CLAUDE: display: flex zeigt Dropdown bei Hover */
  display: flex;
}

/* CLAUDE: Sub-Menü Item (LI) */
.site-navigation .menu .sub-menu > li {
  /* CLAUDE: width: 100% für volle Breite */
  width: 100%;
}

/* CLAUDE: Sub-Menü Link (A) */
.site-navigation .menu .sub-menu > li > a {
  /* CLAUDE: display: block für volle Breite */
  display: block;

  /* CLAUDE: padding: größere Klickfläche */
  padding: var(--space-xs) var(--space-sm);

  /* CLAUDE: color: Text-Farbe */
  color: var(--color-graphite);

  /* CLAUDE: font-size: etwas kleiner als Main-Menu */
  font-size: 0.9375rem;

  /* CLAUDE: text-decoration: none */
  text-decoration: none;

  /* CLAUDE: Transition für Hover */
  transition: background var(--transition-fast), color var(--transition-fast);

  /* CLAUDE: border-radius für sanfte Ecken */
  border-radius: var(--radius-sm);
}

/* CLAUDE: Sub-Menü Link Hover */
.site-navigation .menu .sub-menu > li > a:hover {
  /* CLAUDE: background: Accent-Hintergrund bei Hover */
  background: rgba(193, 154, 107, 0.1);

  /* CLAUDE: color: Accent-Farbe bei Hover */
  color: var(--color-gold);
}

/* ======================================================================
   CLAUDE: 4.2) CTA-BUTTON (HEADER)
   CLAUDE: Call-to-Action Button im Header (Desktop)
   ====================================================================== */

/* CLAUDE: CTA-Container */
/* CLAUDE: Grid-Item: Spalte 3 (auto width, rechts) */
.header-cta {
  /* CLAUDE: flex-shrink: 0 verhindert Verkleinerung (Fallback für Flexbox) */
  flex-shrink: 0;

  /* CLAUDE: justify-self: end positioniert CTA rechts in Grid-Spalte */
  /* CLAUDE: WICHTIG: Funktioniert nur mit CSS Grid (.header-main) */
  /* CLAUDE: Ändern: Auf "start" für linksbündig oder "center" für mittig */
  justify-self: end;
}

/* CLAUDE: CTA-Button */
.header-cta-button {
  /* CLAUDE: display: inline-block für Padding */
  display: inline-block;

  /* CLAUDE: padding: Innenabstand */
  padding: var(--space-sm) var(--space-lg);

  /* CLAUDE: background: Accent-Farbe (Heritage Gold) */
  background: var(--color-gold);

  /* CLAUDE: color: Weißer Text */
  color: var(--color-white);

  /* CLAUDE: font-size: wie Body */
  font-size: 1rem;

  /* CLAUDE: font-weight: medium */
  font-weight: 500;

  /* CLAUDE: text-decoration: none */
  text-decoration: none;

  /* CLAUDE: border-radius: sanfte Ecken */
  border-radius: var(--radius-sm);

  /* CLAUDE: Transition für Hover */
  transition: background var(--transition-fast), transform var(--transition-fast);

  /* CLAUDE: white-space verhindert Umbruch */
  white-space: nowrap;
}

/* CLAUDE: CTA-Button Hover */
.header-cta-button:hover {
  /* CLAUDE: background: dunkleres Gold bei Hover */
  background: var(--color-brown);

  /* CLAUDE: transform: leichtes Lift bei Hover */
  transform: translateY(-2px);
}

/* ======================================================================
   CLAUDE: 5) MOBILE-BURGER-BUTTON
   CLAUDE: Burger-Icon für Mobile-Navigation (nur Mobile sichtbar)
   ====================================================================== */

/* CLAUDE: Mobile-Burger-Button */
.mobile-menu-toggle {
  /* CLAUDE: display: none auf Desktop (wird in Mobile-Query aktiviert) */
  display: none;

  /* CLAUDE: flex-direction: column für 3 Striche vertikal */
  flex-direction: column;

  /* CLAUDE: justify-content: center zentriert Striche */
  justify-content: center;

  /* CLAUDE: align-items: center zentriert Striche */
  align-items: center;

  /* CLAUDE: gap: Abstand zwischen Strichen */
  gap: 5px;

  /* CLAUDE: width/height: Button-Größe */
  width: 44px;
  height: 44px;

  /* CLAUDE: padding: 0 (Reset) */
  padding: 0;

  /* CLAUDE: background: transparent (kein Hintergrund) */
  background: transparent;

  /* CLAUDE: border: none (kein Rahmen) */
  border: none;

  /* CLAUDE: cursor: pointer für Klick-Anzeige */
  cursor: pointer;

  /* CLAUDE: z-index über anderen Elementen */
  z-index: 1001;
}

/* CLAUDE: Burger-Striche (3 Linien) */
.burger-line {
  /* CLAUDE: display: block für volle Breite */
  display: block;

  /* CLAUDE: width: Strich-Breite */
  width: 28px;

  /* CLAUDE: height: Strich-Dicke */
  height: 3px;

  /* CLAUDE: background: Primary-Farbe */
  background: var(--color-umber);

  /* CLAUDE: border-radius für abgerundete Enden */
  border-radius: 2px;

  /* CLAUDE: Transition für Animation */
  transition: transform var(--transition-base), opacity var(--transition-base);
}

/* CLAUDE: Burger-Icon bei geöffnetem Menü (per JS .is-open) */
/* CLAUDE: Versteckt Burger-Icon komplett, da Close-Button im Panel das Schließen übernimmt */
/* CLAUDE: Verhindert doppeltes X-Icon (Burger-X + Close-Button-X) */
.mobile-menu-toggle.is-open {
  /* CLAUDE: opacity: 0 macht Burger-Icon unsichtbar */
  opacity: 0;

  /* CLAUDE: visibility: hidden entfernt es aus dem Layout */
  visibility: hidden;

  /* CLAUDE: pointer-events: none verhindert Klicks auf unsichtbares Icon */
  pointer-events: none;

  /* CLAUDE: Transition für Fade-Out */
  transition: opacity var(--transition-fast), visibility var(--transition-fast);
}

/* CLAUDE: Alte Burger-X-Animation (jetzt deaktiviert, da Icon versteckt wird) */
/* CLAUDE: Falls X-Animation statt Verstecken gewünscht: auskommentieren und obiges .is-open entfernen */
/*
.mobile-menu-toggle.is-open .burger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.mobile-menu-toggle.is-open .burger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.is-open .burger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
*/

/* ======================================================================
   CLAUDE: 6) MOBILE-NAVIGATION
   CLAUDE: Kompaktes Panel (Bottom-Sheet oder Off-Canvas) statt Vollbild
   CLAUDE: Panel-Variante wird über CSS-Variablen gesteuert (siehe :root)
   ====================================================================== */

/* ===================================================================
   CLAUDE: 6a) BACKDROP (Overlay-Hintergrund)
   CLAUDE: Verdunkelt Seite hinter Panel, Click schließt Navigation
   =================================================================== */

/* CLAUDE: Backdrop - Fullscreen-Overlay hinter Panel */
.mobile-navigation__backdrop {
  /* CLAUDE: position: fixed für Fullscreen */
  position: fixed;

  /* CLAUDE: top/right/bottom/left: 0 für Fullscreen */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;

  /* CLAUDE: background: halbtransparentes Schwarz (aus CSS-Variablen) */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-backdrop in :root für helleren/dunkleren Backdrop */
  background: var(--mobile-nav-backdrop);

  /* CLAUDE: z-index: unter Panel, über Content */
  /* CLAUDE: Anpassen: Ändere --z-mobile-backdrop in :root bei Z-Index-Konflikten */
  z-index: var(--z-mobile-backdrop);

  /* CLAUDE: Initial versteckt (opacity: 0 + visibility: hidden) */
  opacity: 0;
  visibility: hidden;

  /* CLAUDE: pointer-events: none verhindert Klicks wenn versteckt */
  pointer-events: none;

  /* CLAUDE: Transition für Fade-In/Out */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-transition in :root für langsamere Animation */
  transition: opacity var(--mobile-nav-transition),
              visibility var(--mobile-nav-transition);
}

/* CLAUDE: Backdrop sichtbar bei geöffneter Navigation */
/* CLAUDE: .is-open wird per JS (header.js) hinzugefügt/entfernt */
.mobile-navigation__backdrop.is-open {
  /* CLAUDE: opacity: 1 macht Backdrop sichtbar */
  opacity: 1;

  /* CLAUDE: visibility: visible für Accessibility */
  visibility: visible;

  /* CLAUDE: pointer-events: auto erlaubt Klicks (Backdrop-Click schließt Panel) */
  pointer-events: auto;
}

/* ===================================================================
   CLAUDE: 6b) MOBILE-NAVIGATION-PANEL (Container)
   CLAUDE: Kompaktes Panel statt Fullscreen (Bottom-Sheet oder Off-Canvas)
   =================================================================== */

/* CLAUDE: Mobile-Nav-Container - Panel (Bottom-Sheet/Off-Canvas) */
.mobile-navigation {
  /* CLAUDE: position: fixed für Overlay */
  position: fixed;

  /* CLAUDE: Positionierung: Bottom-Sheet (von unten) ODER Off-Canvas (von links) */
  /* CLAUDE: CSS-Variablen in :root steuern die Positionierung */
  /* CLAUDE: Bottom-Sheet: bottom: 0, left: 50% (horizontal zentriert) */
  /* CLAUDE: Off-Canvas: left: 0, top: 0 (linksbündig, volle Höhe) */
  bottom: var(--mobile-nav-position-bottom);
  left: var(--mobile-nav-position-left);

  /* CLAUDE: Breite: responsive (min() für max-width) */
  /* CLAUDE: Bottom-Sheet: min(100vw, 640px) */
  /* CLAUDE: Off-Canvas: min(88vw, 420px) */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-width in :root */
  width: var(--mobile-nav-width);

  /* CLAUDE: Höhe: Bottom-Sheet (clamp: 320px-80vh-600px) ODER Off-Canvas (100dvh) */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-height in :root */
  max-height: var(--mobile-nav-height);

  /* CLAUDE: z-index über Backdrop */
  /* CLAUDE: Anpassen: Ändere --z-mobile-nav in :root bei Z-Index-Konflikten */
  z-index: var(--z-mobile-nav);

  /* CLAUDE: background: heller Hintergrund */
  background: var(--color-white);

  /* CLAUDE: Border-Radius: abgerundete Ecken oben (Bottom-Sheet) ODER keine (Off-Canvas) */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-radius in :root */
  border-radius: var(--mobile-nav-radius);

  /* CLAUDE: Schatten für Tiefe (Elevation) */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-shadow in :root */
  box-shadow: var(--mobile-nav-shadow);

  /* CLAUDE: Initial versteckt (visibility: hidden) */
  visibility: hidden;

  /* CLAUDE: Initial außerhalb Viewport (transform) */
  /* CLAUDE: Bottom-Sheet: translateY(100%) schiebt Panel nach unten raus */
  /* CLAUDE: Off-Canvas: translateX(-100%) schiebt Panel nach links raus */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-transform-closed in :root */
  transform: var(--mobile-nav-transform-closed);

  /* CLAUDE: Transition für Slide-In/Out */
  /* CLAUDE: transform + visibility ändern sich beim Öffnen/Schließen */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-transition in :root */
  transition: transform var(--mobile-nav-transition),
              visibility var(--mobile-nav-transition);

  /* CLAUDE: will-change: transform für Hardware-Acceleration (Performance) */
  /* CLAUDE: Nur während Animation aktiv (siehe .is-open) */
  will-change: transform;
}

/* CLAUDE: Mobile-Nav geöffnet (per JS .is-open) */
/* CLAUDE: .is-open wird per JS (header.js) hinzugefügt/entfernt */
.mobile-navigation.is-open {
  /* CLAUDE: Slide-In: Panel fährt in Viewport */
  /* CLAUDE: Bottom-Sheet: translateY(0) schiebt Panel nach oben */
  /* CLAUDE: Off-Canvas: translateX(0) schiebt Panel nach rechts */
  /* CLAUDE: Anpassen: Ändere --mobile-nav-transform-open in :root */
  transform: var(--mobile-nav-transform-open);

  /* CLAUDE: visibility: visible für Accessibility */
  visibility: visible;
}

/* ===================================================================
   CLAUDE: 6c) PANEL-WRAPPER (Flexbox-Layout)
   CLAUDE: Ermöglicht Sticky-Close-Button + scrollbaren Content
   =================================================================== */

/* CLAUDE: Panel-Wrapper - Flexbox-Container für Close-Button + Content */
.mobile-navigation__panel {
  /* CLAUDE: display: flex für vertikales Layout */
  display: flex;

  /* CLAUDE: flex-direction: column stapelt Close-Button über Content */
  flex-direction: column;

  /* CLAUDE: height: 100% nimmt volle Panel-Höhe */
  height: 100%;

  /* CLAUDE: overflow: hidden verhindert Scrollen auf Panel-Ebene */
  /* CLAUDE: Nur .mobile-navigation__content scrollt (siehe unten) */
  overflow: hidden;
}

/* ===================================================================
   CLAUDE: 6d) CLOSE-BUTTON
   CLAUDE: X-Icon zum Schließen des Panels (oben rechts, sticky)
   =================================================================== */

/* CLAUDE: Close-Button - X-Icon (SVG) */
.mobile-navigation__close {
  /* CLAUDE: position: sticky bleibt oben beim Scrollen sichtbar */
  position: sticky;

  /* CLAUDE: top: 0 fixiert Button am oberen Rand */
  top: 0;

  /* CLAUDE: align-self: flex-end positioniert Button rechts */
  align-self: flex-end;

  /* CLAUDE: padding: Touch-Target-Größe (mind. 44x44px für iOS Guidelines) */
  /* CLAUDE: Anpassen: Erhöhe padding für größeren Touch-Target */
  padding: var(--space-md);

  /* CLAUDE: margin: Abstand zum Content */
  margin: var(--space-sm);

  /* CLAUDE: background: transparent (kein Hintergrund) */
  background: transparent;

  /* CLAUDE: border: none (Standard-Button-Border entfernen) */
  border: none;

  /* CLAUDE: color: Graphite (Text-/Icon-Farbe) */
  color: var(--color-graphite);

  /* CLAUDE: cursor: pointer für Hover-Feedback */
  cursor: pointer;

  /* CLAUDE: Transition für Hover-Effekt */
  transition: color var(--transition-fast);

  /* CLAUDE: z-index über Content (bleibt immer sichtbar beim Scrollen) */
  z-index: 10;

  /* CLAUDE: line-height: 0 verhindert vertikalen Abstand durch Inline-Element (SVG) */
  line-height: 0;

  /* CLAUDE: flex-shrink: 0 verhindert Komprimierung durch Flex */
  flex-shrink: 0;
}

/* CLAUDE: Close-Button Hover */
.mobile-navigation__close:hover {
  /* CLAUDE: color: Umber bei Hover */
  color: var(--color-umber);
}

/* CLAUDE: Close-Button Focus (Keyboard-Navigation) */
.mobile-navigation__close:focus {
  /* CLAUDE: outline: sichtbarer Focus-Ring für Accessibility */
  outline: 2px solid var(--color-umber);

  /* CLAUDE: outline-offset: Abstand zwischen Button und Outline */
  outline-offset: 2px;
}

/* ===================================================================
   CLAUDE: 6e) PANEL-CONTENT (Scrollbarer Bereich)
   CLAUDE: Enthält Menü-Items, scrollt bei langem Content
   =================================================================== */

/* CLAUDE: Panel-Content - scrollbarer Bereich */
.mobile-navigation__content {
  /* CLAUDE: flex: 1 nimmt verfügbaren Platz zwischen Close-Button und Panel-Ende */
  flex: 1;

  /* CLAUDE: overflow-y: auto ermöglicht Scrollen bei langem Content */
  overflow-y: auto;

  /* CLAUDE: -webkit-overflow-scrolling: touch für smooth scrolling auf iOS */
  -webkit-overflow-scrolling: touch;

  /* CLAUDE: padding: Innenabstand für Content */
  /* CLAUDE: Anpassen: Erhöhe padding für mehr Luftigkeit */
  padding: var(--space-md);
}

/* CLAUDE: Container im Panel-Content (optional, für zusätzliches Padding) */
.mobile-navigation__content .container {
  /* CLAUDE: padding: 0 entfernt Standard-Container-Padding */
  /* CLAUDE: Padding wird bereits von .mobile-navigation__content gesteuert */
  padding: 0;
}

/* ===================================================================
   CLAUDE: 6f) MOBILE-MENÜ (UL)
   CLAUDE: Menü-Items innerhalb von .mobile-navigation__content
   =================================================================== */

/* CLAUDE: Mobile-Menü (UL) */
.mobile-navigation .mobile-menu {
  /* CLAUDE: list-style: none entfernt Bullets */
  list-style: none;

  /* CLAUDE: margin: 0 */
  margin: 0;

  /* CLAUDE: padding: Innenabstand */
  padding: var(--space-lg);

  /* CLAUDE: display: flex für vertikale Anordnung */
  display: flex;

  /* CLAUDE: flex-direction: column stapelt Items */
  flex-direction: column;

  /* CLAUDE: gap: Abstand zwischen Items */
  gap: 0;
}

/* CLAUDE: Mobile-Menü Item (LI) */
.mobile-navigation .mobile-menu > li {
  /* CLAUDE: border-bottom für visuelle Trennung */
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

/* CLAUDE: Mobile-Menü Link (A) */
.mobile-navigation .mobile-menu > li > a {
  /* CLAUDE: display: block für volle Breite */
  display: block;

  /* CLAUDE: padding: größere Klickfläche auf Mobile */
  padding: var(--space-md) 0;

  /* CLAUDE: color: Text-Farbe */
  color: var(--color-graphite);

  /* CLAUDE: font-size: größer auf Mobile */
  font-size: 1.125rem;

  /* CLAUDE: font-weight: medium */
  font-weight: 500;

  /* CLAUDE: text-decoration: none */
  text-decoration: none;

  /* CLAUDE: Transition für Hover */
  transition: color var(--transition-fast);
}

/* CLAUDE: Mobile-Menü Link Hover */
.mobile-navigation .mobile-menu > li > a:hover {
  /* CLAUDE: color: Accent-Farbe bei Hover */
  color: var(--color-gold);
}

/* CLAUDE: Aktiver Mobile-Menü Link - Anforderung: Deutliche Active-Anzeige */
.mobile-navigation .mobile-menu > li.current-menu-item > a,
.mobile-navigation .mobile-menu > li.current_page_item > a,
.mobile-navigation .mobile-menu > li.current-menu-ancestor > a,
.mobile-navigation .mobile-menu > li.current_page_ancestor > a {
  /* CLAUDE: color: Primary-Farbe für aktiven Link */
  color: var(--color-umber);

  /* CLAUDE: font-weight: bold für Hervorhebung */
  font-weight: 700;

  /* CLAUDE: background: Heritage Gold Hintergrund (Anforderung: deutliche Active-Anzeige auf Mobil) */
  background: rgba(193, 154, 107, 0.15);

  /* CLAUDE: border-left: Heritage Gold Border für zusätzliche Hervorhebung */
  border-left: 4px solid var(--color-heritage-gold, #C19A6B);

  /* CLAUDE: padding-left anpassen (Border kompensieren) */
  padding-left: calc(var(--space-md) - 4px);
}

/* ===================================================================
   CLAUDE: 6g) BODY-LOCK (Scroll-Sperre)
   CLAUDE: Verhindert Scrollen der Seite bei geöffneter Navigation
   =================================================================== */

/* CLAUDE: Body-Lock - sperrt Scrollen auf html UND body */
/* CLAUDE: Wird per JS (header.js) auf html + body gesetzt wenn Navigation öffnet */
/* CLAUDE: WICHTIG: !important überschreibt andere overflow-Styles */
html.is-nav-lock,
body.is-nav-lock {
  /* CLAUDE: overflow: hidden verhindert Scrollen */
  overflow: hidden !important;

  /* CLAUDE: height: 100% notwendig für iOS Safari (verhindert Rubber-Band-Scrolling) */
  height: 100%;
}

/* ===================================================================
   CLAUDE: 6h) REDUCED-MOTION (Accessibility)
   CLAUDE: Deaktiviert Animationen für Nutzer mit Motion-Sensitivität
   =================================================================== */

/* CLAUDE: Reduzierte Animationen für Nutzer mit prefers-reduced-motion */
/* CLAUDE: Betrifft: Panel-Slide-In, Backdrop-Fade-In */
@media (prefers-reduced-motion: reduce) {
  /* CLAUDE: Backdrop ohne Transition (sofort sichtbar) */
  .mobile-navigation__backdrop {
    /* CLAUDE: transition: none deaktiviert Fade-Animation */
    transition: none;
  }

  /* CLAUDE: Panel ohne Transition (sofort sichtbar, kein Slide) */
  .mobile-navigation {
    /* CLAUDE: transition: none deaktiviert Slide-Animation */
    transition: none;
  }

  /* CLAUDE: Panel geöffnet: direkt in Position (kein Slide) */
  .mobile-navigation.is-open {
    /* CLAUDE: transform: direkt in Endposition ohne Animation */
    /* CLAUDE: Bottom-Sheet: translateX(-50%) translateY(0) */
    /* CLAUDE: Off-Canvas: translateX(0) */
    transform: var(--mobile-nav-transform-open);
  }
}

/* ======================================================================
   CLAUDE: 7) KOMPAKTER HEADER & STICKY-HEADER
   CLAUDE: Header wird kompakt wenn Top-Bar ausblendet (per JS .header--compact)
   CLAUDE: Sticky-Header-Styles (per JS .is-sticky aktiviert)
   ====================================================================== */

/* CLAUDE: Sticky-Header (per JS aktiviert) */
/* CLAUDE: WICHTIG: Top-Bar ist bereits position: fixed (z-index: 1001) */
/* CLAUDE: Header-Main muss unter Top-Bar positioniert werden */
.site-header.is-sticky {
  /* CLAUDE: position: fixed fixiert Header beim Scrollen */
  position: fixed;

  /* CLAUDE: top: wird dynamisch berechnet, um unter Top-Bar zu sitzen */
  /* CLAUDE: ÄNDERUNG: Statt top: 0 nun top: auto (Header-Main nutzt margin-top) */
  /* CLAUDE: Grund: Top-Bar ist oben fixiert, Header-Main muss darunter */
  top: 0;

  /* CLAUDE: left: 0 linksbündig */
  left: 0;

  /* CLAUDE: right: 0 rechtsbündig */
  right: 0;

  /* CLAUDE: z-index unter Top-Bar (Top-Bar hat z-index: 1001) */
  z-index: 1000;

  /* CLAUDE: box-shadow für Tiefe beim Scrollen */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* CLAUDE: Top-Bar im Sticky/Compact-Mode ENTFERNT */
/* CLAUDE: Top-Bar ist permanent position: fixed (immer oben), keine Manipulation nötig */
/* CLAUDE: Ändern: Auskommentierten Code wiederherstellen für alte Fade-Out-Logik */
/*
.site-header.is-sticky .header-top,
.site-header.header--compact .header-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: -1;
  pointer-events: none;
}
*/

/* CLAUDE: KRITISCH - Header-Main im Sticky-Mode: Exakte vertikale Zentrierung */
/* CLAUDE: Ändern: padding-block anpassen für andere Höhe */
.site-header.is-sticky .header-main,
.site-header.header--compact .header-main {
  /* CLAUDE: display: flex ist bereits gesetzt, wird hier verstärkt */
  display: flex !important;

  /* CLAUDE: align-items: center = vertikale Zentrierung aller Children */
  align-items: center !important;

  /* CLAUDE: justify-content: space-between verteilt Logo, Nav, CTA */
  justify-content: space-between;

  /* CLAUDE: height: ENTFERNT - stattdessen nur padding-block für echte Zentrierung */
  /* CLAUDE: Keine feste Höhe = Flexbox kann perfekt zentrieren */
  height: auto;

  /* CLAUDE: min-height: Minimale Höhe für Sticky-Header */
  /* CLAUDE: Ändern: z.B. 64px oder 72px für höheren Header */
  min-height: var(--header-h-sticky);

  /* CLAUDE: padding-block: SYMMETRISCH - definiert die tatsächliche Höhe */
  /* CLAUDE: Format: padding-block: [oben/unten symmetrisch] */
  /* CLAUDE: Ändern: z.B. "1.25rem" für mehr Abstand, "0.875rem" für weniger */
  padding-block: 1rem;

  /* CLAUDE: box-sizing: border-box - Padding wird in Höhe eingerechnet */
  box-sizing: border-box;
}

/* CLAUDE: Logo kleinere Höhe bei Sticky/Compact */
.site-header.is-sticky .custom-logo,
.site-header.header--compact .custom-logo {
  /* CLAUDE: max-height: feste Größe für kompaktes Logo im Sticky-Header */
  /* CLAUDE: Ändern: z.B. 36px für kleineres, 48px für größeres Logo */
  max-height: 42px;
}

/* CLAUDE: Site-Title kleinere Schrift bei Sticky/Compact (Fallback) */
.site-header.is-sticky .site-title,
.site-header.header--compact .site-title {
  /* CLAUDE: font-size: reduziert für kompakteren Header */
  font-size: 1.25rem;
}

/* CLAUDE: Brand-Text kleinere Schrift bei Sticky/Compact */
.site-header.is-sticky .site-brand-text-part,
.site-header.header--compact .site-brand-text-part {
  /* CLAUDE: font-size: reduziert für kompakteren Header (1rem = 16px) */
  /* CLAUDE: Ändern: font-size anpassen für größeren/kleineren Text im Sticky-Modus */
  font-size: 1rem;
}

/* CLAUDE: Navigation-Container - verhindert Höhen-Probleme */
.site-header.is-sticky .site-navigation,
.site-header.header--compact .site-navigation {
  /* CLAUDE: display: flex für Flexbox */
  display: flex;

  /* CLAUDE: align-items: center zentriert Nav-Items vertikal */
  align-items: center;
}

/* CLAUDE: Navigation-UL - verhindert Höhen-Probleme */
.site-header.is-sticky .site-navigation .menu,
.site-header.header--compact .site-navigation .menu {
  /* CLAUDE: display: flex für Flexbox */
  display: flex;

  /* CLAUDE: align-items: center zentriert Links vertikal */
  align-items: center;
}

/* CLAUDE: Navigation-Links reduziertes Padding bei Sticky/Compact */
.site-header.is-sticky .site-navigation .menu > li > a,
.site-header.header--compact .site-navigation .menu > li > a {
  /* CLAUDE: display: inline-flex für Flexbox-Zentrierung */
  display: inline-flex;

  /* CLAUDE: align-items: center zentriert Text vertikal */
  align-items: center;

  /* CLAUDE: padding: nur horizontal, kein vertikales Padding */
  padding: 0 var(--space-sm);

  /* CLAUDE: line-height: 1 verhindert zusätzliche Höhe */
  line-height: 1;
}

/* CLAUDE: CTA-Container - verhindert Höhen-Probleme */
.site-header.is-sticky .header-cta,
.site-header.header--compact .header-cta {
  /* CLAUDE: display: flex für Flexbox */
  display: flex;

  /* CLAUDE: align-items: center zentriert CTA vertikal */
  align-items: center;
}

/* CLAUDE: CTA-Button reduziertes Padding bei Sticky/Compact */
.site-header.is-sticky .header-cta-button,
.site-header.header--compact .header-cta-button {
  /* CLAUDE: display: inline-flex für Flexbox-Zentrierung */
  display: inline-flex;

  /* CLAUDE: align-items: center zentriert Text vertikal */
  align-items: center;

  /* CLAUDE: padding: kompakt aber klickbar */
  padding: var(--space-xs) var(--space-md);

  /* CLAUDE: line-height: 1 verhindert zusätzliche Höhe */
  line-height: 1;
}

/* ======================================================================
   CLAUDE: 8) RESPONSIVE BREAKPOINTS
   CLAUDE: Mobile/Tablet/Desktop Anpassungen
   ====================================================================== */

/* CLAUDE: ===== DESKTOP (>= 1024px) ===== */
/* CLAUDE: Standard-Styles (oben definiert) gelten für Desktop */

/* CLAUDE: ===== MITTLERE DISPLAYS (1024px - 1199px) ===== */
/* CLAUDE: Problem: Brand-Text + Logo + Navigation + CTA = zu viele Elemente */
/* CLAUDE: Lösung 1 (AKTIV): Brand-Text verstecken, nur Logo + Navigation + CTA anzeigen */
@media (max-width: 1199px) and (min-width: 1024px) {
  /* CLAUDE: Brand-Text verstecken auf mittleren Displays */
  /* CLAUDE: Ändern: Auskommentieren, wenn Brand-Text immer sichtbar sein soll */
  .site-brand-text {
    display: none !important;
  }

  /* CLAUDE: Header-Main kompakterer Gap */
  .header-main {
    gap: clamp(0.75rem, 2vw, 1.5rem);
  }

  /* CLAUDE: Navigation kompakter */
  .site-navigation .menu {
    gap: clamp(0.5rem, 1.5vw, 1rem);
  }

  /* CLAUDE: Navigation-Links kompakter */
  .site-navigation .menu > li > a {
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.9375rem;
  }

  /* CLAUDE: CTA-Button kompakter */
  .header-cta-button {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.9375rem;
  }

  /* CLAUDE: ========================================== */
  /* CLAUDE: ALTERNATIVE LÖSUNG 2 (auskommentiert) */
  /* CLAUDE: Falls Brand-Text sichtbar bleiben soll: */
  /* CLAUDE: CTA-Button stattdessen verstecken */
  /* CLAUDE: ========================================== */
  /*
  .site-brand-text {
    display: flex !important;
  }

  .header-cta {
    display: none !important;
  }
  */

  /* CLAUDE: ========================================== */
  /* CLAUDE: ALTERNATIVE LÖSUNG 3 (auskommentiert) */
  /* CLAUDE: Navigation noch kompakter, alles behalten */
  /* CLAUDE: ========================================== */
  /*
  .site-brand-text-part {
    font-size: clamp(0.75rem, 1.2vw, 0.9375rem);
  }

  .header-main {
    gap: clamp(0.5rem, 1.5vw, 1rem);
  }

  .site-navigation .menu {
    gap: clamp(0.375rem, 1vw, 0.75rem);
  }

  .site-navigation .menu > li > a {
    padding: var(--space-xs) clamp(0.5rem, 1vw, 0.75rem);
    font-size: 0.875rem;
  }
  */
}

/* CLAUDE: ===== TABLET (768px - 1023px) ===== */
@media (max-width: 1023px) and (min-width: 768px) {
  /* CLAUDE: Header-Main reduzierter Gap */
  .header-main {
    gap: var(--space-md);
  }

  /* CLAUDE: Nav-Menü reduzierter Gap */
  .site-navigation .menu {
    gap: var(--space-sm);
  }

  /* CLAUDE: CTA-Button kleineres Padding */
  .header-cta-button {
    padding: var(--space-xs) var(--space-md);
    font-size: 0.9375rem;
  }
}

/* CLAUDE: ===== MOBILE (<= 1023px) ===== */
@media (max-width: 1023px) {
  /* CLAUDE: Desktop-Navigation verstecken auf Mobile */
  /* CLAUDE: !important nötig, da Sticky-Header-Styles sonst überschreiben */
  .site-navigation {
    display: none !important;
  }

  /* CLAUDE: Auch im Sticky/Compact-Mode verstecken (zusätzliche Absicherung) */
  .site-header.is-sticky .site-navigation,
  .site-header.header--compact .site-navigation {
    display: none !important;
  }

  /* CLAUDE: Desktop-CTA verstecken auf Mobile (optional) */
  .header-cta {
    display: none !important;
  }

  /* CLAUDE: Auch im Sticky/Compact-Mode verstecken (zusätzliche Absicherung) */
  .site-header.is-sticky .header-cta,
  .site-header.header--compact .header-cta {
    display: none !important;
  }

  /* CLAUDE: Brand-Text ANZEIGEN auf Mobile (rechts neben Logo) */
  /* CLAUDE: Wird via flex-order rechts vom Logo positioniert */
  .site-brand-text {
    display: flex !important;
  }

  /* CLAUDE: Site-Branding linksbündig mit Logo links und Text rechts */
  .site-branding {
    /* CLAUDE: flex-direction: row-reverse kehrt Reihenfolge um (Logo links, Text rechts) */
    flex-direction: row-reverse;

    /* CLAUDE: justify-content: flex-end für linksbündige Ausrichtung bei row-reverse */
    /* CLAUDE: Bei row-reverse ist flex-end tatsächlich links */
    justify-content: flex-end;

    /* CLAUDE: gap: kleinerer Abstand für "direkt nebeneinander" */
    gap: clamp(0.375rem, 1vw, 0.5rem);

    /* CLAUDE: min-width: auf Mobile nicht nötig, entfernen für bessere Flexibilität */
    min-width: auto;
  }

  /* CLAUDE: Brand-Text kleinere Schrift auf Mobile für bessere Lesbarkeit */
  .site-brand-text-part {
    font-size: clamp(0.75rem, 1.8vw, 0.875rem);
  }

  /* CLAUDE: Mobile-Burger-Button zeigen */
  .mobile-menu-toggle {
    display: flex;
  }
}

/* CLAUDE: ===== MOBILE (<= 767px) ===== */
@media (max-width: 767px) {
  /* CLAUDE: Header-Main reduziertes Padding */
  .header-main {
    padding-block: var(--space-sm);
    /* CLAUDE: gap wird über clamp() automatisch angepasst, kein Override nötig */
  }

  /* CLAUDE: Logo-Größe wird über clamp() automatisch angepasst, kein Override nötig */

  /* CLAUDE: Site-Title kleinere Schrift auf Mobile */
  .site-title {
    font-size: 1.25rem;
  }

  /* CLAUDE: Topleiste-Text kleinere Schrift */
  .header-top-text {
    font-size: 0.8125rem;
  }

  /* CLAUDE: Mobile-Navigation Top-Offset anpassen */
  .mobile-navigation {
    top: calc(var(--header-height-mobile) + var(--space-xs));
  }
}

/* CLAUDE: ===== SEHR KLEINE DISPLAYS (<= 374px) ===== */
@media (max-width: 374px) {
  /* CLAUDE: Header-Main noch kompakter */
  .header-main {
    padding-inline: var(--space-sm);
  }

  /* CLAUDE: Logo-Größe wird über clamp() automatisch angepasst, kein Override nötig */

  /* CLAUDE: Site-Title noch kleiner */
  .site-title {
    font-size: 1.125rem;
  }
}

/* ======================================================================
   CLAUDE: HEADER CENTER PATCH - Optimierungen für normale Header-Höhe
   ====================================================================== */

/* CLAUDE: [1] Einheitsgrößen & Abstände für Header definieren */
:root {
  /* CLAUDE: --header-h: Normale Header-Höhe (nicht sticky) */
  /* CLAUDE: Ändern: z.B. auf 80px oder 100px für höheren Header */
  --header-h: clamp(64px, 6vw, 84px);

  /* CLAUDE: --header-h-sticky: Sticky-Header-Höhe (wird in Sektion 7 genutzt) */
  /* CLAUDE: Ändern: z.B. auf 64px oder 72px für mehr Abstand unten */
  --header-h-sticky: 68px;

  /* CLAUDE: --header-pad: Padding für normalen Header */
  --header-pad: clamp(8px, 1.5vw, 14px);
}

/* CLAUDE: [2] Hauptzeile: vertikal zentrieren + Grundhöhe (NORMALER Header) */
.header-main {
  /* CLAUDE: display: flex für Flexbox-Layout */
  display: flex;

  /* CLAUDE: align-items: center für vertikale Zentrierung */
  align-items: center;

  /* CLAUDE: justify-content: space-between verteilt Logo, Nav, CTA */
  justify-content: space-between;

  /* CLAUDE: min-height: Minimale Header-Höhe */
  min-height: var(--header-h);

  /* CLAUDE: gap: Abstand zwischen Logo, Nav, CTA */
  gap: var(--space-lg, 2.5rem);

  /* CLAUDE: padding-block: Symmetrisches Padding oben/unten */
  padding-block: var(--header-pad);
}

/* CLAUDE: [3] Logo konsistent skalieren */
.site-branding img,
.site-logo img {
  /* CLAUDE: display: block entfernt Inline-Spacing */
  display: block;

  /* CLAUDE: height: Logo-Höhe (fluid mit clamp) */
  /* CLAUDE: Ändern: z.B. clamp(32px, 4vw, 40px) für größeres Logo */
  height: clamp(28px, 3.2vw, 34px);

  /* CLAUDE: width: auto behält Proportionen */
  width: auto;

  /* CLAUDE: object-fit: contain verhindert Verzerrung */
  object-fit: contain;

  /* CLAUDE: align-self: center zentriert Logo vertikal im Flexbox-Parent */
  align-self: center;
}

/* CLAUDE: [4] Sicherheitsnetz: keine unerwarteten margin-top im Header */
/* CLAUDE: Verhindert, dass Child-Elemente den Header nach oben verschieben */
.header-main * {
  /* CLAUDE: margin-block-start: 0 entfernt alle Top-Margins */
  margin-block-start: 0;
}

/* CLAUDE: [5] Optional: auf sehr kleinen Screens die Höhe reduzieren */
@media (max-width: 640px) {
  :root {
    /* CLAUDE: --header-h: reduziert auf Mobile */
    --header-h: 56px;
  }
}

/* CLAUDE: ===== DESKTOP (>= 1024px) ===== */
/* CLAUDE: Expliziter Breakpoint für Desktop-spezifische Styles */
@media (min-width: 1024px) {
  /* CLAUDE: Mobile-Burger-Menü verstecken auf Desktop */
  /* CLAUDE: Redundant (default ist bereits display: none), aber explizit für Klarheit */
  .mobile-menu-toggle {
    display: none !important;
  }

  /* CLAUDE: Desktop-Navigation sichtbar */
  /* CLAUDE: justify-self: center zentriert Navigation in Grid */
  .site-navigation {
    display: block;
    justify-self: center;
  }

  /* CLAUDE: Desktop-CTA sichtbar */
  /* CLAUDE: justify-self: end positioniert CTA rechts */
  .header-cta {
    display: block;
    justify-self: end;
  }

  /* CLAUDE: Brand-Text sichtbar auf Desktop */
  .site-brand-text {
    display: block;
  }
}