/* io-flow Theme - Design System & Farbpalette */

:root {
  /* === PRIMÄRE FARBPALETTE === 
     Definiert alle Farben der Website für konsistente Gestaltung */
  
  /* Hauptfarben - Corporate Identity */
  --color-primary: #8A8955;        /* Olivgrün - Primäre Aktionsfarbe (Buttons, CallstoAction) */
  --color-primary-hover: #5A5F55;  /* Dunkelgrün - Hover-Zustand für Interaktionen */
  --color-accent: #C38C74;         /* Warmbraun - Akzentfarbe für Links und Highlights */
  --color-accent-hover: #A19580;   /* Graubraun - Gedämpfte Akzentfarbe für subtile Hover */
  
  /* Neutrale Farben - Grundlayout */
  --color-white: #ffffff;          /* Rein Weiß - Text auf dunklen Hintergründen, Cards, Overlays */
  --color-dark: #272929;           /* Anthrazit - Footer-Hintergrund, dunkle UI-Elemente */
  --color-text-primary: #5A5F55;  /* Dunkelgrün - Haupttext, Headlines für optimale Lesbarkeit */
  --color-text-secondary: #A19580; /* Graubraun - Sekundärtext, Metadaten, weniger wichtige Info */
  --color-text-muted: #9BA19F;    /* Graugrün - Placeholder, deaktivierte Elemente */
  
  /* Funktionale Farben - UI-Komponenten */
  --color-shadow: rgba(138, 137, 85, 0.25); /* Olivgrün transparent - Box-Schatten, Focus-States */
  --color-border: rgba(155, 161, 159, 0.2); /* Graugrün minimal - Subtile Linien und Abtrennungen */
  
  /* === KOMPONENTEN-SPEZIFISCHE VARIABLEN === */
  /* Navigation - Menü und Hamburger-Button */
  --nav-link-color: var(--color-white);         /* Weiße Menü-Links auf dunklem Hintergrund */
  --nav-link-hover: var(--color-accent);        /* Warmbraune Hover-Farbe für Menü-Links */
  --nav-hamburger-color: var(--color-primary-hover); /* Dunkle Hamburger-Linien */
  --nav-hamburger-active: var(--color-white);   /* Weiße Linien im aktiven/geöffneten Zustand */
  
  /* Buttons - Primäre Aktionselemente */
  --button-bg: var(--color-primary);           /* Olivgrüner Button-Hintergrund */
  --button-bg-hover: var(--color-primary-hover); /* Dunklerer Hover-Zustand */
  --button-text: var(--color-white);           /* Weißer Button-Text für Kontrast */
  
  /* Links - Textuelle Verknüpfungen */
  --link-color: var(--color-accent);           /* Warmbraune Standard-Links */
  --link-hover: var(--color-primary-hover);    /* Dunkler Hover für bessere UX */
  
  /* Footer - Seitenfuß */
  --footer-bg: var(--color-dark);              /* Anthrazit-Hintergrund */
  --footer-text: var(--color-white);           /* Weißer Text auf dunklem Grund */
  --footer-link: var(--color-accent);          /* Warmbraune Footer-Links */
  --footer-link-hover: var(--color-accent-hover); /* Gedämpfter Hover-Zustand */
  
  /* Formulare - Eingabefelder und Interaktion */
  --form-focus-border: var(--color-primary);   /* Olivgrüner Focus-Rahmen */
  --form-focus-shadow: var(--color-shadow);    /* Transparenter Box-Schatten */
  --form-label: var(--color-text-primary);     /* Dunkle Label-Farbe */
}

/* === TYPOGRAPHIE === */
/* Lädt benutzerdefinierte Schriftarten und definiert Schrift-Hierarchie */

/* Staatliches - Markante Überschriften-Schrift für Headlines und Navigation */
@font-face {
  font-family: 'Staatliches';
  src: url('../fonts/Staatliches-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* Inter - Leichte, moderne Schrift für Fließtext und optimale Lesbarkeit */
@font-face {
  font-family: 'Inter';
  src: url('../fonts/Inter_18pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Schrift-Zuweisungen - Hierarchische Typographie */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Staatliches', sans-serif; /* Staatliches für alle Headlines - markant und einprägsam */
}

body, p, span, div {
  font-family: 'Inter', sans-serif; /* Inter für Fließtext - hohe Lesbarkeit */
}

nav, .navbar, .nav-link, .menu-item, #navbar a {
  font-family: 'Staatliches', sans-serif !important; /* Staatliches für Navigation - konsistente Markenwirkung */
}

/* === NAVIGATION === */
/* Hauptnavigation - Menü-Links und Farbgestaltung */
.navbar-light .navbar-nav .nav-link {
  color: var(--nav-link-color) !important; /* Weiße Links für Kontrast gegen dunklen Header */
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--nav-link-hover) !important; /* Warmbraune Hover-Farbe für visuelle Rückmeldung */
}

/* === HAMBURGER MENÜ === */
/* Mobile Navigation - Hamburger-Button Styling für einheitliche Darstellung */
.mobile-menu .button_container span {
  background: var(--nav-hamburger-color) !important; /* Dunkle Hamburger-Linien für Sichtbarkeit */
}

.mobile-menu .button_container:hover span {
  background: var(--nav-link-hover) !important; /* Warmbraune Hover-Animation */
}

.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom {
  background: var(--nav-hamburger-active) !important; /* Weiße Linien im geöffneten Zustand (X-Symbol) */
}

/* === DROPDOWN & TREE MENÜ === */
/* Erweiterte Navigation - Untermenüs und hierarchische Navigation */
.dropmenu ul li a.active,
.dropmenu ul li a:focus,
.dropmenu ul li a:hover {
  color: var(--link-color) !important; /* Warmbraune Hervorhebung für aktive/gehover-te Dropdown-Einträge */
}

.treemenu li a.active,
.treemenu li a:focus,
.treemenu li a:hover {
  color: var(--link-color) !important; /* Konsistente Farbgebung für Baum-Navigation */
}

/* === MOBILE OVERLAY-MENÜ === */
/* Vollbild-Navigation auf mobilen Geräten - optimiert für Touch-Interaktion */

/* Normale Menü-Links - weiße Schrift auf dunklem Overlay für maximalen Kontrast */
.overlay-menu a,
.overlay-menu li a,
.overlay nav a,
.overlay nav li a,
.treemenu li a {
  color: var(--nav-link-color) !important; /* Weiße Links im Mobile-Overlay */
}

/* Hover-/Interaktionszustände - warmbraune Akzentfarbe für visuelles Feedback */
.overlay-menu a:hover,
.overlay-menu li a:hover,
.overlay nav a:hover,
.overlay nav li a:hover {
  color: var(--nav-link-hover) !important; /* Warmbraune Hover-Farbe für klare Rückmeldung */
}

/* Tree-Menu separate Behandlung für hierarchische Darstellung */
.treemenu li a {
  color: var(--nav-link-color) !important; /* Weiße Basis-Links */
}

.treemenu li a:hover,
.treemenu li a:focus,
.treemenu li a.active {
  color: var(--nav-link-hover) !important; /* Warmbraune Hervorhebung bei Interaktion */
}

/* === GRUNDLEGENDE ELEMENTE === */
/* Standard-Links und Buttons - Basis-Styling für konsistente UI */

/* Standard-Links - warmbraune Akzentfarbe für Textverweise */
a {
  color: var(--link-color); /* Warmbraune Standard-Link-Farbe */
}

a:hover {
  color: var(--link-hover); /* Dunkler Hover für bessere UX */
}

/* Primäre Buttons - Olivgrüne Aktionselemente */
.btn-primary {
  background-color: var(--button-bg); /* Olivgrüner Button-Hintergrund */
  border-color: var(--button-bg); /* Passende Rahmenfarbe */
}

.btn-primary:hover {
  background-color: var(--button-bg-hover); /* Dunklerer Hover-Zustand */
  border-color: var(--button-bg-hover); /* Konsistente Rahmenfarbe */
}

/* === FOOTER / SEITENFUSS === */
/* Dunkler Footer mit kontrastreichem Text für wichtige Navigation am Seitenende */

/* Footer-Hintergrund - Anthrazit für professionellen Abschluss */
#footer.section.bg-gray {
  background-color: var(--footer-bg) !important; /* Anthrazit statt standardgrün */
}

/* Footer-Text - weiße Schrift für optimale Lesbarkeit auf dunklem Grund */
#footer.section.bg-gray p {
  color: var(--footer-text); /* Weißer Text für Kontrast */
}

/* Footer-Links - warmbraune Akzentfarbe für Hervorhebung */
#footer.section.bg-gray a {
  color: var(--footer-link); /* Warmbraune Footer-Links */
}

#footer.section.bg-gray a:hover {
  color: var(--footer-link-hover); /* Gedämpftere Farbe beim Hover */
}

/* === LOGO / MARKENZEICHEN === */
/* Logo-Größen-Optimierung für verschiedene Bildschirmgrößen */

/* Desktop-Logo - optimal sichtbar ohne Überladung des Headers */
.navbar-brand img {
  max-height: 50px; /* Begrenzt Logo-Höhe für Header-Harmonie */
  width: auto; /* Proportionen beibehalten */
}

/* Mobile-Logo - kompakter für kleinere Screens */
@media (max-width: 768px) {
  .navbar-brand img {
    max-height: 40px; /* Kleineres Logo für mobile Geräte */
  }
}

/* === FORMULARE & INTERAKTION === */
/* Formular-Elemente im io-flow Design mit optimierter Benutzerfreundlichkeit */

/* Primäre Buttons - perfekte Textzentrierung und Hover-Effekte */
.btn.btn-primary {
  background-color: var(--button-bg) !important; /* Olivgrüner Hintergrund */
  border-color: var(--button-bg) !important; /* Passender Rahmen */
  color: var(--button-text) !important; /* Weißer Text für Kontrast */
  font-family: 'Staatliches', sans-serif !important; /* Markenschrift für Wiedererkennung */
  padding: 0.6rem 1.5rem !important; /* Optimale Klickfläche */
  border-radius: 6px !important; /* Sanfte Rundungen */
  text-decoration: none !important; /* Kein Unterstrich */
  transition: all 0.3s ease !important; /* Sanfte Übergänge für alle Eigenschaften */
  font-size: 1rem !important; /* Lesbare Schriftgröße */
  display: inline-flex !important; /* Flexbox für perfekte Zentrierung */
  align-items: center !important; /* Vertikale Zentrierung des Textes */
  justify-content: center !important; /* Horizontale Zentrierung */
  line-height: 1 !important; /* Verhindert Textverschiebung */
}

/* Button-Hover-Effekte - visuelles Feedback für bessere UX */
.btn.btn-primary:hover {
  background-color: var(--button-bg-hover) !important; /* Dunklerer Hover-Zustand */
  border-color: var(--button-bg-hover) !important; /* Konsistenter Rahmen */
  color: var(--button-text) !important; /* Text bleibt weiß */
  text-decoration: none !important; /* Kein Unterstrich im Hover */
  transform: translateY(-1px) !important; /* Subtiler Lift-Effekt */
}

/* Button-Focus & Active - Zugänglichkeit und Interaktions-Feedback */
.btn.btn-primary:focus, 
.btn.btn-primary:active {
  background-color: var(--button-bg-hover) !important; /* Aktiver Zustand */
  border-color: var(--button-bg-hover) !important; /* Konsistenter Rahmen */
  box-shadow: 0 0 0 0.2rem var(--form-focus-shadow) !important; /* Focus-Ring für Barrierefreiheit */
}

/* Checkbox-Styling - einheitliche Darstellung in io-flow Farbschema */
input[type="checkbox"] {
  accent-color: var(--button-bg) !important; /* Olivgrüne Checkbox-Farbe */
  width: 18px !important; /* Optimale Klick-/Touch-Größe */
  height: 18px !important; /* Quadratisches Format */
  border: 2px solid var(--button-bg) !important; /* Olivgrüner Rahmen */
  border-radius: 3px !important; /* Leicht abgerundete Ecken */
}

/* Checkbox aktiviert - visuelles Feedback für ausgewählte Optionen */
input[type="checkbox"]:checked {
  background-color: var(--button-bg) !important; /* Gefüllter olivgrüner Hintergrund */
  border-color: var(--button-bg) !important; /* Konsistenter Rahmen */
}

/* Checkbox-Focus - Barrierefreiheit und Tastatur-Navigation */
input[type="checkbox"]:focus {
  outline: none !important; /* Standard-Outline entfernen */
  border-color: var(--button-bg-hover) !important; /* Dunklerer Focus-Rahmen */
  box-shadow: 0 0 0 2px var(--form-focus-shadow) !important; /* Sanfter Focus-Ring */
}

/* Form-Labels - typographische Hierarchie für bessere Lesbarkeit */
.form-label {
  color: var(--form-label) !important; /* Dunkle Label-Farbe für Kontrast */
  font-weight: 500 !important; /* Mittlere Schriftstärke für Hervorhebung */
}

/* Form-Controls Focus - visuelles Feedback bei Eingabe-Interaktion */
.form-control:focus {
  border-color: var(--form-focus-border) !important; /* Olivgrüner Focus-Rahmen */
  box-shadow: 0 0 0 0.2rem var(--form-focus-shadow) !important; /* Sanfter Schlagschatten für Focus */
}