/* =========================================================
   1. SCHRIFTARTEN LOKAL LADEN (DSGVO-KONFORM)
   ========================================================= */

/* --- INTER (Fließtext) --- */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400; /* Regular */
  src: url('../fonts/inter-v20-latin-regular.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 400; /* Italic */
  src: url('../fonts/inter-v20-latin-italic.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700; /* Bold */
  src: url('../fonts/inter-v20-latin-700.woff2') format('woff2');
  font-display: swap;
}

/* --- WORK SANS (Überschriften) --- */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 200; /* Extra Light */
  src: url('../fonts/work-sans-v24-latin-200.woff2') format('woff2');
  font-display: swap;
}

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 800; /* Extra Bold */
  src: url('../fonts/work-sans-v24-latin-800.woff2') format('woff2');
  font-display: swap;
}

/* =========================================================
   2. VARIABLEN & FARBEN (LiSSi DIGITAL CD - KOMPLETT)
   ========================================================= */

:root, body {
  /* Die 4 LiSSi Farbpaare */
  --lissi-rot: #FF0000; 
  --lissi-dunkelrot: #6F003C;
  
  --lissi-dunkelgruen: #004B5B;
  --lissi-tuerkis: #00B19C;
  
  --lissi-violett: #8100A1;
  --lissi-rosa: #D675D8;
  
  --lissi-blau: #2E4FC4;
  --lissi-hellblau: #D4D4FF;

  /* Typografische Basis- und Hintergrundfarben */
  --lissi-text-dunkel: #212121; /* Sehr dunkles Grau für Fließtext, besser lesbar als reines Schwarz */
  --lissi-bg-hell: #f8f8f8;     /* Leichtes Grau für Kacheln und Sektionen */
  
  /* 1. Cassiopeia Standard-Variablen überschreiben */
  --cassiopeia-font-family-body: 'Inter', sans-serif !important;
  --cassiopeia-font-family-headings: 'Work Sans', sans-serif !important;
  
  /* Hauptfarbe (Rot) und Hover-Farbe (Dunkelrot) */
  --cassiopeia-color-primary: var(--lissi-rot) !important;
  --cassiopeia-color-hover: var(--lissi-dunkelrot) !important;
  --cassiopeia-color-link: var(--lissi-rot) !important;
  
  /* Inline-Styles von Cassiopeia einfangen */
  --template-special-color: var(--lissi-dunkelgruen) !important; 
  --template-link-color: var(--lissi-rot) !important;
  --template-bg-light: var(--lissi-bg-hell) !important;
  --template-text-dark: var(--lissi-text-dunkel) !important;

  /* 2. Bootstrap-Mapping (Wichtig für Joomla-Core-Elemente) */
  --bs-primary: var(--lissi-rot);
  --bs-secondary: var(--lissi-dunkelgruen); 
  --bs-info: var(--lissi-tuerkis);
  --bs-body-color: var(--lissi-text-dunkel);
  --bs-body-bg: #ffffff;
  --bs-link-color: var(--lissi-rot);
  --bs-link-hover-color: var(--lissi-dunkelrot);
}

/* =========================================================
   3. TYPOGRAFIE, ÜBERSCHRIFTEN & LINKS
   ========================================================= */

/* Fließtext auf Inter setzen */
body, p, li, span {
  font-family: 'Inter', sans-serif !important;
  color: var(--lissi-text-dunkel);
}

/* Standard-Links im Fließtext (Rot, Hover Dunkelrot, ohne Unterstrich bis Hover) */
a {
  font-family: 'Inter', sans-serif;
  color: var(--lissi-rot) !important;
  text-decoration: none;
}
a:hover {
  color: var(--lissi-dunkelrot) !important;
  text-decoration: underline;
}

/* ---------------------------------------------------------
   ÜBERSCHRIFTEN (In DUNKELGRÜN) UND DARIN ENTHALTENE LINKS
   --------------------------------------------------------- */

/* Alle Überschriften auf Work Sans setzen und Dunkelgrün einfärben */
h1, h2, h3, h4, h5, h6, 
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important; 
  color: var(--lissi-dunkelgruen) !important;
  line-height: 1.1;
  letter-spacing: -0.01em; /* Work Sans wirkt massiv besser, wenn sie ganz leicht enger läuft */
}

/* Links innerhalb von Überschriften zähmen */
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a,
.h1 a, .h2 a, .h3 a, .h4 a, .h5 a, .h6 a {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  color: var(--lissi-dunkelgruen) !important; /* Bleiben Dunkelgrün, heben sich nicht rot ab */
  text-decoration: none !important; /* Keine Unterstreichung */
}

/* Hover-Effekt für Links in Überschriften (werden beim Drüberfahren typisch rot) */
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover,
.h1 a:hover, .h2 a:hover, .h3 a:hover, .h4 a:hover, .h5 a:hover, .h6 a:hover {
  color: var(--lissi-rot) !important; 
  text-decoration: none !important; 
}

/* =========================================================
   4. HILFSKLASSEN FÜR MODULE & KACHELN (Optional für später)
   ========================================================= */

/* Beispiel für eine auffällige Info-Box in Violett */
.box-violett {
  background-color: var(--lissi-violett);
  color: #ffffff;
  padding: 2rem;
}
.box-violett h2, .box-violett h3, 
.box-violett p, .box-violett span {
  color: #ffffff !important; 
}

/* Modulkachel im hellen CD-Grau */
.box-grau {
  background-color: var(--lissi-bg-hell);
  padding: 2rem;
  border-left: 6px solid var(--lissi-rot); /* Typischer roter Balken am Rand */
}

/* =========================================================
   5. SYSTEM-ICONS WIEDERHERSTELLEN (FONT AWESOME FIX)
   ========================================================= */

/* Schützt die Joomla-Icons davor, von der Inter überschrieben zu werden */
span[class^="icon-"], span[class*=" icon-"],
i[class^="icon-"], i[class*=" icon-"],
.fas, .far, .fab, .fa {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free" !important;
/*  font-weight: 200 !important;*/
  color: #bebebf;
}

/* =========================================================
   6. HAUPTMENÜ, DROPDOWNS & BURGER-MENÜ (LiSSi Style)
   ========================================================= */

/* --- 1. HAUPTMENÜ (Desktop) --- */
.container-header .mod-menu {
  gap: 1.5rem; /* Etwas mehr Luft zwischen den Menüpunkten */
}

/* Die Haupt-Links (z.B. Themen, Mitmachen, Partei) */
.container-header .mod-menu > li > a {
  font-family: 'Work Sans', sans-serif !important;
  font-weight: 800 !important;
  font-size: 1.3rem; 
  color: var(--lissi-dunkelgruen) !important;
  padding: 0.5rem 0;
  text-transform: none;
}

/* Hover-Effekt im Hauptmenü (wird Rot beim Drüberfahren) */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li.active > a {
  color: var(--lissi-rot) !important;
  text-decoration: none !important;
}

/* --- 2. DAS DROPDOWN-MENÜ (Die weiße Box) --- */
.container-header .mod-menu .mm-collapse {
  background-color: #ffffff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.1); /* Sanfter Schatten für Tiefe */
  border: none;
  border-radius: 0; /* Eckig, passend zum Corporate Design */
  padding: 1rem 0;
  min-width: 220px;
  z-index: 1000;
}

/* Die Links im Dropdown (Unterpunkte) */
.container-header .mod-menu .mm-collapse li a {
  font-family: 'Inter', sans-serif !important;
  font-weight: 400 !important;
  font-size: 1rem;
  color: var(--lissi-text-dunkel) !important;
  padding: 0.5rem 1.5rem;
}

/* Hover-Effekt im Dropdown */
.container-header .mod-menu .mm-collapse li a:hover {
  color: var(--lissi-rot) !important;
  background-color: transparent !important;
  text-decoration: none !important;
}

/* --- 3. MOUSEOVER-EFFEKT ERZWINGEN (Desktop) --- */
/* Öffnet das Dropdown beim Darüberfahren, nicht erst beim Klicken */
@media (min-width: 992px) {
  .container-header .mod-menu > li.parent:hover > ul.mm-collapse {
    display: block !important;
    height: auto !important;
  }
}

/* --- 4. BURGER-MENÜ (Smartphone) --- */
/* Den Button auf das LiSSi-Design anpassen */
.container-header .navbar-toggler {
  border: 2px solid var(--lissi-dunkelgruen);
  border-radius: 0; /* Eckiger Button */
  color: var(--lissi-dunkelgruen);
  padding: 0.5rem 0.75rem;
}

/* Die 3 Striche im Burger-Menü in Dunkelgrün einfärben */
.container-header .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 75, 91, 1)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* =========================================================
   7. HEADER-KORREKTUREN (Logo, Pfeile & Hover-Farben)
   ========================================================= */

/* --- 1. LOGO SKALIEREN (FIREFOX FIX) --- */
/* Feste Breite vergeben, damit Firefox das SVG berechnen kann */
.navbar-brand .brand-logo img {
  width: 260px !important; 
  max-width: 100% !important; /* Verhindert, dass es auf dem Smartphone aus dem Bildschirm ragt */
  height: auto !important;
}

/* --- 2. OLD-SCHOOL DREIECKE (CARET) ENTFERNEN --- */
/* Versteckt die generierten Pfeile hinter den Menüpunkten */
.container-header .mod-menu .mm-toggler::after {
  display: none !important;
  content: none !important;
}

/* --- 3. FARBEN DER 1. EBENE (FÜR ROTEN HEADER) --- */
/* Normalzustand: Weiß, damit es auf dem roten Hintergrund strahlt.
   Wir sprechen hier "a" (Links) UND "button.nav-header" (z.B. Infos, Gruppen) an! */
.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button.nav-header {
  color: #ffffff !important;
}

/* Hover- und Aktiv-Zustand: Kontrastfarbe (z.B. LiSSi-Dunkelgrün) mit Unterstrich */
.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus,
.container-header .mod-menu > li.active > a,
.container-header .mod-menu > li:hover > button.nav-header,
.container-header .mod-menu > li > button.nav-header:hover {
  color: var(--lissi-dunkelgruen) !important;
  text-decoration: underline !important;
  text-underline-offset: 6px; /* Verschiebt den Unterstrich etwas nach unten (wirkt edler) */
}