/**
 * @file
 * Buntes Burgenland BS5 — Haupt-CSS
 *
 * Farbpalette: Original protostar-natursch (Joomla)
 *   Primär:      #0D812E (Naturschutz-Grün)
 *   Hintergrund: #e8dbaf (warmes Beige)
 *   Footer:      #2c6e49
 *
 * WCAG AA:
 *   #212529 auf #e8dbaf → 10.4:1 ✓
 *   #0D812E auf #e8dbaf →  4.8:1 ✓
 *   Weiß auf #0D812E   →  5.4:1 ✓
 */

/* ── Global ────────────────────────────────────────────────────────────── */
img {
  max-width: 100%;
  height: auto;
}

/* ── Custom Properties ─────────────────────────────────────────────────── */
:root {
  --bb-green:       #0D812E;
  --bb-green-dark:  #096122;
  --bb-green-light: #d4edda;
  --bb-beige:       #e8dbaf;
  --bb-beige-dark:  #d4c98a;
  --bb-beige-light: #f5f0da;
  --bb-text:        #212529;
  --bb-link:        #0D812E;
  --bb-link-hover:  #096122;
  --bb-footer-bg:   #2c6e49;
  --bb-border:      #d4c98a;

  /* Bootstrap overrides */
  --bs-primary:         #0D812E;
  --bs-primary-rgb:     13, 129, 46;
  --bs-body-bg:         #e8dbaf;
  --bs-body-color:      #212529;
  --bs-border-color:    #d4c98a;
  --bs-link-color:      #0D812E;
  --bs-link-hover-color:#096122;
}

/* ── Basis ─────────────────────────────────────────────────────────────── */
body {
  font-family: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--bb-text);
  background-color: var(--bb-beige);
}

a { color: var(--bb-link); text-decoration: underline; }
a:hover, a:focus { color: var(--bb-link-hover); }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 3px solid var(--bb-green);
  outline-offset: 2px;
}

.visually-hidden-focusable:focus, .skip-link:focus {
  position: fixed; top: 0.5rem; left: 0.5rem; z-index: 9999;
  background: var(--bb-green); color: #fff;
  padding: 0.5rem 1rem; border-radius: 0.25rem;
  text-decoration: none; font-weight: bold;
}

/* ── Überschriften ──────────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  color: var(--bb-green);
  font-weight: 700;
  line-height: 1.3;
}
h1 { font-size: 1.875rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }

/* ── Navbar ─────────────────────────────────────────────────────────────── */
.bb-navbar {
  background-color: var(--bb-beige);
  border-bottom: 3px solid var(--bb-green);
  padding: 0.5rem 1rem;
  /* position: relative is needed for mega-panel positioning */
  position: relative;
}
.navbar-brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.navbar-brand img {
  height: 60px;
  width: auto;
}
/* Layout/Abstand von .navbar-logo-extension laufen über BS5-Klassen im Template
   (d-flex align-items-center ms-3 ps-3 border-start) — hier nur, was BS5 nicht abdeckt. */
.navbar-logo-extension {
  border-color: var(--bb-green) !important;
}
.navbar-logo-extension img {
  height: 40px;
  width: auto;
}
.navbar-project-term {
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--bb-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 0.15rem;
  line-height: 1.2;
}
.bb-navbar .nav-link {
  color: var(--bb-text) !important;
  font-weight: 600;
  padding: 0.6rem 1rem;
  border-radius: 0.25rem;
  transition: background-color 0.15s, color 0.15s;
}
.bb-navbar .nav-link:hover,
.bb-navbar .nav-link:focus {
  background-color: var(--bb-green-light);
  color: var(--bb-green) !important;
}
.bb-navbar .nav-link.active,
.bb-navbar .nav-link[aria-current] {
  color: var(--bb-green) !important;
  font-weight: 700;
  background-color: var(--bb-green-light);
}

/* ── Mega-Menü ──────────────────────────────────────────────────────────── */
/*
 * Mega-Panel: Dropdown-Menü spannt die volle Navbar-Breite.
 * Das .bb-mega-item (nav-item.dropdown) hat position:static, damit
 * das .dropdown-menu relativ zur .bb-navbar positioniert wird.
 */
.bb-navbar .bb-mega-item {
  position: static;
}
.bb-mega-panel {
  border-radius: 0 0 0.5rem 0.5rem;
  border: 1px solid var(--bb-border);
  border-top: 3px solid var(--bb-green);
  background-color: var(--bb-beige-light);
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.12);
  padding: 1.25rem 0;
  z-index: 1050;
}
/* Desktop: fixed below navbar. JS sets --bb-navbar-h on attach.
   !important overrides Bootstrap's .navbar-expand-lg .navbar-nav .dropdown-menu { position: absolute }
   which has specificity 0,3,0. */
@media (min-width: 992px) {
  .bb-navbar .bb-mega-panel {
    position: fixed !important;
    top: var(--bb-navbar-h, 76px) !important;
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    max-width: none !important;
  }
}
.bb-mega-section {
  padding: 0 1.5rem;
}
.bb-mega-section-title {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--bb-green-dark);
  margin-bottom: 0.5rem;
  padding-bottom: 0.25rem;
  border-bottom: 1px solid var(--bb-beige-dark);
}
.bb-mega-panel .dropdown-item {
  color: var(--bb-text);
  padding: 0.3rem 0;
  border-radius: 0;
  font-size: 0.9rem;
  text-decoration: none;
  display: block;
  transition: color 0.1s;
}
.bb-mega-panel .dropdown-item:hover,
.bb-mega-panel .dropdown-item:focus {
  background: none;
  color: var(--bb-green);
  text-decoration: underline;
}
.bb-mega-panel .dropdown-item.is-active,
.bb-mega-panel .dropdown-item[aria-current] {
  color: var(--bb-green);
  font-weight: 600;
}

/* Wide mega menu: multi-column Projekte panel */
/* Desktop positioning is applied via JS (position:fixed + navbar bottom). */
.bb-mega-wide {
  padding: 1.5rem 0;
}
.bb-mega-wide-inner {
  width: 100%;
  padding: 0 1.5rem;
}
.bb-mega-cols {
  align-items: flex-start;
  flex-wrap: nowrap;
}
.bb-mega-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 1rem;
  border-right: 1px solid var(--bb-border);
}
.bb-mega-col:last-child {
  border-right: none;
}
.bb-mega-col-header {
  display: block;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--bb-green-dark);
  margin-bottom: 0.6rem;
  padding-bottom: 0.35rem;
  border-bottom: 2px solid var(--bb-green);
  text-decoration: none;
  transition: color 0.1s;
}
.bb-mega-col-header:hover,
.bb-mega-col-header:focus {
  color: var(--bb-green);
  text-decoration: underline;
}
.bb-mega-col-header.is-active {
  color: var(--bb-green);
}
/* Small sub-sub-items (Gemeinden, Angebote) */
.bb-mega-subitems {
  margin-top: 0.1rem;
  margin-bottom: 0.4rem;
}
.bb-mega-subitems--two-col {
  column-count: 2;
  column-gap: 0;
}
.bb-mega-panel .dropdown-item.small {
  font-size: 0.78rem;
  padding: 0.15rem 0 0.15rem 0.75rem;
  color: var(--bb-text-muted, #6c757d);
  position: relative;
}
.bb-mega-panel .dropdown-item.small::before {
  content: '›';
  position: absolute;
  left: 0.15rem;
  color: var(--bb-green);
}
.bb-mega-panel .dropdown-item.small:hover,
.bb-mega-panel .dropdown-item.small:focus {
  color: var(--bb-green);
}

/* Mobile: Mega-Panel als normales vertikales Dropdown */
@media (max-width: 991.98px) {
  .bb-mega-item { position: relative; }
  .bb-mega-panel {
    position: static;
    box-shadow: none;
    border: none;
    border-top: 1px solid var(--bb-border);
    border-radius: 0;
    padding: 0.5rem 0;
  }
  .bb-mega-section {
    padding: 0.5rem 1rem;
  }
}

/* Mobile flat dropdown for wide panel */
.bb-mobile-dropdown .dropdown-item.bb-mobile-project {
  font-weight: 600;
  color: var(--bb-green);
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.bb-mobile-dropdown .dropdown-item.bb-mobile-project:hover,
.bb-mobile-dropdown .dropdown-item.bb-mobile-project:focus {
  color: var(--bb-green-dark);
}
.bb-mobile-dropdown .dropdown-item.bb-mobile-sub {
  font-size: 0.875rem;
  padding-left: 1.5rem;
}
/* Collapsible toggle: shows a rotatable caret */
.bb-mobile-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
}
.bb-mobile-toggle::after {
  content: '';
  flex-shrink: 0;
  margin-left: 0.5em;
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.bb-mobile-toggle[aria-expanded="true"]::after {
  transform: rotate(-135deg);
}
/* Leaf items (school/municipality names) */
.bb-mobile-leaves .bb-mobile-leaf {
  font-size: 0.8rem;
  padding-left: 2.5rem;
  color: var(--bb-text);
}
.bb-mobile-leaves .bb-mobile-leaf:hover,
.bb-mobile-leaves .bb-mobile-leaf:focus {
  color: var(--bb-green);
}

/* ── Banner / Slider ────────────────────────────────────────────────────── */
.site-banner { overflow: hidden; margin-bottom: 0; }

/* Full-bleed slider section embedded in node (breaks out of container-xl) */
.nsa-slider-section {
  width: 100vw;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  margin-bottom: 1.5rem;
  overflow: hidden;
}
.nsa-splide .splide__slide img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.nsa-splide .splide__arrow {
  background: rgba(13, 129, 46, 0.8);
  color: #fff;
}
.nsa-splide .splide__arrow:hover { background: var(--bb-green-dark); }
.nsa-splide .splide__pagination__page.is-active {
  background: var(--bb-green);
  transform: scale(1.2);
}
@media (max-width: 767.98px) {
  .nsa-splide .splide__slide img { height: 200px; }
}

.bb-slider .splide__slide img {
  width: 100%;
  max-height: 450px;
  object-fit: cover;
  display: block;
}
.bb-slider .splide__arrow {
  background: rgba(13, 129, 46, 0.8);
  color: #fff;
}
.bb-slider .splide__arrow:hover { background: var(--bb-green-dark); }
.bb-slider .splide__pagination__page.is-active {
  background: var(--bb-green);
  transform: scale(1.2);
}
@media (max-width: 767.98px) {
  .bb-slider .splide__slide img { max-height: 250px; }
}

/* ── Seitenstruktur ─────────────────────────────────────────────────────── */
#main-wrapper { padding-top: 1.5rem; padding-bottom: 2rem; }

/* ── Artikel Teaser-Bild (floating rechts) ──────────────────────────────── */
.bb-teaser-img {
  float: right;
  margin: 0 0 0.75rem 1.25rem;
  max-width: 180px;
}
.bb-teaser-img img {
  width: 100%;
  height: auto;
  border-radius: 0.25rem;
  display: block;
}

/* ── Team-Karte (view_mode full in View-Kontext) ────────────────────────── */
.bb-team-photo {
  width: 120px;
}
.bb-team-photo img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.bb-team-body .node__title {
  font-size: 1.1rem;
  margin: 0 0 0.4rem;
  font-weight: 600;
}

/* ── Artikel ────────────────────────────────────────────────────────────── */
.node--type-article .node__title {
  font-size: 1.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0;
}
.node__meta {
  font-size: 0.875rem;
  color: #5a5a5a;
  margin-bottom: 1rem;
}
.node__content { line-height: 1.7; }
.node__content img {
  max-width: 100%;
  height: auto;
  border-radius: 0.25rem;
  cursor: pointer;
}

/* ── Views / Listen ─────────────────────────────────────────────────────── */
.view-bb-artikel .views-row,
.view-bb-team .views-row {
  background: var(--bb-beige-light);
  border: 1px solid var(--bb-border);
  border-radius: 0.5rem;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.view-bb-artikel .views-row h3,
.view-bb-team .views-row h3 { margin-top: 0; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn-primary {
  background-color: var(--bb-green);
  border-color: var(--bb-green);
  color: #fff;
}
.btn-primary:hover, .btn-primary:focus {
  background-color: var(--bb-green-dark);
  border-color: var(--bb-green-dark);
  color: #fff;
}
.btn-outline-primary { color: var(--bb-green); border-color: var(--bb-green); }
.btn-outline-primary:hover { background-color: var(--bb-green); color: #fff; }

/* ── Pager ──────────────────────────────────────────────────────────────── */
.page-link { color: var(--bb-green); background-color: var(--bb-beige-light); border-color: var(--bb-border); }
.page-link:hover { color: var(--bb-green-dark); }
.pager__item--current .page-link {
  background-color: var(--bb-green);
  border-color: var(--bb-green);
  color: #fff;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb { background: transparent; padding: 0.5rem 0; font-size: 0.875rem; }
.breadcrumb-item a { color: var(--bb-green); }
.breadcrumb-item.active { color: #5a5a5a; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
#footer {
  background-color: var(--bb-footer-bg);
  color: #fff;
  padding: 2rem 0 1rem;
  margin-top: 3rem;
}
#footer a { color: #a5d6a7; text-decoration: underline; }
#footer a:hover { color: #fff; }
#footer h3, #footer h4 {
  color: #fff;
  font-size: 1rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.75rem;
}
.footer-main-row { padding: 1.5rem 0 1rem; }
.footer-foerderlogos { max-height: 80px; width: auto; }
.footer-social { margin-top: 1rem; }
@media (min-width: 768px) { .footer-social { margin-top: 0; } }
.footer-fb-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  color: #a5d6a7;
  text-decoration: none;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.15s;
}
.footer-fb-link:hover, .footer-fb-link:focus { color: #fff; }

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding-top: 1rem;
  margin-top: 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.8);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.9); }

/* ── Tabellen ───────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; margin-bottom: 1rem; }
th { background-color: var(--bb-green); color: #fff; padding: 0.75rem; text-align: left; }
td { padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--bb-border); }
tr:nth-child(even) td { background-color: var(--bb-beige-light); }

/* ── Navbar Mobile ──────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .navbar-brand img { height: 45px; }
  .navbar-collapse {
    background-color: var(--bb-beige);
    padding: 0.5rem;
    border-top: 2px solid var(--bb-green);
  }
}

/* ── Full-bleed: Slider / Hauptbild / Galerie über volle Viewport-Breite ── */
/*
 * calc(50% - 50vw): 50% = halbe Col-Breite (= halbe Container-Breite da kein
 * Sidebar), 50vw = halbe Viewport-Breite. Differenz = negativer Offset der
 * nötig ist um die linke Container-Kante mit der Viewport-Kante auszurichten.
 */
.bb-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  overflow: hidden;
}

/* ── Seitentitel im Node-Template (unter Slider/Hauptbild) ─────────────── */
.node__page-title {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
}

/* ── Video/Audio-Player im Node-Template (unter dem Titel) ─────────────── */
.bb-av-player {
  margin-top: 1rem;
  margin-bottom: 1.5rem;
}

.bb-av-player .field__item {
  margin-bottom: 1.25rem;
}

.bb-av-player .field__item:last-child {
  margin-bottom: 0;
}

.bb-av-player video {
  max-width: 100%;
  width: 100%;
  height: auto;
  display: block;
}

.bb-av-player audio {
  width: 100%;
  display: block;
}

/* ── Textinhalt: Breite nicht mehr begrenzt (Kundenwunsch) ─────────────── */
/* Klasse bleibt im Markup (viele Templates referenzieren sie), die
   Breitenbegrenzung selbst ist deaktiviert. */
.restricted-width {
  max-width: unset;
  margin-left: unset;
  margin-right: unset;
}

/* ── Print ──────────────────────────────────────────────────────────────── */
@media print {
  .navbar, #footer, .breadcrumb, .pager, .site-banner { display: none !important; }
  body { background: #fff; color: #000; }
  a[href]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}