/* =========================================================
   vb-layout.css – Vectorbirds Layout + Subnav (CLEAN)
   TYPO3 12.4 + bootstrap_package / Pizpalue
   Version: V2.1 – 2026-02-14
   Fokus:
   - Container breiter (zentriert)
   - Subnavigation links: dark + premium (Level 1–3)
   - Active-State: KEIN grüner Marker / KEIN grüner Block / KEINE linke Linie
   - KEIN Einfluss auf Top-Menü (#page-header/.navbar wird nicht angefasst)
   - NEW: Kantiges Design (Radius reduziert)
   ========================================================= */

/* -----------------------------------------
   0) Tokens
   ----------------------------------------- */
:root{
  --vb-container-pad: 24px;

  /* Surfaces */
  --vb-surface: rgba(255,255,255,.06);
  --vb-surface-2: rgba(255,255,255,.03);
  --vb-surface-3: rgba(255,255,255,.045);

  --vb-border: rgba(255,255,255,.10);
  --vb-border-2: rgba(255,255,255,.14);

  /* Text */
  --vb-text: rgba(255,255,255,.88);
  --vb-text-muted: rgba(255,255,255,.66);

  /* Radii (kantig/taktisch) */
  --vb-radius-lg: 4px;
  --vb-radius-md: 4px;

  /* Sticky: Header ~167px -> sicherer Offset */
  --vb-sticky-top: 180px;
}

/* -----------------------------------------
   1) Layout: Container breiter
   ----------------------------------------- */
body .container,
body .container-sm,
body .container-md,
body .container-lg,
body .container-xl,
body .container-xxl,
body .container-mainnavigation{
  width: 100%;
  padding-left: var(--vb-container-pad) !important;
  padding-right: var(--vb-container-pad) !important;
}

/* Bootstrap Breakpoints überschreiben */
@media (min-width: 992px){
  body .container,
  body .container-lg,
  body .container-xl,
  body .container-xxl,
  body .container-mainnavigation{
    max-width: 1600px !important;
  }
}

@media (min-width: 1200px){
  body .container,
  body .container-xl,
  body .container-xxl,
  body .container-mainnavigation{
    max-width: 1720px !important;
  }
}

@media (min-width: 1400px){
  body .container,
  body .container-xxl,
  body .container-mainnavigation{
    max-width: 1840px !important; /* ggf. 1920px */
  }
}

/* Section/Breadcrumb konsistent breit */
body .bp-page-content .section > .container,
body .breadcrumb-section .container{
  max-width: inherit !important;
}

/* Mobile padding */
@media (max-width: 991px){
  :root{ --vb-container-pad: 16px; }
}

/* Abstand zwischen Content & Sidebar */
@media (min-width: 992px){
  .section-row{ gap: 24px; }
}

/* =========================================================
   2) Linke Subnavigation – exakt nach Markup
   Selector: .section-column.subnav-wrap nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
   ========================================================= */

/* Sticky */
@media (min-width: 992px){
  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation{
    position: sticky;
    top: var(--vb-sticky-top);
  }
}

/* Card Container */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
> .frame-container{
  background: var(--vb-surface) !important;
  border: 1px solid var(--vb-border) !important;
  border-radius: var(--vb-radius-lg) !important;
  padding: 14px !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.28) !important;
  backdrop-filter: blur(10px);
}

/* Reset (nur Subnav) */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item{
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: 0 !important;
}

/* UL Layout (Level 1) */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
> .frame-container > .frame-inner > ul.subnav-nav{
  display: grid;
  gap: 8px;
}

/* Links (Level 1–3) */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link{
  display: flex;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border-radius: var(--vb-radius-md);
  text-decoration: none !important;

  background: var(--vb-surface-2) !important;
  border: 1px solid rgba(255,255,255,.06) !important;

  color: var(--vb-text-muted) !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

/* Text span darf niemals weißen Hintergrund bekommen */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link .subnav-link-text{
  background: transparent !important;
  color: inherit !important;
}

/* Hover */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link:hover{
  background: var(--vb-surface-3) !important;
  border-color: rgba(255,255,255,.12) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ACTIVE: nur leicht heller + minimal stärkere Kontur */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
li.subnav-item.current > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link[aria-current="page"]{
  background: rgba(255,255,255,.055) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
  font-weight: 600;
  box-shadow: 0 10px 26px rgba(0,0,0,.24) !important;
}

/* Sicherheitsnetz: Marker AUS */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link::before,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
a.subnav-link::after{
  content: none !important;
}

/* Level 2/3 Einrückung (ohne vertikale Linie) */
.section-column.subnav-wrap nav[aria-label="Subnavigation"] ul ul{
  border-left: 0 !important;
  border-left-style: none !important;
  border-left-width: 0 !important;
  background-image: none !important;
  box-shadow: none !important;

  margin-top: 8px !important;
  margin-left: 8px !important;
  padding-left: 10px !important;

  display: grid;
  gap: 6px;
}

/* Falls Linie über ::before/::after */
.section-column.subnav-wrap nav[aria-label="Subnavigation"] ul ul::before,
.section-column.subnav-wrap nav[aria-label="Subnavigation"] ul ul::after{
  content: none !important;
  display: none !important;
}

/* Sublevel Links kompakter + leiser */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link{
  padding: 8px 10px;
  border-radius: var(--vb-radius-md);
  background: rgba(255,255,255,.02) !important;
  border-color: rgba(255,255,255,.05) !important;
  color: rgba(255,255,255,.70) !important;
}

/* Sublevel Hover */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link:hover{
  background: rgba(255,255,255,.035) !important;
  border-color: rgba(255,255,255,.10) !important;
}

/* Sublevel Active */
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav li.subnav-item.active > a.subnav-link,
.section-column.subnav-wrap
nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
ul.subnav-nav ul.subnav-nav a.subnav-link[aria-current="page"]{
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.90) !important;
  font-weight: 600;
}

/* Mobile */
@media (max-width: 991px){
  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation{
    position: static;
    margin-top: 8px;
  }

  .section-column.subnav-wrap
  nav[aria-label="Subnavigation"].frame.frame-type-subnavigation
  > .frame-container{
    border-radius: var(--vb-radius-lg) !important;
    padding: 12px !important;
  }
}