/* =========================================================
   vb-theme-dark.css – Vectorbirds Tactical Dark Theme (CLEAN)
   TYPO3 12.4 + bootstrap_package / Pizpalue

   Version: V2.2 – 2026-02-14

   Inhalt:
   - Dark Canvas + Typo
   - Breadcrumb: dezent, grid-aligned
   - Kontaktformular (TYPO3 Form)
   - Google Maps Embed
   - Header/Navbar: Force Tactical Dark
   - USP (Textpic Above): Bilder zentrieren + skalieren
   - Footer: Tactical Dark (clean + stable, ohne Layout-Drift)
   - BUTTON SYSTEM (global): Filled + Outline, konsistent, harmonisch
   ========================================================= */

/* =========================
   Root Variables
   ========================= */
:root{
  /* Dark base */
  --vb-bg: #0B1020;
  --vb-surface: rgba(255,255,255,.04);
  --vb-border: rgba(255,255,255,.10);

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

  /* Brand palette */
  --vb-primary: #A6FF00;        /* Lime */
  --vb-primary-hover: #93E600;  /* slightly darker */
  --vb-secondary: #FF8A00;      /* Orange */
  --vb-secondary-hover: #E97A00;
  --vb-tertiary: #2ED6FF;       /* Cyan */
  --vb-tertiary-hover: #12C3F0;
  --vb-quaternary: #8B5CFF;     /* Violet */
  --vb-quaternary-hover: #7A49FF;

  /* On-color text */
  --vb-on-accent-dark: #0B1020; /* dark text on bright accents */
  --vb-on-dark: rgba(255,255,255,.92);

  /* Footer */
  --vb-footer-bg: #171f33; /* alternativ: #232a3a */

  /* Button metrics */
  --vb-btn-radius: 14px;
  --vb-btn-pad-y: 12px;
  --vb-btn-pad-x: 20px;

  /* Accent (links etc.) */
  --vb-accent: var(--vb-primary);
  --vb-accent-hover: rgba(166,255,0,.92);

  /* Bootstrap mapping */
  --bs-primary: var(--vb-primary);
  --bs-primary-rgb: 166,255,0;

  --bs-warning: var(--vb-secondary);
  --bs-warning-rgb: 255,138,0;

  --bs-info: var(--vb-tertiary);
  --bs-info-rgb: 46,214,255;

  --bs-secondary: rgba(255,255,255,.16);
  --bs-secondary-rgb: 255,255,255;

  --bs-light: rgba(255,255,255,.92);
  --bs-light-rgb: 255,255,255;

  --bs-dark: var(--vb-bg);
  --bs-dark-rgb: 11,16,32;
}

/* =========================
   Canvas / Typography
   ========================= */
body{
  background: var(--vb-bg);
  color: var(--vb-text);
}

main, .bp-page-content{
  color: var(--vb-text);
}

p, li{
  color: var(--vb-text-muted);
  line-height: 1.65;
}

h1,h2,h3,h4{
  color: rgba(255,255,255,.94);
  letter-spacing: .01em;
}

/* Sections subtle */
.bp-page-content .section{ background: transparent; }
.bp-page-content .section:nth-of-type(even){ background: rgba(255,255,255,.02); }

/* =========================================================
   Breadcrumb – grid aligned + tactical
   ========================================================= */
nav.breadcrumb-section{
  padding-top: 18px !important;
  padding-bottom: 12px !important;
  background: transparent !important;
}

nav.breadcrumb-section > .container{
  display: flex;
  align-items: center;
}

nav.breadcrumb-section .breadcrumb{
  margin: 0 !important;
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 12px !important;
  padding: 10px 14px !important;
  box-shadow: 0 10px 22px rgba(0,0,0,.22) !important;
  backdrop-filter: blur(10px);
}

nav.breadcrumb-section .breadcrumb-item + .breadcrumb-item::before{
  color: rgba(255,255,255,.35) !important;
}

nav.breadcrumb-section .breadcrumb a{
  color: rgba(166,255,0,.92) !important;
  text-decoration: none !important;
}

nav.breadcrumb-section .breadcrumb a:hover{
  color: rgba(166,255,0,1) !important;
}

nav.breadcrumb-section .breadcrumb-item,
nav.breadcrumb-section .breadcrumb-item.active{
  color: rgba(255,255,255,.70) !important;
}

/* =========================================================
   GLOBAL BUTTON SYSTEM – konsistent (Filled + Outline)
   ========================================================= */

/* Base for ALL buttons */
.btn{
  border-radius: var(--vb-btn-radius) !important;
  padding: var(--vb-btn-pad-y) var(--vb-btn-pad-x) !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease, transform .12s ease;
}

.btn:active{
  transform: translateY(1px);
}

/* Accessible focus */
.btn:focus-visible{
  outline: 3px solid rgba(166,255,0,.22);
  outline-offset: 2px;
  box-shadow: none !important;
}

/* ---------- PRIMARY (filled) ---------- */
.btn-primary{
  background-color: var(--vb-primary) !important;
  border-color: var(--vb-primary) !important;
  color: var(--vb-on-accent-dark) !important;
}

.btn-primary:hover,
.btn-primary:focus{
  background-color: var(--vb-primary-hover) !important;
  border-color: var(--vb-primary-hover) !important;
  color: var(--vb-on-accent-dark) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- PRIMARY (outline) ---------- */
.btn-outline-primary{
  background: transparent !important;
  border-color: rgba(166,255,0,.55) !important;
  color: rgba(166,255,0,.95) !important;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus{
  background: rgba(166,255,0,.08) !important;
  border-color: rgba(166,255,0,.85) !important;
  color: rgba(166,255,0,1) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- WARNING / SECONDARY CTA (filled) -> ORANGE ---------- */
.btn-warning{
  background-color: var(--vb-secondary) !important;
  border-color: var(--vb-secondary) !important;
  color: var(--vb-on-accent-dark) !important;
}

.btn-warning:hover,
.btn-warning:focus{
  background-color: var(--vb-secondary-hover) !important;
  border-color: var(--vb-secondary-hover) !important;
  color: var(--vb-on-accent-dark) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- WARNING (outline) ---------- */
.btn-outline-warning{
  background: transparent !important;
  border-color: rgba(255,138,0,.55) !important;
  color: rgba(255,138,0,.95) !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus{
  background: rgba(255,138,0,.10) !important;
  border-color: rgba(255,138,0,.85) !important;
  color: rgba(255,170,70,1) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- INFO / TERTIARY (filled) ---------- */
.btn-info{
  background-color: var(--vb-tertiary) !important;
  border-color: var(--vb-tertiary) !important;
  color: var(--vb-on-accent-dark) !important;
}

.btn-info:hover,
.btn-info:focus{
  background-color: var(--vb-tertiary-hover) !important;
  border-color: var(--vb-tertiary-hover) !important;
  color: var(--vb-on-accent-dark) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- INFO (outline) ---------- */
.btn-outline-info{
  background: transparent !important;
  border-color: rgba(46,214,255,.55) !important;
  color: rgba(46,214,255,.95) !important;
}

.btn-outline-info:hover,
.btn-outline-info:focus{
  background: rgba(46,214,255,.10) !important;
  border-color: rgba(46,214,255,.85) !important;
  color: rgba(46,214,255,1) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- SECONDARY (neutral filled) ---------- */
.btn-secondary{
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: rgba(255,255,255,.92) !important;
}

.btn-secondary:hover,
.btn-secondary:focus{
  background: rgba(255,255,255,.14) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: rgba(255,255,255,.95) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- SECONDARY (neutral outline) ---------- */
.btn-outline-secondary{
  background: transparent !important;
  border-color: rgba(255,255,255,.30) !important;
  color: rgba(255,255,255,.92) !important;
}

.btn-outline-secondary:hover,
.btn-outline-secondary:focus{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.42) !important;
  color: rgba(255,255,255,1) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* ---------- LIGHT / INVERTED (filled) ---------- */
.btn-light{
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(255,255,255,.92) !important;
  color: var(--vb-on-accent-dark) !important;
}

.btn-light:hover,
.btn-light:focus{
  background: rgba(255,255,255,1) !important;
  border-color: rgba(255,255,255,1) !important;
  color: var(--vb-on-accent-dark) !important;
}

/* ---------- LIGHT (outline) ---------- */
.btn-outline-light{
  background: transparent !important;
  border-color: rgba(255,255,255,.45) !important;
  color: rgba(255,255,255,.92) !important;
}

.btn-outline-light:hover,
.btn-outline-light:focus{
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.70) !important;
  color: rgba(255,255,255,1) !important;
}

/* ---------- LINK buttons ---------- */
.btn-link{
  color: rgba(166,255,0,.92) !important;
  text-decoration: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.btn-link:hover,
.btn-link:focus{
  color: rgba(166,255,0,1) !important;
  text-decoration: underline !important;
}

/* ---------- Pizpalue/Legacy: btn-default (dein "Kontakt"-CTA) ---------- */
.btn-default{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.35) !important;
  color: rgba(255,255,255,.92) !important;
}

.btn-default:hover,
.btn-default:focus{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(166,255,0,.75) !important;
  color: rgba(255,255,255,1) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,.22) !important;
}

/* Optional: If any theme forces danger red on downloads, neutralize */
.btn-danger{
  background-color: #FF3B3B !important;
  border-color: #FF3B3B !important;
  color: var(--vb-on-accent-dark) !important;
}

/* =========================================================
   Kontaktformular – Dark Theme Fix (TYPO3 Form Framework)
   ========================================================= */
.form-container {
  color: rgba(255,255,255,0.86);
}

.form-container h2 {
  color: rgba(255,255,255,0.92);
}

.form-container .form-label,
.form-container legend {
  color: rgba(255,255,255,0.78);
}

.form-container .required {
  color: rgba(255,255,255,0.70);
}

.form-container .form-control,
.form-container textarea.form-control,
.form-container select.form-control {
  background: rgba(255,255,255,0.045) !important;
  color: rgba(255,255,255,0.88) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
  border-radius: 10px;
  box-shadow: none !important;
}

.form-container .form-control::placeholder {
  color: rgba(255,255,255,0.45);
}

.form-container .form-control:focus {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.22) !important;
  outline: none !important;
  box-shadow: 0 0 0 0.2rem rgba(255,255,255,0.06) !important;
}

.form-container input[type="file"].form-control {
  background: rgba(255,255,255,0.03) !important;
  color: rgba(255,255,255,0.78) !important;
}

.form-container input[type="file"].form-control::file-selector-button {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.90);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 8px;
  padding: 8px 12px;
  margin-right: 12px;
  cursor: pointer;
}

.form-container input[type="file"].form-control::file-selector-button:hover {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.20);
}

.form-container fieldset.form-element-radio {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 14px;
  padding: 14px 14px 8px;
}

.form-container fieldset.form-element-radio legend {
  padding: 0 6px;
  margin-bottom: 10px;
  color: rgba(255,255,255,0.78) !important;
}

.form-container .form-check {
  margin-top: 8px;
}

.form-container .form-check-wrapping-label {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.form-container .form-check-input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  background-color: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: none !important;
}

.form-container .form-check-input:checked {
  background-color: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
}

.form-container .form-check-label {
  color: rgba(255,255,255,0.72) !important;
  line-height: 1.35;
}

.form-container .form-actions .btn.btn-primary {
  background-color: var(--vb-primary) !important;
  border-color: var(--vb-primary) !important;
  color: var(--vb-on-accent-dark) !important;
}

.form-container .form-actions .btn.btn-primary:hover {
  background-color: var(--vb-primary-hover) !important;
  border-color: var(--vb-primary-hover) !important;
}

/* =========================================================
   Google Maps Embed: responsive + optisch passend
   ========================================================= */
.frame-type-html iframe[src*="google.com/maps"]{
  width: 100% !important;
  max-width: 100%;
  height: 420px;
  border: 1px solid rgba(255,255,255,0.10) !important;
  border-radius: 14px;
  overflow: hidden;
}

@media (max-width: 767px){
  .frame-type-html iframe[src*="google.com/maps"]{
    height: 320px;
  }
}

/* =========================================================
   Vectorbirds – Header/Navbar: Force Tactical Dark
   ========================================================= */
#page-header.bp-page-header.navbar,
#page-header.bp-page-header.navbar.navbar-mainnavigation {
  background-color: #171f33 !important; /* alternativ: #232a3a */
}

#page-header.bp-page-header::before,
#page-header.bp-page-header::after,
#page-header.bp-page-header.navbar::before,
#page-header.bp-page-header.navbar::after {
  background-color: #171f33 !important; /* alternativ: #232a3a */
  opacity: 1 !important;
}

#page-header .container-mainnavigation,
#page-header .navbar-collapse {
  background-color: transparent !important;
}

#page-header .nav-link,
#page-header .navbar-brand {
  color: rgba(255,255,255,0.88) !important;
}

/* =========================================================
   VB USP Reset – zurück auf Bootstrap/Pizpalue Default
   Version: V2.2 – 2026-02-14
   Zweck: Eigene USP-Bildskalierung deaktivieren
   ========================================================= */

.textpic.textpic-above .textpic-gallery,
.textpic.textpic-above .gallery-row,
.textpic.textpic-above .gallery-item,
.textpic.textpic-above figure.image{
  display: block !important;
  justify-content: initial !important;
  align-items: initial !important;
  gap: initial !important;
  width: auto !important;
  margin: initial !important;
  min-height: initial !important;
}

.textpic.textpic-above figure.image img{
  height: auto !important;
  width: 100% !important;     /* img-fluid / responsiv */
  max-width: 100% !important; /* keine künstliche Begrenzung */
  object-fit: initial !important;
  border-radius: initial !important; /* wenn Theme das setzt, gilt Theme */
}

/* =========================================================
   VB Footer – Tactical Dark (clean + stable)
   ========================================================= */

/* Outer footer wrappers */
footer,
#page-footer,
.bp-page-footer,
.page-footer,
.footer,
.footer-section,
.section-footer{
  background: var(--vb-footer-bg) !important;
  background-image: none !important;
}

/* If footer is wrapped in frames/containers, keep background consistent */
#page-footer .frame,
#page-footer .frame-group-container,
#page-footer .frame-group-inner,
#page-footer .frame-container,
#page-footer .frame-inner{
  background: transparent !important;
  background-image: none !important;
}

/* Kill overlays from merged.css (purely visual, no layout impact) */
footer, #page-footer, .bp-page-footer{
  position: relative;
}

footer::before, footer::after,
#page-footer::before, #page-footer::after,
.bp-page-footer::before, .bp-page-footer::after{
  position: absolute !important;
  inset: 0 !important;
  content: "" !important;
  background: var(--vb-footer-bg) !important;
  background-image: none !important;
  opacity: 1 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

footer > *, #page-footer > *, .bp-page-footer > *{
  position: relative;
  z-index: 1;
}

/* Main footer top section: Navigation | Contact */
.footer-menu-section{
  background: transparent !important;
  background-image: none !important;

  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 24px;

  /* layout */
  display: grid !important;
  grid-template-columns: 1fr 360px; /* right contact column */
  gap: 48px;
  align-items: start;

  /* reset theme oddities */
  float: none !important;
  text-align: left !important;
}

.footer-menu-section .footer-navigation,
.footer-menu-section .footer-contact{
  float: none !important;
  text-align: left !important;
  min-width: 0;
}

/* Navigation: 1st level as grid columns */
.footer-navigation-list{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-navigation-list-level-1{
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 18px 44px;
}

.footer-navigation-item-level-2{
  margin-top: 8px;
}

/* Contact typography */
.footer-contact-headline{
  margin-bottom: 12px;
  color: rgba(255,255,255,0.92) !important;
}

.footer-contact,
.footer-contact p,
.footer-contact a,
.footer-menu-section a,
.footer-info-section a,
.footer-menu-section,
.footer-info-section{
  color: rgba(255,255,255,0.88) !important;
}

.footer-menu-section a:hover,
.footer-info-section a:hover{
  color: rgba(166,255,0,1) !important;
}

/* Footer info section: meta, language, copyright, socials */
.footer-info-section{
  background: transparent !important;
  border-top: 1px solid rgba(255,255,255,0.10) !important;

  max-width: 1280px;
  margin: 0 auto;
  padding: 22px 24px 32px;

  text-align: center;
}

.footer-info-section .meta-menu,
.footer-info-section .language-menu{
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-info-section .meta-menu{
  display: inline-flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}

.footer-info-section .language-menu{
  display: inline-flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 14px;
}

.footer-sociallinks .bootstrappackageicon{
  color: rgba(255,255,255,0.88) !important;
}
.footer-sociallinks a:hover .bootstrappackageicon{
  color: rgba(166,255,0,1) !important;
}

/* Responsive */
@media (max-width: 1200px){
  .footer-navigation-list-level-1{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 992px){
  .footer-menu-section{
    grid-template-columns: 1fr !important;
  }
  .footer-navigation-list-level-1{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }
}

@media (max-width: 576px){
  .footer-menu-section{
    padding: 36px 18px;
  }
  .footer-info-section{
    padding: 18px 18px 26px;
  }
  .footer-navigation-list-level-1{
    grid-template-columns: 1fr;
  }
}
/* =========================================================
   VB Consistency Patch – Border Radius System
   Version: V2.2 – 2026-02-14
   Zweck: Einheitliche Eckenradien (links & rechts)
   ========================================================= */

:root{
  --vb-radius-xl: 4px;
  --vb-radius-lg: 3px;
  --vb-radius-md: 2px;
}

/* Content-Boxen / Frames rechts */
.bp-page-content .frame-container,
.bp-page-content .frame,
.bp-page-content .accordion,
.bp-page-content .accordion-item,
.bp-page-content .card,
.bp-page-content .textpic,
.bp-page-content .gallery-row,
.bp-page-content .gallery-item,
.bp-page-content figure.image img{
  border-radius: var(--vb-radius-xl) !important;
}

/* Accordion: saubere Innenkanten */
.bp-page-content .accordion-item{
  overflow: hidden;
}

.bp-page-content .accordion-button{
  border-radius: 0 !important; /* innerhalb des Items, sonst doppelte Rundung */
}

/* Optional: wenn du harte 90° wirklich nirgendwo willst */
.bp-page-content .frame-container{
  overflow: hidden;
}
/* =========================================================
   VB Badges – Dark Theme (fix white bars)
   ========================================================= */
.badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 2px; /* kantig */
}

.badge.bg-secondary{
  background: rgba(255,255,255,.08) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: rgba(255,255,255,.88) !important;
}
.accordion-button{
  background: rgba(255,255,255,.02) !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
}
.accordion-button:not(.collapsed){
  background: rgba(255,255,255,.04) !important;
  box-shadow: none !important;
}
.accordion-body{
  color: rgba(255,255,255,.72) !important;
}
.badge.bg-secondary{
  background: rgba(255,255,255,.02) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  color: rgba(255,255,255,.86) !important;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .72rem;
  border-radius: 2px !important;
}
/* =========================================================
   TEAM – Badges full width row
   Version: V2.3 – 2026-02-14
   ========================================================= */

.vb-badges-full{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

/* einzelne Badge */
.vb-badge{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 12px;
  font-weight: 800;
  font-size: .85rem;
  letter-spacing: .01em;

  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.90);

  border-radius: var(--vb-radius-xl); /* bei dir aktuell 4px */
  white-space: nowrap;
}

/* optional: Hover */
.vb-badge:hover{
  border-color: rgba(166,255,0,.35);
  background: rgba(166,255,0,.06);
}
/* =========================================================
   VB Patch – harte, saubere Ecken (keine abgeschnittenen Border)
   Zweck: Radius/Borders/Overflow konsistent auf denselben Boxen
   ========================================================= */

/* 1) Frames: Radius + overflow auf dem äußeren Container */
.bp-page-content .frame{
  border-radius: var(--vb-radius-xl) !important;
  overflow: hidden;                 /* sorgt dafür, dass nichts übersteht */
  background-clip: padding-box;
}

/* 2) Alle inneren Wrapper übernehmen exakt den gleichen Radius */
.bp-page-content .frame .frame-group-container,
.bp-page-content .frame .frame-group-inner,
.bp-page-content .frame .frame-container,
.bp-page-content .frame .frame-inner{
  border-radius: inherit !important;
  background-clip: padding-box;
}

/* 3) Cards/Boxen mit Border (deine Kästen): Radius + overflow immer mit */
.bp-page-content .border,
.bp-page-content .card,
.bp-page-content .accordion-item,
.bp-page-content .textmedia,
.bp-page-content .textpic{
  border-radius: var(--vb-radius-xl) !important;
  overflow: hidden;
  background-clip: padding-box;
}

/* 4) Accordion Buttons: keine “Innenrundung” die Ecken zerstört */
.bp-page-content .accordion-button{
  border-radius: 0 !important;
}
/* vb-theme-dark.css
   Version: 2026-02-15 / V1.2
   Fix: Badge Lesbarkeit + Mission Layout
*/

.badge.vb-badge{
  background: var(--vb-accent, #b7ff00);   /* dein Neon-Grün */
  color: #0B1020;                         /* dunkles Navy -> maximaler Kontrast */
  font-weight: 800;
  letter-spacing: .02em;
  padding: .55rem .95rem;
  border-radius: .6rem;
  text-transform: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}
/* vb-theme-dark.css
   Version: 2026-02-15 / V1.2
*/

.badge.vb-badge{
  background: var(--vb-accent, #b7ff00);
  color: #0B1020;
  font-weight: 800;
  letter-spacing: .02em;
  padding: .55rem .95rem;
  border-radius: .6rem;
  box-shadow: 0 0 0 1px rgba(0,0,0,.25) inset;
}

.card.vb-card{
  border-radius: 18px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.card.vb-card:hover{
  transform: translateY(-2px);
}

.vb-kpis .card{
  border-radius: 16px;
}

.vb-kpis .card-body{
  padding: .9rem .75rem;
}
/* =========================================================
   vb-layout.css — V2026-02-15.1
   Fix: Subnavigation (linkes Menü) klebt in Mobile-View am Footer
   ========================================================= */

@media (max-width: 991.98px) {

  /* Der rechte Spalten-Wrapper (Subnav) wird im Mobile gestackt */
  .bp-page-content .section-column.subnav-wrap{
    margin-top: 1.25rem;
    padding-bottom: 2.25rem; /* Luft zum Footer */
  }

  /* Subnav-Frame selbst (falls Margin/Padding vom Theme genullt wird) */
  .bp-page-content .frame.frame-type-subnavigation{
    margin-bottom: 2.25rem;  /* Luft zum Footer */
  }

  /* Zusätzlich: etwas Luft unter der eigentlichen Liste */
  .bp-page-content .frame.frame-type-subnavigation .subnav-nav{
    margin-bottom: 0;
    padding-bottom: 0.75rem;
  }
}
/* =========================================================
   vb-layout.css — V2026-02-15.2
   Mobile Fix: Subnavigation erzeugt großen Leerraum (sticky/height/min-height Reset)
   ========================================================= */

@media (max-width: 991.98px) {

  /* Falls das Layout im Mobile noch als Flex-Row “streckt” */
  .bp-page-content .section-row{
    align-items: flex-start !important;
  }

  /* Subnav-Spalte: KEIN Sticky, KEIN 100%-Stretch, KEINE Mindesthöhe */
  .bp-page-content .section-column.subnav-wrap{
    position: static !important;
    top: auto !important;
    bottom: auto !important;

    height: auto !important;
    min-height: 0 !important;

    align-self: auto !important;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem; /* kleiner Abstand zum Footer */
    padding-bottom: 0 !important;
  }

  /* Subnav-Frame selbst ebenfalls “entkoppeln” */
  .bp-page-content .frame.frame-type-subnavigation{
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }
}
/* =========================================================
   vb-layout.css — V2026-02-15.3
   Mobile Fix: großer Leerraum im geöffneten Burger-Menü (zwischen Submenu-Box und restlicher Navigation)
   Ursache: flex + justify-content: space-between / 100vh-Stretch im Collapse-Container
   ========================================================= */

@media (max-width: 991.98px){

  /* Der “Burger”-Container darf im Mobile NICHT space-between strecken */
  #mainnavigation.collapse.show{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;

    height: auto !important;
    min-height: 0 !important;

    /* falls ein 100vh/calc(...) gesetzt ist */
    max-height: calc(100vh - 96px) !important; /* 96px = grob Headerhöhe; optional anpassen */
    overflow-y: auto !important;
  }

  /* alle direkten Wrapper ebenfalls entkoppeln */
  .navbar .navbar-collapse.show{
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  /* falls ein UL/Wrapper nach unten gedrückt wird */
  #mainnavigation.collapse.show > ul.navbar-nav{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* falls irgendein Container “push to bottom” macht */
  #mainnavigation.collapse.show .nav,
  #mainnavigation.collapse.show .navbar-nav{
    justify-content: flex-start !important;
  }
}
/* Mobile: Burger-Menü darf nicht auf "volle Höhe" gestreckt werden */
@media (max-width: 991.98px){

  header#page-header .container-mainnavigation #mainnavigation.navbar-collapse.show{
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 96px) !important; /* 96px ggf. anpassen */
    overflow-y: auto !important;
  }

  /* UL darf nicht wachsen / keinen "Spacer" erzeugen */
  header#page-header .container-mainnavigation #mainnavigation.navbar-collapse.show > ul.navbar-nav{
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Falls ein Wrapper/Block im Menü "aufzieht" */
  header#page-header .container-mainnavigation #mainnavigation.navbar-collapse.show *{
    flex-grow: 0 !important;
  }
}