/* ==========================================================================
   nav.css – Stile für die fixierte Header-Navigation
   Struktur:
     #nav
     ├── .nav-left        Logo-Spalte (volle Header-Höhe)
     └── .nav-right       Rechter Bereich, 2-zeilig
         ├── .nav-row-top    Zeile 1: Utility-Links + Hamburger
         └── .nav-row-bottom Zeile 2: Hauptnavigation (Desktop)

   .nav-links              Haupt-Menü-Liste (Desktop: fixed; Mobile: Overlay)
   .nav-search-bar         Suchleiste (klappt unter den Header aus)
   ========================================================================== */


/* ── Fixierte Navigation ─────────────────────────────────────────── */
/* Der #nav-Container klebt am oberen Rand und spannt die volle Breite.
   flex + align-items:stretch sorgt dafür, dass .nav-left und .nav-right
   immer dieselbe Höhe haben – egal wie viel Inhalt drin ist. */
#nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(247,246,248,0.97);
  border-bottom: 0.5px solid rgba(41,25,35,0.09);
  display: flex;
  align-items: stretch;           /* beide Kinder (left/right) gleich hoch */
  transition: background .35s, border-color .35s, box-shadow .35s;
}

/* Schatten erscheint erst wenn der Nutzer anfängt zu scrollen
   (Klasse wird per JS gesetzt, sobald scrollY > 8px) */
#nav.scrolled { box-shadow: 0 1px 24px rgba(41,25,35,.07); }


/* ── Logo-Spalte (volle Höhe links) ─────────────────────────────── */
/* .nav-left nimmt die volle Höhe des Headers ein (dank align-items:stretch
   am Elternelement). Die Logos werden vertikal zentriert. */
.nav-left {
  display: flex;
  align-items: center;
  padding: 0 28px 0 56px;        /* links: 56px Abstand zum Seitenrand */
  border-right: 1px solid rgba(41,25,35,.06); /* dezente Trennlinie zur rechten Spalte */
  flex-shrink: 0;                /* Breite nicht verkleinern wenn Platz knapp */
}

/* Beide Logo-Bilder (CADKontor + Graphisoft Center) bekommen dieselbe Höhe.
   width:auto bewahrt das Seitenverhältnis. */
.nav-logo-img {
  height: 52px;
  width: auto;
  display: block;
}


/* ── Rechte Spalte (2-zeilig) ───────────────────────────────────── */
/* flex:1 lässt .nav-right den verbleibenden Platz neben .nav-left füllen.
   flex-direction:column stapelt die zwei Zeilen übereinander. */
.nav-right {
  flex: 1;
  display: flex;
  flex-direction: column;
}


/* ── Zeile 1: Utility-Leiste ────────────────────────────────────── */
/* Enthält Schnell-Links (Telefon, Termine, Schulungen, Anfrage),
   den Such-Button und auf Mobile den Hamburger. */
.nav-row-top {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: flex-end;     /* Inhalt an den rechten Rand schieben */
  padding: 0 56px 0 24px;
  border-bottom: 1px solid rgba(41,25,35,.06); /* Trennlinie zur Navigationszeile */
}


/* ── Zeile 2: Hauptnavigation ───────────────────────────────────── */
/* Auf Desktop unsichtbar (da .nav-links fixed positioniert ist),
   dient aber als Platzhalter für die Höhe der zweiten Zeile.
   Auf Mobile wird diese Zeile ausgeblendet. */
.nav-row-bottom {
  height: 44px;
  display: flex;
  align-items: center;
  padding: 0 56px 0 24px;
}


/* ── Logo-Link & Dekorations-Elemente ──────────────────────────── */
/* .nav-logo ist das <a>-Element das beide Logos umschließt */
.nav-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }

/* Pulsierender blauer Punkt (wird aktuell nicht verwendet, aber vorhanden) */
.nav-dot { width: 8px; height: 8px; border-radius: 50%; background: #00a0d1; box-shadow: 0 0 0 0 rgba(0,160,209,.4); animation: navpulse 2.5s ease-in-out infinite; }
@keyframes navpulse {
  0%, 100% { box-shadow: 0 0 0 0   rgba(0,160,209,.4); }
  50%       { box-shadow: 0 0 0 5px rgba(0,160,209, 0); }
}

/* Senkrechter Trennstrich zwischen den beiden Logos */
.nav-sep { width: 1px; height: 32px; background: rgba(41,25,35,.18); margin: 0 2px; }

/* Graphisoft-Center-Logo leicht abgedunkelt damit es sich unterordnet */
.nav-gs  { opacity: 0.75; }


/* ── Utility-Links (Zeile 1, rechts) ───────────────────────────── */
/* Container für alle Schnell-Links in der oberen Zeile */
.nav-utils {
  display: flex;
  align-items: center;
  gap: 2px;
}

/* Basis-Stil für alle Utility-Links (Telefon, Termine, Schulungen …) */
.nav-util {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4A3A44;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9998px;         /* vollständig abgerundete Pill-Form */
  transition: background .2s, color .2s;
  white-space: nowrap;
}
.nav-util:hover { background: rgba(41,25,35,.06); color: #291923; }

/* Telefonnummer im Header — auffälliger als normale Utility-Links */
.nav-util-tel {
  background: rgba(41,25,35,.06);
  color: #291923;
  font-weight: 600;
  border: 1px solid rgba(41,25,35,.12);
}
.nav-util-tel:hover { background: #291923; color: #fff; border-color: transparent; }

/* Hervorgehobener "Anfrage stellen"-Button mit blauem Rahmen */
.nav-util-cta {
  background: rgba(0,160,209,.1);
  color: #00a0d1;
  border: 1px solid rgba(0,160,209,.2);
}
.nav-util-cta:hover { background: #00a0d1; color: #fff; border-color: transparent; }

/* Runder Icon-Button zum Öffnen der Suchleiste */
.nav-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 9998px;
  border: none;
  background: transparent;
  color: #4A3A44;
  cursor: pointer;
  margin-left: 6px;
  transition: background .2s, color .2s;
}
.nav-search-btn:hover { background: rgba(41,25,35,.06); color: #291923; }


/* ── Hauptnavigations-Links (Desktop) ──────────────────────────── */
/* Auf Desktop wird .nav-links fixed in Zeile 2 positioniert (top:64px).
   So überlappt sie optisch die .nav-row-bottom, ohne im DOM-Flow zu stören. */
@media (min-width: 1025px) {
  .nav-links {
    display: flex;
    align-items: center;
    gap: 2px;
    list-style: none;
    position: fixed;
    top: 64px;                   /* unter der Utility-Zeile (Höhe 64px) */
    right: 56px;                 /* bündig mit dem rechten Innenabstand */
    height: 44px;                /* Höhe der .nav-row-bottom */
    z-index: 1001;               /* über #nav (1000), damit Dropdowns sichtbar sind */
    margin: 0;
    padding: 0;
  }
}

/* Link-Stil für alle direkten Menüpunkte */
.nav-links > li > a {
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: #4A3A44;
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 9998px;
  transition: background .2s, color .2s;
  white-space: nowrap;
  display: block;
}

/* Hover und aktive Seite werden gleich hervorgehoben */
.nav-links > li > a:hover,
.nav-links > li > a.active {
  background: rgba(41,25,35,.06);
  color: #291923;
}

/* Utility-Einträge die nur im mobilen Overlay sichtbar sein sollen
   (z. B. zusätzliche Links die oben keinen Platz haben).
   Standardmäßig ausgeblendet, auf Mobile wieder eingeblendet. */
.nav-mobile-util { display: none; }


/* ── Dropdown-Untermenüs ────────────────────────────────────────── */
/* Eltern-<li> braucht position:relative als Ankerpunkt für das Dropdown */
.has-sub { position: relative; }

/* Pfeil-Indikator hinter Links mit Untermenü */
.has-sub > a::after { content: ' ↓'; font-size: 9px; opacity: .5; }

/* Das Untermenü selbst: standardmäßig versteckt, erscheint bei :hover */
.nav-sub {
  display: none;
  position: absolute;
  top: calc(100% + 8px);        /* 8px Abstand unter dem Elternlink */
  left: 0;
  background: #fff;
  border: 1px solid rgba(41,25,35,.1);
  border-top: 2px solid #00a0d1; /* blauer Akzentstreifen oben */
  list-style: none;
  min-width: 240px;
  box-shadow: 0 12px 40px rgba(41,25,35,.12);
  border-radius: 0 0 8px 8px;
  z-index: 100;
}
.has-sub:hover .nav-sub { display: block; }

/* Links innerhalb des Dropdowns */
.nav-sub li a {
  display: block;
  padding: 12px 20px;
  font-family: 'Inter', sans-serif;
  font-size: 12.5px;
  color: #4A3A44;
  text-decoration: none;
  transition: background .15s, color .15s;
  border-bottom: 1px solid rgba(41,25,35,.06);
}
/* Letzter Eintrag: kein Border, abgerundete untere Ecken passend zum Container */
.nav-sub li:last-child a { border-bottom: none; border-radius: 0 0 8px 8px; }
.nav-sub li a:hover { background: rgba(0,160,209,.07); color: #00a0d1; }


/* ── CTA-Button "Kontakt" (letzter Menüpunkt) ───────────────────── */
/* Auf Desktop ist dies ein auffälliger dunkler Pill-Button.
   !important überschreibt die allgemeinen .nav-links > li > a Stile. */
.nav-cta {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 10px !important;
  font-weight: 500 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  background: #291923 !important;
  padding: 9px 20px !important;
  border-radius: 9998px !important;
  transition: background .2s !important;
  margin-left: auto;             /* schiebt den Button an den rechten Rand */
  white-space: nowrap;
}
.nav-cta:hover { background: #00a0d1 !important; }


/* ── Suchleiste (klappt unter den Header aus) ──────────────────── */
/* Standardmäßig versteckt (display:none). Wird durch JS-Klasse .open
   als display:flex eingeblendet. top:108px = 64px (Zeile 1) + 44px (Zeile 2). */
.nav-search-bar {
  position: fixed;
  top: 108px;
  left: 0; right: 0;
  background: rgba(247,246,248,0.98);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(41,25,35,.1);
  box-shadow: 0 8px 32px rgba(41,25,35,.1);
  padding: 14px 56px;
  z-index: 999;
  display: none;
  align-items: center;
}
.nav-search-bar.open { display: flex; }

/* Innerer Wrapper begrenzt die maximale Breite des Suchfeldes */
.nav-search-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
}

/* Das eigentliche Texteingabefeld */
.nav-search-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  color: #291923;
  outline: none;
}
.nav-search-input::placeholder { color: #A89FA5; }

/* Schließen-Button (×) rechts im Suchfeld */
.nav-search-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 9998px;
  border: none;
  background: rgba(41,25,35,.06);
  color: #4A3A44;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
.nav-search-close:hover { background: rgba(41,25,35,.12); }


/* ── Hamburger-Button ───────────────────────────────────────────── */
/* Standardmäßig versteckt, wird auf Mobile eingeblendet.
   Drei <span>-Elemente bilden die drei waagerechten Striche. */
.nav-burger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 4px; }
.nav-burger span { display: block; width: 22px; height: 1.5px; background: #291923; transition: .3s; }

/* Wenn .open gesetzt ist (Menü offen), animieren die Striche zu einem X */
.nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-burger.open span:nth-child(2) { opacity: 0; }
.nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }


/* ── Responsive: Tablet & Mobile (max. 1024px) ──────────────────── */
@media (max-width: 1024px) {

  /* Logo-Spalte: weniger Innenabstand, keine Trennlinie mehr */
  .nav-left       { padding: 0 16px 0 20px; border-right: none; }

  /* Logos etwas kleiner auf kleinen Bildschirmen */
  .nav-logo-img   { height: 36px !important; }

  /* Trennstrich zwischen den Logos ebenfalls kürzer */
  .nav-sep        { height: 20px; }

  /* Rechte Spalte wird auf Mobile einzeilig (row statt column) */
  .nav-right      { flex-direction: row; align-items: center; }

  /* Utility-Zeile füllt den verbleibenden Platz, zweite Zeile entfällt */
  .nav-row-top    { flex: 1; height: 64px; border-bottom: none; padding: 0 20px 0 0; justify-content: flex-end; }
  .nav-row-bottom { display: none; }

  /* Utility-Links: alle ausblenden auf Mobile (Sticky-Buttons übernehmen) */
  .nav-utils      { display: none; }

  /* Such-Button wird auf Mobile nicht gebraucht */
  .nav-search-btn { display: none; }

  /* Hamburger-Button einblenden */
  .nav-burger     { display: flex; }

  /* Suchleiste direkt unter dem Header (nur eine Zeile auf Mobile) */
  .nav-search-bar { top: 64px; padding: 14px 20px; }


  /* ── Hamburger-Menü-Overlay ──────────────────────────────────── */
  /* .nav-links wird auf Mobile zu einem Vollbild-Overlay.
     Standardmäßig versteckt (display:none), per JS-Klasse .open
     eingeblendet. Die @keyframes-Animation sorgt für ein weiches
     Einblenden + leichten Slide nach unten. */
  .nav-links {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 64px;                   /* direkt unter dem Header */
    left: 0; right: 0; bottom: 0;
    height: auto;
    background: rgba(247,246,248,.96);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 24px 24px 40px;
    gap: 0;
    overflow-y: auto;            /* scrollbar wenn viele Einträge */
    border-top: 1px solid rgba(41,25,35,.09);
    z-index: 1001;
    list-style: none;
    margin: 0;
  }
  /* Open: flex + Einblend-Animation */
  .nav-links.open {
    display: flex;
    animation: navOverlayIn .22s cubic-bezier(.25,.46,.45,.94) both;
  }
  @keyframes navOverlayIn {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
  }

  /* Jeder Menüpunkt bekommt eine Trennlinie nach unten */
  .nav-links > li           { width: 100%; border-bottom: 1px solid rgba(41,25,35,.06); }

  /* Mobile Menülinks sind größer und haben keinen Hintergrund beim Hover */
  .nav-links > li > a       { display: block; padding: 16px 4px !important; font-size: 16px !important; background: transparent !important; border-radius: 0 !important; color: #291923 !important; }
  .nav-links > li > a:hover { background: transparent !important; color: #00a0d1 !important; }

  /* Optionale Utility-Einträge im Overlay (z. B. weitere Links) */
  .nav-mobile-util        { display: block; }
  .nav-mobile-util a      { display: flex; align-items: center; gap: 8px; padding: 14px 4px !important; font-size: 13px !important; color: #7B6F76 !important; }
  .nav-mobile-util a:hover { color: #00a0d1 !important; }

  /* ── Dropdown auf Mobile: kein schwebend, sondern inline aufklappbar ── */
  /* Der Pfeil dreht sich um 180° wenn das Untermenü offen ist */
  .has-sub > a { display: flex; justify-content: space-between; align-items: center; }
  .has-sub > a::after { content: '↓'; font-size: 10px; opacity: .45; display: inline-block; transition: transform .25s; }
  .has-sub.sub-open > a::after { transform: rotate(180deg); }

  /* Untermenü: kein absolutes Positioning, kein Schatten – fließt inline */
  .nav-sub {
    position: static;
    box-shadow: none;
    border: none;
    background: transparent;
    min-width: 0;
  }
  .nav-sub li a { padding: 10px 16px; font-size: 13px; color: #7B6F76; }

  /* ── CTA "Kontakt" auf Mobile: normaler Textlink statt Pill-Button ── */
  .nav-cta {
    padding: 16px 4px !important;
    background: transparent !important;
    color: #291923 !important;
    font-size: 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    margin-left: 0 !important;
    border-radius: 0 !important;
  }
}


/* ── Responsive: Kleine Smartphones (max. 480px) ────────────────── */
/* Nur Innenabstände werden etwas weiter reduziert */
@media (max-width: 480px) {
  .nav-left       { padding: 0 12px 0 16px; }
  .nav-row-top    { padding: 0 16px 0 0; }
  .nav-search-bar { padding: 14px 16px; }
}