.page-header::before {
  background-color: inherit;
}

.navbar {
  margin-bottom: 0;
  box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
}
.navbar.navbar-transparent {
  background-color: #fff !important;
/*  box-shadow: none; */
  box-shadow: 0 0 20px 0 rgba(0,0,0,.15);
  color: #fff;
  padding-top: 10px !important;
}

.navbar .navbar-brand {
  text-transform: uppercase;
  font-size: 1em;
  padding-top: 0;
  padding-bottom: 0m;
  line-height: 1.625rem;
  color: #718e39 !important;
}

.navbar .navbar-nav .nav-link:not(.btn) {
  text-transform: uppercase;
  font-size: 1em;
  padding: .5rem .7rem;
  line-height: 1.625rem;
  color: #718e39;
}


.navbar.navbar-transparent a:hover,
.navbar.navbar-transparent .nav-link.active,
.navbar.navbar-transparent .nav-link:hover,
.navbar.navbar-transparent .nav-link:focus {
  color: rgba(0,0,0,.8) !important;
}
.navbar.navbar-transparent .navbar-brand.active,
.navbar.navbar-transparent .navbar-brand[aria-current="page"] {
  color: rgba(0,0,0,.8) !important;
}

/* Active-Farbe immer, unabhängig von navbar-transparent */
/*
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: rgba(0,0,0,.8) !important; border-bottom: 1px solid rgba(113,142,57,0.7);
}

@media screen and (max-width: 991px) {
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"] {
  color: rgba(0,0,0,.8) !important; border-bottom: 1px solid rgba(250,250,250,0.3);
}
}

.navbar .navbar-brand.active,
.navbar .navbar-brand[aria-current="page"]{
  color: rgba(0,0,0,.8) !important;
}
*/
/* allgemein */
.navbar .navbar-brand.active span,
.navbar .navbar-brand[aria-current="page"] span{
  color: rgba(0,0,0,.8) !important;
}

/* falls du nur im transparenten Zustand färben willst, zusätzlich: */
.navbar.navbar-transparent .navbar-brand.active span,
.navbar.navbar-transparent .navbar-brand[aria-current="page"] span{
  color: rgba(0,0,0,.8) !important;
}


.button-bar {
  background: #718e39;
}

@media screen and (max-width: 991px) {
.navbar .navbar-toggler-bar {background: #718e39;}
.navbar-brand img {border-right: 0 !important; padding-right:0;
}
.navbar-brand span {display:none}
}
.navbar-brand img {
height:85px; margin-left: 15px;
/* border-right: 1px solid rgba(113, 142, 57, 0.5); */
padding-right: 10px;
}

.navbar-brand span {margin-left: 8px; margin-top: 8px}

/* === Kontakt-Widget =========================================== */
.contact-fab{
  position: fixed;
  right: 12px;
  top: 120px;                /* Fallback; JS setzt den exakten Wert */
  z-index: 3000;
}

/* Button bleibt top */
.contact-fab .fab-toggle{
  position: relative;
  z-index: 3;
  width: 56px; height: 56px;
  border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  touch-action: manipulation;
  font-size: 1.1rem;
}

/* Panel links neben dem Button; geschlossen komplett weg + nicht klickbar */
.contact-fab .fab-panel{
  position: absolute; top: 0; right: 56px;
  min-width: 260px; background: #fff;
  border-radius: .75rem 0 0 .75rem;
  transform: translateX(calc(100% + 24px)); /* sicher draußen */
  opacity: 0; pointer-events: none; box-shadow: none;
  transition: transform .25s ease, opacity .2s ease, box-shadow .2s ease;
  will-change: transform, opacity;
  z-index: 1;
  font-size: 1rem; line-height: 1.5;
}
.contact-fab .fab-panel a{ font-size: 1.125rem; font-weight: 600; }
.contact-fab .fab-panel .small{ font-size: .875rem; }

/* Offen/aktiv */
.contact-fab.open .fab-panel{
  transform: translateX(0);
  opacity: 1; pointer-events: auto;
  box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
}

/* Hover-Öffnen nur Desktop */
@media (hover: hover) and (pointer: fine){
  .contact-fab:hover .fab-panel,
  .contact-fab:focus-within .fab-panel{
    transform: translateX(0);
    opacity: 1; pointer-events: auto;
    box-shadow: 0 0.5rem 1rem rgba(0,0,0,.15);
  }
}

/* Close-Button NIE am Desktop zeigen */
.contact-fab .fab-close{ display: none; }
/* @media (hover: none) and (pointer: coarse){
  .contact-fab.open .fab-close{ display: block; }
} */
/* =============================================================== */
/* nur im Header/Slider-Bereich anwenden */
#header img,
.hero img,
.carousel .carousel-item img{
  -webkit-user-drag: none;
  user-select: none;
}
/* =============================================================== */

.page-header.page-header-small {
  min-height: 58vh;
  max-height: 682px;
}

body, .card-description, .description, .footer-big p, p.description, .card-title, .category
{color:rgba(0,0,0, 0.8);}

.wrapper.no-page-img {
  margin-top: 60px;
}
/*
 .totop {
  position: fixed;
  bottom: 15px;
  right: 15px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: rgba(0,0,0,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  z-index: 100;
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
}
*/

.totop::before {
  content:'▲';            /* oder '▲', '▴', '⌃' */
  font-size:2rem;
  line-height:1;
  transform: translateY(-0.1em);
  display:block;
}
 .totop.btn { 
width:44px; height:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center;
background-color: rgba(0,0,0,.4);transition: all 0.3s ease; -webkit-transition: all 0.3s ease; 
position: fixed;
bottom: 15px;
right: 15px;
z-index: 100;
}
/* 1) Keyboard-Fokus gut sichtbar */
.totop:focus-visible {
  outline: 2px solid rgba(0,0,0,.4);
  outline-offset: 2px;
  box-shadow: 0 0 0 .2rem rgba(0,0,0,.1);
}

/* 2) Bewege sanft – aber respektiere prefers-reduced-motion */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

.totop { opacity: 0; pointer-events: none; }
.totop.show { opacity: 1; pointer-events: auto; }

/* neu für dropdown ############################################################# */

/* ===== Navbar Dropdowns (ein- & mehrstufig) ============================= */

/* 0) Stack & Overflows */
.navbar{ position:relative; z-index:1100; }
.navbar .navbar-collapse,
.navbar .container{ overflow:visible; }

@media (max-width: 991.98px){
  .navbar .navbar-collapse.show ~ .contact-fab,
  body.nav-open .contact-fab{   /* falls dein Theme 'nav-open' aufs <body> setzt */
    display: none !important;
  }
}

/* 1) Basis Dropdown */
.navbar .nav-item.dropdown{ position:relative; padding-bottom:.25rem; } /* gegen Hover-Gap */
.navbar .dropdown-menu{
  display:none;                 /* hidden by default */
  position:absolute; top:100%; left:0; margin-top:0;  /* direkt unter dem Toggle */
  min-width:12rem; z-index:1200;
  background:#fff;
  border:1px solid rgba(0,0,0,.15);
  border-radius:.25rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.175);
}
/* Öffnen */
.navbar .dropdown-menu.show{ display:block; }

/* Theme-Pfeile/Spitzen deaktivieren */
.navbar .dropdown-menu::before,
.navbar .dropdown-menu::after{ content:none !important; display:none !important; }

/* 2) Chevron-Icon (optional, falls .bi genutzt) */
.navbar .nav-item.dropdown .bi{ transition:transform .2s ease; }
.navbar .nav-item.dropdown.show .bi{ transform:rotate(180deg); }

/* 3) Mehrstufig: Submenu rechts andocken (Desktop) */
.navbar .dropdown-submenu{ position:relative; }
.navbar .dropdown-submenu > .dropdown-menu{
  display:none; position:absolute; top:0; left:100%;
  margin-left:.25rem; min-width:12rem; z-index:1220;
}
.navbar .dropdown-submenu.show > .dropdown-menu{ display:block; }

/* Caret im Submenu */
.submenu-toggle .submenu-caret{ margin-left:.35rem; transition:transform .2s ease; }
.dropdown-submenu.show > .submenu-toggle .submenu-caret{ transform:rotate(90deg); }

/* 4) Mobile: Menüs im Fluss, leicht eingerückt, keine Schatten */
@media (max-width:991.98px){
  .navbar .dropdown-menu{ position:static; left:auto; top:auto; width:100%; box-shadow:none; }
  .navbar .dropdown-submenu > .dropdown-menu{ position:static; margin:.25rem 0 .25rem .75rem; }
}
/* ======================================================================= */

/* Submenu bündig an den Toggle, kein Versatz ############################## */

/* Weniger Vertikal-Padding im Menü, damit nichts „rutscht“ */
.navbar .dropdown-menu { padding: 0; }

/* Submenu exakt auf Höhe des Eltern-Items andocken */
.navbar .dropdown-submenu { position: relative; }
.navbar .dropdown-submenu > .dropdown-menu{
  position: absolute;
  top: 0 !important;                 /* wichtig: nicht unter die Zeile rutschen */
  left: 100%;
  margin: 0 0 0 .25rem !important;   /* nur kleiner horizontaler Abstand */
  transform: translateY(-.125rem);   /* minimal nach oben, fühlt sich „flusher“ an */
}

/* Ende Submenu bündig an den Toggle, kein Versatz ############################## */

/* Top-Level Seitenlinks (keine Dropdown-Toggler) */
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active {
  color: rgba(0,0,0,.8) !important;
  border-bottom: 1px solid rgba(113,142,57,0.7);
}
@media (max-width: 991px){
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active {
    border-bottom: 1px solid rgba(250,250,250,0.3);
  }
}

/* Dropdown-Items aktiv (ohne Blau) */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active{
  background: transparent !important;
  color: rgba(0,0,0,.85) !important;
  font-weight: 600;
}
/* dezentes Hover im Dropdown */
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{
  background: rgba(0,0,0,.04) !important;
  color: rgba(0,0,0,.85) !important;
}

/* Geöffnetes Menü soll NICHT automatisch den Toggler einfärben */
.navbar .nav-item.dropdown.show > .nav-link{
  color: inherit !important; 
  border-bottom: none !important;
}

/* final neu --------------------------------- */

/* Top-Level Seitenlinks (keine Dropdown-Toggler!) aktiv markieren */
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link[aria-current="page"]{
  color: rgba(0,0,0,.8) !important;
  border-bottom: 1px solid rgba(113,142,57,0.7);
}
@media (max-width: 991px){
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active,
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link[aria-current="page"]{
    border-bottom: 1px solid rgba(250,250,250,0.3);
  }
}

/* Dropdown-Items aktiv (ohne blau) – hast du schon, hier zur Vollständigkeit */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active{
  background: transparent !important;
  color: rgba(0,0,0,.85) !important;
  font-weight: 600;
}

/* Geöffnetes Dropdown färbt den Toggler NICHT automatisch */
.navbar .nav-item.dropdown.show > .nav-link{
  color: inherit !important;
  border-bottom: none !important;
}

/* Toggler-Hover nie weiß werden lassen (falls Theme das macht) */
.navbar .nav-item.dropdown > .nav-link:hover,
.navbar .nav-item.dropdown > .nav-link:focus{
  color: rgba(0,0,0,.8) !important;
}

/* (A) Toggler "Blumen" standardmäßig grün lassen – auch wenn offen/irrtümlich active */
.navbar .nav-item.dropdown > .nav-link { color: #718e39; }
.navbar .nav-item.dropdown > .nav-link.active,
.navbar .nav-item.dropdown > .nav-link[aria-current="page"],
.navbar .nav-item.dropdown.show > .nav-link{
  color: #718e39 !important;
  border-bottom: none !important;
}

/* (B) Top-Level-Seitenlinks (keine Dropdowns) aktiv = schwarz + Linie */
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link[aria-current="page"]{
  color: rgba(0,0,0,.8) !important;
  border-bottom: 1px solid rgba(113,142,57,0.7);
}
@media (max-width: 991px){
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active,
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link[aria-current="page"]{
    border-bottom: 1px solid rgba(0,0,0,0.8);
  }
}

/* (C) Dropdown-Items: aktiv ohne blau, gut lesbar (+ Linie im Menü, wenn gewünscht) */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item[aria-current="page"],
.navbar .dropdown-menu .dropdown-item:active{
  background: transparent !important;
  color: rgba(0,0,0,.8) !important;
  font-weight: 600;
  border-bottom: 0;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{
  background: rgba(0,0,0,.04) !important;
  color: rgba(0,0,0,.8) !important;
}

/* neuer Versuch */

/* Toggler standardmäßig grün (auch bei :hover/:focus) */
.navbar .nav-item.dropdown > .nav-link { color: #718e39; }
.navbar .nav-item.dropdown > .nav-link:hover,
.navbar .nav-item.dropdown > .nav-link:focus{
  color: #718e39 !important; /* überschreibt evtl. weiß aus dem Theme */
}

/* Wenn ein Kind aktiv ist → Toggler wie aktiv (schwarz + Linie) */
.navbar .nav-item.dropdown.has-active > .nav-link,
.navbar .nav-item.dropdown.has-active > .nav-link:hover,
.navbar .nav-item.dropdown.has-active > .nav-link:focus{
  color: rgba(0,0,0,.8) !important;
  border-bottom: 0 !important;
}

/* Geöffnetes Menü soll NICHT automatisch umfärben, außer wenn .has-active */
.navbar .nav-item.dropdown.show:not(.has-active) > .nav-link{
  color: #718e39 !important;
  border-bottom: none !important;
}

/* Dropdown-Items aktiv (ohne Blau) – behältst du so */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item[aria-current="page"],
.navbar .dropdown-menu .dropdown-item:active{
  background: transparent !important;
  color: rgba(0,0,0,.85) !important;
  font-weight: 600;
}
.navbar .dropdown-menu .dropdown-item:hover,
.navbar .dropdown-menu .dropdown-item:focus{
  background: rgba(0,0,0,.04) !important;
  color: rgba(0,0,0,.85) !important;
}

/* neu */

/* Standard: Toggler (Blumen) grün lassen */
.navbar .nav-item.dropdown > .nav-link { color:#718e39; }
.navbar .nav-item.dropdown > .nav-link:hover,
.navbar .nav-item.dropdown > .nav-link:focus { color:#718e39 !important; }

/* Wenn ein Kind aktiv ist → Parent sichtbar aktiv (schwarz + Linie) */
.navbar .nav-item.dropdown.child-active > .nav-link {
  color: rgba(0,0,0,.8) !important;
  border-bottom: 1px solid rgba(113,142,57,0.7) !important;
}
@media (max-width: 991px){
  .navbar .nav-item.dropdown.child-active > .nav-link {
    border-bottom: 1px solid rgba(250,250,250,0.3) !important;
  }
}

/* Dropdown-Items aktiv ohne Bootstrap-Blau (du hast das schon, hier nur zur Sicherheit) */
.navbar .dropdown-menu .dropdown-item.active,
.navbar .dropdown-menu .dropdown-item:active{
  background: rgba(113,142,57,0.15) !important;
  color: rgb(113, 142, 57) !important;
  font-weight: 600;
}

/* #################################################### */


/* Nur auf Mobile den Caret anzeigen */
@media (max-width: 991.98px){
  .navbar .nav-item.dropdown > .nav-link{
    position: relative;
    padding-right: 1.5rem; /* Platz für Caret */
  }
  .navbar .nav-item.dropdown > .nav-link::after{
    content:"";
    position:absolute; right:.5rem; top:50%;
    width:.5em; height:.5em; margin-top:-.35em;
    border-right:2px solid currentColor;
    border-bottom:2px solid currentColor;
    transform: rotate(45deg);            /* ▼ */
    opacity:.85; transition: transform .2s ease;
  }
  /* wenn Dropdown offen ODER ein Kind aktiv: Caret nach oben drehen */
  .navbar .nav-item.dropdown.show > .nav-link::after,
  .navbar .nav-item.dropdown.child-active > .nav-link::after{
    transform: rotate(225deg);           /* ▲ */
  }

  /* Verhindern, dass Theme den Link weiß färbt */
/*  .navbar .nav-item.dropdown > .nav-link:hover,
  .navbar .nav-item.dropdown > .nav-link:focus{
    color: #718e39 !important;
  }*/
}

/* #################################################### */

  @media screen and (max-width: 991px) {
.navbar-collapse .navbar-nav:not(.navbar-logo) .nav-link:not(.btn) {
  color: #718e39 !important;
} 

.navbar-collapse::before {
  background: #fff;
  opacity: inherit;
  filter: inherit;
  border-left: 5px solid #718e39;
}

.navbar .navbar-nav .nav-link:not(.btn) {
  text-transform: uppercase;
  font-size: 1.25em;
  padding: .5rem .7rem;
  line-height: 1.625rem;
  color: #718e39;
}

.navbar, .navbar a {
  color: #718e39 !important;
}
.navbar .dropdown .dropdown-item {
  font-size: 1.1em;
  color: #718e39 !important;
}

.navbar .dropdown-menu .dropdown-item.active, .navbar .dropdown-menu .dropdown-item:active {
  background: transparent !important;
  color: rgba(0,0,0,.85) !important;
  font-weight: 600;
  font-size: 1.1em;
}
[class*="navbar-expand-"] .navbar-collapse {
  width: 350px;
}

}

@media (min-width: 992px){
  .navbar .nav-item.dropdown > .js-avoid-click{ cursor: default; }
}


/* testen ob nötig wegen wackelei ----------------------- */

/* 1) Platz reservieren: alle Nav-Links haben IMMER eine 1px-untere Border (transparent) */
.navbar .navbar-nav > .nav-item > .nav-link{
  display:inline-block;                 /* stabiler line-box, kein baseline-jump */
  border-bottom:1px solid transparent;  /* Raum für die aktive Linie */
  text-decoration:none;                 /* native Unterstreichung aus */
}

/* 2) Dropdown-Toggler ebenso */
.navbar .nav-item.dropdown > .nav-link{
  border-bottom:1px solid transparent;
}

/* 3) Dein aktiver Zustand (Top-Level, keine Dropdowns) – nur die Farbe setzen */
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active,
.navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link[aria-current="page"]{
  color: rgba(0,0,0,.8) !important;
  border-bottom-color: rgba(113,142,57,0.7); /* nur Farbe, Höhe bleibt gleich */
}
@media (max-width: 991px){
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link.active,
  .navbar .navbar-nav > .nav-item:not(.dropdown) > .nav-link[aria-current="page"]{
    border-bottom-color: rgba(250,250,250,0.3);
  }
}

/* 4) Wenn ein Kind aktiv ist → Toggler “Blumen” schwarz + Linie, aber ohne Höhenänderung */
.navbar .nav-item.dropdown.child-active > .nav-link{
  color: rgba(0,0,0,.8) !important;
  border-bottom-color: rgba(113,142,57,0.7) !important;
}
@media (max-width: 991px){
  .navbar .nav-item.dropdown.child-active > .nav-link{
    border-bottom-color: rgba(250,250,250,0.3) !important;
  }
}

/* 5) Beim reinen Öffnen (.show) NICHT umfärben – Border bleibt transparent, daher kein “Hüpfer” */
.navbar .nav-item.dropdown.show:not(.child-active) > .nav-link{
  color: #718e39 !important;
  border-bottom-color: transparent !important;
}

/* 6) Optional: falls irgendein Theme-Hover weiß erzwingt – neutralisieren */
.navbar .nav-item.dropdown > .nav-link:hover,
.navbar .nav-item.dropdown > .nav-link:focus{
  color:#718e39 !important;
}

/* ende testen ob nötig wegen wackelei ----------------------- */

@media (max-width: 991px){
a.nav-link.js-avoid-click span {
  display:none;
}
}

  @media (max-width: 991.98px) {
	  
a.nav-link.js-avoid-click span {display:none;}
.navbar .nav-item.dropdown > .nav-link::after {right: .5rem;left: 0; margin-left: 15px;}
.navbar .navbar-nav > .nav-item > .nav-link {padding-left: 35px;}

.navbar-collapse {
  right: -3.25em;
}

}

/* caret drehen desktop -------------------------------------- */

/* Desktop: Pfeil am Link selbst */
@media (min-width: 992px){
  .navbar .navbar-nav > .nav-item.dropdown > .nav-link::after{
    content:"▽";               /* zu */
    display:inline-block;
    margin-left:.35rem;
    line-height:1;
    vertical-align:baseline;
	font-size: 0.6em;
  }
  .navbar .navbar-nav > .nav-item.dropdown.child-active > .nav-link::after{
    content:"△";               /* auf (Kind aktiv) */
	font-size: 0.6em;
  }
}

/* Falls du mobil bereits einen eigenen ::after-Caret hast, kein Konflikt:
   Der hier greift nur ab 992px. */

/* ende caret drehen desktop -------------------------------------- */

.navbar .dropdown-menu .dropdown-item:hover, .navbar .dropdown-menu .dropdown-item:focus {
  background: rgba(113,142,57,0.15) !important;
  color: rgba(0,0,0,.85) !important;
}

/* neu ------------------------------- */

.section-story-overview .image-container.bigger {
  height: 450px;
}
.section-story-overview p.blockquote.bigger {
  top: 500px;
}

/* neu mit nav-automatisch, meta etc */

.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media screen and (min-width: 992px) {
.navbar-nav .nav-item:not(:last-child) {
  margin-right: 2rem;
}
.bootstrap-select .dropdown-menu.inner li a, .dropdown-menu .dropdown-item {
margin-top: 0;
}
}
/*
.bootstrap-select .dropdown-menu.inner li a, .dropdown-menu .dropdown-item {
margin-top: 0;
padding-top: .8rem;
padding-bottom: .8rem;
}
*/
/* NUR bootstrap-select, NICHT die Navbar */
.bootstrap-select .dropdown-menu.inner li a,
.bootstrap-select .dropdown-menu .dropdown-item {
  margin-top: 0;
  padding-top: .8rem;
  padding-bottom: .8rem;
}

@media (max-width: 991px){
  .navbar .dropdown .dropdown-menu,
  .navbar .dropdown.show .dropdown-menu{
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important; /* oder: auto, wenn du bewusst scrollen willst */
    margin: 0 1rem 15px !important; /* kannst du lassen oder auf 0 setzen */
  }
  .dropdown-item {line-height:1}
}

@media (max-width: 991px){

  /* Grundzustand: Dropdown-Menü ist zu */
  .navbar .nav-item.dropdown > .dropdown-menu{
    display: none !important;
  }

  /* Nur wenn der Parent wirklich .show hat, ist es offen */
  .navbar .nav-item.dropdown.show > .dropdown-menu{
    display: block !important;
  }
}
.section {
  padding: 0;
}
.wrapper {
  margin-top: 60px;
}

/* neu image pair nebeneinander, zentriert, version col5 ----------------------  */

.img-pair {
  display: grid;
  gap: 1.5rem;
  justify-content: center;
  grid-template-columns: 1fr;
  margin: 2rem auto;
}

/* Bilder */
.img-item img {
  display: block;
  width: 100%;
  height: auto;
/*  border-radius: .75rem; */
}

/* Tablet: immer 2 nebeneinander */
@media (min-width: 768px) {
  .img-pair {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Desktop: zentrale Steuerung */
@media (min-width: 992px) {
  .img-pair {
    max-width: 900px; /* HIER stellst du alles ein, alternativ 760px */
  }
}

.img-pair-zitat {max-width: 900px; justify-content: center; margin:2rem 0}

.img-pair-content {
  margin: 2rem auto;
  padding: 0 1rem; /* verhindert Randkleben auf Mobile */
  text-align:center;
}

/* Desktop Breite = gleiche wie Bilder */
@media (min-width: 992px) {
.img-pair-content {max-width: 900px;}
.img-pair.bigger, .img-pair-content.bigger { max-width: 1024px; }
}

/* Trio: mobile erst mal untereinander --------------------- */
.img-trio{
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
  grid-template-areas:
    "tall"
    "top"
    "bottom";
}

/* Tablet+ / Desktop: links Hochformat, rechts 2 Quer übereinander */
@media (min-width: 768px){
  .img-trio{
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "tall top"
      "tall bottom";
    align-items: stretch;
  }
}

/* Zuordnung der Areas */
.img-trio .tall       { grid-area: tall; }
.img-trio .wide-top   { grid-area: top; }
.img-trio .wide-bottom{ grid-area: bottom; }

/* Optional: sorgt für “gleich hohe” Kacheln – nur nutzen, wenn du Cropping ok findest */
.img-trio .img-item img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Wenn du KEIN Cropping willst, nimm stattdessen das hier und entferne height:100% oben:
.img-trio .img-item img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: .75rem;
}
*/

a[target="_blank"]:not(.no-ext-icon)::after {
  font-family: "bootstrap-icons";
  content: "\f1c5"; /* bi-box-arrow-up-right */
  margin-left: .25rem;
  font-size: .85em;
  opacity: .7;
}

/* neu nav mit icons oder highlight ------------------------- */

/* sr-only (falls du nicht schon Bootstrap sr-only nutzt) */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* Icon in der Navigation */
.nav-icon{
  font-size: .95em;
  opacity: .75;
  vertical-align: -0.08em;
  margin-right: .35rem;
}

/* Wenn Icon nach dem Text kommt */
.nav-text + .nav-icon{
  margin-right: 0;
  margin-left: .35rem;
}

/* Highlight-Stil (sauberer Rahmen via inset-shadow statt border) */
.is-highlight,
a.nav_highlight{
  border: 0; /* wichtig: echte Border aus */
  border-radius: 1.5rem;
  padding-left: .75rem;
  padding-right: .75rem;

  /* sauberer Rahmen */
  box-shadow: inset 0 0 0 1px #718e39;

  /* falls irgendwo Unterstrich/Borders gesetzt werden */
  border-bottom: 1px solid transparent !important;
}

/* Hover etwas stärker */
.is-highlight:hover,
a.nav_highlight:hover{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8);
  border-radius: 1.5rem !important;
}

/* aktiv/child-active: Rahmen stärker */
.navbar .nav-link.nav_highlight.active,
.navbar .nav-item.child-active > .nav-link.nav_highlight{
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.8);
}

/* WICHTIG: Unterlinie für Highlight komplett deaktivieren
   (du hattest hier eine Hairline drin, die Highlights unterstrichen hat) */
.navbar .nav-link.nav_highlight{
  box-shadow: inset 0 0 0 1px #718e39; /* redundanter Schutz für Spezifität */
}

/* Mobile: Einrückung per Margin statt padding-left */
@media (max-width: 991.98px){
  .navbar .navbar-nav > .nav-item > .nav-link.nav_highlight{
    padding-left: .75rem;
    margin-left: 35px;
  }
}

.error-404 .error-number {
  font-size: clamp(120px,20vw,280px);
  font-weight: 300;
  color: #718e39;
  line-height: .8;
  margin-bottom: 40px;
  letter-spacing: -.02em;
}

/* ===========================================================================================================================
   FLORENTINE HERO ANIMATION (override)
   - Header: 100% Breite, 682px Höhe
   - Logo größer, Text kleiner
   - 2s Hold nach Einblendung
   - Finalbild zoomt 4–5s vollflächig ein
   ========================================= */

:root{
  /* Timing */
  --logo-in-delay: 120ms;
  --logo-in-dur: 2500ms;

  --text-in-delay: 1200ms; /* Text startet nachdem Logo sichtbar wird */
  --text-in-dur: 2500ms;

  --hold-after-in: 1600ms; /* 2 Sekunden komplett sichtbar */

  /* Finalbild */
  --final-in-dur: 6400ms;  /* 4–5 Sekunden Zoom-in */
  --out-dur: 2200ms;       /* Logo/Text rauszoomen */

  /* Größen (Wunsch: Logo größer, Text kleiner) */
  --logo-max-h: 70%;       /* Anteil der 682px */
  --text-max-h: 15%;
}

/* --- Header Stage: fix 682px hoch, volle Breite --- */
.page-header.page-header-small.hero-anim{
  position: relative;
  overflow: hidden;
  background: #fff;

  width: 100%;
  height: 682px;

  /* keine max-width Begrenzung, damit Finalbild volle Breite hat */
  max-width: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: center;
  justify-content: center;
}

/* Layer-Container */
.page-header.page-header-small.hero-anim .hero-anim-inner{
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: .9rem;
  padding: 1.25rem;
  box-sizing: border-box;

  text-align: center;
}

/* --- Finalbild: vollflächig im Header (nicht begrenzt) --- */
.page-header.page-header-small.hero-anim .hero-final{
  position: absolute;
  inset: 0;
  z-index: 1;

  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;

  opacity: 0;
  transform: scale(1.08);

  /* Startzeitpunkt wird aus den anderen Zeiten berechnet (siehe unten) */
  animation: heroFinalIn var(--final-in-dur) ease-out var(--final-start) forwards;

  pointer-events: none;
}

/* --- Logo: größer --- */
.page-header.page-header-small.hero-anim .hero-logo{
  width: auto;
  height: auto;

  /* “immer sichtbar”: über Höhe begrenzen, Breite automatisch */
  max-height: var(--logo-max-h);
  max-width: 90vw;

  opacity: 0;
  transform: scale(.78) translateY(2px);

  animation:
    heroLogoIn var(--logo-in-dur) ease-out var(--logo-in-delay) forwards,
    heroOut    var(--out-dur)     ease-in  var(--final-start)  forwards;

  will-change: transform, opacity;
}

/* --- Text: etwas kleiner --- */
.page-header.page-header-small.hero-anim .hero-logotext{
  width: auto;
  height: auto;

  max-height: var(--text-max-h);
  max-width: 92vw;

  opacity: 0;
  transform: translateX(30px) scale(.99);

  animation:
    heroTextIn var(--text-in-dur) ease-out var(--text-in-delay) forwards,
    heroOut    var(--out-dur)     ease-in  var(--final-start)  forwards;

  will-change: transform, opacity;
}

/* --- Timing: Finalstart berechnen ---
   Final soll starten, wenn Logo+Text fertig sind + 2s Hold
   Ende Text = text-in-delay + text-in-dur
*/
:root{
  --final-start: calc(var(--text-in-delay) + var(--text-in-dur) + var(--hold-after-in));
}

/* Keyframes */
@keyframes heroLogoIn{
  to{ opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes heroTextIn{
  to{ opacity: 1; transform: translateX(0) scale(1); }
}
@keyframes heroOut{
  to{ opacity: 0; transform: scale(1.15) translateY(-4px); }
}
@keyframes heroFinalIn{
  to{ opacity: 1; transform: scale(1); }
}

/* Mobile: Header nicht höher als Screen (sonst wirkt’s riesig)
   Wenn du WIRKLICH immer 682px willst, sag Bescheid, dann nehme ich das raus. */
@media (max-height: 740px){
  .page-header.page-header-small.hero-anim{
    height: 56vh;
    min-height: 420px;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .page-header.page-header-small.hero-anim .hero-logo,
  .page-header.page-header-small.hero-anim .hero-logotext,
  .page-header.page-header-small.hero-anim .hero-final{
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 575.98px){

  /* Logo etwas kleiner */
  .page-header.page-header-small.hero-anim .hero-logo{
    max-height: 58%;   /* vorher 70% global */
    max-width: 70vw;   /* verhindert zu breite Darstellung */
  }

  /* Logotext deutlich kleiner + mehr Luft links/rechts */
  .page-header.page-header-small.hero-anim .hero-logotext{
    max-height: 12%;   /* vorher 15% */
    max-width: 68vw;   /* statt 92vw → viel eleganter */
  }

}
.section-image::after {
  background-color: rgba(0,0,0,.05);
}

/* ================================
   HERO ANIMATION SKIP MODE
   (nach erstem Besuch)
   ================================ */

/* Animation komplett deaktivieren */
.hero-anim-skip .hero-logo,
.hero-anim-skip .hero-logotext,
.hero-anim-skip .hero-final{
  animation: none !important;
}

/* Logo & Text sofort ausblenden */
.hero-anim-skip .hero-logo,
.hero-anim-skip .hero-logotext{
  opacity: 0 !important;
  transform: none !important;
}

/* Finalbild sofort sichtbar */
.hero-anim-skip .hero-final{
  opacity: 1 !important;
  transform: none !important;
}