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

   Version: V2.4 – 2026-05-20

   Bereinigte Fassung:
   - Dopplungen und gewachsene Patch-Blöcke zusammengeführt
   - Footer-Language-Syntaxfehler korrigiert
   - Karten-/Panel-System konsolidiert
   - Badge-Varianten sauber getrennt
   - Header, Breadcrumb, Dark Panels und Contentflächen vereinheitlicht
   - Mobile-Fixes für Subnavigation und Burger-Menü erhalten
   ========================================================= */


/* =========================================================
   1. Root Variables / Design Tokens
   ========================================================= */
:root{
  /* Zentrale Flächenfarben */
  --vb-bg-page: #0B1020;
  --vb-bg-panel: #171F33;
  --vb-bg-control: #0F1627;
  --vb-bg-active: #232C40;

  /* Grenzen / Konturen */
  --vb-border-soft: rgba(255,255,255,.10);
  --vb-border-strong: rgba(255,255,255,.18);

  /* Textfarben */
  --vb-text-main: rgba(255,255,255,.92);
  --vb-text-body: rgba(255,255,255,.78);
  --vb-text-muted: rgba(255,255,255,.66);

  /* Hauptakzentfarbe Vectorbirds */
  --vb-accent-lime: #A6FF00;
  --vb-accent-lime-hover: #93E600;

  /* Ergänzende Akzentfarben */
  --vb-secondary: #FF8A00;
  --vb-secondary-hover: #E97A00;
  --vb-tertiary: #2ED6FF;
  --vb-tertiary-hover: #12C3F0;
  --vb-quaternary: #8B5CFF;
  --vb-quaternary-hover: #7A49FF;

  /* Kompatibilitätsvariablen */
  --vb-bg: var(--vb-bg-page);
  --vb-surface: rgba(255,255,255,.04);
  --vb-border: var(--vb-border-soft);
  --vb-text: var(--vb-text-main);
  --vb-primary: var(--vb-accent-lime);
  --vb-primary-hover: var(--vb-accent-lime-hover);
  --vb-accent: var(--vb-accent-lime);
  --vb-accent-hover: var(--vb-accent-lime-hover);

  /* Text auf kräftigen Flächen */
  --vb-on-accent-dark: #0B1020;
  --vb-on-dark: rgba(255,255,255,.92);

  /* Footer */
  --vb-footer-bg: var(--vb-bg-panel);

  /* Radius-System */
  --vb-radius-xl: 4px;
  --vb-radius-lg: 3px;
  --vb-radius-md: 2px;

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

  /* 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-page);
  --bs-dark-rgb: 11,16,32;
}


/* =========================================================
   2. Canvas / Grundtypografie / Seitenatmosphäre
   ========================================================= */
body{
  background: var(--vb-bg);
  color: var(--vb-text);
}

.body-bg{
  background:
    radial-gradient(
      ellipse at 78% 14%,
      rgba(58, 84, 145, 0.12) 0%,
      rgba(41, 62, 112, 0.07) 24%,
      rgba(20, 31, 59, 0.02) 48%,
      rgba(11, 16, 32, 0) 68%
    ),
    radial-gradient(
      ellipse at 14% 76%,
      rgba(35, 53, 98, 0.08) 0%,
      rgba(25, 40, 75, 0.04) 28%,
      rgba(11, 16, 32, 0) 56%
    ),
    var(--vb-bg-page) !important;
}

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;
}

.bp-page-content .section{
  background: transparent;
}

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


/* =========================================================
   3. Typography System – Contentbereich
   ========================================================= */
.bp-page-content h1,
.bp-page-content .h1{
  font-size: clamp(2.35rem, 2.2vw, 3.25rem) !important;
  line-height: 1.16 !important;
  font-weight: 650 !important;
  letter-spacing: -0.01em !important;
  color: var(--vb-text-main) !important;
}

.bp-page-content h2,
.bp-page-content .h2{
  font-size: clamp(1.75rem, 1.45vw, 2.35rem) !important;
  line-height: 1.22 !important;
  font-weight: 620 !important;
  letter-spacing: -0.005em !important;
  color: var(--vb-text-main) !important;
}

.bp-page-content h3,
.bp-page-content .h3{
  font-size: clamp(1.35rem, 0.8vw, 1.75rem) !important;
  line-height: 1.28 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--vb-text-main) !important;
}

.bp-page-content h4,
.bp-page-content .h4{
  font-size: clamp(1.15rem, 0.45vw, 1.35rem) !important;
  line-height: 1.35 !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  color: var(--vb-text-main) !important;
}

.bp-page-content .frame-header .element-header.h1 + .element-subheader{
  font-size: clamp(1.45rem, 1.1vw, 1.85rem) !important;
  line-height: 1.28 !important;
  font-weight: 560 !important;
  letter-spacing: 0 !important;
  color: rgba(255,255,255,.88) !important;
}


/* =========================================================
   4. Eyebrow / Rubrikzeile
   ========================================================= */
.vb-eyebrow{
  display: inline-flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0 0 0.9rem 0;
  color: rgba(155, 234, 69, 0.88);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

.vb-eyebrow::before{
  content: "";
  display: block;
  width: 1.35rem;
  height: 1px;
  background: rgba(155, 234, 69, 0.78);
}


/* =========================================================
   5. Header / Navbar – Tactical Dark
   ========================================================= */
#page-header.bp-page-header.navbar,
#page-header.bp-page-header.navbar.navbar-mainnavigation{
  background-color: var(--vb-bg-panel) !important;
  border-bottom: 1px solid var(--vb-border-soft) !important;
  box-shadow: 0 10px 28px rgba(0,0,0,.20) !important;
}

#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: var(--vb-bg-panel) !important;
  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;
}


/* =========================================================
   6. 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;
  padding: 10px 14px !important;
  background: var(--vb-bg-panel) !important;
  border: 1px solid var(--vb-border-soft) !important;
  border-radius: var(--vb-radius-lg) !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: var(--vb-text-muted) !important;
}


/* =========================================================
   7. Global Button System – Filled + Outline
   ========================================================= */
.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);
}

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

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

.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 / orange CTA */
.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;
}

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

.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;
}

/* Neutral Secondary */
.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;
}

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

.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 */
.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 danger fallback */
.btn-danger{
  background-color: #FF3B3B !important;
  border-color: #FF3B3B !important;
  color: var(--vb-on-accent-dark) !important;
}


/* =========================================================
   8. Panel-, Frame- und Card-System
   ========================================================= */

/* Einheitliche Ecken / sauber abgeschnittene Innenflächen */
.bp-page-content .frame,
.bp-page-content .frame-container,
.bp-page-content .accordion,
.bp-page-content .accordion-item,
.bp-page-content .card,
.bp-page-content .textpic,
.bp-page-content .textmedia,
.bp-page-content .gallery-row,
.bp-page-content .gallery-item,
.bp-page-content figure.image img,
.bp-page-content .border{
  border-radius: var(--vb-radius-xl) !important;
  background-clip: padding-box;
}

.bp-page-content .frame,
.bp-page-content .border,
.bp-page-content .card,
.bp-page-content .accordion-item,
.bp-page-content .textmedia,
.bp-page-content .textpic{
  overflow: hidden;
}

.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;
}

/* Rechte Haupt-Content-Panels */
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-primary,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-tertiary,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-quaternary{
  background: var(--vb-bg-panel) !important;
  background-image: none !important;
  border: 1px solid var(--vb-border-soft) !important;
  border-radius: var(--vb-radius-lg) !important;
  box-shadow: 0 14px 34px rgba(0,0,0,.22) !important;
  background-clip: padding-box;
}

.bp-page-content .section-column.maincontent-wrap .frame.frame-background-primary .frame-group-container,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-primary .frame-group-inner,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-primary .frame-container,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-primary .frame-inner,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-tertiary .frame-group-container,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-tertiary .frame-group-inner,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-tertiary .frame-container,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-tertiary .frame-inner,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-quaternary .frame-group-container,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-quaternary .frame-group-inner,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-quaternary .frame-container,
.bp-page-content .section-column.maincontent-wrap .frame.frame-background-quaternary .frame-inner{
  background: transparent !important;
  background-image: none !important;
}

/* Cards global, layoutunabhängig konsistent */
.bp-page-content .card{
  background: var(--vb-bg-control) !important;
  border: 1px solid var(--vb-border-soft) !important;
}

.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;
}


/* =========================================================
   9. Dark Panels / TYPO3 Background Dark
   ========================================================= */
.frame-background-dark,
.bg-dark,
.section-default.frame-background-dark,
.frame-layout-default.frame-background-dark{
  background: #182544 !important;
  color: #b8c2d6 !important;
  border: 1px solid #2b3554 !important;
  border-radius: var(--vb-radius-lg) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18) !important;
}

.frame-background-dark h1,
.frame-background-dark h2,
.frame-background-dark h3,
.frame-background-dark h4,
.frame-background-dark h5,
.frame-background-dark h6,
.bg-dark h1,
.bg-dark h2,
.bg-dark h3,
.bg-dark h4,
.bg-dark h5,
.bg-dark h6{
  color: #eef2f8 !important;
}

.frame-background-dark p,
.frame-background-dark li,
.frame-background-dark .lead,
.frame-background-dark small,
.frame-background-dark span,
.bg-dark p,
.bg-dark li,
.bg-dark .lead,
.bg-dark small,
.bg-dark span{
  color: #b8c2d6 !important;
}

.frame-background-dark .accordion-button,
.frame-background-dark .accordion-body,
.frame-background-dark .btn:not(.btn-primary):not(.btn-success),
.bg-dark .accordion-button,
.bg-dark .accordion-body,
.bg-dark .btn:not(.btn-primary):not(.btn-success){
  background: #0b1430 !important;
  color: #eef2f8 !important;
  border-color: #2b3554 !important;
}

.frame-background-dark .accordion-button:not(.collapsed),
.bg-dark .accordion-button:not(.collapsed){
  background: #111c39 !important;
  color: #eef2f8 !important;
  box-shadow: none !important;
}


/* =========================================================
   10. Accordions
   ========================================================= */
.accordion-button{
  background: rgba(255,255,255,.02) !important;
  color: rgba(255,255,255,.92) !important;
  border: 0 !important;
  border-radius: 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;
}

.bp-page-content .section-column.maincontent-wrap .accordion-item{
  background: var(--vb-bg-control) !important;
  border-color: var(--vb-border-soft) !important;
}

.bp-page-content .section-column.maincontent-wrap .accordion-button{
  background: var(--vb-bg-control) !important;
  color: var(--vb-text-main) !important;
}

.bp-page-content .section-column.maincontent-wrap .accordion-button:not(.collapsed){
  background: var(--vb-bg-active) !important;
  color: var(--vb-text-main) !important;
}

.bp-page-content .section-column.maincontent-wrap .accordion-body{
  background: var(--vb-bg-control) !important;
  color: var(--vb-text-body) !important;
}


/* =========================================================
   11. Badges
   ========================================================= */
.badge{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .45rem .65rem;
  font-weight: 700;
  letter-spacing: .01em;
  border-radius: 2px;
}

.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;
}

/* Akzent-Badge, z. B. Mission- oder Produktkennzeichnungen */
.badge.vb-badge{
  background: var(--vb-accent, #b7ff00);
  color: #0B1020;
  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;
}

/* Neutrale Badge-Reihe, z. B. Team-/Eigenschaftslabels */
.vb-badges-full{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 6px;
}

.vb-badges-full .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);
  white-space: nowrap;
}

.vb-badges-full .vb-badge:hover{
  border-color: rgba(166,255,0,.35);
  background: rgba(166,255,0,.06);
}


/* =========================================================
   12. TYPO3 Form Framework – Kontaktformular Dark Theme
   ========================================================= */
.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;
}


/* =========================================================
   13. Tabellen in dunklen Panels
   ========================================================= */
.frame-background-primary .table,
.frame-background-primary .table td,
.frame-background-primary .table th{
  color: rgba(255, 255, 255, 0.88);
}

.frame-background-primary .table td:first-child{
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.frame-background-primary .table td:last-child{
  color: rgba(255, 255, 255, 0.92);
}

.frame-background-primary .table > :not(caption) > * > *{
  background-color: rgba(8, 14, 31, 0.55);
  border-bottom-color: rgba(255, 255, 255, 0.20);
}


/* =========================================================
   14. Google Maps Embed
   ========================================================= */
.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;
  }
}


/* =========================================================
   15. USP Reset – Textpic Above zurück auf Theme-Default
   ========================================================= */
.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;
  max-width: 100% !important;
  object-fit: initial !important;
  border-radius: initial !important;
}


/* =========================================================
   16. Mobile Fixes – Subnavigation und Burger-Menü
   ========================================================= */
@media (max-width: 991.98px){
  /* Mobile Layout darf Subnav-Spalte nicht strecken */
  .bp-page-content .section-row{
    align-items: flex-start !important;
  }

  .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;
    padding-bottom: 0 !important;
  }

  .bp-page-content .frame.frame-type-subnavigation{
    position: static !important;
    height: auto !important;
    min-height: 0 !important;
    margin-bottom: 0 !important;
  }

  .bp-page-content .frame.frame-type-subnavigation .subnav-nav{
    margin-bottom: 0;
    padding-bottom: 0.75rem;
  }

  /* Geöffnetes Burger-Menü darf keinen künstlichen Leerraum erzeugen */
  #mainnavigation.collapse.show{
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100vh - 96px) !important;
    overflow-y: auto !important;
  }

  .navbar .navbar-collapse.show{
    justify-content: flex-start !important;
    align-items: stretch !important;
  }

  #mainnavigation.collapse.show > ul.navbar-nav{
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  #mainnavigation.collapse.show .nav,
  #mainnavigation.collapse.show .navbar-nav{
    justify-content: flex-start !important;
  }

  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;
    overflow-y: auto !important;
  }

  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;
  }

  header#page-header .container-mainnavigation #mainnavigation.navbar-collapse.show *{
    flex-grow: 0 !important;
  }
}


/* =========================================================
   17. Vectorbirds Footer
   ========================================================= */
#page-footer.bp-page-footer{
  background: #232a3a;
  color: rgba(255, 255, 255, 0.78);
  padding: 0;
  border-top: 1px solid rgba(255,255,255,.08);
}

.vb-footer{
  max-width: 1320px;
  margin: 0 auto;
  padding: 54px 32px 18px;
}

.vb-footer__main{
  display: grid;
  grid-template-columns: 1.35fr 1fr 1.1fr;
  gap: 64px;
  align-items: start;
}

.vb-footer__column h3{
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.96);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.35;
}

.vb-footer__column p,
.vb-footer__column address,
.vb-footer__column li{
  color: rgba(255, 255, 255, 0.76);
  font-size: 1rem;
  line-height: 1.7;
}

.vb-footer__column p{
  margin: 0;
}

.vb-footer__brand p{
  max-width: 34rem;
}

.vb-footer__column address{
  margin: 0;
  font-style: normal;
}

.vb-footer__contact{
  margin-top: 14px !important;
}

.vb-footer__list{
  margin: 0;
  padding: 0;
  list-style: none;
}

.vb-footer__list li{
  position: relative;
  padding-left: 18px;
  margin-bottom: 8px;
}

.vb-footer__list li::before{
  content: "›";
  position: absolute;
  left: 0;
  top: 0;
  color: #73be1f;
  font-weight: 700;
}

.vb-footer a{
  color: rgba(255, 255, 255, 0.84);
  text-decoration: none;
  transition: color 0.2s ease;
}

.vb-footer a:hover,
.vb-footer a:focus{
  color: #9bea45;
  text-decoration: none;
}

.vb-footer__bottom{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  margin-top: 42px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 0.95rem;
}

.vb-footer__copyright{
  color: rgba(255, 255, 255, 0.64);
}

.vb-footer__meta{
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.vb-footer__meta a{
  color: rgba(255, 255, 255, 0.68);
}

.vb-footer__meta a:hover,
.vb-footer__meta a:focus{
  color: #9bea45;
}


/* =========================================================
   18. Footer Language Switch
   ========================================================= */
.vb-footer-language-wrap{
  max-width: 1320px;
  margin: -4px auto 0;
  padding: 0 32px 22px;
  display: flex;
  justify-content: flex-end;
}

.vb-footer-language ul{
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.vb-footer-language li{
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.vb-footer-language li:nth-child(1)::before,
.vb-footer-language li:nth-child(2)::before{
  content: "";
  display: inline-block;
  width: 18px;
  height: 12px;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 1px;
  flex: 0 0 auto;
}

/* Deutschland */
.vb-footer-language li:nth-child(1)::before{
  background:
    linear-gradient(
      to bottom,
      #000000 0%,
      #000000 33.33%,
      #dd0000 33.33%,
      #dd0000 66.66%,
      #ffce00 66.66%,
      #ffce00 100%
    );
}

/* Großbritannien */
.vb-footer-language li:nth-child(2)::before{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 30'%3E%3Crect width='60' height='30' fill='%23012169'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23fff' stroke-width='6'/%3E%3Cpath d='M0 0L60 30M60 0L0 30' stroke='%23C8102E' stroke-width='3'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23fff' stroke-width='10'/%3E%3Cpath d='M30 0V30M0 15H60' stroke='%23C8102E' stroke-width='6'/%3E%3C/svg%3E");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.vb-footer-language a{
  color: rgba(255,255,255,.68);
  font-size: .95rem;
  text-decoration: none;
  transition: color .2s ease;
}

.vb-footer-language a:hover,
.vb-footer-language a:focus{
  color: #9bea45;
}

.vb-footer-language .is-active a{
  color: #9bea45;
  font-weight: inherit;
}

.vb-footer-language .is-disabled{
  color: rgba(255,255,255,.34);
  font-size: .95rem;
}


/* =========================================================
   19. Footer Responsive
   ========================================================= */
@media (max-width: 991px){
  .vb-footer{
    padding: 48px 24px 24px;
  }

  .vb-footer__main{
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .vb-footer__bottom{
    flex-direction: column;
    align-items: flex-start;
    margin-top: 36px;
  }

  .vb-footer-language-wrap{
    margin: -8px auto 0;
    padding: 0 24px 24px;
    justify-content: flex-start;
  }
}

@media (max-width: 575px){
  .vb-footer{
    padding: 40px 20px 22px;
  }

  .vb-footer__column h3{
    font-size: 1.05rem;
  }

  .vb-footer__column p,
  .vb-footer__column address,
  .vb-footer__column li{
    font-size: 0.96rem;
  }

  .vb-footer__meta{
    gap: 18px;
  }

  .vb-footer-language-wrap{
    padding: 0 20px 22px;
  }
}

/* ============================================================
   20. Vectorbirds – Global Watermark + Header Navigation Fixes
   Version: V2.5 – 2026-05-22
   - Globales Wasserzeichen oben rechts
   - Korrigierter Logo-Pfad nach /logo/comp/
   - Keine eigenen Mask-Icons
   - Icons über TYPO3-/Bootstrap-/Pizpalue-Bordmittel
   - Home-Unterstrich auf Unterseiten neutralisiert
   ============================================================ */

:root {
  --vb-watermark-opacity: 0.01;

  --vb-nav-icon-color: rgba(132, 190, 28, 0.72);
  --vb-nav-icon-color-hover: rgba(141, 255, 0, 0.92);
  --vb-nav-icon-color-current: var(--vb-accent, #8dff00);
}

/* ------------------------------------------------------------
   Globales Wasserzeichen oben rechts
   ------------------------------------------------------------ */

body::before {
  content: "";
  position: fixed;

  top: -260px;
  right: -260px;

  width: clamp(680px, 72vw, 1280px);
  height: clamp(680px, 72vw, 1280px);

  background-image: url("/fileadmin/vectorbirds/images/logo/comp/vectorbirds-mark-white.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;

  opacity: var(--vb-watermark-opacity);
  pointer-events: none;
  z-index: 1;
}

/* Sticky Header nicht in der Position verändern, nur darüber legen */
#page-header,
#page-header.navbar,
#page-header.sticky-top,
.navbar.sticky-top {
  z-index: 1030;
}

@media (max-width: 991.98px) {
  body::before {
    top: -170px;
    right: -180px;
    width: 760px;
    height: 760px;
  }
}

@media (max-width: 575.98px) {
  body::before {
    top: -120px;
    right: -140px;
    width: 560px;
    height: 560px;
    opacity: 0.01;
  }
}

/* ------------------------------------------------------------
   Header Navigation Icon Colors
   Für Icons aus TYPO3-/Bootstrap-/Pizpalue-Bordmitteln
   ------------------------------------------------------------ */

.navbar .nav-link i,
.navbar .nav-link svg,
.navbar .nav-link .icon,
.mainnavigation .nav-link i,
.mainnavigation .nav-link svg,
.mainnavigation .nav-link .icon {
  color: var(--vb-nav-icon-color);
  fill: currentColor;
  stroke: currentColor;
  opacity: 0.88;
  transition:
    color 0.18s ease,
    opacity 0.18s ease,
    filter 0.18s ease;
}

.navbar .nav-link:hover i,
.navbar .nav-link:hover svg,
.navbar .nav-link:hover .icon,
.mainnavigation .nav-link:hover i,
.mainnavigation .nav-link:hover svg,
.mainnavigation .nav-link:hover .icon {
  color: var(--vb-nav-icon-color-hover);
  opacity: 1;
}

/* Nur echte aktuelle Seite hell hervorheben */
.navbar .nav-link[aria-current="page"] i,
.navbar .nav-link[aria-current="page"] svg,
.navbar .nav-link[aria-current="page"] .icon,
.mainnavigation .nav-link[aria-current="page"] i,
.mainnavigation .nav-link[aria-current="page"] svg,
.mainnavigation .nav-link[aria-current="page"] .icon {
  color: var(--vb-nav-icon-color-current);
  opacity: 1;
}

/* TYPO3/Bootstrap .active zurücknehmen, wenn es nicht die echte aktuelle Seite ist */
.navbar .nav-link.active:not([aria-current="page"]) i,
.navbar .nav-link.active:not([aria-current="page"]) svg,
.navbar .nav-link.active:not([aria-current="page"]) .icon,
.mainnavigation .nav-link.active:not([aria-current="page"]) i,
.mainnavigation .nav-link.active:not([aria-current="page"]) svg,
.mainnavigation .nav-link.active:not([aria-current="page"]) .icon {
  color: var(--vb-nav-icon-color);
  opacity: 0.88;
}

/* ------------------------------------------------------------
   Home-Unterstrich auf Unterseiten entfernen
   Annahme: Home ist der erste Hauptmenüpunkt
   ------------------------------------------------------------ */

body:not(.page-uid-3) .navbar .navbar-nav > .nav-item:first-child > .nav-link.active,
body:not(.page-uid-3) .mainnavigation .navbar-nav > .nav-item:first-child > .nav-link.active {
  border-bottom-color: transparent !important;
  box-shadow: none !important;
  text-decoration: none !important;
}

body:not(.page-uid-3) .navbar .navbar-nav > .nav-item:first-child > .nav-link.active::before,
body:not(.page-uid-3) .navbar .navbar-nav > .nav-item:first-child > .nav-link.active::after,
body:not(.page-uid-3) .mainnavigation .navbar-nav > .nav-item:first-child > .nav-link.active::before,
body:not(.page-uid-3) .mainnavigation .navbar-nav > .nav-item:first-child > .nav-link.active::after {
  opacity: 0 !important;
  transform: scaleX(0) !important;
  border-bottom-color: transparent !important;
  background-color: transparent !important;
}
/* ============================================================
   Vectorbirds – Dark Theme Table Styling
   Version: V1.0 – 2026-05-26
   Zweck: Lesbare Tabellen im dunklen Vectorbirds-Layout
   ============================================================ */

/* Tabellen-Wrapper */
.maincontent-wrap figure.table,
.bp-page-content figure.table {
  margin: 2.2rem 0;
}

/* Responsive Container optisch als Card */
.maincontent-wrap figure.table .table-responsive,
.bp-page-content figure.table .table-responsive {
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  background: rgba(8, 14, 30, 0.62);
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22);
}

/* Bootstrap-Tabellenvariablen im Dark Theme überschreiben */
.maincontent-wrap table.table,
.bp-page-content table.table {
  --bs-table-color: rgba(255, 255, 255, 0.82);
  --bs-table-bg: transparent;
  --bs-table-border-color: rgba(255, 255, 255, 0.14);
  --bs-table-striped-color: rgba(255, 255, 255, 0.86);
  --bs-table-striped-bg: rgba(255, 255, 255, 0.035);
  --bs-table-hover-color: rgba(255, 255, 255, 0.95);
  --bs-table-hover-bg: rgba(141, 255, 0, 0.055);

  width: 100%;
  min-width: 920px;
  margin-bottom: 0;
  color: var(--bs-table-color);
  background-color: transparent;
  border-color: var(--bs-table-border-color);
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.95rem;
  line-height: 1.55;
}

/* Tabellenkopf */
.maincontent-wrap table.table thead th,
.bp-page-content table.table thead th {
  padding: 1rem 1rem;
  color: rgba(255, 255, 255, 0.96);
  background: rgba(141, 255, 0, 0.08);
  border-bottom: 1px solid rgba(141, 255, 0, 0.28);
  font-weight: 700;
  vertical-align: bottom;
}

/* Tabellenzellen */
.maincontent-wrap table.table tbody td,
.bp-page-content table.table tbody td {
  padding: 1rem 1rem;
  color: rgba(255, 255, 255, 0.78);
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.11);
  vertical-align: top;
}

/* Erste Spalte stärker gewichten */
.maincontent-wrap table.table tbody td:first-child,
.bp-page-content table.table tbody td:first-child {
  color: rgba(255, 255, 255, 0.94);
  font-weight: 700;
}

/* Strong-Tags innerhalb Tabellen */
.maincontent-wrap table.table strong,
.bp-page-content table.table strong {
  color: rgba(255, 255, 255, 0.96);
  font-weight: 700;
}

/* Hover dezent */
.maincontent-wrap table.table tbody tr:hover td,
.bp-page-content table.table tbody tr:hover td {
  color: rgba(255, 255, 255, 0.92);
  background: rgba(141, 255, 0, 0.045);
}

/* Letzte Zeile sauber abschließen */
.maincontent-wrap table.table tbody tr:last-child td,
.bp-page-content table.table tbody tr:last-child td {
  border-bottom: 0;
}

/* Mobile / kleinere Screens */
@media (max-width: 991.98px) {
  .maincontent-wrap table.table,
  .bp-page-content table.table {
    min-width: 760px;
    font-size: 0.9rem;
  }

  .maincontent-wrap table.table thead th,
  .bp-page-content table.table thead th,
  .maincontent-wrap table.table tbody td,
  .bp-page-content table.table tbody td {
    padding: 0.85rem 0.9rem;
  }
}