/**
 * @file theme.css
 * shadcn/ui-compatible theme variables for Byte Theme.
 *
 * You can customize these values without rebuilding the compiled CSS.
 * Tools like https://tweakcn.com can help generate these values.

:root {
  --background: oklch(23.57% 0.004 285.95);
  --foreground: oklch(95% 0.005 261.2); 
  --card: oklch(33% 0.008 261.2); 
  --card-foreground: oklch(98% 0.002 261.2);
  --primary: oklch(71.45% 0.108 81.37);
  --primary-foreground: oklch(15% 0.01 81.37);
  --secondary: oklch(28.00% 0.004 285.95);
  --secondary-foreground: oklch(98% 0 0);
  --muted: oklch(35% 0.01 261.2);
  --muted-foreground: oklch(75% 0.01 261.2);
  --accent: oklch(92% 0.004 285.95);
  --accent-foreground: oklch(0.13 0.043 265.132);
  --destructive: oklch(55% 0.15 25);
  --destructive-foreground: oklch(98% 0 0);
  --border: oklch(40% 0.01 261.2);
  --input: oklch(35% 0.01 261.2);
  --font-sans: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
}

 */


 /* Der bisherige Wert wird um 4px "tiefer" nach oben gezogen */
.mt-\[calc\(var\(--navbar-height\)\*-1\)\] {
    margin-top: calc((var(--navbar-height) * -1) - 4px) !important;
}

/* ==========================================================================
   1. LIGHT MODE (Standard-Einstellungen für helle Systeme)
   ========================================================================== */
html.light, html[data-theme="light"] {
  --background: oklch(98% 0.002 261.2) !important;      
  --foreground: oklch(20% 0.005 261.2) !important;      
  --card: oklch(100% 0 0) !important;                   
  --card-foreground: oklch(20% 0.005 261.2) !important;
  --primary: oklch(71.45% 0.108 81.37) !important;      
  --primary-foreground: oklch(15% 0.01 81.37) !important; 
  --secondary: oklch(92% 0.005 261.2) !important;       
  --secondary-foreground: oklch(20% 0.005 261.2) !important;
  --muted: oklch(95% 0.005 261.2) !important;
  --muted-foreground: oklch(55% 0.01 261.2) !important;
  --accent: oklch(90% 0.01 81.37) !important;          
  --accent-foreground: oklch(20% 0.005 261.2) !important;
  --destructive: oklch(60% 0.18 25) !important;         
  --destructive-foreground: oklch(98% 0 0) !important;
  --border: oklch(85% 0.01 261.2) !important;           
  --input: oklch(90% 0.01 261.2) !important;
}

:root {
  /* Helle Basis-Farben (Sauberes Off-White & gut lesbares Dunkelgrau) */
  --background: oklch(98% 0.002 261.2);      /* Helles, freundliches Weiß/Grau */
  --foreground: oklch(20% 0.005 261.2);      /* Dunkler Text für optimale Lesbarkeit */
  
  /* Karten & Container */
  --card: oklch(100% 0 0);                   /* Reinweiße Boxen auf leicht grauem Grund */
  --card-foreground: oklch(20% 0.005 261.2);

  /* --- Primary Box Simeoni Gold (#c2a45f) --- */
  --primary: oklch(71.45% 0.108 81.37);      /* Dein Gold-Ton bleibt identisch */
  --primary-foreground: oklch(15% 0.01 81.37); /* Dunkler Text auf Gold für Kontrast */

  /* --- Secondary Box --- */
  --secondary: oklch(92% 0.005 261.2);       /* Ein sanftes Hellgrau */
  --secondary-foreground: oklch(20% 0.005 261.2);

  /* Muted & Dezent */
  --muted: oklch(95% 0.005 261.2);
  --muted-foreground: oklch(55% 0.01 261.2);

  /* Accent */
  --accent: oklch(90% 0.01 81.37);          /* Ein ganz zarter Gold/Beige-Schimmer für Hover */
  --accent-foreground: oklch(20% 0.005 261.2);

  /* Destructive */
  --destructive: oklch(60% 0.18 25);         /* Gut sichtbares Warn-Rot im Hellen */
  --destructive-foreground: oklch(98% 0 0);

  /* Borders & Inputs */
  --border: oklch(85% 0.01 261.2);           /* Dezente, hellgraue Rahmen */
  --input: oklch(90% 0.01 261.2);
  
  /* Layout, Schriften & Schatten (Bleiben in beiden Modi gleich) */
  --font-sans: "Roboto", "Helvetica Neue", Arial, Helvetica, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: "Fira Mono", "Menlo", "Consolas", "Liberation Mono", monospace;
  --radius: 0.5rem;
  --shadow-x: 0;
  --shadow-y: 1px;
  --shadow-blur: 3px;
  --shadow-spread: 0px;
  --shadow-opacity: 0.1;
  --shadow-color: oklch(0 0 0);
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 1px 2px -1px hsl(0 0% 0% / 0.1);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 2px 4px -1px hsl(0 0% 0% / 0.1);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 4px 6px -1px hsl(0 0% 0% / 0.1);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.1), 0 8px 10px -1px hsl(0 0% 0% / 0.1);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);

  --navbar-height: calc(var(--spacing) * 15);
}

@media (min-width: 768px) {
  :root {
    --navbar-height: calc(var(--spacing) * 18);
  }
}

/* ==========================================================================
   FLAGSHIP / HERO-IMAGE TEXT FIX (ROBUST & GENERISCH - SYSTEM & BUTTON)
   ========================================================================== */
/* Sucht nach jedem Container, der 'relative' und 'z-1' enthält (dein Flagship-Layout) */
html:not(.dark) div[class*="relative"][class*="z-1"],
html[data-theme="light"] div[class*="relative"][class*="z-1"] {
  color: #ffffff !important;
}

/* Zwingt ausnahmslos alle Überschriften, Texte und Absätze darin auf Weiß */
html:not(.dark) div[class*="relative"][class*="z-1"] h1,
html:not(.dark) div[class*="relative"][class*="z-1"] h2,
html:not(.dark) div[class*="relative"][class*="z-1"] h3,
html:not(.dark) div[class*="relative"][class*="z-1"] h4,
html:not(.dark) div[class*="relative"][class*="z-1"] h5,
html:not(.dark) div[class*="relative"][class*="z-1"] h6,
html:not(.dark) div[class*="relative"][class*="z-1"] p,
html:not(.dark) div[class*="relative"][class*="z-1"] strong,
html:not(.dark) div[class*="relative"][class*="z-1"] span,
html:not(.dark) div[class*="relative"][class*="z-1"] .text-foreground,
html:not(.dark) div[class*="relative"][class*="z-1"] [class*="heading-responsive"],
html[data-theme="light"] div[class*="relative"][class*="z-1"] h1,
html[data-theme="light"] div[class*="relative"][class*="z-1"] p,
html[data-theme="light"] div[class*="relative"][class*="z-1"] span {
  color: #ffffff !important;
}

/* ==========================================================================
   INTELLIGENTE HEADER-WEICHE: MIT BILD = WEISS | OHNE BILD = DUNKEL
   ========================================================================== */

/* 1. SCHRITT: JEDER Header-Text-Container wird im Lightmode erst einmal DUNKEL. */
html:not(.dark) div.relative.z-1.flex.flex-col.items-center,
html:not(.dark) div.relative.z-1.flex.flex-col.items-center h1,
html:not(.dark) div.relative.z-1.flex.flex-col.items-center h1.text-inherit,
html:not(.dark) div.relative.z-1.flex.flex-col.items-center p,
html:not(.dark) div.relative.z-1.flex.flex-col.items-center .text-inherit,
html[data-theme="light"] div.relative.z-1.flex.flex-col.items-center h1 {
  color: var(--foreground) !important;
}

/* 2. SCHRITT: AUSNAHME MIT BILD (Startseite / Traditioneller Bogenbau etc.) */
html:not(.dark) img ~ div.relative.z-1.flex.flex-col.items-center,
html:not(.dark) img ~ div.relative.z-1.flex.flex-col.items-center h1,
html:not(.dark) img ~ div.relative.z-1.flex.flex-col.items-center p,
html:not(.dark) img ~ div.relative.z-1.flex.flex-col.items-center span,
html:not(.dark) .image ~ div.relative.z-1.flex.flex-col.items-center h1,
html:not(.dark) picture ~ div.relative.z-1.flex.flex-col.items-center h1,
html:not(.dark) section:has(img) div.relative.z-1.flex.flex-col.items-center h1,
html:not(.dark) section:has(img) div.relative.z-1.flex.flex-col.items-center h2,
html:not(.dark) section:has(img) div.relative.z-1.flex.flex-col.items-center p,
html:not(.dark) section:has(img) div.relative.z-1.flex.flex-col.items-center [class*="heading-responsive"],
html:not(.dark) body.path-frontpage div.relative.z-1.flex.flex-col.items-center h1,
html:not(.dark) body.path-frontpage div.relative.z-1.flex.flex-col.items-center h1.text-inherit,
html:not(.dark) body.path-frontpage div.relative.z-1.flex.flex-col.items-center [class*="heading-responsive"],
html[data-theme="light"] img ~ div.relative.z-1.flex.flex-col.items-center h1,
html[data-theme="light"] section:has(img) div.relative.z-1.flex.flex-col.items-center h1,
html[data-theme="light"] body.path-frontpage div.relative.z-1.flex.flex-col.items-center h1 {
  color: #ffffff !important;
}

/* ==========================================================================
   ACCENT-BOX TEXT FIX (SCHRIFT IM LIGHTMODE IMMER DUNKLER TEXT)
   ========================================================================== */
/* Findet jede Box, die als Akzent-Container mit HG-Farbe dient */
html:not(.dark) div.bg-accent,
html:not(.dark) div[class*="bg-accent"],
html[data-theme="light"] div.bg-accent,
html[data-theme="light"] div[class*="bg-accent"] {
  color: oklch(20% 0.005 261.2) !important;
}

/* Generischer Rundumschlag für ALLE potenziellen Elemente in dieser Box */
html:not(.dark) div.bg-accent h1,
html:not(.dark) div.bg-accent h2,
html:not(.dark) div.bg-accent h3,
html:not(.dark) div.bg-accent h4,
html:not(.dark) div.bg-accent h5,
html:not(.dark) div.bg-accent h6,
html:not(.dark) div.bg-accent p,
html:not(.dark) div.bg-accent strong,
html:not(.dark) div.bg-accent a,
html:not(.dark) div.bg-accent .text-background,
html:not(.dark) div.bg-accent [class*="heading-responsive"],
html[data-theme="light"] div.bg-accent h1,
html[data-theme="light"] div.bg-accent h2,
html[data-theme="light"] div.bg-accent p,
html[data-theme="light"] div.bg-accent strong {
  color: oklch(20% 0.005 261.2) !important;
}

/* Falls Links in der Box sind, beim Hovern leicht abschwächen */
html:not(.dark) div.bg-accent a:hover,
html[data-theme="light"] div.bg-accent a:hover {
  color: oklch(20% 0.005 261.2 / 80%) !important;
}

/* ==========================================================================
   Blog im Lightmodus
   ========================================================================== */
@media (prefers-color-scheme: light) {

  /* --- 1. OBERE SEKTION (HERO-BLOG) --- */
  /* Die Titel und Texte oben dunkel färben, falls sie dort schwer lesbar sind */
  section.hero-blog h1,
  section.hero-blog h1.text-inherit,
  section.hero-blog p,
  section.hero-blog time {
    color: oklch(20% 0.005 261.2) !important;
  }


  /* --- 2. UNTERE SEKTION (BEIGE HINTERGRUND) --- */
  /* Wir schnappen uns die untere Sektion und zwingen alle enthaltenen 
     Texte von Weiß auf dein gut lesbares Dunkelgrau */
  section.hero-blog ~ section h1,
  section.hero-blog ~ section h2,
  section.hero-blog ~ section h3,
  section.hero-blog ~ section h4,
  section.hero-blog ~ section p,
  section.hero-blog ~ section strong,
  section.hero-blog ~ section em,
  section.hero-blog ~ section li,
  section.hero-blog ~ section div.text-background {
    color: oklch(20% 0.005 261.2) !important;
  }

  /* --- 3. FEINSCHLIFF FÜR ZITATE & LINKS IM UNTEREN BEREICH --- */
  /* Das Zitat bekommt einen grauen Balken statt einem weißen */
  section.hero-blog ~ section blockquote {
    border-left: 4px solid var(--border) !important;
    color: oklch(20% 0.005 261.2) !important;
    background: transparent !important;
    padding-left: 1rem !important;
  }
  
  /* Verhindert den doppelten Rahmen innerhalb des Zitats */
  section.hero-blog ~ section blockquote * {
    border: none !important; 
    border-left: none !important;
    padding-left: 0 !important;
    color: inherit !important;
  }

  /* Links im Blogtext */
  section.hero-blog ~ section a {
    color: var(--primary) !important;
    text-decoration: underline !important;
  }
  section.hero-blog ~ section a:hover {
    color: var(--foreground) !important;
  }
}

/* ==========================================================================
   Blog im Darkmodus
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  section.hero-blog ~ section h1,
  section.hero-blog ~ section h2,
  section.hero-blog ~ section h3,
  section.hero-blog ~ section h4,
  section.hero-blog ~ section p,
  section.hero-blog ~ section strong,
  section.hero-blog ~ section em,
  section.hero-blog ~ section li,
  section.hero-blog ~ section div.text-background {
    color: oklch(20% 0.005 261.2) !important;
  }

  /* --- 3. FEINSCHLIFF FÜR ZITATE & LINKS IM UNTEREN BEREICH --- */
  /* Das Zitat bekommt einen grauen Balken statt einem weißen */
  section.hero-blog ~ section blockquote {
    border-left: 4px solid var(--border) !important;
    color: oklch(20% 0.005 261.2) !important;
    background: transparent !important;
    padding-left: 1rem !important;
  }

}

/* ==========================================================================
   2. DARK MODE (Deine exakten, optimierten Simeoni-Werte)
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  /* Reagiert auf das System, aber NUR wenn der User nicht manuell auf Light geklickt hat */
  :root:not(.light) {
    --background: oklch(23.57% 0.004 285.95);
    --foreground: oklch(95% 0.005 261.2); 
    --card: oklch(33% 0.008 261.2); 
    --card-foreground: oklch(98% 0.002 261.2); 

    /* --- Primary Box Simeoni Gold --- */
    --primary: oklch(71.45% 0.108 81.37); 
    --primary-foreground: oklch(15% 0.01 81.37); 

    /* --- Secondary Box --- */
    --secondary: oklch(28.00% 0.004 285.95); 
    --secondary-foreground: oklch(98% 0 0);

    /* Muted */
    --muted: oklch(35% 0.01 261.2);
    --muted-foreground: oklch(75% 0.01 261.2);

    /* Accent */
    --accent: oklch(92% 0.004 285.95);
    --accent-foreground: oklch(0.13 0.043 265.132);

    /* Destructive */
    --destructive: oklch(55% 0.15 25);
    --destructive-foreground: oklch(98% 0 0);

    /* Borders & Inputs */
    --border: oklch(40% 0.01 261.2);
    --input: oklch(35% 0.01 261.2);
  }
}

/* ERZWUNGENER DARK MODE: Wenn die Klasse aktiv per JS gesetzt wird */
html.dark, html[data-theme="dark"] {
  --background: oklch(23.57% 0.004 285.95) !important;
  --foreground: oklch(95% 0.005 261.2) !important; 
  --card: oklch(33% 0.008 261.2) !important; 
  --card-foreground: oklch(98% 0.002 261.2) !important; 
  --primary: oklch(71.45% 0.108 81.37) !important; 
  --primary-foreground: oklch(15% 0.01 81.37) !important; 
  --secondary: oklch(28.00% 0.004 285.95) !important; 
  --secondary-foreground: oklch(98% 0 0) !important;
  --muted: oklch(35% 0.01 261.2) !important;
  --muted-foreground: oklch(75% 0.01 261.2) !important;
  --accent: oklch(92% 0.004 285.95) !important;
  --accent-foreground: oklch(0.13 0.043 265.132) !important;
  --destructive: oklch(55% 0.15 25) !important;
  --destructive-foreground: oklch(98% 0 0) !important;
  --border: oklch(40% 0.01 261.2) !important;
  --input: oklch(35% 0.01 261.2) !important;
}

/* ==========================================================================
   3. LIGHT MODE ONLY: UNIFIED LIGHT DESIGN (Buttons & Dropdowns)
   ========================================================================== */

/* Dieser komplette Block gilt NUR für das helle Farbschema */
@media (prefers-color-scheme: light) {

  /* --------------------------------========================================
     A) DIE BUTTONS DER 1. EBENE (Immer hell mit dunkler Schrift)
     ----------------------------------------------------------------======== */
  html body .navbar--menu > ul > li > a,
  html body .navbar--menu > a,
  html body .navbar nav > ul > li > a,
  html body header[role="banner"] nav > ul > li > a {
    background-color: oklch(98% 0 0) !important;       /* Sehr helles Weiß/Grau */
    color: oklch(20% 0.005 261.2) !important;           /* Dunkle Schrift */
    border-radius: var(--radius, 0.5rem);
    padding: 0.5rem 1rem;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease-in-out;
  }

  /* Hover auf den Buttons der 1. Ebene (Wird Gold mit dunkler Schrift) */
  html body .navbar--menu > ul > li > a:hover,
  html body .navbar--menu > a:hover,
  html body nav > ul > li > a:hover {
    background-color: var(--primary) !important;        /* Dein Simeoni-Gold */
    color: var(--primary-foreground) !important;       /* Passende dunkle Schrift auf Gold */
    border-color: var(--primary) !important;
  }

  /* --------------------------------========================================
     B) DER AUFPLOPPENDE LAYER / DROPDOWN (2. Ebene - Ebenfalls hell)
     --------------------------------======================================== */
  html body .has-dropdown > ul,
  html body nav ul li ul,
  html body .navbar--menu ul ul {
    /* Wir überschreiben das Tailwind md:bg-muted auf ein solides, helles Weiß */
    --muted: oklch(98% 0 0) !important; 
    background-color: var(--muted) !important;
    border: 1px solid oklch(85% 0 0) !important;        /* Sauberer Rahmen für den Layer */
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08) !important; /* Weicher heller Schatten */
  }

  /* Links innerhalb des hellen Dropdowns */
  html body .has-dropdown > ul li a,
  html body nav ul li ul a {
    color: oklch(20% 0.005 261.2) !important;           /* Dunkle Schrift */
    background: transparent !important;                 /* Verhindert falsche BG-Vererbung */
  }

  /* Hover-Effekt für die Links im Dropdown */
  html body .has-dropdown > ul li a:hover,
  html body nav ul li ul a:hover {
    background-color: var(--primary) !important;        /* Hover im Menü wechselt auch auf Gold */
    color: var(--primary-foreground) !important;       /* Schrift bleibt lesbar */
  }

  /* --------------------------------========================================
     C) HEADER-TRANSPARENZ (Sichert, dass die Zeile selbst unsichtbar bleibt)
     --------------------------------======================================== */
  header[role="banner"] {
    background: transparent !important;
    background-color: transparent !important;
  }
  .navbar, .navbar--menu {
    background-color: transparent !important;
  }
}

/* ==========================================================================
   UNIVERSAL DRAWER DESIGN (FINALE VERSION MIT GOLD-HOVER AUF ALLEN EBENEN)
   ========================================================================== */

/* 1. Hamburger-Button im normalen Header immer erzwingen */
.navbar--hamburger-container,
.navbar--hamburger {
  display: flex !important;
  visibility: visible !important;
  cursor: pointer !important;
  z-index: 9995 !important;
}

/* Wenn offen: Header-Hamburger im Hintergrund unsichtbar machen */
body:has(.navbar--menu--open) .navbar--hamburger-container,
body:has(.navbar--menu--open) .navbar--hamburger {
  opacity: 0 !important;
  pointer-events: none !important;
}

/* 2. Der Menü-Drawer (Im geschlossenen Zustand OHNE Schatten) */
div.navbar--menu {
  display: grid !important; 
  position: fixed !important;
  inset: 0 0 0 auto !important; 
  top: calc(var(--drupal-displace-offset-top, 0px) + var(--gin-toolbar-height, 0px) - var(--navbar-scroll-top, 0px)) !important;
  
  width: 100% !important;
  max-width: 400px !important; 
  height: 100vh !important;
  left: auto !important; 
  
  background-color: color-mix(in oklch, var(--background) 92%, transparent) !important;
  backdrop-filter: blur(16px) !important; 
  
  transform: translateX(100%) !important; 
  transition: transform 0.3s ease-in-out !important;
  z-index: 9998 !important; 
  
  /* HIER GEÄNDERT: Kein Schatten im versteckten Zustand */
  box-shadow: none !important; 
  
  flex-direction: column !important;
}

/* ERST WENN OFFEN: Schatten sanft einblenden */
div.navbar--menu.navbar--menu--open {
  transform: translateX(0) !important;
  box-shadow: -10px 0 30px rgba(0,0,0,0.25) !important;
}

/* 3. Vertikale Hauptstruktur */
div.navbar--menu nav ul[data-level="1"] {
  flex-direction: column !important;
  width: 100% !important;
  padding: 1.5rem !important;
  gap: 1.25rem !important;
}

div.navbar--menu nav ul[data-level="1"] li {
  list-style-type: none !important;
  display: block !important;
}

/* Alle Links der 1. Ebene im Ruhezustand */
div.navbar--menu nav ul[data-level="1"] > li > a {
  font-size: var(--text-lg) !important;
  font-weight: 600 !important;
  color: var(--foreground) !important;
  padding: 0.5rem 0 !important;
  background: transparent !important;
  transition: color 0.2s ease !important;
  display: inline-block !important;
  width: 100% !important;
  transform: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* PFEIL-ENTFERNUNG */
div.navbar--menu nav ul[data-level="1"] > li > a svg {
  display: none !important;
}
.group:hover .group-\[\.dropdown-open\]\:rotate-180,
.group:hover .group-hover\:rotate-180 {
  transform: none !important;
}

/* 4. DIE UNTERLISTE (Simeoni-Gold-Linie) */
div.navbar--menu nav ul[data-level="1"] li ul {
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  opacity: 1 !important;
  visibility: visible !important;
  z-index: 99999 !important; 
  box-shadow: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0.5rem 0 0.5rem 1.25rem !important;
  margin-top: 0.25rem !important;
  margin-left: 0.5rem !important;
  border-left: 2px solid var(--primary) !important; 
  display: flex !important;
  flex-direction: column !important;
  gap: 0.75rem !important;
  pointer-events: auto !important;
}

div.navbar--menu nav ul[data-level="1"] li ul li {
  position: relative !important;
  z-index: 99999 !important;
  pointer-events: auto !important;
}

/* Alle Links der Unterebenen (Ebene 2 & Ebene 3) im Ruhezustand */
div.navbar--menu nav ul[data-level="1"] li ul li a,
div.navbar--menu nav ul[data-level="1"] li ul li ul li a {
  color: var(--foreground) !important;
  opacity: 0.85 !important;
  font-size: var(--text-base) !important;
  background: transparent !important;
  display: inline-block !important;
  width: 100% !important;
  pointer-events: auto !important; 
  position: relative !important;
  z-index: 100000 !important;
  
  transform: none !important;
  transition: color 0.2s ease !important; 
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* --------------------------------------------------------------------------
   HOVER-EFFEKTE RADIKAL FIXEN (EBENE 1, 2 UND 3 ALLERGIERT AUF GOLD)
   -------------------------------------------------------------------------- */

/* 1. Gold-Effekt für ALLE Ebenen erzwingen */
div.navbar--menu nav ul[data-level="1"] > li > a:hover,
div.navbar--menu nav ul[data-level="1"] li ul li a:hover,
div.navbar--menu nav ul[data-level="1"] li ul li ul li a:hover {
  color: var(--primary) !important;
  opacity: 1 !important;
}

/* 2. Ruckeln auf allen Ebenen komplett eliminieren */
div.navbar--menu nav ul[data-level="1"] > li > a:hover,
div.navbar--menu nav ul[data-level="1"] > li:hover > a,
div.navbar--menu nav ul[data-level="1"] li ul li a:hover,
div.navbar--menu nav ul[data-level="1"] li ul li ul li a:hover,
div.navbar--menu nav ul[data-level="1"] li ul li:hover a,
div.navbar--menu nav ul[data-level="1"] li ul li ul li:hover a {
  transform: none !important;
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* 5. DER TITEL-BEREICH IM LAYER */
div.navbar--menu .navbar--modal-top {
  display: flex !important;
  justify-content: space-between !important; 
  align-items: center !important;
  padding: 1.5rem !important;
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important; 
}

/* X-Positionierung ganz rechts */
div.navbar--menu .navbar--hide-menu {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  cursor: pointer !important;
  z-index: 99999 !important;
  position: relative !important;
  margin-left: auto !important; 
}

/* OPTION C: Eleganter Folgepfeil beim Hovern */
div.navbar--menu nav ul[data-level="1"] > li > a::after {
  content: ' →' !important;
  opacity: 0 !important;
  transition: all 0.2s ease !important;
  display: inline-block !important;
  transform: translateX(-5px) !important;
  color: var(--primary) !important;
}

div.navbar--menu nav ul[data-level="1"] > li > a:hover::after {
  opacity: 1 !important;
  transform: translateX(5px) !important;
}

/* FINE-TUNING MOBILE: Permanenter Link-Indikator für die 1. Ebene */
@media (max-width: 47.99rem) {
  div.navbar--menu nav ul[data-level="1"] > li > a::after {
    content: ' →' !important;
    opacity: 0.6 !important; /* Dezent und edel */
    color: var(--primary) !important; /* In deinem Simeoni-Gold */
    display: inline-block !important;
    margin-left: 8px !important;
  }
}

/* ==========================================================================
   VISUELLES HIGHLIGHTING FÜR AKTIVE SEITEN (ALLE EBENEN)
   ========================================================================== */

/* ==========================================================================
   STANDARD VISUELLES HIGHLIGHTING (FÜR NORMALE SEITEN)
   ========================================================================== */
div.navbar--menu nav ul[data-level="1"] > li > a[class*="bg-muted/50"],
div.navbar--menu nav ul[data-level="1"] li.menu-item--active-trail > a {
  color: var(--primary) !important;
  opacity: 1 !important;
}


/* ==========================================================================
   HAMBURGER-BUTTON: ULTRA-MASSIV, ENGE ABSTÄNDE & SCALE (ALL DEVICES)
   ========================================================================== */

/* 1. Der äußere Button bleibt flach gebunden, damit die Linien eng stehen */
.navbar--hamburger,
button[class*="hamburger"],
div[class*="hamburger"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 65px !important;    /* Etwas mehr Breite für den Scale-Raum */
  height: 26x !important;   /* Flache Box drückt die Linien zusammen */
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important; /* Wichtig, damit das skalierte SVG nicht abgeschnitten wird */
}

/* 2. Hier zünden wir den Scale-Effekt direkt auf dem SVG */
.navbar--hamburger svg,
button[class*="hamburger"] svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(2) !important; /* Vergrößert das Icon, ohne die Box zu zerreißen */
  transform-origin: center center !important;
  overflow: visible !important;
}

/* 3. Maximale Strichstärke für die Vektoren */
.navbar--hamburger svg *,
button[class*="hamburger"] svg * {
  stroke: var(--primary) !important;
  stroke-width: 2.5px !important;           /* Richtig fette WordPress-Balken */
  stroke-linecap: round !important;         /* Schöne abgerundete Ecken */
  vector-effect: non-scaling-stroke !important; /* Hält die 5.5px absolut stabil */
}

/* ==========================================================================
   SCROLL-BLOCKADE AUF DESKTOP KOMPLETT ZERSCHLAGEN (HTML, BODY & WRAPPER)
   ========================================================================== */
@media (min-width: 48rem) {
  html, 
  body,
  #page-wrapper,
  .page-site,
  #main-wrapper,
  div:has(> .navbar--menu) {
    overflow: auto !important;
    overflow-x: hidden !important; /* Verhindert unschönes horizontales Wackeln */
    height: auto !important;
    position: static !important; /* Falls das Theme den Body auf 'fixed' setzt */
  }
}

/* ==========================================================================
   HAMBURGER-BUTTON: SAUBERER WORKAROUND FÜR DICKE & SKALIERUNG
   ========================================================================== */
.navbar--hamburger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 65px !important;
  height: 28px !important; /* Hält die Box flach, presst Linien zusammen */
  padding: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  margin-left: 0 !important; /* Reset, keine Verschiebungen mehr! */
}

.navbar--hamburger svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.4) !important; /* Macht das Icon mächtig */
  transform-origin: center center !important;
  overflow: visible !important;
}

.navbar--hamburger svg * {
  stroke: var(--primary) !important;
  stroke-width: 5.5px !important; /* Brachiale Stärke */
  stroke-linecap: round !important;
  vector-effect: non-scaling-stroke !important;
}

/* ==========================================================================
   HAMBURGER-BUTTON: BRACHIAL & VOLLE RADIEN
   ========================================================================= */
.navbar--hamburger {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 75px !important;
  min-width: 75px !important;
  height: 40px !important;
  overflow: visible !important; /* Verhindert das Abschneiden der Ecken */
  padding: 0 5px !important; 
  background: transparent !important;
  flex-shrink: 0 !important;
}

/* Eltern-Container zwingen, Radien nicht abzuschneiden */
.navbar--links,
.navigation__header,
div:has(> .navbar--hamburger) {
  overflow: visible !important;
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
}

.navbar--hamburger svg {
  width: 100% !important;
  height: 100% !important;
  transform: scale(1.3) !important; /* Mächtige Skalierung */
  transform-origin: center center !important;
  overflow: visible !important;
}

.navbar--hamburger svg * {
  stroke: var(--primary) !important;
  stroke-width: 5.5px !important; /* Brachiale Balken-Dicke */
  stroke-linecap: round !important; /* Perfekte runde Kanten wie Enfold */
  stroke-linejoin: round !important;
  vector-effect: non-scaling-stroke !important;
}

/* ==========================================================================
   BRUTALER SCROLL-RELEASE FIX (767px und weniger)
   ========================================================================== */
@media (max-width: 767px) {
  /* Falls das Menü offen ist: Sperren */
  html:has(.navbar--menu--open),
  body:has(.navbar--menu--open) {
    overflow: hidden !important;
    height: 100vh !important;
  }

  /* DIE RETTUNG: Wenn das Menü NICHT offen ist (:not), überschreiben wir 
     jeden manipulierten Inline-Style des Themes und erzwingen das Scrollen! */
  html:not(:has(.navbar--menu--open)),
  body:not(:has(.navbar--menu--open)) {
    overflow: auto !important;
    overflow-x: hidden !important;
    height: auto !important;
    position: static !important;
  }
}

/* ==========================================================================
   THEME-TOGGLE & HOME-LINK: MASTER-CONFIG
   ========================================================================== */

/* Container: Volle Breite, flexibel */
.custom-nav-wrapper {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 1.5rem !important;
    margin-bottom: 1rem !important;
}

/* Der Toggle-Button: Schiebt sich selbst nach rechts */
.theme-toggle-btn {
    margin-left: auto !important; /* DRÜCKT ALLES LINKS DAVON WEG */
    background: transparent !important;
    border: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* Das Haus: Bleibt automatisch links, weil es jetzt "hinter" dem Toggle steht */
.home-link {
    display: flex !important;
    margin-right: auto !important; /* Optional: sorgt für Stabilität */
    order: -1 !important;        /* Zwingt das Haus an die absolute erste Position */
}

/* Startseiten-Logik: Einfach ausblenden */
body.path-frontpage #home-link {
    display: none !important;
}

/* --- 3. TOGGLE-BUTTON --- */
#theme-toggle-btn {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0.5rem 0.5rem 0.5rem 2rem;
    margin: 0 !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    transition: opacity 0.2s ease;
}

/* Startseiten-Logik: ken Abstand */
body.path-frontpage #theme-toggle-btn {
    padding: 0.5rem 0.5rem 0.5rem 0 !important;
}

#theme-toggle-btn:hover {
    opacity: 0.5;
    background: transparent !important;
}

#theme-toggle-btn .mac-dynamic-circle {
    width: 21px !important;
    height: 21px !important;
}

/* --- 4. STARTSEITE: Ausblenden & Ausrichtung korrigieren --- */
body.path-frontpage .toggle-container #home-link {
    display: none !important;
}

body.path-frontpage .toggle-container {
    justify-content: flex-end !important; /* Wenn Haus weg, Toggle ganz nach rechts */
}

/* --- 5. ICON-LOGIK (Lightmode) --- */
html:not(.dark) #theme-toggle-btn .mac-dynamic-circle,
html.light #theme-toggle-btn .mac-dynamic-circle,
html[data-theme="light"] #theme-toggle-btn .mac-dynamic-circle { color: #000000 !important; }

html:not(.dark) #theme-toggle-btn .half-left,
html.light #theme-toggle-btn .half-left,
html[data-theme="light"] #theme-toggle-btn .half-left { fill: transparent !important; }

html:not(.dark) #theme-toggle-btn .half-right,
html.light #theme-toggle-btn .half-right,
html[data-theme="light"] #theme-toggle-btn .half-right { fill: #000000 !important; }

html:not(.dark) #theme-toggle-btn .text-mode-light,
html.light #theme-toggle-btn .text-mode-light,
html[data-theme="light"] #theme-toggle-btn .text-mode-light { display: inline-block !important; }

html:not(.dark) #theme-toggle-btn .text-mode-dark,
html.light #theme-toggle-btn .text-mode-dark,
html[data-theme="light"] #theme-toggle-btn .text-mode-dark { display: none !important; }

/* --- 5. ICON-LOGIK (Darkmode) --- */
@media (prefers-color-scheme: dark) {
  html:not(.light):not([data-theme="light"]) #theme-toggle-btn .mac-dynamic-circle { color: #ffffff !important; }
  html:not(.light):not([data-theme="light"]) #theme-toggle-btn .half-left { fill: #ffffff !important; }
  html:not(.light):not([data-theme="light"]) #theme-toggle-btn .half-right { fill: transparent !important; }
  html:not(.light):not([data-theme="light"]) #theme-toggle-btn .text-mode-light { display: none !important; }
  html:not(.light):not([data-theme="light"]) #theme-toggle-btn .text-mode-dark { display: inline-block !important; }
}

html.dark #theme-toggle-btn .mac-dynamic-circle,
html[data-theme="dark"] #theme-toggle-btn .mac-dynamic-circle { color: #ffffff !important; }
html.dark #theme-toggle-btn .half-left,
html[data-theme="dark"] #theme-toggle-btn .half-left { fill: #ffffff !important; }
html.dark #theme-toggle-btn .half-right,
html[data-theme="dark"] #theme-toggle-btn .half-right { fill: transparent !important; }
html.dark #theme-toggle-btn .text-mode-light,
html[data-theme="dark"] #theme-toggle-btn .text-mode-light { display: none !important; }
html.dark #theme-toggle-btn .text-mode-dark,
html[data-theme="dark"] #theme-toggle-btn .text-mode-dark { display: inline-block !important; }


/* ==========================================================================
   THEME-TOGGLE: REPOSITIONIERUNG NACH OBEN (ÜBER NAVI)
   ========================================================================== */

/* 1. Haupt-Container anpassen (Der Rahmen um Button und Navi) */
.navbar--dropdown-menu {
  display: flex !important;
  flex-direction: column !important; /* Stapelt Elemente vertikal */
  align-items: stretch !important;    /* Sorgt für volle Breite */
}

/* 2. Den Button nach ganz oben zwingen */
#theme-toggle-btn {
  order: 1;          /* Schiebt den Button an die erste Stelle des Containers */
  margin-bottom: 1rem; /* Abstand zur darunterliegenden Navigation */
  margin-right: auto;  /* Hält ihn linksbündig, falls gewünscht */
  width: fit-content;  /* Button soll nur so breit sein wie sein Inhalt */
}

/* 3. Auf Desktop: Button und Navi nebeneinander, aber Button oben */
@media (min-width: 768px) {
  .navbar--dropdown-menu {
    flex-direction: row !important; /* Wieder horizontal */
    flex-wrap: wrap !important;     /* Erlaubt Umbruch */
  }

  #theme-toggle-btn {
    order: 1;             /* Bleibt vorne */
    flex-basis: 100%;      /* Zwingt den Button auf eine eigene Zeile */
    margin-bottom: 1rem;   /* Abstand nach unten */
  }
}

/* 1. Den Wrapper zwingen, bei kleinen Bildschirmen das Scrollen intern zu erledigen */
.navbar--dropdown-menu-wrapper {
    flex: 0 1 auto !important; /* Kein aggressives 'flex-1' mehr */
    height: calc(100vh - 80px) !important; /* Lässt Platz für den Header/Footer */
    overflow-y: auto !important;           /* Aktiviert den Scrollbalken NUR für den Inhalt */
    min-height: 200px !important;          /* Verhindert das Zusammenquetschen */
}

/* 2. Den Header (Haus/Toggle) im Wrapper fixieren */
.custom-nav-wrapper {
    position: sticky !important;
    top: 0 !important;
    z-index: 100 !important;
}

/* 1. Scrollbar permanent andeuten, wenn Platzmangel herrscht */
.navbar--dropdown-menu-wrapper {
    scrollbar-gutter: stable; /* Reserviert Platz für die Scrollbar, damit nichts springt */
    overflow-y: auto !important;
}

/* 2. Scrollbar Stylings - Deutlich und immer sichtbar */
.navbar--dropdown-menu-wrapper::-webkit-scrollbar {
    width: 12px !important; /* Etwas breiter für bessere Klickbarkeit */
    display: block !important;
}

.navbar--dropdown-menu-wrapper::-webkit-scrollbar-track {
    background: var(--muted) !important;
}

.navbar--dropdown-menu-wrapper::-webkit-scrollbar-thumb {
    background-color: var(--primary) !important;
    border: 3px solid var(--muted) !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   WEBFORM MODAL FIX (Danke-Dialog) - UPDATED
   ========================================================================== */

/* 1. GRUND-STYLING: Jetzt mit 8px Border-Highlight */
.webform-confirmation-modal.ui-dialog {
    background-color: var(--background) !important;
    border: 8px solid var(--muted) !important; /* Der 8px Rahmen */
    border-radius: var(--radius) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3) !important;
    color: var(--foreground) !important;
}

/* 2. HEADER-STYLING */
.webform-confirmation-modal .ui-dialog-titlebar {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    padding: 1rem !important;
    border: none !important;
}

/* 3. CLOSE-BUTTON: Rundes Design entfernt, X verschoben */
.webform-confirmation-modal .ui-dialog-titlebar-close {
    background: transparent !important; /* Hintergrund weg */
    border: none !important;
    width: 24px !important;
    height: 24px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* X-Icon: Positionierung korrigiert (nach rechts und unten verschoben) */
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon {
    background-image: none !important;
    position: relative !important;
    top: 4px !important;  /* 4px nach unten */
    left: 4px !important; /* 4px nach rechts */
    width: 16px !important;
    height: 16px !important;
    display: block !important;
}

/* X-Form zeichnen */
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::before,
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::after {
    content: '' !important;
    position: absolute !important;
    width: 14px !important;
    height: 2px !important;
    background-color: var(--foreground) !important;
}
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::before { transform: rotate(45deg); }
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::after { transform: rotate(-45deg); }

/* 4. LIGHT-MODE ANPASSUNGEN */
html.light .webform-confirmation-modal.ui-dialog,
html[data-theme="light"] .webform-confirmation-modal.ui-dialog {
    background-color: oklch(98% 0.002 261.2) !important;
    border-color: oklch(90% 0.005 261.2) !important; /* Hellgrauer Rahmen für Light */
}

html.light .webform-confirmation-modal .ui-dialog-title,
html[data-theme="light"] .webform-confirmation-modal .ui-dialog-title {
    color: oklch(20% 0.005 261.2) !important;
}

html.light .webform-confirmation-modal--content h2,
html.light .webform-confirmation-modal--content p {
    color: oklch(20% 0.005 261.2) !important;
}

/* ==========================================================================
   WEBFORM MODAL FIX (Danke-Dialog) - FINAL TUNING
   ========================================================================== */

/* 1. GRUND-STYLING: Rahmen-Farbe etwas deutlicher, Padding für Content */
.webform-confirmation-modal.ui-dialog {
    background-color: var(--background) !important;
    /* Ein deutlicherer Rahmen für bessere Abgrenzung: */
    border: 8px solid var(--primary) !important; 
    border-radius: var(--radius) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3) !important;
    color: var(--foreground) !important;
    padding: 0 !important; /* Wichtig: Padding am Container auf 0, um den Rahmen zu halten */
}

/* 2. HEADER-STYLING */
.webform-confirmation-modal .ui-dialog-titlebar {
    background-color: var(--card) !important;
    color: var(--foreground) !important;
    padding: 1rem 1.5rem !important; /* Konsistentes Padding links */
    border-bottom: 1px solid var(--border) !important;
}

/* 3. INHALT-STYLING: Jetzt mit Padding links und rechts */
.webform-confirmation-modal .webform-confirmation-modal--content {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    padding: 1.5rem !important; /* Hier das fehlende Padding für alle Seiten */
}

/* 4. LIGHT-MODE ANPASSUNG: Rahmen farblich anpassen */
html.light .webform-confirmation-modal.ui-dialog,
html[data-theme="light"] .webform-confirmation-modal.ui-dialog {
    background-color: oklch(98% 0.002 261.2) !important;
    border-color: var(--primary) !important; /* Auch im Light-Mode den Rahmen nutzen */
}

/* 5. CLOSE-BUTTON: Zentrierung verfeinert */
.webform-confirmation-modal .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-right: 0.5rem !important;
}

.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon {
    background-image: none !important;
    position: relative !important;
    width: 16px !important;
    height: 16px !important;
    display: block !important;
    top: 10px !important;
    left: 8px !important;
}

/* 5. SCHLIESSEN-BUTTON: X-Zeichnung optimiert */
.webform-confirmation-modal .ui-dialog-titlebar-close {
    background: transparent !important;
    border: none !important;
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
}

/* Wir nutzen den ui-icon Container als Basis für das X */
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon {
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-image: none !important;
    position: relative !important;
}

/* Zeichnung des X direkt in das ui-icon Element */
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::before,
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::after {
    content: '' !important;
    position: absolute !important;
    top: 9px !important; /* Vertikale Mitte im 20px Container */
    left: 0 !important;
    width: 20px !important;
    height: 2px !important;
    background-color: var(--foreground) !important;
}

.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::before { transform: rotate(45deg); }
.webform-confirmation-modal .ui-dialog-titlebar-close .ui-icon::after { transform: rotate(-45deg); }

/* ==========================================================================
   KLARO COOKIE CONSENT - FIXES
   ========================================================================== */

/* 1. VARIABLEN-BINDUNG (Setzt Farben global für Klaro) */
#klaro, #klaro .klaro {
    --klaro-bg: var(--background) !important;
    --klaro-notice-bg: var(--background) !important;
    --klaro-text-color: var(--foreground) !important;
    --klaro-text-muted: var(--muted-foreground) !important;
    --klaro-btn-success-bg: var(--primary) !important;
    --klaro-btn-success-text: var(--primary-foreground) !important;
    --klaro-button-bg: var(--secondary) !important;
    --klaro-button-text-color: var(--secondary-foreground) !important;
    --klaro-border-color: var(--border) !important;
}

/* 2. HARD OVERRIDE (Überschreibt auch Inline-Styles und Standard-Farben) */
#klaro .cookie-notice, 
#klaro .cookie-modal {
    background-color: var(--background) !important;
    color: var(--foreground) !important;
    border: 1px solid var(--border) !important;
}

/* 3. BUTTON-FIX: "Anpassen" (Info-Button) Border korrigiert */
#klaro .cm-btn.cm-btn-info,
#klaro .cm-link {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border: 1px solid var(--border) !important; /* Hier wird der Border definiert */
    outline: none !important;
}

/* 4. BUTTON-FIX: "Akzeptieren" (Success-Button) */
#klaro .cm-btn.cm-btn-success {
    background-color: var(--primary) !important;
    color: var(--primary-foreground) !important;
    border: none !important;
}

/* 5. WEISS-AUF-WEISS FIX: Erzwingt dunkle Schrift im Light-Mode */
html.light #klaro, 
html[data-theme="light"] #klaro {
    color: oklch(20% 0.005 261.2) !important; /* Dunkles Grau für Text */
}

html.light #klaro .cookie-notice,
html[data-theme="light"] #klaro .cookie-notice {
    background-color: oklch(98% 0.002 261.2) !important; /* Helles Weiß/Grau für BG */
    color: oklch(20% 0.005 261.2) !important;
}

/* Spezifische Text-Überschreibung im Light-Mode */
html.light #klaro h2,
html.light #klaro p,
html[data-theme="light"] #klaro h2,
html[data-theme="light"] #klaro p {
    color: oklch(20% 0.005 261.2) !important;
}

/* 1. Genereller Fix für das Close-Icon (Dark/Standard) */
#klaro .klaro .cn-decline.klaro-close {
  color: var(--foreground) !important;
  opacity: 0.6 !important;
}

#klaro .klaro .cn-decline.klaro-close:hover {
  opacity: 1 !important;
}

/* 2. SPEZIAL-FIX FÜR LIGHT-MODE: X auf Dunkel setzen */
html.light #klaro .klaro .cn-decline.klaro-close,
html[data-theme="light"] #klaro .klaro .cn-decline.klaro-close {
  color: oklch(20% 0.005 261.2) !important; /* Dein dunkles Grau */
}

/* 3. Falls es ein SVG-Icon ist: Farbe erzwingen */
#klaro .klaro .cn-decline.klaro-close svg path {
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* 1. Genereller Fix für Strong innerhalb von Klaro */
#klaro .klaro strong {
  color: var(--foreground) !important;
  font-weight: 700 !important;
}

/* 2. Spezifischer Fix für Light-Mode (Weiß auf Weiß Problem lösen) */
html.light #klaro .klaro strong,
html[data-theme="light"] #klaro .klaro strong {
  color: oklch(20% 0.005 261.2) !important; /* Hier das dunkle Grau erzwingen */
}

/* 1. DAS BLAU AUS DEN SLIDERN/TOGGLES ENTFERNEN */
/* ==========================================================================
   SLIDER STATUS-LOGIK: AKTIV = GOLD | INAKTIV = NEUTRAL/GRAU
   ========================================================================== */

/* 1. GRUNDZUSTAND: Inaktiv (Wenn Checkbox NICHT gecheckt ist) */
#klaro .slider.round {
    background-color: var(--muted) !important; /* Neutrales Grau, wenn AUS */
    border: 1px solid var(--border) !important;
    transition: background-color 0.3s ease !important;
}

/* 2. AKTIV-ZUSTAND: Wenn Checkbox GECHECKT ist (Slider GOLD) */
#klaro input:checked + .cm-list-label .slider.round {
    background-color: var(--primary) !important; /* Simeoni Gold, wenn AN */
    border-color: var(--primary) !important;
}

/* 3. FEINSCHLIFF FÜR DEN SLIDER-KREIS (Optional: Der Punkt auf dem Schalter) */
#klaro .slider.round::before {
    background-color: white !important; /* Der Punkt ist immer weiß für Kontrast */
}

/* 4. VISUELLER KONTRAST FÜR CHECKBOXEN (Hilft bei der Unterscheidung) */
#klaro .cm-list-input:checked + .cm-list-label {
    opacity: 1 !important;
}

#klaro .cm-list-input:not(:checked) + .cm-list-label {
    opacity: 0.4 !important; /* Etwas blasser, wenn der Service aus ist */
}

#klaro .slider.round.active {
    background-color: var(--primary) !important; /* Gold statt Blau, wenn aktiv */
}

/* 2. KONTRAST IM LIGHT-MODE ERHÖHEN */
html.light #klaro .cm-modal,
html[data-theme="light"] #klaro .cm-modal {
    background-color: oklch(98% 0.002 261.2) !important; /* Sauberes Weiß */
    border: 1px solid oklch(85% 0.01 261.2) !important;
}

/* Text im Modal im Light-Mode dunkel setzen */
html.light #klaro .cm-modal h1,
html.light #klaro .cm-modal p,
html.light #klaro .cm-modal span,
html[data-theme="light"] #klaro .cm-modal h1,
html[data-theme="light"] #klaro .cm-modal p,
html[data-theme="light"] #klaro .cm-modal span {
    color: oklch(20% 0.005 261.2) !important;
}

/* 3. DIE LISTEN-ELEMENTE (RADIO/CHECKBOX BEREICH) */
#klaro .cm-list-label {
    color: var(--foreground) !important;
}

/* Blaues Standard-Border/Background entfernen, das Klaro oft injiziert */
#klaro .cm-list-input:checked + .cm-list-label .slider {
    background-color: var(--primary) !important;
}

/* 4. FOOTER / POWERED BY - DEZENTER MACHEN */
#klaro .cm-powered-by a {
    color: var(--muted-foreground) !important;
    font-size: 0.75rem !important;
}

/* 1. ALLE LINKS IN KLARO (Modal & Notice) */
#klaro a {
    color: var(--primary) !important; /* Dein Simeoni Gold */
    text-decoration: underline !important;
    transition: color 0.2s ease !important;
}

#klaro a:hover {
    color: var(--foreground) !important; /* Beim Hover wird es zum Text-Ton */
    text-decoration: none !important;
}

/* 2. SPEZIAL-FIX FÜR DEN DATENSCHUTZ-LINK (falls er eine eigene Klasse hat) */
#klaro .cm-modal a,
#klaro .cm-footer a {
    color: var(--primary) !important;
}

/* 3. FALLS DAS BLAU VOM DRUPAL-THEME KONTAMINIERT IST: */
#klaro .cm-modal a:visited {
    color: var(--primary) !important;
}

/* ==========================================================================
   KLARO: NEUER "NEIN" BUTTON & FOCUS-FIX
   ========================================================================== */

/* 1. STYLING FÜR DEN NEUEN "NEIN" BUTTON (Wie der "Anpassen"-Button) */
#klaro .cm-btn.cm-btn-danger {
    background-color: var(--secondary) !important;
    color: var(--secondary-foreground) !important;
    border: 1px solid var(--border) !important;
    margin-left: 0.5rem !important; /* Etwas Abstand zu den anderen Buttons */
}

/* 2. FOCUS-RAHMEN ENTFERNEN (Überall im Klaro-Fenster) */
#klaro *:focus,
#klaro .cm-btn:focus,
#klaro .cm-list-input:focus + .cm-list-label {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--border) !important; /* Verhindert das "Aufblähen" des Rahmens */
}

/* 3. OPTIONAL: Wenn du trotzdem ein dezentes Signal beim Tabben willst, 
   anstatt des fetten Standard-Rahmens */
#klaro .cm-btn:focus {
    border: 1px solid var(--primary) !important; /* Nur ein dezenter Gold-Rahmen */
}