/* Buttons */
.btn,
a.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .6rem 1rem;
  border-radius: var(--r1);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}

.btn:hover{
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: rgba(15,23,42,.22);
}

.btn-primary,
a.btn-primary{
  background: var(--accent);
  color: var(--accent-ink);
  border-color: rgba(0,0,0,0);
}

.btn-primary:hover{
  background: color-mix(in srgb, var(--accent) 88%, #000 12%);
}

/* Cards / Panels */
.cardish{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r2);
  box-shadow: var(--shadow);
  padding: var(--s3);
}

/* Section headings helper */
.section-kicker{
  color: var(--muted);
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .85rem;
  margin-bottom: var(--s1);
}

/* Contact block */
.contact-list a{
  font-weight: 600;
}
  display: none; /* removed - icons no longer used */
}

/* Navbar polish (Bootstrap stays, we just nudge it) */
.navbar{
  padding-top: var(--s1);
  padding-bottom: var(--s1);
}
.navbar .nav-link{
  border-radius: var(--r1);
}
.navbar .nav-link:hover{
  background: var(--surface-2);
}
.navbar .nav-item.active .nav-link,
.navbar .nav-link[aria-current="page"]{
  background: var(--surface-2);
  font-weight: 700;
}

.site-header{
  border-bottom: 1px solid var(--border);
}

.header-logo-row{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: .75rem 1rem;
}

.header-logo-link{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.header-logo-img{
  height: 100px;   /* ggf. 56px wenn zu groß */
  width: auto;
  max-width: 100%;
  object-fit: contain;
  display: block;
}

/* Quick links rechts in Nav-Zeile */
.header-quick{
  display: flex;
  gap: .5rem;
  align-items: center;
}

.site-footer{
  background: #0b1220; /* dunkle Kontrastfarbe */
  color: rgba(255,255,255,.85);
  padding: 3rem 0 1.25rem;
  margin-top: 3rem;

  /* wichtig: Footer soll immer volle Breite haben */
  width: 100%;
}

/* Inner-Container: zentriert + safe padding, egal ob Bootstrap container greift */
.site-footer__inner{
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 1rem;
}

.site-footer a{
  color: rgba(255,255,255,.85);
  text-decoration: none;
}

.site-footer a:hover{
  color: #fff;
  text-decoration: underline;
  text-underline-offset: .2em;
}

.site-footer a:focus-visible{
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.site-footer__top{
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 2rem;
  align-items: start;
  padding-bottom: 2rem;
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.site-footer__logo{
  height: 46px; /* klein */
  width: auto;
  display: block;

  /* Notlösung für dunkles Logo auf dunklem Hintergrund */
  filter: brightness(0) invert(1);
}

.site-footer__claim{
  margin: .75rem 0 0;
  color: rgba(255,255,255,.85); /* etwas besser lesbar */
  max-width: 34ch;
}

.site-footer__title{
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 .75rem;
  color: #fff;
}

.site-footer__list{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: .5rem;
}

.site-footer__bottom{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding-top: 1rem;
  color: rgba(255,255,255,.75); /* etwas heller */
  font-size: .95rem;
}

.site-footer__copy{
  margin: 0;
  color: rgba(255,255,255,.85);
}

.site-footer__toplink{
  margin: 0;
}

/* Responsive */
@media (max-width: 900px){
  .site-footer__top{
    grid-template-columns: 1fr;
  }
  .site-footer__bottom{
    flex-direction: column;
    align-items: flex-start;
  }
}


/* Footer immer volle Viewport-Breite, egal ob Parent begrenzt */
.site-footer{
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  margin-bottom: 0;
}

.site-footer{
  overflow: auto; /* verhindert margin collapse */
}

/* Mobile Actions: standardmäßig aus */
.mobile-actions{
  display: none;
  gap: .5rem;
  align-items: center;
}

/* Buttons */
.mobile-actions__btn{
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(0,0,0,.12);
  border-radius: .5rem;
  background: #fff;
  color: #111;

  text-decoration: none;
}

.mobile-actions__btn:focus-visible{
  outline: 2px solid #111;
  outline-offset: 2px;
}

/* Nur Mobile: anzeigen */
@media (max-width: 576px){
  .mobile-actions{
    display: inline-flex;
  }

  /* Damit toggler + actions nebeneinander stehen */
  .navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
  }

  /* Burger nicht riesig werden lassen */
  .navbar-toggler{
    margin-right: .25rem;
  }
}

/* Icons (CSS-only, kein externes Icon-Set nötig) */
.icon{
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* simple inline SVG via data-URI */
.icon--phone{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M22 16.92v3a2 2 0 0 1-2.18 2 19.86 19.86 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.86 19.86 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.86.3 1.7.54 2.5a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.58-1.06a2 2 0 0 1 2.11-.45c.8.24 1.64.42 2.5.54A2 2 0 0 1 22 16.92Z'/%3E%3C/svg%3E");
}

.icon--map{
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Cpath stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 20l-5 2V6l5-2 6 2 5-2v16l-5 2-6-2Z'/%3E%3Cpath stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M9 4v16'/%3E%3Cpath stroke='%23111' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M15 6v16'/%3E%3C/svg%3E");
}

/* Navbar Grundlayout */
.navbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Rechter Block */
.navbar-actions{
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* Mobile Buttons */
.mobile-actions{
  display: none;
  gap: .5rem;
}

/* Nur mobil sichtbar */
@media (max-width: 576px){
  .mobile-actions{
    display: inline-flex;
  }
}

/* Rechter Mobile-Bereich */
.navbar-actions{
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-right: auto;
}

.mobile-actions{
  display: inline-flex;
  gap: .5rem;
  order: 2;
}

.navbar-toggler{
  order: 1;
}

@media (min-width: 768px){
  .mobile-actions{
    display: none;
  }
}

/* Services grid/cards (moved from index.html) */
.services{
  padding: 2rem 0;
}

.services__grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 1.5rem;
}

@media (min-width: 768px){
  .services__grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 992px){
  .services__grid{
    grid-template-columns: repeat(3, 1fr);
  }
}

.service-card{
  background: var(--surface, #fff);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: .5rem;
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  transition: transform .18s ease, box-shadow .18s ease;
}

.service-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
}

/* Ensure all titles have the same height so following elements align */
.service-card__title{
  margin: 0;
  min-height: 2.8em;
  display: flex;
  align-items: flex-start;
}

/* Ensure all leads have consistent height */
.service-card__lead{
  margin: 0.5rem 0;
  min-height: 2.4em;
  color: rgba(0,0,0,.7);
  font-size: .95rem;
  display: flex;
  align-items: flex-start;
}

.service-card__list{
  padding-left: 1rem;
  margin: 0;
}

.service-card__list li{
  margin-bottom: .35rem;
}

/* Mobile: adjust heights for smaller screens */
@media (max-width: 576px){
  .service-card__title{
    min-height: 2.4em;
  }
  
  .service-card__lead{
    min-height: 2em;
  }
  
  /* Add spacing between heading and content on mobile */
  #benefit .col-md-3{
    margin-bottom: 1.5rem;
  }
}

/* Shift content to the right so the heading sits left */
.services__content{
  padding-left: 1rem;
}

@media (min-width: 768px){
  .services__content{
    padding-left: 2rem;
  }
}

@media (min-width: 1200px){
  .services__content{
    padding-left: 3rem;
  }
}

/* Align heading and content columns at the top */
#benefit .services__row{
  display: flex;
  align-items: flex-start;
}

/* Make the columns with col-md-3 and col-md-9 flex containers to align their content properly */
#benefit .col-md-3,
#benefit .col-md-9{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Remove extra margins on the heading within services */
#benefit h2.section-title{
  margin-top: 0;
  margin-bottom: 0;
}

/* Ensure services grid and content have no top gap */
#benefit .services__grid{
  margin-top: 0;
  margin-bottom: 0;
}

#benefit .services__content{
  margin-top: 0;
  margin-bottom: 0;
}