body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}


:root{
  --footer-border:#4e4e4e00;
  --footer-text:#1e1e1e;
  --footer-dim:#6c6c6c;
  --footer-bg:#ffffff;
}


/* Topbar Bereich über dem Footer */
.footer-topbar {
  border-bottom:1px solid #79ada8;
  padding: 8px clamp(16px, 4vw, 32px);
  display:flex;
  justify-content: flex-start;
  align-items:center;
  gap:12px;
  font-size: 0.95rem;
  margin-bottom: 50px;
  margin-top: -20px;
}

/* Breadcrumb */
.breadcrumb {
  display:flex;
  align-items:center;
  gap:6px;
  color: var(--footer-dim);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.breadcrumb a {
  text-decoration:none;
  color: var(--footer-text);
}
.breadcrumb a:hover {
  text-decoration:underline;
}
.breadcrumb .sep {
  color: var(--footer-dim);
}
.breadcrumb .current {
  font-weight:500;
}

/* Scroll-to-top Button */
.scroll-top {
  background:none;
  border:none;
  font:inherit;
  color: #fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:6px;
  font-weight: 400;
  margin-left: auto;
}
.scroll-top:hover {
  text-decoration:underline;
}

/* Logo-Größe in der Topbar (falls benötigt) */
.footer-topbar img { 
    height:55px; 
    width: auto; 
    display: block;
    margin-right: 30px;
    margin-left: -35px;
    align-items: flex-start;
}



.site-footer{
  background: #000;
  color: #fff;
  border-top: 0px solid #b8b8b8;
}

.footer-wrap{
  max-width: min(1280px, 92vw);
  margin: 0 auto;
  padding: 24px 0;
}

.footer-box{
  border:1px solid var(--footer-border);
  border-radius:8px;
  padding: clamp(16px, 2.2vw, 32px);
}

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



.footer-brand .footer-meta{
  list-style:none;
  padding:0;
  margin:0;
  font-size: 0.95rem;
  line-height:1.5;
  color: #fff;
  font-weight: 200;
}

.footer-col .footer-title,
.footer-brand .footer-title,
.footer-proof .footer-title{
  font-size: 1rem;
  font-weight: 300;
  margin: 0 0 8px;
  color: #fff;
}

.footer-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  gap:8px;
  margin-bottom: 20px;
}

.footer-list a{
  text-decoration:none;
  color: #fff;
  opacity:0.9;
  font-weight: 200;
  font-size: 16px;
}
.footer-list a:hover{ opacity:1; text-decoration: underline; }

.footer-proof .proof-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.proof-slot{
  border:1px dashed var(--footer-border);
  border-radius:10px;
  aspect-ratio: 3 / 2;
  display:flex;
  align-items:center;
  justify-content:center;
  background:transparent;
}

.proof-slot img{
  max-width: 80%;
  max-height: 70%;
  object-fit:contain;
  opacity:.8;
  transition: opacity .2s ease, filter .2s ease, transform .2s ease;
}

.proof-slot:hover img{
  opacity:1;
  filter:none;
  transform: translateY(-1px);
}

.footer-bottom{
  border-top:1px solid #49a5a2;
  margin-top: 40px;
  padding-top: clamp(18px, 1.6vw, 20px);
  font-size: 1.0rem;
  color: #fff;
  font-weight: 300;
  display:flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap:10px;
}


/* =========================
   FOOTER – RESPONSIVE POLISH
   ========================= */

/* --- Topbar: robustes Wrapping, saubere Trunkierung --- */
.footer-topbar{
  display: flex;
  flex-wrap: wrap;                 /* erlaubt Umbruch */
  gap: clamp(8px, 2vw, 16px);
  align-items: center;
  row-gap: 6px;
  min-width: 0;                    /* erlaubt Trunkierung von Kindern */
}
.footer-topbar img{
  height: 40px;
  margin: 0 14px 0 0;              /* keine negativen Margins mobil */
}

/* Breadcrumb jederzeit ellipsieren */
.breadcrumb{
  min-width: 0;
  flex: 1 1 auto;                  /* nimmt Restbreite */
  overflow: hidden;
  text-overflow: ellipsis;
}
.scroll-top{ flex: 0 0 auto; }

/* Tablet: Layout etwas kompakter */
@media (max-width: 1024px){
  .footer-topbar{
    padding: 8px clamp(14px, 4vw, 24px);
    gap: 10px;
  }
  .footer-topbar img{ height: 36px; }
}

/* Phone: Elemente stapeln, Scroll-Top nach unten */
@media (max-width: 640px){
  .footer-topbar{
    flex-wrap: nowrap;                 /* nebeneinander statt stapeln */
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    gap: 10px;
  }
  .footer-topbar img{ height: 32px; margin: 0 8px 0 0; }
  .breadcrumb{
    order: 0;
    flex: 1 1 auto;                    /* nimmt Restbreite */
    min-width: 0;                       /* erlaubt Ellipsis */
    width: auto;
    font-size: .92rem;
  }
  .scroll-top{
    order: 0;
    margin-left: 8px;
    flex: 0 0 auto;
    font-size: .95rem;
  }

  .footer-col{ border-top:1px solid var(--footer-border); padding-top:12px; }

  /* Standard: Mobile zeigt alle Links sichtbar */
  .footer-col .footer-title{
    display:flex; justify-content:space-between; align-items:center;
  }
  .footer-col .footer-title::after{ content:""; } /* keine Plus/Minus, wenn nicht kollabierbar */
  .footer-col .footer-list{ display:grid; margin-top:8px; }

  /* Optional: Nur wenn .is-collapsible gesetzt ist, als Akkordeon verhalten */
  .footer-col.is-collapsible .footer-title{ cursor:pointer; }
  .footer-col.is-collapsible .footer-title::after{ content:"+"; font-weight:700; }
  .footer-col.is-collapsible.is-open .footer-title::after{ content:"–"; }
  .footer-col.is-collapsible .footer-list{ display:none; }
  .footer-col.is-collapsible.is-open .footer-list{ display:grid; }
  .footer-col.is-collapsible:focus-within .footer-list{ display:grid; } /* Tastatur/Screenreader */

  /* Größere Tap-Ziele auf Mobil */
  .footer-list a{
    display:block;
    padding: 10px 0;
  }
}
/* Micro-Breakpoint für ultra-schmale Bildschirme */
@media (max-width: 380px){
  .footer-topbar{ flex-wrap: wrap; }
  .breadcrumb{ order: 2; width: 100%; }
  .scroll-top{ order: 3; margin-left: 0; }
}

/* --- Footer-Container --- */
.site-footer{ overflow-x: clip; }
.footer-wrap{ padding: clamp(18px, 3vw, 28px) 0; }

/* --- Grid: große → mittlere → kleine Geräte --- */
.footer-grid{
  grid-template-columns: 1.3fr 1fr 1fr 1fr 1.3fr;
  gap: clamp(14px, 2vw, 24px);
}
@media (max-width: 1200px){
  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr 1.2fr; /* 4 Spalten */
  }
  .footer-proof{ grid-column: 1 / -1; }
  .footer-proof .proof-grid{ grid-template-columns: repeat(6, 1fr); }
}
@media (max-width: 900px){
  .footer-grid{
    grid-template-columns: 1.2fr 1fr 1fr;       /* 3 Spalten */
  }
}
@media (max-width: 640px){
  .footer-grid{
    grid-template-columns: repeat(2, 1fr);      /* 2 Spalten nebeneinander */
    gap: 14px;
  }
  /* Brand/Proof über volle Breite lassen */
  .footer-brand,
  .footer-proof{ grid-column: 1 / -1; }
}

/* --- Spalten & Listen --- */
.footer-title{ line-height: 1.2; }
.footer-list a{ padding: 2px 0; }               /* vergrößert Tap-Target leicht */

/* Akkordeon-Optik: ohne JS wenigstens per :focus-within nutzbar */
@media (max-width: 640px){
  .footer-col{ border-top:1px solid var(--footer-border); padding-top:12px; }

  /* Standard: Mobile zeigt alle Links sichtbar */
  .footer-col .footer-title{
    display:flex; justify-content:space-between; align-items:center;
  }
  .footer-col .footer-title::after{ content:""; } /* keine Plus/Minus, wenn nicht kollabierbar */
  .footer-col .footer-list{ display:grid; margin-top:8px; }

  /* Optional: Nur wenn .is-collapsible gesetzt ist, als Akkordeon verhalten */
  .footer-col.is-collapsible .footer-title{ cursor:pointer; }
  .footer-col.is-collapsible .footer-title::after{ content:"+"; font-weight:700; }
  .footer-col.is-collapsible.is-open .footer-title::after{ content:"–"; }
  .footer-col.is-collapsible .footer-list{ display:none; }
  .footer-col.is-collapsible.is-open .footer-list{ display:grid; }
  .footer-col.is-collapsible:focus-within .footer-list{ display:grid; } /* Tastatur/Screenreader */

  /* Größere Tap-Ziele auf Mobil */
  .footer-list a{
    display:block;
    padding: 10px 0;
  }
}

/* --- Proof/Badges --- */
.footer-proof .proof-grid{ gap: 10px; }
.proof-slot{ aspect-ratio: 3 / 2; }
@media (max-width: 900px){
  .footer-proof .proof-grid{ grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 640px){
  .footer-proof .proof-grid{ grid-template-columns: repeat(3, 1fr); }
  .proof-slot img{ max-width: 78%; max-height: 68%; }
}

/* --- Bottom Zeile --- */
.footer-bottom{
  gap: 10px;
  font-size: .98rem;
}
@media (max-width: 640px){
  .footer-bottom{
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    font-size: .95rem;
    padding-inline: 12px;
  }
}

/* --- Feinschliff Farben/Abstände (optional, wirkt „leichter“) --- */
.footer-box{ padding: clamp(14px, 2vw, 24px); }
.footer-brand .footer-meta{ font-size: .95rem; line-height: 1.55; }