/* =============================
   Wiechmann-IT — main.css
   Darktrace-inspirierter Look: dunkles Navy, Neon-Cyan/Violett
   Kantige Tonalität, dezente Cyber-Pattern-Ästhetik
   ============================= */

   :root {
    /* Farben */
    --bg: #0b0f16;            /* sehr dunkles Navy */
    --bg-2: #0f1420;          /* leicht heller */
    --text: #e6eefc;          /* helles Grau-Blau */
    --muted: #a9b4c9;         /* gedämpft */
    --primary: #4cc3ff;       /* Neon-Cyan */
    --secondary: #7a5cff;     /* Neon-Violett */
    --accent: #ff3b3b;        /* Rot-Akzent (Stier) — sparsam! */
    --border: #1c2333;        /* Randfarbe */
    --card: #111725cc;        /* Glas-Effekt */
    --shadow: 0 8px 30px rgba(0,0,0,.35);
  
    /* Radius & Spacing */
    --radius: 14px;
    --space: clamp(16px, 2vw, 28px);
  
    /* Typo */
    --font-sans: ui-sans-serif, Inter, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans";
  }
  
  /* ===== Reset & Base ===== */
  * { box-sizing: border-box; }
  html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); }
  img { max-width: 100%; height: auto; display: block; }
  a { color: var(--primary); text-decoration: none; }
  a:hover { color: var(--secondary); }
  
  /*body {
    /* WICHTIG: Der Hauptinhalt muss unterhalb des FIXED Headers beginnen */
  /*  padding-top: 200px; /* Muss der Höhe von #page-header entsprechen! */
  /*}
  /* ===== Header & Nav ===== */
  .site-header {
    position: sticky; top: 0; z-index: 1000;
    align-items: center;
    display: flex; align-items: center; justify-content: space-between;
    padding: calc(var(--space) * 0.8) var(--space);
    background: linear-gradient(180deg, rgba(10,14,22,.85), rgba(10,14,22,.55));
    backdrop-filter: saturate(130%) blur(12px);
    border-bottom: 1px solid var(--border);
    max-height: 20%;
  }
  .brand { display: flex; align-items: center; gap: 12px; }
  
.brand-logo {
  width: 250px !important; /* oder mehr */
  height: auto;
  max-width: none;
  flex-shrink: 0;
  display: block;
}

  .brand-name { font-weight: 600; letter-spacing: .4px; color: var(--muted); }
  
  .site-nav ul { display: flex; gap: 20px; list-style: none; margin: 0; padding: 0; }
  .site-nav a { padding: 10px 14px; border-radius: 10px; }
  .site-nav a:hover { background: #0e1524; }
  .site-nav .cta { border: 1px solid #23304a; background: #0e1524; color: var(--text); }
  .nav-toggle { display: none; }
  
  /* ===== Hero ===== */
  .hero {
    position: relative; overflow: hidden;
    padding: 0 var(--space) calc(var(--space) * 2.5);
    margin-top: 40px;
    background:
      radial-gradient(1000px 420px at 10% -20%, rgba(122,92,255,.15), transparent),
      radial-gradient(820px 380px at 90% 10%, rgba(76,195,255,.12), transparent),
      var(--bg);
  }

/* === Desktop Area === */

 .hero-main-wrapper {
    display: flex;
    align-items: center; /* Vertikale Zentrierung */
    max-width: 1200px;
    margin: 0 auto;
    gap: 40px; /* Abstand zwischen Logo und Text */
  }
 
 .hero-logo-container {
    flex-basis: 20%;
    flex-shrink: 0; /* Verhindert, dass das Logo schrumpft */
    padding-top: 0.0em;
  }

  .hero-logo {
    margin-top: 0;
    height: auto;
    object-fit: contain;
    max-width: 300px;
  }

.hero-content {
   flex-basis: 80%;
    text-align: left; /* WICHTIG: Stellt sicher, dass der Text linksbündig ist */
    padding-top: 3.15em;
  }

/* Responsive area:
/* In styles/main.css hinzufügen */

@media (max-width: 768px) {

    .hero-main-wrapper {
        /* WICHTIG: Ändert die Anordnung von 'Reihe' auf 'Spalte' */
        flex-direction: column;
        gap: 20px; /* Reduziert den Abstand für schmale Bildschirme */
        text-align: center; /* Zentriert den Text im Wrapper */
    }

    .hero-logo-container {
        /* Setzt die Basisbreite zurück, damit es nicht nur 20% der Spaltenbreite nutzt */
        flex-basis: auto;
        width: 100%;
        
    }

    .hero-logo {
        /* Setzt das Logo auf eine vernünftige Größe auf Mobile */
        max-width: 150px;
        margin: 0 auto; /* Zentriert das Logo in der Spalte */
    }

    .hero-content {
        text-align: left;
        padding: 0 10px; /* Etwas horizontaler Abstand */
    }
}
  .hero h1 { font-size: clamp(32px, 4.8vw, 58px); margin: 0 0 .35em; }
  .lead { font-size: clamp(16px, 2.2vw, 20px); max-width: 900px; color: var(--muted); }
  .hero-actions { display: flex; gap: 14px; margin-top: 18px; }
  
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 18px; border-radius: 12px; border: 1px solid #23304a;
  }
  .btn.primary {
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    color: #00111a; font-weight: 600; box-shadow: 0 0 24px rgba(178, 217, 51, 0.25);
  }
  .btn.ghost { background: transparent; color: var(--text); }
  .btn.primary:hover { filter: brightness(1.08); }
  .btn.ghost:hover { border-color: var(--secondary); }
  
  /* Cyber-Pattern Lines */
  .hero-bg::before, .hero-bg::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      linear-gradient(90deg, rgba(76,195,255,.12) 1px, transparent 1px) repeat-x,
      linear-gradient(0deg, rgba(122,92,255,.10) 1px, transparent 1px) repeat-y;
    background-size: 160px 160px, 140px 140px;
    mask-image: radial-gradient(620px 300px at 70% 35%, black, transparent 70%);
    opacity: .25;
  }
  
  /* ===== Services Cards ===== */
  .services { padding: calc(var(--space) * 2) var(--space); }
  .services h2 { text-align: center; margin-bottom: 1.1em; }
  
  .cards {
    display: grid; gap: var(--space);
    grid-template-columns: repeat(2, minmax(0, 1fr));
    max-width: 1200px; margin: 0 auto;
    
  }

/* neuer Teil zum test von privat.php */

/* --- 1. Grund-Setup für die Expansion --- */

/* Die Card MUSS eine explizite Höhe haben, damit das Detailpanel die gleiche Höhe annehmen kann */
.cards .card {
    min-height: 380px; /* PASST DIESEN WERT AN die tatsächliche Höhe der größten Card an */
    /* Füge hier ggf. weitere Basis-Styles für die Cards hinzu */
}

/* --- 2. Styling für das Detail-Panel (Standardmäßig versteckt & Bottom Alignment) --- */
.card-details {
    background: var(--bg-2);
    border: 1px solid var(--primary);
    border-radius: var(--radius);
    padding: var(--space);
    
    /* Grid Position */
    grid-column: 2 / 3; /* Positioniert das Detail-Panel in der zweiten Spalte */
    
    /* Verstecken: Muss initial auf 'none' stehen */
    display: none; 

    /* Flexbox für Bottom Alignment */
    flex-direction: column; 
    
    /* Animation */
    opacity: 0;
    transition: opacity 300ms ease, transform 300ms ease;
    transform: translateY(10px);
    
    /* NEU: WICHTIG – Muss die Höhe der Card annehmen */
    align-self: start; 
    height: 100%; /* Nimmt die Höhe des .card-Containers an (da sie Geschwister sind) */
}

/* --- 3. Flexbox Wrapper für Bottom Alignment --- */

/* Dieser Wrapper füllt den gesamten verfügbaren vertikalen Platz aus */
.card-details .detail-content-wrapper {
    flex-grow: 1; 
    margin-bottom: var(--space); /* Abstand zwischen Text und Button */
}

/* Der Button selbst */
.card-details .order-button { 
    margin-top: auto; /* NEU: Das sorgt für die Ausrichtung am unteren Rand */
}


/* --- 4. Die Expansions-Logik (Grid-Anpassung) --- */

/* Das 'a'-Tag (interactive-card-link) muss die erste Spalte belegen */
.cards .interactive-card-link.is-expanded {
    grid-column: 1 / 2; 
}

/* Wenn das Detailpanel durch JS geöffnet wird (display: flex) */
.card-details[style*="display: flex"] {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile-Ansicht (unter 640px) */
@media (max-width: 640px) {
    .card-details {
        grid-column: 1 / -1; /* Geht über die volle Breite */
        height: auto; /* Höhe muss auf Mobile flexibel sein */
    }
}

/* Ende der Testseqenz */


/* Preis unten auf der Card (z.B. "ab 259€") */
.card-price {
    font-size: 1.35rem; /* Etwas größer als normaler Text */
    font-weight: 700;   /* Stark fetter Preis */
    color: var(--primary); /* Neon-Cyan zur Hervorhebung */
    margin-top: 15px;      /* Abstand nach oben */
    text-align: right;     /* Preis rechtsbündig */
    padding-top: 10px;
    border-top: 1px solid var(--border); /* Trennlinie zum Body */
}

/* =======================================
   Detailpanel Preisgestaltung (h4 im Detail)
   ======================================= */

/* Überschrift für Zeit und Preis im Detailpanel (z.B. "Zeitaufwand ca. 2h zum Festpreis") */
.card-price-detailed {
    font-style: italic;
    font-weight: 500; /* Mittlerer Wert */
    font-size: 1.1rem;
    color: var(--primary); /* Neon-Violett für die Hervorhebung */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--border); /* Dezente Trennung */
}


  .card {
    background: linear-gradient(180deg, rgba(17,23,37,.7), rgba(17,23,37,.45));
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: calc(var(--space) * 0.9);
    box-shadow: var(--shadow);
    position: relative;
  }
  .card::after {
    content: ""; position: absolute; inset: -1px; border-radius: var(--radius);
    background: linear-gradient(135deg, rgba(76,195,255,.5), rgba(122,92,255,.5));
    filter: blur(12px); opacity: .15; pointer-events: none;
  }
  .card h3 { margin: 0 0 8px; }
  .card p, .card ul { color: var(--muted); }
  .card ul { padding-left: 1em; }
  .card a.card-link { display: inline-block; margin-top: 12px; }
  

/* =============================
   Services Cards – Interactions & Animations
   Ergänzung: Hover/Focus, Gestaffeltes Einblenden, Motion-Safety
   ============================= */

/* Basis: .cards und .card sind bereits vorhanden (Layout/Look).
   Wir erweitern die Interaktions- und Animations-Properties. */

/* --- Startzustand für "gestaffeltes Einblenden" --- */
.cards .card {
  /* sanfter Eintritt aus leichter Tiefe */
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  will-change: opacity, transform, box-shadow, background;
  /* Die eigentliche Transition passiert über Keyframes (siehe unten).
     Hover-Transition ergänzen wir separat. */
}

/* --- Keyframes: von unten leicht rein, sanft auf 1:1 --- */
@keyframes cardFadeInUp {
  0% {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    filter: saturate(95%);
  }
  60% {
    opacity: 1;
    transform: translateY(0) scale(1.02);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: saturate(100%);
  }
}

/* --- Animation anwenden, mit gestaffelten Delays pro Card --- */
/* Vergib in deinem HTML zusätzliche Klassen .card1, .card2, .card3, .card4 */
.cards .card {
  animation: cardFadeInUp 520ms cubic-bezier(.2,.8,.2,1) both;
  /* "both" hält den Endzustand (opacity:1, transform:none) */
}

/* Stagger: feine Abstufungen (passe gern an) */
.cards .card.card1 { animation-delay: 0.2s; }
.cards .card.card2 { animation-delay: 0.4s; }
.cards .card.card3 { animation-delay: 0.6s; }
.cards .card.card4 { animation-delay: 0.8s; }
.cards .card.card5 { animation-delay: 1.0s; }
.cards .card.card6 { animation-delay: 1.2s; }

/* --- Hover & Focus (Premium-Effekt) --- */
.cards .card {
  /* Basis-Transition für Hover/Fokus */
  transition:
    transform 260ms cubic-bezier(.2,.8,.2,1),
    box-shadow 260ms cubic-bezier(.2,.8,.2,1),
    background 260ms ease,
    outline-color 140ms ease;
  transform-origin: center center;
  position: relative;
  z-index: 0;
}

/* Ganze Card als interaktive Fläche: Hover/Focus-Visible */
.cards .card:hover,
.cards .card:focus-within {
  /* leichter Farbverlauf im Sinne deines Brandings */
  background-image: linear-gradient(
    to top right,
    rgba(17,23,37,0.85),
    rgba(122,92,255,0.35)
  );
  transform: scale(1.5); /* sanftes Scale – vermeidet Layoutsprünge */
  z-index: 2;
  box-shadow:
    0 12px 28px rgba(122, 92, 255, 0.25),
    var(--shadow);
  outline: 3px solid rgba(122, 92, 255, 0.35); /* sichtbarer Fokus-Ring */
  outline-offset: 2px;
}

/* Subtiler "Tech Glow" Rand – ergänzt dein existierendes ::after-Glühen */
.cards .card::before {
  content: "";
  position: absolute; inset: -3px;
  border-radius: var(--radius);
  pointer-events: none;
  background: linear-gradient(135deg,
    rgba(76,195,255,.18),
    rgba(122,92,255,.14)
  );
  filter: blur(10px);
  opacity: 0;
  transition: opacity 220ms ease;
}
.cards .card:hover::before,
.cards .card:focus-within::before {
  opacity: 1;
}

/* Titel & Text minimal verfeinern */
.cards .card h3 {
  margin: 0 0 8px;
  color: var(--text);
}

/* Card-Body-Block: eigener Innenabstand */
.cards .card .card-body {  
  padding-top: 1.25rem;        /* Abstand zwischen Bild und Überschrift */  
  padding-right: calc(var(--space) * 0.9);  
  padding-bottom: calc(var(--space) * 0.9);  
  padding-left: calc(var(--space) * 0.9);
}
.cards .card .card-body h3 {
  margin-top: 1rem; /* vergrößert den Abstand zum Bild */
  margin-bottom: 8px; /* wie gehabt für Abstand zum Text */
}

.cards .card p,
.cards .card ul {
  color: var(--muted);
}

.cards .card ul li {  
  margin-bottom: 0.5rem; /* Abstand zwischen den Punkten */  
  line-height: 1.4;      /* zusätzlich etwas mehr Zeilenhöhe */
}
/* --- Motion-Safety: Nutzer mit reduzierter Bewegung --- */
@media (prefers-reduced-motion: reduce) {
  .cards .card {
    animation: none;
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cards .card:hover,
  .cards .card:focus-within {
    transform: none;
    box-shadow: var(--shadow);
    outline: 2px solid rgba(122,92,255,0.30);
  }
}

/* --- Responsive Feinschliff (optional, ergänzt deine vorhandenen Regeln) --- */
@media (max-width: 980px) {
  .cards .card { padding: calc(var(--space) * 0.8); }
}
@media (max-width: 640px) {
  .cards .card { padding: calc(var(--space) * 0.75); }
}


.cards .card .card-head {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.cards .card .card-icon {
  width: 36px;         /* oder 32px – Hauptsache sichtbar */
  height: 36px;
  display: inline-block;
  color: var(--primary);
  filter: drop-shadow(0 0 8px rgba(76,195,255,.25));
}

.cards .card:hover .card-icon,
.cards .card:focus-within .card-icon {
  transform: scale(1.08);
  filter: drop-shadow(0 0 12px rgba(76,195,255,.35));
}


  /* ===== About & Contact ===== */
  .about, .contact { padding: calc(var(--space) * 2) var(--space); }
  .about, .contact { max-width: 1200px; margin: 0 auto; }
  
  .contact-form { display: grid; gap: 14px; }
  .contact-form input, .contact-form textarea {
    width: 100%; padding: 12px 14px; background: #0e1524; color: var(--text);
    border: 1px solid #213049; border-radius: 10px;
  }
  .contact-form input:focus, .contact-form textarea:focus {
    outline: none; border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(76,195,255,.15);
  }
  
  /* ===== Footer ===== */
  .site-footer {
    padding: var(--space);
    border-top: 1px solid var(--border);
    text-align: center; color: var(--muted);
    background: #0b0f16;
  }
  
  /* ===== Responsive ===== */
  @media (max-width: 980px) {
    .cards { grid-template-columns: 1fr 1fr; }
  }
  @media (max-width: 640px) {
    .brand-logo { width: 140px; }
    .site-nav ul { display: none; }
    .nav-toggle { display: inline-flex; }
    .cards { grid-template-columns: 1fr; }
  }
  

/* Grundlayout */
.about {
  padding: clamp(1.5rem, 2vw, 3rem) 0;
}

.about h2 {
  margin-bottom: clamp(0.75rem, 1.5vw, 1rem);
}

/* Zwei-Spalten-Layout: Text links, Bild rechts */
.about__grid {
  display: flex;
  align-items: flex-start;
  gap: clamp(1rem, 2vw, 2rem);
  /* verhindert, dass Inhalt zu breit läuft */
  max-width: 1100px;
}

/* Reihenfolge: Text zuerst, Bild danach (rechts) */
.about__text {
  flex: 1 1 56%;
  min-width: 280px;
}

.about__media {
  flex: 1 1 44%;
  min-width: 260px;
  margin: 1; /* für figure */
}

/* Bildstil */
.about__media img {
  display: block;
  width: 100%;
  height: auto;            /* bewahrt Verhältnis mit width/height-Attributen */
  border-radius: 12px;
  object-fit: cover;       /* falls der Bildausschnitt enger ist */
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

/* Typografie Feinschliff */
.about__text p {
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.6;
  margin: 1rem;
  text-align: justify;
}

.traffic-price {
  font-weight: 500; /* Mittlerer Wert */
  font-size: 1.35rem;
  color: var(--primary); /* Neon-Violett für die Hervorhebung */
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--border); /* Dezente Trennung */
}

/* Mobil: Stack, Bild oben */
@media (max-width: 767px) {
  .about__grid {
    flex-direction: column;
    align-items: stretch;
  }
  .about__media,
  .about__text {
    flex: 1 1 auto;
    min-width: 0;
  }
  .about__media img {
    border-radius: 10px;
  }
}

/* Großbildschirme: limitierte Medienbreite für Balance */
@media (min-width: 1200px) {
  .about__media {
    max-width: 520px; /* Zielgröße fürs Bild auf großen Screens */
  }
}


.about__reasons {
  list-style: none; /* entfernt Standardpunkte */
  padding: 0;
  margin-top: 1rem;
  font-size: clamp(0.95rem, 1vw, 1.05rem);
  line-height: 1.5;
}

.about__reasons li {
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

.about__reasons li::before {
  content: "✔"; /* Icon für Vertrauen */
  position: absolute;
  left: 0;
  color: #9b59b6; /* Akzentfarbe (Violett passend zu deinem Branding) */
  font-weight: bold;
}


/* Grundlayout für das Formular */
.contact-form {
  max-width: 750px; /* passt sich der Seitenstruktur an */
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

/* Eingabefelder */
.contact-form input,
.contact-form textarea,
.contact-form button {
  width: 100%;
  padding: 0.75rem;
  border-radius: 6px;
  border: 1px solid #333;
  background-color: #111827;
  color: #ffffff;
  font-size: 1rem;
}

/* Telefonfelder nebeneinander */
.phone-group {
  display: flex;
  gap: 0.5rem;
}

.phone-group input {
  flex: 1;
}

/* Radio-Buttons in einer Reihe */

.customer-type {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  text-align: left;
  align-items: center;
  border: 1px solid #7a5cff; /* statt nur border-color */
  padding: 1.5rem;
  border-radius: 8px;  
  box-sizing: border-box; /* verhindert Überlauf */  
  max-width: 100%;
  width: 750px;
  margin: 0 auto;
  justify-content: center; /* verteilt die Labels gleichmäßig */
}


.contact-form h2 {
  font-size: clamp(1.5rem, 2vw, 2rem);
  color: #fff;
  margin-bottom: 1rem;
  text-align: center;
  font-weight: 750px;
}


.customer-type legend {
  flex-basis: 100%;
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.customer-type label {
  display: flex;
  align-items: center;
  cursor: pointer;
  margin-right: 10px;
  gap: 0.1rem;
  font-size: 1rem;
}

.customer-type input[type="radio"] {
margin: 0 10px 0 0;
accent-color: #7a5cff;
width: 1.2rem;
height: 1.2rem;
flex-shrink: 0;
}

/* ===== Responsive Radio Buttons ===== */
@media (max-width: 1000px) {
/* Zwingt jedes Label (also jede Option) dazu, eine eigene Zeile einzunehmen */
  .customer-type label {
    display: block; 
    width: 100%;
    margin-bottom: 12px; /* Fügt vertikalen Abstand zwischen den Optionen hinzu */
    padding: 8px 0;      /* Optional: Fügt etwas vertikalen Padding hinzu */
    /* Entfernt eventuell vorhandene horizontale Abstände, die das Layout sprengen könnten */
    margin-right: 0;
  }
}

/* Container für Checkbox und Text */
.checkbox-container {
  /* Falls dein Formular ein Grid ist (sieht auf den Bildern so aus), 
     sorgt das hier dafür, dass die Box über die volle Breite geht */
  grid-column: 1 / -1; 
  
  display: flex;
  align-items: center;        /* Zentriert Checkbox und Text vertikal */
  justify-content: flex-start; /* WICHTIG: Zwingt alles nach links zusammen! */
  gap: 0.8rem;                /* Abstand zwischen Box und Text */
  
  margin-top: 1rem;           /* Etwas Abstand zum Nachrichten-Feld */
  margin-bottom: 1rem;        /* Abstand zum Senden-Button */
}

/* Die Checkbox selbst */
.checkbox-container input[type="checkbox"] {
  margin: 0;
  width: 1.2rem;   /* Größe anpassen, damit es gut klickbar ist */
  height: 1.2rem;
  accent-color: #7a5cff; /* Dein Lila */
  cursor: pointer;
}

/* Der Text "Ich akzeptiere..." */
.checkbox-container label {
  margin: 0;
  font-size: 0.9rem;
  color: #fff;
  cursor: pointer;
  line-height: 1.4; /* Bessere Lesbarkeit bei Umbruch */
}

/* Der Link "Datenschutzerklärung" */
.checkbox-container a {
  color: #7a5cff; /* Passend zum CI (oder #4da3ff für Blau) */
  text-decoration: underline;
  transition: color 0.3s ease;
}

.checkbox-container a:hover {
  color: #fff; /* Hover-Effekt */
}

/* Container Development.html */
.development-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 80px 20px;
  text-align: center;
  min-height: 70vh; /* Sorgt dafür, dass der Footer unten bleibt */
}
.development-container h1 {
  color: var(--primary); /* Nutzt die CSS-Variable aus main.css */
}
.centered-image {
  max-width: 600px;
  height: auto;
  margin: 40px auto;
  opacity: 0.8;
}

/* ===== Menue ===== */

/* --- 1. Header-Container (Hält die ganze Höhe, transparent) --- */
#page-header {
  width: 100%;
  position: fixed; 
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: rgba(0, 0, 0, 0.5);
  display: block; /* WICHTIG: Erlaubt #main-nav, 100% Höhe zu beanspruchen */
  height: 40px;
  color: white; 
  transition: height 0.3s ease, background-color 0.3s ease; /* Füge Transition für Schrumpfen hinzu */
}

/* --- 2. Navigationsleiste (Der Flex-Container, der zentriert) --- */
#main-nav {
  display: flex;
  justify-content: flex-end; 
  align-items: center; /* ZENTRIERT die Logo-Area und die Nav-Liste vertikal */
  padding: 0 20px; 
  height: 100%; /* WICHTIG: Nimmt die vollen 200px des #page-header an */
  transition: all 0.3s ease; 
}

/* --- 3. Logo- und Zertifizierungs-Bereich --- */
.logo-area {
  /* Wenn Logo/Zertifikate nebeneinander sein sollen (wie gewünscht) */
  display: flex;
  flex-direction: row; 
  align-items: center; /* Zertifikate zentriert zum Logo, wenn sie fehlen, ist das Logo der Fokus */
  /* WICHTIG: Wenn das Logo und der Untertitel übereinander sind, muss das HTML dies in einem Wrapper-Div regeln */
}

/* --- 4. Hauptmenü-Listen --- */
.nav-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex; /* Menüpunkte horizontal anordnen */
}

/* --- Desktop Ausrichtungskorrektur (ab 641px) --- */
@media (min-width: 641px) {
  /* Setze einen maximalen Container für die Nav-Bar, passend zum Hero-Content (max-width: 1100px) */
  #main-nav {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto; /* Zentriert den Nav-Container auf der Seite */
    padding: 0 20px; /* Behält den Abstand links/rechts bei */
    /* Auf Desktop: wir wollen die Menüpunkte RECHTS innerhalb des 1100px Containers */
    justify-content: flex-end; 
  }
  
  /* Die Menü-Liste selbst muss den gesamten freien Platz links einnehmen */
  .nav-list {
      display: flex !important; /* WICHTIG: Überschreibt das display: none von Mobile */
      list-style: none;
      padding: 0;
      margin-left: auto; /* <--- DAS IST DIE LÖSUNG! Schiebt die Liste nach rechts */
      margin-right: 0;
  }
}

.nav-item {
  position: relative; 
  margin-left: 30px;
}

/* Fix für den unsichtbaren 'Start'-Link */
.nav-list .nav-item:first-child {
  margin-left: 30px; /* Entferne die aggressiven 50px, 30px sollte reichen */
}
.nav-item a {
  text-decoration: none;
  color: white;
  display: block;
  padding: 10px 0;
  white-space: nowrap; /* Verhindert Zeilenumbruch bei Menüpunkten */
}

/* --- 3. Submenüs (Dropdowns) --- */
.submenu {
  position: absolute;
  top: 100%; 
  left: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: rgba(0, 0, 0, 0.8); /* Machen den BG etwas dunkler für bessere Lesbarkeit */
  min-width: 220px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
  
  /* WICHTIG: Muss display: none sein, um Klicks auf die Links HINTER dem Submenü zu verhindern! */
  display: none; 
  opacity: 0;
  transition: opacity 0.3s ease;
}

.submenu li a {
  padding: 10px 15px;
  color: white;
}

.submenu li:hover {
  background-color: #555;
}

/* Submenü beim Hover anzeigen */
.nav-item.has-submenu:hover > .submenu {
  display: block; 
  opacity: 1;
}

/* Styling für den geschrumpften Header */
#page-header.scrolled #main-nav {
  height: 50px; /* Kleinere Höhe */
  padding: 5px 20px;
}

#page-header.scrolled .logo-area .logo-link {
  font-size: 1.5em; /* Kleineres Logo */
}

#page-header.scrolled .nav-item a {
  padding: 5px 0; /* Kleinere Abstände */
}

/* Optional: Hauptinhalt beim Scrollen hochziehen */
/* body.scrolled {
  padding-top: 50px; 
} */

/* ================================= */
/* === Table configuration === */
/* =======================================
   Tabellen-Styling (z.B. für Anfahrtskosten)
   ======================================= */

   .table-primary {
    /* Basis Container (Rahmen und Hintergrund) */
    width: 100%;
    margin: 25px 0;
    padding: var(--space); /* Innenabstand wie bei den Cards */
    border: 1px solid var(--border); /* Subtiler Rahmen */
    background-color: var(--card); /* Hintergrundfarbe der Cards */
    border-radius: var(--radius);
    box-shadow: var(--shadow); /* Leichte Schattierung */
    overflow-x: auto; /* Sorgt für Responsiveness */
}

.table-primary table {
    width: 100%;
    border-collapse: collapse; /* Entfernt doppelte Linien */
    color: var(--text);
}

.table-primary thead {
    border-bottom: 2px solid var(--primary); /* Neon-Cyan Linie unter dem Header */
}

.table-primary th {
    padding: 12px 10px;
    text-align: left;
    color: var(--primary); /* Neon-Cyan für die Überschriften */
    font-weight: 700;
    white-space: nowrap;
}

.table-primary td {
    padding: 10px;
    border-bottom: 1px solid var(--border); /* Dezente Trennlinie zwischen den Zeilen */
}

.table-primary tbody tr:last-child td {
    border-bottom: none; /* Keine Linie bei der letzten Zeile */
}

/* Preis-Spalte mit Akzentfarbe hervorheben */
.table-primary tbody tr td:last-child {
    font-weight: 600;
    color: var(--secondary); /* Neon-Violett für die Preise */
    text-align: right;
    white-space: nowrap;
}

/* Individuelles Angebot (letzte Zeile) nicht farblich hervorheben */
.table-primary tbody tr:last-child td:last-child {
    color: var(--text); 
}

/* =======================================
   Temporäres Buchungs-Modal (Pop-up)
   ======================================= */

   .modal {
    display: none; /* Wichtig: Standardmäßig unsichtbar */
    position: fixed;
    z-index: 1000; /* Muss über allem anderen liegen */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.95); /* Stark dunkler Hintergrund-Overlay */
    backdrop-filter: blur(5px); /* Optionaler Blur-Effekt */
    justify-content: center;
    align-items: center;
}

.modal-content {
    background-color: var(--card);
    margin: 5% auto; /* Zentrierung */
    padding: var(--space);
    border: 1px solid var(--primary); /* Neon-Rand */
    border-radius: var(--radius);
    max-width: 550px;
    position: relative;
    box-shadow: var(--shadow);
    color: var(--text);
    text-align: center;
    animation: fadeIn 0.4s ease-out; /* Kurze Animation beim Öffnen */
}

/* Bild-Styling */
.modal-image-wrapper {
    max-width: 150px; 
    margin: 15px auto;
}

.modal-image {
    width: 100%;
    height: auto;
    /* Optional: Fügt einen leichten Neon-Effekt um das Bild hinzu */
    filter: drop-shadow(0 0 5px rgba(76, 195, 255, 0.5)); 
}

/* Schließen-Button */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: var(--primary);
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    background: none;
    border: none;
    transition: color 0.3s;
}

.close-button:hover,
.close-button:focus {
    color: var(--accent); /* Rot-Akzent beim Hover */
}

/* Aktionen (Buttons) */
.modal-actions {
    margin-top: 20px;
}

.modal-button {
    display: inline-block;
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1.1em;
}

/* Optional: Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-20px); }
    to { opacity: 1; transform: translateY(0); }
}