/* ========================================
   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)
   ======================================== */
/* Ursprüngliche Regel! */
.co-nav-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--co-nav-z-index);
  background: transparent;
}

/* Unsichtbar beim Downscroll - ursprüngliche Regel */
.co-nav-wrapper.is-hidden {
  opacity: 0;
  visibility: hidden;
    transition: opacity var(--co-nav-fade-speed) ease, visibility var(--co-nav-fade-speed) ease;  /* --co-nav-fade-speed = 0.2s */
}

/* -------------neue Regel--------------- */
/*
.co-nav-wrapper {
  position: sticky;
  top: 0;
  left: 0;
  width: 100%;
  z-index: var(--co-nav-z-index);
  background: transparent;
}

.co-nav-wrapper.is-hidden {
  position: relative;
  top: auto;
  opacity: 1;
  visibility: visible;
}

body.admin-bar .co-nav-wrapper {
  top: var(--wp-admin--admin-bar--height);
}*/

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

/* 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);
}*/

/*.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 var(--co-nav-fade-speed) ease, visibility var(--co-nav-fade-speed) ease;  /* --co-nav-fade-speed = 0.2s */
}

/* 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);
}

/* Upscroll: padding-top reduzieren */
.co-nav-wrapper.is-scrolled-nav-only .co-nav-desktop {
  --co-nav-padding-top: 17px;
}

/* 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-logo-anim-speed) var(--co-logo-anim-easing),
              transform var(--co-logo-anim-speed) var(--co-logo-anim-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 + Unterseiten) */
.co-navlink.is-active,

/* Hauptseiten */
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="/"],

/* Unterseiten (Single Post Types) */
body.single-projekt .co-navlink[href*="projekte"],
body.single-stelle .co-navlink[href*="stellen"],
body.single-news .co-navlink[href*="news"] {
  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 var(--co-logo-anim-speed) var(--co-logo-anim-easing);
  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: 768px) {
  .co-mobile-architekten-container {
    /* Ensure proper touch targets on mobile */
    min-height: 44px;
  }
  
  .co-logo-element {
    /* Improve touch interaction */
    /*min-width: 44px;*/
    height: 36px !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

@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: 35px !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: 25px !important;
    bottom: 20px !important;
  }
  
  :root {
    --co-mobile-logo-height: 28px;
  }
}

/* ========================================
   PAGE-NAV / PROJEKT-NAV
   co.jaune.dev – Projekt Single Pages
   ======================================== */

/* ----------------------------------------
   PROJEKT-NAV: Links (zur Übersicht, vor/zurück)
   Styling, Hover, SVG-Farbe
   ---------------------------------------- */

#brxe-rsvsbr,
#brxe-bqckut,
#brxe-ibmrqr {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: #9D9D9D;
  font-family: "Euclid Circular B", sans-serif;
  font-size: 16px;
  font-weight: 400;
  text-decoration: none;
  transition: color 0.3s ease;
  cursor: pointer;
}

#brxe-rsvsbr:hover,
#brxe-bqckut:hover,
#brxe-ibmrqr:hover {
  color: #000000;
  text-decoration: underline;
}

/* SVG bei Hover schwarz */
#brxe-rsvsbr:hover svg,
#brxe-bqckut:hover svg,
#brxe-ibmrqr:hover svg {
  filter: brightness(0) saturate(100%);
}

/* SVG-Grössen */
#brxe-rsvsbr svg,
#brxe-bqckut svg,
#brxe-ibmrqr svg {
  width: 14px;
  height: 18px;
  flex-shrink: 0;
  transition: filter 0.3s ease;
}

/* «zur Übersicht»-Icon etwas kleiner */
#brxe-rsvsbr svg {
  width: 16px;
  height: 18px;
}

/* Texte ausblenden (wird via Bricks-Breakpoint gesteuert, 
   diese Regel ist Fallback für sehr kleine Screens) */
@media (max-width: 480px) {
  #brxe-rsvsbr .text,
  #brxe-bqckut .text,
  #brxe-ibmrqr .text {
    display: none;
  }
}

/* ----------------------------------------
   PAGE-NAV BLOCK-2 (Anker-Links)
   Desktop: inline neben Trigger
   ---------------------------------------- */

/* Visibility-Toggle (Bricks Interaction) */
.co-projekt-page-nav__page-nav-block-2.visibility--hidden {
  display: none !important;
}

/* Desktop: kein Umbruch, natürliche Breite */
.co-projekt-page-nav__page-nav-block-2 {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  order: 0;
}

/* ----------------------------------------
   MOBILE <=768px: Zweizeiliges Layout
   Zeile 1: Trigger links | Projekt-Nav rechts
   Zeile 2: Anker-Links (volle Breite)
   ---------------------------------------- */

@media (max-width: 768px) {

  #brxe-xwrrjb,
  #brxe-bjmdsa {
    flex-wrap: wrap;
    align-content: flex-start;
    height: auto;
    row-gap: 0;
  }

  .co-pagenav-section {
    height: auto !important;
    min-height: 60px;
  }

  /* Trigger «Seiteninhalte»: Zeile 1 links */
  .co-projekt-page-nav__page-nav-block {
    order: 1;
    flex: 0 0 auto;
    height: 60px;
    align-items: center;
  }

  /* Projekt-Nav (Icons): Zeile 1 rechts */
  .co-projekt-page-nav__projekt-nav-block {
    order: 2;
    flex: 0 0 auto;
    height: 60px;
    /* margin-left: auto via Bricks gesetzt */
  }

  /* Anker-Links: Zeile 2, volle Breite */
  .co-projekt-page-nav__page-nav-block-2 {
    order: 3;
    flex: 0 0 100%;
    width: 100%;
    flex-wrap: wrap;
    padding-bottom: 16px;
  }

}

/* ========================================
   UPSCROLL-SUBNAV
   Ankernavi sichtbar im fixed Header
   auf Single-Projekt und Büro-Seite
   ======================================== */

/* Ankernavi fixed positionieren wenn is-subnav-fixed */
body.single-projekt.is-subnav-fixed .co-pagenav-section,
body.page-buero.is-subnav-fixed .co-pagenav-section {
  position: fixed;
  top: 52px;
  left: 0;
  right: 0;
  z-index: 1000;  /* über dem Header (z-index: 999) */
  background: white;
}
/* Content-Verschiebung kompensieren:
   Normaler margin-top 115px + Ankernavi-Höhe 33px */
body.single-projekt.is-subnav-fixed #brx-content,
body.page-buero.is-subnav-fixed #brx-content {
  margin-top: calc(115px + 33px);
}

/* Ankernavi ausblenden beim Downscroll / Ganz-oben */
.co-pagenav-section.is-pagenav-hidden {  
  opacity: 0;
  visibility: hidden;
    transition: opacity var(--co-nav-fade-speed) ease, visibility var(--co-nav-fade-speed) ease;
}