/* --------------------------------------------------------------------------
   CSS-Struktur:
   1. Root: Farben & Schriften (Variablen)
   2. Grundlayout (Globales Reset, Body, Container)
   3. Navigation & Header (Navbar, Links, Hamburger-Menü)
   4. Hero Section
   5. Timeline Sektion (inkl. Sticky-Logik)
   6. Kontakt & Footer (Formulare, Checkboxen)
   7. Media Queries (Responsive Design)
   8. Keyframes (Animationen)
-------------------------------------------------------------------------- */

/* -------------------------------------
   1. Root: Farben & Schriften (Variablen)
   Definiert globale CSS-Variablen für Farben, Schriftarten und
   fluid typography, um Konsistenz und einfache Wartung zu gewährleisten.
-------------------------------------- */
:root {
    /* Farben */
    --primary-color: #174290; /* Hauptakzentfarbe (Dunkelblau) */
    --primary-color-rgb: 23, 66, 144; /* RGB-Werte der Hauptfarbe für rgba() */
    --secondary-color: #0d6efd; /* Sekundäre Akzentfarbe (Hellblau) */
    --text-color: #414141; /* Standard-Textfarbe (Dunkelgrau) */
    --light-gray: #f8f9fa; /* Sehr helles Grau für Hintergründe */
    --white: #ffffff; /* Weiß */
    --gray-light: #ccc; /* Helles Grau für Ränder, Linien */
    --gray-dark: #666; /* Dunkleres Grau */
    --gray-hover: #152d6c; /* Dunklere Variante der Primärfarbe für Hover-Effekte */

    /* Schriftarten */
    --font-heading: 'Rajdhani', sans-serif; /* Schriftart für Überschriften */
    --font-body: 'Roboto Condensed', sans-serif; /* Schriftart für Fließtext */

    /* Fluid Typografie (skaliert Schriftgrößen basierend auf Viewport-Breite) */
    --font-size-base: clamp(0.95rem, 1.5vw, 1.1rem); /* Basis-Schriftgröße */
    --font-size-lg: clamp(1.2rem, 2vw, 1.5rem); /* Größere Schriftgröße */
    --font-size-xl: clamp(2rem, 4vw, 3rem); /* Extra große Schriftgröße */

    /* Weitere globale Variablen (optional, je nach Bedarf) */
    --border-radius-sm: 4px; /* Kleinerer Border-Radius */
    --border-radius-lg: 50px; /* Großer Border-Radius für Pillen-Form */
    --transition-speed: 0.3s; /* Standard-Übergangsgeschwindigkeit */
}

/* -------------------------------------
   2. Grundlayout
   Definiert grundlegende Stile für das gesamte Dokument,
   einschließlich Box-Modell, Schrift-Rendering und globaler Container.
-------------------------------------- */
html {
    box-sizing: border-box; /* Standardisiert das Box-Modell */
    font-size: 100%; /* Basis-Schriftgröße für relative Einheiten */
    scroll-behavior: smooth; /* Ermöglicht sanftes Scrollen zu Ankern */
    -webkit-text-size-adjust: 100%; /* Verhindert Textvergrößerung auf iOS-Geräten */
    margin: 0;
}

/* Universal-Selektor für Box-Sizing-Reset */
*, *::before, *::after {
    box-sizing: inherit; /* Erbt das Box-Modell vom HTML-Element */
}

body {
    margin: 0; /* Entfernt Standard-Margin des Bodys */
    padding: 0; /* Entfernt Standard-Padding des Bodys */
    font-family: var(--font-body); /* Setzt die globale Schriftart */
    color: var(--text-color); /* Setzt die globale Textfarbe */
    background-color: var(--white); /* Setzt die globale Hintergrundfarbe */
    font-size: var(--font-size-base); /* Basis-Schriftgröße */
    line-height: 1.5; /* Standard-Zeilenhöhe für gute Lesbarkeit */
    font-weight: 400; /* Standard-Schriftstärke */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    -webkit-font-smoothing: antialiased; /* Verbessert die Schriftglättung auf macOS */
}

/* Globaler Container für Inhaltsbreite */
.container {
    max-width: 1140px; /* Maximale Breite des Inhaltsbereichs */
    margin: 0 auto; /* Zentriert den Container horizontal */
    padding: 0 20px; /* Innenabstand links und rechts */
}

/* Utility-Klasse zum Sperren des Scrollens (z.B. bei geöffnetem Overlay) */
body.no-scroll {
    overflow: hidden;
}


/* ------------------------

    Rechtstexte

---------------------------*/
/* Basis-Formatierung für rechtliche Sektionen */
.rechtstext {
    background-color: var(--white);
    color: var(--text-color);
    font-family: var(--font-body);
    padding: 2rem 9rem;
    border-radius: var(--border-radius-sm);
}

/* Überschriften innerhalb der Sektion */
.rechtstext h1,
.rechtstext h2,
.rechtstext h3,
.rechtstext h4,
.rechtstext h5,
.rechtstext h6 {
    font-family: var(--font-heading);
    color: var(--primary-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
    line-height: 1.2;
}

/* Typische Schriftgrößen für Überschriften */
.rechtstext h1 { font-size: var(--font-size-xl); }
.rechtstext h2 { font-size: calc(var(--font-size-xl) * 0.8); }
.rechtstext h3 { font-size: calc(var(--font-size-xl) * 0.65); }
.rechtstext h4 { font-size: calc(var(--font-size-base) * 1.2); }
.rechtstext h5 { font-size: var(--font-size-base); }
.rechtstext h6 { font-size: calc(var(--font-size-base) * 0.9); }

/* Absätze innerhalb der Sektion */
.rechtstext p {
    margin: 1rem 0;
    line-height: 1.6;
}

/* Links innerhalb der Sektion */
.rechtstext a {
    color: var(--primary-color);
    text-decoration: underline;
    transition: color var(--transition-speed);
}

.rechtstext a:hover {
    color: var(--gray-hover);
}

/* Optional: Listen innerhalb der Sektion */
.rechtstext ul,
.rechtstext ol {
    padding-left: 1.5rem;
    margin: 2rem 0;
}

.rechtstext li {
    margin-bottom: 0.5rem;
}


/* -------------------------------------
   3. Navigation & Header
   Stile für die obere Navigationsleiste, Logo, Navigationslinks
   und das Hamburger-Menü für mobile Ansichten.
-------------------------------------- */
.navbar {
    background-color: transparent; /* Standardmäßig transparent */
    border-top: 8px solid var(--primary-color); /* Obere Akzentlinie */
    position: sticky; /* Bleibt beim Scrollen oben kleben */
    top: 0; /* Klebt am oberen Rand */
    width: 100%; /* Volle Breite */
    z-index: 1000; /* Stellt sicher, dass die Navbar über anderen Inhalten liegt */
    height: 90px; /* Feste Höhe der Navbar */
    display: flex; /* Für Flexbox-Layout der Inhalte */
    align-items: center; /* Vertikale Zentrierung der Inhalte */
    /* Spezifischere Übergänge für Performance */
    transition: background-color var(--transition-speed) ease, border-bottom var(--transition-speed) ease;
}

/* Stil der Navbar, wenn sie gescrollt wird (z.B. Hintergrund und Schatten) */
.navbar.scrolled {
    background-color: rgba(245, 245, 247, 0.8); /* Halbdurchsichtiger Hintergrund */
    backdrop-filter: blur(10px); /* Hintergrundunschärfe (modern) */
    border-bottom: 1px solid var(--gray-light); /* Untere Trennlinie */
}

/* Klasse zum Ausblenden der Navbar beim Scrollen (JS-gesteuert) */
.navbar.navbar--hidden {
    opacity: 0; /* Vollständig transparent */
    transform: translateY(-100%); /* Nach oben aus dem Sichtfeld bewegen */
    pointer-events: none; /* Macht die unsichtbare Navbar nicht klickbar */
    transition: transform var(--transition-speed) ease, opacity var(--transition-speed) ease; /* Sanfter Übergang */
}

/* Container für die Navbar-Inhalte (Logo, Navigation) */
.nav-container {
    display: flex; /* Flexbox für Anordnung */
    justify-content: space-between; /* Logo links, Navigation rechts */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Volle Breite innerhalb der Navbar */
    padding: 0 150px; /* Innenabstand links und rechts (Desktop) */
}

/* Logo-Stile */
.logo img {
    height: 75px; /* Feste Höhe des Logos */
    display: block; /* Entfernt zusätzlichen Platz unter dem Bild */
}

/* Platzhalter-Div für mobile Navigation (standardmäßig ausgeblendet auf Desktop) */
.nav-right {
    display: none;
}

/* Desktop-Navigationsbereich */
.desktop-nav {
    display: flex; /* Zeigt die Desktop-Navigation an */
    align-items: center; /* Vertikale Zentrierung */
}

/* Liste der Navigationslinks */
.nav-links {
    display: flex; /* Links nebeneinander anordnen */
    list-style: none; /* Entfernt Listenpunkte */
    gap: 20px; /* Abstand zwischen den Links */
    margin: 0; /* Entfernt Standard-Margin */
    padding: 0; /* Entfernt Standard-Padding */
}

/* Einzelner Navigationslink */
.nav-links a {
    position: relative; /* Für die Unterstrich-Animation */
    text-decoration: none; /* Entfernt Standard-Unterstrich */
    color: var(--text-color); /* Standard-Linkfarbe */
    font-weight: 500; /* Mittlere Schriftstärke */
    padding-bottom: 4px; /* Platz für die Unterstrich-Linie */
    transition: color var(--transition-speed) ease; /* Sanfter Farbwechsel */
}

/* Unterstrich-Animation für aktive und Hover-Links */
.nav-links a::after {
    content: ''; /* Erstellt ein Pseudo-Element */
    position: absolute; /* Positioniert relativ zum Link */
    bottom: -2px; /* Position des Unterstrichs */
    left: 50%; /* Startet in der Mitte */
    width: 0; /* Standardmäßig keine Breite */
    height: 2px; /* Höhe des Unterstrichs */
    background-color: var(--primary-color); /* Farbe des Unterstrichs */
    transform: translateX(-50%); /* Zentriert den Unterstrich */
    transition: width var(--transition-speed) ease; /* Sanfte Breitenänderung */
}

/* Aktiver Link: Unterstrich sichtbar und verbreitert */
.nav-links a.active::after {
    width: calc(100% + 8px); /* Verbreitert den Unterstrich leicht über den Text hinaus */
    left: -4px; /* Verschiebt den Startpunkt für die Verbreiterung */
    transform: translateX(0); /* Entfernt die Zentrierung, da der Startpunkt fest ist */
}

/* Hover-Effekt für Links */
.nav-links a:hover::after {
    width: calc(100% + 8px); /* Verbreitert den Unterstrich beim Hover */
    left: -4px; /* Verschiebt den Startpunkt für die Verbreiterung */
    transform: translateX(0); /* Entfernt die Zentrierung */
}

/* Aktiver Link und Hover-Link: Farbwechsel */
.nav-links a.active,
.nav-links a:hover {
    color: var(--primary-color); /* Ändert die Textfarbe zur Primärfarbe */
}

/* Call-to-Action Button in der Navbar */
.cta-button {
    background-color: var(--primary-color); /* Hintergrundfarbe */
    color: var(--white); /* Textfarbe */
    padding: 8px 55px; /* Innenabstand */
    text-decoration: none; /* Entfernt Unterstrich */
    border-radius: var(--border-radius-lg); /* Stark abgerundete Ecken */
    margin-left: 20px; /* Abstand zum letzten Navigationslink */
    font-weight: bold; /* Fette Schrift */
    display: inline-block; /* Für Padding und Margin */
    transition: background-color var(--transition-speed) ease; /* Sanfter Farbwechsel */
}

.cta-button:hover {
    background-color: var(--gray-hover); /* Dunklere Farbe beim Hover */
}

/* -----------------------------
   Hamburger Button Basis-Stil
   Definiert das Aussehen des Hamburger-Icons für mobile Navigation.
------------------------------ */
.hamburger {
    display: none; /* Standardmäßig ausgeblendet (nur auf Mobile sichtbar) */
    flex-direction: column; /* Balken untereinander anordnen */
    justify-content: space-around; /* Gleichmäßiger Abstand zwischen den Balken */
    width: 28px; /* Breite des Icons */
    height: 24px; /* Höhe des Icons */
    background: transparent; /* Transparenter Hintergrund */
    border: none; /* Keine Ränder */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    padding: 0; /* Kein Innenabstand */
    z-index: 1010; /* Höherer Z-Index als die Navbar */
    position: relative; /* Für die Positionierung der Spans und Pseudo-Elemente */
}

/* Die drei Balken des Hamburger-Icons */
.hamburger span {
    width: 100%; /* Volle Breite des Icons */
    height: 3px; /* Höhe eines Balkens */
    background: var(--primary-color); /* Farbe der Balken */
    border-radius: 2px; /* Leicht abgerundete Ecken */
    /* Übergang für die X-Transformation */
    transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55), opacity 0.3s;
    position: absolute; /* Positioniert relativ zum Hamburger-Container */
    left: 0;
}

/* Positionierung der einzelnen Balken */
.hamburger span:nth-child(1) {
    top: 0; /* Oberster Balken */
}
.hamburger span:nth-child(2) {
    top: 50%; /* Mittlerer Balken */
    transform: translateY(-50%); /* Vertikal zentrieren */
}
.hamburger span:nth-child(3) {
    bottom: 0; /* Unterster Balken */
}

/* Pseudo-Elemente für Orbiter & Kreis-Animation */
.hamburger::before,
.hamburger::after {
    content: ''; /* Erstellt Pseudo-Elemente */
    position: absolute; /* Absolut positioniert */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Zentriert die Elemente */
    border-radius: 50%; /* Runde Form */
    opacity: 0; /* Standardmäßig unsichtbar */
    pointer-events: none; /* Macht sie nicht interaktiv */
}

/* Orbiter (kleiner Punkt) */
.hamburger::before {
    width: 6px;
    height: 6px;
    background-color: var(--white);
}

/* Kreis (größerer Ring) */
.hamburger::after {
    width: 45px;
    height: 45px;
    border: 3px solid var(--white);
    transform: translate(-50%, -50%) scale(0.5); /* Startet kleiner */
    transition: transform 0.4s ease-out, opacity 0.4s ease-out; /* Sanfter Übergang */
}

/* -----------------------------
   Aktiv-Zustand (X-Transformation + Orbital-Animation)
   Stile, wenn der Hamburger-Button aktiv ist (geöffnetes Menü).
------------------------------ */
/* Oberster Balken wird Teil des X */
.hamburger.is-active span:nth-child(1) {
    transform: translateY(10.5px) rotate(135deg); /* Bewegt und dreht */
    background: white; /* Farbwechsel */
}
/* Mittlerer Balken wird ausgeblendet */
.hamburger.is-active span:nth-child(2) {
    transform: scaleX(0); /* Skaliert auf 0 Breite */
    opacity: 0; /* Vollständig transparent */
}
/* Unterster Balken wird Teil des X */
.hamburger.is-active span:nth-child(3) {
    transform: translateY(-10.5px) rotate(-135deg); /* Bewegt und dreht */
    background: white; /* Farbwechsel */
}

/* Orbiter startet Animation */
.hamburger.is-active::before {
    animation: orbit 1s cubic-bezier(0.5, 0, 0.5, 1) 0.3s forwards;
}

/* Kreis erscheint nach Orbiter-Animation */
.hamburger.is-active::after {
    opacity: 1; /* Sichtbar machen */
    transform: translate(-50%, -50%) scale(1); /* Auf Originalgröße skalieren */
    transition-delay: 1.1s; /* Verzögerung, um nach dem Orbiter zu erscheinen */
}

/* -------------------------------------
   4. Hero Section
   Stile für den Hauptbanner-Bereich der Webseite.
-------------------------------------- */
/* Entfernen des Margins in der Hero Sektion bei großen Bildschirmen */
:where(.wp-block-columns) {
    margin-bottom: 0;
}

.hero-section {
    position: relative; /* Für die Positionierung von Kindelementen */
    width: 100%; /* Volle Breite */
    height: 90vh; /* 90% der Viewport-Höhe */
    min-height: 500px; /* Mindesthöhe */
    background-image: url('./../image/hero_image_cnc-scaled.jpg'); /* Hintergrundbild */
    background-size: cover; /* Bild deckt den gesamten Bereich ab */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat; /* Bild nicht wiederholen */
    display: flex; /* Flexbox für Inhaltsanordnung */
    align-items: center; /* Vertikale Zentrierung des Inhalts */
    justify-content: flex-start; /* Inhalt linksbündig */
    padding: 0 8%; /* Innenabstand links und rechts */
    color: var(--white); /* Standardtextfarbe (wird von h1/p überschrieben) */
    z-index: 0; /* Standard-Z-Index */
}

/* Inhalt der Hero-Sektion */
.hero-content {
    position: relative; /* Für Z-Index über dem Hintergrund */
    z-index: 2; /* Liegt über dem Hintergrundbild und Partikeln */
    max-width: 800px; /* Maximale Breite des Textinhalts */
}

/* Überschrift der Hero-Sektion */
.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4rem); /* Fluid font size */
    font-weight: 800; /* Extra fette Schrift */
    letter-spacing: -0.5px; /* Leicht reduzierter Zeichenabstand */
    color: var(--primary-color); /* Primärfarbe für die Überschrift */
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Leichter Textschatten */
    margin: 0; /* Entfernt Standard-Margin */
}

/* Absatztext der Hero-Sektion */
.hero-content p {
    font-size: clamp(1.2rem, 3.5vw, 1.5rem); /* Fluid font size */
    font-weight: 400; /* Normale Schriftstärke */
    max-width: 600px; /* Maximale Breite des Absatzes */
    margin: 0 0 30px 0; /* Margin unten */
    line-height: 1.6; /* Erhöhte Zeilenhöhe für bessere Lesbarkeit */
    color: var(--text-color); /* Textfarbe */
    text-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); /* Leichter Textschatten */
}

/* Call-to-Action Button in der Hero-Sektion */
.cta-button-hero {
    background-color: var(--primary-color); /* Hintergrundfarbe */
    color: var(--white); /* Textfarbe */
    padding: 20px 60px; /* Innenabstand */
    border-radius: var(--border-radius-lg); /* Stark abgerundete Ecken */
    text-decoration: none; /* Entfernt Unterstrich */
    font-weight: bold; /* Fette Schrift */
    text-transform: uppercase; /* Großbuchstaben */
    display: inline-block; /* Für Padding und Margin */
    transition: background var(--transition-speed) ease; /* Sanfter Farbwechsel */
    animation: pulse-glow 3s infinite ease-in-out; /* Pulsierende Animation */
}

.cta-button-hero:hover {
    background-color: var(--gray-hover); /* Dunklere Farbe beim Hover */
}

/* Container für TSParticles (wenn verwendet) */
#tsparticles-container {
    position: absolute; /* Absolut positioniert über dem Hero-Bild */
    top: 0;
    left: 0;
    width: 60%; /* Breite des Partikelbereichs */
    height: 100%; /* Volle Höhe */
    z-index: 1; /* Liegt unter dem Hero-Inhalt */
}

/* -------------------------------------
   5. Timeline Sektion (inkl. Sticky-Logik)
   Stile für den Zeitstrahl-Bereich mit einer Sticky-Sidebar.
-------------------------------------- */
#history-section-wrapper {
    position: relative; /* Für die relative Positionierung der Sticky-Container */
    /* Ermöglicht Scroll-Effekt für die Sticky-Komponente */
    background-color: var(--light-gray); /* Hintergrundfarbe */
}

/* Sticky-Container für die Timeline-Elemente */
.timeline-sticky-container {
    padding: 150px 0px 150px 0px;
    display: flex; /* Flexbox für Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    width: 100%; /* Volle Breite */
    overflow: hidden; /* Verhindert ungewolltes Scrollen */
}

/* Hauptinhaltsbereich der Timeline */
.timeline-main-content {
    max-width: 1000px; /* Maximale Breite des Inhalts */
    width: 100%; /* Volle Breite innerhalb des Containers */
    padding: 20px; /* Innenabstand */
}

/* Überschrift der Timeline */
.timeline-main-content h2 {
    font-size: 2.5rem; /* Schriftgröße */
    color: var(--primary-color); /* Farbe */
    text-align: center; /* Zentriert */
    font-family: var(--font-heading); /* Schriftart */
}

/* Untertitel der Timeline */
.timeline-main-content .subtitle {
    font-size: 1.1rem; /* Schriftgröße */
    max-width: 600px; /* Maximale Breite */
    margin: 0 auto 2vh auto; /* Zentriert und Margin unten */
    text-align: center; /* Zentriert */
}

/* Container für die linke und rechte Spalte der Timeline */
.timeline-content-box {
    display: flex; /* Flexbox für Spaltenlayout */
    gap: 50px; /* Abstand zwischen den Spalten */
    align-items: center; /* Vertikale Zentrierung */
    margin-top: 40px; /* Abstand nach oben */
}

/* Linke Spalte der Timeline (für die Jahreszahlen/Punkte) */
.timeline-column-left {
    flex-basis: 250px; /* Feste Breite */
    flex-shrink: 0; /* Verhindert Schrumpfen */
}

/* Ausrichtung der Timeline-Elemente in der linken Spalte */
.timeline-left-aligned {
    position: relative; /* Für die Positionierung der Fortschrittsleiste */
    padding-left: 0; /* Platz für Fortschrittsleiste und Icons */
}

/* Vertikale Fortschrittsleiste der Timeline */
.timeline-progress-bar {
    position: absolute; /* Absolut positioniert */
    left: 20px; /* Position links */
    top: 10px;
    bottom: 0;
    width: 8px; /* Breite der Leiste */
    background-color: #ddd; /* Hintergrundfarbe */
    height: 300px; /* Feste Höhe (wird von JS kontrolliert) */
}

/* Füllstand der Fortschrittsleiste (JS-gesteuert) */
.timeline-progress-fill {
    width: 100%; /* Volle Breite der Leiste */
    height: 0; /* Startet bei 0 Höhe */
    background-color: var(--primary-color); /* Füllfarbe */
    transition: height 0.1s linear; /* Sanfter Übergang der Höhe */
    border-radius: var(--border-radius-lg); /* Abgerundete Enden */
}

/* Einzelnes Timeline-Element (z.B. ein Jahr) */
.timeline-item {
    display: flex;
    align-items: center;         /* Vertikale Zentrierung von Icon & Text */
    gap: 30px;
    position: relative; /* Für die Positionierung des Icons */
    margin-bottom: 40px; /* Abstand zum nächsten Element */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
}

/* Überschrift des Timeline-Elements (z.B. Jahreszahl) */
.timeline-item h4 {
    font-size: 1.2rem; /* Schriftgröße */
    color: var(--text-color); /* Textfarbe */
    opacity: 0.6; /* Leicht transparent im inaktiven Zustand */
    transition: all var(--transition-speed) ease; /* Sanfter Übergang */
    margin: 0; /* Entfernt Standard-Margin */
}

/* Aktives Timeline-Element: Überschrift hervorgehoben */
.timeline-item.active h4 {
    opacity: 1; /* Vollständig sichtbar */
    color: var(--primary-color); /* Primärfarbe */
    transform: scale(1.05); /* Leicht vergrößert */
}

/* Icon für das Timeline-Element */
.timeline-icon {
    position: static; /* Absolut positioniert */
    /*left: -80px; !* Position links der Jahreszahl *!*/
    /*top: -5px; !* Leicht nach oben versetzt *!*/
    width: 48px; /* Breite */
    height: 48px; /* Höhe */
    background: var(--white); /* Hintergrundfarbe */
    border: 4px solid var(--gray-light); /* Rand */
    border-radius: 50%; /* Rund */
    display: flex; /* Flexbox für Icon-Zentrierung */
    justify-content: center; /* Horizontale Zentrierung */
    align-items: center; /* Vertikale Zentrierung */
    flex-shrink: 0;
    z-index: 2; /* Liegt über der Fortschrittsleiste */
    transition: all var(--transition-speed) ease; /* Sanfter Übergang */
}

/* Aktives Timeline-Element: Icon hervorgehoben */
.timeline-item.active .timeline-icon {
    transform: scale(1.4); /* Leicht vergrößert */
    border-color: var(--primary-color); /* Randfarbe zur Primärfarbe */
}

/* SVG-Icon innerhalb des Timeline-Icons */
.timeline-icon svg {
    width: 24px; /* Breite */
    height: 24px; /* Höhe */
    fill: none; /* Keine Füllung */
    stroke: var(--gray-light); /* Strichfarbe */
    stroke-width: 2; /* Strichstärke */
    color: var(--gray-light); /* Fallback für ältere Browser */
    transition: fill var(--transition-speed) ease, stroke var(--transition-speed) ease, color var(--transition-speed) ease; /* Sanfter Übergang */
}

/* Aktives Timeline-Element: SVG-Icon Farbe */
.timeline-item.active .timeline-icon svg {
    fill: var(--primary-color); /* Füllfarbe zur Primärfarbe */
    stroke: none; /* Kein Strich */
    color: var(--primary-color); /* Fallback */
}

/* Rechte Spalte der Timeline (für den Textinhalt) */
.timeline-column-right {
    flex-grow: 1; /* Nimmt den restlichen verfügbaren Platz ein */
    position: relative; /* Für die absolute Positionierung der Textinhalte */
    height: 400px; /* Feste Höhe */
    overflow-y: auto; /* Ermöglicht vertikales Scrollen bei Überlauf */
    padding-right: 10px; /* Innenabstand für Scrollbar */
}

/* Einzelner Textinhalt der Timeline (JS-gesteuert ein-/ausgeblendet) */
.timeline-text-content {
    position: absolute; /* Absolut positioniert, überlappen sich */
    top: 0;
    left: 0;
    right: 0;
    opacity: 0; /* Standardmäßig unsichtbar */
    visibility: hidden; /* Versteckt das Element vollständig */
    /* Übergang für sanftes Ein-/Ausblenden */
    transition: opacity 0.5s ease, visibility 0s linear 0.5s;
}

/* Sichtbarer Textinhalt */
.timeline-text-content.visible {
    opacity: 1; /* Vollständig sichtbar */
    visibility: visible; /* Sichtbar machen */
    transition: opacity 0.5s ease; /* Sanfter Übergang nur für Deckkraft */
}

/* Überschrift des Timeline-Textinhalts */
.timeline-text-content h3 {
    font-size: 1.6rem; /* Schriftgröße */
    color: var(--primary-color); /* Farbe */
    font-family: var(--font-heading); /* Schriftart */
}

/* Absatztext des Timeline-Textinhalts */
.timeline-text-content p {
    font-size: 1.1rem; /* Schriftgröße */
    line-height: 1.7; /* Erhöhte Zeilenhöhe */
}

/* Hinweis für mobile Timeline-Nutzung */
#timeline-mobile-hint {
    text-align: center; /* Zentrierter Text */
    font-size: 1rem; /* Schriftgröße */
    color: var(--primary-color); /* Textfarbe */
    background: #f0f0f0; /* Hintergrundfarbe */
    padding: 12px 18px; /* Innenabstand */
    border-radius: 15px; /* Abgerundete Ecken */
    margin-bottom: 20px; /* Abstand nach unten */
    display: block; /* Block-Element */
}

/* Allgemeine Utility-Klasse zum Ausblenden */
.hidden {
    display: none;
}

/* -------------------------------------
   6. Kontakt & Footer
   Stile für den Kontaktbereich, Formularelemente und den Footer.
-------------------------------------- */
.contact-section {
    background: var(--white); /* Hintergrundfarbe */
    padding: 80px 0; /* Innenabstand oben und unten */
    color: var(--text-color); /* Standardtextfarbe */
}

.contact-section .wrapper {
    max-width: 800px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentriert den Wrapper */
    padding: 0 20px; /* Innenabstand links und rechts */
}

/* Überschrift des Kontaktbereichs */
.contact-section h2 {
    font-size: 2.5rem; /* Schriftgröße */
    text-align: center; /* Zentriert */
    margin-bottom: 10px; /* Abstand nach unten */
    color: var(--primary-color); /* Farbe */
}

/* Absatztext im Kontaktbereich */
.contact-section p {
    /*text-align: center; !* Zentriert *!*/
    /*margin-bottom: 40px; !* Abstand nach unten *!*/
    font-size: 1.2rem; /* Schriftgröße */
}

/* Link-Stil innerhalb einer Checkbox-Gruppe */
.form-group--checkbox a {
    color: var(--primary-color); /* Linkfarbe */
    text-decoration: underline; /* Unterstrichen */
    transition: color var(--transition-speed) ease; /* Sanfter Farbwechsel */
}

/* Formular-Gruppierung */
form .form-group {
    margin-bottom: 20px; /* Abstand zwischen Gruppen */
}

/* Formular-Labels */
form label {
    /*display: block; !* Block-Element *!*/
    /*margin-bottom: 8px; !* Abstand nach unten *!*/
    font-weight: 600; /* Halbfette Schrift */
}

/* Textfelder und Textbereiche */
form input[type="text"],
form input[type="email"],
form textarea {
    width: 100%; /* Volle Breite */
    padding: 12px; /* Innenabstand */
    border: 1px solid #ccc; /* Rand */
    border-radius: var(--border-radius-sm); /* Abgerundete Ecken */
    font-size: 1rem; /* Schriftgröße */
    font-family: inherit; /* Erbt die Schriftart vom Body */
    transition: border-color var(--transition-speed) ease; /* Sanfter Randfarbwechsel */
    margin-top: 8px;
}

/* Fokus-Stil für Formularfelder */
form input:focus,
form textarea:focus {
    outline: none; /* Entfernt den Standard-Fokus-Outline */
    border-color: var(--primary-color); /* Randfarbe zur Primärfarbe */
}

/* Checkbox-Gruppe */
.form-group--checkbox {
    display: flex; /* Flexbox für Ausrichtung */
    align-items: flex-start; /* Oben ausrichten */
    gap: 10px; /* Abstand zwischen Checkbox und Text */
}

/* Standard-Checkbox (wird versteckt) */
.form-group--checkbox input[type="checkbox"] {
    margin-top: 4px; /* Leicht nach unten versetzt */
}

/* Allgemeiner Button-Stil */
.btn {
    display: inline-block; /* Für Padding und Margin */
    background: var(--primary-color); /* Hintergrundfarbe */
    color: var(--white); /* Textfarbe */
    border: none; /* Kein Rand */
    padding: 15px 100px; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    border-radius: var(--border-radius-lg); /* Stark abgerundete Ecken */
    cursor: pointer; /* Zeigt an, dass es klickbar ist */
    transition: background var(--transition-speed) ease; /* Sanfter Farbwechsel */
    font-family: var(--font-body);
}

.btn:hover {
    background: #153879; /* Dunklere Farbe beim Hover */
}

/* Native Checkbox sichtbar machen */
.wpcf7-acceptance input[type="checkbox"] {
    opacity: 1 !important;
    position: static !important;
    width: 20px;
    height: 20px;
    margin-right: 8px;
    cursor: pointer;
    accent-color: var(--primary-color);
    margin-left: -20px;
    transform: translateY(2.5px);
}

/* Link innerhalb der Checkbox-Label */
.wpcf7-list-item-label a {
    color: var(--primary-color);
    text-decoration: underline;
}

.wpcf7-list-item-label a:hover {
    color: #0e2d6c;
}

.wpcf7-list-item {
    margin: 0 0 1.5rem 1.3rem;
}

/* -------------------------------------
   7. Footer
   Stile für den Fußbereich der Webseite.
-------------------------------------- */
.footer {
    background-color: var(--white); /* Hintergrundfarbe */
    padding: 80px 0 40px; /* Innenabstand */
    border-top: 8px solid var(--primary-color); /* Obere Akzentlinie */
}

/* Grid-Layout für die Footer-Spalten */
.footer-grid {
    display: grid; /* Aktiviert Grid-Layout */
    grid-template-columns: 2fr 1fr 1fr 1.5fr; /* Spaltenbreiten (flexibel) */
    gap: 40px; /* Abstand zwischen den Spalten */
}

/* Überschriften in den Footer-Spalten */
.footer-col h4 {
    font-size: 18px; /* Schriftgröße */
    margin-bottom: 20px; /* Abstand nach unten */
}

/* Text und Links in den Footer-Spalten */
.footer-col p,
.footer-col a {
    color: var(--text-color); /* Textfarbe */
    text-decoration: none; /* Entfernt Unterstrich bei Links */
    margin-bottom: 10px; /* Abstand nach unten */
    display: block; /* Macht Links zu Block-Elementen für Margin */
    transition: color var(--transition-speed) ease; /* Sanfter Farbwechsel */
}

.footer-col a:hover {
    color: var(--primary-color); /* Primärfarbe beim Hover */
}

/* Unterer Bereich des Footers (Copyright etc.) */
.footer-bottom {
    text-align: center; /* Zentrierter Text */
    margin-top: 60px; /* Abstand nach oben */
    padding-top: 30px; /* Innenabstand oben */
    font-size: 14px; /* Schriftgröße */
    color: var(--text-color); /* Textfarbe */
    border-top: 1px solid var(--gray-light); /* Trennlinie */
}

ol, ul {
    list-style: none;
    padding: 0;
}


/* -------------------------------------
   8. Media Queries
   Anpassungen für verschiedene Bildschirmgrößen (Responsive Design).
-------------------------------------- */

/* Tablet (bis 1024px) */
@media (max-width: 1024px) {
    /* Hero Section */
    .hero-content h1 {
        font-size: clamp(2rem, 6vw, 3.5rem); /* Anpassung der fluid font size */
    }

    .hero-content p {
        font-size: clamp(1rem, 4vw, 1.4rem); /* Anpassung der fluid font size */
    }

    /* Navigation: Anpassung des Paddings für kleinere Bildschirme */
    .nav-container {
        padding: 0 50px; /* Reduziertes Padding */
    }

    /* Footer: Von 4 Spalten auf 2 Spalten wechseln */
    .footer-grid {
        /* Auto-fit versucht, so viele Spalten wie möglich mit min. 180px Breite zu erstellen */
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* Tablet Hochformat + große Smartphones (bis 768px) */
@media (max-width: 768px) {
    /* Allgemeine Anpassungen */
    .custom-checkbox{
        font-size: 0.9rem; /* Kleinere Schriftgröße für Checkbox-Text */
    }

    /* Kontakt-Sektion */
    .contact-section {
        padding: 60px 0; /* Reduziertes Padding */
    }
    .contact-section h2 {
        font-size: 2rem; /* Kleinere Überschrift */
    }
    .contact-section p {
        font-size: 1.1rem; /* Kleinerer Absatztext */
    }
    .btn {
        width: 100%; /* Button nimmt volle Breite ein */
        text-align: center; /* Text zentrieren */
    }

    /* Hero Section: Hintergrundbild-Strategie für Mobile */
    .hero-section {
        background-image: none; /* Desktop-Hintergrundbild ausschalten */
        justify-content: center; /* Inhalt zentrieren */
        text-align: center; /* Text zentrieren */
        padding: 2rem; /* Innenabstand */
    }

    /* Mobiles Hintergrundbild mit Overlay */
    .hero-section::before {
        content: "";
        position: absolute;
        top: 0; left: 0;
        width: 100%;
        height: 100%;
        background-image: url('./../image/hero_image_mobile_cnc-scaled.jpeg'); /* Mobiles Hintergrundbild */
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        opacity: 0.3; /* Leichte Transparenz für Overlay-Effekt */
        z-index: -1; /* Liegt hinter dem Hero-Inhalt */
    }

    /* Navigation: Anpassungen für mobile Ansicht */
    .logo img {
        height: 65px; /* Kleineres Logo */
    }

    .nav-container {
        padding: 0 30px; /* Weiter reduziertes Padding */
    }

    /* Desktop-Navigation auf Mobilgeräten komplett ausblenden */
    .desktop-nav {
        display: none;
    }

    /* Hamburger-Icon auf Mobilgeräten sichtbar machen und positionieren */
    .hamburger {
        display: flex; /* Zeigt das Hamburger-Icon an */
        position: fixed; /* Fixiert es im Viewport */
        top: 34px;
        right: 30px;
        z-index: 9999; /* Höchster Z-Index, immer sichtbar */
    }

    /* Overlay-Menü (.nav-right) für die mobile Ansicht */
    .nav-right {
        position: fixed; /* Fixiert im Viewport */
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(23, 66, 144, 0.95); /* Dunkelblauer, halbdurchsichtiger Hintergrund */
        backdrop-filter: blur(5px); /* Hintergrundunschärfe */

        display: flex; /* Flexbox für Zentrierung des Inhalts */
        flex-direction: column; /* Elemente untereinander */
        justify-content: center; /* Vertikale Zentrierung */
        align-items: center; /* Horizontale Zentrierung */

        opacity: 0; /* Standardmäßig unsichtbar */
        pointer-events: none; /* Nicht interaktiv */
        transform: translateY(-100%); /* Nach oben aus dem Sichtfeld bewegen */
        /* Sanfter Übergang für Öffnen/Schließen */
        transition: transform 0.5s cubic-bezier(0.77, 0, 0.175, 1), opacity 0.5s ease;
        z-index: 999; /* Unter dem Hamburger-Icon, aber über dem Rest */
    }

    /* Zustand, wenn das mobile Menü geöffnet ist */
    .nav-right.open {
        opacity: 1; /* Sichtbar machen */
        pointer-events: auto; /* Interaktiv machen */
        transform: translateY(0); /* Ins Sichtfeld bewegen */
    }

    /* Navigationslinks im mobilen Overlay */
    .nav-right .nav-links {
        display: flex;
        flex-direction: column; /* Links untereinander */
        gap: 2rem; /* Größerer Abstand zwischen Links */
        text-align: center; /* Text zentrieren */
        padding-right: 0; /* Entfernt Padding */
        transform: translate(10px, 10px);
    }

    /* Einzelner Link im mobilen Overlay */
    .nav-right .nav-links a {
        display: inline-block;
        color: var(--white); /* Weiße Textfarbe */
        font-size: clamp(2rem, 5vw, 2.2rem); /* Fluid font size */
        font-family: var(--font-heading); /* Schriftart für Überschriften */
        font-weight: 700; /* Fette Schrift */
        opacity: 0.8; /* Leicht transparent */
        transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; /* Sanfter Übergang */
    }

    /* Hover/Aktiver Zustand für Links im mobilen Overlay */
    .nav-right .nav-links a:hover,
    .nav-right .nav-links a.active {
        color: var(--white); /* Bleibt weiß */
        opacity: 1; /* Vollständig sichtbar */
        transform: scale(1.1); /* Leicht vergrößert */
    }

    /* Unterstrich für aktive Links im mobilen Overlay ausblenden */
    .nav-right .nav-links a.active::after {
        display: none;
    }

    /* CTA-Button im mobilen Overlay */
    .nav-right .cta-button {
        display: block; /* Block-Element */
        margin-top: 2.5rem; /* Abstand nach oben */
        padding: 15px 60px; /* Innenabstand */
        font-size: 1rem; /* Schriftgröße */
        background: transparent; /* Transparenter Hintergrund */
        border: 2px solid var(--white); /* Weißer Rand */
    }

    .nav-right .cta-button:hover {
        background: var(--white); /* Weißer Hintergrund beim Hover */
        color: var(--primary-color); /* Primärfarbe für Text beim Hover */
    }

    /* Anpassung des CTA-Buttons in der Navbar (falls sichtbar) */
    .cta-button {
        margin-top: 10px; /* Abstand nach oben */
    }

    /* Timeline Optimierung für Mobile */
    #history-section-wrapper{
        height: auto; /* Höhe wird dynamisch angepasst */
    }

    .timeline-sticky-container {
        position: relative; /* Nicht mehr sticky */
        height: auto; /* Höhe dynamisch */
        padding: 40px 20px; /* Innenabstand */
    }

    .timeline-content-box {
        flex-direction: column; /* Spalten untereinander anordnen */
        gap: 0; /* Kein Abstand zwischen Spalten */
    }

    .timeline-column-left {
        flex-basis: auto; /* Breite dynamisch */
        width: 100%; /* Volle Breite */
        margin-bottom: 30px; /* Abstand nach unten */
        padding: 0; /* Kein Innenabstand */
    }

    .timeline-left-aligned {
        position: relative; /* Behält relative Position */
        padding: 0; /* Kein Innenabstand */
    }

    /* Horizontale Fortschrittsleiste für Mobile */
    .timeline-progress-bar {
        position: absolute; /* Absolut positioniert */
        top: 55%; /* Vertikal zentriert */
        left: 0;
        right: 0;
        width: 100%; /* Volle Breite */
        height: 7px; /* Geringere Höhe */
        background: #ddd; /* Hintergrundfarbe */
        transform: translateY(-50%); /* Vertikal zentrieren */
        margin: 0 auto; /* Horizontal zentrieren */
        border-radius: var(--border-radius-lg); /* Abgerundete Ecken */
    }

    .timeline-progress-fill {
        width: 0; /* Startet bei 0 Breite */
        height: 100%; /* Volle Höhe der Leiste */
        background: var(--primary-color); /* Füllfarbe */
        transition: width var(--transition-speed) ease; /* Sanfter Übergang der Breite */
        border-radius: var(--border-radius-lg); /* Abgerundete Ecken */
    }

    /* Container für Timeline-Icons auf Mobile (horizontal) */
    #timeline-items-container {
        display: flex; /* Flexbox für horizontale Anordnung */
        justify-content: space-between; /* Gleichmäßiger Abstand */
        align-items: center; /* Vertikale Zentrierung */
        position: relative;
        z-index: 2; /* Über der Fortschrittsleiste */
        /* padding: 0 10px; */ /* Innenabstand */
    }

    .timeline-item {
        /* flex: 1; */ /* Nimmt gleichen Platz ein */
        max-width: 25%; /* Max. 4 Elemente pro Reihe */
        text-align: center; /* Text zentrieren */
        position: relative;
        margin: 0; /* Entfernt Standard-Margin */
        padding-top: 10px; /* Abstand nach oben */
    }

    /* Timeline-Icon auf Mobile */
    .timeline-icon {
        display: inline-flex; /* Inline-Flex für Zentrierung */
        justify-content: center;
        align-items: center;
        width: 40px; /* Kleinere Größe */
        height: 40px; /* Kleinere Größe */
        background: white;
        border: 3px solid #ccc; /* Dünnerer Rand */
        border-radius: 50%;
        margin: 0 auto; /* Horizontal zentrieren */
        z-index: 2;
        position: relative; /* Relative Positionierung */
        left:0; /* Setzt linke Position zurück */
    }

    .timeline-item.active .timeline-icon {
        border-color: var(--primary-color); /* Randfarbe zur Primärfarbe */
        transform: scale(1.2); /* Leicht vergrößert */
    }

    /* Jahreszahlen auf Mobile ausblenden */
    .timeline-item h4 {
        display: none ; /* Wichtig, um andere Regeln zu überschreiben */
    }

    /* Rechte Spalte (Textinhalt) auf Mobile */
    .timeline-column-right {
        width: 100%; /* Volle Breite */
        height: auto; /* Höhe dynamisch */
        padding: 0; /* Kein Innenabstand */
    }

    /* Textinhalt auf Mobile (nicht mehr absolut positioniert) */
    .timeline-text-content {
        position: relative; /* Relative Positionierung */
        display: none; /* Standardmäßig ausgeblendet (JS steuert Sichtbarkeit) */
        opacity: 1 !important; /* Wichtig: Immer sichtbar, wenn JS es anzeigt */
        visibility: visible !important; /* Wichtig: Immer sichtbar, wenn JS es anzeigt */
        padding: 20px 0; /* Innenabstand */
        min-height: 480px;
    }

    /* Sichtbarer Textinhalt auf Mobile */
    .timeline-text-content.visible {
        display: block; /* Als Block-Element anzeigen */
    }

    /* Überschrift des Textinhalts auf Mobile */
    .timeline-text-content h3 {
        font-size: 1.4rem; /* Kleinere Schriftgröße */
        margin-bottom: 15px; /* Abstand nach unten */
    }

    /* Absatztext des Textinhalts auf Mobile */
    .timeline-text-content p {
        font-size: 1rem; /* Kleinere Schriftgröße */
        line-height: 1.6; /* Zeilenhöhe */
    }

    /* Footer: Alle Spalten untereinander */
    .footer-grid {
        grid-template-columns: 1fr; /* Eine Spalte */
    }

    .rechtstext {
        padding: 1.5rem 2rem; /* Weniger padding links/rechts für kleine Bildschirme */
        margin: 1rem 0;
        border-left-width: 3px; /* Dünnerer Rand auf kleinen Screens */
    }

    /* Optional Schriftgrößen anpassen, falls gewünscht */
    .rechtstext h1 {
        font-size: calc(var(--font-size-xl) * 0.9);
    }

    .rechtstext h2 {
        font-size: calc(var(--font-size-xl) * 0.7);
    }

    .rechtstext h3 {
        font-size: calc(var(--font-size-xl) * 0.55);
    }

    /* Absätze etwas kompakter */
    .rechtstext p {
        margin: 0.8rem 0;
    }
}

/* Kleine Smartphones (bis 510px) */
@media (max-width: 510px) {
    /* Kontakt-Sektion */
    .contact-section {
        padding: 40px 0; /* Weiter reduziertes Padding */
    }
    form .form-group {
        margin-bottom: 15px; /* Reduzierter Abstand */
    }

    /* Hero Section */
    .hero-content h1 {
        font-size: clamp(1.5rem, 8vw, 2rem); /* Weiter reduzierte Fluid Font Size */
    }

    .cta-button-hero {
        padding: 14px 20px; /* Kleinerer Padding */
        font-size: 1rem; /* Kleinere Schriftgröße */
        width: 100%; /* Volle Breite */
    }

    /* Timeline Icons */
    .timeline-icon {
        width: 50px; /* Etwas größere Icons für bessere Tippbarkeit */
        height: 50px;
    }

    .timeline-progress-bar {
        width: 100%; /* Volle Breite */
    }

    /* Timeline Textinhalt */
    .timeline-text-content h3 {
        font-size: 1.2rem; /* Kleinere Überschrift */
    }

    .wpcf7-acceptance input[type="checkbox"] {
        transform: translatey(4.5px);
    }

    .wpcf7-acceptance .wpcf7-list-item label {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        line-height: 1.5;
    }

    .wpcf7-list-item-label {
        font-size: 1rem;
        line-height: 1.4;
        transform: translateY(7px);
    }
}

/* -------------------------------------
   Keyframes
   Definitionen für CSS-Animationen.
-------------------------------------- */

/* Animation für den Hamburger-Orbiter */
@keyframes orbit {
    0% {
        opacity: 1; /* Startet sichtbar */
        /* Bewegt sich in einem Kreis um den Mittelpunkt */
        transform: translate(-50%, -50%) rotate(0deg) translateY(-20px) rotate(0deg);
    }
    100% {
        opacity: 0; /* Endet unsichtbar */
        /* Vollständige Rotation und Bewegung */
        transform: translate(-50%, -50%) rotate(360deg) translateY(-20px) rotate(-360deg);
    }
}

/* Pulsierende Leuchteffekt-Animation für Buttons */
@keyframes pulse-glow {
    0% {
        /* Startet ohne Schatten */
        box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0.7);
    }
    70% {
        /* Schatten breitet sich aus und wird transparent */
        box-shadow: 0 0 0 20px rgba(var(--primary-color-rgb), 0);
    }
    100% {
        /* Schatten ist wieder weg, bereit für den nächsten Zyklus */
        box-shadow: 0 0 0 0 rgba(var(--primary-color-rgb), 0);
    }
}