/* ========================================
   SKIP TO CONTENT LINK (Accessibility)
   ======================================== */

.co-skip-link {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--color-black);
  color: var(--color-white);
  padding: 8px 16px;
  text-decoration: none;
  z-index: 10000;
  font-family: "Euclid Circular B", sans-serif;
  font-size: 16px;
}

.co-skip-link:focus {
  top: 0;
  outline: var(--co-focus-outline-width) solid var(--co-focus-outline-color);
  outline-offset: var(--co-focus-outline-offset);
}

/* ========================================
   NAVIGATION WRAPPER (Fixed Positioning)
   ======================================== */

.co-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--co-nav-z-index);
  background: transparent;
}

/* Scroll States - FADE statt SLIDE */
/*.co-nav-wrapper.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-standard), 
              visibility var(--duration-normal) var(--ease-standard);
}*/

/* Unsichtbar beim Downscroll */
.co-nav-wrapper.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;  ← SMOOTH!
}

/*.co-nav-wrapper:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
}*/

/* Sichtbar beim Upscroll */
.co-nav-wrapper:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  transition: opacity 1s ease, visibility 1s ease;  ← SMOOTH!
}

/* Upscroll: Nur Nav-Row sichtbar, Logo ausgeblendet */
.co-nav-wrapper.is-scrolled-nav-only .co-logo-row {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  /*transition: opacity var(--duration-normal) var(--ease-standard), 
              visibility var(--duration-normal) var(--ease-standard), 
              max-height var(--duration-normal) var(--ease-standard);*/
  transition: opacity 1s ease, visibility 1s ease;  ← SMOOTH!
}

.co-nav-wrapper:not(.is-scrolled-nav-only) .co-logo-row {
  opacity: 1;
  visibility: visible;
  max-height: var(--co-logo-height);
  /*transition: opacity var(--duration-normal) var(--ease-standard), 
              visibility var(--duration-normal) var(--ease-standard), 
              max-height var(--duration-normal) var(--ease-standard);*/
  transition: opacity 1s ease, visibility 1s ease;  ← SMOOTH!
}

/* ========================================
   DESKTOP NAVIGATION (>768px)
   ======================================== */

.co-nav-desktop {
  display: flex;
  flex-direction: column;
  padding-top: var(--co-nav-padding-top); /* 17px */
  padding-left: 0;
  padding-right: 0;
  background: var(--white-trans-50);
}

/* Homepage: Transparenter Background */
body.home .co-nav-wrapper .co-nav-desktop {
  background: transparent !important;
}

/* ========================================
   LOGO ROW (Oberste Zeile)
   ======================================== */

.co-logo-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: var(--co-logo-height); /* 40px */
  margin-bottom: var(--co-nav-gap-logo-to-nav); /* 25px */
  transition: opacity var(--co-transition-speed) var(--co-transition-easing);
  text-decoration: none;
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  left: -3px;
  width: calc(100% + 6px);
}

.co-logo-row:focus {
  outline: var(--co-focus-outline-width) solid var(--co-focus-outline-color);
  outline-offset: var(--co-focus-outline-offset);
}

.co-logo-link {
  width: calc(100% + 6px);
  display: block;
}

.co-logo-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: calc(100% + 6px);
  height: var(--co-logo-height);
  position: relative;
  overflow: visible;
}

/* ========================================
   LOGO-ELEMENTE (SVG-Buchstaben)
   ======================================== */

.co-logo-element {
  height: var(--co-logo-height);
  width: auto;
  position: absolute;
  transition: none; /* Transition erst nach Page-Load aktivieren */
  will-change: left, transform;
  pointer-events: none;
}

/* Transition aktivieren nach Page-Load */
body.co-logo-ready .co-logo-element {
  transition: left var(--co-transition-speed) var(--co-transition-easing),
              transform var(--co-transition-speed) var(--co-transition-easing);
}

/* Erstes Element (CO.) fixiert links */
.co-logo-1 {
  left: 0;
}

/* Letztes Element (N) fixiert rechts */
.co-logo-12 {
  right: -5px;
  left: auto;
}

/* Initiale Positionen (Default-State) - Elemente 2-11 */
/*.co-logo-2  { left: calc(16.50%); }
.co-logo-3  { left: calc(28.00%); }
.co-logo-4  { left: calc(37.30%); }
.co-logo-5  { left: calc(43.3%); }
.co-logo-6  { left: calc(47.20%); }
.co-logo-7  { left: calc(50.50%); }
.co-logo-8  { left: calc(55.5%); }
.co-logo-9  { left: calc(63.00%); }
.co-logo-10 { left: calc(72.1%); }
.co-logo-11 { left: calc(82.6%); }*/

/* Body-Klasse basierte Logo-Positionen */

/* BÜRO-Seite */
body.page-buero .co-logo-2 { left: calc(16.50%); }
body.page-buero .co-logo-3 { left: calc(23.70%); }
body.page-buero .co-logo-4 { left: calc(32.00%); }
body.page-buero .co-logo-5 { left: calc(45.50%); }
body.page-buero .co-logo-6 { left: calc(59.20%); }
body.page-buero .co-logo-7 { left: calc(69.00%); }
body.page-buero .co-logo-8 { left: calc(76.20%); }
body.page-buero .co-logo-9 { left: calc(83.40%); }
body.page-buero .co-logo-10 { left: calc(87.50%); }
body.page-buero .co-logo-11 { left: calc(91.10%); }

/* STELLEN-Seite UND Single-Stelle */
body.page-stellen .co-logo-2,
body.single-stelle .co-logo-2 { left: calc(16.50%); }
body.page-stellen .co-logo-3,
body.single-stelle .co-logo-3 { left: calc(21.40%); }
body.page-stellen .co-logo-4,
body.single-stelle .co-logo-4 { left: calc(25.50%); }
body.page-stellen .co-logo-5,
body.single-stelle .co-logo-5 { left: calc(29.60%); }
body.page-stellen .co-logo-6,
body.single-stelle .co-logo-6 { left: calc(36.60%); }
body.page-stellen .co-logo-7,
body.single-stelle .co-logo-7 { left: calc(45.60%); }
body.page-stellen .co-logo-8,
body.single-stelle .co-logo-8 { left: calc(57.60%); }
body.page-stellen .co-logo-9,
body.single-stelle .co-logo-9 { left: calc(74.50%); }
body.page-stellen .co-logo-10,
body.single-stelle .co-logo-10 { left: calc(84.20%); }
body.page-stellen .co-logo-11,
body.single-stelle .co-logo-11 { left: calc(91.40%); }

/* PROJEKTE-Seite UND Single-Projekt */
body.page-projekte .co-logo-2,
body.single-projekt .co-logo-2 { left: calc(16.50%); }
body.page-projekte .co-logo-3,
body.single-projekt .co-logo-3 { left: calc(30.00%); }
body.page-projekte .co-logo-4,
body.single-projekt .co-logo-4 { left: calc(42.70%); }
body.page-projekte .co-logo-5,
body.single-projekt .co-logo-5 { left: calc(54.10%); }
body.page-projekte .co-logo-6,
body.single-projekt .co-logo-6 { left: calc(63.30%); }
body.page-projekte .co-logo-7,
body.single-projekt .co-logo-7 { left: calc(69.50%); }
body.page-projekte .co-logo-8,
body.single-projekt .co-logo-8 { left: calc(74.80%); }
body.page-projekte .co-logo-9,
body.single-projekt .co-logo-9 { left: calc(78.90%); }
body.page-projekte .co-logo-10,
body.single-projekt .co-logo-10 { left: calc(82.80%); }
body.page-projekte .co-logo-11,
body.single-projekt .co-logo-11 { left: calc(88.30%); }

/* NEWS-Seite - BEIDE möglichen Body-Klassen */
body.page-news .co-logo-2,
body.post-type-archive-news .co-logo-2 { left: calc(16.50%); }
body.page-news .co-logo-3,
body.post-type-archive-news .co-logo-3 { left: calc(20.40%); }
body.page-news .co-logo-4,
body.post-type-archive-news .co-logo-4 { left: calc(24.50%); }
body.page-news .co-logo-5,
body.post-type-archive-news .co-logo-5 { left: calc(30.10%); }
body.page-news .co-logo-6,
body.post-type-archive-news .co-logo-6 { left: calc(35.80%); }
body.page-news .co-logo-7,
body.post-type-archive-news .co-logo-7 { left: calc(42.40%); }
body.page-news .co-logo-8,
body.post-type-archive-news .co-logo-8 { left: calc(48.90%); }
body.page-news .co-logo-9,
body.post-type-archive-news .co-logo-9 { left: calc(58.20%); }
body.page-news .co-logo-10,
body.post-type-archive-news .co-logo-10 { left: calc(70.20%); }
body.page-news .co-logo-11,
body.post-type-archive-news .co-logo-11 { left: calc(83.40%); }


/* KONTAKT-Seite */
body.page-kontakt .co-logo-2 { left: calc(16.50%); }
body.page-kontakt .co-logo-3 { left: calc(24.90%); }
body.page-kontakt .co-logo-4 { left: calc(29.80%); }
body.page-kontakt .co-logo-5 { left: calc(36.20%); }
body.page-kontakt .co-logo-6 { left: calc(40.00%); }
body.page-kontakt .co-logo-7 { left: calc(43.40%); }
body.page-kontakt .co-logo-8 { left: calc(51.40%); }
body.page-kontakt .co-logo-9 { left: calc(61.40%); }
body.page-kontakt .co-logo-10 { left: calc(71.00%); }
body.page-kontakt .co-logo-11 { left: calc(84.50%); }

/* HOMEPAGE / DEFAULT */
body.home .co-logo-2 { left: calc(16.50%); }
body.home .co-logo-3 { left: calc(28.00%); }
body.home .co-logo-4 { left: calc(37.30%); }
body.home .co-logo-5 { left: calc(43.3%); }
body.home .co-logo-6 { left: calc(47.20%); }
body.home .co-logo-7 { left: calc(50.50%); }
body.home .co-logo-8 { left: calc(55.5%); }
body.home .co-logo-9 { left: calc(63.00%); }
body.home .co-logo-10 { left: calc(72.1%); }
body.home .co-logo-11 { left: calc(82.6%); }


/* Aria-Hidden für Screenreader */
.co-logo-element[aria-hidden="true"] {
  pointer-events: none;
}

/* ========================================
   NAVIGATION ROW (Nav-Links)
   ======================================== */

.co-nav-row {
  display: flex;
  justify-content: center;
  align-items: center;
  height: calc(var(--co-nav-total-height) - var(--co-logo-height) - var(--co-nav-gap-logo-to-nav) - var(--co-nav-padding-top));
}

/* ========================================
   NAV MENU (Bricks Nestable)
   ======================================== */

.co-nav-menu {
  display: flex;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: space-between;
  width: 100%;
}

.co-nav-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1; /* Gleichmäßige Verteilung */
}

/* Erstes und letztes Element linksbündig/rechtsbündig */
.co-nav-menu li:first-child {
  flex: 0;
  text-align: left;
}

.co-nav-menu li:last-child {
  flex: 0;
  text-align: right;
}

/* Mittlere Elemente zentriert */
.co-nav-menu li:not(:first-child):not(:last-child) {
  text-align: center;
}

/* ========================================
   NAV LINKS (Desktop)
   ======================================== */

.co-navlink {
  font-family: "Euclid Circular B", sans-serif;
  font-size: 24px;
  line-height: 33px;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--color-black);
  text-decoration: none;
  display: inline-block;
  position: relative;
  /*transition: text-decoration-color 0.2s ease, color 0.2s ease;*/
}

.co-navlink:focus {
  outline: var(--co-focus-outline-width) solid var(--co-focus-outline-color);
  outline-offset: var(--co-focus-outline-offset);
}

.co-navlink:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Active State (Unterstrichen auf aktueller Seite) */
.co-navlink.is-active,
body.page-projekte .co-navlink[href*="projekte"],
body.page-buero .co-navlink[href*="buero"],
body.page-stellen .co-navlink[href*="stellen"],
body.page-news .co-navlink[href*="news"],
body.page-kontakt .co-navlink[href*="kontakt"],
body.home .co-navlink[href="/"] {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 2px;
}

/* Zwischenraum-Element */
.co-nav-desktop-spacer,
.co-nav-mobil-spacer {
  flex: 0.5; /* gleiche Zwischenräume */
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

/* Mobile: Desktop-Navigation ausblenden */
@media (max-width: 768px) {
  .co-nav-desktop {
    display: none !important;
  }
}

/* Desktop: Mobile-Navigation ausblenden (für zukünftige Mobile-Navi) */
@media (min-width: 769px) {
  .co-nav-mobile {
    display: none !important;
  }
}

/* ========================================

CO. MOBILE NAVIGATION - CSS EXTENSION (FIXED)

Mobile Logozeile: Responsive Positionierung & Scrollverhalten

======================================== */

/* ========================================
CSS VARIABLEN - Anpassbar pro Breakpoint
======================================== */

:root {
  /* Mobile Logo Höhe - Standard */
  --co-mobile-logo-height: 40px;
}

@media (max-width: 480px) {
  :root {
    /* Mobile Logo Höhe - 480px Breakpoint */
    --co-mobile-logo-height: 38px;
  }
}

@media (max-width: 360px) {
  :root {
    /* Mobile Logo Höhe - 360px Breakpoint (kleinster BP) */
    --co-mobile-logo-height: 35px;
  }
}

/* ========================================
MOBILE ARCHITEKTEN-CONTAINER
Hauptcontainer für die mobile Logozeile
======================================== */

.co-mobile-architekten-container {
  position: fixed;
  bottom: var(--space-20);
  left: 0;
  right: 0;
  width: 100%;
  height: var(--co-mobile-logo-height);
  display: none;
  align-items: center;
  justify-content: space-between;
  z-index: 9999; /* Höher als Navigation */
  background: transparent;
  pointer-events: none;
  
  /* Wird nur auf Mobile sichtbar */
  @media (max-width: 768px) {
    display: flex;
  }
}

/* ========================================
SCROLL-VERHALTEN: MOBILE LOGOZEILE AUSBLENDEN
======================================== */

.co-mobile-architekten-container.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal) var(--ease-standard), 
              visibility var(--duration-normal) var(--ease-standard);
  pointer-events: none;
}

.co-mobile-architekten-container:not(.is-hidden) {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--duration-normal) var(--ease-standard), 
              visibility var(--duration-normal) var(--ease-standard);
}

/* ========================================
MOBILE LOGO ELEMENTE (Allgemein)
======================================== */

.co-logo-element {
  position: absolute;
  bottom: 0;
  width: auto;
  height: var(--co-mobile-logo-height);
  object-fit: contain;
  transition: left 400ms var(--ease-standard);
  pointer-events: auto;
}

/* ========================================
SCHWARZE SVGs (Standard auf Mobile)
Standardmäßig sichtbar wenn Overlay NICHT geöffnet
======================================== */

.co-logo-mobile-2,
.co-logo-mobile-3,
.co-logo-mobile-4,
.co-logo-mobile-5,
.co-logo-mobile-6,
.co-logo-mobile-7,
.co-logo-mobile-8,
.co-logo-mobile-9,
.co-logo-mobile-10,
.co-logo-mobile-11,
.co-logo-mobile-12 {
  display: block;
  z-index: 2;
}

/* ========================================
WEISSE SVGs (Overlay geöffnet)
Standardmäßig VERSTECKT, nur im Overlay sichtbar
======================================== */

.co-logo-mobile-2-white,
.co-logo-mobile-3-white,
.co-logo-mobile-4-white,
.co-logo-mobile-5-white,
.co-logo-mobile-6-white,
.co-logo-mobile-7-white,
.co-logo-mobile-8-white,
.co-logo-mobile-9-white,
.co-logo-mobile-10-white,
.co-logo-mobile-11-white,
.co-logo-mobile-12-white {
  display: none;
  z-index: 1;
}

/* ========================================
OVERLAY-MODUS: Zusätzliche Klasse via JavaScript
Wenn Overlay offen: .overlay-active am Container
======================================== */

.co-mobile-architekten-container.overlay-active .co-logo-mobile-2,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-3,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-4,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-5,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-6,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-7,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-8,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-9,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-10,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-11,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-12 {
  display: none !important;
}

.co-mobile-architekten-container.overlay-active .co-logo-mobile-2-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-3-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-4-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-5-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-6-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-7-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-8-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-9-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-10-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-11-white,
.co-mobile-architekten-container.overlay-active .co-logo-mobile-12-white {
  display: block !important;
}

/* ========================================
FIXIERTE POSITIONEN
Elemente 2 (A) und 12 (N) bleiben fix
======================================== */

.co-logo-mobile-2,
.co-logo-mobile-2-white {
  left: 0 !important;
}

.co-logo-mobile-12,
.co-logo-mobile-12-white {
  right: 0 !important;
  left: auto !important;
}

/* ========================================
RESPONSIVE ANPASSUNGEN FÜR BREAKPOINTS
======================================== */

/* 768px Breakpoint (Tablet) */
@media (max-width: 768px) {
  .co-mobile-architekten-container {
    display: flex;
  }
}

/* 480px Breakpoint - Required mobile portrait breakpoint */
@media (max-width: 480px) {
  .co-mobile-architekten-container {
    bottom: var(--space-16);
    padding-left: var(--space-8);
    padding-right: var(--space-8);
  }
  
  .co-logo-element {
    transition: left var(--duration-normal) var(--ease-standard);
  }
}

/* 360px Breakpoint (Kleine Geräte) */
@media (max-width: 360px) {
  .co-mobile-architekten-container {
    bottom: var(--space-12);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }
  
  :root {
    --co-mobile-logo-height: 32px;
  }
}

/* ========================================
ACCESSIBILITY
======================================== */

.co-mobile-architekten-container [role="img"] {
  aria-hidden: "true";
}

/* Additional mobile optimizations for better usability */
@media (max-width: 480px) {
  .co-mobile-architekten-container {
    /* Ensure proper touch targets on mobile */
    min-height: 44px;
  }
  
  .co-logo-element {
    /* Improve touch interaction */
    /*min-width: 44px;*/
    height: 27px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Better spacing for mobile interactions */
  .co-logo-mobile-2,
  .co-logo-mobile-2-white {
    padding-left: var(--space-4);
  }
  
  .co-logo-mobile-12,
  .co-logo-mobile-12-white {
    padding-right: var(--space-4);
  }
}

/* Very small screens optimization */
@media (max-width: 360px) {
  .co-mobile-architekten-container {
    bottom: var(--space-8);
    padding-left: var(--space-4);
    padding-right: var(--space-4);
  }
  
  .co-logo-element {
    height: 22px !important;
    bottom: 20px !important;
  }
  
  :root {
    --co-mobile-logo-height: 28px;
  }
}