/**
 * =====================================================================
 * GLOBAL.CSS - Zentrale Stylesheet-Datei für die gesamte Website
 * =====================================================================
 * 
 * Diese Datei enthält alle CSS-Definitionen für die Website in 
 * logisch strukturierten Abschnitten. Ursprünglich waren diese
 * Styles auf mehrere separate CSS-Dateien verteilt, wurden aber
 * zur besseren Wartbarkeit und Performance in eine zentrale
 * Datei konsolidiert.
 * 
 * Aufbau der Datei:
 * 1. CSS-Variablen und Farbdefinitionen
 * 2. Schriftarten-Definitionen und Typografie
 * 3. Grundlegende Layout- und Seitenstruktur
 * 4. Button-Designs und Interaktive Elemente
 * 5. Footer-Bereich Gestaltung
 * 6. Header und Navigations-Styles
 * 7. Animationen und Übergänge
 * 8. Responsive Design für verschiedene Bildschirmgrößen
 */

/* ===================================================================== */
/* 1. CSS-VARIABLEN UND FARBPALETTE                                     */
/* ===================================================================== */

/**
 * Definition aller verwendeten Farben als CSS Custom Properties.
 * Diese zentralisierte Farbverwaltung ermöglicht einfache Theme-Änderungen
 * und gewährleistet Konsistenz über die gesamte Website.
 */
:root {
  /* Haupt-Farbpalette der Website */
  --blue: #002fff;                    /* Primärfarbe: Kräftiges Blau für Buttons und Akzente */
  --blue-hover: #001fd9;              /* Hover-Zustand der Primärfarbe */
  --blue-alpha: #002fffcc;            /* Halbtransparente Version der Primärfarbe */
  --red: #dc3545;                     /* Fehler- und Warnfarbe */
  --red-hover: #c82333;               /* Hover-Zustand der Fehlerfarbe */
  --green: #08a83d;                   /* Erfolgs- und Bestätigungsfarbe */
  --orange: #ffc107;                  /* Warnhinweise und Aufmerksamkeit */
  --black: #22262a;                   /* Hauptfarbe für Text und dunkle Elemente */
  --overlay-dark: rgba(34, 38, 42, 0.5); /* Halbtransparente Overlay-Farbe */
  --light-gray: #6c757d;              /* Sekundärtext und dezente Elemente */
  --light-gray-grad-primary: #99a7b3; /* Gradient-Startfarbe für Hintergründe */
  --light-gray-grad-secondary: #cbd2d8; /* Gradient-Endfarbe für Hintergründe */
  --white: #fbfbfb;                   /* Hintergrundfarbe und weiße Texte */
  --transparent: #ffffff00;           /* Vollständig transparente Farbe */

  /* Zusätzliche Grautöne für spezielle Anwendungen */
  --light-gray-second: #cbd2d8;

  /* Vordefinierte Farbverläufe für verschiedene Bereiche */
  --gradient-light-gray: linear-gradient(135deg, var(--light-gray-grad-primary) 0%, var(--light-gray-grad-secondary) 100%);
  --gradient-header: linear-gradient(180deg, rgba(34, 38, 42, 0.5), rgba(34, 38, 42, 0.3));
  --gradient-header-mobile: linear-gradient(180deg, rgba(34, 38, 42, 0.7), rgba(34, 38, 42, 0.5));
  --gradient-leistungen: linear-gradient(180deg, rgba(34, 38, 42, 0.2), rgba(34, 38, 42, 0.1));
  --gradient-blue: linear-gradient(90deg, var(--blue), var(--blue-alpha));
  --gradient-blue-hover: linear-gradient(90deg, var(--blue-hover), rgba(0, 31, 217, 0.8));
  --gradient-blue-selected: linear-gradient(135deg, var(--blue), var(--blue-alpha));

  /* Footer-spezifische Farben und Effekte */
  --footer-border-top: 1px solid var(--light-gray);
  --footer-shadow: 0 -4px 8px rgba(34, 38, 42, 0.1);

  /* Schatten-Definitionen für verschiedene Elemente */
  --shadow: rgba(34, 38, 42, 0.1);
  --box-shadow-header: 0 2px 10px var(--shadow);

  /* Hintergrundfarben für verschiedene Seitenbereiche */
  --bg-light: var(--white);
  --bg-transparent: var(--transparent);

  /* Textfarben für bessere Semantik */
  --text-white: var(--white);
  --text-gray: var(--light-gray);
}

/**
 * Grundlegende HTML-Body-Konfiguration
 * Definiert die Basis-Schriftfamilie, Farben und Layout-Eigenschaften
 * für den gesamten Dokumentkörper. Verwendet die Lato-Schrift als
 * Hauptschriftart mit System-Fallbacks.
 */
body {
  color: var(--black);
  background-color: var(--transparent);
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
}

/**
 * Bootstrap-Icons Grundkonfiguration
 * Alle Bootstrap-Icons erhalten standardmäßig die Primärfarbe (Blau)
 * zur Wahrung des einheitlichen Erscheinungsbilds.
 */
.bi {
  color: var(--blue);
}

/**
 * Website-Header Gestaltung
 * Der Header ist sticky positioniert und bleibt beim Scrollen sichtbar.
 * Verwendet einen halbtransparenten Hintergrund mit Unschärfe-Effekt
 * für einen modernen Glasmorphismus-Look.
 */
header {
  background: var(--gradient-header);
  box-shadow: 0 2px 10px var(--shadow);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1030;
  padding: 1.5rem 0;
  min-height: auto;
  height: 15vh;
  transition: all 0.3s ease;
}

/**
 * Bootstrap Navbar-Komponente Anpassungen
 * Entfernt Standard-Bootstrap-Schatten und passt Höhe
 * und Ausrichtung an das Design an.
 */
.navbar {
  background: var(--transparent);
  color: var(--black);
  box-shadow: none;
  height: 100%;
  align-items: center;
}

/**
 * Navigations-Links Styling
 * Verwendet die Poppins-Schrift für die Navigation mit
 * sanften Hover-Animationen und Skalierungseffekten.
 */
.nav-link {
  color: var(--black) !important;
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  font-size: 1.2rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  position: relative;
}

.nav-link:hover {
  color: var(--white) !important;
  text-decoration: none;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.nav-link.active {
  color: var(--black) !important;
  font-weight: bold;
  transform: scale(1.1);
  transition: all 0.3s ease;
}

.nav-link:focus {
  color: var(--light-gray);
  transform: scale(1.1);
  transition: all 0.3s ease;
}

/**
 * Mobile Hamburger-Menü Styling
 * Anpassung der Bootstrap Navbar-Toggler Komponente
 */
.navbar-light .navbar-toggler {
  border-color: var(--black);
}

/**
 * Footer-Bereich Gestaltung
 * Der Footer verwendet einen grauen Farbverlauf als Hintergrund
 * und hebt sich durch eine obere Rahmenlinie und Schatten ab.
 */
.footer-section {
  background: var(--gradient-light-gray);
  border-top: 1px solid var(--light-gray);
  box-shadow: 0 -4px 8px var(--shadow);
  margin-top: auto;
  margin-bottom: 0;
}

/**
 * Footer-Überschriften mit blauen Unterstreichungen
 * Alle h5-Elemente im Footer erhalten eine charakteristische
 * blaue Unterstreichung als visuelles Gestaltungselement.
 */
footer * h5 {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--blue);
  text-underline-offset: 4px;
}

/**
 * Sekundäre Links im Footer-Bereich
 * Standardisierung der Link-Farben für bessere Konsistenz
 */
.link-secondary {
  color: var(--black) !important;
}

/**
 * Footer-Titel Styling
 * Verwendet die Poppins-Schrift für alle Überschriften
 * im Footer-Bereich mit spezifischer Gewichtung und Größe.
 */
.footer-title {
  color: var(--black);
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  transition: color 0.2s;
}

/**
 * Footer Navigations-Links
 * Basis-Styling für alle Navigationslinks im Footer
 * mit dezentem Erscheinungsbild und entfernten Standarddekorationen.
 */
.footer-links a {
  color: var(--black);
  font-size: 0.95rem;
  font-weight: 400;
  text-decoration: none;
  transition: none;
  display: inline-block;
  padding: 0.25rem 0;
  position: relative;
  width: fit-content;
  border-bottom: none;
}

/**
 * Hover-Effekt für Footer-Links
 * Erstellt eine blaue Unterstreichung beim Überfahren mit der Maus
 */
.footer-links a:hover::after {
  background: var(--blue);
}

/**
 * Footer Kontakt-Informationen
 * Styling für Kontaktdaten und Unternehmensinformationen
 * mit optimierter Zeilenhöhe für bessere Lesbarkeit.
 */
.footer-contact {
  color: var(--black) !important;
  font-size: 0.95rem;
  line-height: 1.5;
}

/**
 * Footer Kontakt-Links
 * Spezielle Behandlung von anklickbaren Elementen
 * in den Kontaktinformationen.
 */
.footer-contact a {
  color: var(--black) !important;
  position: relative;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
  width: fit-content;
}

.footer-contact a:hover::after {
  background: var(--blue);
}

/**
 * Footer Trennlinie
 * Horizontale Linie zur visuellen Trennung von Footer-Bereichen
 */
.footer-divider {
  border-color: var(--light-gray);
  margin: 0;
}

/**
 * Footer Copyright-Text
 * Styling für Copyright-Hinweise und rechtliche Informationen
 */
.footer-copyright {
  color: var(--black);
  font-size: 0.875rem;
  font-weight: 400;
  margin: 0;
}

/**
 * Formular-Container Gestaltung
 * Hauptcontainer für alle Formulare mit Hintergrund-Gradient
 * und standardisierter Textfarbe.
 */
.form-container {
  background: var(--gradient-primary);
  color: var(--black);
}

/**
 * Innerer Formular-Container
 * Weißer Hintergrund mit Schatten für die eigentlichen
 * Formularinhalte, um diese vom Hintergrund abzuheben.
 */
.form-container .container {
  background: var(--white);
  box-shadow: 0 20px 40px var(--shadow);
  border: 1px solid var(--light-gray);
}

/**
 * Formular-Beschriftungen
 * Styling für alle Formularfeld-Labels mit der Poppins-Schrift
 * und erhöhter Schriftgewichtung für bessere Lesbarkeit.
 */
.form-label {
  color: var(--black);
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
}

/**
 * Formular-Eingabefelder und Dropdown-Menüs
 * Einheitliches Styling für alle Eingabeelemente mit
 * grauen Rahmen und weißem Hintergrund.
 */
.form-control, .form-select {
  border: 2px solid var(--light-gray);
  background: var(--white);
  color: var(--black);
  font-size: 1rem;
}

/**
 * Platzhalter-Text in Eingabefeldern
 * Dezente graue Farbe für Platzhalter-Texte
 */
.form-control::placeholder {
  color: var(--light-gray);
}

/**
 * Fokus-Zustand für Formularelemente
 * Blauer Rahmen und Schein-Effekt beim Fokussieren
 * eines Eingabefeldes für bessere Benutzererfahrung.
 */
.form-control:focus, .form-select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 0.2rem var(--blue-hover);
  background: var(--white);
}

/**
 * Checkbox-Styling
 * Verwendet die Primärfarbe für Checkboxen
 */
.form-check-input {
  background-color: var(--blue);
  border-color: var(--blue);
}

/**
 * Checkbox-Beschriftungen
 * Styling für Labels neben Checkboxen
 */
.form-check-label {
  color: var(--black);
  font-weight: 500;
}

/**
 * Formular-Validierung: Fehlerhafte Eingaben
 * Rote Rahmen und Schatten für ungültige Formularfelder
 * zur sofortigen visuellen Rückmeldung an den Benutzer.
 */
.form-control.is-invalid,
.form-select.is-invalid {
  border-color: var(--red);
  box-shadow: 0 0 0 0.2rem var(--overlay-dark);
}

/**
 * Formular-Validierung: Korrekte Eingaben
 * Grüne Rahmen und Schatten für gültige Formularfelder
 */
.form-control.is-valid,
.form-select.is-valid {
  border-color: var(--green);
  box-shadow: 0 0 0 0.2rem var(--overlay-dark);
}

/**
 * Fehlermeldungen bei der Validierung
 * Rote Textfarbe für Validierungsfehlermeldungen
 * mit kleinerer Schriftgröße für dezente Darstellung.
 */
.invalid-feedback {
  color: var(--red);
  font-size: 0.875rem;
}

/**
 * Erfolgs-Benachrichtigungen
 * Grüne Hinweisboxen für erfolgreiche Aktionen
 * mit halbtransparentem Hintergrund.
 */
.alert-success {
  background: var(--overlay-dark);
  color: var(--green);
  border: 2px solid var(--green);
}

/**
 * Fehler-Benachrichtigungen
 * Rote Hinweisboxen für Fehlermeldungen und Probleme
 */
.alert-danger {
  background: var(--overlay-dark);
  color: var(--red);
  border: 2px solid var(--red);
}

/**
 * Informations-Benachrichtigungen
 * Blaue Hinweisboxen für allgemeine Informationen
 */
.alert-info {
  background: rgba(0, 47, 255, 0.1);
  color: var(--blue);
  border: 2px solid var(--blue);
}

/**
 * Warn-Benachrichtigungen
 * Orange Hinweisboxen für Warnungen und Aufmerksamkeiten
 */
.alert-warning {
  background-color: var(--overlay-dark);
  border: 2px solid var(--orange);
  color: var(--black);
}

/**
 * Fortschrittsbalken-Gestaltung
 * Styling für Fortschrittsanzeigen in mehrstufigen Formularen.
 * Verschiedene Browser-spezifische Implementierungen für
 * einheitliches Erscheinungsbild.
 */
.progress {
  background-color: var(--light-gray);
}

.progress::-webkit-progress-bar {
  background-color: var(--light-gray);
}

.progress::-webkit-progress-value {
  background: var(--gradient-blue);
}

.progress::-moz-progress-bar {
  background: var(--gradient-blue);
}

.progress-bar-visual {
  background: var(--gradient-blue);
}

/**
 * Schritt-Indikatoren für mehrstufige Prozesse
 * Visuelle Kennzeichnung des aktuellen Fortschritts
 * in mehrseitigen Formularen oder Prozessen.
 */
.step {
  color: var(--light-gray);
}

.step.active,
.step.completed {
  color: var(--blue);
}

/**
 * Service-Karten Auswahlzustand
 * Spezielle Gestaltung für ausgewählte Service-Karten
 * mit blauem Rahmen und Hintergrund-Gradient.
 */
.service-card.selected .card {
  border-color: var(--blue);
  background: var(--gradient-blue-selected);
  color: var(--white);
}

.service-card.selected .card-title {
  color: var(--white);
}

/**
 * Hero-Bereich auf der Startseite
 * Gestaltung des Hauptbereichs mit weißer Textfarbe
 * und halbtransparentem Overlay für bessere Lesbarkeit.
 */
.hero-section {
  color: var(--white);
}

.hero-section .hero-overlay {
  background: var(--overlay-dark);
}

/**
 * Hauptinhaltsbereiche der Website
 * Weiße Hintergründe für Content-Bereiche mit
 * transparenten Kindelementen.
 */
.section {
  background-color: var(--white);
}

.section * {
  background-color: var(--transparent);
}

/**
 * Leistungsseite: Spezielle Panel-Gestaltung
 * Unterschiedliche Hintergründe für linke und rechte Panels
 * zur visuellen Trennung der Inhalte.
 */
.left {
  background-color: var(--black);
}

.right {
  background-color: var(--blue);
}

.panel-overlay {
  background: var(--gradient-leistungen);
  color: var(--white);
  box-shadow: 0 2px 10px var(--shadow);
}

/**
 * Utility-Klassen für Textfarben und Hintergründe
 * Sammlung von Hilfsklassen für schnelle Farbzuweisungen
 * ohne das Schreiben von benutzerdefinierten CSS-Regeln.
 */

/* Spezielle Primärfarben-Klasse (umbenannt für bessere Semantik) */
.black { color: var(--blue) !important; }

/* Standard-Textfarben */
.text-secondary { color: var(--light-gray) !important; }
.text-success { color: var(--green) !important; }
.text-danger { color: var(--red) !important; }
.text-warning { color: var(--black) !important; }
.text-info { color: var(--blue) !important; }
.text-white { color: var(--white) !important; }
.text-black { color: var(--black) !important; }
.text-light-gray { color: var(--light-gray) !important; }

/* Hintergrundfarben-Utility-Klassen */
.bg-primary { background-color: var(--blue) !important; }
.bg-secondary { background-color: var(--light-gray) !important; }
.bg-success { background-color: var(--green) !important; }
.bg-danger { background-color: var(--red) !important; }
.bg-warning { background-color: var(--orange) !important; }
.bg-info { background-color: var(--blue) !important; }
.bg-white { background-color: var(--white) !important; }
.bg-dark { background-color: var(--black) !important; }
.bg-transparent { background-color: var(--transparent) !important; }

/**
 * Barrierefreiheit: Fokus-Ring
 * Verbesserter Fokus-Indikator für bessere Zugänglichkeit
 */
.focus-ring:focus {
  outline: 2px solid var(--blue);
}

/**
 * Standard-Link-Farben
 * Globale Link-Gestaltung mit Hover-Effekten
 */
a {
  color: var(--blue);
}

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

/**
 * Rahmenfarben-Utility-Klassen
 * Schnelle Zuweisung von Rahmenfarben für verschiedene Elemente
 */
.light-gray { border-color: var(--light-gray) !important; }
.border-success { border-color: var(--green) !important; }
.border-danger { border-color: var(--red) !important; }
.border-warning { border-color: var(--orange) !important; }
.border-info { border-color: var(--blue) !important; }
.border-dark { border-color: var(--black) !important; }
.border-white { border-color: var(--white) !important; }

/**
 * Spezielle Button-Icon-Farben
 * Überschreibt die Standard-Icon-Farbe für spezielle Button-Typen
 */
.btn-outline-danger .bi {
  color: var(--red) !important;
}

/**
 * =====================================================================
 * RESPONSIVE DESIGN: MOBILE UND TABLET ANPASSUNGEN
 * =====================================================================
 * 
 * Mobile-First Ansatz mit spezifischen Anpassungen für kleinere
 * Bildschirme. Optimiert Navigation, Header und Footer für
 * Touch-Bedienung und begrenzte Bildschirmgrößen.
 */

/**
 * Mobile Navigation (bis 991.98px)
 * Spezielle Anpassungen für Tablets und Smartphones
 * mit verbesserter Touch-Navigation und veränderten Farbschemata.
 */
@media (max-width: 991.98px) {
  .navbar-collapse {
    background: var(--transparent) !important;
  }

  .navbar-nav {
    background: var(--gradient-header);
    width: 100%;
  }
  
  /* Mobile Header mit stärkerem Gradient für bessere Lesbarkeit */
  header {
    background: var(--gradient-header-mobile);
    color: var(--white);
  }
  
  .navbar {
    background: var(--transparent);
    color: var(--white);
  }
  
  /* Weiße Navigationslinks für Mobile */
  .nav-link {
    color: var(--white) !important;
  }
  
  .nav-link:hover {
    color: var(--white) !important;
    background-color: rgba(251, 251, 251, 0.1);
  }
  
  .nav-link.active {
    color: var(--light-gray-second) !important;
    font-weight: bold;
  }

  .nav-link:focus {
    color: var(--white);
    background-color: rgba(251, 251, 251, 0.05);
  }
  
  /* Weißes Hamburger-Menü Icon für Mobile */
  .navbar-light .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(251,251,251,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
}

/**
 * Desktop Navigation (ab 992px)
 * Spezielle Anpassungen für größere Bildschirme
 * mit erweiterten Hover-Effekten und Animationen.
 */
@media (min-width: 992px) {
  .nav-link {
    color: var(--white) !important;
  }
  
  .nav-link:hover {
    color: var(--white);
  }
}

/* ===================================================================== */
/* 2. SCHRIFTARTEN UND TYPOGRAFIE                                       */
/* ===================================================================== */

/**
 * Font-Face Deklarationen
 * ========================
 * Definition aller verwendeten Schriftarten mit lokalen Dateien
 * für bessere Performance und Offline-Verfügbarkeit.
 * Alle Schriften verwenden font-display: swap für optimierte Ladezeiten.
 */

/**
 * Lato Schriftfamilie
 * Hauptschriftart für Fließtext und Body-Inhalte
 * Verfügbare Gewichtungen: 300 (Light), 400 (Regular), 700 (Bold)
 * Verfügbare Stile: Normal und Italic
 */
@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Lato';
  src: url('../fonts/Lato/Lato-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/**
 * Poppins Schriftfamilie
 * Verwendet für Überschriften, Navigation und wichtige UI-Elemente
 * Verfügbare Gewichtungen: 300 (Light), 400 (Regular), 500 (Medium), 
 * 600 (SemiBold), 700 (Bold)
 */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-SemiBold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-BoldItalic.ttf') format('truetype');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/**
 * Bungee Spice Schriftart
 * Spezielle Displayschrift für kreative Akzente und Footer-Signatur
 * Kombiniert lokale Datei mit Google Fonts Fallback
 */
@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap');

@font-face {
  font-family: 'Bungee Spice';
  src: url('../fonts/BungeeSpice/BungeeSpice-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/**
 * Überschriften-Hierarchie
 * =========================
 * Systematische Gestaltung aller Überschriftenebenen
 * mit der Poppins-Schrift für bessere visuelle Hierarchie.
 */

/* Basis-Styling für alle Überschriften */
h1, h2, h3, h4, h5, h6, .lead {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, Helvetica, sans-serif;
}

/* Spezifische Gewichtung für kleinere Überschriften */
h4, h5, h6, .lead {
  font-weight: 700;
}

/**
 * Haupt-Überschrift (H1)
 * Große, prominente Überschrift für Hero-Bereiche
 * mit optimiertem Buchstabenabstand und Zeilenhöhe
 */
h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 5rem;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin-bottom: 1rem;
  text-align: left;
}

/**
 * Sekundäre Überschriften (H2, H3)
 * Mittlere Größen für Abschnittsüberschriften
 */
h2 {
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

h3 {
  font-size: 2rem;
  font-weight: 500;
  margin-bottom: 1rem;
}

/**
 * Lead-Text Styling
 * Hervorgehobener Einleitungstext mit größerer Schrift
 */
.lead {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  letter-spacing: -0.4px;
  line-height: 1.2;
  text-align: left;
}

/**
 * Footer spezielle Schriftarten
 * "Made by" Text mit der kreativen Bungee Spice Schrift
 */
.made-by-text {
  font-family: 'Bungee Spice', cursive;
  color: unset;
}

/**
 * Formular-Typografie
 * ====================
 * Speziell angepasste Schriftgrößen und -gewichtungen
 * für Formularbereiche und Eingabeelemente.
 */

/* Hilfstext in Formularen */
.form-text {
  font-size: 0.875rem;
}

/* Abschnitts-Titel in Formularen */
.section-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 1.25rem;
}

/* Warn-Titel */
.warning-title {
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
}

/* Formular-Container Überschriften */
.form-container h1 {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 2.5rem;
}

/**
 * Spezielle Schriftgrößen-Utility-Klassen
 * Für spezifische Anwendungsfälle und Komponenten
 */
.fs-badge-hero {
  font-size: 1.5rem;
}

/**
 * Schriftfamilien-Utility-Klassen
 * Für schnelle Zuweisung ohne benutzerdefinierte CSS-Regeln
 */
.font-lato {
  font-family: 'Lato', sans-serif;
}

.font-poppins {
  font-family: 'Poppins', sans-serif;
}

/* ===================================================================== */
/* 3. GRUNDLEGENDES LAYOUT UND SEITENSTRUKTUR                           */
/* ===================================================================== */

/**
 * Hauptinhalt-Wrapper
 * ====================
 * Definiert die Mindesthöhe und Positionierung des Hauptinhalts
 * zur korrekten Platzierung des Footer-Bereichs am Seitenende.
 * Verwendet Viewport-Höhen für responsive Gestaltung.
 */
main {
  min-height: 85vh;
  position: relative;
  padding: 0 0 15vh 0;
}

/**
 * Layout-Utility-Klassen
 * =======================
 * Hilfsklassen für häufig verwendete Abstände und Layouts
 */
.custom-dist {
  margin-bottom: 10vh;
}

/* ===================================================================== */
/* 4. BUTTON-DESIGNS UND INTERAKTIVE ELEMENTE                           */
/* ===================================================================== */

/**
 * Basis Button-Styling
 * =====================
 * Grundlegende Gestaltung für alle Button-Komponenten
 * mit einheitlichen Abständen, Übergängen und Schriftarten.
 */
.btn {
    border-radius: 0.2rem;
    padding: 0.3rem 0.5rem;
    font-weight: 600;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
}

/**
 * Primäre Buttons
 * ===============
 * Hauptaktions-Buttons mit blauem Farbverlauf
 * und animierten Hover-Effekten für bessere Benutzererfahrung.
 */
.btn-primary {
    background: var(--gradient-blue);
    color: var(--white);
    border: none;
    padding: 0.5rem 1rem;
}

.btn-primary:hover {
    background: var(--gradient-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
    color: var(--white) !important;
}

/**
 * Sekundäre Buttons
 * ==================
 * Alternative Button-Gestaltung mit transparentem Hintergrund
 * und weißem Rahmen für weniger prominente Aktionen.
 */
.btn-secondary {
    background: var(--transparent);
    color: var(--white);
    border: 2px solid var(--white);
    padding: 0.5rem 1rem;
}

.btn-secondary:hover {
    background: var(--black);
    transform: translateY(-2px);
    color: var(--white);
    border-color: var(--black);
}

/**
 * Outline-Primary Buttons
 * ========================
 * Buttons mit blauem Rahmen und transparentem Hintergrund
 * für dezentere Call-to-Action Elemente.
 */
.btn-outline-primary {
    border: 2px solid var(--blue);
    color: var(--blue);
    background: var(--transparent);
}

.btn-outline-primary:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

/**
 * Submit-Buttons für Formulare
 * =============================
 * Größere Buttons für Formular-Übermittlungen
 * mit verstärkten Abständen für bessere Touch-Bedienung.
 */
.btn-submit {
    font-size: 1.1rem;
    padding: 1rem 2.5rem;
}

/**
 * Color-Theme Buttons
 * ===================
 * Spezielle Button-Varianten mit erweiterten Animationen
 * und kubischen Bézier-Kurven für flüssige Übergänge.
 */
.btn-primary.color-theme {
    background-color: var(--blue);
    color: var(--white);
    font-weight: 600;
    transition: 
        background 0.3s cubic-bezier(.4,0,.2,1), 
        color 0.3s cubic-bezier(.4,0,.2,1), 
        box-shadow 0.3s cubic-bezier(.4,0,.2,1),
        transform 0.2s cubic-bezier(.4,0,.2,1);
}

.btn-primary.color-theme:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0,47,255,0.18);
    filter: brightness(1.08);
    background: var(--white);
}

.btn-secondary.color-theme {
    background-color: var(--black);
    color: #fff;
    border: none;
    transition: 
        background 0.3s cubic-bezier(.4,0,.2,1), 
        color 0.3s cubic-bezier(.4,0,.2,1), 
        box-shadow 0.3s cubic-bezier(.4,0,.2,1),
        transform 0.2s cubic-bezier(.4,0,.2,1);
}

.btn-secondary.color-theme:hover {
    transform: scale(1.06);
    box-shadow: 0 8px 24px rgba(0,47,255,0.18);
    filter: brightness(1.08);
    background: var(--white);
    color: var(--blue);
}

/**
 * Footer Call-to-Action Buttons
 * ==============================
 * Spezielle Button-Gestaltung für den Footer-Bereich
 * mit gedämpften Hover-Effekten und konsistenter Darstellung.
 */
.footer-cta {
  overflow: visible;
  padding-bottom: 0.5rem;
}

.footer-cta .btn {
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  font-weight: 500;
  border-radius: 0.5rem;
  transition: all 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.footer-cta .btn:hover,
.footer-cta .btn:focus {
  transform: none;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  background-color: inherit;
  color: inherit;
  border-color: inherit;
}

.footer-cta .btn-primary {
  background: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
}

.footer-cta .btn-primary:hover,
.footer-cta .btn-primary:focus {
  background: var(--blue);
  color: var(--white);
  border: 1px solid var(--blue);
}

/**
 * Footer Schadensmeldung-Button
 * ==============================
 * Spezieller roter Button für Schadensmeldungen im Footer
 * mit erhöhter Sichtbarkeit und Warnsignal-Charakter.
 */
.footer-cta .btn-outline-danger {
  position: relative;
  overflow: visible;
  z-index: 2;
  background: var(--white);
  color: var(--red);
  border: 1px solid var(--red);
  border-bottom: 1px solid var(--red);
  margin-bottom: 1rem;
}

.footer-cta .btn-outline-danger:hover,
.footer-cta .btn-outline-danger:focus {
  background: var(--red);
  color: var(--white);
  border: 1px solid var(--red);
}

.footer-cta.d-grid {
  padding-bottom: 1rem;
  min-height: 90px;
}

/**
 * Leistungsseite: Spezielle Button-Layouts
 * =========================================
 * Angepasste Button-Gestaltung für die Services-Seite
 * mit einheitlichen Breiten und farblichen Anpassungen.
 */
.btn-width-65 {
  width: 65%;
}

#cards-right .card .btn {
  background-color: var(--black) !important;
  border-color: var(--black) !important;
  color: var(--white) !important;
}

#right .card.card-body .btn {
  background-color: var(--blue) !important;
  color: var(--white) !important;
  border: none !important;
}

#right .card.card-body .btn:hover, 
#right .card.card-body .btn:focus {
  background-color: var(--blue-hover) !important;
  color: var(--white) !important;
}

/**
 * Kontaktseite: Spezielle Button-Designs
 * =======================================
 * Buttons mit abgerundeten Ecken für die Kontaktseite
 * zur besseren visuellen Integration.
 */
.kontakt-btn {
    border-radius: 25px;
    padding: 0.7rem 2rem;
    font-weight: 600;
    transition: all 0.3s ease;
    border: none;
}

.kontakt-btn-primary {
    background: var(--gradient-blue);
    color: var(--white);
    border: none;
}

.kontakt-btn-primary:hover {
    background: var(--gradient-blue-hover);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(13, 110, 253, 0.4);
    color: var(--white);
}

/**
 * Schadensmeldung: Vollbreite Buttons
 * ====================================
 * Spezielle Button-Gestaltung für die Schadensmeldungsseite
 * mit maximaler Breite für bessere Touch-Bedienung.
 */
.schadensmeldung-btn {
    width: 100%;
    max-width: 300px;
    justify-content: center;
}

/* ===================================================================== */
/* 5. FOOTER-BEREICH DETAILGESTALTUNG                                   */
/* ===================================================================== */

/**
 * Footer-Titel Hover-Effekte
 * ===========================
 * Zusätzliche Interaktivität für Footer-Überschriften
 * mit sanften Farbübergängen bei Benutzerinteraktion.
 */
.footer-title:hover,
.footer-title:focus {
  color: var(--black);
}

/**
 * Footer-Links Navigation
 * =======================
 * Strukturierte Darstellung der Footer-Navigationslinks
 * mit animierten Hover-Effekten und verbesserter Benutzerführung.
 */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.5rem;
  transition: transform 0.2s ease;
}

/* Subtile seitliche Bewegung bei Hover */
.footer-links li:hover {
  transform: translateX(3px);
}

/**
 * Footer-Links Unterstreichungs-Effekt
 * ====================================
 * Animierte blaue Unterstreichung für alle Footer-Links
 * mit flüssiger CSS-Animation für professionelle Darstellung.
 */
.footer-section .footer-links a,
.footer-section .link-secondary {
  position: relative;
  transition: color 0.2s;
}

.footer-section .footer-links a::after,
.footer-section .link-secondary::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1);
}

.footer-section .footer-links a:hover::after,
.footer-section .footer-links a:focus::after,
.footer-section .link-secondary:hover::after,
.footer-section .link-secondary:focus::after {
  width: 100%;
}

.footer-section .footer-links a:hover,
.footer-section .footer-links a:focus,
.footer-section .link-secondary:hover,
.footer-section .link-secondary:focus {
  color: var(--blue);
}

/**
 * Footer Kontakt-Bereich
 * =======================
 * Spezielle Gestaltung für Kontaktinformationen
 * mit Icon-Integration und verbesserter Lesbarkeit.
 */
.footer-contact p {
  margin-bottom: 0.75rem;
  color: var(--black);
  display: flex;
  align-items: flex-start;
  line-height: 1.5;
}

.footer-contact i {
  margin-right: 0.75rem;
  margin-top: 0.125rem;
  width: 16px;
  flex-shrink: 0;
}

.footer-contact a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: var(--blue);
  transition: width 0.3s ease;
}

.footer-contact a:hover {
  color: var(--black);
}

.footer-contact a:hover::after,
.footer-contact a:focus::after {
  width: 0;
}

/**
 * Footer-Unterteilung und Copyright-Bereich
 * ==========================================
 * Layout für den unteren Footer-Bereich mit Copyright
 * und "Made by" Signatur in flexiblem Layout.
 */
.footer-bottom {
  min-height: 60px;
  align-items: center;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 1rem;
}

.footer-made-by {
  display: flex;
  align-items: center;
  justify-content: end;
}

/**
 * Barrierefreiheit im Footer
 * ===========================
 * Verbesserte Fokus-Indikatoren für bessere Zugänglichkeit
 * entsprechend den WCAG-Richtlinien.
 */
.footer-links a:focus,
.footer-contact a:focus {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/**
 * Footer-Link-Styling Zurücksetzung
 * ==================================
 * Entfernung ungewollter Standarddekorationen
 * für saubere, einheitliche Darstellung.
 */
.footer-section a,
.footer-section .footer-links a,
.footer-section .link-secondary {
  text-decoration: none;
  border-bottom: none;
  box-shadow: none;
}

/**
 * Footer Transparenz-Einstellungen
 * =================================
 * Alle Footer-Elemente erhalten transparente Hintergründe
 * für konsistente Darstellung über dem Gradient.
 */
footer.footer-section * {
  background: transparent;
  background-color: transparent;
  box-shadow: none;
}

footer.footer-section hr,
footer.footer-section .footer-divider {
  border-color: var(--footer-border-alpha);
  background: transparent;
}

/**
 * "Made by" Text Spezial-Styling
 * ===============================
 * Spezielle Behandlung der Bungee Spice Schrift
 * mit Farb-Reset für natürliche Darstellung.
 */
.footer-made-by .made-by-text {
  color: inherit;
  color: unset;
  color: initial;
  -webkit-text-fill-color: initial;
}

/* ===================================================================== */
/* 6. HEADER UND NAVIGATIONS-SYSTEM                                     */
/* ===================================================================== */

/**
 * Sticky Navigation Grundeinstellungen
 * ====================================
 * Konfiguration für die klebende Navigation mit korrekter
 * Z-Index-Stapelung und Flexbox-Layout für alle Geräte.
 */
#stickyNav {
  display: flex;
  align-items: center;
  z-index: 2000;
}

#stickyNav .container-fluid {
  display: flex;
  align-items: center;
  z-index: 2001;
}

#stickyNav .col-2,
#stickyNav .col-4,
#stickyNav .col-5 {
  display: flex;
  align-items: center;
}

#stickyNav .navbar-nav {
  align-items: center;
}

#stickyNav .navbar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
}

/**
 * Desktop Hamburger-Menü Ausblendung
 * ===================================
 * Versteckt das Mobile-Menü auf Desktop-Geräten
 */
.navbar-toggler-desktop-hide {
  display: none !important;
}

/**
 * Logo-Anpassungen für verschiedene Header-Varianten
 * ===================================================
 * Responsive Logo-Größen abhängig vom Header-Typ
 */
#logo-lg-header {
  max-height: 6vh !important;
  height: auto;
  width: auto;
}

.logo-header {
  max-height: 6vh;
  height: auto;
  width: auto;
  object-fit: contain;
  display: block;
}

/**
 * Logo-Anzeige-Logik
 * ===================
 * Standardmäßig wird das weiße Logo angezeigt,
 * das schwarze Logo bleibt ausgeblendet.
 */
#white-logo {
  display: inline-block;
}

#black-logo {
  display: none;
}

/**
 * Navbar-Grundkonfiguration
 * ==========================
 * Flexbox-Layout für die Navigationsleiste mit
 * automatischer Abstandsverteilung zwischen Elementen.
 */
.navbar-brand {
  flex-shrink: 0;
  margin-right: auto;
}

.navbar .container-fluid {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/**
 * Navigation-Links Abstände
 * ==========================
 * Großzügiger Abstand zwischen Navigationslinks
 * für bessere Klickbarkeit und visuelle Trennung.
 */
.navbar-nav {
  gap: 3.5rem;
}

/**
 * Hamburger-Menü Icon-Gestaltung
 * ===============================
 * Schwarzes Hamburger-Icon für Desktop-Ansicht
 * mit SVG-basierter Darstellung für scharfe Kanten.
 */
.navbar-light .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,0,0,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/**
 * Browser-Fallback für Backdrop-Filter
 * ====================================
 * Alternative Hintergrund-Darstellung für Browser
 * ohne Backdrop-Filter-Unterstützung (z.B. ältere Versionen).
 */
@supports not ((backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px))) {
  header {
    background: rgba(255,255,255,0.95);
  }
}

/* ===================================================================== */
/* 7. ANIMATIONEN UND ÜBERGANGSEFFEKTE                                  */
/* ===================================================================== */

/**
 * Hero-Badge Reveal Animation
 * ============================
 * Spektakuläre Flip-Up Animation für Badge-Elemente im Hero-Bereich.
 * Verwendet 3D-Transformationen für einen modernen Enthüllungseffekt
 * mit gestaffelten Timing für sequenzielle Darstellung.
 */

/**
 * Basis-Animation: Badge Reveal
 * Ausgangsposition: Gedreht und nach unten verschoben
 * Zielposition: Normal sichtbar mit sanftem Easing
 */
.badge-reveal {
  opacity: 0;
  transform: rotateX(90deg) translateY(20px);
  transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transform-origin: bottom;
}

.badge-reveal.animate {
  opacity: 1;
  transform: rotateX(0deg) translateY(0);
}

/**
 * Gestaffelte Animations-Verzögerungen
 * ====================================
 * Jedes Badge erscheint nacheinander für einen
 * fließenden, sequenziellen Enthüllungseffekt.
 */
.badge-reveal:nth-child(1) {
  transition-delay: 0.1s;
}

.badge-reveal:nth-child(2) {
  transition-delay: 0.3s;
}

.badge-reveal:nth-child(3) {
  transition-delay: 0.5s;
}

/**
 * 3D-Perspektive Container
 * ========================
 * Ermöglicht realistische 3D-Transformationen
 * für den Flip-Effekt der Badge-Elemente.
 */
.badge-container {
  perspective: 1000px;
}

/**
 * Erweiterte Bounce-Animation
 * ============================
 * Alternative Animation mit zusätzlichem Sprungeffekt
 * für noch dynamischere Darstellung der Badge-Elemente.
 */
@keyframes flipUpBounce {
  0% {
    opacity: 0;
    transform: rotateX(90deg) translateY(20px);
  }
  60% {
    opacity: 1;
    transform: rotateX(-10deg) translateY(-5px);
  }
  100% {
    opacity: 1;
    transform: rotateX(0deg) translateY(0);
  }
}

.badge-reveal.animate-bounce {
  animation: flipUpBounce 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.badge-reveal.animate-bounce:nth-child(1) {
  animation-delay: 0.1s;
}

.badge-reveal.animate-bounce:nth-child(2) {
  animation-delay: 0.3s;
}

.badge-reveal.animate-bounce:nth-child(3) {
  animation-delay: 0.5s;
}

/* ===================================================================== */
/* 8. RESPONSIVE DESIGN - UMFASSENDE GERÄTE-ANPASSUNGEN                 */
/* ===================================================================== */

/**
 * =====================================================================
 * BUTTON RESPONSIVE DESIGN
 * =====================================================================
 * Mobile-optimierte Button-Größen und -Layouts für verschiedene
 * Bildschirmgrößen mit Touch-freundlichen Abmessungen.
 */

/**
 * Mobile Button-Anpassungen (bis 768px)
 * Vollbreite Buttons mit optimierten Touch-Targets
 */
@media (max-width: 768px) {
    .btn {
        width: 100%;
        max-width: 300px;
        padding: 0.5rem 1rem;
        font-size: 0.875rem;
    }
    
    .btn-lg {
        padding: 0.75rem 1.25rem;
        font-size: 1rem;
    }
    
    .btn-sm {
        padding: 0.375rem 0.75rem;
        font-size: 0.75rem;
    }
}

/**
 * Footer-Button Responsive Anpassungen
 * =====================================
 * Verschiedene Breakpoints für optimale Footer-Button-Darstellung
 */
@media (max-width: 768px) {
  .footer-cta .btn {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
  }
}

@media (max-width: 576px) {
  .footer-cta .btn {
    padding: 0.375rem 0.75rem;
    font-size: 0.75rem;
  }
}

@media (max-width: 992px) {
  .footer-cta .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    width: 100%;
  }
}

@media (max-width: 576px) {
  .footer-cta .btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.95rem;
    width: 100%;
  }
}

/**
 * =====================================================================
 * FOOTER RESPONSIVE DESIGN
 * =====================================================================
 * Umfassende responsive Anpassungen für den Footer-Bereich
 * mit optimierter Darstellung für alle Gerätetypen.
 */

/**
 * Desktop Footer (ab 1025px)
 * Großzügige Abstände für Desktop-Darstellung
 */
@media (min-width: 1025px) {
  .footer-section {
    padding-top: 4rem;
    padding-bottom: 2rem;
  }
}

/**
 * Tablet Footer (bis 1024px)
 * Reduzierte Abstände für mittlere Bildschirme
 */
@media (max-width: 1024px) {
  .footer-section {
    padding-top: 3.5rem;
    padding-bottom: 2rem;
  }
}

/**
 * Große Tablets (769px - 1024px)
 * Angepasste Schriftgrößen für große Tablets
 */
@media (min-width: 769px) and (max-width: 1024px) {
  .footer-title {
    font-size: 1.1rem;
  }
  
  .footer-links a {
    font-size: 0.95rem;
  }
  
  .nav-link {
    font-size: 1.1rem;
  }
}

/**
 * Mobile und kleine Tablets (bis 768px)
 * Zentrierte Darstellung mit angepassten Abständen
 */
@media (max-width: 768px) {
  .footer-section {
    padding-top: 3rem;
    padding-bottom: 2rem;
    text-align: center;
  }
  
  .footer-title {
    font-size: 1rem;
    margin-bottom: 1rem;
  }
  
  .footer-links a {
    font-size: 0.9rem;
    padding: 0.4rem 0;
  }
  
  .footer-contact {
    font-size: 0.9rem;
    text-align: center;
    align-items: center;
  }
  
  .footer-contact p {
    margin-bottom: 0.6rem;
    justify-content: center;
  }
  
  .footer-cta {
    text-align: center;
  }
  
  .footer-copyright {
    font-size: 0.8rem;
    text-align: center;
    margin-bottom: 1rem;
  }
  
  .footer-made-by {
    text-align: center;
    justify-content: center;
  }
  
  .made-by-text {
    font-size: 0.5rem;
  }
  
  .footer-divider {
    margin: 1.5rem 0 1rem 0;
  }
  
  .footer-bottom {
    flex-direction: row;
    gap: 0.5rem;
  }
  
  .nav-link {
    font-size: 1.1rem;
  }
  
  .form-container h1 {
    font-size: 2.2rem;
  }
  
  .section-title {
    font-size: 1.15rem;
  }
}

/**
 * Sehr kleine Bildschirme (bis 576px)
 * Maximal kompakte Darstellung für Smartphones
 */
@media (max-width: 576px) {
  .footer-section .container-fluid {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .footer-section {
    padding-top: 2.5rem;
    padding-bottom: 1.5rem;
  }
  
  .footer-title {
    font-size: 0.95rem;
    margin-bottom: 0.75rem;
  }
  
  .footer-links a {
    font-size: 0.85rem;
    padding: 0.3rem 0;
  }
  
  .footer-contact {
    font-size: 0.85rem;
  }
  
  .footer-contact i {
    margin-right: 0.5rem;
    width: 14px;
  }
  
  .footer-cta {
    text-align: center;
  }
  
  .made-by-text {
    font-size: 0.45rem;
  }
  
  .form-container h1 {
    font-size: 2rem;
  }
  
  .section-title {
    font-size: 1.1rem;
  }
  
  /* iOS Zoom-Verhinderung bei Formulareingaben */
  .form-control, .form-select {
    font-size: 16px;
  }
}

/**
 * Footer Spalten-Layout Responsive
 * =================================
 * Flexibles Grid-System für Footer-Spalten
 * mit automatischer Größenanpassung je Bildschirmgröße.
 */
.footer-section .row {
  flex-wrap: wrap;
}

.footer-section [class*='col-'] {
  min-width: 220px;
  flex: 1 1 220px;
  max-width: 100%;
}

@media (max-width: 1024px) {
  .footer-section [class*='col-'] {
    min-width: 180px;
  }
}

@media (max-width: 768px) {
  .footer-section [class*='col-'] {
    min-width: 140px;
  }
}

/**
 * =====================================================================
 * HEADER RESPONSIVE DESIGN
 * =====================================================================
 * Mobile und Desktop Anpassungen für Header und Navigation
 * mit optimierter Touch-Bedienung und Scroll-Verhalten.
 */

/**
 * Mobile und Tablet Header (bis 991.98px)
 * Verstärkte Hintergründe und angepasste Navigation
 */
@media (max-width: 991.98px) {
  html {
    scroll-padding-top: 90px;
  }
  
  /* Verstärkter Blur-Effekt für Mobile */
  header {
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    padding: 1rem 0;
  }
  
  .navbar,
  .navbar-collapse {
    background: var(--bg-transparent);
  }
  
  .navbar-nav {
    gap: 1rem;
    padding: 1rem 0;
  }
  
  .navbar-nav .nav-link,
  .navbar-collapse .nav-link {
    padding: 0.8rem 1rem;
  }
  
  .navbar-collapse .nav-link.active,
  .navbar-collapse .nav-link:focus {
    background-color: var(--shadow);
    border-radius: 0.5rem;
  }
  
  .navbar-collapse .nav-link:hover {
    background-color: var(--shadow);
    border-radius: 0.5rem;
  }
  
  .logo-header {
    max-height: 5vh;
  }
  
  /* Weißes Hamburger-Icon für Mobile */
  .navbar-light .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(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  }
  
  .navbar-light .navbar-toggler {
    border: none;
    box-shadow: none;
  }
}

/**
 * Sehr kleine Mobile Geräte (bis 767.98px)
 * Weitere Scroll-Padding Anpassung
 */
@media (max-width: 767.98px) {
  html {
    scroll-padding-top: 80px;
  }
}

/**
 * Desktop Navigation (ab 992px)
 * Erweiterte Hover-Effekte und weiße Link-Farben
 */
@media (min-width: 992px) {
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link:focus {
    transform: scale(1.1);
  }
  
  .navbar-nav .nav-link:hover {
    transform: scale(1.1);
  }

  /* Weiße Navigationslinks für Desktop */
  .navbar-nav .nav-link {
    color: #fff !important;
  }

  .nav-link:hover,
  .nav-link:focus {
    color: #ddd !important;
  }
}

/**
 * =====================================================================
 * RESPONSIVE TYPOGRAFIE
 * =====================================================================
 * Angepasste Schriftgrößen für verschiedene Bildschirmgrößen
 * zur Optimierung der Lesbarkeit auf allen Geräten.
 */

/**
 * Kleine Mobile Geräte (bis 480px)
 * Kompakte Schriftgrößen für sehr kleine Bildschirme
 */
@media (max-width: 480px) {
  .section-title {
    font-size: 1.3rem;
  }
  
  .warning-title {
    font-size: 0.9rem;
  }
  
  .footer-contact a {
    font-size: 0.9rem;
  }
  
  .form-label {
    font-size: 0.8rem;
  }
  
  .form-text {
    font-size: 0.8rem;
  }
}

/**
 * Extra kleine Geräte (bis 400px)
 * Minimale Schriftgrößen für sehr kompakte Darstellung
 */
@media (max-width: 400px) {
  .nav-link {
    font-size: 1rem;
  }
  
  .section-title {
    font-size: 1.2rem;
  }
  
  .form-container h1 {
    font-size: 1.3rem;
  }
}