/* 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 */
  
  /* Typografie - Basis-Schriftgrößen */
  --font-size-desktop: 24px;                   /* Desktop html font-size */
  --font-size-mobile: 26px;                    /* Mobil html font-size */
  
  /* Layout - Logo Dimensionen */
  --logo-desktop-height: 50px;                 /* Desktop Logo-Höhe */
  --logo-mobile-height: 40px;                  /* Mobile Logo-Höhe */
}

/* === 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 */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Staatliches', sans-serif;
}

body, p, span, div {
  font-family: 'Inter', sans-serif;
}

nav, .navbar, .nav-link, .menu-item, #navbar a {
  font-family: 'Staatliches', sans-serif !important;
}

/* === TYPOGRAFIE-SKALIERUNG ===
   Quark-Basis: 20px Desktop, 16px Mobil (fluid-type).
   Alle rem-Werte skalieren über html font-size. */

/* Desktop-Schriftgröße */
html {
  font-size: var(--font-size-desktop) !important;
}

/* Mobile Schriftgröße */
@media (max-width: 840px) {
  html {
    font-size: var(--font-size-mobile) !important;
  }
}

/* Wortumbruch für lange deutsche Komposita auf kleinen Displays */
body {
  overflow-wrap: break-word;
  word-break: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* === NAVIGATION === */
/* Hauptmenü-Links */
.navbar-light .navbar-nav .nav-link {
  color: var(--nav-link-color) !important;
}

.navbar-light .navbar-nav .nav-link:hover {
  color: var(--nav-link-hover) !important;
}

/* === HAMBURGER MENÜ === */
/* Mobile Hamburger-Button */
.mobile-menu .button_container span {
  background: var(--nav-hamburger-color) !important;
}

.mobile-menu .button_container:hover span {
  background: var(--nav-link-hover) !important;
}

/* Aktiver Zustand (X-Symbol) */
.mobile-menu .button_container.active .top,
.mobile-menu .button_container.active .middle,
.mobile-menu .button_container.active .bottom {
  background: var(--nav-hamburger-active) !important;
}

/* === DROPDOWN & TREE MENÜ === */
/* 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;
}

.treemenu li a.active,
.treemenu li a:focus,
.treemenu li a:hover {
  color: var(--link-color) !important;
}

/* === MOBILE OVERLAY-MENÜ === */
/* Vollbild-Navigation auf Mobilgeräten */
.overlay-menu a,
.overlay-menu li a,
.overlay nav a,
.overlay nav li a,
.treemenu li a {
  color: var(--nav-link-color) !important;
}

/* Hover-Zustände im Overlay */
.overlay-menu a:hover,
.overlay-menu li a:hover,
.overlay nav a:hover,
.overlay nav li a:hover {
  color: var(--nav-link-hover) !important;
}

/* Tree-Menü Basisfarbe */
.treemenu li a {
  color: var(--nav-link-color) !important;
}

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

/* === GRUNDLEGENDE ELEMENTE === */
/* Standard-Links */
a {
  color: var(--link-color);
}

a:hover {
  color: var(--link-hover);
}

/* Primäre Buttons */
.btn-primary {
  background-color: var(--button-bg);
  border-color: var(--button-bg);
}

.btn-primary:hover {
  background-color: var(--button-bg-hover);
  border-color: var(--button-bg-hover);
}

/* === FOOTER === */
/* Anthrazit-Hintergrund statt Quark-Standard */
#footer.section.bg-gray {
  background-color: var(--footer-bg) !important;
}

/* Footer-Text weiß auf dunkel */
#footer.section.bg-gray p {
  color: var(--footer-text);
}

/* Footer-Links warmbraun */
#footer.section.bg-gray a {
  color: var(--footer-link);
}

#footer.section.bg-gray a:hover {
  color: var(--footer-link-hover);
}

/* === LOGO === */
/* Desktop-Logo */
.navbar-brand img {
  max-height: var(--logo-desktop-height);
  width: auto;
}

/* Mobile-Logo kleiner */
@media (max-width: 768px) {
  .navbar-brand img {
    max-height: var(--logo-mobile-height);
  }
}

/* Overlay-Logo vertikal an Header-Logo angleichen */
/* Header-Höhe = 4 × font-size-mobile (4rem), zentriert mit Logo-Höhe */
.overlay .mobile-logo img,
.overlay .mobile-logo svg {
  margin-top: calc((4 * var(--font-size-mobile) - var(--logo-mobile-height)) / 2);
  height: var(--logo-mobile-height);
}

/* === FORMULARE & INTERAKTION === */
/* Primäre Buttons – Styling, Zentrierung, Übergänge */
.btn.btn-primary {
  background-color: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
  color: var(--button-text) !important;
  font-family: 'Staatliches', sans-serif !important;
  padding: 0.6rem 1.5rem !important;
  border-radius: 6px !important;
  text-decoration: none !important;
  transition: all 0.3s ease !important;
  font-size: 1rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
}

/* Button-Hover – Lift-Effekt */
.btn.btn-primary:hover {
  background-color: var(--button-bg-hover) !important;
  border-color: var(--button-bg-hover) !important;
  color: var(--button-text) !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* Button-Focus & Active – Barrierefreiheit */
.btn.btn-primary:focus, 
.btn.btn-primary:active {
  background-color: var(--button-bg-hover) !important;
  border-color: var(--button-bg-hover) !important;
  box-shadow: 0 0 0 0.2rem var(--form-focus-shadow) !important;
}

/* Checkboxen – io-flow Farbschema */
input[type="checkbox"] {
  accent-color: var(--button-bg) !important;
  width: 18px !important;
  height: 18px !important;
  border: 2px solid var(--button-bg) !important;
  border-radius: 3px !important;
}

/* Checkbox aktiviert */
input[type="checkbox"]:checked {
  background-color: var(--button-bg) !important;
  border-color: var(--button-bg) !important;
}

/* Checkbox-Focus – Tastatur-Navigation */
input[type="checkbox"]:focus {
  outline: none !important;
  border-color: var(--button-bg-hover) !important;
  box-shadow: 0 0 0 2px var(--form-focus-shadow) !important;
}

/* Form-Labels */
.form-label {
  color: var(--form-label) !important;
  font-weight: 500 !important;
}

/* Form-Felder Focus-Ring */
.form-control:focus {
  border-color: var(--form-focus-border) !important;
  box-shadow: 0 0 0 0.2rem var(--form-focus-shadow) !important;
}

/* Hero: Keine Silbentrennung, responsive Schriftgröße */
.modular-hero {
  hyphens: none !important;
  -webkit-hyphens: none !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
}

.modular-hero h1 {
  font-size: clamp(1.6rem, 6vw, 4rem) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.modular-hero p,
.modular-hero em {
  font-size: clamp(0.9rem, 3.5vw, 1.5rem) !important;
}

/* Hero: Padding auf kleinen Screens reduzieren */
@media (max-width: 840px) {
  .modular-hero .hero {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
  .modular-hero .hero .hero-body {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }
}

/* Emoji-Listen: Standard-Bullet entfernen, Emoji als Marker nutzen */
.modular-text li,
.modular-form li {
  list-style: none;
}