#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1030; /* wie Bootstrap navbar */
}

.navbar-nav {
    justify-content: space-between;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--main-color)!important;
}

section {
    padding-top: 20px;
    padding-bottom: 20px;
}

.button {
    max-width: 400px;
    margin-top: 15px;
    margin-left: auto;
    margin-right: auto;
    padding: 5px 52px;
    border-width: 1px;
    border-radius: 10px;
    color:#fff;
    background-color:var(--sec-color);
    border-color: var(--sec-color);
    transition: ease .4s;
    border-style: solid;
    line-height: 34px;
    display: block;
    text-align: center;
}

.button:hover {
    background-color: var(--main-color);
    color:#fff;
    text-decoration: none;
}

nav .btn {
    color: var(--brand-on);
    background-color:var(--main-color);
    border-color: var(--main-color);
}

nav .btn:hover {
    background-color: var(--brand-hover);
    color: var(--brand-on);
    text-decoration: none;
}

/* ----------------------------- Navbar Toggler ----------------------------- */

.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.25rem;
    line-height: 1;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: box-shadow .15s ease-in-out;
}

nav .navbar-toggler {
    border: none;
    background: transparent !important;
}

nav .navbar-toggler:focus {
    outline: none;
    box-shadow: none !important;
}

.navbar-toggler .top-bar {
    transform: rotate(45deg);
    transform-origin: 10% 10%;
    margin-top: 0;
}

.navbar-toggler .middle-bar {
    opacity: 0;
}

.navbar-toggler .bottom-bar {
    transform: rotate(-45deg);
    transform-origin: 10% 90%;
}

.navbar-toggler.collapsed .top-bar {
    transform: rotate(0);
}

.navbar-toggler.collapsed .middle-bar {
    opacity: 1;
}

.navbar-toggler.collapsed .bottom-bar {
    transform: rotate(0);
}

.icon-bar {
    width: 22px;
    height: 2px;
    background-color: #B6B6B6;
    display: block;
    transition: all .2s;
    margin-top: 4px;
}

/* --------------------------------- Header --------------------------------- */

.navbar-brand > h4 {
    padding-left: 10px;
    margin: 0px;
}

.navbar-brand {
    align-items: center;
}

/* ------------------------------ Link Styling ------------------------------ */

a,
#nav-link,
#navbarDropdown,
#nav-dropdown-item,
footer li a,
.navbar-brand a {
    text-decoration: none!important;
}

footer a {
    color: var(--main-color)
}

body a {
    color: var(--bs-body-color);
}

a.nav-link {
    font-size: 1.2rem;
    font-family: 'Roboto';
}

a #nav-link {
    font-size: 16px;
}

#nav-dropdown-item {
    font-size: 14px;
}

a:hover,
#nav-link:hover,
#navbarDropdown:hover,
#nav-dropdown-item:hover {
    color: #686868;
    text-decoration: none!important;
}

main a:not(.button):not(.stretched-link):not(.blog_tag) {
    border-bottom: 2px solid;
    border-color: var(--main-color);
}

/* ----------------------------- Table Settings ----------------------------- */

table.table .htLeft {
    text-align: left
}

table.table .htCenter {
    text-align: center
}

table.table .htRight {
    text-align: right
}

table.table .htJustify {
    text-align: justify
}

table.table .htTop {
    vertical-align: top
}

table.table .htMiddle {
    vertical-align: middle
}

table.table .htBottom {
    vertical-align: bottom
}

table.table tr {
    background-color: var(--main-color)
}

table.table tr > th {
    background-color: inherit;
}

::selection {
    background: var(--sec-color);
}

nav .navbar-toggler {
    border: none;
    background: transparent !important;
}

nav .navbar-toggler:focus {
    outline: none;
    box-shadow: none !important;
}

/* Headroom Basis */
.headroom.animated {
  will-change: transform;
  transition: transform 200ms ease-in-out;
}

body.topbar-active #site-header.headroom--unpinned,
body:not(.topbar-active) #site-header.headroom--unpinned {
  transform: translateY(-100%);
}

/* body.topbar-active .headroom--unpinned {
    transform: translateY(-384%);
}

body:not(.topbar-active) .headroom--unpinned {
    transform: translateY(-205%);
} */

#site-header.headroom--pinned {
  transform: translateY(0);
}

header {
    will-change: transform;
    transition: transform 200ms linear;
}

.footer ul {
    list-style: none;
    padding-left:0;
  }

#BildundText #text-element img{
    max-width: 100%;
    height: 100%;
}

#card {
    border: none;
    -webkit-box-shadow: 0 20px 72px -29px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 20px 72px -29px rgba(0, 0, 0, 0.8);
    box-shadow: 0 20px 72px -29px rgba(0, 0, 0, 0.8);
    transition: ease .4s;
    -webkit-font-smoothing: subpixel-antialiased;
    will-change: transform;
    transform: translateZ(0);
}

#card:hover {
    -webkit-box-shadow: 0 20px 72px -5px rgba(0, 0, 0, 0.8);
    -moz-box-shadow: 0 20px 72px -5px rgba(0, 0, 0, 0.8);
    box-shadow: 0 20px 72px -5px rgba(0, 0, 0, 0.8);
    transform: perspective(1px) scale(1.02);
}

.featherlight .legend {
    margin-top: 10px;
    padding: 8px 12px;

    font-size: 0.9rem;
    line-height: 1.5;
    color: #333;

    background: #f7f7f7;
    border-left: 4px solid #ccc;
    border-radius: 4px;

    text-align: left;
}

/* Content-Box als flex container: oben Bild, unten Caption */
.featherlight .featherlight-content{
  display: flex;
  flex-direction: column;
  max-height: 92vh;   /* passt fast immer gut */
  overflow: hidden;   /* verhindert inneres Scrollen */
}

/* Das eigentliche Bild darf schrumpfen */
.featherlight .featherlight-content img{
  max-height: calc(92vh - 70px); /* 70px ≈ Caption+Padding, bei Bedarf anpassen */
  width: auto;
  height: auto;
  object-fit: contain;
}

.btn-brand{
    color: var(--brand-on)!important;
    background-color: var(--main-color)!important;
    border-color: var(--main-color)!important;
}

.btn-brand:hover {
    background-color: var(--brand-hover)!important;
    color: var(--brand-on)!important;
    text-decoration: none;
}

/* Caption bleibt unten sichtbar */
.featherlight .legend{
  flex: 0 0 auto;
  margin-top: 12px;
}

#card-block{
    margin-top: 25px;
    margin-bottom: 25px;
}

.card-text:not(.text-center) p {
    text-align: left !important;
}

.card-footer {
    border-top: none !important;
    background-color: transparent !important;
}

.rounded-top {
    border-top-left-radius: var(--bs-border-radius)!important;
    border-top-right-radius: var(--bs-border-radius)!important;
}

@media only screen and (max-width: 1023px)  {
    .hero_block{
        padding-top:50px;
    }
    
    main {
        padding-top: 20px;
    }
}

@media only screen and (min-width: 1024px)  {
    body.topbar-active .hero_block{
        padding-top: calc(56px + 59px);
    }   

    nav.navbar.fixed-top.has-topbar {
        top: 29px; /* ggf. an Topbar-Höhe anpassen */
    }

    body:not(.topbar-active) .hero_block{
        padding-top: 86px;
    }    

    main {
        padding-top: 57px;
    }
}

/* Dark Logo Handling */
.logo-dark { display: none; }

html[data-bs-theme="dark"] .logo-dark {
  display: inline;
}

html[data-bs-theme="dark"] .logo-light {
  display: none;
}

.brand-text {
  line-height: 1;
}

/* Standard: Light Mode → Mond anzeigen */
.theme-icon-light { display: none; }

html[data-bs-theme="dark"] .theme-icon-dark { display: none; }
html[data-bs-theme="dark"] .theme-icon-light { display: inline; }

/* Hover Effekt */
.theme-toggle {
  cursor: pointer;
  transition: color 0.2s ease;
}

.theme-toggle:hover {
  color: var(--main-color);
}

/* Mobile: CTA links, Toggle rechts */
@media (max-width: 991.98px) {
  .navbar-actions{
    width: 100%;
    justify-content: space-between;
  }

  /* damit der Toggle wirklich rechts sitzt */
  .navbar-actions .theme-toggle{
    margin-left: auto !important;
  }
}

@media (min-width: 991.99px) {

    .main-nav.navbar {
    min-height: 86px;
    }
}

.cta-section {
  position: relative;
  overflow: hidden;
  padding: 40px 0;
}

.cta-title {
  font-weight: 600;
}

.cta-text {
  max-width: 760px;
  opacity: 0.85;
  color: #fff;
}

/* Varianten */
.cta-variant-hero {
  background: #0b1220;
}

.cta-variant-dark {
  background: linear-gradient(135deg, #111827, #0b1220);
}

.cta-variant-brand {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--main-color) 25%, #000),
    color-mix(in srgb, var(--main-color) 10%, #0b1220)
  );
}

/* CTA Phone */
.cta-phone {
  opacity: 0.75;
  color: #fff;
}

.cta-phone a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.partner-logos-subline {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
  opacity: .8;
}

.partner-logos-grid {
  display: grid;
  gap: 22px 32px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
}

@media (min-width: 576px) {
  .partner-logos-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 992px) {
  .partner-logos-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.partner-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 72px;
  width: 100%;
  opacity: .75;
  transition: opacity .2s ease, transform .2s ease;
  text-decoration: none;
}

.partner-logo:hover {
  opacity: 1;
  transform: translateY(-1px);
}

.partner-logo-img img,
.partner-logo-img picture,
.partner-logo-img {
  max-width: 140px;
  height: auto;
}

section.partner-logos{
    padding-bottom: 0px;
}

/* optional dark variant */
.partner-logos-dark {
  background: #0b1220;
}
.partner-logos-dark .partner-logo {
  opacity: .85;
}

.fullwidth-breakout {
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  width: 100vw;
  max-width: 100vw;
}

/* verhindert horizontalen scrollbar durch Rundungen/Browser */
html, body {
  overflow-x: clip;
}

/* Benefits Block */
.benefits-subline { opacity: .75; max-width: 70ch; margin: 0 auto; }

.benefit-list { display: flex; flex-direction: column; gap: 18px; }
.benefit-item { padding: 10px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.benefit-item:last-child { border-bottom: 0; }

.benefit-title { font-weight: 600; }
.benefit-text { opacity: .8; margin-top: 2px; }

.benefit-dot {
  width: 10px; height: 10px; border-radius: 50%;
  margin-top: 6px;
  background: var(--main-color);
  flex: 0 0 auto;
}

.benefit-ico {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--main-color);
  flex: 0 0 auto;
}

/* CI-Farbe aus :root --main-color */
.benefits-block .benefit-ico,
.benefits-block .stat-ico
.benefits-block .stat-bg-icon {
  color: var(--main-color);
}

/* sicherstellen dass SVGs die Textfarbe übernehmen */
.benefits-block .benefit-ico svg,
.benefits-block .stat-ico svg,
.benefits-block .stat-bg-icon svg {
  fill: currentColor;
}

.benefit-card {
  background: color-mix(in srgb, black 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.benefit-stats {
  background: color-mix(in srgb, black 8%, transparent);
  border: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.stat-value { font-weight: 700; font-size: 1.2rem; color: var(--main-color); }
.stat-label { opacity: .8; font-size: .9rem; }
.stat-placeholder { opacity: .8; }

.stat-item { padding: 0.75rem; border-radius: 12px; position: relative; overflow: hidden; }

.stat-bg-icon{
  position: absolute;
  right: 2rem;
  top: 1.5rem;
  opacity: 0.8;
  color: var(--main-color);
  pointer-events: none;
}

.stat-value{
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--main-color);
}

.stat-label{
  opacity: 0.85;
}