:root {
     --brand: #6c757d;
     --bgcolor: rgb(79, 79, 79);
 }

 body {
     font-feature-settings: 'liga' 1, 'kern' 1;
 }

 .navbar-nav .nav-link {
     position: relative;
     transition: color 0.3s ease;
 }


 .navbar-nav .nav-link.active {
     color: #ff6600;
     /* Gleiche Farbe wie Hover */

     position: relative;
 }

 /* Unterstrich für aktiven Link dauerhaft anzeigen */
 .navbar-nav .nav-link.active::after {
     content: "";
     position: absolute;
     width: 100%;
     height: 3px;
     bottom: 0;
     left: 0;
     background: #ff6600;
 }


 .navbar-nav .nav-link:hover,
 .navbar-nav .nav-link:focus {
     color: #ff6600;
     /* Beispiel: orange Farbe beim Hover */
 }

 /* Unterstrich-Animation beim Hover */
 .navbar-nav .nav-link::after {
     content: "";
     position: absolute;
     width: 0;
     height: 3px;
     display: block;
     margin-top: 5px;
     right: 0;
     background: #ff6600;
     /* gleiche Farbe wie Hover-Text */
     transition: width 0.3s ease;
     -webkit-transition: width 0.3s ease;
 }

 .navbar-nav .nav-link:hover::after,
 .navbar-nav .nav-link:focus::after {
     width: 100%;
     left: 0;
     background: #ff6600;
 }




 .hero,
 .hero_klein {
     position: relative;
     min-height: 95vh;
     display: grid;
     place-items: center;
     text-align: center;
 }


 .hero_klein {
     min-height: 20vh;
 }

 .hero::before,
 .hero_klein::before {
     content: "";
     position: absolute;
     inset: 0;
     background: url('../img/hero.webp') center 60% / cover no-repeat;
     /* filter: grayscale(35%) brightness(.7); */
 }

 .hero_klein::before {
     background: url('../img/hero1.webp') center 50% / cover no-repeat;
 }

 .hero>*,
 .hero_klein>* {
     position: relative;
 }

 .hero h1,
 .hero_klein h1 {
     font-weight: 300;
 }

 .text-justify {
     text-align: justify;
 }


 .feature-icon {
     /* responsive Box-Größe */
     --box: clamp(2.5rem, 4vw, 3.5rem);
     /* min, fluid, max */
     width: var(--box);
     height: var(--box);
     aspect-ratio: 1 / 1;
     /* sicherheitshalber quadratisch */
     border-radius: .75rem;

     display: grid;
     place-items: center;
     background-color: var(--bgcolor) !important;
     /* oder deine bg-light/shadow-soft */
     /* Icon-Größe relativ zur Box (z.B. 60% der Kantenlänge) */
     font-size: calc(var(--box) * 0.6);
 }

 /* Bootstrap-Icon sauber zentrieren */
 .feature-icon .bi {
     font-size: 1em;
     /* = 60% der Box durch obiges font-size */
     line-height: 1;
     display: block;
     color: #fff;
     /* erbt von .feature-icon */
 }



 .shadow-soft {
     box-shadow: 0 1rem 2rem rgba(0, 0, 0, .08), 0 .25rem 1rem rgba(0, 0, 0, .06);
 }

 footer a {
     text-decoration: none;
 }


 /* footer {
     background-color: var(--bgcolor) !important;
     color: white;
 } */

 img[loading="lazy"] {
     content-visibility: auto;
 }

 .costum_section {

     --bs-bg-opacity: 1;
     background-color: var(--bgcolor) !important;
     color: white;
 }