/*
 * RH Site-Footer - gescoptes Stylesheet fuer inc/rh-footer.php (alle RH-Seiten).
 *
 * WICHTIG: Diese Datei ist bewusst KOMPLETT ASCII (keine Umlaute/Sonderzeichen in
 * Kommentaren!). Ein nicht-UTF-8-sicherer Minifier verschluckt am Mehrbyte-Zeichen
 * sonst die direkt folgende Regel. Siehe CLAUDE.md S3.
 *
 * Das <footer> traegt selbst .rh-page (es steht ausserhalb des <main>), damit die
 * Design-Tokens greifen. Die Tokens liefert das jeweilige Seiten-CSS bzw. der
 * Inline-Token-Fallback des Templates - hier werden KEINE Tokens neu definiert.
 *
 * Hardening: Salient stylt Links und h2 global und teils mit !important. Deshalb
 * die Doppelklasse .rh-page.rh-sitefooter + !important auf Farbe/Groesse.
 */

/* ============================================================
   Grundflaeche (dunkler Anker am Seitenende)
   ============================================================ */
.rh-page.rh-sitefooter{
  background:var(--rh-green-deep);
  color:var(--on-dark-muted);
  padding:76px 0 0;
  margin-top:0;
  /* No-JS-Fallback fuer Full-Bleed; das Modul-JS misst zusaetzlich exakt nach. */
  width:100vw;max-width:100vw;
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow-x:clip;
}

/* Eigene Container-Regel statt Verlass auf das Seiten-CSS: .rh-container ist dort
   NICHT ueberall identisch definiert (eine Seite setzt sie ohne seitliches Padding
   -> Footer-Text klebte am Rand). Hoehere Spezifitaet (0,3,0) gewinnt gegen die
   Seiten-Regel (0,2,0), damit der Footer auf allen 22 Seiten gleich sitzt. */
.rh-page .rh-sitefooter .rh-container{
  max-width:1160px;margin:0 auto;padding:0 32px;
}

.rh-page .rh-sitefooter__grid{
  display:grid;
  grid-template-columns:1.7fr 1.8fr 1fr 1fr;
  gap:48px 40px;
  align-items:start;
}

/* ============================================================
   Marken-Spalte
   ============================================================ */
.rh-page .rh-sitefooter__logo{
  display:inline-flex;align-items:center;gap:10px;
  text-decoration:none;margin-bottom:18px;
}
.rh-page .rh-sitefooter__logo img{display:block;width:30px;height:30px;}
.rh-page .rh-sitefooter__logo span{
  font:700 26px/1 var(--font-display);
  letter-spacing:var(--tracking-tight);
  color:var(--on-dark);
}
.rh-page .rh-sitefooter__claim{
  margin:0 0 12px;max-width:34ch;
  font:400 15px/1.6 var(--font-sans);
  color:var(--on-dark-muted);
}
.rh-page .rh-sitefooter__meta{
  margin:0 0 24px;
  font:500 12px/1.5 var(--font-mono);
  letter-spacing:var(--tracking-label);
  color:var(--rh-green);
}

/* Primaer-CTA als volle Pill (CLAUDE.md S10). */
.rh-page .rh-sitefooter__cta{
  display:inline-flex;align-items:center;gap:8px;
  padding:13px 24px;border-radius:var(--r-pill);
  background:var(--rh-green);color:var(--rh-green-deep);
  font:600 15px/1 var(--font-sans);
  text-decoration:none;
  transition:background .18s ease,transform .12s ease;
}
.rh-page .rh-sitefooter__cta:hover{background:var(--rh-green-600);}
.rh-page .rh-sitefooter__cta:active{transform:scale(.97);}

/* ============================================================
   Link-Spalten
   ============================================================ */
.rh-page .rh-sitefooter__h{
  margin:0 0 16px;
  font:600 12px/1.4 var(--font-mono);
  letter-spacing:var(--tracking-caps);
  text-transform:uppercase;
  color:var(--rh-green);
}
.rh-page .rh-sitefooter__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:11px;
}
/* Branchen: 10 Eintraege -> zwei Spalten, damit der Footer nicht in die Laenge geht. */
.rh-page .rh-sitefooter__col--wide .rh-sitefooter__list{
  grid-template-columns:1fr 1fr;
  gap:11px 24px;
}
.rh-page .rh-sitefooter__list a{
  font:400 15px/1.4 var(--font-sans);
  color:var(--on-dark-muted);
  text-decoration:none;
  transition:color .16s ease;
}
.rh-page .rh-sitefooter__list a:hover{color:var(--on-dark);}

/* ============================================================
   Bodenleiste
   ============================================================ */
.rh-page .rh-sitefooter__bottom{
  margin-top:64px;padding:22px 0 26px;
  border-top:1px solid var(--rh-line-dark);
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;flex-wrap:wrap;
}
.rh-page .rh-sitefooter__bottom p{
  margin:0;
  font:500 12px/1.5 var(--font-mono);
  letter-spacing:var(--tracking-label);
  color:var(--on-dark-muted);
}
.rh-page .rh-sitefooter__bottom a{
  color:var(--on-dark-muted);text-decoration:none;
  border-bottom:1px solid transparent;
  transition:color .16s ease,border-color .16s ease;
}
.rh-page .rh-sitefooter__bottom a:hover{
  color:var(--on-dark);border-bottom-color:var(--rh-green);
}

/* ============================================================
   Fokus (CLAUDE.md S12: gruener Ring auf allen interaktiven Elementen)
   ============================================================ */
.rh-page .rh-sitefooter a:focus-visible{
  outline:none;box-shadow:var(--ring);border-radius:6px;
}

/* ============================================================
   Theme-Hardening gegen Salient (Link-Farben, h2-Groesse)
   ============================================================ */
.rh-page.rh-sitefooter .rh-sitefooter__h{
  font:600 12px/1.4 var(--font-mono)!important;
  letter-spacing:var(--tracking-caps)!important;
  color:var(--rh-green)!important;
  text-transform:uppercase!important;
}
.rh-page.rh-sitefooter .rh-sitefooter__list a,
.rh-page.rh-sitefooter .rh-sitefooter__bottom a{
  color:var(--on-dark-muted)!important;text-decoration:none!important;
}
.rh-page.rh-sitefooter .rh-sitefooter__list a:hover,
.rh-page.rh-sitefooter .rh-sitefooter__bottom a:hover{color:var(--on-dark)!important;}
.rh-page.rh-sitefooter .rh-sitefooter__logo span{color:var(--on-dark)!important;}
.rh-page.rh-sitefooter .rh-sitefooter__cta{
  color:var(--rh-green-deep)!important;text-decoration:none!important;
  border-radius:var(--r-pill)!important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1000px){
  /* Marke ueber die volle Breite, Link-Spalten darunter nebeneinander. */
  .rh-page .rh-sitefooter__grid{grid-template-columns:1.6fr 1fr 1fr;gap:40px 32px;}
  .rh-page .rh-sitefooter__brand{grid-column:1 / -1;}
}

@media (max-width:760px){
  .rh-page.rh-sitefooter{padding-top:56px;}
  .rh-page .rh-sitefooter .rh-container{padding:0 18px;} /* Gutter mobil (CLAUDE.md S9). */
  .rh-page .rh-sitefooter__grid{grid-template-columns:1fr 1fr;gap:36px 24px;}
  /* Branchen bleiben zweispaltig, brauchen aber die volle Breite. */
  .rh-page .rh-sitefooter__col--wide{grid-column:1 / -1;}
}

@media (max-width:480px){
  .rh-page .rh-sitefooter__grid{grid-template-columns:1fr;}
  .rh-page .rh-sitefooter__col--wide .rh-sitefooter__list{grid-template-columns:1fr;}
  .rh-page .rh-sitefooter__bottom{
    flex-direction:column;align-items:flex-start;gap:10px;margin-top:44px;
  }
  .rh-page .rh-sitefooter__cta{width:100%;justify-content:center;}
}