/* =========================================================
   overrides_grid.css
   Ziel: Flex-Items komplett ersetzen, Grid stabil von oben nach unten
   Diese Datei als LETZTES nach allen anderen CSS einbinden.
   ========================================================= */

:root{
  --page-pad: var(--frame-gap);
}

/* Basis Typo (mobile nicht zu klein) */
html{ font-size:16px; }
body{ font-size: clamp(16px, 3.9vw, 18px); line-height:1.55; }

/* Einheitlicher Seitenrand wie Hero-Outline */
.wrapper{
  width:100%;
  margin:0;
  padding-inline: var(--page-pad);
  box-sizing:border-box;
}
.container{
  width:min(1100px, 100%);
  margin-inline:auto;
  box-sizing:border-box;
}

/* H1 skalieren wie Hero */
h1{ font-size: clamp(1.9rem, 6.2vw, 3.2rem); line-height:1.05; }

/* Grid 2 Spalten */
.grid-2{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 3vw, 32px);
  align-items:start;
}
@media (max-width:900px){
  .grid-2{ grid-template-columns:1fr; }
}

/* Leistungen Cards: 3→2→1 */
.cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px);
}
@media (max-width:1100px){
  .cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width:720px){
  .cards{ grid-template-columns:1fr; }
}
.card{ width:100%; }

/* Footer */
.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 3vw, 28px);
  align-items:start;
}
.footer-grid-2{
  grid-template-columns: 1fr 1fr;
  align-items:center;
}
@media (max-width:900px){
  .footer-grid{ grid-template-columns:1fr; }
  .footer-grid-2{ grid-template-columns:1fr; }
}

/* Vorteile-Liste: Textfarbe wie Rest */
.vorteile li{ color: var(--sam-gray, #666); }
.vorteile li span{ color: #2f2f2f; font-weight:700; }

/* Mobile: Bilder 100% */
@media (max-width:900px){
  img{ width:100%; height:auto; display:block; }
  .gallery-grid{ grid-template-columns:1fr !important; }
}

.footer-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: clamp(16px, 3vw, 28px);
  align-items:start;
}

.footer-grid-2{
  grid-template-columns: 1fr auto;
  align-items:center;
}

@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1fr;
  }
  .footer-grid-2{
    grid-template-columns: 1fr;
  }
}

/* ===== Footer: saubere Einzüge ===== */
.site-footer .footer-col p{
  margin: 0.4em 0 0;
}

.site-footer .footer-links{
  list-style: none;
  padding: 0;
  margin: 0.6em 0 0;
}

.site-footer .footer-links li{
  margin: 0.25em 0;
}

/* ===== Footer Bottom ===== */
.footer-bottom{
  margin-top: clamp(18px, 3vw, 28px);
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.15);
}

.footer-bottom p{
  margin: 0;
}

@media (max-width: 900px){
  .footer-bottom{
    gap: 8px;
  }

  .footer-bottom p{
    text-align: left;
  }
}

/* Vorteile: 2 Spalten */
.vorteile-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}

.vorteile-list li{
  margin: 0;
}

/* Mobile: 1 Spalte */
@media (max-width: 900px){
  .vorteile-list{
    grid-template-columns: 1fr;
  }
}

/* Vorteile Layout */
#vorteile .vorteile-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px 32px;
}

#vorteile .vorteile-list li{
  margin: 0;
  color: var(--sam-gray, #666);
  line-height: 1.6;
}

#vorteile .vorteile-list li strong{
  color: var(--sam-orange);
  font-weight: 700;
}

@media (max-width: 900px){
  #vorteile .vorteile-list{
    grid-template-columns: 1fr;
  }
}

/* Vorteile: Bullet-Punkt wieder rein (orange) */
#vorteile .vorteile-list{
  list-style: none;
}

#vorteile .vorteile-list li{
  position: relative;
  padding-left: 1.2em;   /* Platz für den Punkt */
}

#vorteile .vorteile-list li::before{
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--sam-orange);
  font-weight: 900;
  line-height: 1.6;
}

/* #vorteile wirklich zentriert + begrenzt */
#vorteile .wrapper{
  width: min(1100px, 100%) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--frame-gap) !important;
  padding-right: var(--frame-gap) !important;
  box-sizing: border-box !important;
}

.leistungen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Mobile */
@media (max-width: 900px){
  .leistungen-grid{
    grid-template-columns: 1fr;
  }
}

.leistungen-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 900px){
  .leistungen-grid{ grid-template-columns: 1fr; }
}

/* gelbe Leistungs-Box */
.leistung-box{
  padding: 24px 24px 28px;
}

/* Mobile etwas luftiger */
@media (max-width: 900px){
  .leistung-box{
    padding: 20px;
  }
}

.card.orange{
  padding: 32px 28px 32px;
}

.card.orange h3{
  margin-top: 0;          /* wichtig */
  margin-bottom: 10px;
}

.card.orange hr{
  margin: 10px 0 18px;
}

.card.orange p{
  margin: 0 0 14px;
}

@media (max-width: 900px){
  .card.orange{
    padding: 24px;
  }
}

.card.orange hr{
  border: 0;
  height: 2px;
  background: rgba(255,255,255,1.00);
  margin: 6px 0 8px;
}

/* Cards: Button immer unten */
.card.orange{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.orange .card-cta{
  margin-top: auto; /* drückt den Button nach unten */
}

/* Das <p> um den Button darf keinen extra Abstand machen */
.card.orange p:last-child{
  margin-bottom: 0;
}

.leistungen-grid{
  align-items: stretch;
}

.card.orange{
  display: flex;
  flex-direction: column;
  height: 100%;
}

.card.orange p:last-of-type{
  margin-top: auto;   /* schiebt die Button-Zeile nach unten */
  margin-bottom: 0;   /* unten sauber */
}

/* Button-Zeile zentrieren */
.card.orange p:last-of-type{
  margin-top: auto;     /* bleibt unten */
  margin-bottom: 8px;
  text-align: center;   /* HIER die Mitte */
}

.card.orange .card-cta{
  display: inline-block;
}

.card.orange p:last-of-type{
  margin-top: auto;
  margin-bottom: 0;
  text-align: center;
}

footer{
	padding-bottom: 0;
}

.footer-bottom{
  padding-bottom: 0;   /* kein Abstand nach unten */
}

.footer-grid-2{
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

/*.footer-links-inline{
  justify-self: start;   /* links 
}*/

/*.footer-copy{
  justify-self: end;     
  text-align: right;/* rechts 
}*/



@media (max-width: 700px){
  .footer-grid-2{
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ===== FOOTER BOTTOM: links/rechts + kein Abstand unten ===== */

/* gleicher Innenabstand links/rechts wie restliche Sektionen */
.footer-bottom .wrapper{
  padding-left: clamp(16px, 4vw, 32px) !important;
  padding-right: clamp(16px, 4vw, 32px) !important;
}

/* 2) Falls dein Wrapper global Padding hat: hier neutralisieren */
footer .wrapper{
  padding-bottom: 0 !important;
}

/* 3) Bottom-Bar Grid */
.footer-grid-2{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  align-items: center !important;
}

/* 4) Links / Rechts wirklich erzwingen */
.footer-links-inline{ text-align: left !important; }
.footer-copy{ text-align: right !important; }

/* Mobile: erst Links, dann Copyright */
@media (max-width: 700px){
  .footer-grid-2{
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .footer-links-inline{ order: 1; text-align: left !important; }
  .footer-copy{ order: 2; text-align: left !important; }
}

@media (max-width: 700px){
  .overlay h1{
      font-size: 170%;
  }
	.footer-logo, .footer-text, h1, h2, h3, h4, p, a, li, .footer-copy, .footer-col, .footer-links-inline{
		text-align: center;
}
}

footer a, .footer-col a{
	text-decoration: underline;
}

/* ========= FOOTER MOBILE RESET ========= */
@media (max-width: 768px) {

  footer .footer-grid > * {
    width: 100% !important;
    text-align: center !important;
    margin: 0 auto !important;
  }

  footer .footer-copy,
  footer .footer-bottom,
  footer .footer-legal {
    text-align: center !important;
    justify-content: center !important;
  }

  /* ===== Footer-Logo: NUR mobil mittig ===== */
  footer a.logo{
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  footer a.logo img.footer-logo{
    display: block !important;
    margin: 0 auto !important;
  }

  /* ===== Footer: Subtext unter Logo – NUR mobil ===== */
  footer .logo + *{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 22rem;
  }
}

/* ===== Footer-Logo: Desktop links ===== */
@media (min-width: 769px){
  footer a.logo{
    display: inline-flex !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  footer a.logo img.footer-logo{
    margin: 0 !important;
  }
}

@media (max-width: 768px){
  footer .footer-col:has(a.logo){
    text-align: center !important;
  }
  footer .footer-col:has(a.logo) a.logo{
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Footer: Logo + Subtext in der Logo-Spalte NUR mobil zentrieren */
@media (max-width: 768px){
  footer .footer-col:has(a.logo){
    text-align: center !important;
  }

  footer .footer-col:has(a.logo) a.logo{
    margin-left: auto !important;
    margin-right: auto !important;
    width: fit-content !important;
  }

  footer .footer-col:has(a.logo) .footer-text,
  footer .footer-col:has(a.logo) p{
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* ===== MASTER FIX (ganz unten lassen!) ===== */

/* Desktop: Logo + Claim links */
@media (min-width: 769px){
  footer .footer-col:has(a.logo){
    text-align: left !important;
  }
  footer a.logo{
    display: inline-flex !important;
    width: auto !important;
    margin-left: 0 !important;
    margin-right: auto !important;
  }
  footer a.logo img.footer-logo{
    margin: 0 !important;
  }
}

/* Mobil: Logo + Claim mittig */
@media (max-width: 768px){
  footer .footer-col:has(a.logo){
    text-align: center !important;
  }
  footer a.logo{
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  footer a.logo img.footer-logo{
    display: block !important;
    margin: 0 auto !important;
  }
  footer .footer-col:has(a.logo) p,
  footer .footer-col:has(a.logo) .footer-text{																																																																																																																																																																					
    max-width: 22rem;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* ===== FINAL FIX: Subtext unter Footer-Logo NUR mobil ===== */
@media (max-width: 768px){
  footer .footer-col:has(a.logo) p,
  footer .footer-col:has(a.logo) .footer-text{
    max-width: 22rem;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
}

/* ===== SAM Quick Icons: hard lock size + position (like #toTop) ===== */
#sam-quick-icons{
  position: fixed !important;
  right: 2em !important;
  bottom: calc(2em + 48px + 10px) !important; /* über toTop */
  z-index: 9999 !important;
  display: none; /* JS schaltet */
  flex-direction: column !important;
  gap: 10px !important;
}

#sam-quick-icons .sq{
  width: 48px !important;
  height: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 999px !important;
  line-height: 1 !important;
  font-size: 0 !important;            /* killt riesige Text-Einflüsse */
  text-decoration: none !important;
}

#sam-quick-icons .sq svg{
  width: 22px !important;
  height: 22px !important;
  display: block !important;
}

/* Mobile small: exakt wie dein #toTop (<480px) */
@media (max-width: 480px){
  #sam-quick-icons{
    right: 12px !important;
    bottom: calc(12px + 44px + 10px) !important;
  }
  #sam-quick-icons .sq{
    width: 44px !important;
    height: 44px !important;
  }
}


/* ===== UNKAPUTTBAR: Logo-Spalte auf Mobile wirklich zentrieren ===== */
@media (max-width: 768px){
  footer .footer-col:has(a.logo){
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  /* Logo bleibt klickbar, keine Breiten-Macken */
  footer .footer-col:has(a.logo) a.logo{
    margin: 0 !important;
    width: fit-content !important;
  }

  /* Alles was nach dem Logo kommt (Subtext/Claim etc.) mittig */
  footer .footer-col:has(a.logo) a.logo ~ *{
    text-align: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    max-width: 22rem;
  }
}
/* Quick Icons: sicherer IMG-Mode */
#sam-quick-icons{ display:none; position:fixed; z-index:9999; flex-direction:column; gap:10px; }

#sam-quick-icons .sq{
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  padding: 0;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.18);
}

#sam-quick-icons .sq-ico{
  width: 33px;
  height: 33px;
  display: block;
  object-fit: contain;
}

@media (max-width: 480px){
  #sam-quick-icons .sq{ width:44px; height:44px; }
}
@media (max-width:712px){
  #sam-quick-icons{ display:flex !important; right:2em; bottom:120px; }
}

/* ===== SAM Quick Icons (mobile) – wie #toTop ===== */
#sam-quick-icons{
  position: fixed !important;
  display: none;                 /* wird später per JS geschaltet */
  flex-direction: column !important;
  gap: 10px !important;
  z-index: 9999 !important;
}

/* gleiche Button-Box wie toTop (48/44) */
#sam-quick-icons .sq{
  width: 48px !important;
  height: 48px !important;
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  margin: 0 !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  line-height: 1 !important;
  font-size: 0 !important;
  background: rgba(0,0,0,.55) !important;
  border: 1px solid rgba(255,255,255,.18) !important;
  backdrop-filter: blur(6px);
}

/* IMG NICHT riesig werden lassen (dein .icon) */
#sam-quick-icons .sq .icon{
  width: 33px !important;
  height: 33px !important;
  display: block !important;
  object-fit: contain !important;
  max-width: none !important;
  max-height: none !important;
}

/* Position: exakt wie #toTop (aus deiner CSS) */
@media (min-width: 481px){
  #sam-quick-icons{ right: 2em !important; }
}
@media (max-width: 480px){
  #sam-quick-icons{ right: 12px !important; }
  #sam-quick-icons .sq{ width: 44px !important; height: 44px !important; }
}

/* Desktop aus */
@media (min-width: 712px){
  #sam-quick-icons{ display: none !important; }
}

@media (max-width: 712px){
  #sam-quick-icons{ display: flex !important; bottom: 300px !important; }
}


@media (max-width:712px){#sam-quick-icons{bottom:300px!important}}

@media (max-width:712px){#sam-quick-icons{bottom:calc(var(--totop-bottom,120px) + 60px)!important}}

/* Mobile Quick Icons – nur wenn Header-Icons weg sind */
#sam-quick-icons{
  display:none;
  position:fixed;
  right:16px;
  bottom:220px; /* deine gewünschte Höhe */
  flex-direction:column;
  gap:10px;
  z-index:9999;
}

/* exakt gleicher Breakpoint wie Header */
@media (max-width:712px){
  .header-icons{ display:none; }
  #sam-quick-icons{ display:flex; }
}

/* SAM Quick Icons – float wie #toTop, aber oben rechts */
#sam-quick-icons{
  position: fixed;
  right: 16px;            /* wie #toTop */
  top: 160px;             /* Startwert – danach feinjustieren */
  z-index: 9999;
  display: none;          /* default AUS */
  flex-direction: column;
  gap: 10px;
}

/* Buttons gleiche Größe wie toTop */
#sam-quick-icons .sq{
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  text-decoration: none;
  opacity: .92;
  transition: opacity .15s ease, transform .15s ease;
}
#sam-quick-icons .sq:hover{ opacity: 1; transform: translateY(-1px); }
#sam-quick-icons .icon{ width: 22px; height: 22px; display:block; }

/* NUR Mobile: Quick-Icons EIN */
@media (max-width: 712px){
  #sam-quick-icons{ display: flex; }
}

/* Desktop: definitiv AUS */
@media (min-width: 712px){
  #sam-quick-icons{ display: none !important; }
}